AIR のネイティブウィンドウの基礎

Adobe AIR 1.0 およびそれ以降

AIR のウィンドウ
ネイティブウィンドウクラス
ネイティブウィンドウのイベントフロー
ネイティブウィンドウのスタイルと動作を制御するプロパティ
表示ウィンドウカタログ

AIR でのネイティブウィンドウの操作に関する簡単な説明およびコード例については、Adobe Developer Connection で次のクイックスタートの記事を参照してください。

AIR には、Flash®、Flex™ および HTML のプログラミング技法を使用してオペレーティングシステムのネイティブウィンドウを作成するための、簡単に使用できるクロスプラットフォームのウィンドウ API が用意されています。

AIR では、アプリケーションの外観を柔軟に開発できます。ユーザーが作成するウィンドウは、標準のデスクトップアプリケーションのようになります。Macintosh で実行する場合は Apple スタイルに一致し、Windows で実行する場合は Microsoft の規則に準拠し、Linux で実行する場合はウィンドウマネージャーに適合します。いずれの場合も、プラットフォーム固有のコード行を含める必要はありません。または、Flex フレームワークで提供されているスキンとして使用できて拡張性のあるクロムを使用して、アプリケーションの実行環境に左右されない独自のスタイルを作成することもできます。さらには、デスクトップに対する透明度とアルファブレンドを完全にサポートするベクトルとビットマップのアートワークを使用して、独自のウィンドウクロムを描画することもできます。矩形のウィンドウに飽きているなら、丸いウィンドウを作成してみてください。

AIR のウィンドウ

AIR では、ウィンドウを操作するための 3 つの API がサポートされています。

ActionScript 指向の NativeWindow クラスは、最下位レベルのウィンドウ API を提供します。NativeWindows は、ActionScript および Flash Professional オーサリングによるアプリケーションで使用します。アプリケーションで使用する目的に特化したウィンドウを作成する場合は、NativeWindow クラスの拡張を検討してください。
HTML 環境では、ブラウザーベースの Web アプリケーションの場合と同じように JavaScript Window クラスを使用できます。JavaScript Window メソッドの呼び出しは、基になるネイティブウィンドウオブジェクトに転送されます。
Flex framework mx:WindowedApplication クラスおよび mx:Window クラスは、NativeWindow クラスに Flex の「ラッパー」を提供します。Flex を使用して作成した AIR アプリケーションを Flex アプリケーションの初期ウィンドウとして使用する必要がある場合、WindowedApplication コンポーネントは Application コンポーネントを置き換えます。

ActionScript ウィンドウ

NativeWindow クラスでウィンドウを作成するときは、Flash Player のステージと表示リストを直接使用します。NativeWindow に表示オブジェクトを追加するには、ウィンドウステージの表示リストまたはステージの別の表示オブジェクトコンテナにオブジェクトを追加します。

HTML ウィンドウ

HTML ウィンドウを作成するときは、HTML、CSS および JavaScript を使用してコンテンツを表示します。表示オブジェクトを HTML ウィンドウに追加するには、そのコンテンツを HTML DOM に追加します。HTML ウィンドウは、NativeWindow の特殊なカテゴリです。AIR ホストでは、基になる NativeWindow インスタンスへのアクセスを提供する nativeWindow プロパティが、HTML ウィンドウで定義されています。このプロパティを使用して、ここで説明する NativeWindow のプロパティ、メソッドおよびイベントにアクセスできます。

注意：また、JavaScript の Window オブジェクトには、 moveTo() や close() など、コンテナウィンドウのスクリプトを作成するためのメソッドもあります。オーバーラップするメソッドを使用できる場合は、どれでも便利なメソッドを使用してかまいません。

Flex フレームワークウィンドウ

Flex フレームワークでウィンドウを作成するときは、通常、MXML コンポーネントを使用してウィンドウを設定します。Flex コンポーネントをウィンドウに追加するには、コンポーネントエレメントをウィンドウの MXML 定義に追加します。また、ActionScript を使用してコンテンツを動的に追加することもできます。mx:WindowedApplication コンポーネントと mx:Window コンポーネントは Flex コンテナとして作られているので、Flex コンポーネントを動的に受け入れることができますが、NativeWindow オブジェクトはできません。必要な場合は、 nativeWindow プロパティを使用して WindowedApplication オブジェクトおよび Window オブジェクトを通して、NativeWindow のプロパティとメソッドにアクセスできます。

