11th
AutoTitle用SiteInfoの適当な作り方(XPath Checker版)
この記事は、以前に書いたAutoTitle用SiteInfoの適当な作り方(FireBug版)を別の拡張を使って改訂したものです。内容は基本的にそれほど変わりません。が、こちらの方が多少読みやすくなっていると思います。
必要なもの
- GreaseMonkyとFirefoxとAutoTitle Firefox3でしか動作確認されてないみたいですが2でも動きました。
- XPath Checker
- タイトルを正しく出力しないサイト
- 正規表現の知識 解説しているWebサイト見ながらでもOK
- XPath式に関する知識 WikiPedia見ながらでOK
- 多少の根気
今回は、目的以上に多機能なFireBugではなく、XPath式を見る/評価する機能に特化したXPath Checkerを使います。この拡張はFireBugよりも軽量で、Firefox3でも動作します。が、XPath CheckerのXPath式評価結果表示は、FireBugと少し違い、HTMLタグを含んでいる場合はそれを適用した結果が表示されるようです。それを念頭に置いてお読みください。
まずwedataにログインして編集できる状態にします。OpenIDが必要です。はてなのアカウントもっていればそれでOK。(はてなでOpenID) 他のOpenIDでも問題なく使えるはずです。
今回もEggMusicの詳細カタログを例にとってみます。こちら
このサイトは前回もやっていますが、操作などが違う部分があるので、Firebugとの手順の違いを出すためにもう一度行います。
実際にリンク先を開いてみると、 アルバム名(スタークルーザー PC‐8801リマスタード・サウンドトラックス )が表示されず、サイト名しか表示されません。
これをアルバム名が表示されるようにしてみます。
該当のWebサイトにアクセスし、表示されているアルバム名文字列を選択し、右クリックし、 「View XPath」を選択します。XPath Checkerのポップアップウインドウが開き、XPath式と「One Match Found」の表示とともに強調された文字列が出てきます。ここで強調された文字列が表示されているのは、bタグの中身も含め、タグが適用された結果が表示されているからです。ここはFireBugとは若干異なる部分です。
/html/body/div/div[3]/table/tbody/tr/td/table/tbody/tr[3]/td[3]/font/b
上のXPathのボックスにはこの文字列が表示されているはずです。
これを必要な部分だけに簡略化を試みます。
こちらもあわせて参照するとよさげ。
コンテクストノード自身(要は問題のhtmlのこと)を参照するコードは「//」。これを使いつつ簡略化をしていきます。ここで、実際のXPath式評価結果がタイトルにしたい文字列になるようにします。
現在は、タイトルが強調されたまま表示されています。問題の文字列はbタグに囲まれたテキスト空間の中ということになるので、その文字列を選択するには「/text()」を付けて、文字列自身を参照する必要があります。表示されているXPath式の最後に「/text()」を付けると、
/html/body/div/div[3]/table/tbody/tr/td/table/tbody/tr[3]/td[3]/font/b/text()
となり、
「スタークルーザー PC‐8801リマスタード・サウンドトラックス」とこのように、今度は強調されていない文字列が表示されます。ここから簡略化していきます。先頭を//にし、要素を一つ一つ削って、表示結果が同じになるかどうか確認する作業の繰り返しです。
//body/div/div[3]/table/tbody/tr/td/table/tbody/tr[3]/td[3]/font/b/text()
OK。次
//div/div[3]/table/tbody/tr/td/table/tbody/tr[3]/td[3]/font/b/text()
これもOK。次
//div[3]/table/tbody/tr/td/table/tbody/tr[3]/td[3]/font/b/text()
こんな感じで進めていくと、最終的にはこうなります。
//b/text()
これをtopicElementに設定します。
次はURLを設定します。
このURLには正規表現が使用可能なのですが、正規表現として特別な意味を持つ文字をURLに含んでいる場合は、 \ を置いてその効果を打ち消さなければなりません。特に「.」と「?」はよくURLに文字そのものとして現れるので要注意です。
EggMusicのカタログ詳細表示モードは、http/httpsどちらでもアクセスできます。あとdetail.cgiにアクセスしたときだけこのXPath式の評価をします。このような条件を満たすURL記述は次のようになります。
^https?://www\.amusement-center\.com/project/emusic/cgi/eggmusic_catalog-detail\.cgi.*
. とか?の正規表現で特別な意味を持つメタ文字がURLに出てきたら、必ず\を入れます。そうしないと正しくURLにマッチしなくなります。
こんな感じでsiteInfoを登録します。
ここでアクセスするとAutoTitleの結果が適用されるのですが、その前にひとつ。AutoTitleは、SiteInfoをキャッシュし、データベースへのアクセス負荷を減らすようになっています。このキャッシュをクリアしないと、SiteInfoがFirefoxに反映されないので、「ツール」→「GreaseMonkey」→「ユーザースクリプトコマンド」→ 「AutoTitle - clear cache」で、SiteInfoキャッシュをクリアする必要があります。
そうしてアクセスすると、指定したXPath式の評価を行い、Webページのタイトルが「スタークルーザー PC‐8801リマスタード・サウンドトラックス - EGG MUSIC/エッグミュージック ゲーム音楽配信サイト」となります。
二つめの例として、がらくたGalleryをとりあげます。こちら
やはりこちらのサイトも個別記事の表示の際にはタイトルを表示してくれません。これも何とかしてみます。ただ、こちらは先ほどの例よりもかなり単純です。
まず個別記事を表示します。たとえばこちら
表示したあと、タイトル部分の文字列「戦闘機とUFOが接触事故」を選択します。それを右クリックし、「View XPath」を選択します。そうすると、XPath式は「id(‘post-277’)/h1/a」、One Match Foundと表示され、「戦闘機とUFOが接触事故」というタイトルがリンク付きで表示されます。
これを他の記事でも使える形にしましょう。明らかに記事IDが入っているのはまずそうです。ここを「/」に変えます。
//h1/a
とします。表示結果は先ほどと同じように、「戦闘機とUFOが接触事故」の文字列がリンクになっています。実はこのまま使ってもよいのですが、ちょっと気持ち悪いので、文字列の部分だけを厳密に取り出すことにします。タグで囲まれている文字列を指定するのは、「/text()」を後ろに付けるのでした。
//h1/a/text()
とすると、検索結果が変わり、ボックスの中に「戦闘機とUFOが接触事故」という文字列が表示され、リンクが外れているのがわかります。これをtopicElementに設定します。
URLですが、このサイトの記事固有URLは、http://garakuta.oops.jp/wordpress/?p=277という形になっているようです。
「.」と「?」が正規表現のメタ文字なので、直前に\を置きます。=のあとは、とりあえず何でも良しということにします。
次のようになります。
^http://garakuta\.oops\.jp/wordpress/\?p=
これをURLに設定し、「ツール」→「GreaseMonkey」→「ユーザースクリプトコマンド」→ 「AutoTitle - clear cache」で、SiteInfoキャッシュをクリアしてから該当の記事にアクセスすると、ブラウザのタイトルが次のようになるはずです。
戦闘機とUFOが接触事故 - がらくたGallery 海外仰天・面白ニュース速報
だいたいこんな感じです。
XPath式もほとんどわからないまま試行錯誤しているので、 いろいろと間違ってる箇所はあると思うけれど、AutoTitleを必要としていて、SiteInfoを作ってみたいという人にとって参考になればと思います。