【3/18〜】Amazon、VMwareが語る『クラウドの未来』 スラッシュドット    はてなブックマーク  Yahoo!ブックマークに登録  印刷
パターンとライブラリで作るAjaxおいしいレシピ
連載一覧へ
パターンとライブラリで作る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ページ
図1　EXT JSのサイトTOPページ

　2007年11月6日現在の安定版リリースは1.1.1で、次期安定版となる2.0がベータ版として出ています。1.1以降は、YUIやprototype.js、jQueryのような外部ライブラリに依存せず独自のベースライブラリを利用することもできるようになっています。

図2　EXT JSとほかのJavaScriptライブラリとの関係図
図2　EXT JSとほかのJavaScriptライブラリとの関係図（EXT JSのサイトより引用）

　この図のように、Ext JSはこれまで使い慣れたprototype.jsなどのライブラリの上に、より洗練されたユーザーインターフェイスを実現させるライブラリとして導入できます。

　ライセンスはLGPLと商用ライセンスのデュアルライセンスを採用しています。

■ Ext JSは注目の次世代フレームワーク！

　Ext JSのオフィシャルサイトにあるサンプルを見ると、Ext JSでどのようなことができるが分かると思います。

図3　Ext JS 2.0 Samples
図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デザインパターンのススメ

パターンとライブラリで作るAjaxおいしいレシピ バックナンバー 連載インデックスへ»


リッチクライアント＆帳票 全記事一覧へ

ホワイトペーパー（TechTargetジャパン）

リッチクライアント & 帳票 フォーラム 新着記事

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

RSSフィード

＠IT 新着記事

スキルアップ／キャリアアップ（JOB@IT）

＠IT Special -PR-
「いつかは壊れるサーバ」そんな故障に
迅速で安価に手軽に対応する方法とは？
New！
「特権ユーザー」の事件を防げ！
万能権限を持つユーザーの管理方法とは？
New！
仮想環境の構築とデータ保護の特効薬？！
実績と信頼性の高いパッケージで安心運用
仮想環境のバックアップもこれまでどおり
「まるごと取ってまるごと戻す」簡単運用
おばかアプリ選手権、第４弾開催中！！
ムダにカッコよくてくだらない作品求ム！
社内ファイルサーバを“クラウド”に統合
VPN直結「クラウド型ストレージ」を紹介
その数、なんと400台以上！ グループ内
サーバの「統合管理」によるメリットは？
美人!? まあまあ？ 気になる いやし系!!
PV急増で「美人時計」がとった手段とは？
進化を続ける富士通ストレージETERNUS DX
製品開発者の自信を裏付けるものとは何か
運用管理の課題を“2つの観点”から分析
ユーザー満足度の高い「仮想環境」とは？

→＠IT Special ヘ

お勧め求人情報

キャリアアップ　〜JOB＠IT
＠IT Special -PR-
◆ 　 TomcatやJBossなどAPサーバ環境に関する
情報を集約！ “業務”用APサーバ大百科
New！
◆ 　 一気に解説！　最新のクラスタストレージ
「RAIDを超えたストレージ基準」……など
New！
◆ 　 クラウド的ユーザー体験の変化は脅威か？
仮想化技術を使いこなす運用管理術を紹介
New！

◆ 　 上司や部下、部署内メンバーとの情報共有
を“ガラッ”と変えるコラボツールとは？
New！
◆ 　 おばかアプリ選手権、第４弾開催中！！
ムダにカッコよくてくだらない作品求ム！
◆ 　 社内ファイルサーバを“クラウド”に統合
VPN直結「クラウド型ストレージ」を紹介

◆ 　 Twitterのアカウントはなぜ突破された？
メールによる新手の攻撃手法とその対策
◆ 　 もう仮想化のお試しフェイズは終わりだ！
Hyper-V 2.0が基幹システムも仮想化
◆ 　 美人!? まあまあ？ 気になる いやし系!!
PV急増で「美人時計」がとった手段とは？

◆ 　 クライアント企業から求められる人材
⇒IT技術と経営戦略を併せ持つ「戦略家」
◆ 　 .NET編集長が実践する「技術情報検索術」
サンプル・コードを簡単に探す“技”は？
◆ 　 業務効率と情報セキュリティ対策を両立！
手間なく確実に機密情報を守る方法とは？

◆ 　 進化を続ける富士通ストレージETERNUS DX
製品開発者の自信を裏付けるものとは何か
◆ 　 運用管理の課題を“2つの観点”から分析
ユーザー満足度の高い「仮想環境」とは？

◆ 　 【CTC事例】約30の基幹システムを統合！
膨大なバッジジョブを制御した方法は？
◆ 　 仮想化すればコストは削減できるか？
仮想化に必要な「3つの視点」を解説する
◆ 　 その数、なんと400台以上！ グループ内
サーバの「統合管理」によるメリットは？

→＠IT Special ヘ