2010年 09月 01日

Chemr-js

subtech

Chemr という .chm を読む Mac 向けのツールを作っていたのですが、環境の変化か何かで動かなくなってしまい、いろいろやってみたけどどうやっても直らなかったので代替を考えて実装しなおしました。

やはり、普段使ってるフィールドの技術でつくるのが最もメンテナンスしやすいと思い、ブラウザ+Greasemonkey で実現することにしました。実際のところ、僕が欲しいのは .chm を読むツールではなく、適切にインデックスが貼られたドキュメントをインクリメンタルサーチして統一した操作方法で読めるツールなので、別に .chm じゃなくても良いのです。高級なリファレンスツールやら拡張やらを使用していらっしゃるかたには必要ないかと思いますが個人的には便利に使えるようになったので紹介したいと思います。

使いかた

対応サイトにアクセスすると検索ボックスがでてくる

C-l (Cmd-L) で検索エリアにフォーカス、C-n で次を選択、C-p で前を選択、tab で最上位にある候補を補完、C-u でクリア、C-w でワード削除などとなっています。検索ボックスが邪魔なら ESC で消せる。C-l したらもっかいでてくる。

スペースは正規表現の .* みたいにふるまいます。pla midd とかで Plack::Middleware がマッチ

各種サイトにアクセスしたときにそのサイトをクロールしてインデックスをつくります。サイトによっては時間かかりますが大抵すぐおわります。 (Android のドキュメントとかは2000ページ近くクロールするので40分ぐらいかかりますし、静的ファイル相手とはいえ普通にDOSってる感があるので逮捕されても僕は責任とれません)

対応サイト

とかにいくと勝手にサーチウィンドウがでます。Android のサイトはこわいのでリンクはりません。

工夫した点

キーイベント

iframe を使っているのですが、iframe 内部にフォーカスがあるとショートカットキーが効かなくなってうざいので少々頑張っています。具体的には、iframe 内部の場合、親ウィンドウにキーイベントを伝播 (postMessage) するようにしてあります。postMessage なのは iframe 内のリンク遷移で外部ドメインにいってしまってもいいようにです。

高速な検索

mala さんが昔つくっていた http://la.ma.la/blog/diary_200604021538.htm のコードを参考にしつつ、一定数ヒットしたものを適当に好みでスコアリングして表示しています。URL のデータを追加したりしてるのでほんのすこし工夫してます。

html 入れ替え

サイトによってサーチウィンドウのフォントが変わったりして嫌だったので document.replaceChild(html, document.documentElement) という荒技をしてます。

対応サイトにアクセスしたとき、ロードしたページは iframe の中でロードされなおされ、本来読まれたページは chemr.user.js が乗っ取ります。ページ内のリンクは iframe の中なので、クリックしてもいちいち index を読みなおすこともなく快適です。

独立したアプリケーションのように

レポジトリに createapp.rb というのが入っていて、これをうまく使うと普段使いのブラウザとは別に、リファレンスひき専用のブラウザをつくれて便利です。特に Mac の場合、Cmd-Tab でアプリ間しか移動できないので必須です。

手順としては

  • 既存の Firefox プロファイルに加え "chemr" という名前のプロファイルをつくる。
  • createapp.rb を実行する ( /Application/Firefox.app と chemr というプロファイルが必要です)
  • /Application/Chemr.app ができるのでこれを起動
  • 普通の Firefox と同じように Greasemonkey (ほか好みで Stylish など) をインストール
  • about:config で dom.storage.default_quota を大きく (しなくてもいいけど、100MB ぐらいにしとけば十分)
  • chemr.user.js をインストール
  • アドレスバーを消すとか、セッション復帰を有効にしたりする

です。非常に便利です。普段 Firefox を使わない方なら createapp.rb 使わず、普通に一個 profile 潰してもいいと思います。

❤️ 投げ銭する