Edge.jsとは？

Edge.jsはHTMLページ内に埋め込まれている画像の輪郭を様々な形状にするものです。実際にはあらかじめ用意してある輪郭のマスクを画像に施す処理が行なわれます。また、最初から用意されている輪郭のマスク画像だけでなく任意のマスク画像を好きな数だけ利用することができます。Edge.jsは特定のスタイルシートクラスが指定された<img>タグをVMLまたは<canvas>タグを使って置き換えて表示します。このため、VML、<canvas>が使えないブラウザでは通常通りに表示され、対応したブラウザでは写真風に加工されて表示されることになります。

Edge.jsを適用した画面

ただし、IEとFirefox/Opera/Safariでは表示される効果(見た目)に、かなり違いがあります。特にIEでは輪郭をマスク処理することができないため、どのオプションを指定しても輪郭だけがぼける感じになります。

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

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

Edge.js公式サイト

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

バージョン名が書かれたリンクをクリックする

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

解凍された状態のフォルダ

ここで必要になるファイルはedge.jsのファイルとmaskフォルダ内のファイル/フォルダ全てです。これ以外の他のファイルはサンプルデータなどのため不要です。