Home > AIR

AIR Archive

FlashDevelopでAIRを作成する手順


FlashDevelopでAIRを作成する手順が知りたい! と昨日twitterに流れていたので、(サラッとですが)エントリしておきます。

AIRプロジェクトを作成

プロジェクトからAIRプロジェクトを選択します。

AIRプロジェクトを作成

作成すると、プロジェクトパネルは以下のような感じになります。

AIRプロジェクトを作成した後のプロジェクトパネル

Main.as

Main.asに、あれこれコードを書きます。

CreateCertificate.bat

CreateCertificate.batをダブルクリックして、開きます。

batファイルを編集

これにはFlexSDKへのパスとか、パッケージする際のパスワードなどを設定します。

:: Certificate information
set NAME="AirSample"
set PASSWORD=fd
set CERTIFICATE="AirSample.pfx"

デフォルトではパスワードがfdになっているので、任意のものに変更しておきます。

これでコンパイルをしても、エラーになります。

pfxを作成する

パッケージ化には、pfxという認証キーが必要になります。

CreateCertificate.batを選択して、右クリックから実行を選択します。

pfxを作成

するとコマンドプロンプトが立ち上がり、そしてパスワードを聞かれるので、先の手順で変更した任意のパスワードを入力します。

コマンドプロンプトにパスワードを入力

すると、認証キーであるpfxが作成されます。

pfxが作成された

application.xml

次にapplication.xmlを編集します。

xmlファイルを直接編集してもいいんですが、何処に何を設定したらいいのかイマイチワカラナイ…

そんなあなた、FlashDevelopには便利なプラグインが用意されていますよ!(詳細は以下の記事をご覧下さい!)

Air Application Properties Pluginを起動します。

Air Application Properties Pluginを起動

するとパネルが表示されるので、必要事項を入力していきます。

必要事項を入力

OKボタンを押すと、入力した項目がapplication.xml側に反映されます。

PackageApplication.bat

ここまで終わったら、次にAIRパッケージ化する為にPackageApplication.batを右クリックで実行します。

PackageApplication.batを起動

するとコマンドプロンプトが立ち上がり、再びパスワードを聞かれるので、入力します。(入力してもパスワードは画面に表示されません!)

パッケージ化の為にパスワードを入力

airファイルが

正常に終わると、airフォルダが作成され、その中にairファイルが配置されます。

airフォルダが新たに作成され、その中にairファイルが

あとはairをインストールするだけです。

airをインストール

application.xmlの設定をきちんと行うと、発行者が不明とかにはなりません。(←これだけでは駄目ですね。コメント欄を併せてご覧ください!)

FlashDevelopのプラグイン『Air Application Properties Plugin』


FlashDevelopでAIRプロジェクトを作成した際、application.xmlというものが作成されます。

このxmlファイルに、バージョンだとか、著作権だとか、使用するアイコンのパスとかいろいろ記述して、パッケージングするんですけど、エディタでゴリゴリ記述していくのは、ちょっと…という場合。

以前に、『Application Descriptor Managerが便利!』という記事を書いたんですが、これを使うには、別途AIRアプリを立ち上げなければいけません。

「ちょっと面倒だなぁ… FlashDevelopで便利なプラグインはないものだろうか?」と思って、探してみたら、ありました。

その名は『Air Application Properties Plugin』。

ちょっと使ってみたんですが、便利そうだったのでエントリしておきます。

事前準備

  1. 上記のリンクから、zipファイルをダウンロードしてきます。
  2. zipファイルを解凍しておきます。
  3. AirProperties.dllというファイルがあるので、それをFlashDevelopのPluginsフォルダに入れる。

使い方

FlashDevelopを起動して、新規プロジェクトから、AIR(AS3、Flex3)プロジェクトを作成します。

すると、FlashDevelopのツールバーに以下のようなアイコンが追加されています。

ツールバーにアイコンが追加される

