ウィンドウの作成

Adobe AIR 1.0 およびそれ以降

ウィンドウの初期化プロパティの指定
初期アプリケーションウィンドウの作成
NativeWindow の作成
HTML ウィンドウの作成
mx:Window の作成
ウィンドウへのコンテンツの追加
例：ネイティブウィンドウの作成

アプリケーションの最初のウィンドウは AIR によって自動的に作成されますが、必要に応じて任意の追加ウィンドウを作成できます。ネイティブウィンドウを作成するには、NativeWindow コンストラクターメソッドを使用します。

HTML ウィンドウを作成するには、HTMLLoader の createRootWindow() メソッドを使用するか、または HTML ドキュメントから JavaScript の window.open() メソッドを呼び出します。作成されたウィンドウは、表示リストに HTMLLoader オブジェクトを含む NativeWindow オブジェクトとなります。HTMLLoader オブジェクトは、ウィンドウの HTML および JavaScript コンテンツを解釈して表示します。 window.nativeWindow プロパティを使用して、基になる NativeWindow オブジェクトのプロパティに JavaScript からアクセスできます（このプロパティには、AIR アプリケーションサンドボックスで実行されているコードでのみアクセスできます）。

ウィンドウを初期化するときは（最初のアプリケーションウィンドウを含む）、ウィンドウを非表示の状態で作成し、コンテンツのロードまたはグラフィックの更新を実行した後で、ウィンドウを表示することを検討する必要があります。このシーケンスにより、目障りな視覚的変化がユーザーに表示されないようにすることができます。アプリケーションの初期ウィンドウが非表示の状態で作成されるようにするには、アプリケーション記述ファイルで <visible>false</visible> タグを指定します（この値はデフォルトで false になっているので、省略しても構いません）。新しい NativeWindows はデフォルトで非表示になります。HTMLLoader の createRootWindow() メソッドを使用して HTML ウィンドウを作成する場合は、 visible 引数を false に設定します。ウィンドウを表示するには、NativeWindow の activate() メソッドを呼び出すか、 visible プロパティを true に設定します。

ウィンドウの初期化プロパティの指定

デスクトップウィンドウの作成後に、ネイティブウィンドウの初期化プロパティを変更することはできません。このような不変のプロパティとそのデフォルト値は次のとおりです。

プロパティ	デフォルト値
systemChrome	standard
type	normal
transparent	false
owner	null
maximizable	true
minimizable	true
resizable	true

AIR によって作成される初期ウィンドウのプロパティは、アプリケーション記述ファイルで設定します。AIR アプリケーションのメインウィンドウのタイプは、常に normal です（記述ファイルでは、 visible 、 width 、 height などの他のウィンドウプロパティを指定することができますが、これらのプロパティはいつでも変更できます）。

アプリケーションで作成する他のネイティブウィンドウおよび HTML ウィンドウのプロパティは、NativeWindowInitOptions クラスを使用して設定します。ウィンドウを作成するときは、ウィンドウプロパティを指定する NativeWindowInitOptions オブジェクトを、NativeWindow コンストラクター関数または HTMLLoader createRootWindow() メソッドに渡す必要があります。

次のコードでは、UTILITY ウィンドウの NativeWindowInitOptions オブジェクトを作成します。

var options = new air.NativeWindowInitOptions(); 
options.systemChrome = air.NativeWindowSystemChrome.STANDARD; 
options.type = air.NativeWindowType.UTILITY 
options.transparent = false; 
options.resizable = false; 
options.maximizable = false;

transparent が true のとき、または type が lightweight のときに、 systemChrome を standard に設定することはできません。

注意： JavaScript の window.open() 関数で作成するウィンドウの初期化プロパティは設定できません。ただし、独自の HTMLHost クラスを実装することで、これらのウィンドウの作成方法をオーバーライドすることはできます。詳しくは、 window.open() の JavaScript 呼び出しの処理を参照してください。

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

