Android

iPhone

ケータイ

ニュースメール

ニュース検索

ピックアップ

キャリア

スペシャルリンク

ピックアップメニュー

パートナーサイト

今週のIT求人情報

有限会社エイチ・アイ・ピー
医療広報物の企画営業

エレクトロビット日本株式会社
組み込みエンジニア（車載用システム担当）

トリンプ・インターナショナル・ジャパン株式会社
社内IT担当

j.i.c メディア

2009年9月18日 10:00

EXTJS でつくる RIA の世界

株式会社環（かぶしきがいしゃかん）

各種ソフトウェアやWebサービスと連携し、アクセス解析機能を容易に実装できるアクセス解析サービス"Web Mining Service"を中心に、アクセス解析ソリューションをご提案します。

EXTJS とは

株式会社環

ここ最近、Web アプリケーションに「動いて、かつ見栄えのよい」リッチ UI を用いるケースが多くなっているかと思います。このようなリッチ UI を用いた Web サイトを作成するには、HTML、CSS および JavaScript を用いたり、Flash（Flex）を用いたりするケースが多いのではないでしょうか？

今回、このコラムでご紹介するのは、リッチ UI を作成するために開発されたフレームワークである EXTJS です。これは、さきほど書いた前者のパターン、つまり HTML、CSS および JavaScript を用いてリッチ UI を作成するためのフレームワークです。同じようなフレームワーク（というかライブラリ的位置づけ）として、prototype.js や jQuery、Yahoo UI などがあろうかと思います。

今回、ご紹介する EXTJS は、どちらかというと後発組にあたり、とても洗練された構成になっており、また、prototype.js や jQuery などと組み合わせて使用することも可能なように構成されています。このコラムでは、今後、EXTJS を使ったリッチ UI をどのようにすれば作成できるか順を追って解説していきたいと思います。

■プロダクトとライセンス
EXTJS には、プロダクトとして以下の3種が存在します。

EXTJSのプロダクトの種類
*クリックして拡大

EXTJS は、今回、このコラムでご紹介するプロダクトです。このプロダクトはデュアルライセンスとなっており、どちらかのライセンスを選択しなければなりません。詳しくは EXTJS のサイトをご確認して頂ければと思います。

EXT Core は、簡単に言えば、EXTJS から、あらかじめ用意されているリッチ UI 用ウィジェットを取り除き、リッチ UI を作成するためのベースとなる環境や、Ajax による通信を行うための環境のみを提供するフレームワークです。

EXTJS に用意されているリッチ UI ウィジェットはある程度デザインが決まってしまっています。自由なデザインでひとつひとつウィジェットを作っていきたい場合には、こちらのプロダクトのほうが良いでしょう。また、ライセンスも MIT ライセンスとなっておりますので、商用利用においても適用できるかと思います。

EXT GWT は、GWT（Google Web Toolkit）を利用して、リッチ UI を作成するための Java ライブラリです。こちらも EXTJS 同様、デュアルライセンスとなっております。

■準備と配置
まずは、EXTJS SDK のダウンロードを、こちらのページより行います。この SDK には、サンプルや API ドキュメント、EXTJS そのもののソースコードなどが含まれていますが、動作に必要なファイルはごく一部となります。

EXTJS を利用するためのディレクトリ配置はいろいろな考え方や方法があろうかと思いますが、このコラムでは以下のような配置とします。

ディレクトリ配置
*クリックして拡大

ext-all.js ファイルと ext-all-debug.js は、EXTJS フレームワークそのもののファイルとなります。ファイル名からも分かるように、ext-all-debug.js はデバック用のファイルとなります。ですので、Web アプリケーションを開発する過程では、ext-all-debug.js を用い、リリースする際には ext-all.js を用いるのが良いかと思います。

■動かしてみる
早速ですが、簡単なコードを書いて、実際にEXTJSを使ってみましょう。HTML ファイルを用意して以下のような内容を書いてみてください。

―――――――――――――――――――――――――――――――――――――
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<title>メッセージボックスサンプル</title>

<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">

<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all-debug.js"></script>

<script type="text/javascript">
    Ext.BLANK_IMAGE_URL = 'extjs/resources/images/default/s.gif';

    Ext.onReady( function()
    {
        Ext.MessageBox.show( {
            title:   'メッセージボックス',
            msg:     'Hello EXTJS!!',
            buttons: Ext.MessageBox.OK,
            icon:    Ext.MessageBox.INFO
        } );
    } );
</script>

