はじめに
先に「Script.aculo.usで、ビジュアルなWebページを！」で、Ajaxを利用した各種のGUIコンポーネントについて説明をしました。今回は、Script.aculo.usのもう1つの柱である「視覚効果」について説明しましょう。
視覚効果は、特定の要素に対し、さまざまな表示の変化を与えるものです。例えば、消したり表示したり、動かしたり、スタイルを変えたり……。Script.aculo.usの視覚効果は、それらの経過時間や開始・終了時の状態などを細かに設定することができます。
実際にサンプルをいくつか試してみれば、「あれ？ この効果、どこかのサイトで見たことあるぞ？」と思うものがいくつも見つかることでしょう。Script.aculo.usの視覚効果は、非常に簡単に導入することができます。実際にサンプルを動かしながら、自分の目で確かめてみてください。
対象読者
- JavaScriptで高度なGUIを簡単に組み込みたいと思っているデザイナ。
- JavaScriptの基本はわかっているけれど、本格的なコーディングにはちょっと自信がないという人。
- JavaScriptで何ができるのか、とりあえず見てみたいと思う人。
Script.aculo.us利用の基本
まずは、Script.aculo.us利用について簡単におさらいしておきましょう。ここでは、Webサーバの公開ディレクトリに「jsapp」というフォルダを作成し、この中に次のようにフォルダを配置していきます。
| フォルダ名 | 説明 |
| 「js」フォルダ | JavaScriptファイルの配置場所。ここに、Script.aculo.usのファイル類とprototype.jsを配置。 |
| 「css」フォルダ | スタイルシートの配置場所。 |
| 「img」フォルダ | イメージファイルの配置場所。 |
「jsapp」には、index.htmlを用意し、ここでScript.aculo.usの機能を使ってみます。このindex.htmlと、「css」フォルダに「style.css」というスタイルシートファイルを用意します。それぞれのソースコードは次のようになります。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Script.aculo.us</title> <link rel="stylesheet" type="text/css" href="./css/style.css" /> <script type="text/javascript" src="./js/prototype.js"></script> <script type="text/javascript" src="./js/scriptaculous.js"></script> </head> <body> <h3 class="title">Script.aculo.us sample</h3> ※サンプルのindex.html。ここに試験用のコードを書く。 </body> </html>
@CHARSET "utf-8";
h3.title {
padding-left:10px;
color: #FFFFFF;
background-color : #000099;
}
Script.aculo.usを利用する場合には、prototype.jsとscriptaculous.jsの2つのJavaScriptファイルを読み込んでおく必要があります。サンプルのHTMLソースコードにある2つの<script>タグがそのための文です。これさえ用意してあれば、Script.aculo.usはすぐにでも使えるようになります。
イメージの表示と消去
Webページでは、何か新しい要素を画面に表示させたいと思うことがよくあります。例えば、ボタンを押すと、イメージが現れる、というようなことです。JavaScriptの利用により、あらかじめ非表示にしたイメージを用意しておき、それをぱっと表示する、というようなことは比較的簡単にできるようになりました。例えば、こんな感じです。
<a href="#" onclick="document.getElementById('img1').style.display = 'inline';">show Image!</a>
<br />
<a href="#" onclick="document.getElementById('img1').style.display = 'none';">
<img id="img1" style="width:100px; height:100px; display: none;" src="./img/image1.jpg" />
</a>
これは、「img」フォルダに用意した「image1.jpg」というイメージの表示をON/OFFする簡単な例です。<a>タグのonclickで、img1のdisplayスタイルを変更して表示・非表示を切り替えています。ごく単純なものです。
一昔前なら、これでも十分役に立ったのですが、今ではもう少しクールな表示の仕方を考えたいでしょう。そこで、Script.aculo.usの出番です。まずは、「イメージが拡大しながら現れる」というものをやってみましょう。
<a href="#" onclick="Effect.Grow('img1',{direction: 'top-left',duration: 3}); return false;">show Image!</a>
<br />
<a href="#" onclick="Effect.Shrink('img1',{direction: 'top-left',duration: 3}); return false;">
<img id="img1" style="width:100px; height:100px; display: none;" src="./img/image1.jpg" />
</a>
リンクをクリックすると、イメージがゆっくりと拡大しながら現れます。また、現れたイメージをクリックすると、今度はゆっくり縮小しながら消えていきます。ここでは、「Effect.Grow」と「Effect.Shrink」というものを利用してイメージの表示・非表示をさせています。これは、次のように呼び出します。
Effect.Grow( タグ , オプション設定 );
Effect.Shrink( タグ , オプション設定 );
第1引数では、拡大表示するタグのIDを指定します。第2引数では、指定するオプションを連想配列の形でまとめたものを渡します。このGrow/Shrinkでは、以下の2つのオプションが用意されています。
| オプション名 | 説明 |
| direction | これはイメージが現れる方向を指定するもので、'top-left'として左上から拡大表示されるように指定しています。他、'center', 'top-right', 'bottom-left', 'bottom-right'といった値が指定できます。 |
| duration | エフェクトにかかる時間を秒数で指定します。例えば、duration: 3とすれば、3秒かけてイメージが拡大します。 |
この2つのメソッドを見れば分かるように、視覚効果関係のメソッドは「Effect」というクラスにまとめられてまとめられています。またメソッドの引数も基本的にはほぼ統一されています（ただし使えるオプションには多少の違いがあります）。
