2006年1月11日

Javascript（script.aculo.us）で、ブログをアニメーション・デザイン

Ruby on Railsなどにも含まれている、話題のJavascriptライブラリを週末にちょこっと触ってみた。prototype.jsを継承して、Ajaxなユーザーインターフェース機能を実装するためのライブラリ。

script.aculo.us - web 2.0 javascript

HTMLコード内に、いちいちファンクションを定義せず、クラス指定だけでアニメーションさせるようにしてみました。

インストールは簡単

  1. 上記のサイトから、scriptaculous-js-1.5.1.zip をダウンロードして解凍
  2. /lib と /src を、そのまま自分のサーバにアップロード
  3. アップロードしたjavascriptを、使用するページのheadでInclude

<head>
<script src="js/lib/prototype.js" type="text/javascript"></script>
<script src="js/src/scriptaculous.js" type="text/javascript"></script>
<script src="js/src/unittest.js" type="text/javascript"></script>
</head>

ひとまず使ってみる

script.aculo.usのデモ・ページの例のように、デフォルトで沢山のエフェクトが用意されています。各エフェクトを、HTMLにべた書きするだけでも、ひとまずは使うことができます。

基本的には、onclickなどのJavascriptイベントに、ファンクションを指定。エフェクトさせたいDOMノードを指定します。

<div id="sample_yellowfade">
<p>JavascriptなUIといえば、まずはイエローフェードです</p>
<a href="#pre1" onclick="new Effect.Highlight('sample_yellowfade')">
クリックしてみよう！</a>
</div>

このスクリプトは、以下のようなデモになる。

JavascriptなUIといえば、まずはイエローフェードです

クリックしてみよう！

ファンクション（動作）のHTMLベタ書きを回避する

ただこの書き方だと、HTML内にJavascriptのファンクションが直書きになっていて、なんとなくいやな感じです。CSSの利用で、「HTMLはデータ構造」「CSSでデザイン」という役割分担ができているので、Javascriptのファンクションも同じくHTML本体からは分離したい。
このニーズに対するソリューションが、以下のプレゼンで解説されていました。

The Behaviour Layer: Using JavaScript for good, not evil

「動作レイヤー：Javascriptを悪ではなく善に使うためには」というタイトル。この中で紹介されている、Class指定にJavascriptのファンクション（動作）をアサインする方法を応用します。

ディスパッチ　使用前

こんな風にエフェクトを使いたいとします。

<div onmouseover="new Effect.Highlight('sample_fade', 
 {startcolor:'#aaaaff', endcolor:'#ffffff', restorecolor:'#ffffff'})" 
id="sample_fade">
<a href="#">
<img width="128" height="100"
 src="http://www.goodpic.com/mt/pic4/king/icon.jpg" alt="" /></a>
<h5><a href="#">マウイ島</a></h5>
</div>
表示例

ファンクション（動作）のディスパッチ

上記の onmouseover のファンクション指定を行う、別のJavascriptを作成します。そして、class="fade"が指定された<div>要素に対して、そのJavascriptからファンクションをアサインします。

ファンクション指定の代わりに、クラスを指定
<div class="fade">
<a href="#">
<img width="128" height="100"
 src="http://www.goodpic.com/mt/pic4/king/icon.jpg" alt="" /></a>
<h5><a href="#">マウイ島</a></h5>
</div>

このクラス（ div.fade ）に対して、動作をディスパッチするJavascriptを作成します。

<script type="text/javascript" language="javascript" charset="utf-8">

function doAnimation() {
  if (!document.getElementsByTagName) return false;
  var lists = document.getElementsByTagName("div");
  for (var i=0; i < lists.length; i++) {
    if (lists[i].className.match("fade")) {
      
      lists[i].onmouseover = function() {
        new Effect.Highlight(this, 
           {startcolor:'#aaaaff', endcolor:'#ffffff', restorecolor:'#ffffff'});
      }
    } else if (lists[i].className.match("pulse")) {
      
      lists[i].onmouseover = function() {
        new Effect.Pulsate(this);
      }
    }
    
  }
}
window.onload = doAnimation;
</script>

このスクリプトを<head>などで記述しておくと、HTMLが読み込まれる際に、div.fade に onmouseover の動作がアサインされます。ちょっと、力技のような気もしますが、HTMLの見通しは遥かによくなりますね。あと、既存のページでも、DOM構造とクラス指定がしっかりしていれば、後から動作を追加することも可能。

動作デモ 1

マウイ島 サーフィン

別の種類のエフェクトを追加する場合も、ディスパッチャにクラス指定と、対応するファンクションを追加するだけなので、メンテナンス性もよさそう。

動作デモ 2

マウイ島 サーフィン

というわけで、トップページや、写真の一覧ページに組み込んでみました。なかなかいい感じ。script.aculo.usは、他にも色々と面白そうなファンクションがそろっているので、もう少し使ってみようかな。

<<　ホームに戻る

 

ブックマーク & はてなスター

トラックバック

トラックバックURL

ブログ記事の情報

このページへのリンク

このブログを

作成日 ： 2006年1月11日 00:05