ミツエーリンクスの標準ライブラリ「MJL」

Web制作会社が作った！超使えるJavaScriptライブラリ

2008年10月28日 04時00分更新

文● 小橋川誠己／企画報道編集部

　「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>