【ハウツー】

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

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

    古籏一浩  [2007/08/28]

    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のファイルだけです。他のファイルは不要です。

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

    新着記事

    特設サイトの情報

      人気記事

      一覧

        新着記事

        特別企画

        マイナビニュースマガジン