AutoPagerizeに対応する のバックアップ(No.9)

AutoPagerizeについて

　AutoPagerizeは「次のページ」を自動で読み込んで継ぎ足していくブラウザ拡張スクリプトである。
　普通、マウスをクリックせずに読めるのは1ページだけだ。2ページ目を読みたかったら「次へ」といった文字書かれているリンクをクリックしなければならない。ところがAutoPagerizeを導入したブラウザで見るとマウスのホイールをくるくる動かすだけで次のページがどんどん継ぎ足されていく。マウスを1mmも動かさずに済むので腱鞘炎の心配がなくなる。一度存在を知ったら使わないという選択肢が考えられないというぐらい便利なスクリプトだ。以前はFirefoxでしか使えなかったが、今では大抵のブラウザで使えるようになっている。

　実はこのスクリプトはどのサイトでも使えるというわけではなく、サイト側で特定のタグをページに書き加えて対応するか、wedataというサイトにSITEINFOというものを登録する必要がある。

　pico、Xiggの旧バージョン、d3forum、d3blogについてはどのサイトでも使えるようなSITEINFOを登録してみたが、その他のモジュールでは使えないし、また、前記四つのモジュールにしてもテンプレートをカスタマイズしていると使えない可能性がある。たとえばpicoは画面下のページナビゲーション(青い矢印)を次のリンクの基準としてSITEINFOを書いたので「ページナビゲーションを表示する」が「いいえ」になっていると使えない。なので、どういったカスタマイズを施しても自分のサイトでAutoPagerizeが使えるようにしたいという人は対応の仕方を覚えておこう。

専用のclass属性を使う

　もっとも簡単なのが、ページの本文部分を括っているdivやpなどに専用のclass属性を、次のページへのリンクのaにrel属性を書き加える方法だ。どのモジュールにしても、テンプレートに「入力された文章はここに表示する」という部分が必ず存在する。たとえばpicoだったら、pico_main_viewcontent.htmlにある、

<{$content.body}>

　という部分が本文表示部分である。
　altsysなどを使ってこの前後に、

<div class="autopagerize_page_element">
<{$content.body}>
</div>
<div class="autopagerize_insert_before"></div>

　と書き加え、任意の次のページへのリンクに、

<a href="hoge2.htm" rel="next">次のページへ</a>

　とrel="next"を付ければいい。文章で説明すると、

  • class属性が「autopagerize_page_element」のdivで本文を挟み、
  • その下、次のページを継ぎ足してほしい場所に<div class="autopagerize_insert_before"></div>を入れ、
  • 次のページへのリンク(a)にrel="next"を付ける。

　という感じになる。

参考サイト

　AutoPagerize0.0.11 - SWDYH

wedataにSITEINFOを登録する

　wedataからサイト独自のSITEINFOがダウンロードされ、サイトがAutoPagerizeに対応するというギミックに興奮する、余計なタグが入っているとむずむずしてくる、<div class="autopagerize_insert_before"></div>と空のdivを使うとAnother HTML-lintでエラーが出るのが耐えられない、この辺に当てはまる人はSITEINFOを書いてwedataに登録しよう。SITEINFOを書くためには、たとえば、

<div class="hoge">

を

div[@class="hoge"]

と記述するXPathというものを知る必要がある。HTMLと似て異なる記法で最初は相当癖を感じるかもしれないが、パターンと理屈さえ覚えれば意外と簡単に書ける。

　SITEINFOの具体的な例を一つ挙げてみよう。

<div id="header">
<p>メニュー</p>
</div>
<h1>サイトタイトル</h1>
<div class="hoge">
<h2>ページタイトル</h2>
<p>本文</p>
<p><a href="hoge2.htm">次のページへ</a><p>
</div>
<div id="footer">
<p>連絡先とか</p>
</div>

　というページ(http://example.com/)があるとする。一見、ごちゃごちゃしているがどの<div>がどこを括っているのかというのを確認すると、

┏<div id="header">
┃<p>メニュー</p>
┗</div>

<h1>サイトタイトル</h1>

┏<div class="hoge">
┃<h2>ページタイトル</h2>
┃<p>本文</p>
┃<p><a href="hoge2.htm">次のページへ</a><p>
┗</div>

┏<div id="footer">
┃<p>連絡先とか</p>
┗</div>

　となる。ヘッダー部分とフッター部分を取り除くと、pageElement部分、つまり本文を囲っている部分は、

<div class="hoge">
<h2>ページタイトル</h2>
<p>本文</p>
<p><a href="hoge2.htm">次のページへ</a><p>
</div>

　ここだとわかる。この部分だけを継ぎ足していけばいいので、

pageElement  	//div[@class="hoge"]
url 	^http://example\.com/
nextLink 	//a[contains(text(),'次のページへ')]

　という感じになる。pageElementは「<div class="autopagerize_page_element">」部分に、nextLinkは「<a rel="next">」部分に相当する。「pageElementには本文を実際に囲んでいるタグと属性、属性値を書く」ということさえ押さえればなんとかなる……と思う。実際に登録されているSITEINFOは最高の教材になるだろう。

参考サイト

　SITEINFOの書き方入門
　XML/XPath/XPathの書き方 - 俺の基地

[PR]