パターンとライブラリで作るAjaxおいしいレシピ（3）
Ext JSとprototype.jsで作るリッチなUI
アークウェブ株式会社
志田 裕樹
2007/11/8
今回は話題のExt JSを使ったサンプル
- - PR -
Ext JSはAjaxアプリケーションを構築するためのJavaScriptライブラリ（フレームワーク）です。Ext JSを使用することで、デスクトップアプリケーションのようなユーザーエクスペリエンスを提供できます。2007年10月11日に2.0のベータ版がリリースされ大変注目を集めました。
今回はそのExt JS 2.0のベータ版を使ったサンプルを紹介していきます。
■ ごく普通の入力フォームのサンプル
まずこちらのサンプルを見てください。
| ごく普通の入力フォームのサンプル |
ごく普通の個人情報の入力フォームですね。
■ Ext JSを使ったフォームのサンプル
この入力フォームをExt JSを使ってリッチにしたものがこちらです。
| 今回のサンプルプログラム（拡大表示はこちら、※注意1：FireBugを有効にしている場合は動作が重くなる場合があります。一時的にFireBugをオフにして利用されることをおすすめします。※注意2：Operaブラウザでは、HTMLエディタに対して日本語の入力がうまくいかないようです。これはExt JSのHTMLエディタのバグだと思われます。また、サンプルのライセンスはGPL 2となります） |
次の点に気付きましたか？
- 入力インターフェイスが装飾されている
- 生年月日をカレンダーを使って入力できるようになっている
- コメントをWYSIWYG（ウィジウィグ、What You See Is What You Get、ワープロのように見た目どおりのレイアウトの文章になる）で入力できるようになっている
- 都道府県を選択するとそれに応じて市町村が表示されるようになっている
- 名前入力時、空のままでフォーカスを外すと、即座にエラーが表示されるようになっている
Ext JSとは何か？
Ext JSは、Jack Slocum氏により、最初はYUI（Yahoo! UI Library）用の拡張ユーティリティ「yui-ext」として開発が始められました。その後、ベースライブラリとしてYUI以外に、prototype.jsやjQueryも利用できるようになり、現在の「Ext JS」という名前に変更されました（参考）。
 |
| 図1 EXT JSのサイトTOPページ |
2007年11月6日現在の安定版リリースは1.1.1で、次期安定版となる2.0がベータ版として出ています。1.1以降は、YUIやprototype.js、jQueryのような外部ライブラリに依存せず独自のベースライブラリを利用することもできるようになっています。
 |
| 図2 EXT JSとほかのJavaScriptライブラリとの関係図（EXT JSのサイトより引用） |
この図のように、Ext JSはこれまで使い慣れたprototype.jsなどのライブラリの上に、より洗練されたユーザーインターフェイスを実現させるライブラリとして導入できます。
ライセンスはLGPLと商用ライセンスのデュアルライセンスを採用しています。
■ Ext JSは注目の次世代フレームワーク！
Ext JSのオフィシャルサイトにあるサンプルを見ると、Ext JSでどのようなことができるが分かると思います。
 |
| 図3 Ext JS 2.0 Samples |
Ext JSを利用することで、下記のようなさまざまなUI（ユーザーインターフェイス）を提供できます。
- ウィンドウの表示
- ソートや編集、ドラッグ＆ドロップが可能な表
- ディレクトリ・ツリー
- タブ
- 今回のサンプルのようなリッチな入力フォーム
- ツールバー、メニューバー
■ EXT JSのデザインマナーは「テーマ」で変更可能
EXT JSのデザインマナーはテーマを切り替えることで変更ができます。テーマを切り替えると使用されるCSSや、画像が切り替わる仕掛けになっており、デフォルトのEXT-Blueのほか、Gray、Vistaなどのテーマも含まれているようです。
そのほか、オープンソースコミュニティ内で作成されたテーマも利用できます。もちろん、テーマを自作することもできます。
続いて次ページでは、今回使うAjaxデザインパターンで何ができるのかについてやサンプルの入力フォームについて解説します。
| 1-2-3-4 |  |
| INDEX | ||
| パターンとライブラリで作るAjaxおいしいレシピ（3） Ext JSとprototype.jsで作るリッチなUI |
||
 |
