特集:開発者のためのBUILDレポート(前編)

次期Windows 8向け「Metroスタイル・アプリ」とは?

デジタルアドバンテージ 一色 政彦
2011/09/26
Page1 Page2

Metroスタイル・アプリとは?

 前述したとおり、Metroスタイル・アプリは、スタート画面を基点としてMetroスタイルUI上で実行される。例えば次の画面は、典型的なMetroスタイル・アプリである「Socialite」の実行例だ。

典型的なMetroスタイル・アプリの実行例
実行中の「Socialite」はFacebookと統合されたアプリ。

 一般的に、このような外観を持つMetroスタイル・アプリの特徴は、以下のとおりである。

  • タッチ可能端末に最適なUIデザイン
  • 余分な情報を排除した全画面表示
  • システムに管理されるライフタイム
  • Metroスタイル・アプリ間の連携
  • さまざまなアクティベーション方法
  • ライブ・タイル
  • Metroスタイル・アプリ用のストア「Windows Store」

 それぞれの特徴について説明する。

タッチ可能端末(主にタブレット端末)に最適なUIデザイン

 上の画面を見れば分かるように、タップ/クリック可能なコントロール類は指で触れられるほどのサイズになっており、タッチ操作を意識して作られたアプリであることが分かる。

余分な情報を排除した全画面表示

 Metroスタイル・アプリの一番の特徴は、上の画面のように1つのアプリが完全にフルスクリーン表示され、画面全体を占拠することである。これにより、ユーザーはアプリが提供する体験に没入できる(=Immersive)。これは、デスクトップ画面がマルチウィンドウ・システムで複数のアプリを同時に開ける(=気が散りやすい)のと大きく異なる。

 なお、MetroスタイルUIの画面解像度は「1024×768以上」となっており、それ以下の画面解像度にしている場合は、Metroスタイル・アプリは起動できないので注意してほしい。

システムに管理されるライフタイム

 Metroスタイル・アプリは、前述のとおり、1つのアプリが画面全体を占拠する。ほかのアプリを起動すると、そのアプリが画面全体を占拠する。では、前回起動したアプリは実行されたままなのだろうか? 終了してしまったのだろうか?

 実行中のMetroスタイル・アプリは、従来と同じように[Windows タスク マネージャー](Windows Task Manager)で確認できる([Ctrl]+[Shift]+[Esc]キーを押すか、デスクトップ画面のタスクバーの右クリック・メニューから[タスク マネージャーの起動]を実行する)。次の画面は、実際に確認しているところだ。