これをクリックしてあげると、以下のようなパネルが開きます。

パネル

このパネル内を埋めていくだけで、application.xml側に必要なタグを追記してくれます。

う~ん、便利!

詳細設定は、FlashDevelopでF10を押して、左側から『AirProperties』を選択します。

詳細設定画面

一番上のSelect Descriptor File on Openは、デフォルトでfalseになっています。

falseになっていることにより、(ツールバーからアイコンをクリックした際に)編集可能なxmlのファイルは、現在開いているプロジェクトのapplication.xmlファイルになります。

他のapplication.xmlを選択したいって時は、ここをtrueに変更してあげます。すると、以下のようなダイアログが開きます。

別のxmlファイルを開く場合

これで、任意のapplication.xmlファイルを選択することが出来ます。

わざわざ別途AIRアプリを立ち上げなくてもいいので、FlashDevelopでAIRを作成する時は、これを使うと便利かなぁ…と。

ADMで他のサイズのアイコン画像を作成する


ADM(Application Descriptor Manager)を使われた方は既にご存じのことかと思いますが、ADMを使って他のサイズのアイコン画像を作成するということもできます。

ADMって何? という方は、以下のエントリを参照してください。

流れとしては以下の様になります。

  1. ADMを起動し、application.xmlファイルを開く
  2. 次に、Optionalタブをクリック
  3. Generate all from one image fileボタンをクリック
  4. アイコン画像(128×128)を選択

すると、こんな感じで他のサイズのアイコン画像を作成してくれます。

自動的にアイコン画像を作成する

ちなみにですが、Generate all from one image fileで16×16サイズの画像を選択してしまうと…

16×16のサイズをアイコンを使った場合

こんな感じになってしまいますので、気をつけてください!

アイコンが作成されたので、ADMのFile Previewのタブをクリックして、ソースを見てみます。

<icon>
        <image32x32>icons/appIcon_32.png</image32x32>
        <image128x128>icons/appIcon_128.png</image128x128>
        <image48x48>icons/appIcon_48.png</image48x48>
        <image16x16>icons/appIcon_16.png</image16x16>
</icon>

このように、application.xmlファイルにもアイコンの記述が追加されています。

ここでFlashDevelopに戻ってみると、プロジェクトパネルにiconsフォルダが追加され、そこに作成されたアイコン画像が入っています。

プロジェクトにアイコンのフォルダが追加

あとはコンパイルの際、iconsフォルダにパスを通すか、(面倒な時は)パスが通っているフォルダに画像を移動させればOKです。

ADMのヘルプにもあるように、本来は(きちんと)アイコン画像を4パターン作成した方がいいかと思いますが…

ProgressionでAIRプロジェクトを書き出してみる


ProgressionでAIRを作ってみようかなぁ…と思って試してみたら、躓いたことがあったので、メモしておきます。

ちなみにですが、僕は未だにFlashCS3なので、CS4をお使いの方には、関係のない話になるかと思います。

Progressionのプロジェクトパネルから、AIR1.1を選択し、プロジェクトを書き出します。

プロジェクトパネルからAIRの書き出し

すると、プロジェクトは無事作成されるんですが、出力パネルにエラーが表示されます。

CastSpriteのエラーが表示される

CastSprite.asのNativeMenuが「型が見つからないか、コンパイル時定数ではない」と怒られます。

で、CastSprite.asや、その親のクラスの中身を見てみても、何も問題はなさそう…

何でエラーなの? と。

ググってみたら、NativeMenuはAIRのみに対応していて、FlashPlayerはサポートしていないなんて書かれてました。

NativeMenu オブジェクトまたは ContextMenu オブジェクトのいずれかを使用して、コンテキストメニューを設定します。Flash Player は ContextMenu クラスのみサポートしており、NativeMenu クラスはサポートしていません。(Adobe Flex3.2リファレンスより引用)

なるほどねぇ…

