« 書評:「脳と心の地形図 ビジュアル版」源書房 | メイン | 2008年5月分のアクセス解析 »

AIR:Eclipseでmxmlをコンパイルできる環境を一から実装

http://libertatem.org/2008/05/adobe-air1.html

Eclipse起動画面

はじめに

やっと見つけました、EclipseでのAIRのVer1.0コンパイル。プログラム言語に関して内部事情に疎い(そもそも技術が無い)僕は、一体何が必要不必要かすら分からず、Eclipseでのmxmlコンパイルは絶対できると考えてネットで調べましたが、国内ソースからは一向に出てきません。みんな開発慣れしてて考えずに分かるのかチクショー、なんて結構な時間を費やして、やっと実装できました。今回は、EclipseとFlex3SDKを用いた開発環境を整えるまでです。扱う拡張子はmxmlです。この方法でswfを生成しますが、AIRアプリケーションとして生成するところまでは今回は説明していません。近いうちにまとめて記事に起こそうと思います。それと、筆者の技術の関係上余計な事をしていると思いますがそこはご了承ください。

要約するとこの記事のメリットは、'08.05.31現在、ウェブで方法が掲載されていないであろう、Eclipseでmxmlのコンパイルを方法について書いてあることです。

この記事を踏まえたうえで、fcsh環境の実装も記事にしました。「AIR:Eclipseでfcsh環境を実装」から。

また、Aptanaを用いて同じようなことをしたい場合は、こちらの「AIR:Aptanaでのadobe AIR開発環境を一から実装」をご覧ください。ただしこちらではmxmlのコンパイル方法は言及していません。

今回の記事を書くにあたり、特に以下のサイトを参考にさせていただきました。

Eclipseのインストール、日本語化

最初にEclipseをインストールします。Eclipseのダウンロードは、以下のURLから。
Pleiadeshttp://mergedoc.sourceforge.jp/

なお、PleiadesはEclipseに日本語化プラグインを既に適用したものを扱っているために、日本語化の手間はありません。この時に注意が必要なのですが、数あるバージョンの内、プラグインが少数しか含まれていないものを落とすと、他のサイトで示された手順のアイコンが欠如している場合が多くあります。ですので、UltimateまたはJavaWTPを落としたほうが何かと参考記事が多い人には扱いやすいと思います。

DLファイルの一覧
上に示したどちらかです。JRE付き、無し、それぞれ異なりますので、必要に応じてどちらかをダウンロードしてください。ここで僕はJRE付きのJavaETLを落としました。JavaWTPの方が僕のこれからの説明と多少UIが異なってきますがお勧めです。

落としたEclipseは特に設定することなく、保存したディレクトリから起動することができます。

Flex3SDKのインストール

次にFlex3SDKをインストール、もとい保存します。Flex3SDKのダウンロードは、以下のURLから。
Adobe - Download Adobe Flex 3http://www.adobe.com/cfusion/entitlement/index.cfm?e=flex3email

SDKのDL場所
ページ下部のSDKの利用規約のチェックボックスをオンにした後、ダウンロードしてください。そして解凍した後、フォルダごとCドライブ直下に配置。コンパイルの際の参照元となりますので、都合の良いところに保存してください。フォルダネームは「flex3sdk」としてあります。

HelloWorldアプリケーションの準備

eclipseのワークスペースの選択
Eclipseを起動すると、ワークスペースの場所を要求されます。僕はここで「C:\flex」に指定。

ツールバー上
ツールバーから「ファイル」、「新規」、「プロジェクト」。

一般、プロジェクト
一般を選択後、プロジェクトを選択し次へ。

プロジェクト名、「helloworld」
プロジェクト名を「helloworld」と入力後、終了。

フォルダ、ファイルを生成
ここから暫くは参考記事とほとんど同じ。フォルダを生成後、空ファイルをいくつか生成し、上の状態を作ります。構成されているファイルとしては、選択されているmxmlのみ異なりますので、その点に注意してください。

右クリックからファイル生成
なお、左のウィンドウで右クリックをして生成可能です。「新規」、「フォルダー」もしくは「ファイル」で作り、またファイルの場合は拡張子も忘れずに記述してください。

HelloWorldアプリケーションの記述

それでは以下に記述する内容を書いていきます。

build.properties(Flex sdkのbinディレクトリの絶対パスを指定)

