はてなブックマーク Firefox 拡張をエンジニア視点から説明など・Hacks もあるよ！
はてなブックマーク Firefox 拡張をエンジニア視点から説明など・Hacks もあるよ！
はてなブックマーク Firefox 拡張が正式リリース ( http://b.hatena.ne.jp/guide/firefox_addon ) されたので、エンジニア(個人)的視点で説明や実装やあれこれをいろいろ。
何が便利なの?
個人的には、はてブ追加が高速、ローカル検索が高速の二点。次点でコメントビュワー。
はてブ追加が高速
ブックマークレットに比べ、サーバのレスポンスを待たなくてよいので高速。タグもローカルにデータがあるので表示にロードされてる。XUL/Migemo が使えるので、IME 起動しなくてもタグ補完も可能。また、保存時もサーバのレスポンスを待たず、エラー時だけコールバックで通知してるので、体感速度も速い(Tombloo がとっている方法)。あとタイムアウトチェックやサーバの 500 の時のリトライもやってるので、メンテやあからさまなサーバサイドの不具合以外は保存に失敗することがまず無い。
設定で、「自分のタグ一覧の表示」を外すと、より表示が高速になるので、タグをマウスクリックでしない場合はチェックを外した方がよい。
ローカル検索が高速
ローカルの SQLite にデータを入れていて、そこから検索するので高速。またロケーションバーから即座に検索可能なので、場所をとらない。ロケーションバーはほとんどの人*1が表示しており、そこからすぐ検索できるのは便利。関係ないけどロケーションバーであれこれする、という機能は Firefox 本体にも Firefox.next で実装されるみたいで楽しみ。
検索では思いのほか SQLite の like 検索が高速なのに驚いた。はてブ検索では、検索ワードから URL, Title, コメント にマッチしたものを表示していて、それ専用の search_data だかかんらかの検索用カラムがある。ここにデータ入れるときに全部小文字にして、SQLite のプラグマで case-senstive になるようにしている(SQLite 標準での like は case-insenstive なマッチ)。これで Like 速度が約二倍に。この場合、10 件のデータを引くのに、50000 件のブックマークデータで、前後方一致の like 検索で平均 200ms ぐらい。
コメントビュワー
自分であんまり使わないかなー、と思ったけど実装してみて意外と便利でいまは多用してる。標準では、15 より表示すべきコメントが多ければ、コメントの無いブックマークは表示せず、15 件以下なら、コメントある無いにかかわらず表示するようになっている。これはスクロールバーができるだけでないでコメントを読めるようにしたかったため。
オプションで、「マウスオーバーで自動コメントビュワー表示」にチェックを入れると、SBMカウンターっぽく、マウスオーバーでポップアップするようになる。また、その場合はコメントビュワーからカーソルを外して、300ms ぐらいたつと自動で隠れる。ウェイトを入れてるのは、ちょっとマウスがずれてコメントビュワーが閉じちゃった現象を防ぐため。Timer クラス作って、cancel できるようにしておくと、ここら辺の実装は楽になる。
あと最初は 3000 件とかコメントがあるエントリーの場合、馬鹿正直に全部レンダリングしててめちゃくちゃ重かった(1,2秒かかる)んだけど、画面に表示されるコメントは一部なので、適当に非同期レンダリングにしたらだいぶ改善された。
よくありそうな質問
Tombloo の方が便利じゃない？
Tombloo は自己ソーシャル化的なツールだと思っており、URLを投稿のみならず、引用、画像、reblog、とある DOM の一部分を画像として投稿をクロスポスト、などなど様々な機能をもっていて。クロスポストしたい、データを分散させたい、ソーシャルブックマークとしてのはてブではなくツールとしてのはてブとしてはてブは利用している、はてブのデータから検索は不必要、だったら Tombloo を使うのが良いと思う。
ただ、はてブをメインのソーシャルブックマークとして使っていて、他サービスにクロスポストしない、reblog などもしない場合は、はてブ拡張のほうが便利なんじゃないかなぁ。設定レスで動くし。
SBM カウンターの方が便利じゃない？
ブックマークカウントとコメントビュワーの機能に的を絞った場合、SBM カウンターは他のソーシャルブックマークのコメントも横断して見れて便利だと思う。
ただはてなブックマーク拡張の場合、現時点ではカウント表示が高速 (SBM カウンターはコメント込み込みの JSON データをロードしている、はてブ拡張はカウント自体は別 API を叩いている)でデータ転送量も少ないというメリットがある。
はてなブックマーク拡張 Hacks
おすすめ設定
主にシンプルに使いたい人向けへの、個人的なおすすめ設定。
表示 -> ツールバーで 「はてなブックマークツールバー」をオフに。画面が広くなる。サイドバーやB+ボタンを表示したい人は、前もってツールバーの空き領域を右クリックして、「カスタマイズ」からメインで使っているツールバーにボタンをドラッグで移動しておく。
ステータスバーを右クリックして「設定」(べつにここから設定しなくても良い) →編集画面→自分のタグ一覧の表示、を外して追加画面での表示を高速化する。「設定」→ステータスバー→「マウスオーバーで自動コメントビュワー表示」にチェックしておく。
没コンテンツ
- chrome://hatenabookmark/content/index.html
を、拡張入れたブラウザでアドレスバーに入れると…。没です＼(^o^)／
はてなバーも使ってて、はてブ拡張のツールバーもあると画面が狭いよ
もしはてなバーを、サブアカウントのユーザ切り替えメインで使っていた場合、はてなバーは使わずに Multi user hatena :: Firefox Add-ons というユーザ切り替えだけを行う拡張を使う、という方法が。
extensions.multiuserhatena.showStatusLabel
を prefs(about:config) で false にすると、ユーザアイコンのみ表示され、ステータスバーを広く使うこともできる。
LDR からはてなブックマーク拡張経由で投稿したい
通常のリンクなら、リンク右クリックではてブに追加もできるけど
の Greasemonkey スクリプトを入れると LDR のエントリーの下部に B! がつくので、それをクリックすれば標準の設定では、はてなブックマーク拡張の追加画面が出ると思う。
ショートカットキーで開きたい場合は chrome 権限が必要になるのでいろいろ面倒に。vimperator を使えばできたり(vimperator + はてブ拡張は LDR に一部対応 - 8時40分が超えられない - subtech)もする。
ブックマークレット経由で拡張パネルを開く
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなグループ日記 - 機能変更、お知らせなど とか使えばいいと思う(要：chrome 権限なので、userChrome を分かってないと大変)。
B! をクリックして拡張を開く、というのは gBrowser のイベントでやってるんだけど、それが通常の chrome 権限のない window からでは、たぶんセキュリティのためイベントを受け取れないんだけど、上記の方法では、chrome 権限で addEventListener の第四引数 (そんなんあったんだ、という…) を使って chrome 権限が無くても UIEvent 待ち受けて行ってる、という。
vimperator から利用したい
Vimperator ではてなブックマーク拡張を使う - hatena-bookmark-xul - GitHub に書いてあります。
chrome 権限から弄りたいんだけど、どんなインターフェイス叩けばいいの？
主なインターフェイス。将来的に仕様は変わる可能性があります。
拡張パネルを開く
hBookmark.AddPanelManager.showPanel(url);
hBookmark.AddPanelManager.toggle();
コメントビュワーを開く
hBookmark.CommentViewer.show(url);
hBookmark.CommentViewer.toggle(url);
検索して結果を受け取る
hBookmark.model('Bookmark').search(word, limit);
同期をとる
hBookmark.Sync.sync();
サイドバーをトグルする
toggleSidebar('viewHBookmarkSidebar');
デバッグログを表示したい
prefs の
extensions.hatenabookmark.debug.log
を true にすると、表示されるようになります。
ソースコードを見たい
ギッハブで！オープンソースで開発してます。
*1：vimp使い以外
