次の方法で共有

クイック スタート: アプリの複数のウィンドウの作成 (HTML)

  • [アーティクル]

この記事は、Windows ランタイム アプリを作成する Windows 8.x および Windows Phone 8.x 開発者を対象としています。Windows 10 向けの開発を行っている場合は、 「最新のドキュメント」をご覧ください]

ユーザーが複数の独立した機能を別のウィンドウで表示できるようにして、生産性を高めることができます。 ユーザーは、アプリの一部である 1 つのウィンドウから、そのアプリの別の部分である別のウィンドウにすばやく移動できます。また、複数のウィンドウを並べてその内容を比較することもできます。たとえば、2 つのドキュメントを同時に表示したり、ゲームのスコア ボードとゲームの操作を別のウィンドウに表示したりできます。メール アプリでは、ユーザーが新しいウィンドウにメッセージを開くことができます。ユーザーは複数のウィンドウを使って、新しいメールを作成しながら、受信トレイ内のメッセージを参照できます。

アプリの複数のウィンドウを作成した場合、各ウィンドウは別々に動作します。最近使用したアプリの一覧には、各ウィンドウが個別に表示されます。ユーザーはアプリ ウィンドウの移動、サイズ変更、表示、非表示を個別に行うことができます。また、個別のアプリの場合と同じように各アプリ ウィンドウを切り替えることができます。各ウィンドウは、独自のスレッドと実行コンテキストで動作します。

2 つのウィンドウが開いたメール アプリ

このクイック スタートでは、次の方法を説明します。

  • アプリの新しいウィンドウを作成する

  • 新しいウィンドウにコンテンツを追加する

  • 新しいウィンドウを表示する

  • 1 つのウィンドウから別のウィンドウに切り替える

  • 最近使用したアプリの一覧から消去されたときにウィンドウを閉じる

これは、このクイック スタートの JavaScript バージョンです。XAML のバージョンでの C# については、「クイック スタート: アプリの複数のウィンドウの作成 (XAML)」をご覧ください。

アプリの複数のウィンドウを作成することは、操作ではなく、表示だけのために別の画面にアプリの別のウィンドウを投影することとは異なります。ウィンドウの投影の詳細については、「プロジェクション マネージャーのガイドライン」を参照してください。

必要条件

セカンダリ ページを作成する

  1. ソリューション エクスプローラーで、プロジェクト ノードのショートカット メニューを開き、[追加]、[新しい項目] の順にクリックします。
  2. [新しい項目の追加] ダイアログ ボックスの中央のウィンドウで、[ページ コントロール] を選びます。
  3. [名前] ボックスで、secondaryView などのページの名前を入力し、[追加] ボタンをクリックします。
  4. セカンダリ ページで必要な UI 要素と機能を追加します。詳しくは、「UI のレイアウト」と「複数のウィンドウのガイドライン」をご覧ください。

新しいビューを作成する

MSApp.createNewView を呼び出して、新しいスレッドと、そのスレッドの新しいウィンドウを作成します。スレッドとウィンドウのペアは、ビューと呼ばれます。UI 要素など、このビューで作成する他のオブジェクトは、このスレッドに関連付けられます。

アプリの起動時に最初に作成されるビューは、メイン ビューと呼ばれます。メイン ビューのウィンドウが閉じられると、アプリは終了します。

var newView = MSApp.createNewView("ms-appx:///html/secondaryView.html");

このコードでは、指定したページ、secondaryView が自動的に新しいウィンドウで読み込まれます。

各ウィンドウは独自の実行コンテキストで動作するため、セカンダリ ウィンドウがメイン ウィンドウと通信できるのは、postMessage、または共有ファイルと設定を使った場合のみです。次のコードは、postMessage を使って、ウィンドウのセットアップに必要になる場合がある追加の状態情報を含める方法を示します。

newView.postMessage({ myState: 'My important state'}, thisOrigin);

新しいウィンドウを表示する

スレッドとウィンドウのペアである新しいビューを作成した後は、ApplicationViewSwitcher.TryShowAsStandaloneAsync メソッドを使って新しいウィンドウを表示できます。TryShowAsStandaloneAsync メソッドの viewId パラメーターは、アプリの各ビューを一意に識別する整数です。ビュー ID は、ApplicationView.Id または ApplicationView.GetApplicationViewIdForWindow を使って取得します。

var newView = MSApp.createNewView("ms-appx:///html/secondaryView.html");
newView.postMessage({ myState: 'My important state' }, thisOrigin);
Windows.UI.ViewManagement.ApplicationViewSwitcher.tryShowAsStandaloneAsync(newView.viewId).done(function (viewShown) {

});

ユーザーがアプリの別の部分に移動したときに新しいウィンドウを自動的に開くことは避けてください。新しいウィンドウは、ユーザーの操作によって開かれるようにします。下部のアプリ バーのコマンドなどの UI 要素に TryShowAsStandaloneAsync 呼び出しを追加できます。

1 つのウィンドウから別のウィンドウに切り替える

ユーザーには、セカンダリ ウィンドウからメイン ウィンドウに戻る方法を提供する必要があります。そのためには、ApplicationViewSwitcher.SwitchAsync メソッドを使用します。このメソッドを、切り替え元のウィンドウのスレッドから呼び出し、切り替え先のウィンドウのビュー ID を渡します。

Windows.UI.ViewManagement.ApplicationViewSwitcher.SwitchAsync(viewIdToShow).done();

メール アプリでは、セカンダリ ウィンドウの [戻る] ボタンで SwitchAsync が呼び出されます。メール アプリでは、セカンダリ ウィンドウに含まれるメッセージをユーザーが送信または削除する場合に SwitchAsync を使います。メール アプリは、セカンダリ ウィンドウをメイン メール ウィンドウに置き換えます。

SwitchAsync を使う場合は、ApplicationViewSwitchingOptions の値を指定することで、最初のウィンドウを閉じ、最近使用したアプリの一覧から削除するかどうかを選択できます。

新しいウィンドウを閉じる

セカンダリ ウィンドウは、表示された後、最近使用したアプリの一覧に残っていますが、十分な数の他のアプリをユーザーが起動すると、一覧から消去されます。アプリのウィンドウが少なくとも 1 つ、一覧に残っている場合に、最近使用したアプリの一覧からウィンドウが削除されると、consolidated event が発生します。各ウィンドウはメモリを消費するため、一覧から消去されたウィンドウは閉じることをお勧めします。

Windows.UI.ViewManagement.ApplicationView.getForCurrentView().addEventListener("consolidated", viewConsolidated, false);

function viewConsolidated(e) {
    if (!isMainView) {
        window.close();
    }
}

注  メイン ビューのウィンドウは、閉じられるとアプリが終了するため、閉じないでください。アプリの認定プロセスでは、プログラムを使ってアプリを閉じないことが要求されています。この例のように、メイン ウィンドウではないウィンドウだけを閉じてください。

 

要約と次のステップ

ここでは、アプリの複数のウィンドウを作成し、表示する方法について説明しました。1 つのウィンドウから別のウィンドウに切り替える方法と、アプリ ウィンドウを閉じる方法およびタイミングも説明しました。

プロジェクション マネージャーを使ってアプリの別のウィンドウを別の画面に投影する方法について詳しくは、「プロジェクション マネージャーのガイドライン」を参照してください。

関連トピック

複数のウィンドウのガイドライン

プロジェクション マネージャーのガイドライン

ユニバーサル Windows プラットフォーム (UWP) アプリ用レスポンシブ デザイン 101

複数のビューのサンプル