Page1 今回は話題のExt JSを使ったサンプル Ext JSとは何か？ |
|
| Page2 サンプルの構造と使用する3つのデザインパターン HTMLの入力フォームでは何をしているのか？ |
||
| Page3 コントローラーのコード全体を見てみよう ビューのソースコード（Ext JSでフォームをリッチに表示） |
||
| Page4 都道府県と対応する市町村のJSONデータを表示 送信内容をダイアログ内で表示 Ext JS、LiveFormデザインパターンのススメ |
||
 |
リッチクライアント＆帳票 全記事一覧へ |
ホワイトペーパー（TechTargetジャパン）
- いまさら聞けないTwitter超入門−＠IT記事も対応なう （2010/2/4）
Twitterは最近話題のつぶやきツール。基本的な使い方から、iPhoneアプリの使い方、RTの解説、4人のご意見番の活用例や感想まで - HTML5は開発者側の都合。ユーザーには関係ない （2010/2/2）
3つのレンダリングエンジンを載せている“国産”ブラウザベンダは、HTML5やWeb/ブラウザの進化について何を語るのか - テキスト・フォント周りをキレイに見せるCSS、13選！ （2010/1/29）
無数にあるCSSのプロパティを大まかに分類し、1つずつ紹介していく本連載。初回は、テキスト・フォント周りについて - OpenGL ESが大変な3Dアプリ開発を楽にするUnity （2010/1/27）
iPhoneゲーム開発に必須のOpenGL ES。そのコーディングに手こずっている方に有用なツールを紹介し簡単なサンプルを作成します
 |
|
|
|
|
スキルアップ／キャリアアップ（JOB@IT）
スポンサーからのお知らせ
お勧め求人情報
*＊先週の人気講座ランキング＊*
〜CCNA編〜
| ◆ | 企業の仮想化に足りない“発想”とは？ 仮想化運用管理のキモは意外なところに！ New！ |
| ◆ | 操作もマニュアルも分かりやすい！ ユーザー視点で開発されたPC管理ツール New！ |
| ◆ | 仮想化すればコストは削減できるか？ 仮想化に必要な「3つの視点」を解説する |
| ◆ | セキュリティを知り尽くす上野氏が登壇！ ＠ITメールソリューションLive! in Tokyo |
| ◆ | 運用管理の課題を“2つの観点”から分析 ユーザー満足度の高い「仮想環境」とは？ |
| ◆ | 世界に通用するストレージの作り方とは？ 製品に込めた思いを富士通の開発者に聞く |
| ◆ | OSSで手間も時間も、障害も減った―― 「マピオンの事例」オープンソース活用法 |
| ◆ | 「ノートPCの持ち出し禁止」で大丈夫？ 情報漏えいを防ぐ管理手法とインフラは？ |
| ◆ | 1日の処理を1秒に――MySQLの達人が語る 「コスト削減」できるチューニング |
| ◆ | ドキュメント作成を自動化して、SEの作業 効率を大幅アップ！ Visio 2007の魅力 |
| ◆ | 急速に広がるHyper-Vでのサーバ仮想化 そのベストプラクティスをデルが解説 |
| ◆ | ＠IT主催セミナーで語られた、「担当者に 求められるセキュリティ対策」をレポート |
| ◆ | ＠IT「Windows 7」 特設サイトオープン！ 最新情報・移行ノウハウを公開しています |
著作権はアイティメディア株式会社またはその記事の筆者に属します。（著作権について）
当サイトに掲載されている記事や画像などの無断転載を禁止します。
「＠IT」「＠IT自分戦略研究所」「＠IT情報マネジメント」「JOB＠IT」「＠ITハイブックス」「＠IT MONOist」「ITmedia」「誠」「BARKS」は、アイティメディア株式会社の登録商標です。
当サイトに関するお問い合わせは「＠ITへのお問い合わせ」をご覧ください。