アプリケーションの初期ウィンドウには、標準の HTML ページを使用します。このページは、アプリケーションのインストールディレクトリから読み込まれて、アプリケーションサンドボックスに配置されます。ページは、アプリケーションの初期エントリポイントとして機能します。

アプリケーションを起動すると、AIR はウィンドウを作成し、HTML 環境を設定して、HTML ページを読み込みます。スクリプトを解析したり、エレメントを HTML DOM に追加したりする前に、AIR は、 runtime 、 htmlLoader 、 nativeWindow の各プロパティを、JavaScript の Window オブジェクトに追加します。これらのプロパティを使用して、JavaScript からランタイムクラスにアクセスできます。 nativeWindow プロパティを使用して、デスクトップウィンドウのプロパティやメソッドに直接アクセスできます。

次の例では、HTML で作成された AIR アプリケーションのメインページの基本的な構造を示します。このページは、JavaScript ウィンドウの load イベントを待機してから、ネイティブウィンドウを表示します。

<html> 
    <head> 
        <script language="javascript" type="text/javascript" src="AIRAliases.js"></script> 
        <script language="javascript"> 
            window.onload=init; 
 
            function init(){ 
                window.nativeWindow.activate(); 
            } 
        </script> 
    </head> 
    <body></body> 
</html>

注意：この例で参照されている AIRAliases.js ファイルは、よく使用されるビルトイン AIR クラスに対して便利なエイリアス変数を定義するスクリプトファイルです。このファイルは、AIR SDK の frameworks ディレクトリ内にあります。

NativeWindow の作成

NativeWindow を作成するには、NativeWindowInitOptions オブジェクトを NativeWindow コンストラクターに渡します。

var options = new air.NativeWindowInitOptions(); 
options.systemChrome = air.NativeWindowSystemChrome.STANDARD; 
options.transparent = false; 
var newWindow = new air.NativeWindow(options);

ウィンドウは、 visible プロパティを true に設定すると、または activate() メソッドを呼び出すと表示されます。

ウィンドウが作成されたなら、ステージプロパティと Flash 表示リストの技法を使用して、ウィンドウのプロパティを初期化し、コンテンツをウィンドウに読み込むことができます。

ほとんどの場合は、新しいネイティブウィンドウのステージプロパティ scaleMode を noScale に設定する必要があります（ StageScaleMode.NO_SCALE 定数を使用）。Flash スケールモードは、アプリケーション作成者がアプリケーション表示領域の縦横比を事前に知ることができない状況のために用意されています。スケールモードを使用することで、作成者は、コンテンツのクリッピング、拡大や縮小、または空き領域でのパディングから、最も影響の小さいものを選択できます。表示領域は AIR（ウィンドウフレーム）で制御するので、悪影響を与えることなく、ウィンドウのサイズをコンテンツに、またはコンテンツのサイズをウィンドウに合わせることができます。

HTML ウィンドウのスケールモードは、 noScale に自動的に設定されます。

注意：現在のオペレーティングシステムで許される最大および最小のウィンドウサイズを判別するには、次の静的 NativeWindow プロパティを使用します。

var maxOSSize = air.NativeWindow.systemMaxSize; 
var minOSSize = air.NativeWindow.systemMinSize;

HTML ウィンドウの作成

HTML ウィンドウを作成するには、JavaScript で Window.open() メソッドを呼び出すか、または AIR で HTMLLoader クラスの createRootWindow() メソッドを呼び出します。

セキュリティサンドボックス内の HTML コンテンツは、JavaScript の標準の Window.open() メソッドを使用できます。コンテンツがアプリケーションサンドボックスの外部で実行している場合は、マウスクリックやキー押下などのユーザー操作に対して呼び出すことができるのは、 open() メソッドだけです。 open() を呼び出すと、指定した URL にあるコンテンツを表示するために、システムクロムを使用するウィンドウが作成されます。次に、例を示します。

newWindow = window.open("xmpl.html", "logWindow", "height=600, width=400, top=10, left=10");

