都道府県と対応する市町村のJSONデータを表示
次に、都道府県が選択された後に対応する市町村を表示する部分のソースコードを見ていきましょう。
*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***
■ 市町村のComboBoxはJsonStoreを使う
都道府県が選択されると、コントローラーのonSelectPref()メソッド(「コントローラーのコード全体を見てみよう」の章を参照)がコールされます。onSelectPref()メソッドでは、ビューのchangeCity()を呼び出す際、第2引数で選択された都道府県に対応する市町村情報が記述されているJSONファイルへのURLを渡しています。
*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***
呼び出されるJSONファイルの形式は、次のようになります。
*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***
ビューのchangeCity()メソッドでは、コントローラーから渡されるURL「'cities/' + target.data.value + '.json'」を受け取って、JsonStoreを生成し、それを使ってComboBoxを生成しています。
JsonStore生成時、「root」オプションで、JSONの一番上位の親の要素名「cities」を指定しています。rootであるcitiesの子要素は、配列となり、それぞれの行ごとに、fieldsで指定した「value」「dispvalue」をキーとするハッシュが値として入ります。
JsonStoreを指定されたComboBoxは、最初に選択された際にJSONの取得を行います。市町村ComboBoxの生成では、「renderTo: 'city_container'」が指定されています。applyToは、すでにコンポーネントを適用するDOM要素がHTML内にある場合に使用しますが、市町村は、初期状態では適用対象のDOM要素がないため、renderToを指定して、新しく要素を生成します。
一度生成した後に市町村の要素を書き換える場合は、下記のように一度、要素を削除してから、新しく追加するようにしています。
*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***
送信内容をダイアログ内で表示
最後に、送信ボタンを押すと、ダイアログ内で送信内容が表示される部分のソースコードを見てみましょう。
*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***
BasicFormインスタンスのisValid()メソッドを呼び出すことで、BasicFormに登録されたコンポーネントそれぞれに対して、入力チェックを行い、すべての入力項目の値が正しいかどうかを判定しています。
その後、getValues()メソッドを使用して、各入力項目の値を取得し、Ext.MessageBoxクラスのalert()メソッドを使用して、ダイアログ内に、入力された値を表示しています。
入力判定が正しくない場合は、エラーメッセージをダイアログで表示しています。
Ext JS、LiveFormデザインパターンのススメ
冒頭でも述べたとおり、Ext JSは、デスクトップアプリケーションのようなユーザーエクスペリエンスを提供できる統合型フレームワークです。ベースライブラリとしてprototype.js、jQuery、YUIが選択可能なため、prototype.js用の追加ライブラリと共存させたり、すでにprototype.jsで構築してきたアプリケーションにExtによる機能追加を行っていくこともできますので、お勧めです。
また、LiveFormデザインパターンは、即時入力チェックや、動的な入力フォームの更新でユーザーのフォーム入力を補助し、コンバージョン率の向上に貢献できるパターンで、こちらもとても便利ですので、ぜひ活用してみてください。
次回もまた、新しいAjaxデザインパターンやライブラリを使い、楽しいサンプルをご紹介できればと思っています。
今回使ったソースコードはこちらからダウンロードできます(サンプルのライセンスはGPL 2となります)。
■ 参考文献
- 『Ajaxデザインパターン - ユーザビリティと開発効率の向上のために』 オライリー・ジャパン
著者紹介
プロフィール:志田 裕樹(しだ ゆうき)
株式会社アークウェブ取締役。Webシステムのシステムエンジニアとして開発に従事している。
Ajax、Ruby on Rails等を使用したWeb 2.0的システムの開発実績を持つ。
オープンソースのECサイト用CMS、Zen Cartの日本語コミュニティでコミッターとして活動している。
Copyright © ITmedia, Inc. All Rights Reserved.
関連記事
- 古くて新しいAjaxの真実を見極める
「Webインターフェイスの新しい手法」「画期的なWebアプリケーションの仕組み」であるとして開発者たちの人気を集めるAjaxとは何なのか、その真実を見極めてみよう - Ajax解体新書
よりAjaxを深く理解するために、ブラウザ上の「見た目」だけに注目するのではなく、実際に目に見えない舞台裏の通信内容をモニタリングしてみよう - ・第1回 Ajax技術の目に見えない通信内容をのぞいてみよう
- ・第2回 Ajaxの特徴に潜むリスクをサンプルアプリで確認しよう
- ・第3回 Webアプリに使えるAjaxライブラリ8選!
- Ajax うきうき Watch・第1回 Webアプリのユーザビリティを改善しまくるAjax
- Ajax うきうき Watch・第2回 Ajax、それはWeb 2.0へと続く道
- Ajax うきうき Watch・第3回 どんなに無茶をやっても「それもありかな」なAjax
- Ajax うきうき Watch・第4回 自動車業界のAjaxを活用したキャンペーンを目撃せよ
- Ajax うきうき Watch・第5回 “どのブラウザでも動くAjax”を共有財産として育てよう
- Ajax うきうき Watch・第6回 プロプライエタリ2.0から考えるAjaxの公開/非公開部
- Ajax うきうき Watch・第7回 メモリリークが小さくなったGoogle Maps APIの新版
- Ajax うきうき Watch・第8回 “CGUI” 消費者が作り出すUIの時代突入
- Ajax うきうき Watch・第9回 巨大化するAjaxライブラリをシンプルにする新たな流れ
- Ajax うきうき Watch・第10回 地図のように年代を移動できるMITのAjax歴史年表
- Ajax うきうき Watch・第11回 JSONがRFCになり、どんどんこなれるAjaxサービス
- Ajax うきうき Watch・第12回 サーバが通信を開始できるComet活用Webチャット
- Ajax うきうき Watch・第13回 オンラインゲームで検索精度を上げるGoogleの巧みさ
- Ajax うきうき Watch・第14回 IE7とFirefox 2への利用者の大移動は起こるか?
- Ajax うきうき Watch・第15回 グーグル検索エンジンを特定ジャンル専用に、Co-op
- Ajax うきうき Watch・第16回 帯域やデバイス領域をフル活用させる“モバイルAjax”
- Ajax うきうき Watch・第17回 新しい技術を模索するYahoo!、Google、MS
- Ajax うきうき Watch・第18回 Ajaxの高度な使用例、Yahoo! pipes
- Ajax うきうき Watch・第19回 Apollo参戦でウィジェット開発者の争奪戦が激化
- Ajax うきうき Watch・第20回 Twitter登場で注目されるRTコミュニケーションツール
- Ajax うきうき Watch・第21回 過熱するTwitterブームとMicrosoftのマッシュアップ
- Ajax うきうき Watch・第22回 iPhoneのAjax戦略、そして今日もWeb APIは増加する
- Ajax うきうき Watch・第23回 Ajax開発者がヒーローになるとき、それはいま!
- Ajax うきうき Watch・第24回 携帯電話への拡張を進めるGoogleとWeb隠しコマンド
- Ajax うきうき Watch・第25回 Ajaxで加速!? エンタープライズ2.0とWebOSの普及
- Ajax うきうき Watch・第26回 「言葉」を超えた説得力を持つAjaxの存在感と広がり
- Ajax うきうき Watch・第27回 ゲームから読み解く、俺スクリプト時代の知的な挑戦
- Ajax うきうき Watch・第28回 マッシュアップ元年が終わり、2008年はどうなる?
- Ajax うきうき Watch・第29回 Twitterやクラウドへも分岐するAjax/Web APIの道
- Ajax うきうき Watch・第30回 Ajaxはじめて物語、そしてサーバでも動くJavaScript
- Ajax うきうき Watch・第31回 新ブラウザ戦争はon fireだがJavaScriptはoffのナゾ
- Ajax うきうき Watch・第32回 Google App EngineはAjaxへのハードルを下げるか?
- Ajax うきうき Watch・最終回 Pure JavaScriptの動画再生やRPGも好きでした
- JavaScriptプログラミング再入門
Ajax全盛のいま、オブジェクト指向ベースのJavaScript知識は不可欠。過去を振り返りつつ、まずは最新開発事情をチェック - ・第1回 JavaScriptの復権
- ・第2回 JavaScriptの関数をマスターしよう
- ・第3回 JavaScriptにおける変数の宣言とスコープ
- ・最終回 JavaScriptでオブジェクト指向プログラミング