ZAPAnet総合情報局 > [Z]ZAPAブロ〜グ2.0 > プログラミングTIPS > はじめてのApolloプログラミング

はじめてのApolloプログラミング

このエントリーをはてなブックマークに追加
2007年03月22日 カテゴリ:プログラミングTIPS
お知らせ1:Apolloは正式名称がAIRに決まりました。はじめてのAIRプログラミングを書きましたので、そちらも参考にしてみてください。
お知らせ2:当サイト管理人ZAPAが、Adobe AIRプログラミング入門を執筆しました!
Adobe AIRプログラミング入門
ZAPA
工学社
2008-01

by [Z]ZAPAnetサーチ2.0




Adobe期待の「Apollo」アルファ版がリリースされ、早速「Apolloでニコニコ動画みたいなアプリを作ってみるテスト」を作ってみました。
まるで、何の問題もなく「Apolloアプリ」を作成できたかのようなエントリでしたが、本当はコンパイルエラーが起きたりして、実は一日で作成することができませんでした。

というわけで、自分がハマった部分も交えて、Apollo SDKによる「はじめてのApolloプログラミング」を解説したいと思います。

1.Apolloアプリケーション開発に必要なものをダウンロード
2.Apolloアプリケーション開発環境インストール
3.Apolloアプリケーション開発環境パス設定
4.はじめてのApolloアプリケーションプログラミング
5.Apolloアプリの実行
6.mxmlでの作成
7.ApolloでYouTubeと連携するアプリの開発
8.Apollo開発で参考になりそうなサイトへのリンク


1.Apolloアプリケーション開発に必要なものをダウンロード

Apolloアプリケーションを開発するには、当然それを開発するためにひつようなものがあります。
以下のものが必要となり、全て無料でダウンロードできます。
1.Apollo Runtime
Apolloアプリを動作させるために必要なランタイムです。必要に応じて、ドキュメント(現在は英語版のみ)もダウンロードしてください。
2.Flex2 SDK
バージョン2.01以上が必要です。日本語化パックも必要です。
3.Java 2 SDK, Standard Edition, v 1.4.2_13 (J2SE)
コンパイル時にJavaが必要になります。必要なのはバージョン1.4.2以降です。
4.Apollo SDK
Apolloのコンパイルに必要です。
自分が失敗した部分で言えば、すでに、「はじめてのActionScript3.0プログラミング」でFlex2SDKは導入していたので、それで問題が無いと思っていた点でした。
Flex2SDKはバージョン2.01以上が必要です。
バージョンが古い場合、amxmlcコマンドを実行した場合に、
amxmlc ApolloHelloWorld.mxml

Exception in thread "main" java.lang.NoClassDefFoundError: flash/localization/ILocalizer
このようなエラーが表示されてしまいます。


2.Apolloアプリケーション開発環境インストール

上記のものをダウンロードし終わったら、順番にインストール(または解凍)していきます。
Apollo Runtimeをインストールします。
ダウンロードした後、msiファイルを実行すればインストールできます。
JDK 1.4.2以降がインストールされていなければ、インストールします。
すでにインストールされていればインストールする必要はありません。
Flex2 SDKと日本語化パックを解凍します。
上でも述べたように、最新版を解凍するようにしてください。日本語化パックは同じディレクトリに上書きインストールします。
Apollo SDKをディレクトリに解凍します。
Flex2 SDKと同じディレクトリに、さらに上書き解凍します。
以上で、インストール&解凍は終了です。
既存のものを流用しようとせず、新規にApolloアプリ開発用のディレクトリを作ってしまった方が安全です。


3.Apolloアプリケーション開発環境パス設定

Windowsのコマンドプロンプトから簡単に実行できるように、環境変数(パス)を設定しておく必要があります。
例えば、WindowsXPであれば、デスクトップ上の「マイコンピュータ」を右クリックし「システムのプロパティ」を開き、「詳細設定」タブを開きます。
そして、「環境変数」をクリックし、システム環境変数のPathを編集します。
例えば、
;C:\Apollo\bin\
のように追加します。(解凍したディレクトリに合わせてください)
また、Apolloの説明書には、adtコマンドを実行できるようにClasspathを設定するようにも書かれています。
追加する場合は、以下のようにシステム環境変数のClasspathを新規作成するか編集します。(本当に必要かどうかは、先にClasspathを設定してしまったため確認していません→どうやら必要なかったようです)
C:\Apollo\lib\adt.jar
これでパス設定は終了です。
自分がハマった点としては、Flex2SDKライブラリへのパスを設定すればApolloは上書きせず別フォルダでも問題ないと思っていた点と、Javaのバージョン違いでした。


