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

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」という2つの変数がセットされているのに気がつくでしょう。この2つにそれぞれサムネイル化したいサイト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(サイズ3種)

WebSnapr - Website Thumbnails For Your Site

http://images.websnapr.com/?url=creazy.net&size=s
サイズ4種

サムネイル作成APIのパフォーマンスを比較してみました
第13回:URLエンコードとURLデコードを簡単にするブックマークレット
第12回:引用(blockquote)をCSSと画像でそれらしく見せる方法
第11回:引用(blockquote)を簡単にするブックマークレット
第10回:Windowsフォントをアンチエイリアスでキレイに見せる方法
第9回:閲覧しているサイトへのリンクタグを生成するブックマークレット
第8回:Twitter JavaScript Badges の日付フォーマットを自由にカスタマイズ
・第7回:サムネイル作成APIをJavaScriptで簡単に切り替える方法
第6回:TinyURL の遷移先が怖くて開けない場合の対処法
第5回:twitter の JavaScript Badge を改造する
第4回:twitter の JavaScript Badge をIEで表示するとおかしい件に対応してみる
第3回:JavaScriptで画像サイズと合ったポップアップウィンドウを開く
第2回:タグに関わる基本的な事
第1回:CSSで画像にborderをつけてみる

同じカテゴリーの記事

このページの一番上に戻る
  • Facebook
  • Twitter
  • Tumblr
  • Instagram
  • miil