4th
AutoTitle用SiteInfoの適当な作り方(FireBug版)
（6/11)追記
SiteInfoを作る目的なら、FireBugを使うよりもXPath Checkerという拡張が良さそうです。AutoTitle用のSiteInfoを作るにはこの拡張の機能のみで十分ですし、Firefox3にも対応しています。なのでこの文章を見直し、AutoTitle用SiteInfoの適当な作り方(XPath Checker版)として新しく書き起こしました。ただ、この記事の内容自体は現在でもそのまま使えますので、残しておきます。(追記ここまで)
必要なもの
- GreaseMonkyとFirefoxとAutoTitle Firefox3でしか動作確認されてないみたいですが2でも動きました。
- Firebug 解説はこことか。コマンドラインの解説はここ
- タイトルを正しく出力しないサイト
- 正規表現の知識 解説しているWebサイト見ながらでもOK
- XPath式に関する知識 WikiPedia見ながらでOK
- 多少の根気
まずwedataにログインして編集できる状態にする。OpenIDが必要。はてなのアカウントもっていればそれでOK。(はてなでOpenID)
今回はEggMusicの詳細カタログを例にとってみよう。こちら
実際にリンク先を開いてみると、 アルバム名（スタークルーザー PC‐8801リマスタード・サウンドトラックス )が表示されず、サイト名しか表示されないのがわかる。
これをアルバム名が表示されるようにしてみる。
Firebugは機能するようにしてありますね？標準だと無効になってます。常時有効にしてもよいのですが、GMailなど無効にしておかないとパフォーマンスが低下するサイトもあるので自己責任で。（GMailの場合は警告が出ます）
有効にしたらアクセスし、表示されているアルバム名文字列の部分で右クリックし、 「Inspect Element」を選択。Firebugのウインドウが開き、HTMLビューが出ると思う。アルバム名の文字列が選択状態になっているだろうか？なっていれば、その選択文字列を右クリックし、「Copy XPath」を選択すると、この部分のXPath式がクリップボードにコピーされる。
/html/body/div/div[3]/table/tbody/tr/td/table/tbody/tr[3]/td[3]/font/b
この文字列がコピーされているはず。
これだとちょっと長すぎるので、必要な部分だけに簡略化してみる。
こちらもあわせて参照するとよさげ。
コンテクストノード自身（要は問題のhtmlのこと）を参照するコードは「//」。これを使いつつ簡略化をしていく。ここで、実際のXPath式評価結果がタイトルにしたい文字列になればいい。この評価結果を確認するのにコマンドラインを使う。
「Console」ボタンをクリックすると、「»>」という記号が出る。ここがコマンドライン入力領域。ここに式を入れる。XPath式を評価した結果を表示するには、「$x()」を使用する。
»> $x( “/html/body/div/div[3]/table/tbody/tr/td/table/tbody/tr[3]/td[3]/font/b” )
と入力してEnterを押す。式文字列のクオートを忘れないこと。
結果が表示された。[ b ]と表示されている。問題の文字列はbタグに囲まれたテキスト空間の中ということになるので、その文字列を選択するには「/text()」を付ける必要があるようだ。
»> $x( “/html/body/div/div[3]/table/tbody/tr/td/table/tbody/tr[3]/td[3]/font/b/text()” )
と入力してEnterを押すと、
[“スタークルーザー PC‐8801リマスタード・サウンドトラックス”]このように表示されるはず。ここから簡略化していく。先頭を//にし、要素を一つ一つ削って、表示結果が同じになるかどうか確認する作業の繰り返し。
»> $x( “//body/div/div[3]/table/tbody/tr/td/table/tbody/tr[3]/td[3]/font/b/text()” )
OK。次
»> $x( “//div/div[3]/table/tbody/tr/td/table/tbody/tr[3]/td[3]/font/b/text()” )
これもOK。次
»> $x( “//div[3]/table/tbody/tr/td/table/tbody/tr[3]/td[3]/font/b/text()” )
こんな感じで進めていく。進めていくと、最終的にはこのあたりまでいける。
»> $x( “//font/b/text()” )
これをtopicElementに設定する。
次はURLを設定する。正規表現が使える。これが便利だが落とし穴もある。
正規表現として特別な意味を持つ文字は \ を置いてその効果を打ち消さなければならない。
EggMusicのカタログ詳細表示モードは、http/httpsどちらでもアクセスできる。あとdetail.cgiにアクセスしたときだけこのXPath式の評価をする。このような条件を満たすURL記述は次のようになる。
^https?://www\.amusement-center\.com/project/emusic/cgi/eggmusic_catalog-detail\.cgi.*
.とか?の正規表現で特別な意味を持つメタ文字がURLに出てきたら、必ず\を入れる。俺はこれで30分以上悩んだ。5/5追記：-のエスケープは要らないようです。[]で囲まれているわけではないのでメタ文字に該当しないからかな？直してくれた人ありがとう。(追記ここまで)
こんな感じでsiteInfoを登録し、アクセスすると指定したXPath式の評価を行い、Webページのタイトルが「スタークルーザー PC‐8801リマスタード・サウンドトラックス - EGG MUSIC/エッグミュージック ゲーム音楽配信サイト」となるはず。
5/27追記 - タイトルが変わらない場合、AutoTitleがSiteInfoをキャッシュしていることによる場合があるので、AutoTitleのSiteInfoキャッシュをクリアしてからページを再度読み込みしてください。「ツール」→「GreaseMonkey」→「ユーザースクリプトコマンド」→「AutoTitle - clear cache」としてからF5、あるいは更新ボタンを押します。今思えば、このエントリを書いた当時に悩んだ原因は正規表現のミスではなくここにあったのかもしれない。(追記ここまで)
作成方法としてはこんな感じでいいのだろうか。XPath式もほとんどわからないまま試行錯誤しているので、いろいろと間違ってる箇所はあるかもしれないけれど、AutoTitleを必要としていて、SiteInfoを作ってみたいという人にとって参考になればこれ幸い。