第７回：サムネイル作成APIをJavaScriptで簡単に切り替える方法

投稿日：2007年6月17日

SimpleAPIをはじめたくさんのサムネイルAPIサービス（もちろん無料）のおかげで、簡単にサイトのスクリーンショットをサムネイル画像として自分のブログに貼り付ける事ができるようになりました。すでにサイトの色々な部分に利用が進んでいると思います。
しかし、手軽に使える一方で注意しなければならないケースもあります。
・パフォーマンスが悪い（人気サービスになると負荷が…）
・バグ（サムネイルが他のサイトですが？）
・突然サービス停止
これらは本当にありえる事です。公開されているサービスは個人運営である事が多いので利用者であるコチラ側は文句を言うことはできません。ただ、サービスが使えなくなればサムネイルを外すなり他のサービスに切り替えるなりする作業が発生します。MT等のブログツールやCMSツールを使っていればテンプレートの修正だけで、数百あるエントリー全てを変更していくようなバカげた作業をやるはめにはならないでしょうが、できる限り簡単に切り替える方法を持っておきたいものです。

前置きが長くなりました。
ここからは具体的な実現方法です。

サムネイルを呼び出すIMGタグをJavaScriptの外部ファイルで出力し、URLを変数で渡せるようにしておく

まずは下記のようなJavaScriptの外部ファイルを作成します。
・screenshot.js

document.write('<img class="screenshot" src="http://mozshot.nemui.org/shot?'+screenshot_url+'" alt="'+screenshot_name+'" />');

例としてMozshotでのURLをセットしています。
「screenshot_url」と「screenshot_name」という２つの変数がセットされているのに気がつくでしょう。この２つにそれぞれサムネイル化したいサイトURLとサイト名をセットして外部JSを呼び出せばOKです。ついでに、”screenshot”という名前のCSSクラスを指定してありますから縦横サイズなどスタイルを指定しておきましょう。

<script type="text/javascript">
screenshot_url="http://creazy.net/";
screenshot_name="creazy photograph";
</script>
<script src="/js/screenshot.js" type="text/javascript"></script>

上記スクリプトで出力すると↓こんな感じ。

参考までにURLの指定だけでサムネイルを呼び出せるサービスよ実際の呼び出しURLを何個か紹介。

SimpleAPI – ウェブサイト・サムネイル化ツール

http://img.simpleapi.net/small/http://creazy.net/

横128px、縦128px

サムネイルAPI

http://thumbs.bookmacro.com/u/http://creazy.net/

横160px、縦120px（パラメータ指定でサイズや表示スタイルなどを変更化）

HeartRails Capture | サイトのURLから画像/PDFを生成

http://capture.heartrails.com/medium?http://creazy.net/

横200px、縦150px

IgWebCap – [ 自動更新サムネイル生成サービス ]

http://x-row.cc/igwebcap/jpeg.php?width=160&height=120&wait=3&url=http://live.creazy.net/

サイズ、スタイルいろいろ指定可能

Mozshot

http://mozshot.nemui.org/shot?http://creazy.net/

横128px、縦128px（サイズ３種）

WebSnapr – Website Thumbnails For Your Site

http://images.websnapr.com/?url=creazy.net&size=s

サイズ４種