株式会社ライブキャスト

Mac上でAIRアプリを起動するとDockにそのアプリケーションのアイコンが表示されます。このアイコンをカスタマイズすることができます。

AIRアプリにはそのアプリケーションの設定情報を記載するADFファイルというのがあります。Flex Builder3.0を使用している場合、プロジェクト内のsrcディレクトリに<プロジェクト名>-app.xmlという名前のファイルがあります。それがADFファイルです。ここではサイズの異なる4種類のアイコン（16×16、32×32、48×48、128×128ピクセル）を指定することができます。

以下、ADFファイルの抜粋です。

<?xml version="1.0" encoding="UTF-8"?>
<application xmlns="http://ns.adobe.com/air/application/1.5">
<id>DockIconApp</id>
<filename>DockIconApp</filename>
<name>DockIconApp</name>
<version>v1</version>
<initialWindow>
<content>[この値は Flex　Builder の出力ファイル app.xml　に上書きされます]</content>
</initialWindow>
<icon>
<image16x16>assets/AIRApp_16.png</image16x16>
<image32x32>assets/AIRApp_32.png</image32x32>
<image48x48>assets/AIRApp_48.png</image48x48>
<image128x128>assets/AIRApp_128.png</image128x128>
</icon>
</application>

今回は以下の4ファイルを使用しました。これらの画像はFlex SDKの中に同梱されています。
AIRApp_16.png

AIRApp_32.png

AIRApp_48.png

AIRApp_128.png

MacでAIRアプリを起動した際には、ADFファイルに指定したアイコンがDockに表示されます。

DockアイコンをADFファイルに記載したもの以外にしたい場合や、アニメーションさせたい場合には、自分で実装するしかありません。

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

private function onInit():void {
if (NativeApplication.supportsDockIcon) {
var bitmap:BitmapData = (new icon128() as BitmapAsset).bitmapData;
var dockIcon:DockIcon =
NativeApplication.nativeApplication.icon as DockIcon;
dockIcon.bitmaps = [bitmap];
}
}
]]>
</mx:Script>
<mx:Button label="Animation" id="btnAnimation"/>
</mx:WindowedApplication>

Dockに表示されるとこんな感じになります。
※　ここで使用しているアイコンはAIRApp_128.pngの色彩を加工した画像です。

ポイントは10行目のif文

if (NativeApplication.supportsDockIcon) {

で、プラットフォームがDockIconをサポートしているかを判定しているところと、12〜13行目で

var dockIcon:DockIcon = NativeApplication.nativeApplication.icon as DockIcon;

NativeApplicationクラスのiconプロパティからDockIconオブジェクトを取得しているところです。このプロパティはプラットフォームによって値の型が異なります。

ちなみに、Windowsのタスクトレイにアイコン表示させるとこんな感じ。

ソースは以下の通り。

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

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

private function onInit():void {
if (NativeApplication.supportsDockIcon) {
var bitmap128:BitmapData = (new icon128() as BitmapAsset).bitmapData;
var dockIcon:DockIcon =
NativeApplication.nativeApplication.icon as DockIcon;
dockIcon.bitmaps = [bitmap128];
}
else if (NativeApplication.supportsSystemTrayIcon) {
var bitmap16:BitmapData = (new icon16() as BitmapAsset).bitmapData;
var trayIcon:SystemTrayIcon =
NativeApplication.nativeApplication.icon as SystemTrayIcon;
trayIcon.bitmaps = [bitmap16];
}
}
]]>
</mx:Script>
<mx:Button label="Animation" id="btnAnimation"/>
</mx:WindowedApplication>

ここでのポイントは19行目の

else if (NativeApplication.supportsSystemTrayIcon) {

で、SystemTrayIconをサポートしているかを判別して、21〜22行目で

var trayIcon:SystemTrayIcon = NativeApplication.nativeApplication.icon as SystemTrayIcon;

NativeApplicationクラスのiconプロパティからSystemTrayIconオブジェクトを取得しているところです。Macの場合はDockIconでしたが、Windowsの場合はSystemTrayIconとなりますので要注意です。

これで、Dockアイコンをカスタマイズすることが出来ました！次はDockアイコンのアニメーションに挑戦したいと思います。

■関連記事へのリンク
flashcast：フリーで働くITエンジニア集団のブログ: Macで動くAIRアプリのカスタマイズしたDockアイコンをアニメーションさせる方法(2009/2/3追記）
flashcast：フリーで働くITエンジニア集団のブログ: Macで動くAIRアプリのカスタマイズしたDockアイコンを回転させる方法　〜概要編〜(2009/2/3追記）
flashcast：フリーで働くITエンジニア集団のブログ: Macで動くAIRアプリのカスタマイズしたDockアイコンを回転させる方法　〜実装編〜(2009/2/3追記）
flashcast：フリーで働くITエンジニア集団のブログ: Macで動くAIRアプリのカスタマイズしたDockアイコンを縮小／拡大させる方法(2009/2/4追記)