注意： ActionScript で HTMLHost クラスを拡張し、JavaScript の window.open() 関数で作成されるウィンドウをカスタマイズできます。 HTMLHost クラスの拡張についてを参照してください。

アプリケーションセキュリティサンドボックス内のコンテンツは、ウィンドウ作成用のさらに強力なメソッドである HTMLLoader.createRootWindow() にアクセスできます。このメソッドを使用すると、新規ウィンドウ用のすべての作成オプションを指定できます。例えば、次の JavaScript コードでは、システムクロムを使用しない最小タイプウィンドウを、300x400 ピクセルのサイズで作成しています。

var options = new air.NativeWindowInitOptions(); 
options.systemChrome = "none"; 
options.type = "lightweight"; 
 
var windowBounds = new air.Rectangle(200,250,300,400); 
newHTMLLoader = air.HTMLLoader.createRootWindow(true, options, true, windowBounds); 
newHTMLLoader.load(new air.URLRequest("xmpl.html"));

注意：新しいウィンドウによって読み込まれたコンテンツがアプリケーションセキュリティサンドボックスの外部にある場合は、ウィンドウオブジェクトには AIR プロパティの runtime 、 nativeWindow 、または htmlLoader はありません。

透明ウィンドウを作成する場合は、そのウィンドウに読み込まれた HTML に埋め込まれている SWF コンテンツは、常に表示されるとは限りません。SWF ファイルを参照するために使用されるオブジェクトまたは埋め込みタグの wmode パラメーターを、 opaque または transparent のどちらかに設定する必要があります。 wmode のデフォルト値は window なので、デフォルトでは、SWF コンテンツは透明ウィンドウに表示されません。どの wmode 値が設定されていようと、PDF コンテンツを透明ウィンドウに表示することはできません（AIR 1.5.2 より前のバージョンでは、SWF コンテンツも透明ウィンドウに表示することはできませんでした）。

createRootWindow() メソッドで作成したウィンドウは、それを開いたウィンドウから独立したままになります。JavaScript Window オブジェクトの parent プロパティと opener プロパティは、 null です。新しいウィンドウを開いたウィンドウは、 createRootWindow() 関数から返る HTMLLoader の参照を使用して、新しいウィンドウの Window オブジェクトにアクセスできます。前記の例のコンテキストでは、ステートメント newHTMLLoader.window は作成されたウィンドウの JavaScript Window オブジェクトを参照します。

注意： createRootWindow() 関数は、JavaScript と ActionScript のどちらからでも呼び出すことができます。

mx:Window の作成

mx:Window を作成するには、mx:Window をルートタグとして使用する MXML ファイルを作成するか、または Window クラスのコンストラクターを直接呼び出します。

次の例では、Window コンストラクターを呼び出して、mx:Window を作成および表示しています。

var newWindow:Window = new Window(); 
newWindow.systemChrome = NativeWindowSystemChrome.NONE; 
newWindow.transparent = true; 
newWindow.title = "New Window"; 
newWindow.width = 200; 
newWindow.height = 200; 
newWindow.open(true);

ウィンドウへのコンテンツの追加

AIR ウィンドウにコンテンツを追加する方法は、ウィンドウのタイプによって異なります。例えば、MXML と HTML では、ウィンドウの基本的なコンテンツを宣言的に定義できます。リソースをアプリケーションの SWF ファイルに埋め込むことも、別のアプリケーションファイルからリソースを読み込むこともできます。Flex、Flash、HTML のコンテンツはいずれも、同時進行で作成し、ウィンドウに動的に追加できます。

SWF コンテンツ、または JavaScript を含む HTML コンテンツを読み込むときは、AIR のセキュリティモデルを考慮する必要があります。アプリケーションセキュリティサンドボックス内のコンテンツ、つまりアプリケーションでインストールされて、app: URL スキームで読み込み可能なコンテンツは、すべての AIR API にアクセスできる完全な権限を持っています。このサンドボックスの外部から読み込まれるコンテンツは、AIR API にアクセスできません。アプリケーションサンドボックスの外部にある JavaScript コンテンツは、JavaScript Window オブジェクトの runtime 、 nativeWindow 、または htmlLoader プロパティを使用できません。