Metroスタイル・アプリの実行状況の確認([Windows タスク マネージャー])

 一部のアプリに「Suspended」(=一時停止中)と表示されているのが分かる。このように、Metroスタイル・アプリは、ライフタイム(=生存期間)がシステムによって自動的に管理され、未使用で停止可能なものから一時停止される。一時停止されても一定期間、実行再開されなかったアプリはそのまま終了される。この仕様により、タブレット端末などではバッテリの電力消費を節約できる。これはデスクトップ・アプリのライフタイムが、ユーザーにより管理され、起動/終了されるのと大きく異なる。

 Metroスタイル・アプリのライフタイム管理では、主に下記の実行状態の切り替えがある。

  • 実行開始(Activate)
  • 一時停止(Suspend)
  • 実行再開(Resume)
  • 終了(Terminate)

 終了は、一時停止した後に起こるので、アプリに通知されない(そのため、状態の保存などの処理は一時停止の通知の際に行わなければならない)。実行開始/一時停止/実行再開は、アプリにそのイベントが通知されるので、それをハンドルして適切な処理を行う。具体的には、下記のようなコードでイベント処理を行う(JavaScriptの場合。詳しくは後編で説明するが、C++やC#、VBでも記述可能)。

// 実行開始のイベント・ハンドラを登録
Windows.UI.WebUI.WebUIApplication.addEventListener("activated", activatedHandler);
// 実行開始のイベント・ハンドラとなる関数
function activatedHandler(eventArgs) {
  if (eventArgs.kind == Windows.ApplicationModel.Activation.ActivationKind.launch) {
    // 実行開始時の初期化処理や状態復元処理をここに書く
  }
}

// 一時停止のイベント・ハンドラを登録
Windows.UI.WebUI.WebUIApplication.addEventListener("suspending", suspendingHandler);
// 一時停止のイベント・ハンドラとなる関数
function suspendingHandler(eventArgs) {
  // 終了に備えて、一時停止前に状態保存処理をここに書く
}

// 実行再開のイベント・ハンドラを登録
Windows.UI.WebUI.WebUIApplication.addEventListener("resuming", resumingHandler);
// 実行再開のイベント・ハンドラとなる関数
function resumingHandler() {
  // 一時停止された状態では、まだメモリにデータが残っているので、
  // 基本的にはここでは何もしなくてよい
}
実行開始/一時停止/実行再開のイベント・ハンドラのJavaScriptコード例

Metroスタイル・アプリ間の連携

 全画面を占有するMetroスタイル・アプリだが、アプリ間での連携についても、もちろん考慮されている。

 例えば「InkPad」というアプリで絵を描いて、そのスクリーンショットを「Socialite」とうアプリを使ってFacebookに投稿したい場合、次の画面のようにコントロール・メニューから[Share](共有)を選択する。これにより、右側からサイドバー(=「チャーム(Charm)」と呼ぶ)がスライド表示される。[Share]チャーム上で別アプリのアイコンをタップ/クリックすると、画面半分ほどのサイズの別アプリ(この例では「Socialite」)が右側からスライド表示されるので、ここでアプリ間の情報のやり取りを行う。

チャームによるアプリ間の連携

さまざまなアクティベーション方法

 上記のチャームによるアプリ間の共有(Share)のように、Metroスタイル・アプリは、タイルからの起動(Launch)だけでなく、さまざまな実行開始方法(=アクティベーション方法)が提供されている。

 これらの実行開始方法は、「コントラクト(Contract)」という形でアプリに定義する必要がある。下記の3種類の実行開始方法を実装できるコントラクト・テンプレートが用意されている(JavaScript/C++/C#/Visual Basicの場合)。

(1)「ShareTarget」:アプリ間での共有
(2)「Search」:コンテキスト内での検索
(3)「FilePicker」:ファイル選択

 次の画面は、次期「Visual Studio 11」の[新しい項目の追加]ダイアログを開いたところだ。3つのコントラクト・テンプレートを確認できる。

Visual Studio 11の[新しい項目の追加]ダイアログで選択できる3つのコントラクト・テンプレート(C#の例)

 ActivationKind列挙体(Windows.ApplicationModel.Activation名前空間)のヘルプを参照すると、ファイル拡張子からの起動(File)などさまざまなアクティベーション方法が用意されているのが分かる。

 なお、前述した「実行開始のイベント・ハンドラ」では、当然ながらこれらのアクティベーション方法を判別して処理を分岐できる。具体的には下記のJavaScriptコード例のように判別できる。

// 実行開始のイベント・ハンドラを登録
Windows.UI.WebUI.WebUIApplication.addEventListener("activated", activatedHandler);
// 実行開始のイベント・ハンドラとなる関数
function activatedHandler(eventArgs) {

  if (eventArgs.kind == Windows.ApplicationModel.Activation.ActivationKind.launch) {
    // タイルからの起動(Launch)
  }

  else if (eventArgs.kind == Windows.ApplicationModel.Activation.ActivationKind.shareTarget) {
    // アプリ間での共有(ShareTarget)
  }

}
実行開始方法を判別して処理するイベント・ハンドラのJavaScriptコード例

ライブ・タイル(Live Tile)

 スタート画面からMetroスタイル・アプリを起動するためのタイルには、そのタイル上にダイナミックな情報を表示する機能がある。「デスクトップ・ガジェット」をタイル向けに最適化したようなこの機能は、「ライブ・タイル(Live Tile)」と呼ばれる。

 次の画面はライブ・タイルの例だ。上から「Socialite」「天気予報」「株価」となっている。

ライブ・タイルの表示例

 ライブ・タイルでは、アプリが実行中の間はリアルタイムに表示を更新できるが、終了してしまうと、当然ながら更新できない。アプリが動作していない状態でライブ・タイルの表示を更新したい場合には、自前のクラウド・サービスなどから「WNS(Windows Push Notification Services)」によるプッシュ通知を活用する必要がある。

Metroスタイル・アプリ用のストア「Windows Store」

 「Windows Store」とは、iPadやiPhoneにおける「App Store」のことで、一般ユーザーがMetroスタイル・アプリを簡単に購入&インストールできる(開発者から見ると、マイクロソフトによる検証に合格したうえで発行&販売できる)仕組みのことだ。Metroスタイル・アプリは、基本的にこのWindows Store経由でしかインストールできない。そのため、セキュリティ上や品質面での安全性が高まったり、アプリのバージョンアップ作業が簡単になったりするというメリットもあるが、開発者にとっては販売窓口が1つに絞られたり、販売金額の一部を手数料としてマイクロソフトに徴集されたり、アプリの自由な配布ができなくなったりするというデメリットもある(企業向けや開発用にはWindows Storeを経由しなくてもアプリを配布できる「サイドローディング(Side-loading)」の仕組みも提供される予定)。

 Windows Storeはまだ利用可能になっていないので、詳細な内容を確認することはできず、現状では次のように表示される。

Metroスタイル・アプリ用のストア「Windows Store」

 以上、Windows 8のMetroスタイルUI(ユーザー・インターフェイス)と、そこで動作するMetroスタイル・アプリを紹介した。

 次回後編では、Metroスタイル・アプリの実行基盤である「WinRT(Windows Runtime)」の概要と、そのプログラミングの特徴について説明する。end of article

 

 INDEX
  特集:開発者のためのBUILDレポート(前編)
  次期Windows 8向け「Metroスタイル・アプリ」とは?
    1.Windows 8のMetroスタイルUIとデスクトップ画面
  2.Metroスタイル・アプリとは?


Insider.NET フォーラム 新着記事
  • 第2回 簡潔なコーディングのために (2017/7/26)
     ラムダ式で記述できるメンバの増加、throw式、out変数、タプルなど、C# 7には以前よりもコードを簡潔に記述できるような機能が導入されている
  • 第1回 Visual Studio Codeデバッグの基礎知識 (2017/7/21)
     Node.jsプログラムをデバッグしながら、Visual Studio Codeに統合されているデバッグ機能の基本の「キ」をマスターしよう
  • 第1回 明瞭なコーディングのために (2017/7/19)
     C# 7で追加された新機能の中から、「数値リテラル構文の改善」と「ローカル関数」を紹介する。これらは分かりやすいコードを記述するのに使える
  • Presentation Translator (2017/7/18)
     Presentation TranslatorはPowerPoint用のアドイン。プレゼンテーション時の字幕の付加や、多言語での質疑応答、スライドの翻訳を行える
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)

注目のテーマ

Insider.NET 記事ランキング

本日 月間