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

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

ドラッグ項目を作る

　Script.aculo.usに用意されているビジュアル関係の機能は、大きく「ドラッグ&ドロップと、それを利用したGUI部品」「Ajax利用のGUI部品」「視覚効果」の3つに分けて考えることができます。まずは、ドラッグ&ドロップ利用のGUI部品から説明しましょう。

　ドラッグ&ドロップはHTMLの要素をドラッグして動かしたり、ドロップして何かの処理を行わせる機能を追加します。最初に、基本となる「ドラッグ」から行ってみましょう。

index.htmlのボディに追加

<div id="drag1" class="drag_div">Drag項目その1</div>
<script type="text/javascript">
<!--
new Draggable('drag1');
//-->
</script>

style.cssに追加

div.drag_div {
    position: absolute;
    left: 20px;
    top: 50px;
    width : 120px;
    height : 60px;
    background-color : #ccccff;
}

図2　「Drag項目その1」をマウスでドラッグできる。

　それぞれを追記した後、http://localhost/jsapp/にアクセスしてみましょう。「Drag項目その1」という四角い要素が表示されます。これをマウスでドラッグしてみてください。自由に場所を移動することができます。

　ドラッグの実装は、Script.aculo.usに用意されている機能の中で最も簡単なものでしょう。これは、次のようなJavaScript文を実行するだけで実現できます。

new Draggable('IDの指定');
new Draggable('IDの指定',{ オプションの指定 });

　引数にIDを指定すると、そのIDのタグによる表示がマウスでドラッグできるようになります。ここでは<div>タグを使っていますが、それ以外のタグでも同じようにしてドラッグ可能にできます。また、ドラッグに関する細かなオプションを設定したい場合には、第2引数に{}を使って属性名とその値を記述します（オプションについてはこの後で使います）。

コールバックを利用する

　ただ項目をドラッグするだけでは、「ちょっと珍しいね」でおしまいです。ドラッグして何かの処理を実行したりできて、初めて「役に立つ機能」となる、といってよいでしょう。Draggableには、いくつかのコールバックが用意されています。ドラッグ時に発生するイベントに関数を関連付け、何かの操作をすると自動的に処理を呼び出すことができるようになっています。

index.htmlの<script>タグのスクリプトを修正

new Draggable('drag1',{
    onDrag: function(element,event){
        var x = element.handle.style.left;
        var y = element.handle.style.top;
        element.handle.innerHTML = 'location:<br /> [' + x + ',' + y + ']';
    },
    onEnd: function(element,event){
        element.handle.innerHTML = 'ドラッグしました。';
    }
});

図3　ドラッグするとリアルタイムに現在の位置が表示される。

　<script>タグで実行している処理を、このように修正しましょう。そしてWebブラウザでリロードし、マウスでドラッグをしてみてください。ドラッグ中、リアルタイムに現在の位置が項目に表示され、ドラッグを終了すると「ドラッグしました」と表示されます。

　ここでは、Draggableの作成時に、第2引数にイベントに関するオプションを設定しています。よく見ると、こんな形をしているのが分かりますね。

new Draggable('drag1',{onDrag:関数定義,onEnd:関数定義 });

　オプションの設定は、このようにオプション名をキーとする連想配列の形で記述されます。ここでは「onDrag」「onEnd」というオプションを使っていますが、これらはそれぞれイベントが発生すると、値として用意した関数を実行する働きをします。関数は、次のような形で定義されます。

function(element,event){……実行する処理……}

　第1引数にはDraggableオブジェクトが、第2引数には発生したイベントのオブジェクトがそれぞれ渡されます。Draggableオブジェクトには、ドラッグしているエレメントの参照を示すhandleというプロパティがあり、これを使ってドラッグしているエレメントを操作することができます。例えば、ここでは、

var x = element.handle.style.left;
var y = element.handle.style.top;

　このようにしてドラッグしているエレメントの位置の値を変数に取り出し、そしてelement.handle.innerHTMLに値を設定することで、ドラッグしているオブジェクトにテキストを表示させています。