株式会社ライブキャストロゴ 株式会社ライブキャスト

flashcast:フリーで働くITエンジニア集団のブログ: google翻訳APIを使ったAIRアプリを作る!の続きです。

最初の作業として、AIRで常駐アプリを作ってみたいと思います。翻訳したいと思った時に、ソフトをいちいち起動するのは手間だと考えたからです。

まず、エントリポイント(起動時に最初に実行される)のmxmlを修正します。

FlexBuilderで作成されたプロジェクトは、エントリポイントとして1つmxmlを割り当てる必要があります。通常、AIRアプリの場合、エントリポイントとして割り当てられたmxmlはWindowedApplicationクラスです。

WindowedApplication は、2 つの役割を果たします。これは <mx:Application> タグの代わりに使用され、Flex ベースの AIR アプリケーションへのエントリポイントとして機能します。また、WindowedApplication はコンテナとして、Flex AIR アプリケーションの最初のウィンドウのレイアウトを定義します。WindowedApplication で定義されたすべてのビジュアルコントロールは、AIR アプリケーションによってロードされる最初のウィンドウのコンテンツになります。

WindowedApplication – ActionScript 3.0 言語およびコンポーネントリファレンスより引用。

FlexBuilderで作成した直後はこんな感じのmxmlが1つできます。

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

</mx:WindowedApplication>

今回開発するアプリのエントリポイントは、画面を必要としないので、Applicationクラスにします。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

</mx:Application>

次に、Windowsのタスクトレイや、Mac OSのドックのアイコンをオリジナルの画像にして、常駐していることがわかるようにします。flashcast:フリーで働くITエンジニア集団のブログ: Macで動くAIRアプリのDockアイコンをカスタマイズする方法を参考に、思い出しながら実装しました。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="initApp()">
	<mx:Script>
		<![CDATA[
			import mx.core.BitmapAsset;
			[Embed(source="assets/translator_icon16.png")]
			private var icon16:Class;
			[Embed(source="assets/translator_icon128.png")]
			private var icon128:Class;

			private function initApp():void {
				initIcon();
			}

			private function initIcon():void {
				var newIconBitmap:BitmapData;

				if (NativeApplication.supportsSystemTrayIcon) {
					// タスクトレイアイコン
					newIconBitmap = (new icon16() as BitmapAsset).bitmapData;
				}
				else if (NativeApplication.supportsDockIcon) {
					// ドックアイコン
					newIconBitmap = (new icon128() as BitmapAsset).bitmapData;
				}
				else {
					NativeApplication.nativeApplication.exit();
				}

				setIcon(newIconBitmap);
			}

			private function setIcon(bitmap:BitmapData):void {
				NativeApplication.nativeApplication.icon.bitmaps = [bitmap];
			}
		]]>
	</mx:Script>
</mx:Application>

アイコン用に、2種類の画像を用意しました。

Windowsのタスクトレイ用

Windows用


Macのドックアイコン用

Mac用


実行すると、こんな感じになります。
Windowsの場合

Windowsの場合


Macの場合

Macの場合


ついでに、ビューとロジックを分離しました。これは好みの問題なので、分離しないといけないわけではありません。

mxmlとApplicationクラスを継承したクラスに分離します。

mxmlのソースです。

<?xml version="1.0" encoding="utf-8"?>
<fc:TranslatorSample2Base xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:fc="*" layout="absolute" creationComplete="initApp()">

</fc:TranslatorSample2Base>

mxmlで、自前のクラスライブラリなどを使いたい場合は名前空間とそのpackageの宣言を記述します。

xmlns:fc=”*”

これで、mxmlでそのpackageのクラス利用できるようになります。使う時には、名前空間に続けてクラス名を記述します。

<fc:TranslatorSample2Base

次に、分離したクラスのソースです。

package {
	import mx.core.Application;

	public class TranslatorSample2Base extends Application
	{
		private var imanager:IconManager;

		public function TranslatorSample2Base():void
		{
		}

		public function initApp():void {
			imanager = new IconManager();
			imanager.initIconManager();
		}
	}
}

また、アイコンをカスタマイズする部分は、別クラスにしました。

package {
	import flash.desktop.NativeApplication;
	import flash.display.BitmapData;

	import mx.core.BitmapAsset;

	public class IconManager
	{
		[Embed(source="assets/translator_icon16.png")]
		private var icon16:Class;
		[Embed(source="assets/translator_icon128.png")]
		private var icon128:Class;

		public function IconManager():void {
		}

		public function initIconManager():void {
			initIcon();
		}

		private function initIcon():void {
			var newIconBitmap:BitmapData;

			if (NativeApplication.supportsSystemTrayIcon) {
				// タスクトレイアイコン
				newIconBitmap = (new icon16() as BitmapAsset).bitmapData;
			}
			else if (NativeApplication.supportsDockIcon) {
				// ドックアイコン
				newIconBitmap = (new icon128() as BitmapAsset).bitmapData;
			}
			else {
				NativeApplication.nativeApplication.exit();
			}

			setIcon(newIconBitmap);
		}

		private function setIcon(bitmap:BitmapData):void {
			NativeApplication.nativeApplication.icon.bitmaps = [bitmap];
		}
	}
}

こんな感じで、とりあえず常駐するだけのAIRアプリができました!

サンプルソース

サンプルソースをダウンロードできるようにしておきます。