皆さんは、「Ext」というJavaScriptフレームワークをご存知だろうか。Extは、4月1日にバージョン1.0がリリースされたばかりの新鋭のフレームワークである。

Extの前身は、「Yahoo! UI Library(YUI)」の拡張版として開発された「yui-ext」というライブラリである。しかし、yui-extでは、リッチなUIを実現できるものの、決してサイズが小さいとは言えないYUIを導入する必要がある。そこで、yui-extの作者であるJack Slocum氏は、YUI以外のライブラリとも併せて使えるようにyui-extを刷新。その成果物をExtという名前で(頭文字の「yui」を外して)リリースした。

Ext 1.0で対応している外部のフレームワークはPrototype.js(scriptaculousも併せて利用可)、jQuery、そしてYUIである。現在のところExt単体では動作しない。対応ブラウザは以下のとおりだ。

• Internet Explorer 6以上
• Firefox 1.5以上
• Safari 2以上
• Opera 9以上

ドキュメント類も非常に充実しており、ExtのWebサイトからチュートリアルやAPIドキュメントを参照することができる。

以下では、Extでどんなことができるのかを説明したうえで、Extを使ったプログラミングの雰囲気を味わっていただこうと思う。

ダウンロードと利用方法

Extは、こちらのページからダウンロードできる。

ダウンロードしたzipファイルを解凍すると、ソース、ドキュメント、サンプルも含めた多数のファイルが現れる。ただし、実際に利用する際には以下のファイル/ディレクトリさえあればよい。したがって、開発環境への導入時には、これら以外のファイルは削除して構わない。

図1: Extの実行に必要なファイル

これらのファイルをWebアプリケーション内の好きな場所に配備し、<script>タグで読み込むようにすれば、Extを利用できる状態が整うことになる。

Extを使うと何ができるか

Extの素晴らしい点は、そのUIウィジェットの美しさにある。ほんの数行コードを書くだけで、デスクトップアプリケーションに見劣りしないUIを実現できる。その実力の高さは、先日リリースされたAdobe ApolloのサンプルアプリケーションであるRSSリーダー「Fresh」で全面的に採用されたことからも明らかだ。

画面1: Freshの画面イメージ

これを見れば、ExtでどれほどのUIを構築できるか一目瞭然だろう。

Extを使って実現できる主な機能は以下のようになる。

• 各種ダイアログ(アラート、OK/CANCEL、YES/NO/CANCEL、進捗バー…)
• ツールバー、メニュー
• グリッド(カラムクリックソート可能、列幅変更可能、列入替可能、セル編集可能……)
• ドラッグアンドドロップ可能なツリー
• テーマによる見栄えの一括変更
• タブ(閉じるボタン付き)
• ボーダーレイアウト
• メッセージの国際化
• その他JavaScript機能拡張(文字列テンプレート、インターセプタ、日付フォーマット……)

ここに挙げたのはあくまで代表的な機能にすぎない。実際に利用できる機能はあまりに多岐にわたるので今回全て紹介することは不可能だ。