ゼロからはじめるFilmed.js - 画像をフィルム調にアレンジ

Filmed.jsとは？

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

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

Filmed.jsはこのサイトにあるページからダウンロードすることができます(*2)。

公式サイト

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

「Download filmed.js 1.0」と書かれた文字をクリックする

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

解凍図

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