Adobe AIR でタスクトレイにアイコンとメニューを表示させる

やっぱりデスクトップアプリケーションといえば、タスクトレイの常駐だよね（違うかも…

Adobe AIR でもちゃんとタスクトレイの機能は揃っているようだ。

それならと、早速、タスクトレイに何か表示させてみようとサンプルを作成してみた。

サンプルソース

package
{
	import flash.display.*;
	import flash.events.*;
	import flash.geom.*;
	import flash.net.*;
	import flash.filesystem.*;
	import flash.desktop.*;
	
	public class Main extends Sprite
	{
		/*============================================================
		コンストラクタ
		============================================================*/
		public function Main()
		{
			init();
		}
		/*============================================================
		初期設定
		============================================================*/
		public function init():void
		{
			//ステージ
			stage.scaleMode = StageScaleMode.NO_SCALE;
			stage.align = StageAlign.TOP_LEFT;
			//AIR
			var images:Array = [];
			if (NativeApplication.supportsDockIcon)
			{
				//setTaskIcon1(128);
				setTaskIcon2(128);
			}
			else if (NativeApplication.supportsSystemTrayIcon)
			{
				//setTaskIcon1(16);
				setTaskIcon2(16);
				//タスクトレイのメニュー生成
				var systemTrayMenu:NativeMenu = new NativeMenu();
				systemTrayMenu.addItem(new NativeMenuItem("メニュー1"));
				systemTrayMenu.addItem(new NativeMenuItem("メニュー2"));
				systemTrayMenu.addItem(new NativeMenuItem("",true));	//セパレート
				systemTrayMenu.addItem(new NativeMenuItem("メニュー3"));
				systemTrayMenu.addItem(new NativeMenuItem("",true));	//セパレート
				systemTrayMenu.addItem(new NativeMenuItem("終了"));
				//タスクトレイにメニューを追加
				var sysTray:SystemTrayIcon = NativeApplication.nativeApplication.icon as SystemTrayIcon;
				sysTray.tooltip = "ツールチップテキスト";
				sysTray.menu = systemTrayMenu;
			}
		}
		/*============================================================
		タスクトレイのアイコン設定（AIRアプリで設定したアイコンを使用）
		============================================================*/
		function setTaskIcon1(n:uint) :void
		{
			var images:Array = [];
			var icon:File = File.applicationDirectory.resolvePath(File.applicationDirectory.nativePath + "/AppIconsForAIRPublish/AIRApp_" + String(n) + ".png");
			var ldr:Loader = new Loader();
			ldr.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoaded);
			ldr.load(new URLRequest(icon.url));
			function onLoaded(event:Event):void
			{
				var bit:BitmapData = new BitmapData(n,n);
				bit.draw(ldr);
				images.push(bit);
				NativeApplication.nativeApplication.icon.bitmaps = images;
			}
		}
		/*============================================================
		タスクトレイのアイコン設定
		============================================================*/
		function setTaskIcon2(n:uint) :void
		{
			var images:Array = [];
			images.push(new BitmapData(n, n, false, 0x000000));
			NativeApplication.nativeApplication.icon.bitmaps = images;
		}
	}
}

とりあえずはこれでタスクトレイにアイコンを表示させて、メニューやツールチップを表示させることができる。

↑こんな感じでメニューとツールチップが表示される。

まずは、タスクトレイとドック、どちらが使用できるかを判別

まずタスクトレイにアイコンを表示させる場合、OS によって状況が変わってくる。Windows はタスクトレイ、Mac はドッグ。

そこで下記のように、まずは条件分岐を行って、ドックアイコンが使えるのか？タスクトレイが使えるのか？によって処理を分けていく。もちろん、アイコンの大きさも全然違ってくるしねー。

if (NativeApplication.supportsDockIcon)
{
	[Mac 用のアイコン表示処理（128x128px）]
}
else if (NativeApplication.supportsSystemTrayIcon)
{
	[Win 用のアイコン表示処理（16x16px）]
}

• NativeApplication.supportsDockIcon：
  ドックアイコンをサポートするかどうか（読み取り専用）
• NativeApplication.supportsSystemTrayIcon：
  システムトレイ（タスクトレイ）アイコンをサポートするかどうか（読み取り専用）

で、Win のタスクトレイアイコンは 16x16px、Mac のドックアイコンは 128x128px のアイコンを適用させていく。

アイコンの追加

まずは簡単にベタ色のビットマップを生成してアイコンを追加する場合は下記のような感じ。

if (NativeApplication.supportsDockIcon)
{
	var images:Array = [];
	images.push(new BitmapData(128, 128, false, 0x000000));
	NativeApplication.nativeApplication.icon.bitmaps = images;
}
else if (NativeApplication.supportsSystemTrayIcon)
{
	var images:Array = [];
	images.push(new BitmapData(16, 16, false, 0x000000));
	NativeApplication.nativeApplication.icon.bitmaps = images;
}

