AIR でタスクに常駐させメニュー処理を行う ＆ Mac OS X でもそれっぽく対応させてみる

今回は実際に動作処理を加えながらタスク常駐とタスクトレイメニュー動作のサンプルを作成してみた。動作の実施ポイントはこんな感じ。

• 起動時にメインウインドウを非表示する
• タスクトレイアイコンを左クリックでウインドウを表示・非表示させる（Windows のみ）
• タスクトレイメニューからウインドウを表示・非表示させる
  └この時にメニューの名称も切り替える
• タスクトレイアイコンを AIR アプリで設定したものを登録させる
  └読み込みが失敗したら黒ベタのアイコンを登録させる

一応、今回のサンプルでは Windows、Mac OS X と共に正常に動作した。

ちなみに、Mac OS X はデフォルトで終了メニューが用意されているので、Windows のみ終了メニューを追加している。

サンプルソース

package
{
	import flash.display.*;
	import flash.events.*;
	import flash.geom.*;
	import flash.net.*;
	import flash.filesystem.*;
	import flash.desktop.*;
	
	public class Main extends Sprite
	{
		var mainWindow:NativeWindow = stage.nativeWindow;
		var systemTrayMenu:NativeMenu;
		/*============================================================
		コンストラクタ
		============================================================*/
		public function Main()
		{
			//初期設定
			init();
		}
		/*============================================================
		初期設定
		============================================================*/
		public function init():void
		{
			//ステージ
			stage.scaleMode = StageScaleMode.NO_SCALE;
			stage.align = StageAlign.TOP_LEFT;
			//タスク・Dockメニュー生成
			systemTrayMenu = new NativeMenu();
			systemTrayMenu.addItem(new NativeMenuItem("ウインドウを表示"));
			systemTrayMenu.addItem(new NativeMenuItem("", true));	//セパレート
			systemTrayMenu.addItem(new NativeMenuItem("メニュー2"));
			systemTrayMenu.addItem(new NativeMenuItem("メニュー3"));
			//イベント（右クリック）
			systemTrayMenu.addEventListener(Event.SELECT, systemTrayMenuSelectHandler);
			//タスクトレイ・Dock
			if (NativeApplication.supportsDockIcon)
			{// Mac OS X
				//アイコン登録
				setTaskIcon(128);
				//Dockアイコンメニューを追加
				var dockIcon:DockIcon = NativeApplication.nativeApplication.icon as DockIcon;
				dockIcon.menu = systemTrayMenu;
				//イベント（左クリック）
				dockIcon.addEventListener(MouseEvent.CLICK, systemTrayIconClickHandler);
			}
			else if (NativeApplication.supportsSystemTrayIcon)
			{// Windows
				//アイコン登録
				setTaskIcon(16);
				//win は終了メニューを追加する
				systemTrayMenu.addItem(new NativeMenuItem("",true));	//セパレート
				systemTrayMenu.addItem(new NativeMenuItem("終了"));
				//タスクトレイにメニューを追加
				var sysTrayIcon:SystemTrayIcon = NativeApplication.nativeApplication.icon as SystemTrayIcon;
				sysTrayIcon.tooltip = "ツールチップテキスト";
				sysTrayIcon.menu = systemTrayMenu;
				//イベント（左クリック）
				sysTrayIcon.addEventListener(MouseEvent.CLICK, systemTrayIconClickHandler);
			}
		}
		/*============================================================
		タスクトレイのメニュー実行（右クリック）
		============================================================*/
		function systemTrayMenuSelectHandler(event:Event) :void
		{
			switch(event.target["label"])
			{
				case "ウインドウを表示":
					showMainWin();
					break;
				case "ウインドウを隠す":
					hideMainWin();
					break;
				case "メニュー2":
					trace("メニュー2の処理");
					mainWindow.x = 300;
					mainWindow.y = 300;
					break;
				case "メニュー3":
					trace("メニュー3の処理");
					mainWindow.x = 100;
					mainWindow.y = 100;
					break;
				case "終了":
					NativeApplication.nativeApplication.exit();
					break;
			}
		}
		/*============================================================
		タスクトレイのメニュー実行（左クリック）
		============================================================*/
		function systemTrayIconClickHandler(event:Event) :void
		{
			(mainWindow.visible) ? hideMainWin() : showMainWin() ;
		}
		/*============================================================
		ウインドウを表示
		============================================================*/
		function showMainWin() :void
		{
			mainWindow.visible = true;
			systemTrayMenu.getItemAt(0).label = "ウインドウを隠す";
		}
		/*============================================================
		ウインドウを隠す
		============================================================*/
		function hideMainWin() :void
		{
			mainWindow.visible = false;
			systemTrayMenu.getItemAt(0).label = "ウインドウを表示";
		}
		/*============================================================
		タスクトレイのアイコン設定
		============================================================*/
		function setTaskIcon(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.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, onLoadError);
			ldr.load(new URLRequest(icon.url));
			//AIRアプリで設定したアイコンを使用
			function onLoaded(event:Event):void
			{
				var bit:BitmapData = new BitmapData(n,n);
				bit.draw(ldr);
				images.push(bit);
				NativeApplication.nativeApplication.icon.bitmaps = images;
			}
			//エラーの場合はベタ色で表示
			function onLoadError(event:Event):void
			{
				var images:Array = [];
				images.push(new BitmapData(n, n, false, 0x000000));
				NativeApplication.nativeApplication.icon.bitmaps = images;
			}
		}
	}
}