初期アプリケーションウィンドウ

アプリケーションの最初のウィンドウは、AIR によって自動的に作成されます。AIR は、アプリケーション記述ファイルの initialWindow エレメントで指定されているパラメーターを使用して、ウィンドウのプロパティとコンテンツを設定します。

ルートコンテンツが SWF ファイルの場合、AIR は NativeWindow インスタンスを作成して、SWF ファイルを読み込み、それをウィンドウステージに追加します。ルートコンテンツが HTML ファイルの場合、AIR は HTML ウィンドウを作成して HTML を読み込みます。

ネイティブウィンドウクラス

ネイティブウィンドウ API には、次のクラスが含まれます。

パッケージ	クラス
flash.display	NativeWindow NativeWindowInitOptions NativeWindowDisplayState NativeWindowResize NativeWindowSystemChrome NativeWindowType
flash.events	NativeWindowBoundsEvent NativeWindowDisplayStateEvent

ネイティブウィンドウのイベントフロー

ネイティブウィンドウは、イベントを送出して、重要な変更が発生しようとしていること、または既に発生したことを、関係するコンポーネントに通知します。多くのウィンドウ関連イベントは、ペアで送出されます。最初のイベントは、変更が発生しようとしていることを警告します。2 番目のイベントは、変更が行われたことを通知します。警告イベントはキャンセルできますが、通知イベントはキャンセルできません。次のシーケンスは、ユーザーがウィンドウの最大化ボタンをクリックすると発生するイベントのフローを示したものです。

NativeWindow オブジェクトが、 displayStateChanging イベントを送出します。
登録済みのどのリスナーもイベントをキャンセルしない場合、ウィンドウは最大化します。
NativeWindow オブジェクトが、 displayStateChange イベントを送出します。

さらに、NativeWindow オブジェクトはウィンドウのサイズと位置に関連する変更についてのイベントも送出します。これらの関連する変更については、警告イベントは送出されません。次のような関連イベントがあります。
1. 最大化操作によりウィンドウの左上隅の位置が移動した場合、 move イベントが送出されます。
2. 最大化操作によりウィンドウのサイズが変更された場合、 resize イベントが送出されます。
NativeWindow オブジェクトは、ウィンドウを最小化する、元のサイズに戻す、閉じる、移動する、サイズ変更するときも、同様のシーケンスでイベントを送出します。

警告イベントは、ウィンドウクロムまたはその他のオペレーティングシステムによって制御されるメカニズムを通して変更が開始されるときにのみ、送出されます。ウィンドウメソッドを呼び出してウィンドウのサイズ、位置、表示状態を変更すると、ウィンドウは変更を通知するイベントのみを送出します。必要な場合は、ウィンドウの dispatchEvent() メソッドを使用して警告イベントを送出した後、警告イベントがキャンセルされたかどうかを確認してから、変更を継続できます。

ウィンドウ API のクラス、メソッド、プロパティおよびイベントについて詳しくは、『 Adobe Flash Platform 用 ActionScript 3.0 リファレンスガイド』を参照してください。

ネイティブウィンドウのスタイルと動作を制御するプロパティ

ウィンドウの基本的な外観と動作は、次のプロパティが制御します。

type
systemChrome
transparent
owner

ウィンドウを作成するときは、ウィンドウコンストラクターに渡す NativeWindowInitOptions オブジェクトで、これらのプロパティを設定します。AIR は、初期アプリケーションウィンドウのプロパティを、アプリケーション記述子から読み取ります（ただし、 type プロパティはアプリケーション記述子では設定できず、常に normal に設定されます）。ウィンドウの作成後に、プロパティを変更することはできません。

これらのプロパティの設定の中には、同時に指定できないものがあります。例えば、 transparent が true のとき、または type が lightweight のときには、 systemChrome を standard に設定することはできません。

ウィンドウタイプ

AIR のウィンドウタイプでは、ネイティブオペレーティングシステムの chrome 属性と visibility 属性を結合して、ウィンドウの 3 つの機能タイプを作成します。コードでタイプ名を参照するには、NativeWindowType クラスで定義されている定数を使用します。AIR には次のウィンドウタイプがあります。

