[Metro Style] #Win8 #Metro スタイルの画面を見てみよう

年が明けて、 なんだか慌ただしく日々を送っているうちに、 あっというまに1月も終わり。 せめて1本くらいはブログ記事を書いとかないとね! f(^^;

---

 
Windows 8 と Windows Store のβ版が、 もうしばらくすると (2月末頃と言われてます) 公開されます。

昨秋の Developer Preview 版は見送ったけど今度のβは試してみようか、 と考えている人も多いことでしょう。 そこで、 Windows 8 の新しい UI である Metro スタイルのプログラムを作るための情報を、 まとめていきたいと思います。

まず最初は、 新しい Metro スタイルの画面をざっくり見てみるところから始めましょう。

※ この記事で紹介する画面は、 Windows 8 Developer Preview のものです。 将来のβ版や正式版とは異なります。
※ Windows Store については、 BUILD 2011 でのセッション APP-121T "Introducing the Windows Store" を参照。 (日本語訳された PowerPoint のスライド資料 「Windows Store の概要」 → pptx , オンライン閲覧 )

 
◆ Windows 8 のスタート画面

Windows 8 にログオンすると、 この画面が現れます。

Windows 95 から続いてきたスタートボタンやタスクバーは、 どこへ行った～っ!? (@@; (→答: この画面では左下に「デスクトップ」のタイルがある)

ともあれ、 これが新しい Metro スタイルの 「スタートメニュー」 ということになります。 タブレット PC を想定した、 タッチ操作が基本になります。
なおこの画面は、 Visual Studio 11 Express (Developer Preview) に付属の、 タブレット PC エミュレーターのものです。 画面下方、 中央にあるボタンが 「Windows キー」 で、 通常のキーボードの Windows キーと同様の役割をします。

画面には、 四角の大きなアイコン (「タイル」 と呼ぶ) が並んでいます。 タイルをタッチ (マウスでは1クリック) すると、 そのアプリが全画面で起動します。

 
◆ アプリケーションの起動

たとえば、 スタート画面の右下にある水色のタイルは "Weather" アプリケーションです。 これをタッチして起動してみます。
すると、 まずスプラッシュスクリーンがしばらく表示されます。

§ スプラッシュスクリーンにはプログラミングは不要。 画像を用意して、 プロジェクトのプロパティページで設定するだけ。
§ メイン画面のオブジェクトが作られると、 スプラッシュスクリーンは消えて、 プログラムに制御が渡されます。 そこから最初の画面表示までに時間が掛かるようなら、 プログラムで進行状況リングを出すなどしなければなりません。

数秒するとスプラッシュスクリーンが消えて、 アプリの画面が現れます。

Metro スタイルでは、 タイトルバーもメニューもありません。 じつにシンプルな画面です。

 
◆ アプリケーションの切り替え

Windows キーを押すと、 スタート画面に戻ります。

今まで使っていたアプリは、 一時停止状態になっています。

§ プログラムでは OnSuspending() イベントハンドラーが呼び出されます。 5秒以内にデータ保存処理を終えなければいけません。

別のタイルをタッチして、 そのアプリケーションを使います。
あるいは、 もう一度 Windows キーを押すと、 先ほど使っていたアプリ画面に戻ります。 このときは、 スプラッシュスクリーンは表示されません。
※ スタート画面に戻ってから他のアプリを使っていたりしてしばらく時間が経つと、 前に使っていたプログラムは完全に消えています。 このときは、 またスプラッシュスクリーンが表示されますが、 その後で前回の画面がちゃんと表示されます。

§ 一時停止後、 他のアプリが使われるなどしてリソースが不足してくると、 一時停止されていたプログラムは終了されます。 この時、 プログラムでは何もできません。 つまり、 一時停止されるときに、 復元するために必要な処理は全部完了させておかねばなりません。
§ [X] ボタンのクリックでプログラムを終了する、 というお作法は Metro スタイルにはありません。 ユーザーは、 ただスタート画面に戻すだけです。 スタート画面に切り換えられるのを防ぐ手だてもありません (たぶん)。

アプリケーションを切り替えるには、 Windows キーを使う以外に、 画面の左端から右へエッジからスワイプ (一本の指(一般的に親指)で画面の端に触り、触ったまま弾くように動かす) する方法もあります (マウスでは、 画面の左端 (おそらく1ドットしか幅が無い) をクリックする)。
また、左端からゆっくりスライド(一本の指で触り、触ったまま動かす)すると前の画面の縮小版が現れるので、 もっとスライドさせて、 横方向の4分の1あたりまで来てから指を離すと、 「スナップモード」 になり、 二つの画面を同時に表示できる (…はずです。 --- DP 版のエミュレーターでは未対応っぽいorz )
※ スワイプ (swipe) --- 磁気カードをリーダーに通す操作を "swipe" と言うらしいです。

ところで、 スタート画面の画像を 2枚載せましたが、 違いがあることに気付きましたでしょうか?
タイルの幾つかは、 その中の表示が変わってます (ライブタイル)。 アプリケーションを使っていない時でも、 有用な情報をタイルに表示してくれるのです。

§ プログラムからタイルの表示パターンを指定し、 表示する文字や画像を与えて API を呼び出すと、 Windows 側で勝手に表示してくれます。 最大で5つまで (それ以上登録すると、 古いものから捨てられる)。
§ 2つめのタイルに情報を表示することも可能。 ただし2つめのタイルを出す (「ピン止めする」) のは、 ユーザーの操作による。

アプリケーション開発者の視点からは、 タイルはとても重要です。

• スタート画面に載せてもらう (Store からインストールしてもらう) ことが第1関門。
  載せてもらえなければ、 使ってもらえません。
• スタート画面でより良い場所に移してもらうことが第2関門。
  端っこに置かれたままでは、 忘れ去られるか、 タイルを整理するときに捨てられるかです。 どうやってユーザーの興味を引き続けるか?
• かといって、 タイルがあまりにうるさいようでも、 嫌われて捨てられてしまいます。

 
◆ アプリバー

従来のツールバーに変わるのが、 画面下端のアプリバー (App Bar) です。

画面下端から上へエッジスワイプ (マウスでは空いている所で右クリック) すると出てきます。 アプリケーションによっては、 出たままだったり、 最初ちょっと出ていて自動的に隠れたりします。
アプリバーのアイコンをタッチすることで、 なんらかの処理を実行します。

§ アプリバーには、 画面内の UI には割り当てられない機能を配置します。 ただし、 プログラムの設定はアプリバーではなく、 設定コントラクトを使用します。
§ xaml 上にアプリバーコントロールを置き、 その中にボタンを配置します。 表示のされ方はアプリバーコントロールのプロパティで設定します。

 
◆ チャーム

画面右端から左へエッジスワイプ (マウスでは、 画面左下隅をクリック) すると、 画面の左下部分に時計と日付などが、 画面右端には 「チャーム」 (Charms) が出てきます。

チャームには、 上から順に [Search (検索)]、 [Share (共有)]、 [Start (スタート)]、 [Devices (デバイス)]、 および [Settiings (設定)] にアクセスするための、 5つのアイコンが並んでいます。 たとえば [Start] をタッチすると、 スタート画面に戻ります。

§プログラムでは何もすることはありません。 チャームは Windows 8 の機能です。

 
◆ 設定チャーム

[Settiings] をタッチすると、 画面右に Settiings チャームが出てきます。

上の正方形タイルのところは、 従来の [ヘルプ] - [about] に相当します。 ここから Windows Store にレビューを書くこともできます。
その下に、 アプリケーション独自の設定画面へのリンクがあります (この例では "Weather Preferences")。
さらにその下、 "Control system access for Weather" は、 この Weather アプリケーションに使用を許可する Windows のリソースを設定します (インターネット接続、 位置情報、 マイク / Web カメラ、 ユーザーアカウント、 ドキュメント / ミュージック / ピクチャー / ビデオ ライブラリ、 等)。

§ プログラムで利用したいリソースは、 Package.appxmanifest に定義します (Visual Studio で開けば、 GUI で設定できる)。 appxmanifest に記載されたリソースを、 ほんとうに使わせるかどうかは、 ユーザーが決定します。

 
◆ 設定画面

Settiings チャームで Preferences (この例では "Weather Preferences") をタップすると、 アプリケーション独自の設定画面に切り替わります。

§ プログラムでは、 Settings Contract を実装します。

 
◆ メッセージダイアログ

※ ここからは、 別のプログラムです。

プログラムからユーザーに情報を伝える方法として、 まず、 従来のメッセージボックスに替わる、 新しいメッセージダイアログがあります。

画面全体は暗くなり、 その中央で横幅一杯の黒い帯として表示されます。 従来のメッセージボックスと同様で、 ボタンをタップするまで表示されたままになります。

§ プログラムでは、 MessageDialog クラスを使います。 (new MessageDialog("hoge")).ShowAsync().Start() のように書きます。 (こんなところまで、 非同期 API になっています。)

 
◆ トースト

トースト (Toast) または Flyout と呼ばれるポップアップ。
これは DP 版のエミュレーターでは動かないみたいなので、 制作中のアプリから画面の一部を。

画面右下に、 ちょうど従来のタスクトレイから出るポップアップみたいに表示されます。
時間が経つと自動的に消えます。 表示されているあいだは、 スタート画面などに切り換えても表示され続けます。

§ プログラムからは、 タイルを表示するのと似ています。 表示する文字や画像を与えて API を呼び出すと、 Windows 側で勝手に表示してくれます。
§ メッセージダイアログは、 ユーザーの操作を中断させてしまいます。 見逃されても構わないような情報はトーストで出すようにして、 むやみにユーザー操作の邪魔をしないようにします。

 
◆ コントロール

最後に、 Metro スタイルの標準コントロールを紹介しておきましょう。

※ BUILD 2011 "Introducing the Windows libraries for JavaScript" のスライド (日本語訳: pptx , オンライン閲覧 ) p.18 より。

以上、 ざっくりと新しい Metro スタイルの画面の作りを見てきました。
従来のデスクトップアプリ (Windows Forms や WPF) とは、 かなり違った世界になっていると思います。 むしろ、 言われているように Windows Phone の方が近いでしょう。

これから Metro スタイルのプログラムに挑戦するには、 ここで紹介した画面のお作法の他にも、 xaml やコードを書き始める前に学んでおかねばならないことが沢山あります。
まだ日本語の情報は限られているので、 英語になってしまいますが、 ここから始めるとよいでしょう。 → MSDN: Windows features for Metro style apps
また、 Metro スタイルのプログラムを書くには必須の、 非同期コードの記述方法については、 「[C# Advent Calendar 2011] Win8 に備えて async / await を勉強してみよう」 で解説していますので、 合わせてお読みください。