FLEX3_HOME=C:/flex3sdk/bin

build.propertiesのUI
build.propertiesのUIが、開発環境によって異なることがありますが、ソースコードの記述の際は、下のタブでソース記述に切り替えてください。また、SDKのbinディレクトリを正しく記述できているかを確認してください。3の位置など要注意です。(flex3sdkがflexsdk3、等)

build.xml

<?xml version="1.0" encoding="UTF-8"?>
<project name="HelloWorld" default="build.swf" basedir=".">
    <property file="build.properties" />
    <property name="dist.dir" value="dist" />
    <property name="src.dir" value="src" />
    <property name="height" value="100" />
    <property name="width" value="200" />
    <property name="framerate" value="30" />
    <property name="bgcolor" value="0xFFFFFF" />
   
    <!-- create swf-->
    <target name="build.swf" depends="clean">
        <exec executable="${FLEX3_HOME}/amxmlc.bat" failonerror="true">
            <arg line="-default-size ${width} ${height}" />
            <arg line="-default-frame-rate ${framerate}" />
            <arg line="-default-background-color ${bgcolor}" />
            <arg line="-output ${dist.dir}/HelloWorld.swf" />
            <arg line="${src.dir}/HelloWorld.as" />
        </exec>
    </target>

    <!-- clean dist directory -->
    <target name="clean">
        <delete>
            <fileset dir="${dist.dir}" includes="HelloWorld.swf" />
        </delete>
    </target>

</project>

気をつけなければいけないのは、1行目のxml宣言は、必ずファイルの1行目の最初から記述されなければいけないことです。エラーを吐くときは余分なスペースが無いかを確認してください。

property後続のnameで様々な設定を行った後、中の行のargで引用しています。基本的に読めば分かると思います。framerateは1秒当たりの描画回数、bgcolorはすなわちbackground-color、背景色です。

helloworld.mxml

<?xml version="1.0" ?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
	<mx:TextArea text="HelloWorld!" />
</mx:Application>

mx:Applicationタグに囲まれた部分が今回表示される文字列です。

コンパイル

Antビューの表示
コンパイルの前に、Antを表示する必要があります。「ウィンドウ」、「ビューの表示」、「Ant」です。これが無い場合は、下の「その他」から「Ant」、「Ant」で選択できます。(果たしてありえるのかはわかりませんが)もし、ここでAntが無い場合、Eclipseを落としなおしてください。ここまでの選択は、全て他に特殊な何かを必要とはしていません。

build.swfをダブルクリック
ウィンドウ内のbuild.swfをダブルクリックしてください。コンパイルが開始されます。エラーを吐く場合は、今までで間違っている部分が無いかを確認してください。

HelloWorld.swfの生成完了
コンパイルが終了したら、distフォルダ内にHelloWorld.swfが生成されています。F5で再読み込みを行えば、画面に表示されるはずです。

HelloWorld.swfの実行
実行するとこんな感じです。簡単に生成した割には、デザインもダサく無いです。これでHelloWorldのサンプルプログラムは終了です。

あとがき

ぶっちゃけ知識があればスムーズに出来たのでは、と思いました。Antなんて今までは外部から持って来る必要があったので、どこだと探したらSDKの中に既に含まれていたりしましたし、空回りしている感も否めなかったです。

しかしこれで念願のmxmlコンパイルが出来ました。以前書いたAptanaの記事は個人的にはいらない子です。今度はEclipseを用いた環境の充実か、もう少し踏み込んだサンプルプログラムを作っていきたいです。

トラックバック

このエントリーのトラックバックURL:
http://libertatem.org/mt/mt-tb.cgi/67

コメントを投稿

(いままで、ここでコメントしたことがないときは、コメントを表示する前にこのブログのオーナーの承認が必要になることがあります。承認されるまではコメントは表示されません。そのときはしばらく待ってください。)

About

2008年5月31日 15:41に投稿されたエントリーのページです。

ひとつ前の投稿は「書評:「脳と心の地形図 ビジュアル版」源書房」です。

次の投稿は「2008年5月分のアクセス解析」です。

他にも多くのエントリーがあります。メインページアーカイブページも見てください。

Creative Commons License
このブログは、次のライセンスで保護されています。 クリエイティブ・コモンズ・ライセンス.