「Webサイトを作るときに本当によく使う機能を、自分で作らずにさくっと実装したい」――。そんなワガママな願望をかなえてくれる JavaScriptライブラリが登場した。ミツエーリンクスが今月オープンソースとして公開した「MJL（MITSUE-LINKS JavaScript Library）」は、Webサイト制作に必須の“最小限の機能”に絞ったJavaScriptライブラリだ。
Web制作会社「ミツエーリンクス」がリリースしたMJL
昨今相次いで公開されている、リッチなUIを実現するJavaScript/Ajaxライブラリとは異なり、MJLの機能はとてもシンプルだ。もともとWeb制作会社であるミツエーリンクスが「自社標準ライブラリ」として作成したものだけあって、汎用性・実用性を重視したライブラリになっている。
具体的な機能は以下の6つ。確かにどれもよく使いそうなものばかりだ。
- 画像のロールオーバー
- Flashオブジェクト埋め込みの機能拡張
- 新規ウインドウの作成
- スタイルスイッチャ
- タブインターフェイス
- ブロック要素の高さ揃え
実際の使い方もシンプルで簡単だ。基本的には、「mjl.js」と「run.js」の2つのスクリプトファイルを読み込むように設定し、機能を組み込みたい要素に対して規定のclassを指定するだけ。JavaScriptのコードを書かずに使える。オプションのパラメーター設定が必要な場合も、runs.jsをちょこっといじるだけだ。
たとえば画像のロールオーバーを組み込む場合は、以下のように<img>タグに書き加える。ロールオーバー時の画像は「image1_o.jpg」のように、末尾に「_o」をつけたファイルを元画像と同一のディレクトリに用意しておこう。
簡単に実装できるロールオーバー機能
<img src="image1.jpg" alt="image1" class="roll">
ロールオーバーは親要素による一括指定ができるので、たとえばメニュー画像のように複数ロールオーバーを設定したい場合も1カ所書き足すだけで済む。
<ul class="roll">
<li><img src="image1.jpg" alt="top"></li>
<li><img src="image2.jpg" alt="about"></li>
<li><img src="image3.jpg" alt="content"></li>
<li><img src="image4.jpg" alt="contact"></li>
</ul>
（次ページ：ブロック要素の高さ揃えも一発でOK）
