クロスブラウザ対応したAutopagerizeもどきの実装

Greasemonkeyで「次へ」のリンクがあるようなサイトを無限スクロール可能にさせるAutopagerizeというGMScriptがあります。「次へ」のリンク箇所、次のページ内容、内容を挿入する箇所などをXPathで記述(SITEINFO)し、これらのSITEINFO情報はWikiで管理されてあるので、Autopagerizeが実現できるページはユーザ側でどんどん増やしていくことが可能。なので、気づけば「あ、このサイトも勝手にスクロールされる!!」な発見も多く、非常に素晴らしいGMScriptです。Mozilla24のShibuya.JSで知ったのですが、これ無しじゃもうやってられないくらい愛用しています。

で、ウチでリリースしているChannel.isのサイト、最近ややコンセプトが変わってスタートページは各ビデオ共有サイトの横断検索が可能なサービスになっているのですが、ここの検索結果もAutopagerizeのSITEINFOに登録していました。すると社内で結構評判良かったので、せっかくなんでGMだけにとどめておくのではなく、モダンブラウザ全部対応したスクリプトをスクラッチから書いてみました。

(例)[ 検索 ] video

注意事項として、本家のAutopagerizeのWikiには、channel.isのSITEINFOを削除いただくよう、要請を出しているのですが、コンフリクトを起こす可能性もあるので、Autopagerize導入済みの方は「ユーザスクリプトを実行しないサイト」で「http://channel.is/*」を指定いだければと思います。

以下、実装上のメモです。

  • 動作確認済みブラウザはIE6以上、Firefox2.0、Opera9.0, Safari3.0b。今時なブラウザならほぼ大丈夫(、、なはず)
  • 実体はpagerize.js
  • prototype.js1.5.1.1ベース、String#evalJSON()利用。eval()でもよかったんだけど何となく
  • スクロール量や、要素の座標位置についての情報をまとめるのにやや苦労した
  • このあたりはPagerize.get*()あたりにまとめてるので、参考にしたい方はどうぞ
  • 本家はXPathゴリゴリだけども、IEではXPath使えないし、これだけのためにxpath.js使うのもアレなので、JSON API作ってXHRで「次へ」のページ要素を取得+innerHTML追記、の方法にした
  • スクロールイベントをトリガに先読みさせるとき、先読みをブロックさせる方法をうまく実装しないと無限先読みを引き起こさせうる。ここが厄介
  • 結局先読みをスタートさせるとブロック開始→先読みさせた内容を描画開始するとブロック解除
  • この辺りはまだやや改良の余地あるかも

この手のサービスはIEのXPath対応がやっぱ肝ですねぇ。各サイトが先読み用のそれなりのAPIを提供してくれないと、やっぱり苦しいかも、という印象でした。

関連広告

Trackbacks:0

TrackBack URL for this entry
http://blog.katsuma.tv/mt-tb.cgi/97
Listed below are links to weblogs that reference
クロスブラウザ対応したAutopagerizeもどきの実装 from blog.katsuma.tv

Home > Javascript > クロスブラウザ対応したAutopagerizeもどきの実装

Search
Feeds

Return to page top