Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

Script.aculo.usで実現できる、さまざまな視覚効果

Script.aculo.us入門 (2)

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

 オープンソースのJavaScriptライブラリ「Script.aculo.us」には、手軽に利用できる各種の視覚効果機能が用意されています。それらを使って、よりビジュアルなページ作りをしましょう。

目次

はじめに

 先に「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」というフォルダを作成し、この中に次のようにフォルダを配置していきます。

jsappフォルダ内の構成
フォルダ名 説明
「js」フォルダ JavaScriptファイルの配置場所。ここに、Script.aculo.usのファイル類とprototype.jsを配置。
「css」フォルダ スタイルシートの配置場所。
「img」フォルダ イメージファイルの配置場所。

 「jsapp」には、index.htmlを用意し、ここでScript.aculo.usの機能を使ってみます。この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を利用する場合には、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つのオプションが用意されています。

Grow/Shrinkのオプション
オプション名 説明
direction これはイメージが現れる方向を指定するもので、'top-left'として左上から拡大表示されるように指定しています。他、'center', 'top-right', 'bottom-left', 'bottom-right'といった値が指定できます。
duration エフェクトにかかる時間を秒数で指定します。例えば、duration: 3とすれば、3秒かけてイメージが拡大します。

 この2つのメソッドを見れば分かるように、視覚効果関係のメソッドは「Effect」というクラスにまとめられてまとめられています。またメソッドの引数も基本的にはほぼ統一されています(ただし使えるオプションには多少の違いがあります)。


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

著者プロフィール

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

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

バックナンバー

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