昨年を振り返ると、いろいろなJavaScriptライブラリが登場しました。デザインで使えるものから、インターフェースを改善するものなど、2008年も活躍しそうなものを紹介したいと思います。
Internet Explorer 6でアルファチャンネルを含むPNGを表示
Internet Explorer 7からアルファチャンネルを含むPNG画像の表示が出来るようになりましたが、以前のバージョンでは表示するためにひと手間必要になります。iepngfix.htc を利用すれば、アルファチャンネルを含むPNG画像を利用する際に簡単にIE5.5以降のブラウザで表示させることが可能になります。
IE6でアルファチャンネルを含むPNGを表示
<img>タグ、またはエレメントの背景画像にxxx.png画像が指定されているものに対して、DXImageTransform.Microsoft.AlphaImageLoaderを適用してくれます。利用するには、アルファチャンネルを含むPNG画像の表示を適用したいスタイルに、behavior:url(iepngfix.htc)を記述します。
<style type="text/css">
img { behavior:url(iepngfix.htc) }
</style>
<img>タグに指定したイメージソース（src）はblank.gif[1] に置換され、背景イメージとblank.gifの中間のレイヤーとしてPNGイメージが出力されている状態になります。
アンチエイリアスの角丸をJavaScriptで生成
角丸コーナーを作成する際に非常に便利なのが
curvyCorners 。JavaScriptで動的にアンチエイリアス（anti-aliasing）処理まで行ってくれます。比較的処理も早く、ストレスなく表示させることができます。
角それぞれの丸みはピクセル単位（px）で個別に指定することができます。また、アンチエイリアスを解除することもできるなど、細かな指定ができるのも特徴です。
背景のイメージも違和感なく角丸表示される
ライブラリを適用した角部分に対し、<div>要素が動的に生成され角丸部分を形成してくれます。アンチエイリアス部分には1px単位でdiv要素が配置され、透明度の調整によって背景が透過した状態になります。
簡単に導入できるスムーススクロール
ページが長い場合にページ内リンクを使うことで、ユーザーが簡単に目的の文章にたどり着くことが出来るようになります。しかし、ブラウザの描写が早く、瞬間的に移動が行われるためユーザーはページ遷移したのかわからなくなる場合があります。
スムーススクロールを利用することで、すーっとスクロールされるため、こうした混乱から開放することができます。
df Smooth Scroll の優れた点は、すでにコンテンツで利用されているアンカータグでもスムーススクロールを実装できる点です。HTMLヘッダ部分で下記のようにJavaScriptライブラリを呼び出しておくだけで、既存のリンクがスムーススクロールするようになります。
<script type="text/javascript" src="smooth.pack.js"></script>
アンカータグをHTMLで記述する際<a name="名前" として記述します。しかし、XHTML、XHTML Basicではname属性が使用できません。id属性ではdf Smooth Scrollが動作しませんので、注意する必要があります。
スクロールに連動してアニメーション移動
縦長になったページもナビゲーションや、「 TOPへ戻る」などのリンクを表示しておくと、ユーザビリティが向上します。スタイルシートのposition:fixedではIE6.x以前のブラウザで利用できませんが、wrapScroll を利用することで、アニメーション処理をしながらスクロール連動する機能が実装できます。
移動する範囲を指定するには、親コンテナとなるエレメント要素のidを指定するだけと、非常に簡単です。
<script type="text/javascript">
new wrapScroll('movable','wrap');
</script>
<div id="wrap" style="height:600px">
<div id="movable">#movable</div>
</div>
サンプルソースのように記述すると<div id="wrap">の表示高さの範囲で<div id="movable">コンテンツ部分がスクロールに連動して移動するようになります。
コンテンツをすっきり見せるアコーディオン表示
ナビゲーションやコンテンツを表示する際に画面に収まりきれない場合があります。その際に便利で、さらにアイデア次第でいろいろな用途で使えるのがアコーディオン表示です。
定番になりつつあるアコーディオン表示
Accordion.js は縦方向のアコーディオンだけでなく、横方向にも対応しているので、デザインによって使い分けできるのは便利です。利用するにはprototype.js、scriptaculous.js[2] が必要になるので、別途導入する必要があります。
オプションパラメータのイベント設定をonEvent : 'mouseover'と指定すると、マウスを重ねたときにアコーディオンが動作するようにも出来ます。その他にも、アニメーションの処理時間を指定することも出来ます。
視覚効果で新しさを感じるナビゲーション
マウス操作でナビゲーションなどロールオーバー処理で画像を入れ替える手法はよく利用されています。Fancy Menu を使用すると、ゆっくりとフォーカスするメニューなどこれまでと異なる視覚効果を実装することが出来ようになります。
背景のフォーカス部分が、マウスにあわせてゆっくり移動
ダウンロード形式のサンプルは用意されていないため、紹介されているJavaScriptコードとCSSコードを参考にしながら実装する必要があります。
ぱらぱらアニメーションから、今後は滑らかな動きでユーザビリティを向上する手法が注目されるかと思います。Fancy Menuのアニメーション処理で利用されているMootoolライブラリ には豊富なサンプルがあります、それらからヒントを得ると良いかもしれません。
JavaScriptで実にいろいろな事ができると思われた方も多いかと思います。昨年までに登場したライブラリでも、開発期間を短縮できる便利なものから、斬新なアニメーションエフェクトの実装を容易にするなど、さまざまでした。
今年はさらにユーザビリティを重視し、より洗練されたインターフェースを実現するライブラリに注目しています。
例えば、マウスを重ねると画像を切り替えるボタン、ナビゲーションなど従来より使われてきた手法をリニューアルし、「 分かりやすさ＋感覚」を兼ね備えたインターフェースを実現するアイデアに期待しています。
