Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

Script.aculo.usで、ビジュアルなWebページを作成しよう

Script.aculo.usのGUI系コンポーネントの基礎

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加
2009/02/20 14:00

 JavaScriptによるビジュアルな仕掛けを自分のサイトでも使いたい、と思っているあなた。簡単で機能豊富なオープンソースのJavaScriptライブラリ「Script.aculo.us」を導入してみませんか?

目次

はじめに

 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となっています。まずは、ダウンロードページにアクセスし、ライブラリファイルをダウンロードしましょう。

図1 ダウンロードページから、Zipファイルをダウンロードする。
図1 ダウンロードページから、Zipファイルをダウンロードする。

 ページ中央の「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」というフォルダを作成し、ここにファイルを配置することにします。このフォルダ内には、次のようなフォルダを用意しておきます。

jsappのサブフォルダ
フォルダ 説明
「js」フォルダ JavaScriptファイルの配置場所。ここに、Script.aculo.usのファイル類とprototype.jsを配置しておきます。
「css」フォルダ スタイルシートの配置場所。
「img」フォルダ イメージファイルの配置場所。

 ここに、各種のファイルを配置していくことにしましょう。まずは、基本となるものとして、「jsapp」内に「index.html」を、そして「css」内に「style.css」をそれぞれ用意しておくことにします。それぞれのファイルの内容は、次のようにしておきましょう。

index.html
<!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>
style.css
@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で統一して作成することにします。


  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • 掌田 津耶乃(ショウダ ツヤノ)

    三文ライター&三流プログラマ。主にビギナーに向けたプログラミング関連の執筆を中心に活動している。 ※現在、入門ドキュメントサイト「libro」、カード型学習サイト「CARD.tuyano.com」を公開中。またGoogle+プロフィールはこちら。

バックナンバー

連載:Script.aculo.usで作成するビジュアルなWebページ
All contents copyright © 2005-2019 Shoeisha Co., Ltd. All rights reserved. ver.1.5