<style type="text/css">
    .area {
        width: 50%;
        height: 50%;
        margin: 100px auto;
        border: 2px solid;
        background: #DDFFDD;
        text-align: center;
    }
</style>
</head>

<body>
<div class="area">
メッセージボックス<br>
<input type="button" value="ダミーボタン" onClick="alert('ダミーボタン');">
</div>
</body>

</html>
―――――――――――――――――――――――――――――――――――――

このサンプルは、ページ表示時に EXTJS のメッセージボックスを表示するものです。正常に動作すると以下のような画面が表示されるはずです。

正常に動作した結果

では、コードの詳細を見ていきましょう。HTML コードの HEAD タグ内に以下のような記述があります。

―――――――――――――――――――――――――――――――――――――
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">

<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all-debug.js"></script>
―――――――――――――――――――――――――――――――――――――

ここは、EXTJS を使うためには、ほぼお約束だと思って頂いて結構です。なお、各ファイルのディレクトリ配置は、上記で書いた状態にしてあります。

さて、次の部分のコードもお約束に近いものです。

―――――――――――――――――――――――――――――――――――――
Ext.BLANK_IMAGE_URL = 'extjs/resources/images/default/s.gif';
―――――――――――――――――――――――――――――――――――――

EXTJS では、レイアウト位置を調整するために透明の1px 四方の gif ファイルを用いています。初期設定状態のままだと、EXTJS のサーバから読み込むような指定になっています。このままだと動作的に遅くなりますので、これを自サーバ（または自クライアント）から読み込むような指定に変更します。

EXTJS には EXT というスタティッククラスが存在します。BLANK_IMAGE_URL プロパティに読み込むべき gif ファイルの URL を指定することで変更ができます。なお、透明な gif ファイルを個々に用意する必要はなく、先ほどダウンロードした EXTJS の SDK の中に既に含まれていますので、それを利用します。

―――――――――――――――――――――――――――――――――――――
Ext.onReady( function()
{
    Ext.MessageBox.show( {
        title:   'メッセージボックス',
        msg:     'Hello EXTJS!!',
        buttons: Ext.MessageBox.OK,
        icon:    Ext.MessageBox.INFO
    } );
} );
―――――――――――――――――――――――――――――――――――――

EXTJS では、HTML が読み込まれ準備が整うと、Ext.onReady() メソッドに渡された関数が実行されます。通常は、EXTJS に対する初期化などの処理をここで行います。今回は、このExt.onReady() メソッドに無名関数を渡しています。

EXTJS によるメッセージボックス表示は、Ext.MessageBox 内にまとめられています。今回は、この中の show() メソッドを使って、メッセージボックスを表示しています。

EXTJS では、全般に言えることなのですが、show() メソッドのように、連想配列を渡すことで各パラメータを一気に設定するような思想（というか構成）にて設計されています。特に EXTJS で用意されているコンポーネントのコンストラクタは、全てこの形式にて統一されています。

この形式の利点は、数多くのパラメータを一気にそのメソッドに渡せることと、省略可能なパラメータを多数持てることにあるかと思います。今回サンプルで取り上げている、Ext.MessageBox.show() メソッドでも実際には、このサンプルでは利用していないパラメータ値が多数存在します。

さて、メッセージボックスを表示してお気づきかと思いますが、このメッセージボックスはモーダルウィンドウです。このため、このメッセージボックスそのものが消えない限り、呼び出し元の操作は行えないようにシャドウ処理が自動的に行われます。試しに HTML 上に表示されている「ダミー」ボタンをクリックしてみてください。クリックできないかと思います。

■情報ソースに関して
EXTJS に関する情報ソースとして、まずは、EXTJS の開発元の Web サイトと、その日本法人の Web サイトが挙げられるかと思います。

これらのページからリンクを辿ることにより API ドキュメント（日本語版と英語版）のページを閲覧できます。日本語版の API ドキュメントは、現在2.0版のままで内容的には多少古いですが、まだ十分に活用可能です。英語が苦手な方は、まずはこちらのページを参照してみてはいかがでしょうか？

なお、この API ドキュメントそのものが EXTJS を使って作成されています。

記事提供：株式会社環

【特別連載企画】大艦巨砲主義にして卓越したレスポンス--GALAXY S II WiMAX
	1月20日より販売が開始されたサムスン製スマートフォン「GALAXY S II WiMAX」。カタログスペックでは、他メーカーのハイエンド機と同じように見えても、実際に使うと卓越したレスポンスに驚かされる。 ⇒詳細記事はこちら ⇒連載記事一覧はこちら