2007年09月11日 - ニュース過去ログ
ニュース過去ログ
2007/09/11
指定したWebページの裏側を表示する「pageinfo(仮)」を作ってみた
(管理人日記)
こんなのを作ってみました。
名前は仮です。
これは何？
以下のような感じ。
まあ実際にpageinfoで見てみるのが一番わかりやすいと思います。今回、ブックマークやスターがバランスよく付いてるページということで、はてなスター日記の「はてなスターから毎日1回☆レポートが届くようになりました」をサンプルに選ばせていただきました。
pageinfoは、指定したページに関するいろんな情報を表示します。とりあえず現在のところ見れるのは以下の情報。
- そのページの各種ソーシャルブックマーク(SBM)の登録数
- そのページのSBMのコメント
- そのページについたはてなスター
- そのページのSBMのコメントについたはてなスター
- そのサイトのフィードのlivedoor Readerでの購読者数
- そのサイトのフィードのlivedoor Readerでの平均レート
- そのサイトのはてなブックマーク総数
- そのサイトについたはてなスター総数
- そのサイトのWeb Scouter戦闘力
今後何か思いついたらもっと増やすかも知れません。
使い方
pageinfoにページを指定する方法は3つあります。
- フォームに入力
- URIを直接指定
- ブックマークレット
フォームに入力
http://app.muumoo.jp/page/を開くと、URI入力欄があります。ここに調べたいページのURIを入力して「load」ボタンを押せばOKです。簡単。
URIを直接指定
ブラウザから
http://app.muumoo.jp/page/#(調べたいページのURI)
にアクセスすれば、それだけでpageinfoを開くことができます。
(一度pageinfoを開いて、そのページのアドレスバーを書き換えて別なpageinfoを見る場合、ブラウザや設定によってはF5でリロードする必要があるかも知れません。)
pageinfoにリンクを貼りたい場合もこういう感じにすることになります。
ブックマークレット
そしてたぶんこのやり方が一番重要だと思っています。ブラウザで今開いてるページのpageinfoを見るブックマークレットを用意しました。
上記のリンクをブックマーク(お気に入り)に登録してください。あとは、調べたいページを開いた状態でこのブックマークをクリックすれば、新規ウィンドウでpageinfoが開きます。
ここまでのことを簡単に言うと
上記のブックマークレットをブラウザに登録して、好きなページを開いてる状態でそのブックマークをクリックすれば、そのページのいろんな情報が見れますよ、ってこと。
裏側？
SBMのコメントやはてなスターを「ページの裏側」と呼んでいいのかどうかについては、深く考えていません。「裏側」って表現はもっと良い言葉が見つかればそれに置き換えたいところですが、意味合いとしては「そのページを正面(オモテ)から読んでるだけでは見えない、メタデータや評価、評判など」のことです。
将来的には他にも裏側っぽい情報があればどんどん表示していきたいし、逆に、表示する情報次第では、裏側という呼び方は適切でなくなって変更される可能性もあります。つまり「裏側(仮)」です。
あんまり気にしないでください。
作った目的
いままで、あるページを見ていてそこに付いたSBMのコメントを見たくなったとき、各SBMサービスのページをそれぞれ開いていました。「livedoorクリップに各種ソーシャルブックマークのコメントを埋め込むGreasemonkeyスクリプト(またはその はてブ版)」みたいに一括して見れたら便利だなって思ってました。
そういう(コメントをまとめて読める)サービスは既にあるとは思いますが、URIを(livedoorとかはてな以外に)送信しなくても見れるやつが欲しかった。そうするとFirefoxの拡張やGMスクリプトなどでローカルで処理させれば可能そうだけど、常に使うわけでもないので常時ブラウザに読み込まれてるのも大げさな気がしていた。私にとっては、ブックマークレットで呼び出すくらいの感じがちょうど良かった。
で、そんなワガママばっかり言うなら、自分で都合のいいものを作ればいいよねってことで、今回作ってみたわけです。
またそれとは別な理由として、「location.hash(URIの#以降のデータ)でどこまでやれるか」つまり、サーバがパラメータを受け取らずにどれほどのアプリが作れるのか、というのもずっと興味があっていろいろ実験していたので、その実践も兼ねています。
動作環境
IE7、Firefox2、Opera9の正式版の最新版で動作確認しています。Safariとかどうなんだろ。
仕組み
当サイトのサーバ側では何も処理していません。静的なhtmlデータを返却しているだけです。っていうか、URIの#以降はこっちのサーバには送信されないので、私は利用者がどんなURIについて調べようとしているのかを知ることすらできません。
すべてはpageinfoを開いたブラウザ上でJavaScriptが動作して処理するようになっています。
実際のデータはあちこちのサービスから画像やJSONPで取得しています(なので、それらの機能を提供しているサーバには、当然どんなURIについて調べようとしているのかが送信されます)。
まず、ソーシャルブックマークのコメントは、以前作った SBM comments APIを使って取得しています。このAPIは、現在は
のデータが取得できます。
ページのタイトル(URIの下に表示されるやつ)は、はてなブックマークのAPIにJSONPで問い合わせてみて、もし取れなかったらlivedoorクリップのAPIにJSONPで問い合わせて、それでも取れなかったらBuzzurlのAPIにJSONPで問い合わせて取得しています。それでもまだ取れない場合はあきらめます(del.icio.usに問い合わせる方法はわかりませんでした)。
ブックマーク件数は、画像で取得しているのがはてなブックマークとlivedoorクリップとBuzzurlで、del.icio.usのブックマーク件数はdel.icio.usのAPIにJSONPで問い合わせて取得しています(画像で取得するやつはMD5を算出する必要があってメンドかった)。
ページとブクマコメントのはてなスターははてなスターをブログに設置する方法を参考にして貼っています。
それとサムネイル画像はSimpleAPIを利用して表示しています。
さらに、そのページのURIをlivedoor ReaderのFeed Discover APIを渡して、サイトのURI/サイト名/フィードのURI/LDRの購読者数/LDRの平均レートをJSONPで取得します。そうして取得したサイトのURIを元に、はてなブックマーク総数を画像で取得し、ブログの☆の総数を取得できるAPIを使ってはてなスター総数をJSONPで取得し、Web ScouterのMyスカウターを使って戦闘力を画像で取得しています。
対象ページのURIさえあれば、画像とJSONPだけでも結構いろいろやれるものですねえ。これだけいろいろ取得してみると、かなり勉強になりました。
ちなみにIEとFirefoxでは普通にJSONPしていますが、OperaのJSONPは非同期にならないのでimg-JSONPを使っています。これほんとスゴイアイディアだと思います。
ソースコード
さっきも書いたとおり、サーバサイドのコードはありません。すべてJavaScriptとかでやってるので、htmlソースを見ればそこに今回私が書いたコードが全部あります。そのhtmlソースをコピペすれば、CGI等が使えないレンタルサーバや、あなたのPCのデスクトップ上に置いたhtmlファイルでも、まったく同じものが作れます。そんなことしてもあんまり意味無いと思いますが、まあ好きにしてもらって構いません。
はてなスター自信ない
はてなスター周りがちょっと自信ありません。
- トークンってのがよくわからないから貼らなかった。自分のブログにはてなスターを貼るときだけ必要なのかな？
- ページ表示時に待たされるのがイヤだったので、HatenaStar.jsの読み込みはonload後にscriptタグを動的生成することにした。
- そのせいで、読み込み完了を検知するためにsetIntervalを使って何度もチェックさせている。
- HatenaStar.js のソースコードを見たら、windowのonloadイベントで new Hatena.Star.EntryLoader(); を呼ぶようになってたけど、今回はonload後にHatenaStar.jsを読み込んでるのでこれが動作しない(すでにonloadが終わった後に onloadイベントを設定しても動かない)。そこで、自分で呼び出してみた。
とまあいろいろ怪しい使い方をしています。今のところうまく表示されているように見えますが、なにか間違ってるかも知れません。将来の仕様変更で動かなくなるかも知れません。アドバイスがあれば教えていただけるとうれしいです。
あと、livedoorクリップだけはブックマーク1件分のパーマリンクが存在しないため、コメントのスターは表示できません。またBuzzurlはブックマーク1件分のパーマリンクが2種類(ページ主体のものとユーザ主体のものが)あるようですが、SBM comments APIが返すパーマリンクはページ主体のもの(ページのURLから割り出せるのはこれだけ)なので、そっちに関するはてなスターを表示しています。
今後について
まずは表示する情報を増やして行きたい。ただし、当面はこっちのサーバにURIを送信しなくても取得できる情報に限定するつもりです。つまり、JSONPか画像でJavaScriptから直接データ提供元を呼び出せる情報に限ると思います。
たとえばGoogleのPageRankとか、そのページへのリンク元とかを取得したい。技術的に可能なのかはまだ調べてないけど。
xmlやRSSやJSONでしか取得できない情報もYahoo! Pipesを間に挟めばJSONPで取れるようになるので、まだまだやれることはあると考えています。アイディアさえ浮かべば。
あと、画面のデザインをしっかりやりたい。現在は必死でソレっぽく見えるようにしていますが、まだまだ仮の姿です。
謝辞
すばらしいAPIを公開している各サービス、多くの参考になるコードを掲載・解説しているWebページ、それらを簡単に検索できるようにしてくれた Google、そしてWebを利用されているすべての方々に、心より感謝の意を表します。今回多くのことを学べました。Webって楽しい。