4.はじめてのApolloアプリケーションプログラミング

Apolloアプリケーションは、Flash、HTML、Ajax、PDFなど既存の技術を流用できます。
今回は、ActionScript3.0でSWFファイルを作成し、デスクトップ上で動作するApolloアプリを作成するサンプルを紹介します。
AS3については、「はじめてのActionScript3.0プログラミング」、「ActionScript3.0の速さを体感してみよう!」を参考にしてください。
package {
    import flash.display.*;
    import flash.text.*;
    public class first extends Sprite{
        public function first(){
            var tf1:TextField = new TextField();
            tf1.text = "はじめてのApolloプログラミング";
            tf1.width = 300;    //表示テキスト横幅
            tf1.height = 200;   //表示テキスト縦幅
            tf1.x = 50;         //表示テキスト横位置
            tf1.y = 20;         //表示テキスト縦位置
            addChild(tf1);      //追加

            //ウィンドウの表示
            stage.window.visible=true;
        }
    }
}
以上のソースを、first.asという名前でUTF-8で保存し、コンパイルします。
WinXPの場合、スタート>アクセサリ>コマンド プロンプトを開き、以下のコマンドを入力します。
cd /d ダウンロード、解凍したディレクトリ
amxmlc -default-size 400 400 -default-frame-rate=30 -default-background-color=0xCCCCCC first.as
コンパイルに成功すると、first.swfファイルが作成されます。

次に、Apolloアプリケーションの設定を記述するADFファイルを作成します。
また、Apolloアプリ用のアイコンとして、同じディレクトリにiconsディレクトリを作成し、各サイズのアイコンを用意する必要があります。
デフォルトのアイコンで構わない場合は、samples\iconsディレクトリ以下にアイコンが4つ用意されていますので、このフォルダごとコピーするのが簡単です。
ADFファイルとして、ファイル名.xmlを新規作成し(今回の場合は、first.xml)、以下のように記述します。
<?xml version="1.0" encoding="UTF-8"?>
<application xmlns="http://ns.adobe.com/apollo/application/1.0.M3" 
    appId="zapanet.info.first" version="1.0">

    <properties>
        <name>first</name>
        <publisher>first</publisher>
        <description>first apollo</description>
        <copyright>(C) ZAPAnet</copyright>
    </properties>

    <rootContent
        systemChrome="standard"
        transparent ="false"
        visible     ="false">first.swf</rootContent>

    <icon>
        <image16x16>icons/ApolloApp_16.png</image16x16>
        <image32x32>icons/ApolloApp_32.png</image32x32>
        <image48x48>icons/ApolloApp_48.png</image48x48>
        <image128x128>icons/ApolloApp_128.png</image128x128>  
    </icon>
