hagino3000's blog

平成アーカイブス (更新停止)

Firefoxでフォトリーディング

フォトリーダーの方々がこのブログを見てるとは到底思えないのですが、web開発エンジニア向けテクニックとしてメモ。

はじめに

通常のフォトリーディングは紙の本を実際に手に取って行いますが、web上のリソースをフォトリーディングできないか?と疑問に思ったので挑戦してみました。対象とするweb上のリソースというのはプログラミング言語の仕様等、多数のHTMLページから成る文章を想定します。実際の本と異なり、次のページに行くのにリンクをクリックしなければならなかったり、初期状態のブラウザでは到底フォトリーディング出来ないため、Firefoxのアドオン機能を使っていきます。

用意するもの

各々の詳細は割愛します。(適当にググってね!という意)

webブラウザ
  • Firefox本体最新版(今だとFirefox3 RC3)
その他

Tumblrのアカウント

リンクを辿る動作はAutoPagerizeまかせ

webブラウザでページを捲る動作に相当するのはpagedownキー及び、次のページへのリンククリックになります。但し、ページ最下部まで文書を目視した後にリンクを探してクリックするのではフォトリーディングの流れが妨げられる上に操作が大変です。なので、この処理はFirefoxのアドオンであるGreasemonkeyで動作するAutoPagerizeに任せます。
AutoPagerizeを有効化すれば、ページ下部付近まで画面がスクロールした段階で次のページの内容を読み込んで任意の場所に追加してくれるため、pagedownキー以外の操作が不要になります。チャントを唱えながらリズムを保ってpagedownキーを押し続けるだけ、本を捲るより簡単ですね!*1


参考
Greasemonkey - Mozilla Firefox まとめサイト
http://firefox.geckodev.org/index.php?Greasemonkey


ここで一つ問題なのが、読みたい文書のSITEINFOをautopagerize.user.jsに書き込んでやる必要があります。ちゃんとしたマークアップがされていれば簡単ですが、javaの言語仕様*2のページなんかだとbody直下にテキストが置かれていたりするのでXPathが面倒な事になります。

例:The Java Language Specification, Third Edition の場合

url:          'http://java.sun.com/docs/books/jls/third_edition/html/*',
nextLink:     '//a[contains(string(.), "Next")][1]',
pageElement:  '(//h1)|(//h2)|(//p)|(//blockquote)|(//h3)|(//hr)|(//ul)|(//dl)|(//text())',
exampleUrl:   'http://java.sun.com/docs/books/jls/third_edition/html/names.html',
insertBefore: '/html/body/hr[3]'

それ以前にXPathわかんねぇー、という場合は適当にググると出てきます。SITEINFO書くだけなら簡単です。

付箋の代わりにマーカーで活性化

フォトリーディングが終わったら、次は活性化です。活性化で欠かせないのがメモと付箋。メモはともかく、付箋はブラウザの標準機能として無いので、Wired-Markerというマーカーを使います。このアドオンは、ブラウザに表示されている文書に対してマーカーが引けるという優れもの、後で参照もできるので付箋感覚で使えます。


Wired-Marker ホーム:ブックマーク、情報収集・整理・共有のためのFirefox無料アドオン
http://www.wired-marker.org/#1.5.08052000


また、後で読み返したい段落や画像があったらマウスで選択して右クリックメニュー(Tomblooの機能)からTumblrへポストします。Tomblooは非同期でポストする処理を行ってくれますので、待たされる事がありません。


参考
Drastic? Dramatic? Tumblr!!:第5回 FirefoxTumblrをパワーアップ/ソーシャルメディアの価値を高めるReBlog|gihyo.jp … 技術評論社
http://gihyo.jp/lifestyle/serial/01/tumblr/0005

まとめ

紙媒体がメインとなるフォトリーディングですが、web上のリソースでもなんとかなりそうです。とはいえXPathを自分で書かないといけない等、非IT系な人にはハードルが高すぎる内容なので、もっと簡単にできるよ!という手法があれば是非教えて欲しいです。

次はソースコードフォトリーディング手法なんかを調べたいと思います。

*1:Firefoxのスムーススクロール機能がONになっていて滑らかに動かない場合はOFFにすると良いです

*2:ちなみに、日本語化された書籍も出版されています