Scriptaculous を使ってみる[Javascript][Ajax]

このエントリーをはてなブックマークに追加


2006-02-19


先日 [2006-02-16-3] とりあえげた Javascript のライブラリ群に、Scriptaculous があります。

Scriptaculous
http://script.aculo.us/

Scriptaculous は、Prototype(Ajax とともに使われたりする Javascript Library の名前です)をベースにしたものですが、この手のライブラリを使ったことがなかったのでちょこっと勉強がてら、使ってみました。

Scriptaculous をダウンロードして解凍すると

- builder.js
- controls.js
- dragdrop.js
- effects.js
- prototype.js
- scriptaculous.js
- slider.js
- unittest.js

のように、機能別にライブラリがわかれています。たとえば、エフェクト、Draag & Dropを使いたければ <head></head> の間に

<script src="/js/prototype.js" type="text/javascript"></script>
<script src="/js/scriptaculous.js?load=effects,dragdrop" type="text/javascript"></script>


みたいに、指定してやります。全機能使うんだ!ということであれば

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


だけでよい......はず。

エフェクトとかの利用は、わりと簡単で、エフェクトを掛けたいところのタグに id を

<table id="blind-test">
<tr>
    <th>日本語</th><th>英語</th>
</tr>
<tr>
    <td>りんご</td><td>Apple</td>
</tr>
</table>


このように talbe タグに直接 id を振ってみたり、<div id="hogehoge"></div> で囲ってやったりします。

<div id="blind-test">
  <table>
  <tr>
      <th>日本語</th><th>英語</th>
  </tr>
  <tr>
      <td>りんご</td><td>Apple</td>
  </tr>
  </table>
</div>


あとは、掛けたいエフェクトからこの id を呼び出せば OK です。で呼び出し方としては、勝手に実行させる場合には

<script type="text/javascript">new Effect.BlindDown('blind-test')</script>


こんな感じで HTML 内に記述して、実行させます。クリックして実行とかをしたければ

<input type="button" value="消えたり" id="SubmitBtn" onclick="Effect.BlindUp('blind-test');">
<a href="#" onclick="Effect.BlindDown('blind-test');">現れたり</a>


というおなじみの指定でOKです。

で、実際のデモ。クリックするとテーブルがずるずると表示されたり、消えたりします(消えてるのに、また"消えたり"をクリックすると、消えっぱなしになるなぁ......そういうもの?)


日本語英語
りんごApple


上記のソースコード(HTML部分)を表示

ドラッグ & ドロップも同様に

<script type="text/javascript">new Draggable('drag-test')</script>


としてしてやれば移動できるようになります。

で、デモ。下の表は、マウスで、Drag & Drop できます。出来たところで、意味はないですが(^^;

#ドラッグ中は半透明になったりして、芸が細かい......

日本語英語
りんごApple


上記のソースコード(HTML部分)を表示

こんな感じでエフェクトはもちろんのこと、Ajax 用の機能もあったりします。そっちは、バックエンドの CGI 込みで作らないとあまり意味がないと思うので、後日遊んで見る予定。

ともあれ、あまりおもしろがってエフェクトを追加して行っても、ユーザ的にはどうだろ? 使いどころを間違えると、うざったがられるだけかもしれないので、気をつけないとね。

とりあえずこれでおおまかな使い方がわかったので、下記で挙げた、はてな技術発表会日記をじっくり読んで、もうちょこっと遊んでみよう(^-^;

参考:
Scriptaculous Demo
http://wiki.script.aculo.us/scriptaculous/show/Demos

はてな技術発表会日記 テーマ - script.aculo.us -
http://hatena.g.hatena.ne.jp/hatenatech/20051111



IPv4/IPv6 meter
検索キーワードは複数指定できます
ChangeLogを検索
Google
Web www.kunitake.org
思ったより安い……時もある、Amazon

カテゴリ