詳しくは未調査なんだけども、どうやらアイコンを追加する際には、配列にビットマップを追加して、その配列でアイコンを指定するらしい。アイコンって大きさによって数種類あるじゃない、たとえば、16x16 や 32x32 など。それらの大きさの種類があるから配列での指定になっているのかもしれない。

Win と Mac と処理が2種類になるんで、サンプルのソースでは下記のように function() 関数にまとめている。

if (NativeApplication.supportsDockIcon)
{
	setTaskIcon2(128);
}
else if (NativeApplication.supportsSystemTrayIcon)
{
	setTaskIcon2(16);
}
function setTaskIcon2(n:uint) :void
{
	var images:Array = [];
	images.push(new BitmapData(n, n, false, 0x000000));
	NativeApplication.nativeApplication.icon.bitmaps = images;
}

AIR アプリのアイコンを追加する

次に気になったのが、AIR にはアプリケーションのアイコンが登録されることになる。どうせならこのアイコンを使った方が良いんじゃないかと思って、AIR アプリに登録されているアイコンを追加する方法を調べてみたところ、下記のような処理で追加ができるようだ。

function setTaskIcon1(n:uint) :void
{
	var images:Array = [];
	var icon:File = File.applicationDirectory.resolvePath(File.applicationDirectory.nativePath + "/AppIconsForAIRPublish/AIRApp_" + String(n) + ".png");
	var ldr:Loader = new Loader();
	ldr.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoaded);
	ldr.load(new URLRequest(icon.url));
	function onLoaded(event:Event):void
	{
		var bit:BitmapData = new BitmapData(n,n);
		bit.draw(ldr);
		images.push(bit);
		NativeApplication.nativeApplication.icon.bitmaps = images;
	}
}

AIR をインストールしたフォルダにアイコンの画像があるので、そのパスを設定して読み込み、ビットマップに変換して設定する。

ただ、ひとつ問題になるのが、「デバッグ」の「ムービーのデバッグ」を行った場合、Not Found のエラー画面が表示されてしまい、タスクトレイにアイコンが追加されなくなる（汗

まぁ、といっても、この回避方法は簡単。Fla ファイルのあるフォルダに、インストール後に生成される「AppIconsForAIRPublish」フォルダとアイコンデータを格納しておくとエラーが解消される。

タスクメニュー

タスクにメニューを追加する場合は、下記のような処理となる。

//タスクトレイのメニュー生成
var systemTrayMenu:NativeMenu = new NativeMenu();
systemTrayMenu.addItem(new NativeMenuItem("メニュー1"));
systemTrayMenu.addItem(new NativeMenuItem("メニュー2"));
systemTrayMenu.addItem(new NativeMenuItem("",true));	//セパレート
systemTrayMenu.addItem(new NativeMenuItem("メニュー3"));
systemTrayMenu.addItem(new NativeMenuItem("",true));	//セパレート
systemTrayMenu.addItem(new NativeMenuItem("終了"));
//タスクトレイにメニューを追加
var sysTray:SystemTrayIcon = NativeApplication.nativeApplication.icon as SystemTrayIcon;
sysTray.tooltip = "ツールチップテキスト";
sysTray.menu = systemTrayMenu;

まずは、NativeMenu クラスでメニューを生成し、SystemTrayIcon クラスに生成したメニューオブジェクトを登録する感じとなる。ちなみに、メニューのセパレートは「new NativeMenuItem("",true)」と記述すればOK。

ただ、良く分からないのが下記の部分。一旦、「NativeApplication.nativeApplication.icon」を「sysTray」変数に格納しなくてはならない。型を変換する必要があるからかな？

//タスクトレイにメニューを追加
var sysTray:SystemTrayIcon = NativeApplication.nativeApplication.icon as SystemTrayIcon;

とりあえず、上記の処理を行った後、

sysTray.tooltip = "ツールチップテキスト";
sysTray.menu = systemTrayMenu;

先ほど作成したメニューオブジェクトとツールチップのテキストを設定することができる。

まとめ

AIR アプリのタスクトレイに関しは、やり方さえ分かってしまえば簡単な印象。

ただ、今後の課題として、タスクメニューをクリックした時の処理が未実装なんで、その部分の方法をまた勉強する予定。あと、Win の場合は、タスクメニューが使用できるのだけども、Mac の兼ね合いを考慮すると、全体的にどうなっていくのかな？というのが何とも漠然としている…（汗

ああ、先は長そうな予感。

今回のサンプル作成で参考にしたサイトは下記。

Adobe AIRでタスクトレイに常駐させる｜Webで使えるテクニック！Webで困ったときのﾒﾓ帳

タスクトレイに常駐させるための基本処理の解説

FLASH-JP.COM - フォーラム

AIR アプリで設定したアイコンを表示させる方法が掲載されている

タスクバーに表示したくない！ フォーラム - Flex User Group

タスクトレイにアイコンを表示させるサンプル。あとタスクバーに表示させない方法などについても情報がある

この記事をブックマークしておく