AutoPagerize用のXPathをかんたんに作るためのブックマークレット AutoPagerize IDE

GreasemonkeyのスクリプトでAutoPagerizeというものがあります。これはgoogleの検索結果のように何ページにもページが別れているときに、次のページを表示するためのリンクを押さなくても自動的に次のページの中身がAjaxで継ぎ足されて表示されるというものです。
オモロ 検索エンジン SAGOOL サグール の検索結果のページがAutoPagerizeとおなじしくみになっていて、検索結果を一番下まで見ると自動でさらに10件が表示されるようになっているので試してみてください。

これが極めて快適で、慣れると次へのリンクを押す生活には戻れません。記事全体は長いのに1ページの文章量が少なくて、次のページへのリンクをやたら押さないといけないニュースサイトなどは当然のように対応されていて、クリックする必要がなくなって、ストレスなく文章に集中できるようになります。対応しているサイトも SWDYH - SITEINFOの数をグラフにしてみた によればうなぎのぼりという状況です。普段使うようなサイトはほとんど対応されているでしょう。

AutoPagerizeのしくみ

次のページを表示するにはどこを押せばいいのか、どの部分がページ固有の内容なのかを判断するのは、ニンゲンにとっては簡単なことですが、キカイにとっては少し難しい問題です。次のページについては <link rel="next" /> を調べて判断することができますが、普及していないため記述されているサイトはほとんどありません。そしてページ固有の内容についてはそういった規格もありません。

AutoPagerizeは、どの部分がページ固有の内容で、次のページへのリンクはどれか、ページを繋ぎ合わせるときにはどこに繋げればいいのか、という情報をニンゲンが各サイトごとにXPathで記述してあげる、という解決策をとっています。

自分でXPathを書く

手動で対応する仕組みなので、ときどきAutoPagerizeされていないページに遭遇することがあります。そんなときには自分でそのページ用にXPathを書いてあげればAutoPagerizeできるようになります。 自分でXPAthを書いてAutoPagerizeするには3つの方法があります。

infogamiのwiki AutoPagerize (swdyh) に書く

AutoPagerizeは、このwikiに書かれているSITEINFOと呼ばれるXPathのセットをもとにAutoPagerizeしています。AutoPagerizeの中から自動的に読み込まれているのでここに書いておくと、自分だけでなくほかのAutoPagerizeユーザ全員が恩恵を受けることができます。

autopagerize.user.jsのSITEINFO_IMPORT_URLSに追加してそのURLに書く

XPathがちゃんと書けているかをテストするのに、いきなりinfogamiのwikiに書いて試行錯誤するのはちょっと面倒です。そんなときは autopagerize.user.jsの中に(Windowsなら \Documents and Settings\USERNAME\Application Data\Mozilla\Firefox\Profiles\PROFILENAME\gm_scripts に、OSXなら ~/Library/Application Support/Firefox/Profiles/PROFILENAME/gm_scripts/ にあります)、SITEINFOを記述したURLが書かれた部分

    var SITEINFO_IMPORT_URLS = [
        'http://swdyh.infogami.com/autopagerize',
        'http://userjs.oh.land.to/pagerization/convert.php?file=siteinfo.v5',
    ]

があるので、ここに自分のサーバのURLを書いて、そこのファイルを編集すると便利です。

SITEINFOに直接書く

わざわざサーバに置くのが面倒、というときはSITEINFO配列に直接書くこともできます。

    var SITEINFO = [
        /* sample
        {
            url:          'http://www.google.*?/search*',
            nextLink:     'id("navbar")/table/tbody/tr/td[last()]/a',
            insertBefore: 'id("navbar")',
            pageElement:  '//div[2]',
        },
        */
    ]

とコメントアウトされている部分にSITEINFOを書いてもokです。 書いた後はGreasemonkeyのメニューから clear cache を行ってSITEINFOを再度読み込ませる必要があります。はじめこれがわからなくてはまりました....

あとはばりばりSITEINFOを書いていくだけです。が、ブラウザを開いていてAutoPagerizeされていないのに気づいて、ソースを見てエディタを開いてXPathを書いて cache clear して動かしてみる、というのは、簡単な作業のわりにめんどくさくてやりたくないです。

そんなわけでAutoPagerizeのSITEINFO記述を楽にするためのブックマークレットを作りました。まだ単体ではきれいなXPathを作れませんがfirebugと組み合わせると、ゼロから書くよりかなり楽ができます。

テストツール OpenQA: Selenium のためのテストケース記述を極めて簡単にしてくれたSelenium IDE :: Firefox Add-onsにあやかって AutoPagerize IDE という名前にしました。

AutoPagerize IDEのつかいかた

AutoPagerize IDEはブックマークレットなので、まず AutoPagerize IDE をブックマークに入れてください。

XPathを作る

次はAutoPagerizeしたいページでこのブックマークレットを呼び出します。今回は昔からあるテッキー向け雑談サイトの slashdot.jp のSITEINFOを作ります。 起動すると右上にAutoPagerize IDEのウインドウがでてきます。そして ブラウザの中でマウスを動かすと、マウスの下のエレメントがワクで囲まれるようになるので、ページ固有の部分がワクで囲まれるところにマウスを動かしてクリックします。 そうすると、選択した要素の背景色が変わって、AutoPagerize IDEのウインドウのpageElementにクリックした部分を表すXPathが入ります。長いので全部表示されていませんが