安全なクロススクリプトを可能にするには、サンドボックスブリッジを使用して、アプリケーションコンテンツと非アプリケーションコンテンツの間に制限されたインターフェイスを提供できます。HTML コンテンツでは、アプリケーションのページを非アプリケーションサンドボックスにマップし、そのページのコードが外部コンテンツをクロススクリプトできるようにすることもできます。 AIR のセキュリティを参照してください。

NativeWindow への HTML コンテンツの読み込み

HTML コンテンツを NativeWindow に読み込むには、HTMLLoader オブジェクトをウィンドウステージに追加してから HTML コンテンツを HTMLLoader に読み込むか、または HTMLLoader.createRootWindow() メソッドを使用して HTMLLoader オブジェクトを既に含んでいるウィンドウを作成します。次の例では、ネイティブウィンドウのステージ上の 300 × 500 ピクセルの表示領域に、HTML コンテンツを表示します。

//newWindow is a NativeWindow instance 
var htmlView:HTMLLoader = new HTMLLoader(); 
htmlView.width = 300; 
htmlView.height = 500; 
 
//set the stage so display objects are added to the top-left and not scaled 
newWindow.stage.align = "TL"; 
newWindow.stage.scaleMode = "noScale"; 
newWindow.stage.addChild( htmlView ); 
 
//urlString is the URL of the HTML page to load 
htmlView.load( new URLRequest(urlString) );

HTML ページを Flex アプリケーションに読み込むには、Flex HTML コンポーネントを使用します。

ウィンドウで透明度が使用されている場合（ウィンドウの transparent プロパティが true の場合）は、SWF ファイルを参照するために使用されるオブジェクトまたは埋め込みタグの wmode パラメーターが opaque または transparent のどちらかに設定されていない限り、HTML ファイル内の SWF コンテンツは表示されません。 wmode 値のデフォルトは window なので、デフォルトでは、SWF コンテンツは透明ウィンドウには表示されません。どの wmode 値が使用されていようと、PDF コンテンツは透明ウィンドウには表示されません。

また、HTMLLoader コントロールが拡大／縮小または回転されている場合、または HTMLLoader の alpha プロパティが 1.0 以外の値に設定されている場合、SWF コンテンツと PDF コンテンツのどちらも表示されません。

HTML ウィンドウ上のオーバーレイとしての SWF コンテンツの追加

HTML ウィンドウは NativeWindow インスタンス内に含まれるので、表示リストでは HTML レイヤーの上または下のどちらにでも、Flash 表示オブジェクトを追加できます。

HTML レイヤーの上位に表示オブジェクトを追加するには、 window.nativeWindow.stage プロパティの addChild() メソッドを使用します。 addChild() メソッドは、ウィンドウ内の既存のすべてのコンテンツより上のレイヤーに、コンテンツを追加します。

HTML レイヤーより下位に表示オブジェクトを追加するには、 window.nativeWindow.stage プロパティの addChildAt() メソッドを使用し、 index パラメーターに値 0 を渡します。0 インデックスにオブジェクトを配置すると、HTML の表示を含む既存のコンテンツが 1 レイヤーだけ上に移動し、新しいコンテンツが最下位に挿入されます。HTML ページより下位のレイヤーにあるコンテンツを表示するには、 HTMLlLoader オブジェクトの paintsDefaultBackground プロパティを false に設定する必要があります。また、ページのエレメントで背景色が設定されているものはすべて、透明になりません。例えば、ページの body エレメントに背景色を設定すると、ページのすべてのものが透明ではなくなります。

次の例では、Flash 表示オブジェクトをオーバーレイおよびアンダーレイとして HTML ページに追加する方法を示します。この例では、単純な形のオブジェクトを 2 つ作成し、1 つは HTML コンテンツより下位に、もう 1 つは上位に追加します。また、 enterFrame イベントに基づいて図形の位置も更新します。

