Metrostyleappに挑戦してみた
- 1. Windows 8 メトロスタイルア プリに挑戦してみた WindowsPhone勉強会@四日市 第3回 2012/7/21 青木宣明 @kumar0001
- 2. Agenda (1 of2) Windows 8のメトロスタイルアプリ XAMLによるUI定義、ページ遷移のアプリ構 造など、Windows Phone 7と似た要素が あります WP7アプリの開発経験を活かせないかと思 い、メトロスタイルアプリに挑戦してみました
- 3. Agenda (2 of2) 本セッションでは、Windows Phone 7とメトロ スタイルアプリを同時に開発する試みについて、 現時点での状況を紹介します 技量不足、時間不足でまだ途中ですが、何 か参考になればと思います ご意見があれば是非聞かせてください
- 4. 目次 1. アプリケーションのマルチプラットフォーム対応 2. Windows8とメトロスタイルアプリ 3. Windows Phone 7アプリとの同時開発の試み
- 5.
- 6. 増えるUIプラットフォーム XAMLによるUIプラットフォーム(PF) WPF Silverlight Windows Phone 7 Windows8 メトロスタイルアプリ Windows Phone 8
- 7. マルチPF対応の理由(1) ある目的のために開発するアプリを、 様々なPFに展開したい 理由（パターン1） 特性が異なるそれぞれのPFでリリース →アプリの役割をそれぞれ変える • 画面は小さいけどいつでもどこでも→WP7 •大きな画面で直観的なタッチ操作→スレー トPC(メトロスタイルアプリ) • 大画面での閲覧性とキーボード・マウスで の効率的な操作→デスクトップPC(WPF)
- 8. WP7アプリ⇔デスクトップアプリ WP7とデスクトップPCの環境を比較すると… Windows Phone 7デスクトップPC ハードウェア スマートフォン デスクトップPC ノートPC 画面サイズ 小さい (800×480) 大きい (少なくとも1024×768) 利用環境 モバイル オフィスでの固定利用 ノートは外出先でも 通信環境 主にモバイル回線 (3G) せいぜい5～6Mbps？ 固定LAN（100Mbps～） 無線LAN（54Mbps～） 操作 タッチパネル ソフトウェアキーボード（SIP） マウス キーボード ペンタブレットとかのデバイスは 稀？
- 9.
- 10. マルチPF対応の理由(3) 理由（パターン2 ） プラットフォームの過渡期において、新 旧のプラットフォームにリリースしたい •Windows Phone 8が発売されても、しば らくはWindows Phone 7が存在 Windows Phone 7.8にアップデートするとWP8 とは同一コードで動くか？ ダメならそれぞれに対応が必要 • メトロスタイルアプリの普及はいつ頃…？ それまでWPF版と並行してリリースする、とか
- 11.
- 12. マルチPF対応の対象アプリ ATND Beta検索アプリ ATNDbetaのAPIを使って、イベントを 検索する • 検索キー イベントID、日付、キーワード、参加者 結果のイベントを一覧表示 選択されたイベントの詳細を表示 参加者の一覧表示もしたい
- 13.
- 14. ATND BETA API イベントの検索と参加者を取得するAPIが 提供されている http://api.atnd.org/ 主な仕様 HTTP GETでアクセス XML/JSON/Atom/JSONP/iCalend arで結果を取得 • イベントや参加者の情報を含む
- 15. アプリの対象PF 対象プラットフォーム Windows Phone7に対応させる • 外出先へと持ち歩くメインデバイス Windows 8のメトロスタイルアプリとし てもリリースする • スレートPC／デスクトップPCでの閲覧性 • まだATND検索アプリがない • スレートPCが今後普及するだろうから、今 のうちに作っておきたい
- 16.
- 17. メトロスタイルアプリ Windows 8から登場する新しいスタイル のアプリケーション 特徴 コンテンツへの没入 余計な飾りを省いたデザイン、タイポ グラフィによる表現 タッチ操作を意識
- 18.
- 19.
- 20.
- 21.
- 22.
- 23. チャーム 画面右側に表示 5個のチャーム 検索コントラクト 共有コントラクト スタート画面呼び出し デバイス連携 設定コントラクト スタート以外のAP画面か らの呼び出し可能
- 24. 画面解像度 最低解像度 1024×768 推奨解像度 1366×768 両者の差(342×768)はスナップの表 示のため • スナップ表示とは？ 画面の左右の端に常駐させる形の表示形式 推奨解像度未満の場合、スナップは利用不可
- 25.
- 26. 画面解像度 画面の回転に対応 参考 Building Windows8 「横向きと縦向きの両方に 向けた最適化」
- 27.
- 28.
- 29.
- 30.
- 31.
- 32. コントラクト 他のアプリやWindowsと連携する仕組み App toApp Picking (ファイル選択) Cached file updater (ソース共有) Play To (メディアファイル再生) Search (検索) Settings (設定) Share (ターゲット共有)
- 33. コントラクト 提供する機能は決まっていて、 指定された時点でその処理を提 供可能なアプリを探す 検索の例 検索チャームを選択する その時点で検索機能を提供す るアプリで処理 •スタート画面→アプリの検索 • メール→メール内容の検索
- 34. コントラクト 参考 Dev Center- App contracts and extensions (Metro style apps) Building Windows 8 「アプリで Windows 8 のコントラクトのアクティ ベーションを行う 」 Windows 8の新機能「コントラクト」で アプリ連携が簡単に (ascii.jp)
- 35.
- 36. ガイドライン メトロスタイルアプリのガイドラインはたく さんあって読むだけでも大変… Windows 8アプリの認定の要件 これが一番重要 「Metroスタイルアプリのガイドライン一 覧 (沢山あるよ～)」 @biacさん 一覧にまとめられている
- 37. 情報源 デベロッパー センター -Metro スタイル アプリ http://msdn.microsoft.com/ja- jp/windows/apps
- 38. メトロスタイルアプリの特性 没入感 (immersive) ユーザがコンテンツに没頭できるように コンテンツ優先(contents before chrome) 画面にはコンテンツに関係する要素だ けを配置する。余計な飾りは置かない
- 39.
- 40.
- 41. 例題のアプリ ATND Beta検索アプリ まずイベントの検索、結果の一覧表示 までを実装してみる WP7とメトロスタイルアプリのそれぞれ で実装する
- 42. WP7とメトロスタイルアプリ(1) WP7とメトロスタイルを比較すると… Windows Phone 7メトロスタイルアプリ ハードウェア スマートフォン スレートPC デスクトップPC ノートPC 画面サイズ 小さい (800×480) 大きい (1024×768以上) 利用環境 モバイル モバイル オフィスでも？ 通信環境 主にモバイル回線 (3G) 無線LAN？ モバイル回線？ 操作 タッチパネル ソフトウェアキーボード（SIP） タッチパネル マウス・キーボードがある場合も
- 43.
- 44. WP7とメトロスタイルアプリ(2) Windows Phone 7メトロスタイルアプリ 開発言語 C#/VB C#/VB C/C++ HTML/CSS + JavaScript UI構築 XAML XAML 画面構成 ページ遷移 解像度： 800×480 画面の回転： 有り ページ遷移 解像度： 1024×768以上 画面の回転： 有り スナップ表示 開発環境 Windows Phone SDK 7.1 Visual Studio 2010 SP1 Expression Blend 4 Visual Studio 2012 Blend for Visual Studio ライフサイクル アプリの活性化・非活性化をAP 自身で管理 ⇒Tombstoning処理 Launching, Activated, Deactivated, Closingイベント 3種類の状態遷移 APはResume・Suspendの遷移 に対応 ⇒Suspending, Resumingイベ ント
- 45. ライフサイクル WP7＝3つの状態 Running Domant Tombstoned イベントは4種類 Launching Activated Deactivated Closing MSDN(“Execution Model Overview for Windows Phone“)から引用 http://msdn.microsoft.com/en- us/library/ff817008(v=VS.92).aspx
- 46. ライフサイクル メトロスタイルアプリ＝3つの状態 NotRunning, Running,Suspended イベントは3種類 Activated, Suspending, Resuming MSDN(“Application lifecycle (Metro style apps) “)から引用 http://msdn.microsoft.com/en- us/library/windows/apps/hh464925.aspx
- 47.
- 48.
- 49. MVVMパターン(1) UIのアーキテクチャパターンの1つ WPF/SilverlightのXAMLを使ったUI向 けのパターン XAMLのデータバインディング、仮想 化を考慮すると自然と導かれる 参考情報 •「MVVMパターンが必要な理由」啓蒙用資 料公開 (尾上氏) http://ugaya40.net/mvvm/mvvm_docum ent.html
- 50. MVVMパターン(2) アプリを3要素に分けて捉える View • UIの見た目、構造を定義 ViewModel • Viewの状態を保持・管理 • Viewのサポート（入力値検査など持っていな い機能を補完） Model • アプリ本来の問題領域（ビジネスドメイン） • 通信、DBなどViewとViewModel以外の箇所 全部
- 51.
- 52.
- 53. UIプラットフォームによる差異(2) プラットフォームの特性、狙い、制約によりView はそれぞれ異なる メトロスタイル モバイル環境でも利用されるが、通信量には 寛容？ 画面が大きい(1024×768～) コンテンツファースト Windows Phone モバイル環境のため、通信量は抑えたい 画面が小さい (800×480～) • データをうまく見せる工夫(Panorama、Pivot) • 複数の画面で構成するしかない
- 54. UIの見せ方の違い UIの見せ方が違うと？ Viewはそれぞれ構築するしかない • ライフサイクルなどUIプラットフォームの差 を吸収しきれない面も Viewが違う⇒ViewModelが違う • Viewの持つデータ構造が同じ場合は少な いはず
- 55.
- 56. UIプラットフォームとAP構造 Modelの共通化を踏まえると、APの構造は 以下のようになる View, ViewModelをそれぞれ構築する Modelは共有する ViewModel (WP7) View (WP7) ViewModel (metro) View (metro) Model
- 57. Portable Class Libraryについて ライブラリのアセンブリを複数のプラットフォーム で利用可能にする Windows, Silverlight, Windows Phone, Xbox 360 通常はプラットフォームごとにライブラリのアセン ブリは異なる Visual Studio 2012から標準で対応
- 58. Portable Class Libraryについて PCLでModelを構築すると、プロジェクトは1 個で済むか？ ModelでのHTTP通信は、WP7もメトロスタ イルアプリも非同期で行う Reactive Extension(Rx)と呼ばれるライ ブラリを活用する Rxが現状ではPCLに対応していない 2.0RCが出ているので詳細を調査中 ModelをPCLで構築することは、現状では難 しいのでは？ 非同期処理がない単純なAPなら可能？
- 59.
- 60. プラットフォームの差異の吸収 差異を吸収するには Modelをラップするサービス層で、Modelへのア クセス方法を多様化 APIアクセスの箇所をPFごとに変える •#ifとかプロジェクトを分けるとか… ViewModel (WP7) View (WP7) ViewModel (metro) View (metro) Model Model (WP7) Model (metro)
- 61. 開発環境 メトロスタイルアプリの開発 WP7アプリ開発でも使ったツールで開発 • VisualStudio 2012 (現在はRC版) • Blend for Visual Studio
- 62. 開発環境の違い Windows Phone 7アプリ 現時点ではVisual Studio 2012RC での開発は不可 • VS2010SP1＋Blend4、もしくはExpress Editionで メトロスタイルアプリ Visual Studio 2012RCが必須 Blend for Visual Studio
- 63. ソリューションの構成 Windows Phone 7アプリをVisual Studio2012RCで開発できないため、ソ リューションを分ける Windows Phone 7用 • Visual Studio 2010で メトロスタイルアプリ用 • Visual Studio 2012RCで
- 64. Modelの共有 Modelはそれぞれのソリューションで共 有する Modelのプロジェクト(Classライブラリ) を各ソリューションで作成 • ポータブル化が実現したら1プロジェクトで よくなるが現状はこの方法で Modelのコードを、各プロジェクトにリ ンクとして追加する
- 65.
- 66.
- 67. まとめ Windows Phone 7とメトロスタイルアプリは、Model を共通化させて、View/ViewModelをそれぞれに開 発する必要がある 同じXAMLによるUIアーキテクチャだが、UIの見 せ方が違う Modelの共通化は、現状ではPortable Class Libraryの利用は厳しいため、別プロジェクトになる ライブラリなど環境面の変化によって、将来的に は共通化できる可能性がある 現時点では、開発環境が異なるため、それぞれでソ リューションを作成する必要がある これも環境面の変化で、将来的に解決する可能 性がある