Ext JSとprototype.jsで作るリッチなUI：パターンとライブラリで作るAjaxおいしいレシピ（3）（2/4 ページ）

» 2007年11月08日 00時00分公開

[志田裕樹，アークウェブ株式会社]

サンプルの構造と使用する3つのデザインパターン

　これまでの連載記事と同様に、今回もAjax Patternsで定義されている用語を使って、ポイントとなるテクニックを整理して紹介していきます。今回使用するパターンは次のとおりです。

**表1 今回のサンプルで使用したAjaxデザインパターン**
	パターン名	説明
	Rich Text Editorパターン	ワープロのようにWYSIWYGによる入力ができるようになる
	Popupパターン	既存のコンテンツに一時的に前面にレイヤーを重ねて、レイアウトを変更せずに追加情報などを表示したり、ちょっとした作業領域を提供できる
	LiveFormパターン	ユーザー入力が終わった段階で入力チェックをしたり、入力フォームを入力内容に応じて動的に変更する

　「Rich Text Editorパターン」は、「HTMLエディタ」や「WYSIWYGエディタ」などと表現した方が意味は通りやすいかもしれませんね。「Rich Text Editorパターン」を実現するライブラリとしては、次のようなものが有名です。

参考

　「Popupパターン」については前回が詳しいので、そちらを参照してください。

■ MVCによる設計と処理の流れ

　これまでの連載記事と同様にアプリケーションの役割をMVC（モデル・ビュー・コントローラー）に分割しました。

　なお、今回はシンプルなサンプルですのでモデルは使用していません。下記の図4で、どのような流れで処理が行われるかを確認しましょう。

図4　コントローラー、ビュー、サーバのシーケンス図

■ 都道府県の更新を監視して市町村を表示

　今回のサンプルでは、都道府県として例えば「東京都」を選択すると、東京都の市区町村のコンボボックスが表示されます。このように、入力項目が変更された際に、入力チェックや、動的な入力項目の更新を行うのが「LiveFormパターン」です。

　このような仕組みは次のような実装で実現できます。

都道府県の変更を監視し、変更が生じたら変更後の都道府県の値を取得する
取得した都道府県の値に応じた市町村の値をサーバから取得する
市町村入力項目を生成する

■ LiveFormパターンでどんなことができるのか？

　「LiveFormパターン」の実装内容には大まかに次の2種類が挙げられます。

即時入力チェック
動的な入力項目の更新

　入力チェックを即時かつ非同期で行うことで、ユーザーの入力を妨げることなく速やかにエラーを通知できます。例えば、「Remember The Milk」のユーザー登録では、LiveFormパターンによる入力チェックが非常に効果的に使用されています。

図5　Remember The Milk - Signupの使用例

　動的な入力項目の更新の例として、今回の都道府県のようなケースのほか、ユーザーに必要以上の入力項目を隠しておき、ユーザーの入力状況に応じて入力項目を表示させる、といった方法もあります。

　筆者が構築に携わった「断る営業.com」の営業タイプ診断では、設問を5問ずつ表示していくことで、ユーザーの注意を限られた設問に向けるように工夫をしました（注意：上記ページから「診断を開始する」ボタンをクリックしてニックネームを入力すると診断が開始されます）。

　「LiveFormパターン」は、お問い合わせフォームやユーザー登録など、コンバージョンにかかわる非常に重要な個所で効果を発揮します。実装もそれほど難しくありませんので、ぜひ導入を検討してみることをお勧めします。

HTMLの入力フォームでは何をしているのか？

■ サンプルのHTMLファイル（<head>タグ部分）

　初めに、HTMLファイルを見てみましょう。まず、<head>タグ部分です。

<head>

        <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>

        <title>Ext Form Sample</title>

        <link rel="stylesheet" type="text/css" 

               href="stylesheets/application.css">

             </link>

        <link rel="stylesheet" type="text/css" 

               href="javascripts/ext-2.0-beta1/resources/css/ext-all.css">

        </link>

        <script type="text/javascript" src="javascripts/prototype.js">

        </script>

        <script type="text/javascript" 

               src="javascripts/scriptaculous.js?load=effects">

        </script>

        <script type="text/javascript" 

               src="javascripts/ext-2.0-beta1/adapter/prototype/ext-prototype-ada

      pter.js">

        </script>

        <script type="text/javascript" 

               src="javascripts/ext-2.0-beta1/ext-all.js">

        </script>

        <script type="text/javascript" 

               src="javascripts/ext-2.0-beta1/source/locale/ext-lang-ja.js">

        </script>

        <script type="text/javascript" 

               src="javascripts/controllers/extform/form_controller.js">

        </script>

        <script type="text/javascript"

               src="javascripts/views/extform/form_view.js">

        </script>

      </head>

　ここでは<script>タグで次の7つのJavaScriptファイルを読み込んでいます。

javascripts/prototype.js
（バージョン 1.5.0）
javascripts/scriptaculous.js?load=effects
（バージョン 1.7.0）
javascripts/ext-2.0-beta1/adapter/prototype/ext-prototype-adapter.js
prototype.js＋script.aculo.us＋ext-prototype-adapter.jsをExtのベースライブラリとして使用
javascripts/ext-2.0-beta1/ext-all.js
Extの本体
javascripts/ext-2.0-beta1/source/locale/ext-lang-ja.js
Extのエラーメッセージなどを日本語化する
javascripts/controllers/extform/form_controller.js
コントローラー
javascripts/views/extform/form_view.js
ビュー

■ サンプルのHTMLファイル（<body>タグ部分）

　次に、HTMLファイルの<body>タグ部分の内容を見てみましょう。

<body>

        <form id="form">

          <table class="form_table">

            <tr><td>名前</td>

              <td><input type="text" id="name" name="name" /></td></tr>

            <tr><td>都道府県</td>

              <td><input type="text" id="pref" name="pref" /></td></tr>

            <tr><td>市町村区</td>

              <td id='city_container'></td></tr>

            <tr><td>生年月日</td>

              <td><input type="text" id="birth" name="birth" /></td></tr>

            <tr><td colspan="2">コメント</td>

              <td colspan="2"><textarea id="introduction" cols="30"

               rows="10" name="introduction"></textarea></td></tr>

            <tr><td colspan="2">

              <input type='button' name='send' id='send' value='送信' />

            </td></tr>

          </table>

        </form>

      </body>