Creazy!

WEBエンジニア・ヤガーのテック・ガジェットブログ

JavaScript WebService 小技集

第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をつけてみる

-JavaScript, WebService, 小技集

執筆者:


  1. miki より:

    素晴らしいブログですね。
    是非参考にさせてもらいたいです。
    でもって、この記事のスクリプトが見たいのですが、
    幅が狭くなってて見れないです。
    見せてくださいぃーー!!

  2. yager より:

    >mikiさん
    あれー、スクロールバーでてませんか?
    どうせなら、外部スクリプトをそのままダウンロードして使ってみて下さい。
    下記を右クリック→保存して中身見てみて下さい。
    screenshot.js

comment

メールアドレスが公開されることはありません。

関連記事

Mastodon(マストドン)にワクワク/ランキング並び替えブックマークレット

先週あたりからTwitterっぽいSNSとしてMastodonが話題となっています。Githubにオープンソースとして公開されており誰でも自分のサーバーにインスタンスを立ち上げられる「分散型プラットフ …

Creazy!のFacebookページが4000いいね!獲得するまでにやった事

・Creazy!(クリエイジー!) 7月6日くらいに当ブログのFacebookページが4000いいね!を達成しておりました。フォローしていただいたみなさまありがとうございます!こんなに更新頻度落ちてい …

no image

ブログデザインをリニューアルしました!これからはCreazy!

1年以上も寝かし続け、いっそなかった事にしようと思っていたリニューアルをついに公開しました! 4回に渡って実施されたブログデザイン勉強会の後押しもあり、途中脳内が血みどろになるほど苦労してここまでこぎ …

MTの管理画面にSBM被ブックマーク数画像を表示するプラグイン

以前から下記MTプラグインを入れてMTの管理画面にはてブのブクマ数を表示しています。 ・Milano::Monolog: AddHatenaBookmarkUserNum v0.2 なんですが、最近S …

[N]ネタフル x [S]シカマケ = ブログデザイン勉強会 第3回:自分探しの旅は一周して写真に回帰

昨日は、ネタフルのコグレマサトさん主催、視覚マーケティングのススメの著者で鬼コーチこと(w)ウジトモコさんを講師に迎えての勉強会の第3回に行ってきました。 これまで、第1回では1枚絵で、第2回ではテー …

スポンサードリンク

スポンサードリンク