BUILD ビデオ 「8 Traits of Great Metro Style Apps」 の解説


みなさん、こんにちは。Windows 開発統括部の古内です。

BUILD セッションの Metro スタイル アプリについて説明した 「8 Traits of Great Metro Style Apps (優れた Metro スタイル アプリの 8 つの特徴)」 セッションのビデオに日本語字幕が付いたことはすでにこの Windows 開発統括部 Blog の記事でご紹介しましたが、今日はそのセッションで使われているデモやサンプルについて、詳しく見ていきたいと思います。長い内容になってしまいましたが、興味のあるトピックから見てみていただけると幸いです。

デモ 1 (2:00) – サインインと Start (スタート) 画面

ピクチャ パスワードについては、Building Windows 8 ブログの記事 「ピクチャ パスワードを使ってサインインする」 および 「ピクチャ パスワードのセキュリティを最適化する」 をお読みください。Start (スタート) 画面については、「[Start] (スタート) 画面のデザイン」 をお読みください。

なお、現在提供中の Windows 8 Developer Preview では、ピクチャ パスワードによるサインインはサポートされていません。

特徴 1: Metro Style Design (Metro スタイルの設計)

デモ 2 (7:14) – Metro スタイル アプリのテンプレート

Metro スタイル アプリのテンプレートは、Windows 8 Developer Preview with developer tools に入っている Microsoft Visual Studio 11 Express に含まれています。

デモ 3 (12:40) – Metro スタイル アプリの紹介

デモで紹介されている以下のアプリはいずれも Windows 8 Developer Preview に標準で入っています。

  • ニュース アプリ
  • Weather
  • Socialite
  • Word Hunt
  • IE 10

特徴 1 のポイント:

  • テンプレートを使用して、共通デザインの統一感のある Metro スタイル アプリを開発できます。
  • さまざまな作業をするアプリよりも、操作の少ないシンプルなアプリに向いています。
  • コンテンツ (中身) にフォーカスしてください。
  • キャンバス上には、もっとも重要な機能 (ボタン、コントロール) のみを配置するようにします。
  • タッチ用のコントロールは両端に配置するようにします。

関連セッション:

 

特徴 2: Fast and fluid (高速でなめらか)

デモ 4 (25:18) – アニメーション

Windows 8 では簡単にアニメーションを利用し、ハードウェア アクセラレーションの力によって高速で滑らかに標示させることができます。List Animations のサンプルは MSDN サイトで提供されています。

デモ 5 (28:11) – タッチ

タッチ機能は、マルチ タッチ機能搭載 PC に Windows 8 Developer Preview をインストールすることで体験できます。 34:10 で紹介されているListView grouping and SemanticZoom のサンプルは MSDN サイトで提供されています。 35:12 で紹介されている Game Reviewer のサンプルはありません。

特徴 2 のポイント:

  • Windows 8 標準のアニメーション ライブラリとコントロールを使用して、滑らかで美しいアニメーションを無料で組み込むことができます。
  • Metro スタイル アプリは タッチ ファースト (タッチが一番) です。
  • 一般的なコントロールは、マウスやキーボードでも特別な対応なしで動作します。
  • タッチ用インターフェイスとマウス用インターフェイスは別々にしないでください。
  • タッチ機能が常に反応するかどうか、性能が比較的低いマシンでテストしながら開発するようにします。
  • Windows 8 で用意されているタッチ言語を利用することにより、ジェスチャーがアプリ間で一貫したものとなります。

関連セッション:

 

特徴 3: Snap and scale beautifully (美しく画面にフィット)

40:00 から説明されている Scaling のサンプルは MSDN サイトで提供されています。また、44:30 から説明されている Snap のサンプルも、MSDN サイトで提供されています。

特徴 3 のポイント:

  • 画像は 100%、140%、180% の 3 種類用意してください。 ベクターであれば 1 種類だけで OK です。
  • 縦表示も利用できます。
  • 使い勝手の良い魅力的なスナップ ビューを提供することにより、ユーザーによるアプリの利用時間を長くすることができます。

 

特徴 4: Use the right Contracts (コントラクトの設定)

デモ 6 (51:40) – コントラクト

コントラクトの SDK サンプルは MSDN サイトで提供されています。 File Picker (ファイル選択)、ビュー、検索、共有の機能をカバーするものです。コントラクトの最初のデモである共有コントラクトについては、Sharing Content Target App サンプルSharing Content Source App サンプルが提供されています。55:26 で紹介されている検索コントラクトについては、Search app extension サンプルが提供されています。

特徴 4 のポイント:

  • Windows 8 で提供されるエクスペリエンスをアプリが使用するには、コントラクトを設定する必要があります。
  • 適切かつ必要最低限のコントラクトだけを設定してください。
  • コントラクトによって必要なエクスペリエンスが実現できる場合は、わざわざアプリ側で作成するのではなく、そのコントラクトを使用するようにします。

関連セッション:

 

特徴 5: Invest in a great Tile (タイルへの投資)

デモ 7 (1:10:00) – タイル

タイルのデモで使用されているアプリはいずれも Windows 8 Developer Preview に標準で入っています。ニュース、Socialite、Weather、Stocks アプリには、セカンダリ タイルの機能があります。

タイルについては、以下のサンプルが MSDN で提供されています。

特徴 5 のポイント:

  • タイルは単なるアイコンではなく、アプリの拡張機能です。すばらしいタイルを作ってください。
  • ユーザーの興味を引くために、プレビューの要素を持たせるとよいでしょう。
  • セカンダリ タイルを用いることにより、個々のユーザーが必要としているコンテンツ (カテゴリや場所に応じた内容) を提供できます。

関連セッション:

 

特徴 6: Feel connected and alive (いつも活動中)

1:16:25 から紹介されているスタート画面のタイルについては、この上の 「特徴 5: Invest in a great Tile」 とほぼ同じです。 1:19:58 から説明されている通知機能に関しては、Push Notifications サンプルが提供されています。

特徴 6 のポイント:

  • Windows Push Notification Servie (WNS) の機能を活用したライブ タイルを作成して、最新情報を提供してください。
  • 通知の機能は、重要で緊急なメッセージ (または、ユーザーが要求したメッセージ) を表示するときに使用します。
  • ユーザーが重要な通知を見逃した場合は、タイルに標示するようにします。

関連セッション:

 

特徴 7: Roam to the cloud (クラウド経由のローミング)

デモ 7 (1:27:03) – アプリの設定

アプリの設定は、独自の設定用 UI を用意するのではなく、Windows 8 標準の設定チャームを使用します。

特徴 7 のポイント:

  • (たとえプロセスが実行されてなくても) アプリは常に稼働中だとユーザーに感じさせるような作りにしましょう。
  • Windows Live ID を使ってログオンすることにより、Windows 8 が実行されている PC 間で、設定や状態をクラウド経由でローミングできるようになります。
  • ユーザーが明示的に 「保存」 しなくても、設定や状態は自動的かつ頻繁に保存されて引き継がれるべきです。

関連セッション:

 

特徴 8: Embrace Metro principles (Metro 原則の尊重)

Metro スタイル デザインの原則:

  • 職人 (開発者) の誇りを持って取り組む
  • 高速でなめらか
  • 真にデジタル (デジタル時代に適合したもの)
  • 少ない工数でたくさんのことを (直接的で何かに特化したもの)
  • みんなで勝つ (Metro スタイルの UI モデルにフィットしたもの)

関連セッション:

Comments (0)

Skip to main content