Instant.jsとは?

Instant.jsはHTMLページ内に埋め込まれている画像を写真風にアレンジして再描画するライブラリです。Instant.jsは、特定のスタイルシートクラスが指定された<img>タグを、VMLまたは<canvas>タグを使って置き換えて表示します。このため、VML、<canvas>が使えないブラウザでは通常通りに表示され、対応したブラウザでは写真風に加工されて表示されることになります。

Instant.jsはHTMLページ内にスクリプト(プログラム)を記述しなくてよいという利点があります。つまり、全くプログラムが分からない人でも気軽に使えます。Instant.jsでは、HTMLの<img>タグのclass属性に、決められたスタイルシート名、値を指定するだけで自動的に加工表示処理が行われます。また、JavaScriptのコードが実行できるブログであればInstant.jsを利用できます。

Instant.jsはこのURLにあるページからダウンロードできます。

Instant.js公式サイト

「Download」の文字をクリックすると内容が展開表示されます。「Download instant.js 1.3」と書かれた文字をクリックするとダウンロードが行われます。

Download instant.js 1.3をダウロード

ダウンロードされたファイルはZIP形式になっているので解凍します。解凍すると以下のファイル構成になります。

解凍後の状態

ここで必要になるのはinstant.jsのファイルだけです。他のファイルは不要です。

IEとFirefox / Opera / Safariでは表示される効果(見た目)に若干の違いがあります。ここではInstant.jsのバージョン1.3で説明しています。