あれこれ備忘録@はてなブログ

勉強したことやニュースや出来事を備忘録として書いていきます

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

arekorebibouroku.hateblo.jp

 

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

 

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


旧タイプも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で使えるかどうかが問題ですが、一応、AndroidFirefoxのアドオンページにはあることはあります。

 

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);
 })();

 

本当は恥ずかしくて見せられるものでもないんですが。

動くというだけで、いろいろおかしいところがありますし。

Androidの方はこれを作る前に作ってみた長押ししたらブックマークでも良かったような気もします。

リンクを新しいタブで開くとか文字の選択と機能がかぶるので、少し長めの時間に設定して使ってみましたが、それなりに使えました。

だれか、Greasemonkeyスクリプトで完成度の高いモノを作ってくれませんか?

let.hatelabo.jp

こういうサービスもありますから、もしかしたら既にあるのかも知れません。

あ、これはブックマークレットでしたね・・・

広告を非表示にする