第3回：Adobe AIRで付箋風クライアントを作ろう (3/3)

Ruby on RailsとAdobe AIRでデスクトップアプリを作る

第３回：Adobe AIRで付箋風クライアントを作ろう
著者：ワイズノット増井雄一郎 2007/9/18

Hello World

   まずインストールが正常に行われたかを確認するため、「はろーわーるど」と表示するだけの簡単なアプリケーションを作成してみましょう。

   AIRのアプリを作る場合には、まずアプリケーション記述ファイルとしてXMLファイルを準備します。このファイルには、アプリケーション名やアイコン、起動後に実行されるファイルなどを記述します。

   今回は最小限のみの記述を行った「Test-app.xml」というファイルを作ります（リスト2）。

リスト2：Test-app.xml

1: <?xml version="1.0" encoding="UTF-8"?>
2: <application xmlns="http://ns.adobe.com/air/application/1.0.M4" appId="jp.masuidrive.thinkit.test" version="1.0">
3:     <name>TestApp</name>
4:     <rootContent systemChrome="standard">test.swf</rootContent>
5: </application>

   このXMLは2行目と5行目にあるように「<application>」タグで囲います。属性を示す「appId」の部分には、他のアプリと重ならないIDを付けます。通常は自分のメールアドレスを逆から記述し、「@」を「.」に変えておけばよいでしょう。続く「version」属性は、このアプリケーションのバージョン番号を記述します。

   3行目の「<name>」タグではアプリケーションのタイトルを指定します。インストール時やインストール後のアプリケーション名として使われるので、わかりやすい名前を付けましょう。

   4行目では「<rootContent>」タグによって、はじめに実行されるプログラムを指定します。ここではswfファイルやhtmlファイルなどを指定することができます。Flexスタイルでの開発ではActionScriptファイルをコンパイルし、作成したswfファイルを指定します。

   「systemChrome」属性では、表示されるウィンドウの装飾方法を指定します。ここで「standard」を指定すると、動作しているOSの標準ウィンドウのスタイルが使用されます。また「none」と指定すると「Flexクローム」と呼ばれるFlex専用のスタイルが使用されます。

表示する中身を作ってみる

rootContentで指定したtest.swfを生成するため、リスト3のような内容の「test.as」ファイルをTest-app.xmlと同じディレクトリに作成します。

リスト3：test.as

 1: package {
 2:     import flash.display.*;
 3:     import flash.text.*;
 4:     public class test extends Sprite {
 5:         public function test(){
 6:             var label:TextField = new TextField();
 7:             label.x = 10;
 8:             label.y = 10;
 9:             label.text = 'はろーわーるど';
10:             addChild(label);
11:         }
12:     }
13: }

   画面に何かを表示するためのクラスは、「flash.display.Sprite」クラスを継承して作ります。クラス名にはファイル名と同じ名前を指定する必要があるため、4行目で「test」クラスを定義しています。

   なお2行目で「flash.display」のクラスを読み込んでいるので、testクラスの親クラスは「Sprite」と短い名前だけで指定することができます。

   次に、このtestクラスの初期化関数を定義します。Rubyでは「initialize」関数に相当するものです。ActionScriptでは、クラス名と同じ関数が初期化関数として使われるので、5行目ではtest関数を定義しています。

   今回のアプリケーションは、ただテキストを表示するだけのアプリケーションです。テキストを表示するには「flash.text.TextField」コンポーネントを使います。

   ActionScript3では変数の宣言時に型を指定する必要があります。そのため6行目においてTextFieldのオブジェクトを保持するlabel変数を定義し、そこに新しいTextFieldのオブジェクトを代入しています。

   ここでも、すでに3行目で「flash.text」が読み込まれているので、TextFieldを指定するときには「flash.text.」までを省略することができます。

   続けて、このTextFieldコンポーネントの位置や表示する文字列を指定します。7〜8行目では表示する位置を、9行目では表示する文字列をそれぞれ指定しています。

   最後に、生成したTextFieldコンポーネントを表示するため、「addChild」関数でウィンドウに貼り付けます。

プログラムをコンパイル

ActionScriptのファイルをswf形式にコンパイルするには、ソースコードのあるディレクトリに移動して「amxmlc」コマンドを実行します。

> amxmlc test.as
Loading configuration file ****/air-config.xml
This beta will expire on Wed Oct 31 00:00:00 JST 2007.
****/test.swf (647 bytes)

無事コンパイルが完了すると上記のようなメッセージが表示されます。さらにエクスプローラなどでtest.swfが生成されていることを確認してください。

プログラムを実行しよう

このファイルを実行してみましょう。テストのための実行は「adl」コマンドで行います。

> adl Test-app.xml

プログラムを実行すると図2のような画面が表示されます。

図2：プログラムの実行画面
（画像をクリックすると別ウィンドウに拡大図を表示します）

このように簡単な記述でスタンドアローンのプログラムを生成することができます。

次回は

AIRによるアプリケーションの作成手順について解説しました。いよいよ次回からは、このAIRを使って付箋紙クライアントの構築を行います。

前のページ 1 2 3

著者プロフィール
株式会社ワイズノット増井雄一郎
PukiWikiなどのオープンソース活動を経て、2005年からRuby on Railsに的を絞り、2006年はRubyに関する仕事のみで生計をたてる。これまでのフリー活動から転身し、アメリカ行きを目指して2007年4月に(株)ワイズノットに入社。クロスメディア事業部でSaaSプラットフォームの構築に従事。現在の興味はテキストマイニング。

INDEX
第3回：Adobe AIRで付箋風クライアントを作ろう
	Webアプリケーションでは物足りない
	Adobe AIRの開発環境
	Hello World

Ruby on RailsとAdobe AIRでデスクトップアプリを作る
第1回	付箋紙アプリケーションを作ろう！
第2回	新機能「scaffold_resource」とは？
第3回	Adobe AIRで付箋風クライアントを作ろう
第4回	AIRでメニューウィンドウ作成！
第5回	どこでも付箋紙にアクセス！