//div[@id="frame"]/div[@id="wrapper"]/div[@id="contents"]/div[@id="index"]/div[@id="articles"]

というXPathが入っています。ここでいきなりfirebugの助けを借ります。slashdotのHTMLの構造と、現在のAutoPagerizeのinsertBeforeでページの内容を追加するという仕様上、pageElementがこの記述だとページを繋げたときに表示が乱れてしまうので、手で最後に/divを付け加えます。

//div[@id="frame"]/div[@id="wrapper"]/div[@id="contents"]/div[@id="index"]/div[@id="articles"]/div

XPathを変更すると、変更されたXPathにマッチする要素が囲まれます。テキストボックスからフォーカスが外れたときにXPathが評価されるので、変更したらどこかをクリックしてpageElementのテキストボックスからフォーカスを外してください。 みためはあんまり変わりませんが、さっきは背景色が変わっていたストーリーとストーリーとの間のスペース部分が白くなっているのが分かります。 pageElementを選んだら、次はAutoPagerizeでページを繋ぎ合わせるときに、繋ぎ合わせるところの後の要素を指定します。ページの下の方の Ads by Google の前にページを繋ぎたいので、Ads by Google を選びます。 この部分はpageElementのXPathにマッチするので色が変わっていますが、変わっていても問題ありません。 そして最後に次のページを表示するためのリンクをクリックします。 ページの一番下にある"昨日のニュース"が次のページへのリンクになっているので、これを選びます。 このままだと、1ページ目と2ページ目を繋ぐのはうまくいくものの、2ページ目以降では、日付の新しい方へのリンク、古い方へのリンク、と並んでいるためうまく繋がりません。手作業で、マッチする要素の最後を意味する[last()]を追加します。(あとで気づいて直したため、スクリーンショットを取り直す元気がなくてスクリーンショットでは全部最後が/aになっていますが/a[last()]のほうが正しい記述です。

AutoPagerize IDE でテスト

これで

pageElement:    //div[@id="frame"]/div[@id="wrapper"]/div[@id="contents"]/div[@id="index"]/div[@id="articles"]/div
insertBefore:    //div[@id="frame"]/div[@id="wrapper"]/div[@id="contents"]/div[@id="index"]/div[@id="articles"]/div
nextLink:    //div[@id="frame"]/div[@id="wrapper"]/div[@id="contents"]/div[@id="index"]/div[@id="articles"]/a[last()]
[@id="google_adsense"]
url:    http://slashdot.jp/

というXPathを得ることができました。

この記述でうまくAutoPagerizeできるかどうかはapply thisボタンで試すことができます。

apply thisを押すとPS2の話の後に、 フォームに音声認識機能を、という話をうまく繋げることができました！(slashdotの仕様で、トップには日付に関係なく新しいストーリー12がこ載っているため、昨日のストーリーのひとつ目が" 全てのフォームに音声認識機能を!"になっているため、ちょっとわかりにくくなっています。もっと分かりやすいサイトを例にすればいいのですが、比較的知られているサイトでまだAutoPagerizeされていないところがなかなか見つけられなかったので...) うまくページを繋ぐことができたらgenerateボタンを押しましょう。HTMLとしてSITEINFOの記述を取り出すことができます。

ほんもののAutoPagerizeでテスト

AutoPagerize IDE で作ったSITEINFOをはじめに紹介した方法のどれかでAutoPagerizeに読み込ませてみましょう。 自分はサーバにSITEINFOを記述するためのHTMLを用意してそこに書く2番目の方法を使いました。 AutoPagerize IDEで生成した

<h3>スラッシュドット ジャパン : アレゲなニュースと雑談サイト</h3>
<p><textarea class="autopagerize_data" readonly="readonly">
url:    http://slashdot.jp/
nextLink:    //div[@id="frame"]/div[@id="wrapper"]/div[@id="contents"]/div[@id="index"]/div[@id="articles"]/a[last()]
insertBefore:    //div[@id="frame"]/div[@id="wrapper"]/div[@id="contents"]/div[@id="index"]/div[@id="articles"]/div[@id="google_adsense"]
pageElement:    //div[@id="frame"]/div[@id="wrapper"]/div[@id="contents"]/div[@id="index"]/div[@id="articles"]/div
</textarea></p>

書き込んで読み込ませました。 SITEINFOがうまく記述できていると、ページを表示したときにAutoPagerizeによって右上に緑色の四角が表示されます。 ページの下までスクロールさせると、AutoPagerize IDEで試したときとおなじようにページを繋ぐことができました。

ぜひAutoPagerizeをご体験ください

べつにクリックすればいいじゃん、と思われるかもしれませんが、そんなことを思っていた方が感動する話 Muibrog - autopagerizeがすごすぎる。 なんかもあるので、ぜひ一度おためしください。 greasemonkeyなんて入れてねーよ、とか、そもそもFirefoxじゃあね、といわれる方は、とりあえずSAGOOLの検索結果のページで疑似体験してみてください。

なくてもいいけどあるとべんりな一品です。

そしてAutoPagerizeが手放せなくなってAutoPagerizeされていないページを見つけたときにはAutoPagerize IDEでSITEINFOを作ってみてください。=)