XPath まとめ + AutoPagerize のデータ作成ツール紹介

XPath 習得目標レベル

以前 AutoPagerize を紹介しました

- AutoPagerizeはユーザーが作成したwedata のオンラインデータ SITEINFO を利用してページをつなげます（OpenID さえ取得すれば誰でも追加・変更することができます）
- そのSITEINFO データは以前紹介した正規表現と XPath と呼ばれる技術仕様を使って記述します

ということで、

SITEINFO のデータ作成を目標とします

概要

Wikipedia：XPATH の説明は長い...orz ので簡潔に表現すると

XPath とは

XML ツリー構造の場所を指定する方法

ファイルパスのようにツリー構造を辿るように指定できるのが特徴

手元に置いておきたいチートシート（技術情報をコンパクトにまとめた表）

http://pearl-white.hp.infoseek.co.jp/xpath/

ダウンロードして必要なときに参照すると便利

XPath 初心者向けの記事

ちょっと長いですが紹介するのはこれ１つに絞りました。理解できれば初心者卒業

1．XPath の基本 1 | TECHSCORE(テックスコア)

XPath マニュアル

どうしても見たければ...

データベース連携からシステム統合まで、企業システムの「つなぐ」を実現 | アステリア株式会社（日本語）
XML Path Language (XPath)（英語）

確認ツール（ブックマークレット）

呼び出すと画面上部にバーが出現し、そこに XPath を入力 + Enter でマッチした部分が黄色くなり一目で分かる！！（複数の要素がマッチした場合は Enter を押す毎に黄色い該当部分が移動）

XPath検索バー (for Mozilla/Firefox)

AutoPagerize の「次へ」や「ページ部分」の XPath 指定が正しいかどうか検証することができます
XPath の指定が間違っていると黄色い部分は表示されず画面スクロールがリセットされます
JavaScript 有効にしといてください。https://addons.mozilla.org/ja/firefox/addon/722:NoScript と併用の場合、少なくとも「現在のページ」と「tokyoenvious.xrea.jp」の JavaScript 設定を有効に設定

確認ツール（Firefox アドオン）を３つ紹介

InspectThis：調べたい場所で右クリック「要素を点検しなさい」すると、クリックした場所を選択した状態で DOM Inspector が起動し以下を確認できる
- ノードツリー
- id や class そして他の属性
- クリックしたノードを赤線で囲み点滅

XPather：調べたい場所で右クリック「Show in XPather」、もしくは DOM Inspector より XPath 入力＋右のEvalボタンのクリックで起動し、以下を確認できる
- 指定した XPath に該当（マッチ）するノード数
- マッチしたノードの XPath
- マッチした XPath の１つを指定すると、下のタブ「Web Clipping」でマッチした部分だけ表示

（ちなみにこの XPath の意味は「根（root）より id属性を持っている全てのノード集合を指定せよ」）

XPath Checker：調べたい場所で右クリック「View XPath」で該当（マッチ）した部分のみを表示

AutoPagerize の設定データ（SITEINFO）を作成

紹介した XPath ツールも使いながら設定データを作っていきます

万能ではないが Firefox アドオンのAutoPagerize Iteration Detector を使うと１発で SITEINFO 作成できる場合もある（作成したデータの自動アップロード機能付）

こんな感じ

このツールを使った wedata へ直接登録する方法などは配布ページでも説明されています

作成した SITEINFO のローカルテスト

GreaseMonkey の AutoPagerize スクリプト内に直接 SITEINFO を設定します
url は正規表現、nextLinkとPageElementとinsertBeforeは XPath、exampleUrlはURLそのまま
保存終了、ページをリロードし AutoPagerize が動けばテスト成功

var SITEINFO = [
    {
        url:          '^http://jibun\.atmarkit\.co\.jp/[^/]+/rensai/[^/]+/[^/]+\.html',
        nextLink:     '//a[descendant-or-self::*[contains(text(), "次のページ")]]',
        pageElement:  'id("headmenu")/following-sibling::*[descendant::*[text()="次のページ" or text()="前のページ"]][1]/following-sibling::*[following::*[text()="次のページ" or text()="前のページ"]]',
        exampleUrl:   'http://jibun.atmarkit.co.jp/ljibun01/rensai/inou/05/01.html',
        insertBefore: 'id("ad_b")',
    },
]

作成したデータを wedata に登録

wedataに SITEINFO を登録すれば自分の作成した SITEINFO データを他の人も使うことができるようになる
wedata の SITEINFO はデフォルトで２４時間毎に自動ダウンロード・更新される
登録には OpenID が必要。利用するだけなら不要
他の人の設定データを変更することもできる（Webページのリニューアルで SITEINFO が古くなった場合等）

wedata 登録後の動作確認での注意点

使用したスクリプト内の SITEINFO はコメントアウトしておく（使ってないならこの手順は不要）
SITEINFO を wedata の最新版にアップデートするためにステータスバーの GreseMonkey アイコンを右クリック ⇒ 「ユーザースクリプトコマンド」 ⇒ 「AutoPagerize - Crear Cache」