mixi engineer blog

*** 引っ越しました。最新の情報はこちら → https://medium.com/mixi-developers *** ミクシィ・グループで、実際に開発に携わっているエンジニア達が執筆している公式ブログです。様々なサービスの開発や運用を行っていく際に得た技術情報から採用情報まで、有益な情報を幅広く取り扱っています。

Find Job !がAutoPagerizeとLDRizeに対応

はじめまして。めっきり寒くなってきたので短パン出社を諦めた oinuma です。求人情報サイト Find Job ! の開発や運用を担当しています。

私はいつも livedoor Reader を利用しているのですが、今更ながら登録数ランキングがAutoPagerize / LDRizeに対応しましたのエントリに触発されて、Find Job !の求人情報検索結果画面を AutoPagerize と LDRize に対応させてみました。今回はそのときに学んだことをサラサラっと書きたいと思います。

AutoPagerizeとLDRizeについて

AutoPagerize は現在見ているページの一番下に来たら、次のページを自動的にロードして現在のページに表示してくれるというものです。これのおかげでマウスで「次のページ」のようなリンクをクリックする必要がなくなります。

LDRize はキーボードの"j", "k"を使うことで「次のデータ」「前のデータ」に進んだり、"p"を押して今見ているデータにピンをつけたりすることができます。

  • ひたすら "j" でページを読んでいき
  • "p" で気になったコンテンツにピンをつけておいて
  • 一通り読み終わったら "o"
こうすることでピンをつけていたものをまとめて別のタブで開いてくれるのでとても便利です。

上はFind Job !で "p" を押してピンをつけた状態です。

まとめると、この2つを利用することでマウスを使わずにキーボードだけで快適にブラウジングできるようになります。(おかげで自分は肩こりが軽くなりました)

AutoPagerizeに対応させる方法

サイトを AutoPagerize に対応させるには、SITEINFO というものを書く必要があります。SITEINFO とは、次のページへのリンクがどれかを示す nextLink と、ページの中の本文部分を示す pageElement を XPath で記述するもので、wedata で管理されています。
url:  ^https?://www\.find-job\.net/fj/(?:search|new)\.cgi
nextLink:  id("contents")//li[@class="foreward"]/a
pageElement:  id("contents")/div[contains(@class,"search_result_list02") or contains(@class,"clear_space")]
exampleUrl:  http://www.find-job.net/fj/search.cgi?shokushu=0

上は Find Job !の例ですが、このように書くとGreasemonkeyスクリプトである AutoPagerize がこの SITEINFO を取得して次のページを現在のページに展開してくれます。各項目の仕様についてはこちらにわかりやすく記載されているので、実際に SITEINFO を書く場合に役立つと思います。wedata は OpenID さえあれば編集できるようになっているので、自分がよく見るサイトが対応してなかったら追加しちゃいましょう!

ちなむと、Find Job !の検索結果画面は以前どなたかが対応してくださっていたのですが、8月にデザインをリニューアルしたために動かなくなっていたので今回はこちらで対応させていただきました。

LDRizeに対応させる方法

LDRize も AutoPagerize と同様に SITEINFO がWeb上で管理されており、その仕様についてはこちらで説明されています。また、 SITEINFO も Wiki から編集することが可能です。私は XPath にあまり自信がなかったので、まずはローカルのスクリプトを修正して正しい SITEINFO が書けたことを確認してから Wiki を更新しました。 スクリプトを編集するには、Firefox 上の右下のGreasemonkey のアイコンを右クリック→ユーザスクリプトの管理→LDRizeを選択→[編集]をクリックしてください。 そして31行目付近を
var SITEINFO = [ {
name:      'Find Job !',
domain:    '^https?://www\.find-job\.net/fj/(new|search)\.cgi.*',
paragraph: '//div[contains(@class,"search_result_list02")]',
link:      'div//strong/a',
view:      'div//strong/a/text()',
} ]

のように編集して LDRize の挙動を確認します。デバッグが終わったら、Wikiを更新した後ローカルのスクリプトは元に戻して、M-x LDRize::update-siteinfo を忘れずに実行しましょう。こうすることで現在開いている Firefox に更新された Wiki の SITEINFO がロードされます。

閑話休題 - microformats について

AutoPagerize も LDRize も microformats に対応しているので、自分が管理しているサイトであればHTMLを直してしまってもよいでしょう。AutoPagerize の SITEINFO との対応表を書くと以下のようになります。
SITEINFOmicroformats
nextLink 「次のページへ」のリンクの <a> タグに rel="next" 属性を追加
pageElement ページのコンテンツとして切り出すノードのタグに class="autopagerize_page_element" という属性を追加
insertBefore(*1) 読み込んだページから切り出したコンテンツを挿入する際に基準となるタグに class="autopagerize_insert_before" 属性を追加
*1) insertBefore を省略した場合は pageElement(autopagerize_page_element) の直後が指定されたものとして扱われるので、たいていの場合は指定しなくてもOKです。 LDRize は hAtom 0.1 と xFolk RC1 に対応しているのでこんな感じでしょうか。
SITEINFOmicroformats(hAtom 0.1)xFolk RC1
paragraph ページのコンテンツとして切り出すノードのタグに class="hentry" 属性を追加 class="xfolkentry"を追加
link "v"で開くリンクのタグに rel="bookmark" 属性を追加 class="description"を追加
view "p"でピンを付けて右下に表示したい部分のタグに class="entry-title" 属性を追加 class="taggedlink"を追加

まとめ

AutoPagerize と LDRize はニッチなツールかもしれませんが、Webブラウジングをかつてないほど便利にしてくれる素晴らしいツールです。自分がよく見るサイトがまだ対応していなかったら、ちょっとした正規表現と XPath を書くだけで対応させることができるので、ぜひ皆さんも試してみてください。