2005-08-29 (月)
■ prototype.js (1)
Flickr プラグインで JavaScript を使ったのをキッカケに、もう少し JavaSctipt を勉強することにした。 当面の目標は、Ajaxを使ったチャットの再構築と簡単なボードゲームの作成。
JavaSctipt のライブラリとしては、 Ruby on Rails (RoR) との親和性が高い（らしい） script.aculo.us と、そのベースとなっている prototype.js を使うことにする。
prototype.js は、 JavaSctipt でクラスベースのプログラミングを可能にするライブラリみたいだけど、それ以外にも便利なクラスが含まれているみたい。 参考になりそうなページをいくつかピックアップ。
- prototype.js ってなに？の巻 - こども(てれび)
- Using prototype.js v1.3.1
- naoyaのはてなダイアリー - prototype.js でデザインパターン - Iterator
まず最初は、ある要素を別の領域に移動させるサンプルを作ってみた。 実はこれだけでも結構時間がかかっていたり…。先は長いな。
<html>
<head>
<title>remove and append</title>
<meta http-equiv="Content-Type" content="text/html; charset=EUC_JP" />
<script src="prototype.js" type="text/javascript"></script>
<style tyle="text/css">
div { margin:1em; padding: 1em; border: dashed 1px #888; }
span { padding: 0.3em; border: solid 1px #88f; }
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"><span id="item1" onclick="move()">click me</span></div>
<div id="div3"></div>
<script type="text/javascript"><!--
function move() {
var to = $('div1');
var from = $('div2');
var item = $('item1');
// from.removeChild(item);
to.appendChild(item);
}
// -->
</script>
</body>
</html>
div2 要素に含まれる item1 要素（「click me」という文字）をクリックすると、その文字が一つ上の div1 に移動するようになっている。
- $('div1')
- prototype.js で提供されている機能。 id が div1 である要素を返す。getElementById('div1') と同じ意味。
- from.removeChild(item)
- from から item を削除する。
- to.appendChild(item)
- to に item を追加する。
試してみたところ、 removeChild の行は無くても同じように動作した。 appendChild すると、自動的に前の親は取り除かれるってことか。
追記
JavaSctipt は Web ブラウザ上で動くので通常の言語よりもデバッグが大変。 FireFox に JavaScript Debbuger プラグインをインストールすると、IDEライクなデバッガが使えるようになる。 BrackPoint の追加や変数の中身を見ることができるので重宝しそう。
FireFox + JavaScript Debbuger + JavaScript コンソール + Live HTTP Header があれば心強いかな。
IEでも、Visual Studioがあればデバッグができるみたい。
■ prototype.js (2)
次は Drag and Drop のサンプル。 これは、 script.aculo.us の機能を使う。 公式サイトのサンプルはこんな感じ。
script.aculo.us では、Drag and Drop でリストの並び替えを実現する Sortableという機能と、より低レベルな Drag And Dropという機能がある。 Sortable だと細かな操作ができないので、ここでは Drag And Drop を使う。
サンプルは以下のとおり。
<html>
<head>
<title>Drag and Drop test</title>
<meta http-equiv="Content-Type" content="text/html; charset=EUC_JP" />
<script src="prototype.js" type="text/javascript"></script>
<script src="scriptaculous.js" type="text/javascript"></script>
<style tyle="text/css">
.draggable { background-color: pink; border: solid 1px #888; }
</style>
</head>
<body>
<h1>Drag and Drop test</h1>
<table border="1">
<tr>
<td id="droppable1">1 <span id="draggable1" class="draggable">draggable1</span></td>
<td id="droppable2">2 <span id="draggable2" class="draggable">draggable2</span></td>
<td id="droppable3">3 <span id="draggable3" class="draggable">draggable3</span></td>
</tr>
<tr>
<td id="droppable4">4 </td>
<td id="droppable5">5 </td>
<td id="droppable6">6 </td>
</tr>
</table>
<p>
<span id="draggable4" class="draggable">draggable4</span>
<span id="draggable5" class="draggable">draggable5</span>
<span id="draggable6" class="draggable">draggable6</span>
</p>
<script type="text/javascript" language="javascript">
for(i=1;i<=6;i++) {
new Draggable('draggable' + i, { revert:true });
}
for(i=1;i<=6;i++) {
var droppable = $('droppable' + i);
Droppables.add(droppable, {
accept: 'draggable',
onDrop: function(draggable, droppable) {
droppable.element.appendChild(draggable);
}
});
}
// -->
</script>
</body>
</html>
基本は、マウスで動かす要素のDraggableと、マウスを放す場所のDroppableを使い、Droppable の onDrop イベントに、D&Dされたときに実行したい関数を登録する。 ここでは、最初のサンプルで作った、要素を移動する関数を登録している。
onDrop の関数の引数は、「the Draggable element, and the Droppable element」だとドキュメントに書いてある。 でも実際は、第二引数は Element ではなくて Droppable が渡されているみたい。 Element にアクセスするには、サンプルのように droppable.element を使う。
ちなみに
script.aculo.us は複数の機能を持っていて、それぞれ別の .js ファイルに格納されている。 このうち、 scriptaculous.js を読み込むと、全ての .js ファイルが読み込まれるみたい。