<html> 
<head> 
<title>Bouncers</title> 
<script src="AIRAliases.js" type="text/javascript"></script> 
<script language="JavaScript" type="text/javascript"> 
air.Shape = window.runtime.flash.display.Shape; 
 
function Bouncer(radius, color){ 
    this.radius = radius; 
    this.color = color; 
 
    //velocity  
    this.vX = -1.3; 
    this.vY = -1; 
 
    //Create a Shape object and draw a circle with its graphics property 
    this.shape = new air.Shape();     
    this.shape.graphics.lineStyle(1,0); 
    this.shape.graphics.beginFill(this.color,.9); 
    this.shape.graphics.drawCircle(0,0,this.radius); 
    this.shape.graphics.endFill(); 
     
    //Set the starting position 
    this.shape.x = 100; 
    this.shape.y = 100; 
 
 
    //Moves the sprite by adding (vX,vY) to the current position 
    this.update = function(){ 
        this.shape.x += this.vX; 
        this.shape.y += this.vY; 
         
        //Keep the sprite within the window 
        if( this.shape.x - this.radius < 0){  
            this.vX = -this.vX; 
        } 
        if( this.shape.y - this.radius < 0){ 
            this.vY = -this.vY; 
        } 
        if( this.shape.x  + this.radius > window.nativeWindow.stage.stageWidth){ 
            this.vX = -this.vX; 
        } 
        if( this.shape.y  + this.radius > window.nativeWindow.stage.stageHeight){ 
            this.vY = -this.vY; 
        } 
         
    }; 
} 
 
function init(){ 
    //turn off the default HTML background 
    window.htmlLoader.paintsDefaultBackground = false; 
    var bottom = new Bouncer(60,0xff2233); 
    var top = new Bouncer(30,0x2441ff); 
 
    //listen for the enterFrame event 
    window.htmlLoader.addEventListener("enterFrame",function(evt){ 
        bottom.update(); 
        top.update(); 
    }); 
     
    //add the bouncing shapes to the window stage 
    window.nativeWindow.stage.addChildAt(bottom.shape,0); 
    window.nativeWindow.stage.addChild(top.shape); 
} 
</script> 
<body onload="init();"> 
<h1>de Finibus Bonorum et Malorum</h1> 
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium 
doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis 
et quasi architecto beatae vitae dicta sunt explicabo.</p> 
<p style="background-color:#FFFF00; color:#660000;">This paragraph has a background color.</p> 
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis 
praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias 
excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui 
officia deserunt mollitia animi, id est laborum et dolorum fuga.</p> 
</body> 
</html>

この例では、AIR において JavaScript と ActionScript の間にある境界を越える、若干高度な技法の初歩的な概要について説明しています。ActionScript の表示オブジェクトの使用に関する知識がない場合は、『 ActionScript 3.0 開発ガイド 』の表示のプログラミングを参照してください。

注意： JavaScript Window オブジェクトの runtime、nativeWindow、htmlLoader の各プロパティにアクセスするには、HTML ページをアプリケーションディレクトリから読み込む必要があります。これは、HTML ベースのアプリケーションのルートページには常に該当しますが、他のコンテンツについては該当しない場合があります。また、アプリケーションサンドボックス内であってもフレームに読み込まれたドキュメントはこれらのプロパティを受け取りませんが、親ドキュメントのプロパティにはアクセスできます。

例：ネイティブウィンドウの作成

次の例では、ネイティブウィンドウの作成方法を示します。

function createNativeWindow() { 
    //create the init options 
    var options = new air.NativeWindowInitOptions(); 
    options.transparent = false; 
    options.systemChrome = air.NativeWindowSystemChrome.STANDARD; 
    options.type = air.NativeWindowType.NORMAL; 
     
    //create the window 
    var newWindow = new air.NativeWindow(options); 
    newWindow.title = "A title"; 
    newWindow.width = 600; 
    newWindow.height = 400; 
     
    //activate and show the new window 
    newWindow.activate(); 
}