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

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

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


システムトレイアイコンのtooltipとメニューを表示

 アイコンが表示されるようになったら、次はtooltipとメニューを表示しましょう。

tooltipの利用

 SystemTrayIconクラスのtooltipプロパティを利用します。以下のように記述することによって実現できます。

systemTrayIcon.tooltip
= "SystemTrayIconExample";

 サンプルを実行し、アイコン上にマウスカーソルを持っていくと、図8のように表示されます。

図8 tooltipの表示
図8 tooltipの表示

 この例では、単純にアプリ名を入れていますが、例えばメールクライアントやRSSリーダーを作った場合には未読件数や取得したフィード数を表示するなどアプリの状態表示にも利用できるでしょう。

メニューの利用

 SystemTrayIconクラスのmenuプロパティを利用します。以下のようなソースコードでプログラムを作成し、アイコン上で右クリックをすると、図9のようにメニューが表示されます。

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();
}

図9 メニューの表示
図9 メニューの表示

 この例では、「元に戻す」「最大化」「最小化」「終了」の4つの機能をメニューに表示しています。メニューを設定すれば、システムトレイアイコンからアプリケーションの制御を行うことができるようになります。システムトレイにアイコンを表示するのであれば、このメニューからある程度アプリケーションの操作を行えるようにしておくと、使い勝手が向上するでしょう。

アイコンをアニメーションさせて分かりやすくする

 システムトレイアイコンにはbitmapsに設定したBitmapDataが表示されるわけですが、この値を連続して変更することでアイコンをアニメーションさせることもできます。

 以下の例では、連続してBitmapDataを書き換えることで図10のようにアイコンをアニメーションさせています。

private var newIconBitmap:BitmapData;
private var matrix:Matrix;
private var rectangle:Rectangle;

private function iconAnimation():void {
    rectangle = new Rectangle(0, 0, 16, 16);
    newIconBitmap = (new icon16() as BitmapAsset).bitmapData;
    addEventListener(Event.ENTER_FRAME,
        iconAnimationEnterFrameHandler);
}
private function iconAnimationEnterFrameHandler(event:Event):void {
    var tempIconBitmap:BitmapData
        = new BitmapData(16, 16, true, 0x00000000);

    matrix = new Matrix(1, 0, 0, 1, 0, -1);
    tempIconBitmap.draw(newIconBitmap, matrix, null, null,
        rectangle);
    matrix = new Matrix(1, 0, 0, 1, 0, 15);
    tempIconBitmap.draw(newIconBitmap, matrix, null, null,
        rectangle);

    newIconBitmap = tempIconBitmap.clone();
    systemTrayIcon.bitmaps = [newIconBitmap];
}

図10 アイコンをアニメーションさせる
図10 アイコンをアニメーションさせる

 EnterFrameイベントを使用して、毎フレームBitmapDataを操作してアイコンをアニメーションさせています。動作させるとアイコンが上方向にスクロールしているように見えます。

 このように、アニメーションさせなくてもアプリケーションの状態によって、アイコンを変更することで利用者に分かりやすい表示を行うことができるでしょう。

システムトレイを活用して使い勝手を向上させる

 以上のように、今回はAIRベータ2版の新機能の中から、電子署名の付け方とシステムトレイアイコンの利用方法を中心に解説しました。

 システムトレイアイコンを利用することで、常駐型のアプリなどではタスクバーに表示せずにシステムトレイアイコンのみの表示とすることもでき、デスクトップアプリケーションとして使い勝手が向上すると思います。

 AIRもベータ2となりデスクトップアプリケーションとして必要な機能がそろってきましたので、次回は単機能の解説ではなく、いままで紹介した機能のいくつかを利用して1つのアプリケーションを作成しようと思います。

 今回紹介したサンプルのコードはこちらからダウンロードできます。

@IT関連記事


AptanaでAjax・AIR・iPhone用ページの開発を行う
どこまでできる? 無料ツールでWebサイト作成(2) AptanaはAjax開発にも便利な機能を発揮し、Eclipseベースなので、プラグインでさまざまな機能拡張も実現します
リッチクライアント & 帳票」フォーラム 2007/9/13
Officeやファイル共有も!? 米のAdobe Max2007総評
連載:Flash観測所(7) 先ごろ米で開催されたユーザーカンファレンスAdobe Max2007。RIAの今後の方向性を知るうえで非常に重要な発表が今年も山盛りでした
リッチクライアント & 帳票」フォーラム 2007/10/15
デザイナーだけでなく企業ユーザーも取り込むAdobe
連載:Flash観測所(8) Adobe Maxがついに日本でも開催され、日本初披露のものや日本独自のコンテンツ、セッションが登場しました。その模様を凝縮してお届けします
リッチクライアント & 帳票」フォーラム 2007/11/6
電子署名の導入の仕方を教えます
電子署名導入指南
PKIと電子証明書いう言葉は知っているが、関連性は?実際の業務においての利用の仕方や導入を検討するうえでの予備知識を解説する
第1回 電子署名で何が変わる?
第2回 導入プランを立てよう!
第3回 電子署名導入プラン サーバ編その1
第4回 電子署名導入プラン サーバ編その2
最終回 電子署名導入プラン クライアント編
Security&Trust」フォーラム

プロフィール:杉浦 篤史(すぎうら あつし)
クラスメソッド株式会社 エンタープライズサービス部門 Flexエンジニア

FlexやAIRを用いたRIAシステム開発に携わる。業務に特化したカスタムコンポーネント開発を得意としています。 FlexやAIRの開発依頼や転職希望の方はコチラ。最近は会社説明会やセミナーやっています。

1-2-3  

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




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

注目のテーマ

HTML5+UX 記事ランキング

本日 月間