Hatena::Groupsubtech

#生存戦略 、それは

-> 09 { 04 / 15 }

はてなブックマーク Firefox 拡張をエンジニア視点から説明など・Hacks もあるよ!

23:02 | はてなブックマーク - はてなブックマーク 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+ボタンを表示したい人は、前もってツールバーの空き領域を右クリックして、「カスタマイズ」からメインで使っているツールバーにボタンをドラッグで移動しておく。

ステータスバーを右クリックして「設定」(べつにここから設定しなくても良い) →編集画面→自分のタグ一覧の表示、を外して追加画面での表示を高速化する。「設定」→ステータスバー→「マウスオーバーで自動コメントビュワー表示」にチェックしておく。

没コンテンツ

を、拡張入れたブラウザでアドレスバーに入れると…。没です\(^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)もする。

ブックマークレット経由で拡張パネルを開く

ブックマークレット経由ではてなブックマーク拡張のパネルを開く - 冬通りに消え行く制服ガールは?夢物語にリアルを求めない。 - subtech とか使えばいいと思う(要: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 にすると、表示されるようになります。

ソースコードを見たい

ギッハブで!オープンソースで開発してます。

*1vimp使い以外

teramakoteramako2009/04/16 00:28スレ違いなのは承知していますが、ご報告。
http://d.hatena.ne.jp/teramako/20090414/p1
で書いたのですが、タグの検索大文字/小文字を区別してしまうので何とか対応できないでしょうか。
特にサイドバーのタグツリーで大文字/小文字違いで分離してしまって出てしまうので。
自分ではちょっとコードを追い切れなくて...

secondlifesecondlife2009/04/16 01:21どもども。
最初に入れたタグの表記に従う(web のはてブの仕様)ようには、できそうなので考えてみます。再同期が必要になりそうですが…。

secondlifesecondlife2009/04/16 18:20github master では、どちらか(Perl と perl があった場合は、最近つけられたほうの表記を優先)し、case-insenstive で扱うように変更するようにしてみました。

teramakoteramako2009/04/17 18:45ありがとうございます!