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

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

ドラッグ可能なリスト

　HTMLでは、<ul>,<li>といったタグを使ってリストを表示することができますが、このリストは固定された表示で、並んでいる項目の順番を入れ替えたりすることができません。このリストをドラッグして入れ替えできるようにするための機能を提供するのが「Sortable」というオブジェクトです。あらかじめリストをHTMLタグで用意しておき、Sortableオブジェクトを使ってその項目をドラッグ可能にします。では、これもサンプルを挙げましょう。

index.htmlのボディに記述

<ul id="drag_list" class="drag_list">
    <li class="drag_item">Windows</li>
    <li class="drag_item">Linux</li>
    <li class="drag_item">Mac OS X</li>
    <li class="drag_item">TRON</li>
</ul>
<script type="text/javascript">
<!--
Sortable.create( 'drag_list', {
  overlap: 'vertical',
  constraint: 'vertical'
} );
//-->
</script>

style.cssへ追加

li.drag_item {
    margin: 3px;
    cursor:pointer;
    width: 200px;
    background-color : #ddddff;
}

図6　項目をマウスで上下にドラッグして並び順を入れ替えることができる。

　表示されたリストの項目をマウスで上下にドラッグすることで簡単に並び順を入れ替えることができます。ここでは、次のような形でSortableオブジェクトにソート可能リストを作成しています。

Sortable.create('<ul>のID',{オプション設定});

　オプションはoverlapとconstraintが用意されています。これらは、それぞれリストの並ぶ方向とドラッグして移動できる方向を指定するもので、'horizontal'または'vertical'のいずれかを指定します。

　ここでは<ul>と<li>タグでリストを作成しましたが、実をいえば<ul><li>タグでなくとも、並べ替え可能なリストを作成することができます。外側のタグの内部に、リストとなる複数のタグが書かれているという構造さえ正しく作られていれば、他のタグでも可能なのです。Sortable.createをする際、オプションに「tag: 'タグ名'」というものを用意することで、それ以外のタグをドラッグして並べ替えられるようにすることもできます（ここでは、/jsapp/img以下に3つの画像を用意しています）。

<div id="drag_list" class="drag_list">
    <img class="drag_item" src="./img/image1.jpg" />
    <img class="drag_item" src="./img/image2.jpg" />
    <img class="drag_item" src="./img/image3.jpg" />
</div>
<script type="text/javascript">
<!--
Sortable.create( 'drag_list', {
  overlap: 'horizontal',
  constraint: 'horizontal',
  tag: 'img'
} );
//-->
</script>

図7　横に並んだイメージを自由にドラッグして入れ替えることができる。

　例えば、これはドラッグで入れ替え可能なイメージ・リストの例です。Sortable.createする際に、オプションとしてtag: 'img'を指定することで、<img>タグをドラッグして並べ替えられるようになるのです。

編集可能なテキストの作成

　ここまでのコンポーネント類は、すべてHTMLページの内部で完結するものでしたが、この他にAjaxによる非同期通信を利用して表示を更新するタイプのものも用意されています。その1つが、「編集可能テキスト」です。これは文字通り、表示されているテキストに編集機能を付加するものです。クリックすると編集用のフォームが表示され、そこでテキストを変更して送信すると、サーバに内容が送られ、新たに表示するテキストをサーバから受け取って設定します。

index.htmlのボディを修正

<span id="edit_tag">クリックすると編集できます</span>
<script type="text/javascript">
<!--
new Ajax.InPlaceEditor( 'edit_tag', 'ajax.php');
//-->
</script>

　非常に単純です。Ajax.InPlaceEditorオブジェクトを作成するだけで、指定したIDのテキストを変更できるようになります。これは、次のような形でnewします。

new Ajax.InPlaceEditor( 'IDの指定', '送信先アドレス');

　第2引数には、フォームの送信先を指定します。ここに内容を送信し、そこで表示するテキストを生成して送り返すようになっているのです。では、送信先の処理を用意しましょう。これは、どのようなもので作成しても良いのですが、一例としてPHPのサンプルをあげておきます。

ajax.php

<?php
$str = $_POST['value'];
echo htmlspecialchars($str);
?>

　非常にシンプルなものです。POSTで送信された'value'の値を取り出し、htmlspecialcharsで特殊記号の処理をして出力しています。この出力した内容が、非同期通信でInPlaceEditor側に送り返され、タグに表示される、というわけです。

図8　テキストをクリックすると編集フォームが現れ、テキストを変更することができる。