トップ » 技術記事 » Adobe AIR と ExtJS の入門（1） - Adobe AIRとExtJSについて

Adobe AIR と ExtJS の入門（1） - Adobe AIRとExtJSについて はてなブックマーク数 このエントリーをブックマークに追加


Adobe AIR と ExtJS の入門

クジラ飛行机です。今回は、Adobe AIR (JavaScript) でよく使われるJavaScriptのライブラリ、ExtJS を紹介したいと思います。ExtJS を使うと、リッチなUIを使った Web アプリケーションを比較的簡単に作成できます。メッセージボックスなどもいちいちカッコよく、グリッドやパネルのレイアウトも手軽に作成できます。ExtJS には AIR との連携を考慮されたライブラリも多くあります。

今まで、ExtJS が気になっていた方に向けた入門講座になっています。JavaScriptをそれほど熟知していない方でも気軽に読める内容です。ぜひ、読んでみてください。

Adobe AIR について

Adobe AIR は、米アドビシステムズが開発したデスクトップアプリケーションの実行環境です。Windows や Mac OS Xで同じように動作します。（将来的には、Linuxや携帯電話/PDAをサポートする予定だそうです。）

Adobe AIR用のアプリケーションを開発するには、HTML/CSS/JavaScriptやFlash/Flexなどの技術が利用できます。これらは、Webアプリケーションの開発に利用されているものですので、Webアプリケーションのノウハウを、デスクトップアプリケーションにも活かすことができるという点で、AIRは、熱い注目を受けています。

Adobe AIR
Adobe AIR

JavaScriptライブラリ ExtJS について

ExtJS は、JavaScript のライブラリです。ExtJSを使うと、グリッドやリッチエディタなどの、高機能でクールなUIを持つ、Ajaxアプリケーションを比較的手軽に作成できます。

http://extjs.com/
http://extjs.com/

その魅力は、文字で書くよりも、ExtJSのページにあるデモを見ることによって体験することができるでしょう。ExtJSのトップページから、さまざまなデモを体験することができます。ここでは、ExtJSの特徴的なサンプルをいくつか取り上げました。特に３つ目にとりあげた、疑似デスクトップのデモは、とても面白く、ExtJSの機能を駆使したものになっています。

ExtJSのグリッドのサンプル
ExtJSのグリッドのサンプル
ExtJSのタブ切り替えのサンプル
ExtJSのタブ切り替えのサンプル
疑似デスクトップ
疑似デスクトップ

開発環境を揃えよう

それでは、実際に Adobe AIR と ExtJS の開発環境を整えてきましょう。最低限開発に必要なのは、以下の通りで、SDKとテキストエディタがあれば十分です。

  • Adobe AIR ランタイム（実行環境）
  • Adobe AIR SDK
  • ExtJS 2.0.2 のライブラリ
Aptanaを使ってみよう

しかし、実際問題として、SDKとコマンドラインで開発を行うのは非常に面倒です。そこで、Eclipseをベースにした JavaScript の開発環境 Aptana を利用してみましょう。

Aptana Stdioの画面
Aptana Stdioの画面

Aptanaは、Web 2.0統合開発環境として有名です。ベータ版の時に試してみたのですが「今一歩」という感じのあった Aptana ですが、先日、正式公開され、1.1.4を試してみると、非常に完成度が高く、JavaScript + Adobe AIR の組み合わせとしては、かなり理想的なIDEとなっています。

※Adobe の公開している JavaScriptのEclipseプラグイン JSEclipse [3/9現在ベータ版]も、コード補完など基本的な機能は備えているものの、Aptanaには及ばない印象でした。

Aptana の素晴らしいところは、Aptana さえインストールしてしまえば、Adobe AIR のプラグインのインストールもクリック数回で完了するだけでなく、ExtJSなどのライブラリに至っては、標準で梱包されており、プロジェクト作成画面から選択して雛型を作ってくれるところにあります。

AptanaでAIRのインストール

Aptanaのインストールが終わったら、Adobe AIRプラグインをインストールしましょう。Aptana StudioでAIRをインストールするには、AptanaのStart Pageから、Plugins のパネルを下の方へとスクロールさせて、Adobe AIR の Download and install のリンクをクリックします。（下の図を参照）すると、Eclipse のプラグインのインストール画面が表示されるので、AIR にチェック入れて[次へ]のボタンをクリックしていくだけで、インストールが完了します。

AIRプラグインのインストール
AIRプラグインのインストール

その他に、Adobe AIR を実行するためには、ランタイムが必要ですので、ランタイムをインストールします。