型	説明
normal	一般的なウィンドウです。normal ウィンドウは、フルサイズスタイルのクロムを使用し、Windows のタスクバーおよび Mac OS X のウィンドウメニューに表示されます。
utility	ツールパレットです。utility ウィンドウはスリムなバージョンのシステムクロムを使用し、Windows のタスクバーおよび Mac OS X のウィンドウメニューには表示されません。
lightweight	lightweight ウィンドウはクロムを持たず、Windows のタスクバーおよび Mac OS-X のウィンドウメニューには表示されません。また、lightweight ウィンドウには、Windows のシステムメニュー（Alt + Space）がありません。lightweight ウィンドウは、通知バブルや、短時間だけ表示される領域を開くコンボボックスなどのコントロールに適しています。lightweight の `type` を使用するときは、 `systemChrome` を `none` に設定する必要があります。

ウィンドウクロム

ウィンドウクロムは、ユーザーがデスクトップ環境内のウィンドウを操作できるようにする一連のコントロールです。クロムエレメントには、タイトルバー、タイトルバーボタン、ボーダー、サイズ変更グリップなどがあります。

システムクロム

systemChrome プロパティには、 standard または none を設定できます。ユーザーのオペレーティングシステムによって作成およびスタイル設定される標準コントロールのセットをウィンドウで使用するには、 standard システムクロムを選択します。ウィンドウに独自のクロムを使用するには、 none を選択します。コードでシステムクロムの設定を参照するには、NativeWindowSystemChrome クラスで定義されている定数を使用します。

システムクロムは、システムによって管理されます。アプリケーションでは、コントロール自体に直接アクセスすることはできませんが、コントロールが使用されるときに送出されるイベントには対応できます。ウィンドウに標準のクロムを使用する場合は、 transparent プロパティを false に設定し、 type プロパティを normal または utility に設定する必要があります。

Flex クロム

Flex の WindowedApplication コンポーネントまたは Window コンポーネントを使用する場合は、システムクロムまたは Flex フレームワークで提供されるクロムをウィンドウで使用できます。Flex クロムを使用するには、ウィンドウの作成に使用する systemChrome プロパティを none に設定します。mx コンポーネントではなく Flex 4 spark コンポーネントを使用する場合は、Flex クロムを使用するためにスキンクラスを指定する必要があります。ビルトインスキンを使用するか、または独自のスキンを指定できます。次の例では、ビルトインの spark の WindowedApplication スキンクラスを使用してウィンドウクロムを提供する方法を示します。

<?xml version="1.0" encoding="utf-8"?> 
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
xmlns:s="library://ns.adobe.com/flex/spark" 
xmlns:mx="library://ns.adobe.com/flex/mx"> 
<fx:Style> 
@namespace "library://ns.adobe.com/flex/spark"; 
WindowedApplication 
{ 
    skinClass:ClassReference("spark.skins.spark.SparkChromeWindowedApplicationSkin"); 
} 
</fx:Style> 
</s:WindowedApplication>

詳しくは、『Using Flex 4』の「About the AIR window containers」の「 Controlling window chrome 」を参照してください。

カスタムクロム

システムクロムを使用しないでウィンドウを作成する場合は、独自のクロムコントロールを追加して、ユーザーとウィンドウの間の対話を処理する必要があります。また、透明で非矩形のウィンドウを作成してもかまいません。

mx:WindowedApplication または mx:Window コンポーネントでカスタムクロムを使用するには、 showFlexChrome スタイルを false に設定する必要があります。そうしないと、Flex によって独自のクロムがウィンドウに追加されます。

ウィンドウの透明度

ウィンドウとデスクトップまたは他のウィンドウとのアルファブレンドを可能にするには、 transparent プロパティを true に設定します。 transparent プロパティは、ウィンドウを作成する前に設定する必要があり、変更することはできません。

透明なウィンドウには、デフォルトの背景はありません。アプリケーションによって描画されたオブジェクトを含まないウィンドウ領域は表示されません。表示されたオブジェクトのアルファ設定が 1 未満の場合は、同じウィンドウ内の他の表示オブジェクト、他のウィンドウ、デスクトップなど、オブジェクトの下にあるすべてのものが透けて見えます。

