BUILD: Metro スタイル アプリ開発に関連したセッションの紹介 (4/4)


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

BUILD イベントで提供された Metro スタイル アプリ開発に関するセッション紹介シリーズも、ついに今回が最終回です。
これまで以下のセッションを紹介してきました。

4 回目の今日は、「APP-737T Metro Style apps using XAML: what you need to know」 についてです。Metro スタイル アプリの開発には、

  • Java Script でエンジン部分を書いて、HTML (CSS) でユーザー インターフェイスを作る
  • C++/C#/VB でエンジン部分を書いて、XAML でユーザー インターフェイスを作る

の大きく分けて 2 つの方法がありますが、APP-737T は 「C++/C#/VB でエンジン部分を書いて、XAML でユーザー インターフェイスを作る」 方法を説明したセッションです。このセッションの中で取り上げられているデモやサンプルを紹介していきます。スライドの日本語翻訳版も APP-737T のセッション Web ページからダウンロードできますので、どうぞご利用ください。

セッションの概要と基調講演のまとめ

Windows 8 Developer Preview には、以下の XAML ベースのサンプル アプリが入っています。

  • Zero Gravity
  • Check M8
  • memories

基本コントロールやコントロール モデルはほとんど同じで、Silverlight や WPF (Windows Presentation Foundation) の資産をそのまま Windows 8 に持って行くことができます。XAML スタックは Windows ランタイムの一部であり、Windows に最初から含まれているので、リファレンスを追加する必要はありません。XAML は、C++/C#/VB どの言語でも同じコードです。

デモ 1: XAML の互換性 (ビデオの 09:04)

  • Visual Studio 11 Express は Windows 8 Developer Preview with developer tools に入っています。
  • C# でも C++ でも、既存の XAML のコードが同様に Windows 8 の Metro スタイル アプリで動作する。
    • Metro スタイル アプリの新規プロジェクトにコピーした、Silverlight の Button コントロールのサンプルは こちら
  • 関連サンプル: Basic Controls サンプルはこちら

Windows 8 における新しい点

Windows 8 ではデザインが Metro スタイルになり、タッチとマウスの両方に対応しています。.NET フレームワークも引き続き使用できるものもありますが、新しい API も導入され、それらは Windows ランタイムに入っています。Metro スタイル アプリを開発するときは、タッチを考慮し、空間を広げたり、ジェスチャーに対応させたりといった、コンテンツに重点を置いた新しいデザインが重要です。

デモ 2: Metro スタイル アプリのユーザー インターフェイス (ビデオの 23:54)

  • Windows 8 Developer Preview に入っている memories というアプリを例にした Metro スタイル アプリの特徴の紹介
  • BING の画像検索結果をリストボックス形式で表示するサンプル アプリの解説
  • 関連サンプル: (BING の検索結果ではなく) ローカルにあるファイルを表示する File thumbnails サンプルはこちら

XAML を使った Metro スタイル アプリのユーザー インターフェイス (UI)

XAML ベースの UI は、タイルからアプリを起動しスプラッシュスクリーンが表示され、アクティブ化されてから表示されるものです。Metro スタイル アプリの XAML UI コントロールは、既存のものに加えて、変更されたものや新しく追加されたものがあります。”Web View” は WebBrowser コントロールから名前が変わり、TextBox にはスペルチェックなどの機能が追加されています。ListView、GridView は ”Windows 8 感” を出すための新しいコントロールです。

デモ 3: GridView のサンプル (ビデオの 32:20)

デモ 2 からの続き。“ListView” を “GridView” と置き換えると、縦一列に表示 (ListView) されていた画像が、画面全体に格子状に表示 (GridView) されるようになる。

  • ListView サンプル (GridView と ListView コントロールのサンプル) はこちら
  • GroupedGridView サンプルはこちら

関連セッション:

  • APP-517T: Build polished collection and list apps using XAML
  • APP-912T: Build data-driven collection and list apps using XAML

デモ 4: FlipView のサンプル (ビデオの 36:24)

デモ 3 からの続き。“GridView” を “FlipView” と置き換えると、1 画面 に 1 画像が表示されて紙芝居のように順々に画像が表示 (FlipView) されるようになる。GridView と FlipView を共存させることも可能。

デモ 5: アプリ バー (ビデオの 42:44)

デモ 4 からの続き。FlipView から GridView へ戻るためのアプリバーを追加。

その他の UI 機能

  • アニメーションに関する関連セッション: APP-494T: Stand out with styling and animation in your XAML app
  • タッチ機能に関する関連セッション: APP-503T: Make great touch apps using XAML
  • Nine-Grid for Image API 情報はこちら

Metro スタイルアプリの概念

さまざまなスクリーンへの対応

さまざまな画面サイズや解像度、画面の向きを考慮する必要があります。

関連セッション:

  • TOOL-515T: Tips and tricks for developing Metro style apps using XAML
  • APP-847T: Reach all your customer's devices with one beautiful XAML user interface

デモ 6: スナップ ビュー (ビデオの 50:38)

デモ 5 からの続きで、スナップ状態のビューの形式を指定するコードを追加。デモ アプリが表示されているところに Visual Studio を持ってくると、画面が分割されて、デモアプリと Visual Studio の両方が表示される。メインとして表示されている場合と、スナップされている場合で、ビューの形式を変更することも可能。

Windows との連携 (チャーム)

Search (検索) チャームに関する関連セッション

  • APP-406T: Search: integrating into the Windows 8 search experience
  • APP-741T: Metro style apps using XAML: Make your app shine

Share (共有) チャームに関する関連セッション

  • APP-405T: Share: your app powers the Windows 8 share experience
  • APP-741T: Metro style apps using XAML: Make your app shine

Devices (デバイス) チャームに関する関連セッション

  • APP-788T: Integrating stunning media experiences in XAML
  • APP-914T: The lifetime of XAML text: from input to display through printing

ケイパビリティ

アプリのマニフェストでケイパビリティ (アプリが使用するシステム機能) を宣言しないとアプリが正しく動作しないので、注意が必要です。

アプリのプロセスに関する関連セッション

  • APP-788T: Integrating stunning media experiences in XAML
  • APP-409T: Fundamentals of Metro style apps: how and when your app will run

 

http://msdn.microsoft.com/library/windows/apps/br229566.aspx (英語ページ) に、C#/C++/VB を使用した Metro スタイル アプリの開発方法がまとめられているので、併せてご参照ください。

Comments (0)

Skip to main content