Hello, World を書いてみよう

それでは、お決まりの「Hello, World」を書いてみましょう。Aptanaでプロジェクトを作ってみましょう。

Test1 プロジェクトの作成

Aptana で AIR + ExtJS のためのプロジェクトを作成します。以下、手順を示しますので、この通りに作ってみてください。

  • (1) Aptanaのファイルメニューから、新規プロジェクトをクリックします。(File - New - Projectと辿ります。)
  • (2) そして、どんなプロジェクトを作成するか選択画面が出るので、AIR Project を選択します。
  • (3) Projectの作成画面が出るので、適当に、Test1 という名前をつけて、[Next]ボタンをクリックしていきます。
  • (4) ウィザードの最後に、どのライブラリを使うのか、ライブラリの選択画面が表示されます。ここで、ExtJS 1.1を選択して[Finish]ボタンをクリックすると、プロジェクトにExtJS 1.1を追加し、雛型を作成してくれます。しかし、本稿では、将来的なことを考えて、ExtJS 2.0 系を解説したいと思いますので、何もチェックせずにプロジェクトを作成します。
  • (5) そして、ExtJS 2.0 の最新版を ExtJS のページからダウンロードしましょう。本稿執筆時点では、ExtJS 2.0.2 が最新だったので、これをダウンロードします。
  • (6) そして、先ほど作った、Test1のプロジェクトのフォルダに、ext というフォルダを作り、その中に、ext のアーカイブの内容をすべてコピーします。サンプルが収録されている examples や ドキュメントが収録されている docs もコピーしてしましたが、ExtJS を使ったアプリケーションを作る時には、これらを頻繁に参照する機会が多いので、これらをコピーしないとしてもすぐに参照できる場所にコピーしておきましょう。
Hello, World の記述

AptanaでAIRプロジェクトを作成すると、「(プロジェクトの名前).html」というメインファイルが作成されます。そこで、まず、このファイル（Test1.html）の内容を以下のように書き換えます。以下のHTMLは、ExtJS を使うときの雛型です。

<html>

<head>
<!-- ExtJs を使う上での基本的なライブラリの取り込み-->
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all-debug.js"></script>

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

ExtJSは、Ajax の基本ライブラリ(adapter)を、prototype.js や jQuery、yui から選択できるようになっています。ここでは、ExtJS 標準のものを選択しています。ライブラリ取り込みの１行目が、adapter の取り込みです。

そして、取り込みの２行目が、ExtJSのメインファイルの取り込みです。ここでは、「ext-all-debug.js」とデバッグ版を取り込んでいます。本番では、ここを「ext-all.js」に書き換えます。

そして、３行目にあるのが、CSSの取り込みです。ExtJS標準のCSSを取り込みます。

それでは、簡単なダイアログを表示させてみます。body タグの中に以下のプログラムを記述しましょう。

<body>
<!-- Hello, World のプログラム -->
<script type="text/javascript">
	Ext.onReady(function(){
		Ext.MessageBox.alert("TEST","Hello, World!");
	});

</script>
</body>
簡単なダイアログを表示してみたところ
簡単なダイアログを表示してみたところ

まとめ

今回は、ここまでです。ExtJS でどんなことができるのか確認し、AIR と ExtJS の開発環境を整えました。次回以降、以下のトピックについて紹介していきたいと思います。

  • Hello World のおさらい
  • 簡単なエフェクトを使ってみよう
  • イベントに応じた処理をさせてみよう
  • グリッドを使ってみよう
  • AIRの機能を使ってみよう

なお、今すぐ、もっと詳しく知りたいという方は、以下のExtJSのチュートリアルをご覧ください。とても丁寧な解説があります。

Series Navigationエフェクトとイベントを使う»

Posted by クジラ飛行机 | 2008年03月12日 08:24 | permalink

このサイトについて

八角研究所
株式会社八角研究所のWEBサイトですよー。 いろんなものを創り出すことのできる環境をコツコツ構築中。 いったい、いつになったらできるのか。 この技術情報サイトもそのための活動の一環のつもり。

執筆者紹介

クジラ飛行机

クジラ飛行机

くじらはんど(http://kujirahand/)にて、日本語プログラミング言語「なでしこ」(IPA未踏ユース採択)、テキスト音楽「サクラ」(OSPオンラインソフト大賞入賞)など多くのオンラインソフトを開発。著書に「Flexプロフェッショナルガイド」「なでしこ公式バイブル」、「一週間でマスターするActionScript3.0」など。

TrackBack URL :