</application>
そして、最後にコマンドプロンプトからadtコマンドを実行すると、SWFファイルとADF(XML設定ファイルが読み込まれ、AIRファイルが作成されます。
adt -package first.air first.xml first.swf icons
何もエラーがなければ、first.airというApolloアプリケーションが作成されます。


5.Apolloアプリの実行

Apolloアプリを実行するには、Apollo RuntimeがPCにインストールされた状態で、.airファイルを実行すれば、自動的にインストールされます。

現在はアルファ版ですが、正規版は署名機能などが追加され、セキュリティ的にも強くなるようです。
実際に動作しているところを見るのは楽しいものですね。

今回はActionScript3.0からApolloアプリを作成しましたが、他の方法でもApolloアプリは作成できます。
自分の得意な方法で試してみてください。


6.mxmlでの作成

一応、ドキュメントに載っているmxmlを使った開発方法も例として載せておきます。
<?xml version="1.0" encoding="utf-8"?>
<mx:ApolloApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" title="Hello World">
    <mx:Style>
        Application
        {
            background-image:"";
            background-color:"";
            background-alpha:"0.5";
        }
    </mx:Style>
    <mx:Label text="Hello Apollo" horizontalCenter="0" verticalCenter="0"/>
</mx:ApolloApplication>
以上のソースを、ApolloHelloWorld.mxmlという名前で保存し、コンパイルします。
amxmlc ApolloHelloWorld.mxml
コンパイルに成功すると、ApolloHelloWorld.swfファイルが作成されます。

ADFファイルとして、ApolloHelloWorld.xmlを新規作成し、以下のように記述します。
<?xml version="1.0" encoding="UTF-8"?>
<application xmlns="http://ns.adobe.com/apollo/application/1.0.M3" 
    appId="ApolloHelloWorld" version="1.0">

        <properties>
                <name>Hello World</name>
                <description>A test Apollo application.</description>
                <publisher>Apollo Test</publisher>
                <copyright>2007</copyright>
        </properties>

       <rootContent systemChrome="none" transparent="true"
                    visible="true">ApolloHelloWorld.swf</rootContent>
 
      <icon>
        <image16x16>icons/ApolloApp_16.png</image16x16>
        <image32x32>icons/ApolloApp_32.png</image32x32>
        <image48x48>icons/ApolloApp_48.png</image48x48>
        <image128x128>icons/ApolloApp_128.png</image128x128>  
      </icon>
</application>
ドキュメントのサンプルには、visible="false"と書かれていますが、このままだと表示されないまま実行されてしまいますので、trueにしておきます。

そして、最後にコマンドプロンプトからadtコマンドを実行すると、SWFファイルとADF(XML設定ファイルが読み込まれ、AIRファイルが作成されます。
adt -packageApolloHelloWorld.air ApolloHelloWorld.xml ApolloHelloWorld.swf icons
何もエラーがなければ、ApolloHelloWorld.airというApolloアプリケーションが作成されます。
簡単に半透明が実現できているのがわかると思います。



7.ApolloでYouTubeと連携するアプリの開発

冒頭で述べたように、「Apolloでニコニコ動画みたいなアプリを作ってみるテスト」の中で、YouTubeと連携して動画の上から文字を流すテストアプリを作りました。
zapapollo.air(DLサイズ約31KB)
このように、Webと連携したデスクトップアプリケーションが簡単に作れるのがApolloの良いところです。
マルチプラットフォームのため、WindowsでもMacでも動作します。
短期間で開発でき、既存の技術が流用でき、マルチプラットフォームで動作するのは素晴らしいことだと思います。


8.Apollo開発で参考になりそうなサイトへのリンク

最後に、今回参考にさせていただいたサイトや参考になりそうなサイトへのリンクを貼っておきます。
Adobe Apolloメモさんがとても参考になります。
ActionScript 3.0ゲームプログラミングブック

を執筆されている方です。
このブログでも参考にさせていただきました。
Adobe Apolloメモ
Ajaxとか使ってデスクトップアプリを作れるApolloのα版が公開
アルファ公開したアドビ「Apollo」を早速使ってみた − @IT
akihiro kamijo: Apollo アルファ版公開
Adobe Labs - Apollo
CodeZine:「これがApolloだ」 Adobeの次世代デスクトップアプリ用ランタイムリリース(RIA, Apollo, Adobe)
てっく煮ブログ - Apollo コンパイルではまった...

発売中の解説書としては、
Apollo for Adobe Flex Developers: Pocket Guide (Pocket Guide)
Mike Chambers
Oreilly & Associates Inc
2007-04
Actionscript 3.0 Cookbook
Joey Lott
Oreilly & Associates Inc
2006-10

by [Z]ZAPAnetサーチ2.0
辺りが参考になりそうです。(自分では持っていません)
邦訳された「Apolloポケットガイド邦訳Wiki」が一番参考になると思います。

ブログ内関連リンク

もしかしてAdobeの時代が来るのか?
Flex2,ActionScript3.0が優れている9の理由とAjaxとの差
ActionScript3.0の速さを体感してみよう!
Apolloでニコニコ動画みたいなアプリを作ってみるテスト
ニコニコ動画みたいなものを作ってみるテストと問題点
Flashは検索エンジンに引っかからないという思い込み
なぜFlashは検索エンジンにひっかかりにくいのか?-SEO対策-
FLASHだって検索結果1位を目指せます!-SEO実験結果-

追記:Apollo から Adobe AIR へ