script.aculo.usを読み解く

第1回 scriptaculous.js

この記事を読むのに必要な時間:およそ 3 分

はじめに

script.aculo.usは,Web 2.0なサイトを簡単に作れるJavaScriptライブラリです。

Thomas Fuchs氏を中心に,2005年にMITライセンスで公開されてから,現在にいたるまで,活発な開発が続けられています。

AppleGucciといった,テクノロジとデザインに敏感な企業のWebサイトに導入された実績があります。

script.aculo.usというと,Web2.0なデザインを簡単に実現できるライブラリとして,派手なエフェクトにばかり注目が集まりますが,Ajaxを使った入力補完やドラッグアンドドロップなど,ユーザビリティの向上に大きな威力を発揮する点も見逃せません。

prototype.jsに大きく依存しているのも特徴のひとつです。

この連載では,script.aculo.usを読み解き,これらの機能が,いったいどんなコードで実現されているのかを解説していきたいと思います。

script.aculo.usのコードを見ると,ライブラリの機能を拡張するための,たくさんのフックが用意されていることがわかります。これらのフックを活用して機能を拡張していくには,周辺のコードの意味をある程度理解する必要にせまられるのですが,残念ながらそのためのドキュメントは不足しているのが現状です。この連載で,少しでもその不足を補えればと思います。

想定している読者は,script.aculo.usをただ使うだけでなく,自分の手で拡張していくためにコードの意味を理解したいという方,使われているJavaScriptのテクニックに興味がある方,自分で同様のライブラリを作ってみたい方などです。

なお,本稿では2008年1月3日にでた,連載開始時点の最新のバージョン1.8.1に基づいて説明してきます。

8つのライブラリ

script.aculo.usは,8つのライブラリから構成されています。各ライブラリは,次の機能を提供します。

controls.js
Ajaxを活用した,斬新なGUI部品のライブラリです。入力補完つきのテキスト入力ボックスや,Webページを"その場で編集できる"機能を,提供します。
effects.js
script.aculo.usの代名詞ともいえる,フェードアウトやズームインといった,派手なエフェクトの数々を提供するライブラリです。
dragdrop.js
Webページ上でドラッグ&ドロップを実現するためのライブラリです。
slider.js
スライダーというGUI部品のライブラリです。
builder.js
関数型言語のようににDOMを構築できるライブラリです。
sound.js
音声を再生するためのライブラリです。
unittest.js
単体テストを自動化するライブラリです。
scriptaculous.js
上記のライブラリをロードするためのライブラリです。

ソースコードの入手

script.aculo.usのソースコードは,公式サイトからダウンロードできます。ぜひ,お手元にダウンロードして記事と一緒にご覧になってください。

パッケージのtestディレクトリ以下には,ライブラリの単体テスト,機能テストを行うためのファイルがいくつも入っています。これらのテストを動作例として手元で実際に動かしてみると,入力の与えかたや期待されている出力がよくわかり,細かいオプションやフックの意味を知る手がかりになるでしょう。

scriptaculous.js

第1回は,scriptaculous.jsを解説します。

0001: // script.aculo.us scriptaculous.js v1.8.1, Thu Jan 03 22:07:12 -0500 2008
0002: 
0003: // Copyright (c) 2005-2007 Thomas Fuchs (http://script.aculo.us, http://mir.aculo.us)
0004: //
0005: // Permission is hereby granted, free of charge, to any person obtaining
0006: // a copy of this software and associated documentation files (the
0007: // "Software"), to deal in the Software without restriction, including
0008: // without limitation the rights to use, copy, modify, merge, publish,
0009: // distribute, sublicense, and/or sell copies of the Software, and to
0010: // permit persons to whom the Software is furnished to do so, subject to
0011: // the following conditions:
0012: //
0013: // The above copyright notice and this permission notice shall be
0014: // included in all copies or substantial portions of the Software.
0015: //
0016: // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
0017: // EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
0018: // MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
0019: // NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
0020: // LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
0021: // OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
0022: // WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
0023: //
0024: // For details, see the script.aculo.us web site: http://script.aculo.us/
0025: 

Thomas Fuchsによる著作権表示です。MITライセンスなので,オープンソースであるかないかに関わらず再利用が可能です。詳細は以下のリンクをご覧ください。

著者プロフィール

源馬照明(げんまてるあき)

名古屋大学大学院多元数理科学研究科1年。学部生のときにSchemeの素晴らしさを知ったのをきっかけに,関数型言語の世界へ。JavaScriptに,ブラウザからすぐに試せる関数型言語としての魅力と将来性を感じている。

ブログ:Gemmaの日記

コメント

コメントの記入