Ajaxを用いたコンポーネント

Script.aculo.usには、Ajaxを利用した動作を行うコンポーネントが存在する。今回はそれを紹介したい。バージョンは引き続き1.8.1だ。オプションなどの詳細はWikiページを参照していただきたい。なお、実行画面はIE7で示す。

ローカルデータで自動補完 - Autocompleter.Local

まず、Ajaxとはいってもサーバにはアクセスせず、JavaScriptプログラム内に持ち合わせたデータで自動補完を行うAutocompleter.Localから紹介しよう。

自動補完とは、ユーザーがフィールドにデータの一部を入力したら、実際のデータの候補をフィールドの近くで自動的に表示させるものだ。

図1は、ユーザーが「Ja」まで入力しているとき、候補として「Java」「JavaScript」の2つを示しているところだ。これらはクリックや矢印キーで選択できる。こうすることで、ユーザーは入力にかかる手間を減らすことができ、Webサイト運営者はデータのばらつきや間違いを減らすことができるため、どちらにとっても良い効果をもたらす。

ただし、表示する候補がユーザーの嗜好(予想)から離れていると思われてしまうとWebサイトに対する印象が変わってしまうおそれもある。どんな候補を表示するかがWebサイト運営者の腕の見せ所といえるだろう。

本題のAutocompleter.Localだが、図1の例では、引数にデータ入力欄のID、候補表示欄のID、候補の配列を記述した。必要があれば、さらにオプションを追加できる。

意外に重要なのは、候補表示欄に設定するCSSプロパティだ。候補は<ul>と<li>で列挙されるため、CSSプロパティが設定されていないと無味乾燥な表示になってしまう。特に図2のように他の表示が近接しているときは、とても読みづらい。少なくとも図3のように他の表示が隠れるようにしたいものだ。

// 引数はデータ入力欄、候補表示欄、候補の配列(オプション追加可能)
new Autocompleter.Local( 'completer', 'choices',
                         [ 'PHP', 'Perl', 'Ruby', 'Java', 'JavaScript' ] );

[対象となる要素]
<p>
  <label for="completer">よく使う言語は?</label>
  <input id="completer" type="text" /><!-- データ入力欄 -->
</p>
<div id="choices"></div><!-- 候補表示欄 -->

[CSSプロパティ]
div#choices ul  {   /* 候補表示欄 */
  list-style-type  : none;
  background-color : #fff;
  border : 2px solid #ccc;
  margin-left  : 0;    margin-top  : 0;
  padding-left : 5px;  padding-top : 0;
}
div#choices ul li.selected  {  /* 選択された候補 */
  background-color : #ffc;
  font-weight : bold;
}

全角文字の場合は、以下のように各文字ごとに\u....で文字コードを表記すれば実行可能だ。

'\u82F1\u8A9E(\u30A2\u30E1\u30EA\u30AB)'      // '英語(アメリカ)'
'\u82F1\u8A9E(\u30A4\u30AE\u30EA\u30B9)'      // '英語(イギリス)'

サーバからのデータで自動補完 - Ajax.Autocompleter

次は、サーバから候補となるデータを取り寄せるAjax.Autocompleterを紹介したい。こちらは、引数にアクセス用のURLが追加される。HTMLの要素は前の例と同じだ。

// 引数はデータ入力欄、候補表示欄、URL(オプション追加可能)
new Ajax.Autocompleter( 'completer', 'choices', 'アクセス用URL' );

この場合は、一旦サーバで入力データを受け取った後、候補となるデータを生成する。たとえば図1と同じ場合を想定すると、サーバが「Ja」という入力を受け取ったときは、以下のように、<ul>と<li>で構成されたデータをレスポンスを返すことになる。このとき文字化けやエスケープなどの対応も忘れずに行っておきたい。

<!-- サーバで生成されるデータの例(文字化け、エスケープ注意) -->
<ul>
  <li>Java</li>
  <li>JavaScript</li>
</ul>

表示されたデータをその場で編集(インプレース・エディタ)

データが表示される画面から即座にフィールド表示に変更し、すぐにデータを更新できるようにするのがインプレース・エディタだ。

実際の動作は、たとえば図5のように「入力してください」をクリックし、図6のようにデータを入力して「ok」をクリックしたら編集完了(図7)という具合だ。アドレスをクリックすれば再び編集できる。

注意すべきなのは、編集するたびにサーバへのアクセスが発生するので、通信トラフィックが少量・多頻度になるということだ。多数のユーザーが同時に編集を行うことが想定されるときは、それに見合ったインフラが必要になる。

テキストフィールドで編集 - Ajax.InPlaceEditor

図6のようにテキストフィールドで編集できるようにするのがAjax.InPlaceEditorだ。HTML要素は編集可能な範囲を明示するために<span>で囲っておくのがポイントだ。編集後はこの中のテキストがサーバからのレスポンスに置き換わる。

// 引数はHTML要素、URL、オプション
new Ajax.InPlaceEditor( 'mailadr', 'アクセス用URL', { size : 30 } );

[対象となる要素]
<span id="mailadr">入力してください</span>

[編集後] (*)Script.aculo.usによる設定は省略
<span id="mailadr">サーバからのレスポンス</span>

なお、オプションに{ cols : 20, rows : 3 }などと記述すれば、図8のように複数行の入力も可能だ。ok, cancelなどの表示もオプションで変更できるので、Wikiページで確認していただきたい。

選択肢で編集 - Ajax.InPlaceCollectionEditor

表示しているデータを選択肢で編集するときはAjax.InPlaceCollectionEditorを用いる。選択肢のテキストそのものを値とするだけでなく、選択肢に特定の値を持たせることもできる。ただし、筆者の環境ではIE7で実行できなかったので、ここだけはFirefox2の実行画面で紹介する。

// 引数はHTML要素、URL、オプション
new Ajax.InPlaceCollectionEditor( 'collection', 'アクセス用URL',
    { collection : [ 'Java', 'JavaScript', 'Perl', 'PHP', 'Ruby' ],
      value : 'JavaScript', ajaxOptions: { method : 'post' } } );

[対象となる要素]
<span id="collection">選択してください</span>

対象となる要素は、編集可能な範囲を示す<span>のみだ。編集後はこの中がサーバのレスポンスに置き換わるのは前の例と同じだ。

選択肢に特定の値を持たせたいときは、 [ [ 0, 'Java' ], [ 1, 'JavaScript' ], ... ] のように [ サーバに送信する値, 表示の内容 ] を1つの要素とする配列にする。

冒頭にも記したとおり、これらのコンポーネントはさまざまなオプションを設定できる。Wikiページを参照して使いこなしてほしい。