ゼロからはじめるCurl.js - Webの写真を手軽にカールしてみよう

Curl.jsとは？

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

Curl.jsはHTMLページ内にスクリプト(プログラム)を記述しなくてよいという利点があります。つまり、全くプログラムが分からない人でも気軽に使う事ができます。また、プログラムが分かる場合には、ページカールするようにアニメーションを行なわせることなどの処理ができるようになっています。

Curl.jsではHTMLの<img>タグのclass属性に決められたスタイルシート名、値を指定するだけで自動的に加工表示処理が行われます。また、JavaScriptのコードが実行できるブログであればCurl.jsを利用することができます。

Curl.jsはこのURLからダウンロードすることができます(*2)。

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

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

ここで必要になるファイルはcurl.jsのファイルです。また、プログラムから制御する場合にはcvi_curl_lib.jsファイルが必要になります(この場合はculr.jsは不要でcvi_curl_lib.jsのみ使用することになります)。これ以外の他のファイルはサンプルデータのためなので不要です。

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