リンク先のサムネイルを表示させてみる
リンクアンカーにマウスオーバーした時に、リンク先のサムネイル（スクリーンショット）が表示されるようにしてみた。
サムネイルの生成には外部のサービスを利用。
あたりが候補だったけど、SimpleAPIはなんかトラブってるみたいでページが「Now Recovering....」となっている。他にもTOPページのスクリーンショットしか撮ってくれないなどちょっと物足りない部分もあるらしく、今回は後者のサムネイルAPIを利用することに。
利用方法はimg要素のsrcに
http://thumbs.bookmacro.com/u/[URL]
と指定するだけ。http://www.google.co.jpのサムネイルを表示したいなら
http://thumbs.bookmacro.com/u/http://www.google.co.jp/
というカンジ。とりあえず本文中の外部リンクと、メニューのリンク集でサムネイルが表示されるようにしてみました。
マウスオーバーで表示するためにJavaScriptを使用。一昔前まではJavaScriptを使いまくってるサイトっていわゆるださいサイトの代名詞だったけど、Ajaxやらlightbox.jsが流行ったおかげ（？）で気兼ねなく使えるようになってきてWebプログラマとしては非常に楽しい :-)
処理をnaruto 2.0用に開発中のJavaScriptライブラリに組み込んじゃったので他で使えるかどうかわからないけどとりあえずここから実際のスクリプトをダウンロードできます。興味がある人はどうぞ。
※ Prototype.jsがあれば動くと思う……多分。
posted by SHOGO
