CSSセレクタでSITEINFO実践編 IT-PLUS

Tips

コメントでIT-PLUS（text()を使用しているので移植は無理ですよね…）の話が出ましたので、軽く説明を書きます。
移植という考え方では無理なのですが、要は何も無い状態からSITEINFOを書いている人と同じことをすればいいわけです。
XPathで考えるか、CSSセレクタで考えるか。Firebugで解析するかIE8開発者ツールで解析するか。という程度の違いで、やることは同じです。
たまにどうしようもないサイトがあるのは確かなんですが、それは別途書きます。

1. nextLink を選択するセレクタを検討する

肝心なのは pageElement よりも確実に nextLinkです。pageElement なんて最悪 body の中丸ごとでも次へをクリックしたと思えば我慢できる。

IE8で exampleUrl を開く

exampleUrl が書かれてないこともありますが、まあ url というとこに書いてある正規表現を見て適当に開けばいいです。

次のページへのリンクを探す

IT-PLUSの場合XPathでは以下のように定義されてました。

nextLink : id("kiji")/a[contains(text(), "次のページ")]

id="kiji" の直下の "次のページ" という文字列を含む a タグですね。
text()がある時点でもうこれは参考情報と割り切り、このリンクが他の方法で指定できないか、という考え方をします。

右上の枠で囲まれてるのがターゲットの nextLink です。
左下の枠で囲まれているツールバーのカーソルのボタンを押して要素選択モードにします。

要素選択モード中にマウスカーソルをブラウザ部分に持っていくと、カーソル位置の要素に枠が表示されます。
「次のページ」の上に持っていき、クリックすることで左下のHTMLツリー上のそのリンクがアクティブになります。

セレクタを検討する

さてここからがパズルだと思ってください。

反転しているのが「次のページ」です。親は確かに id="kiji" ですね。
肝心の a タグには href 以外の属性が無く、XPathで文字列指定しているのはまあ妥当かと思います。

  • 順番の使用は避ける

最初に思いつくのは、「id="kiji" の下の最後の a」＞「#kiji>a:last-of-type」です。
で、書いてみるとイケる！勝った！とか最初の内は考えがちなのですが…

最終ページを見てみると、同じ条件で「1」という前のページへのリンクがヒットしてしまいます。
1ページ目 ＞ 2ページ目 ＞ 1ページ目 ＞ 2ページ目 ＞ 1ページ目 …
このままではネロみたいに「パトラッシュ、ぼくはもうつかれたよ…」とか言いながら死んでしまう！！！
お前の安易なセレクタで人がどんどん死ぬことになるぞ！！

  • 発想を変えて目印を探す


1ページ目のツリーを再度眺めます。
「次のページ」とその上の「2」のリンクって実はリンク先同じですよね。その上に class="select" の span があるにゃー。
select!?select!!!!!!!!!!!!!
選択中のページ番号は普通リンクになっておらず、CSS を使ってるサイトなら class が指定されていたり、そうでもないサイトでも strong とか b とかで太字になってたりします。
選択中のページの次のリンクを開けばいいじゃないですか。最後のページを確認しても、class="select" の後にリンクは無いし、死人も出ない。

nextLink : #kiji>.select+a

id="kiji" の子供の class="select" の 次の a という感じです。やりましたね！
.select は span.select でもいいです。今の所優劣があるのか分からんので好みで。

2. pageElement を選択するセレクタを検討する

とりあえず安易に決める
pageElement : id("headline")/p[contains(concat(" ", @class, " "), " article ")] |
              id("headline")/*[not(@id="kiji") and
              preceding::*[@class="headline" or @class="headline2"][last()] and
              following::*[@class="hit_navi"][last()]]

XPath 見てもなんだか分かりません。なげーよ。呪文みたいの多いし。
ちなみにこれ色々な邪魔な部分を捨てたいだけで、細かいこと気にしない漢だったら

pageElement : #headline

これで充分。しかし実際にやってみると下に関連記事とかがズラーッと並んでいます。
邪魔だわー。呪文みたいの書く気持ち分かる。
とは言え、初心者には難しいので pageElement は適当に開発者ツールで記事全体が含まれる枠を選んで、それを書けばいいです。
IT-PLUSなら上の通り。後で気になる人が現れて書き換えてくれるとか、自分のスキルアップを待ちましょう。

上を目指す

XPathを解析しながら移植したいところなんですが、パッと見で not() とかあります。
not() はCSSセレクタにもあるんですが、IE8はまだ対応していないし、fubでも拡張してませんからもちろん使えません。
欲しいものだけ全て選択する必要があります。限度がありますけど。
開発者ツールを使って、どこらへんが記事なのか調べます。

id="headline" の子階層を開き、順に洗い出していきます。
上は最初の h2 を選択したところ、ヘンなヘッダみたいのに枠が付きました。こいつ要らない。
次の a name="topnews" こいつ見えないし要らない。
次の p class="hit_navi" これページ選択部分ですね。こいつも要らん。
次の p class="article" XPathにも出てきましたね。なんかただの隙間が選択されました。なんなの。
こっから先ずっと p class="article" が続きます。

2個目の p class="article" を選択。ここらへんから欲しいわ。これ記事ですね。
その後も p class="article" は隙間代わりみたいのもありますが、これが僕の欲しい継ぎ足し部、って感じでしたので採用します。

pageElement : #headline>.article

なんか下に筆者紹介があります。ID付いた div ですね。筆者見たければこんな感じ。まああってもいいか。

pageElement : #headline>.article, #author

ハイできた。技術系とかビジネス系は大体似たような感じです。以上。