Apollo改めAIRプログラミング入門(4)

AIRの新機能、電子署名とシステムトレイの利用方法

クラスメソッド株式会社
杉浦篤史
2007/11/13


システムトレイにアイコンを表示するには?

 前述のとおり、ベータ2からシステムトレイにアイコンを表示できるようになりました。

 これにより、システムトレイにアプリケーションの状態を示したり、システムトレイアイコンからメニューを開いてアプリケーションの操作を行ったりすることができるようになります(*注意:システムトレイアイコン表示については、Windowsのみの対応機能です。ほぼ同じような方法でMac OSXのDockIconへのアイコン表示も行えるようですが、今回は解説しません。ご了承ください)。

 以下にその作例を示します。実行結果は図6図7となります。

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="vertical" width="300" height="200"
    title="SystemTrayIconExample"
    creationComplete="onCreationComplete()">

    <mx:Script>
    <![CDATA[
        import mx.core.BitmapAsset;

        [Embed(source="assets/icons/AIRApp_16.png")]
        private var icon16:Class;

        private var systemTrayIcon:SystemTrayIcon;
        private var systemTrayMenu:NativeMenu;
        private var iconBitmap:BitmapData;

        /**
        * 初期処理
        */
        private function onCreationComplete():void {

            //システムトレイアイコンをサポートしているか
            if (Shell.supportsSystemTrayIcon) {
                systemTrayIcon = Shell.shell.icon as SystemTrayIcon;

                //アイコンの設定
                iconBitmap = (new icon16() as BitmapAsset)
                    .bitmapData;
                systemTrayIcon.bitmaps = [iconBitmap];

                //ロールオーバーした際のtooltip表示。ここのアプリ
                //ケーションの状態を簡単に表示するのもいいでしょう
                systemTrayIcon.tooltip = "SystemTrayIconExample";

                //メニュー設定
                setMenuItems();
            }
        }

        /**
        * システムトレイアイコンのメニューを初期化
        */
        private function setMenuItems():void{
            systemTrayMenu = new NativeMenu();
            systemTrayIcon.menu = systemTrayMenu;

            //元に戻す
            var restoreMenuItem:NativeMenuItem
                = new NativeMenuItem("元に戻す");
            restoreMenuItem.addEventListener(
                Event.SELECT, restoreMenuItemSelectHandler);
            //最大化
            var maxMenuItem:NativeMenuItem
                = new NativeMenuItem("最大化");
            maxMenuItem.addEventListener(
                Event.SELECT, maxMenuItemSelectHandler);
            //最小化
            var miniMenuItem:NativeMenuItem
                = new NativeMenuItem("最小化");
            miniMenuItem.addEventListener(
                Event.SELECT, miniMenuItemSelectHandler);
            //終了
            var exitMenuItem:NativeMenuItem
                = new NativeMenuItem("終了");
            exitMenuItem.addEventListener(
                Event.SELECT, exitMenuItemSelectHandler);

            //メニューの追加
            systemTrayMenu.addItem(restoreMenuItem);
            systemTrayMenu.addItem(maxMenuItem);
            systemTrayMenu.addItem(miniMenuItem);
            systemTrayMenu.addItem(exitMenuItem);
        }

        /** systemTrayMenu「終了」の際の処理 */
        private function exitMenuItemSelectHandler(event:Event):void{
            //アプリケーションの終了
            exit();
        }
        /** systemTrayMenu「最小化」の際の処理 */
        private function miniMenuItemSelectHandler(event:Event):void{
            //アプリケーションの最小化
            minimize();
        }
        /** systemTrayMenu「最大化」の際の処理 */
        private function maxMenuItemSelectHandler(event:Event):void{
            //アプリケーションの最大化
            maximize();
        }
        /** systemTrayMenu「元に戻す」の際の処理 */
        private function restoreMenuItemSelectHandler(
            event:Event):void{
            //アプリケーションを元に戻す
            restore();
        }
    ]]>
    </mx:Script>
</mx:WindowedApplication>

図6 アプリには何も要素はない 
図6 アプリには何も要素はない 

図7 タスクトレイにアイコンが表示される(一番左のアイコン)
図7 タスクトレイにアイコンが表示される(一番左のアイコン)

 以下、順に解説していきます。

システムトレイが利用できるかの判定

 まず、システムトレイアイコンの表示を行う前に以下の構文を使ってシステムがアイコン表示に対応しているか判定します。

if (Shell.supportsSystemTrayIcon) {
    //アイコン表示が行えるので必要な処理を記述         
}

 ShellのsupportsSystemTrayIconを判定することでシステムがシステムトレイアイコンの表示に対応しているか調べることができます。これを行うことで、利用できないシステムでアイコンを設定してしまうことがなくなります。

アイコンの準備

 アイコンはBitmapDataであればよいのですが、16×16のサイズのものをあらかじめ用意しておくのがよいでしょう。

 表示させるアイコンは、以下のようにして[Embed]メタデータタグを使用して、埋め込みイメージを変数に関連付けておきます。

[Embed(source="assets/icons/AIRApp_16.png")]
private var icon16:Class;

SystemTrayIconクラスを使用する

 システムトレイアイコンを表示するにはSystemTrayIconクラスを使用します。

表 今回使用するSystemTrayIconクラスのメソッド/プロパティ
メソッド/プロパティ名 説明
menu システムトレイアイコンを右クリックした際に表示されるメニュー
tooltip システムトレイアイコンにマウスオーバーした際に表示されるtooltipの内容
bitmaps システムトレイに表示させるアイコンをBitmapDataオブジェクトの配列として設定

 SystemTrayIconは以下のような形でインスタンスにすることはできません。

var icon:SystemTrayIcon = new SystemTrayIcon();

 そのため、SystemTrayIconを利用するには以下のようにします。

systemTrayIcon = Shell.shell.icon as SystemTrayIcon;

アイコンを設定

 bitmapsにアイコンとして表示するBitmapDataを配列で渡します。今回の作例では複数サイズに対応する必要はないので配列には1つしか入れていません。ここまで行うと、システムトレイにアイコンが表示されます。

iconBitmap = (new icon16() as BitmapAsset).bitmapData;
systemTrayIcon.bitmaps = [iconBitmap];

 さらに次ページでは、システムトレイでtooltipやメニューを表示し、アイコンをアニメーションさせる方法について解説します。

1-2-3

 INDEX
Apollo改めAIRプログラミング入門(4)
  Page1
Adobe AIRのベータ2版が公開!
AIR ベータ2からの変更点を押さえておこう
Page2
システムトレイにアイコンを表示するには?
  Page3
システムトレイアイコンのtooltipとメニューを表示
アイコンをアニメーションさせて分かりやすくする
システムトレイを活用して使い勝手を向上させる




HTML5 + UX フォーラム 新着記事
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)

注目のテーマ

HTML5+UX 記事ランキング

本日 月間