ツイッター公式サイトではてなブックマークできるようにする(GreasemonkeyとAndroid用代替アドオンで)

arekorebibouroku.hateblo.jp

上の記事に先日、はてなブックマークのコメントがありました。

はてなブックマークができない問題 - あれこれ備忘録〜はてなブログ支店〜

[はてなブックマーク]

[仕様]

[HTTP]

[bookmarklet]

[スクリプト]

旧タイプもTwitterでは使えないような気がします。 / （Firefoxの旧バージョンでは問題無いので、ブラウザ側の仕様ぽい）
2015/10/08 13:28

b.hatena.ne.jp

たしかにできませんでした。

Greasemonkeyという、ページにデザインや機能を埋め込むことができるアドオンがあります。

私は使ったことがなかったのですが、少し試してみることにしました。

あまり綺麗にはなりませんでしたが、動くものはできました。

参考は以下

Firebugで作るGreasemonkeyスクリプト〜入門と実践(From Kanasan.JS) | Blog.37to.net

Javascriptがほとんどできないので、この他必要なものは全部ネットで調べました。

アイコンははてなのプロフィールに表示されるはてなブックマークのアイコンを以下でテキストに変換して使いました。

[JavaScript] dataスキームURI生成（画像データのBase64変換）

イメージは下のようになってます。

f:id:t_massann:20151009170429j:plain

赤丸で囲ったところにアイコンが追加されて、クリックするとはてなブックマークのブックマーク追加ページに遷移します。

綺麗に配置する方法がわからかったのでこれで妥協しました。

他にも問題はあって、各ツイートページでのみ動作するようにしたところ、TLページからの遷移ではアイコンが表示されず、再読み込みしなくてはいけません。

ツイートをブックマークすることがほとんどないのでこれで良しとします。

普段はブックマークレット使えますし。

Androidで使えるかどうかが問題ですが、一応、Android版Firefoxのアドオンページにはあることはあります。

addons.mozilla.org

ただ、新しいバージョンに対応していないのかインストールできませんでした。

調べてみた所、同様の機能を持ったアドオンがありました。

addons.mozilla.org

ドイツ語なのですが、設定メニューなどは英語なので使えないことはありません。

一応、ソースを載せておきます。

// ==UserScript==
// @name        Hatena Bookmark Link
// @namespace   massann
// @description Add a link to add Hatena Bookmark the tweet page.
// @include     https://twitter.com/*/status/*
// @version     1
// @grant       none
// ==/UserScript==
(function() {
 var data = 'data:image/gif;base64,'+
    'R0lGODlhIAAgAKIEAFJ55////ypfyYWl+v///wAAAAAAAAAAACH5BAEAAAQALAAAAAAgACAAAAOb'+
    'SLrc/jDKOaq9OGMAmP5gxXkDZ55oegoCqb4w68L02i5irct4iQbAoPDFU+ROwmSAeDP6kEEoMFUk'+
    'HE1DbBRVvXKy361tJl1qp9ym9XlWik1ddtj95sRT4Pa4h68D8nc/foBqXn+Db4FlfWh2hXKHjXpw'+
    'j4x0ZntOlnRUlTo1ip9MZKIqoaVpDI4srK2ur62qALC0tVUTuLm6uAkAOw==';
 var newLink = document.createElement('a');
 newLink.setAttribute('href', 'http://b.hatena.ne.jp/add?mode=confirm&title='+escape(document.title)+'&url='+escape(location.href));
 var icon = document.createElement('img');
 icon.setAttribute('src', data);
 newLink.appendChild(icon);
 var newDiv = document.createElement('div');
 newDiv.appendChild(newLink);
 var elements = document.getElementsByClassName('ProfileTweet-action ProfileTweet-action--reply');
 elements[0].parentNode.appendChild(newDiv);
 })();