UWPアプリ開発]本稿では、UWPアプリを全画面モードで表示する方法と、最大化表示/全画面モード/タブレットモードの違いについて解説する。10のユニバーサルWindowsプラットフォーム用のアプリ(以降、UWPアプリ)をデスクトップで使っているときは、従来のデスクトップアプリと同様なウィンドウとして表示される。ゲームなどでは、全画面を使って表示したいこともあるだろう。そこで本稿では、ウィンドウを全画面モードで表示する方法を解説する。#117」からダウンロードできる。10を搭載したスマートフォン)用のUWPアプリを開発するには、以下の開発環境が必要である。Appsバージョン1.1)を使っている。SLAT対応ハードウエアは、モバイルエミュレーターの実行に必要だ。未対応でも、ソースコードのビルドと実機でのデバッグは可能である。対応PCかどうかを判定する方法」を参照。SLAT対応ハードウエアであっても、VM上ではエミュレーターが動作しないことがあるのでご注意願いたい。Mobileエミュレーターを使用しないのであれば、32bit版でもよい。10は「開発者モード」を有効にしておくこと(「設定アプリ」の[更新とセキュリティ]−[開発者向け]で、[開発者モード]ラジオボタンを選択)。2015のXAMLエディターがエラーになる。2015」と呼ばれるリリース、またはそれ以降。UWPアプリ開発におけるデバイスファミリーのバージョン指定としては「10.0.0.0」(Package.appxmanifestファイルのTargetDeviceFamily)である。モバイルエミュレーターを使用しないのであれば、Home版でもよい。本稿に掲載したコードを試すだけなら、無償のExpressエディションやCommunityエディションで構わない。APIのアプリ開発用)。2015(製品版)もマイクロソフトのページから無償で入手できる。Packの日本語版を追加インストールし、[オプション]ダイアログで言語を切り替える。10のページからダウンロードできる。10240」またはそれ以降。プレビュー版のSDKを使うと、Windowsストアには提出できなくなるので注意してほしい。Appsは、2015年9月16日付でバージョン1.1に上がっている。それ以前に開発環境を整えた人は、個別にアップデートする必要がある。Instructions」(英語)を参照。ウィンドウを全画面モードに切り替えるには?ApplicationViewクラス(Windows.UI.ViewManagement名前空間)のTryEnterFullScreenModeメソッドを呼び出せばよい(次のコード)。これはユニバーサルなので、どんなデバイスで呼び出しても構わない。_.GetForCurrentView().TryEnterFullScreenMode()ウィンドウを全画面モードに切り替えるコード(上:C#/下:VB)このコードは、ウィンドウが表示される前に実行してはいけない(例外が出る)。AppクラスのOnLaunchedメソッド内、あるいはそれ以降なら大丈夫なようだ。TryEnterFullScreenModeメソッドは、全画面モードへの切り替えに成功するとtrueを返す。反対に、全画面モードを解除して通常の表示に戻すには、ApplicationViewクラスのExitFullScreenModeメソッドを呼び出せばよい(次のコード)。_.GetForCurrentView().ExitFullScreenMode()ウィンドウの全画面モードを解除するコード(上:C#/下:VB)なお、ウィンドウの現在の状態が全画面モードかどうかは、ApplicationViewクラスのIsFullScreenModeプロパティで判別できる。ApplicationViewクラスには、似た名前のIsFullScreenプロパティもあるので、ご注意願いたい。その相違点は次のようだ。mode)とは何であるか、説明してこなかった。簡単には説明できないからである。上で示したコードを実装したアプリを作ったので、それを使って説明しよう。作ったアプリは次の画像のようなものだ(実際のコードは、別途公開のサンプルをご覧いただきたい)。通常のウィンドウ表示(デスクトップシミュレーター)ウィンドウには二つのテキストボックスが配置してあり、上にはIsFullScreenプロパティの値を、下にはIsFullScreenModeプロパティの値を表示している。その下に二つのボタンがあり、上はTryEnterFullScreenModeメソッドの呼び出し(全画面モードへ切り替え)、下はExitFullScreenModeプロパティの呼び出し(全画面モードの解除)となっている。上の画像は、デスクトップ上での通常サイズのウィンドウ表示だ。IsFullScreenプロパティ/IsFullScreenModeプロパティともfalseになっている。ウィンドウの右上には、右から[閉じる]ボタン/[最大化]ボタン/[最小化]ボタンが並んでいる。タスクバーは自動的に隠す設定にしていないので、表示されている(2段にしてある)。最大化してみよう(全画面モードではない)。ウィンドウ右上の[閉じる]ボタンの左隣にある[最大化]ボタンをクリックして、最大化する(次の画像)。ウィンドウを最大化した(デスクトップシミュレーター)最大化したときは、IsFullScreenプロパティはtrueになるが、IsFullScreenModeプロパティはfalseのままである(=全画面モードではない)。ウィンドウ右上のボタンは、中央の[最大化]ボタンが[元のサイズに戻す]ボタンに切り替わっている。ウィンドウを最大化しても、タスクバーは表示されている(タスクバーを自動的に隠す設定にしていない場合)。次に、TryEnterFullScreenModeメソッドを呼び出して全画面モードに切り替えてみる(次の画像)。ウィンドウを全画面モードに切り替えた(デスクトップシミュレーター)全画面モードではタイトルバーは隠されるのだが、この画像ではタイトルバーを出した状態にしている(マウスを画面の上端にホバーさせるか、タッチ操作で画面上端からスワイプ)。全画面モードでは、タスクバーが隠されてしまう(タスクバーを自動的に隠す設定にしていなくても)。タイトルバーも消えてしまうが、マウスを画面の上端にホバーさせるか、タッチ操作で画面上端からスワイプすると、上の画像のようにタイトルバーが出てくる。タイトルバー右端のボタンもよく見てほしい。中央の[最大化]ボタンが、右上と左下から中央に向かう2本の矢印が描かれたボタンに変化している(=[全画面モード解除]ボタン)。このように、ウィンドウの最大化と全画面モードとは、異なっているのである。ポイントは、全画面モードではタスクバーが隠れてしまうことと、[全画面モード解除]ボタンが表示されることだ。[全画面モード解除]ボタンのクリックと、コードからExitFullScreenModeメソッドを呼び出すことは、同じ結果になる(全画面モードの解除)。全画面モードでは、IsFullScreenプロパティもIsFullScreenModeプロパティも共にtrueになっている。タイトルバーもタスクバーも表示されないので、ゲームなどの全画面を独占したいアプリに適しているのである。それでは、タブレットモードと全画面モードの関係を見てみよう。通常の状態から(次の画像)。通常のタブレットモード(デスクトップシミュレーター)タブレットモードではタイトルバーは隠されるのだが、この画像ではタイトルバーを出した状態にしている(マウスを画面の上端にホバーさせるか、タッチ操作で画面上端からスワイプ)。通常のタブレットモードでは、上の画像のようにタスクバーが出ている(タスクバーを自動的に隠す設定にしていない場合)。タイトルバーは消えてしまうが、マウスを画面の上端にホバーさせるか、タッチ操作で画面上端からスワイプすると、上の画像のようにタイトルバーが出てくる。通常のタブレットモードでのタイトルバー右端にあるのは、[閉じる]ボタンだけだ。通常のタブレットモードでは、IsFullScreenプロパティはtrueになるが、IsFullScreenModeプロパティはfalseである。それでは、TryEnterFullScreenModeメソッドを呼び出して全画面モードに切り替えてみよう(次の画像)。タブレットモードでの全画面モード(デスクトップシミュレーター)タブレットモードではタイトルバーは隠されるのだが、この画像ではタイトルバーを出した状態にしている(マウスを画面の上端にホバーさせるか、タッチ操作で画面上端からスワイプ)。全画面モードに切り替えると、タブレットモードでもタスクバーは隠され(タスクバーを自動的に隠す設定にしていなくても)、[全画面モード解除]ボタンが表示される。IsFullScreenプロパティもIsFullScreenModeプロパティもともにtrueになっている。ところで、全画面モードはモバイルでも有効である。通常の状態からお見せする(次の画像)。通常の表示(モバイルエミュレーター)モバイルでは、通常は上端にステータスバーが表示されている。ステータスバーは不透明である(アプリから変更していない場合)。IsFullScreenプロパティ/IsFullScreenModeプロパティは、どちらもfalseになっている。モバイルでも、TryEnterFullScreenModeメソッドを呼び出すと全画面モードに切り替わる(次の画像)。全画面モード(モバイルエミュレーター)全画面モードでは上端のステータスバーは隠される。モバイルの全画面モードでは、ステータスバーが隠される。[全画面モード解除]ボタンは表示されないので、アプリ側で対応を考慮した方がよいだろう。IsFullScreenプロパティはfalseのままだが、IsFullScreenModeプロパティは、trueになっている。mode)では、タイトルバーもタスクバーも隠され、デスクトップでは画面の右上に[全画面モード解除]ボタンが表示される。全画面モードの切り替えには、ApplicationViewクラスのTryEnterFullScreenModeメソッド/ExitFullScreenModeメソッドを使う。全画面モードかどうかは、ApplicationViewクラスのIsFullScreenModeプロパティで判別できる。メールマガジンをご購読ください。申し込みページへITmediaはアイティメディア株式会社の登録商標です。