そんなこんなで、FlashIDEのプロパティパネルを見ていたら、気になることが…

プロファイルがデフォルト

プロファイルがデフォルトになっています。

もしかして、これが原因なんじゃないかと…

手動でプロファイルを変更

ならプロファイルを変更すればいいんじゃない? ということで、

プロファイルの変更

プロファイルの読み込み>読み込みを選択します。

AIR1.0を選択

上記の様に、プロファイルをデフォルトからAIR1.0に変更します。

プロファイルをAIRに変更

これでパブリッシュしてみたら、怒られることはなくなりました。

気にせずパブリッシュ

あれこれ試していたら、もっと簡単な方法がありました。

プロジェクトが作成され、出力パネルにエラーが表示されるところまでは一緒です。

プロファイルがデフォルト

プロファイルはデフォルトになっています。

で、ここで、エラーなんて気にせず、もう一度パブリッシュを行います。

すると何故だか、プロファイルがデフォルトからAIR1.0に自動的に切り替わります。

プロファイルをAIRに変更

加えて、先に出ていたCastSpriteのエラーも表示されなくなります。

何でプロファイルが自動的に切り替わるのかは、不明です。

手動でプロファイルを切り替えるよりは、こちらの方が簡単かと思います。

Flash CS4 + AIR1.5でプロジェクトの書き出しを行うと、このようなエラーは起きないみたいです。

多分、CS3だからでしょうか…

「CS4を買いなさい!」という無言のプレッシャー?

そんなの気にしません。まだまだCS3で頑張ります!

★追記

キャプチャのドキュメントクラスに「flabaka.Index」と書かれているものといないものがありますが、気にしないでください。

キャプチャをし忘れて、後からキャプチャをし直しただけですので…(その際、ドキュメントクラスの設定を忘れました)

MetaTagGeneratorを1.2にバージョンアップ


MetaTagGeneratorを1.2にバージョンアップしました。

MetaTagGenerator1.2

前回からの変更点はこんなところです。

  1. バージョンの記述
  2. 字数制限
  3. faviconの設定

バージョンの記述

バージョンがいくつか分からなかったので、現バージョンを表示するように変更しました。

字数制限

(SEO対策も兼ねて)descriptionとkeywordsに字数制限をしました。

keywordは(多くて)10個くらいで、descriptionは100字くらいがいいんじゃないの? みたいな説がありますので、それを参考に。

それ以上設定したいという場合は、(フィールドに値を入力→ドラッグ&ドロップorファイルを読み込んだ後で)テキストエリアを直接修正してもらえれば、100字以上の設定は可能です。

faviconの設定

あとfaviconもよく設定する項目だと思いましたので、設定をパネルから行えるようにしてみました。

デフォルトのパスは、/favicon.icoとなっています。(絶対パスなどに)変更したい場合は、適宜修正してください。

faviconのタイプですが、二通り選択可能です。

image/x-iconと設定する場合が多いかと思いますが、image/vnd.microsoft.iconも選べるようにしてあります。このあたりのことは、wikipediaのfaviconのページを参考にさせていただきました。

ちなみにですが、パスをデフォルトで、タイプをimage/x-iconにすると、こんな感じになります。

<title>●●●●</title>
<link rel=”stylesheet” type=”text/css” href=”contents/styles/progression.css” />
<link rel=”shortcut icon” type=”image/x-icon” href=”/favicon.ico” />

こんな感じで、progressionのcssの設定の記述の下に、favicon(の記述)が挿入されます。

あとrobotの設定も出来るようにしようかなぁ…と思ったんですが、いろんなサイトのソースを見ていたら、(robotは)あまり設定されていないように思えたので、今回は見送りました。

robotの設定を可能にして! とか、他にもこの設定を出来たら便利なのに! などご意見がありましたら、コメントお願い致します。

ホーム > AIR

Search
Feeds
Meta

flashDevelopスポンサー

Return to page top