Script.aculo.usのコントロールでWebアプリケーションをもっと使いやすく

Script.aculo.usの4つのコントロールを使いこなす

より良いエンドユーザーエクスペリエンスを実現するために、Script.aculo.usのWebコントロールをWebアプリケーションに統合する方法を学びましょう。

はじめに

　筆者はDevXの以前の記事で、動的なWebアプリケーションの開発に役立つJavaScriptフレームワーク「Prototype」を取り上げましたが、その記事の最後で、PrototypeをベースにしたUIライブラリであるScript.aculo.usについて少し触れました。本稿ではScript.aculo.usが提供するオートコンプリータ、インプレースエディタ、スライダというWebコントロールについて説明します。

　Script.aculo.usは大きなライブラリなので、1つの記事で網羅的に説明することはできません。しかし、本稿の説明を読めば、Script.aculo.usのWebコントロールを利用してエンドユーザーエクスペリエンスを向上させることができるでしょう。

環境のセットアップ

　まずブラウザでPrototypeのホームページにアクセスし、最新バージョン（本稿の執筆時点では1.6.0.2）をダウンロードしてください。実際に必要なファイルは「prototype.js」だけです。次にScript.aculo.usをダウンロードします。ダウンロードページにアクセスし、最新バージョン（本稿の執筆時点では1.8.1）をダウンロードしてください。

　アーカイブを解凍し、「src」ディレクトリの下にあるファイルを「prototype.js」と一緒に適当なディレクトリの下に配置します。筆者は「scripts」ディレクトリの下に配置しました。以降の説明では、このディレクトリが何度も出てきます。

　この時点で、次のスクリプトファイルを次のようなコードを使って自分のページに組み込めば、Script.aculo.usのコントロールをアプリケーションで使用できるようになります。

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

　ご覧のように、エフェクトとコントロールの両方を組み込んでおく必要があります。このようにする理由は、コントロールがライブラリのエフェクト部分を内部的に使用するからです。

　環境が設定されたら、Script.aculo.usコントロールの世界がどのようなものか探索してみることができます。まずはオートコンプリータから始めることをお勧めします。これが最もよく使われるコントロールです。

''注''

　お気づきかもしれませんが、Script.aculo.usはPrototypeよりも高度にモジュール化されています。そのため、ライブラリの中の必要な部分だけを組み込むことができます。ただし、Script.aculo.usライブラリ全体を必要とする場合は、次の構文によって全体を組み込むことができます。

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

オートコンプリータ

　オートコンプリータがどのようなものかご存じない方は、WeeFlyのホームページにアクセスして実際の動作を確かめてみるとよいでしょう。WeeFlyは最新技術を利用した格安航空チケット＆ホテル検索エンジンです。

　WeeFlyのトップページには2つのテキストボックスがあります。1つ目では出発空港、2つ目では到着空港を指定します。［Departure Airport］フィールドに、空港名を構成する文字列として少なくとも3文字を入力してください。その文字列が含まれている空港名のドロップダウンリストが表示されるはずです。図1は、「MIL」を検索文字列として指定したときの結果です。

図1　WeeFlyのDeparture Airportフィールドで使われているオートコンプリータ。このフィールドに少なくとも3文字（この例ではMIL）を入力すると、一致する空港名のリストが表示されます。

　本稿を最後までお読みになれば、このようなオートコンプリータを作成できるようになります。

　既にお気づきでしょうが、オートコンプリータはテキストボックスと隠れた<div>とで構成されており、後者はユーザーがテキストボックスに3文字を入力すると表示されます。もちろん、オートコンプリータは<div>を表示する前に、ユーザーの要求に一致するアイテムのリストを用意しなければなりません。しかし、これらのアイテムをどのように取得するのでしょうか。基本的には、アイテムが存在する場所に応じて、次の2つの方法のいずれかを使用します。

• アイテムがサーバー上にある場合は、Ajaxを使って取得します。
• アイテムがクライアント上にある場合は、JavaScript配列内に取得します。

　次のページからは、具体的な方法を見ていくことにしましょう。