【ダウンロード】
⇒サンプルファイル（42KB） Flash CS4 形式

起動時にメインウインドウを非表示する

まずは起動時にメインウインドウを非表示にする方法だが、こちらは Flash CS4 で作成する場合は、メニューの「ファイル」→「AIR 設定」で設定画面を開き、「詳細」の設定ボタンをクリックして、「初期ウインドウ設定」の「表示」のチェックを外すだけで OK。

アプリ実行中にメインウインドウを表示する

AIR アプリが実行中にメインウインドウを表示したい場合は、下記のコードで実現できる。

var mainWindow:NativeWindow = stage.nativeWindow;
mainWindow.visible = true;

このメインウインドウを表示させる処理なんだけども、当初ネットをいろいろ調べてみると、新規でウインドウを作成したりとかの方法が掲載されていたのだが、ヘルプなどを調べたりして検証した結果、上記のように visible で簡単に切り替えが可能だった。これで大丈夫なのかな…？
一応、Windows でも Mac OS X でも正常に動作することを確認しているんで、おそらく大丈夫だと思うけどもね…。

タスクトレイのメニュー実行処理（右クリック）

タスクトレイのメニューを実行させるためには、SystemTrayIcon クラスに下記のイベントを登録する。

systemTrayMenu.addEventListener(Event.SELECT, systemTrayMenuSelectHandler);

イベントの処理は下記のような感じ。
event.target["label"] でメニュー項目の情報が取得できるので、case で条件分岐をさせて処理を行う。ウインドウの表示・隠すは、それぞれ showMainWin() と hideMainWin() で処理を行うようにし、終了処理は、NativeApplication.nativeApplication.exit() で実行される。
また、サンプルということで適当にウインドウの位置を変えるメニューなども追加してみる。

function systemTrayMenuSelectHandler(event:Event) :void
{
	switch(event.target["label"])
	{
		case "ウインドウを表示":
			showMainWin();
			break;
		case "ウインドウを隠す":
			hideMainWin();
			break;
		case "メニュー2":
			trace("メニュー2の処理");
			mainWindow.x = 300;
			mainWindow.y = 300;
			break;
		case "メニュー3":
			trace("メニュー3の処理");
			mainWindow.x = 100;
			mainWindow.y = 100;
			break;
		case "終了":
			NativeApplication.nativeApplication.exit();
			break;
	}
}

タスクトレイのアイコンのクリック処理（左クリック）

タスクトレイで右クリックすることでメニューが表示されるのだが、Windows のみ左クリック時のイベントも取得できるみたい。そこで、タスクトレイのアイコンを左クリックする度に、メインウインドウの表示・非表示の切り替えを行ってみた。

まずは、SystemTrayIcon クラスに下記のイベントを登録する。

sysTrayIcon.addEventListener(MouseEvent.CLICK, systemTrayIconClickHandler);

そして下記のような感じでメインウインドウの 表示・隠すの処理に振り分ける。

function systemTrayIconClickHandler(event:Event) :void
{
	(mainWindow.visible) ? hideMainWin() : showMainWin() ;
}

メニュー名称の変更

ウインドウの表示状態によってメニューの名称を変更するためには、systemTrayMenu.getItemAt([インデックス位置]).label でメニューのラベルの設定を行うことが可能。

systemTrayMenu.getItemAt(0).label = "ウインドウを隠す";
systemTrayMenu.getItemAt(0).label = "ウインドウを表示";

参考情報

Adobe AIRで作るデスクトップアプリケーション：第13回　メニューの実装｜gihyo.jp … 技術評論社

メニュー関連の情報が細かく掲載されている

airタスクトレイ常駐させたい｜_level0.KAYAC

タスクトレイに常駐させ、ウインドウの表示・非表示を切り替えるサンプルが掲載

AIRでタスクトレイアプリケーションを作る - おくち、くわんくわん

メインウインドウを非表示にして、タスクトレイメニューを実行させるサンプルが掲載

【AIR Flex】AIR のメインウインドウを非表示にしてシステムトレイに登録する - SQLの窓と銀プログラマ

メインウインドウを非表示にしてシステムトレイに登録するサンプルが掲載

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