はじめに
Ajaxの登場によりJavaScriptへ多くのWeb開発者の注目が集まって以降、JavaScriptは、クールなWebページを作る上でなくてはならないものとなってきています。特に、ビジュアルな表示や効果を実現するためには、JavaScriptは今や不可欠のものといってよいでしょう。以前は、こうしたものをJavaScriptで実装するには気の遠くなるコーディングが必要でしたが、現在は多数のJavaScriptライブラリが登場し競い合っています。JavaScriptを手軽に導入したい、という人には夢のような時代となった、といってよいでしょう。
が、あまりに多くのライブラリが登場したため、果たしてどれを使えばいいのか、よく分からなくなってしまった、という人も多いでしょう。また、機能を高度化するあまり、使い方がひどく難しくなってしまっているライブラリもあります。比較的簡単に、しかも効果的なビジュアルを作成できるライブラリはどれなのか、悩んでいる人も多いのではないでしょうか。
もし、便利なGUIや、ビジュアルを支援する各種の視覚効果などをJavaScriptで実現したい、と考えているなら、「Script.aculo.us」は非常によい選択肢です。本記事では、Script.aculo.usに用意されている主な機能の使い方を紹介し、どれだけ手軽に高度なGUIを実現できるのか体感してもらいたいと思います。
対象読者
- JavaScriptで高度なGUIを簡単に組み込みたいと思っているデザイナ。
- JavaScriptの基本は分かっているけれど、本格的なコーディングにはちょっと自信がないという人。
- JavaScriptで何ができるのか、とりあえず見てみたいと思う人。
Script.aculo.usとは？
今回、利用するScript.aculo.usというライブラリは、その名の通りscript.aculo.usというサイトで開発配布されているフリーのJavaScriptライブラリです。このScript.aculo.usというライブラリ、「あまり聞いたことがないな」と思った人もいるかも知れませんが、Rubyのフレームワーク「Ruby on Rails」や、PHPのフレームワーク「CakePHP」といったものでサポートされていることもあって、実は意外に広く使われています。
本記事執筆時点で、最新バージョンは1.8.2となっています。まずは、ダウンロードページにアクセスし、ライブラリファイルをダウンロードしましょう。
ページ中央の「current version」から、最新版をダウンロードできます。Windowsでの利用なら、Zipファイルをダウンロードすると良いでしょう。ダウンロードした圧縮ファイルを展開すると、フォルダ内に「src」というフォルダが作成されます。このフォルダの中に入っているJavaScriptファイルが、Script.aculo.usの本体です。これを自分のWebサイトにコピーし、HTMLから読み込むことで使えるようになります。
ただし！ これだけではまだScript.aculo.usは使えません。Script.aculo.usは、内部でprototype.jsライブラリを使用しています。従って、prototype.jsもWebサイトにコピーしてやらなければいけません。といっても、わざわざprototype.jsをサイトからダウンロードしてくる必要はありません。Script.aculo.usのフォルダ内にある「lib」フォルダの中に、prototype.jsが用意されています。これをそのまま使ってください。
ファイルとフォルダ構成を整える
ここでは、例としてWebサーバーの公開ディレクトリに「jsapp」というフォルダを作成し、ここにファイルを配置することにします。このフォルダ内には、次のようなフォルダを用意しておきます。
| フォルダ | 説明 |
| 「js」フォルダ | JavaScriptファイルの配置場所。ここに、Script.aculo.usのファイル類とprototype.jsを配置しておきます。 |
| 「css」フォルダ | スタイルシートの配置場所。 |
| 「img」フォルダ | イメージファイルの配置場所。 |
ここに、各種のファイルを配置していくことにしましょう。まずは、基本となるものとして、「jsapp」内に「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を利用する場合には、<script>タグで2つのファイルを読み込みます。1つは「prototype.js」、もう1つは「scriptaculous.js」です。それ以外のJavaScriptファイルは、<script>タグで読み込む必要はありません。また、Script.aculo.usでは、HTMLのタグを利用して機能を組み込むことが多いため、タグの表示を指定するためのCSSファイルを用意するのは基本といってよいでしょう。いちいち個々のタグに直接スタイルを記述していくのは、あまりスマートなやり方とは言えませんから。
また、いずれも文字エンコーディングが「UTF-8」に設定されていますね。日本語を扱うことを考え、ここではすべてのファイルのエンコーディングをUTF-8で統一して作成することにします。
