はじめてのApolloプログラミング
2007年03月22日 プログラミングTIPS
お知らせ1:Apolloは正式名称がAIRに決まりました。はじめてのAIRプログラミングを書きましたので、そちらも参考にしてみてください。
お知らせ2:当サイト管理人ZAPAが、Adobe AIRプログラミング入門を執筆しました!
Adobe期待の「Apollo」アルファ版がリリースされ、早速「Apolloでニコニコ動画みたいなアプリを作ってみるテスト」を作ってみました。
まるで、何の問題もなく「Apolloアプリ」を作成できたかのようなエントリでしたが、本当はコンパイルエラーが起きたりして、実は一日で作成することができませんでした。
というわけで、自分がハマった部分も交えて、Apollo SDKによる「はじめてのApolloプログラミング」を解説したいと思います。
お知らせ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開発で参考になりそうなサイトへのリンク
- 2.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のコンパイルに必要です。
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の速さを体感してみよう!」を参考にしてください。
以上のソースを、first.asという名前でUTF-8で保存し、コンパイルします。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; } } }
WinXPの場合、スタート>アクセサリ>コマンド プロンプトを開き、以下のコマンドを入力します。
コンパイルに成功すると、first.swfファイルが作成されます。cd /d ダウンロード、解凍したディレクトリ amxmlc -default-size 400 400 -default-frame-rate=30 -default-background-color=0xCCCCCC first.as
次に、Apolloアプリケーションの設定を記述するADFファイルを作成します。
また、Apolloアプリ用のアイコンとして、同じディレクトリにiconsディレクトリを作成し、各サイズのアイコンを用意する必要があります。
デフォルトのアイコンで構わない場合は、samples\iconsディレクトリ以下にアイコンが4つ用意されていますので、このフォルダごとコピーするのが簡単です。
ADFファイルとして、ファイル名.xmlを新規作成し(今回の場合は、first.xml)、以下のように記述します。
そして、最後にコマンドプロンプトからadtコマンドを実行すると、SWFファイルとADF(XML設定ファイルが読み込まれ、AIRファイルが作成されます。<?xml version="1.0" encoding="UTF-8"?> <application xmlns="https://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>
何もエラーがなければ、first.airというApolloアプリケーションが作成されます。adt -package first.air first.xml first.swf icons
5.Apolloアプリの実行
Apolloアプリを実行するには、Apollo RuntimeがPCにインストールされた状態で、.airファイルを実行すれば、自動的にインストールされます。現在はアルファ版ですが、正規版は署名機能などが追加され、セキュリティ的にも強くなるようです。
実際に動作しているところを見るのは楽しいものですね。
今回はActionScript3.0からApolloアプリを作成しましたが、他の方法でもApolloアプリは作成できます。
自分の得意な方法で試してみてください。
6.mxmlでの作成
一応、ドキュメントに載っているmxmlを使った開発方法も例として載せておきます。以上のソースを、ApolloHelloWorld.mxmlという名前で保存し、コンパイルします。<?xml version="1.0" encoding="utf-8"?> <mx:ApolloApplication xmlns:mx="https://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.swfファイルが作成されます。amxmlc ApolloHelloWorld.mxml
ADFファイルとして、ApolloHelloWorld.xmlを新規作成し、以下のように記述します。
ドキュメントのサンプルには、visible="false"と書かれていますが、このままだと表示されないまま実行されてしまいますので、trueにしておきます。<?xml version="1.0" encoding="UTF-8"?> <application xmlns="https://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>
そして、最後にコマンドプロンプトからadtコマンドを実行すると、SWFファイルとADF(XML設定ファイルが読み込まれ、AIRファイルが作成されます。
何もエラーがなければ、ApolloHelloWorld.airというApolloアプリケーションが作成されます。adt -packageApolloHelloWorld.air ApolloHelloWorld.xml ApolloHelloWorld.swf icons
簡単に半透明が実現できているのがわかると思います。
7.ApolloでYouTubeと連携するアプリの開発
冒頭で述べたように、「Apolloでニコニコ動画みたいなアプリを作ってみるテスト」の中で、YouTubeと連携して動画の上から文字を流すテストアプリを作りました。- zapapollo.air(DLサイズ約31KB)
マルチプラットフォームのため、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 コンパイルではまった...
- Ajaxとか使ってデスクトップアプリを作れる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実験結果-
- Flex2,ActionScript3.0が優れている9の理由とAjaxとの差
追記:Apollo から Adobe AIR へ