パターンとライブラリで作るAjaxおいしいレシピ
連載一覧へ
パターンとライブラリで作るAjaxおいしいレシピ(3)

Ext JSとprototype.jsで作るリッチなUI


アークウェブ株式会社
志田 裕樹
2007/11/8


今回は話題のExt JSを使ったサンプル

- PR -

 Ext JSAjaxアプリケーションを構築するための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.jsjQueryも利用できるようになり、現在の「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デザインパターンのススメ


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

TechTargetジャパン

リッチクライアント & 帳票 フォーラム 新着記事
  • NFCやLTE対応予定のiPhoneと、先行するAndroid (2012/2/9)
    iPhoneとAndroid、そしてWindows Phoneという3つのOSの今後を占う。それぞれの通信規格とコンセプトは?
  • 家電のUIになるブラウザ (2012/2/3)
    未来の家電はインターネットに接続でき、ブラウザが内蔵されてくる。家電にブラウザが載ったらどうなるか? 未来のホームネットワークを想像しよう
  • 「汎用のUI技術」として広がるHTML5 (2012/2/2)
    すさまじい勢いで成長しているHTML5を中心としたオープンなWebプラットフォーム。HTML5やAPI、Webブラウザのアップデート情報をお伝えする
  • ビヨンド・クールジャパン!? (2012/1/27)
    コンテンツという文化力と、ものづくりという技術力を掛け合わせる。両方を国内に持ち合わせている国は多くない。チャンスなのだ

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

RSSフィード

キャリアアップ

@IT Sepcial

イベントカレンダー

PickUpイベント

- PR -
もっと見る

お勧め求人情報

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

@IT Sepcial
ソリューションFLASH