ボーダーが不規則な形のウィンドウ、または「フェードアウト」するウィンドウや不可視のウィンドウを作成するには、透明なウィンドウが便利です。ただし、大きいアルファブレンド領域のレンダリングには時間がかかる場合があるので、この効果は控えめに使用する必要があります。

重要： Linux の場合、マウスイベントは完全に透明なピクセルを通過できません。完全に透明で面積が広いウィンドウを作成すると、見えないウィンドウによってユーザーの操作がブロックされ、デスクトップ上にある他のウィンドウやアイテムがアクセス不能になるため、望ましくありません。Mac OS X および Windows の場合、マウスイベントは完全に透明なピクセルを通過します。

透明度は、システムクロムを使用するウィンドウでは使用できません。さらに、HTML 内の SWF コンテンツと PDF コンテンツは、透明ウィンドウに表示されない場合があります。詳しくは、 HTML ページに SWF コンテンツまたは PDF コンテンツを読み込む場合の考慮事項を参照してください。

ウィンドウの透明度が使用可能かどうかは、静的な NativeWindow.supportsTransparency プロパティによって報告されます。透明度がサポートされていない場合、アプリケーションの背景は黒になります。この場合、アプリケーションの透明領域は不透明の黒として表示されます。このプロパティがテストで false になった場合のために、フォールバックを用意することをお勧めします。例えば、警告ダイアログをユーザーに表示するか、矩形の不透明なユーザーインターフェイスを表示することができます。

Windows および Macintosh オペレーティングシステムでは、常に透明度がサポートされます。Linux オペレーティングシステムでのサポートには、合成ウィンドウマネージャーが必要ですが、合成ウィンドウマネージャーがアクティブな場合でも、ユーザーの表示オプションまたはハードウェア構成により、透明度は使用できません。

MXML アプリケーションウィンドウでの透明度

デフォルトでは、MXML ウィンドウの背景は、 transparent としてウィンドウを作成した場合でも不透明です（透明効果はウィンドウの角でわかります）。ウィンドウの背景を透明にするには、スタイルシートまたはアプリケーションの MXML ファイルに含まれる <mx:Style> エレメントで、背景の色とアルファ値を設定します。例えば、次のスタイル宣言を使用すると、背景は少しだけ透明な緑色のシェードになります。

WindowedApplication 
{ 
    background-alpha:".8"; 
    background-color:"0x448234"; 
}

HTML アプリケーションウィンドウでの透明度

デフォルトでは、HTML ウィンドウおよび HTMLLoader オブジェクトに表示される HTML コンテンツの背景は、コンテナウィンドウが透明であっても不透明です。HTML コンテンツに表示されるデフォルトの背景をオフにするには、 paintsDefaultBackground プロパティを false に設定します。次の例では、HTMLLoader を作成し、デフォルトの背景をオフにしています。

var htmlView:HTMLLoader = new HTMLLoader(); 
htmlView.paintsDefaultBackground = false;

この例では、JavaScript を使用して HTML ウィンドウのデフォルトの背景をオフにしています。

window.htmlLoader.paintsDefaultBackground = false;

HTML ドキュメント内のエレメントに背景色を設定すると、そのエレメントの背景は透明ではなくなります。透明度（または不透明度）の値の部分的な設定は、サポートされていません。ただし、透明な PNG 形式のグラフィックをページまたはページエレメントの背景として使用することで、同じような視覚効果を得ることができます。

ウィンドウの所有権

1 つのウィンドウは、1 つ以上の他のウィンドウを所有できます。所有されているウィンドウは、常にマスターウィンドウの前面に表示され、マスターウィンドウと共に最小化と復元が実行され、マスターウィンドウが閉じられると一緒に閉じられます。ウィンドウの所有権を他のウィンドウに転送したり、削除したりすることはできません。複数のウィンドウが同じ 1 つのウィンドウを所有することはできませんが、1 つのウィンドウが複数のウィンドウを所有することはできます。

ウィンドウの所有機能を使用することで、ツールパレットやダイアログに使用されるウィンドウの管理が簡単になります。例えば、ドキュメントウィンドウに関連する保存ダイアログを表示する場合、ドキュメントウィンドウを保存ダイアログの所有者として設定しておくことによって、自動的にドキュメントウィンドウの前面にダイアログを表示し続けることができます。