概要と基本的な演出効果

Script.aculo.usは、Thomas Fuchs氏を中心とするチームにより開発されているJavaScriptライブラリだ。MITライセンスが採用されており、2005年から公開を始め、執筆時点では11月に公開されたバージョン1.8が最新版になる。本稿では、そのバージョン1.8を使って(連載継続中にバージョンアップした場合はそちらに変更する可能性がある)、同ライブラリの基本を6回にわたって紹介しよう。

なお、Script.aculo.usを扱ううえでの必須知識となるPrototype.jsの使用法については、連載『いまからはじめるPrototype.js』で解説しているので、そちらをご覧いただきたい。

Script.aculo.usの概要

Script.aculo.usはPrototype.jsをベースに動作するライブラリだが、Prototype.jsが1つのファイルにすべての機能をまとめているのに対し、Script.aculo.usは8つのファイルに分かれている。それだけ多彩な機能を持っているということだ。スクリプトの容量をすべて合わせると約160KBになる。

単体でもAjaxian.comの2006年と2007年の調査でトップのPrototype.jsの次につけるほどの人気を得ているが、実はPrototype.jsと同様、Webアプリケーション・フレームワークRuby on Railsのプロジェクトで開発されているプロダクトであり、同フレームワークに同梱されているため、Ruby on Rails経由で使用されるケースも多い。

ダウンロード

まずは、同フレームワークを利用するための準備をしよう。

Script.aculo.usのトップページからは、scriptaculous-js-xxxxx.zip(xxxxxはバージョン番号)、同.tar.gz、同.tar.bz2の3つの形式のファイルがアップされているので、開発環境で解凍可能なものをダウンロードしていただきたい。

解凍によって生成されたディレクトリ下のsrcディレクトリにscriptaculous.jsをはじめ8つのファイルがある。また、同じ階層のlibディレクトリにはprototype.jsもある。Webページで利用する際は、あらかじめ両者をふくめた*.jsファイルをすべてWebページ用のディレクトリにコピーしておかなければならない。

HTML文書では、以下のようにファイル名を記述しておく。

<script type="text/javascript" src="《ディレクトリ》/prototype.js"></script>
<script type="text/javascript" src="《ディレクトリ》/scriptaculous.js"></script>

この状態でscriptaculous.js以外のファイルも後からすべて自動的にロードされるが、必要なファイルのみをロードするには、src属性の値で"《ディレクトリ》/scriptaculous.js?load=dragdrop,controls"のように、loadオプションで.jsより前の部分のファイル名をカンマ区切りで記述する。

基本的な演出効果(Core Effects)

ここからはCore Effectsに含まれる基本的な演出効果を紹介しよう。オプションなど詳細はWikiサイトで確認していただきたい。なお、特別な場合を除き、省略可能な記述は[～]で表す。

Effect.Highlight( IDもしくはDOMオブジェクト, { オプション } );
または $( IDもしくはDOMオブジェクト ).highlight( { オプション } );

実行後に、指定された要素の背景色を開始色から終了色まで(デフォルトでは1秒間かけて)変化させる

リスト1: 実行開始から<div>の背景色を2秒間かけて(duration : core effectsの共通オプション)変化させる例

new Effect.Highlight( 'demo', { startcolor : '#ffff33', endcolor : '#ffffff',
                                duration : 2 } );
または
$( 'demo' ).highlight( { startcolor : '#ffff33', endcolor : '#ffffff',
                         duration : 2 } );

※ 操作対象 : <div id="demo">背景色が変化する</div>

Effect.Morph( IDもしくはDOMオブジェクト, { style : 'スタイルシート' [, オプション] } );
または $( IDもしくはDOMオブジェクト ).morph( 'スタイルシート' [, { オプション} ] );

実行前の状態からスタイルシートの状態に(デフォルトでは1秒間かけて)変化させる

リスト2: 実行開始から0.5秒遅れて(delay : core effectsの共通オプション)、<div>の表示領域を150px四方に、フォントを25ptにする例

new Effect.Morph( 'demo', { style : 'width : 150px;  height : 150px;  font-size : 25pt;', delay : 0.5 } );
    または
$( 'demo' ).morph( 'width : 150px;  height : 150px;  font-size : 25pt;',
                   { delay : 0.5 } );

※ 操作対象 : <div id="demo">大きさが変化する</div>

Effect.Move( IDもしくはDOMオブジェクト,
{ x : X軸の移動距離, y : Y軸の移動距離
[, mode : 'relative もしくは absolute' ] [, オプション ] } );

xとyの距離だけ移動させる。relative(デフォルト)では何度も同じ距離だけ動くが、absoluteは最初の1回しか動かない。

リスト3: 1回だけ右に100px、下に50px移動する例

new Effect.Move( 'demo', { x : 100, y : 50, mode : 'absolute' } );

※ 操作対象 : <div id="demo">位置が動く</div>

Effect.Opacity( IDもしくはDOMオブジェクト,
{ from : 開始時点の透明度, to : 終了時点の透明度
[ , duration : 変化させる時間 ] [, オプション ] } );

透明度をfromからtoまで変化させる。デフォルトではfromが開始時点もしくは0%(まったく見えない)、toは100%に設定されるが、最低でもfromかtoの一方は指定されていなければならない。

リスト4: 2秒間かけて20%まで透明にする例

new Effect.Opacity( 'demo', { from : 1, to : 0.2, duration : 2 } );

※ 操作対象 : <div id="demo">徐々に透明になる</div>

Effect.Scale( IDもしくはDOMオブジェクト, 拡大/縮小率 [, { オプション } ] );

拡大/縮小率(もとの大きさを100とする)の分だけ拡大/縮小する。このとき指定されたテキストのフォントサイズも同じ比率で拡大/縮小する。オプションはドキュメント参照。

リスト5: 表示領域と文字の大きさを中心から広げて1.5倍にする

new Effect.Scale( 'demo', 150, { scaleFromCenter : true } );

※ 操作対象 : <div id="demo">大きさが変化する</div>

Effect.Parallel( Effectの配列, { オプション } );

上記を含む各種の演出効果を同時並行して実行する

リスト6: 2つの<div>に対する演出効果を同時に実行する([～]は配列)

new Effect.Parallel( [
    new Effect.Opacity( 'demo1', { from : 1, to : 0.2, sync : true } ),
    new Effect.Scale( 'demo2', 150, { sync : true } )
] );

※ 操作対象 : <div id="demo1">徐々に透明になる</div>
              <div id="demo2">大きさが変化する</div>

次回は、これらを組み合わせた複合的な動作をするものを紹介したい。