SlideShare a Scribd company logo

Metroアプリの作り方 (COD2012)

•
•
Yasuhiko Yamamoto
Yasuhiko Yamamoto

2012/6/9 COD2012 名古屋 ※ pptxとソースコードは、こちらに。 http://sdrv.ms/Kj4QnC (SkyDrive) ※ ブログ記事 http://bluewatersoft.cocolog-nifty.com/blog/2012/06/cod2012jp-metro.html

1 of 45
2012/6/9 COD2012 - Metroアプリの作り方 1/xx Metroアプリ の COD2012 作り方 名古屋会場 13:00～ BluewaterSoft http://www.bluewatersoft.jp/ biac
2012/6/9 COD2012 - Metroアプリの作り方 2/xx biac • 1957、スプートニクの前に誕生 (山本 康彦) • 1983、名古屋大学工学部(修士)卒 自己紹介 • HONDA R&Dで自動車設計 BluewaterSoft • 1994～ ソフトウェア業界 • 2012～ BluewaterSoft http://www.bluewatersoft.jp • 著書 著作 – 「速攻入門 C#」 (2012/3) 技術評論社、共著 わんくま同盟 – 「ソフトな彼女とハードな彼氏。」(2012/3) アジャイ ルマインドvol.1 掲載 • 記事 – 連載中 「C#でTDD入門」CodeZine 名古屋勉強会で – 「Metroスタイルアプリの開発者が知るべき3 来場者 つのこと」、他 @IT - .NET開発者中心 TDD道場 …etc. 次回は7月7日、七夕の日 プレゼント!
2012/6/9 COD2012 - Metroアプリの作り方 3 • Windows 8 Metro スタイル ア Agenda • 前半 プリの紹介 • 開発のおおまかな流れ • マルチプラットフォームに対応 • 後半 させよう • 共用ライブラリの作り方 Claudia Madobe © 2011 Microsoft Corporation All Rights Reserved. ※ クラウディアさんについてはこのへん見てね ⇒ http://msdn.microsoft.com/ja-jp/hh298798
2012/6/9 COD2012 - Metroアプリの作り方 4 Metro スタイル アプリ Windows Store kindle Cut the Rope 朝日新聞 楽天レシピ 地球書店 ビデオ
2012/6/9 COD2012 - Metroアプリの作り方 5 1. 没入型 2.高速かつ滑 • 開発者にとっ Metro らか ては – フルスクリーン – 組み込みのアニ – 個人で世界市 アプリの – 「飾り」の廃止 メーション 場を相手にでき 特徴 – メニュー非表示 – 非同期API る 3. 安心で安全 4. いつでも、 • タッチ操作に どこでも 最適 – Store経由のみで – スマホ、タブレッ • スマホやタブ 配布 ト、デスクトップ – サンドボックス レットに適し – 1回購入で5台分 ている – API制限 Claudia Madobe © 2011 Microsoft Corporation All Rights Reserved.
2012/6/9 COD2012 - Metroアプリの作り方 6 MSの狙い ～ スマートフォン から デスクトップ まで Metro! デスクトップからスマホまで 売りたいのは ココ !! Windows 8 Release Preview Product guide http://www.microsoft.com/about/mspreview/windows8/Windows8_RP_Product_guide.pdf p.28の画像に IS12T の写真を合成
2012/6/9 COD2012 - Metroアプリの作り方 7 タッチ オペレーション slide swipe drag pinch / stretch press & hold rotate tap × フリック × スワイプして閉じる (RPで "drag" になった) http://www.microsoft.com/about/mspreview/windows8/Windows8_RP_Product_guide.pdf
2012/6/9 COD2012 - Metroアプリの作り方 8 Metroデザイン Metro Windows Phone 7 ≠ ↓ Metro Metro Windows 8 アプリ アプリ Win 8 Metro アプリ Win8 Metro スタイル アプリの動 デスク トップ デスク トップ サンドボックス 作環境: AppContainer アプリ アプリ AppContainer (WWAHost.exe) ⇒ Win8上で動く1アプリに Windows 8 過ぎない
2012/6/9 COD2012 - Metroアプリの作り方 9 例外も居る AppContainerで 動いている Metroスタイルアプリ
2012/6/9 COD2012 - Metroアプリの作り方 10 スタート画面やMetroアプリも、従来のウィンドウ (その1) 管理者権限付きの ウィンドウなら、 Metro 画面よりも 前面に出て来られる。
2012/6/9 COD2012 - Metroアプリの作り方 11 スタート画面やMetroアプリも、従来のウィンドウ (その2) Spy++ で、Metro アプリのウィンドウと プロセスを見る。 ※ PID 0x0000139C = 5020 (前画面参照)
2012/6/9 COD2012 - Metroアプリの作り方 12 WinRT ? Win8 Metroで WinRT Windows 使えるAPIって Runtime .NET 4.5 ? …? .NET Silverlight どうやって見分 Metro .NET APIs • WinRT for Metro ければ…? style apps • .NET(一部) – Visual Studioに 頼る desktop • Win32(一部) – MSDNには表記 • COM(一部) あり – WACK (後述)
2012/6/9 COD2012 - Metroアプリの作り方 13 VS2012のオブジェクトブラウザー ※ オブジェクトブラウザーで、見る範囲を指定できる。
2012/6/9 COD2012 - Metroアプリの作り方 14 @IT: 特集：Windows 8開発に向 Building Windows 8: 信頼でき 1. Windows けて準備しよう る Metro スタイル アプリを提 開発前に Store で配布 供する 知っておく あるいは、Active Directory 内で配布。 こと 野良アプリ不可! http://www.atmarkit.co.jp/fdotnet/chus hin/readyforwin8app_01/readyforwin8 http://bluewatersoft.cocolog- nifty.com/blog/2012/05/metro-metro- app_01_01.html f64.html 2. ユーザーの 3. 万全のリ 4. コントラクト 5. タイル、トー プライバシー ジューム機能 を理解せよ スト、WNS 新インターフェース を守れ を実装せよ アプリとアプリコンテ 侵害に使えそうなAPI 複雑な画面遷移は自 ナとの間の契約により、 6. 広告 他のアプリと間接的に Storeは年会費必要、 やプロセス間通信は 分の首を絞める 連携 広告は重要 利用できない
2012/6/9 COD2012 - Metroアプリの作り方 15 × ローカルDB Cloud志向 × ファイルの自由な デスクトップの アクセス アプリの 発想は × プリンタ制御 – データや重い処 理はサーバー × 他アプリのコント 構想 忘れる!! ロール × USBポート、 で – ユーザー設定 RS232Cポート はクラウドに タブレットの機 Storeの機能 Storeの認定 能 要件 スマホで作れ – 課金 × 単なる広告 るもの、 – マルチタッチ × 個人的な情報の無 と考えるのが – 試用版 – カメラ、GPS、G 断取得 近道 センサー etc. – 広告 × CERO Z 相当
2012/6/9 COD2012 - Metroアプリの作り方 16 ストア認定要件 最低限、この要件 をクリアしていない と、Storeに出品で きない ＝配布できない http://msdn.microsoft.com/ja-jp/library/windows/apps/hh694083
2012/6/9 COD2012 - Metroアプリの作り方 17 • 4パターン • 上と左の余白 UX デザインしろ – landscape (full) とタイトルの位 置やサイズ 「鉄の掟」があ 画面の る – snap • グリッド単位 – fill の画面構成 デザイン – portrait • クローズボタン、検索 ボタン、共有ボタンetc. は付けるな • AppBarは下から デザイン • ナビゲーションバーは 上から ガイドの山 • スクロール方向は統一 しろ …etc. etc.
2012/6/9 COD2012 - Metroアプリの作り方 18 膨大なデザイン ガイドライン ◆ 設計ガイド (英語のものもあり) ・アプリを世界対応にするためのガイドライン ・primitive animations ・Metro スタイル アプリの UX ガイドライン ・アプリのヘルプのガイドライン ・progress controls ・ナビゲーション デザイン ◆ Guidelines and checklist (まだ全部英語) ・push notifications ・コマンド実行の設計 ・accessibility ・radio buttons ・タッチ操作の設計 ・app bars ・Rating control ・可変レイアウトの設計 ・app resources ・raw notifications ・アプリ コントラクトの一覧 ・badges ・scheduled notifications ・building a device picker ・secondary tiles ◆ Guidelines (日本語訳があるものもあり) ・buttons ・search ・ユーザー操作 ・checkboxes ・SemanticZoom controls ・タッチによるターゲット設定 ・clipboard commands ・sharing content ・視覚的なフィードバック ・combo box and list box controls ・sliders ・セマンティック ズーム ・context menus ・spell checking ・クロス スライド ・DatePickers ・splash screens ・光学ズームとサイズ変更 ・drag-and-drop animations ・text and typography ・パンのガイドライン ・edge-based UI animations ・text input ・回転のガイドライン ・file pickers ・thumbnails ・テキストと画像の選択 ・file types and protocols ・tiles ・スナップされたビューとページ横幅に合わせたビュー ・FlipView controls ・TimePickers ・画面に合わせたスケーリング ・Flyouts ・toast notifications ・ピクセル密度に合わせたスケーリング ・links ・toggle switches ・UI 設計の印刷 ・list animations ・tooltips ・タップのガイドライン ・location-aware applications ・touch input ・オーディオ認識アプリの開発 ・lock screen tiles ・transient UI animations ・カメラの UI ・message dialogs ・transition animations ・アプリのデータのローミング ・periodic notifications ・using sensitive devices ・アプリ設定のガイドライン ・グローバルな Metro スタイル アプリの設計 ・pointer animations http://bluewatersoft.cocolog-nifty.com/blog/2012/05/metro-a386.html 2012/5/22時点のまとめ(CP)
2012/6/9 COD2012 - Metroアプリの作り方 19 複雑な UI や HTML/CSS ロジックには XAML WinJS 実装 XAML + C#、VB C++/CX JavaScript C# (or VB) Windows Runtime .NET Class Library component (WinMD) Webアプリの DirectX を 移植には 使うなら .NET APIs Win32 Direct HTML + C++/CX for Metro API X WinRT style apps (一部) (一部) JavaScript ※ C# と VB で作れるものに差は無いけれど、ブログ記事や Q&A は C# ばかり。Metro で VB はお勧めできない。
2012/6/9 COD2012 - Metroアプリの作り方 20 Win8 Metro 開発環境 Windows 8 (必須) Visual Studio 2012 (必須) Team Foundation Server 2012 ※ Win7新PC購入者には ※ 有償版 または 無償の Visual Studio Win8Proが1200円(*1) Express 2012 for Windows 8 ※ いまどきソース管理してない人なんて いないよね!? TFS 2012 は Express (無償)もアリ! タッチ対応ハード Blend for Visual Studio ※ Visual Studio 2012 に付属 Expressにも付いてる! ※ VS付属のシミュレータで 検証可能 最低限、お金が掛かるのは Microsoft アカウント (必須) ・Windows 8 インターネット接続と、Microsoft アカウント (現 Windows Live ID) は必須。 ・Store 年会費: 4900円/年(*2) (*1) Windows 8 購入プログラム - https://windowsupgradeoffer.com/ja/Home/ProgramInfo (*2) 個人4900円/法人9800円 - http://msdn.microsoft.com/ja-jp/library/windows/apps/hh694064.aspx#account_countries
2012/6/9 COD2012 - Metroアプリの作り方 21 1. アプリ開発 2. コード分析 3. アプリ提出用 チェックリスト ※ 起動・中断処理に (FxCop) 時間が掛かるとか 4. 年齢区分の ストアへ はパフォーマンス分 析で。(Express にも ※ Expressにも 検討 (ゲーム 簡易版が搭載) 付いてます! は必須) 5. アップロード 6. Windows App 7. Storeにアッ 用のパッ Certification プロード ケージ作成 Kit (WACK) で 8. 審査に通る チェック と公開 © 2011 Microsoft Corporation All Rights Reserved. ※ 実際には、開発初期段階から、頻繁にローカル用パッケージを作ってWACKでチェックすること。
2012/6/9 COD2012 - Metroアプリの作り方 22 Windows App Certification Kit アプリを実際に 起動してチェック される - クラッシュとハング - アプリケーション マニフェ ストの準拠 - Windows セキュリティ機能 - サポートされている Metro スタイル API - パフォーマンス - アプリケーション マニフェ スト リソース - デバッグ構成 - ファイルのエンコード 「Windows Store 開発者向けブログ」より http://blogs.msdn.com/b/windowsstore_ja/archive/2012/05/16/10306060.aspx
2012/6/9 COD2012 - Metroアプリの作り方 23 Storeでは、統計情報が開発者に提供される Windows ストア ダッシュボードの レポート画面 ダウンロード数 レビュー点数 売上額 国別ユーザー数 年齢別ユーザー数 平均使用時間 クラッシュレポート …など 「Windows Store 開発者向けブログ」より http://blogs.msdn.com/b/windowsstore_ja/archive/2012/05/16/10306060.aspx
2012/6/9 COD2012 - Metroアプリの作り方 24 Win8 Metro 開発のための情報 (その1) MSDN デベロッパーセンター Metro スタイル アプリ http://msdn.microsoft.com/ja-jp/windows/apps/br229512.aspx
2012/6/9 COD2012 - Metroアプリの作り方 25 Win8 Metro 開発のための情報 (その2) Windows Developer Days 2012 (2012/4/24-25) ビデオとスライド資料 http://channel9.msdn.com/Events/Windows-Developer-Days/Windows-Developer-Days-2012
2012/6/9 COD2012 - Metroアプリの作り方 26 Win8 Metro 開発のための情報 (その3) Building Windows 8 Windows エンジニアリング チームによるブログ http://blogs.msdn.com/b/b8_ja/
2012/6/9 COD2012 - Metroアプリの作り方 27 Win8 Metro 開発のためのイベント情報 facebook Go Metro http://www.facebook.com/5Metro
2012/6/9 COD2012 - Metroアプリの作り方 28 Microsoft のオフライン サポート Developer Camp Application Excellence Lab ・概要編 ※ 当面6月末まで ・デザイン編 ※ 現時点でストアに登録するほぼ ・実践編 唯一の道 ハンズオン トレーニング http://www.facebook.com/5Metro/app_100855993378035 http://www.facebook.com/5Metro/app_384971174888643
2012/6/9 COD2012 - Metroアプリの作り方 29 後半戦 JavaScript な人、ごめんなさい。 ここから先は、C# です。
2012/6/9 COD2012 - Metroアプリの作り方 30 さて。Win8 Metro だけ作って満足ですか?
2012/6/9 COD2012 - Metroアプリの作り方 31 Windows • 画面以外は共通化したい! 他の Phone 7 Win8 Metroの Win8 Metro VM DM プラット スナップと同じ 構成のUIでい フォーム けそう! Windows Phone 7 VM DM M (ロジック) ここは できるだけ デスクトップア Webアプリ WPF VM DM 共通に WinForm プリ したい!! フルスクリー UIを簡素化し ASP.NET ンってどうなの てWebでも提供 DM ASP.NET MVC よ!? したい Data Model できれば、VMの一部も! ※ 今日は Windows Phone 8 (Apollo) の話はしませんから! 6月20日の Windows Phone Summit に注目!!
2012/6/9 COD2012 - Metroアプリの作り方 32 Portable .NETで共通に WinRT Class 使える部分だ Library けを使う! .NET Silverlight .NET APIs VS2010SP1か 詳細はMSDN for Metro style apps ら可能 Visual Studio 2010 SP1 desktop Portable Library Tools PCL は ここを使う ※ http://msdn.microsoft.com/ja-jp/library/hh563947%28v=vs.110%29.aspx
2012/6/9 COD2012 - Metroアプリの作り方 33 VM と M をすべて PCL で書けるか? 例: コマンド処理 例: ファイル読み出し VM の ICommand の中でユーザーとの対話 PCL で使える StreamReader() (図の上段) WPF Metro メッセージボックスを出してユーザーの応答を得 パス文字列は不可、Streamオブジェクトのみ。V るメソッドを、V から VM に渡す? で、パス文字列から Stream を作り出して、VM 可能だけど、タイヘンだ! 経由で M に渡す? ヘタに意地を張ると、V が肥大化する!! うまい妥協点を探れ!
2012/6/9 COD2012 - Metroアプリの作り方 34 VS2012 で PCL を作る ※ VS2010SP1(Express除く)では、Portable Library Tools 2 を使う http://visualstudiogallery.msdn.microsoft.com/b0e0b5e9-e138-410b-ad10-00cb3caf4981/
2012/6/9 COD2012 - Metroアプリの作り方 35 VS2012のオブジェクトブラウザー PCL の範囲によっては、 ブラウザーには出てきて も、使えないことがある。 たとえば WP7 を含めると、 これはダメ。 (WP7.x は Legacy な PCL) ※ オブジェクトブラウザーで、PCLの範囲に限定してAPIを見ているところ。
2012/6/9 COD2012 - Metroアプリの作り方 36 VS 2010 Express for WP で PCL を使う Windows Phone SDK 7.1.1 参照の追加で、 PCL の dll を直 接指定する。 ※ WP8 では、プロジェクト参 照でいけるようになる気が する。 ※ ソースへのリンクを使って もよい。 ※ Windows Phone SDK 7.1.1 を Windows 8 Release Preview へインストールする際の注意点 http://blogs.msdn.com/b/aonishi/archive/2012/06/04/10314544.aspx
2012/6/9 COD2012 - Metroアプリの作り方 37 じつは、WP7 で PCL は、ちょっとツラい WP7とSilverlightを外し てPCLを作ると、Task やHttpClientの非同期 アクセスなど、便利なも のがいっぱい使える。 ※ 右は、WP7とSilverlightも含めたPCLに指定しなおしたところ。Taskなどがコンパイルエラーになっている。
2012/6/9 COD2012 - Metroアプリの作り方 38 WP7 で使うためには、非同期は昔の書き方で! Task (つまりasync / await) が使えないので、非同期は Begin ～ End パターンで書 くことになる。 そのほかにも、UrlEncode() とかが使えないとか、不便 な事がたくさん orz
2012/6/9 COD2012 - Metroアプリの作り方 39 WP7 側から呼び出して、データをセット Windows Phone 7.x では、 AsyncCallback メソッドの中 で、結果を受け取り、デー タをセットする。 UI スレッドではないので、 ちょっと面倒。
2012/6/9 COD2012 - Metroアプリの作り方 40 WPF で PCL を使う VS2012 参照の追加で、 PCL のプロジェクト を指定する。
2012/6/9 COD2012 - Metroアプリの作り方 41 WPF 側から呼び出して、データをセット WPF 4.5 では、 async / await が使 える。 await 後は UI スレッ ドに戻るので、非同 期の結果を取り出 すのも簡単。 (Metro も同様)
2012/6/9 COD2012 - Metroアプリの作り方 42 WPF / Metro / WP7
2012/6/9 COD2012 - Metroアプリの作り方 43 ○ ロジックを × 進化中。 WP7 と PCL 共用できる のは、 WP7 を対象 にするのは Silverlight を 対象にしてい まとめ 魅力 辛い ないなら、 お薦め! WP8 に期待! - .NET 4.5 WPF, WinForm, ASP.NET - Metro style app - ( WP8 ? )
2012/6/9 COD2012 - Metroアプリの作り方 44 • Metro スタイル アプリは、ス マホとタブレットに最適! まとめ • 前半 • Win8 Metro の開発と配布は、 Windows Phone と似てる! • Win8 Metro 用だけにアプリを 作るのはもったいない! • 後半 • Portable Class Library でロ ジックの共用化を図ろう
2012/6/9 COD2012 - Metroアプリの作り方 45 ご清聴 ありがとうございました

More Related Content

Metroアプリの作り方 (COD2012)

  • 1. 2012/6/9 COD2012 - Metroアプリの作り方 1/xx Metroアプリ の COD2012 作り方 名古屋会場 13:00～ BluewaterSoft http://www.bluewatersoft.jp/ biac
  • 2. 2012/6/9 COD2012 - Metroアプリの作り方 2/xx biac • 1957、スプートニクの前に誕生 (山本 康彦) • 1983、名古屋大学工学部(修士)卒 自己紹介 • HONDA R&Dで自動車設計 BluewaterSoft • 1994～ ソフトウェア業界 • 2012～ BluewaterSoft http://www.bluewatersoft.jp • 著書 著作 – 「速攻入門 C#」 (2012/3) 技術評論社、共著 わんくま同盟 – 「ソフトな彼女とハードな彼氏。」(2012/3) アジャイ ルマインドvol.1 掲載 • 記事 – 連載中 「C#でTDD入門」CodeZine 名古屋勉強会で – 「Metroスタイルアプリの開発者が知るべき3 来場者 つのこと」、他 @IT - .NET開発者中心 TDD道場 …etc. 次回は7月7日、七夕の日 プレゼント!
  • 3. 2012/6/9 COD2012 - Metroアプリの作り方 3 • Windows 8 Metro スタイル ア Agenda • 前半 プリの紹介 • 開発のおおまかな流れ • マルチプラットフォームに対応 • 後半 させよう • 共用ライブラリの作り方 Claudia Madobe © 2011 Microsoft Corporation All Rights Reserved. ※ クラウディアさんについてはこのへん見てね ⇒ http://msdn.microsoft.com/ja-jp/hh298798
  • 4. 2012/6/9 COD2012 - Metroアプリの作り方 4 Metro スタイル アプリ Windows Store kindle Cut the Rope 朝日新聞 楽天レシピ 地球書店 ビデオ
  • 5. 2012/6/9 COD2012 - Metroアプリの作り方 5 1. 没入型 2.高速かつ滑 • 開発者にとっ Metro らか ては – フルスクリーン – 組み込みのアニ – 個人で世界市 アプリの – 「飾り」の廃止 メーション 場を相手にでき 特徴 – メニュー非表示 – 非同期API る 3. 安心で安全 4. いつでも、 • タッチ操作に どこでも 最適 – Store経由のみで – スマホ、タブレッ • スマホやタブ 配布 ト、デスクトップ – サンドボックス レットに適し – 1回購入で5台分 ている – API制限 Claudia Madobe © 2011 Microsoft Corporation All Rights Reserved.
  • 6. 2012/6/9 COD2012 - Metroアプリの作り方 6 MSの狙い ～ スマートフォン から デスクトップ まで Metro! デスクトップからスマホまで 売りたいのは ココ !! Windows 8 Release Preview Product guide http://www.microsoft.com/about/mspreview/windows8/Windows8_RP_Product_guide.pdf p.28の画像に IS12T の写真を合成
  • 7. 2012/6/9 COD2012 - Metroアプリの作り方 7 タッチ オペレーション slide swipe drag pinch / stretch press & hold rotate tap × フリック × スワイプして閉じる (RPで "drag" になった) http://www.microsoft.com/about/mspreview/windows8/Windows8_RP_Product_guide.pdf
  • 8. 2012/6/9 COD2012 - Metroアプリの作り方 8 Metroデザイン Metro Windows Phone 7 ≠ ↓ Metro Metro Windows 8 アプリ アプリ Win 8 Metro アプリ Win8 Metro スタイル アプリの動 デスク トップ デスク トップ サンドボックス 作環境: AppContainer アプリ アプリ AppContainer (WWAHost.exe) ⇒ Win8上で動く1アプリに Windows 8 過ぎない
  • 9. 2012/6/9 COD2012 - Metroアプリの作り方 9 例外も居る AppContainerで 動いている Metroスタイルアプリ
  • 10. 2012/6/9 COD2012 - Metroアプリの作り方 10 スタート画面やMetroアプリも、従来のウィンドウ (その1) 管理者権限付きの ウィンドウなら、 Metro 画面よりも 前面に出て来られる。
  • 11. 2012/6/9 COD2012 - Metroアプリの作り方 11 スタート画面やMetroアプリも、従来のウィンドウ (その2) Spy++ で、Metro アプリのウィンドウと プロセスを見る。 ※ PID 0x0000139C = 5020 (前画面参照)
  • 12. 2012/6/9 COD2012 - Metroアプリの作り方 12 WinRT ? Win8 Metroで WinRT Windows 使えるAPIって Runtime .NET 4.5 ? …? .NET Silverlight どうやって見分 Metro .NET APIs • WinRT for Metro ければ…? style apps • .NET(一部) – Visual Studioに 頼る desktop • Win32(一部) – MSDNには表記 • COM(一部) あり – WACK (後述)
  • 13. 2012/6/9 COD2012 - Metroアプリの作り方 13 VS2012のオブジェクトブラウザー ※ オブジェクトブラウザーで、見る範囲を指定できる。
  • 14. 2012/6/9 COD2012 - Metroアプリの作り方 14 @IT: 特集：Windows 8開発に向 Building Windows 8: 信頼でき 1. Windows けて準備しよう る Metro スタイル アプリを提 開発前に Store で配布 供する 知っておく あるいは、Active Directory 内で配布。 こと 野良アプリ不可! http://www.atmarkit.co.jp/fdotnet/chus hin/readyforwin8app_01/readyforwin8 http://bluewatersoft.cocolog- nifty.com/blog/2012/05/metro-metro- app_01_01.html f64.html 2. ユーザーの 3. 万全のリ 4. コントラクト 5. タイル、トー プライバシー ジューム機能 を理解せよ スト、WNS 新インターフェース を守れ を実装せよ アプリとアプリコンテ 侵害に使えそうなAPI 複雑な画面遷移は自 ナとの間の契約により、 6. 広告 他のアプリと間接的に Storeは年会費必要、 やプロセス間通信は 分の首を絞める 連携 広告は重要 利用できない
  • 15. 2012/6/9 COD2012 - Metroアプリの作り方 15 × ローカルDB Cloud志向 × ファイルの自由な デスクトップの アクセス アプリの 発想は × プリンタ制御 – データや重い処 理はサーバー × 他アプリのコント 構想 忘れる!! ロール × USBポート、 で – ユーザー設定 RS232Cポート はクラウドに タブレットの機 Storeの機能 Storeの認定 能 要件 スマホで作れ – 課金 × 単なる広告 るもの、 – マルチタッチ × 個人的な情報の無 と考えるのが – 試用版 – カメラ、GPS、G 断取得 近道 センサー etc. – 広告 × CERO Z 相当
  • 16. 2012/6/9 COD2012 - Metroアプリの作り方 16 ストア認定要件 最低限、この要件 をクリアしていない と、Storeに出品で きない ＝配布できない http://msdn.microsoft.com/ja-jp/library/windows/apps/hh694083
  • 17. 2012/6/9 COD2012 - Metroアプリの作り方 17 • 4パターン • 上と左の余白 UX デザインしろ – landscape (full) とタイトルの位 置やサイズ 「鉄の掟」があ 画面の る – snap • グリッド単位 – fill の画面構成 デザイン – portrait • クローズボタン、検索 ボタン、共有ボタンetc. は付けるな • AppBarは下から デザイン • ナビゲーションバーは 上から ガイドの山 • スクロール方向は統一 しろ …etc. etc.
  • 18. 2012/6/9 COD2012 - Metroアプリの作り方 18 膨大なデザイン ガイドライン ◆ 設計ガイド (英語のものもあり) ・アプリを世界対応にするためのガイドライン ・primitive animations ・Metro スタイル アプリの UX ガイドライン ・アプリのヘルプのガイドライン ・progress controls ・ナビゲーション デザイン ◆ Guidelines and checklist (まだ全部英語) ・push notifications ・コマンド実行の設計 ・accessibility ・radio buttons ・タッチ操作の設計 ・app bars ・Rating control ・可変レイアウトの設計 ・app resources ・raw notifications ・アプリ コントラクトの一覧 ・badges ・scheduled notifications ・building a device picker ・secondary tiles ◆ Guidelines (日本語訳があるものもあり) ・buttons ・search ・ユーザー操作 ・checkboxes ・SemanticZoom controls ・タッチによるターゲット設定 ・clipboard commands ・sharing content ・視覚的なフィードバック ・combo box and list box controls ・sliders ・セマンティック ズーム ・context menus ・spell checking ・クロス スライド ・DatePickers ・splash screens ・光学ズームとサイズ変更 ・drag-and-drop animations ・text and typography ・パンのガイドライン ・edge-based UI animations ・text input ・回転のガイドライン ・file pickers ・thumbnails ・テキストと画像の選択 ・file types and protocols ・tiles ・スナップされたビューとページ横幅に合わせたビュー ・FlipView controls ・TimePickers ・画面に合わせたスケーリング ・Flyouts ・toast notifications ・ピクセル密度に合わせたスケーリング ・links ・toggle switches ・UI 設計の印刷 ・list animations ・tooltips ・タップのガイドライン ・location-aware applications ・touch input ・オーディオ認識アプリの開発 ・lock screen tiles ・transient UI animations ・カメラの UI ・message dialogs ・transition animations ・アプリのデータのローミング ・periodic notifications ・using sensitive devices ・アプリ設定のガイドライン ・グローバルな Metro スタイル アプリの設計 ・pointer animations http://bluewatersoft.cocolog-nifty.com/blog/2012/05/metro-a386.html 2012/5/22時点のまとめ(CP)
  • 19. 2012/6/9 COD2012 - Metroアプリの作り方 19 複雑な UI や HTML/CSS ロジックには XAML WinJS 実装 XAML + C#、VB C++/CX JavaScript C# (or VB) Windows Runtime .NET Class Library component (WinMD) Webアプリの DirectX を 移植には 使うなら .NET APIs Win32 Direct HTML + C++/CX for Metro API X WinRT style apps (一部) (一部) JavaScript ※ C# と VB で作れるものに差は無いけれど、ブログ記事や Q&A は C# ばかり。Metro で VB はお勧めできない。
  • 20. 2012/6/9 COD2012 - Metroアプリの作り方 20 Win8 Metro 開発環境 Windows 8 (必須) Visual Studio 2012 (必須) Team Foundation Server 2012 ※ Win7新PC購入者には ※ 有償版 または 無償の Visual Studio Win8Proが1200円(*1) Express 2012 for Windows 8 ※ いまどきソース管理してない人なんて いないよね!? TFS 2012 は Express (無償)もアリ! タッチ対応ハード Blend for Visual Studio ※ Visual Studio 2012 に付属 Expressにも付いてる! ※ VS付属のシミュレータで 検証可能 最低限、お金が掛かるのは Microsoft アカウント (必須) ・Windows 8 インターネット接続と、Microsoft アカウント (現 Windows Live ID) は必須。 ・Store 年会費: 4900円/年(*2) (*1) Windows 8 購入プログラム - https://windowsupgradeoffer.com/ja/Home/ProgramInfo (*2) 個人4900円/法人9800円 - http://msdn.microsoft.com/ja-jp/library/windows/apps/hh694064.aspx#account_countries
  • 21. 2012/6/9 COD2012 - Metroアプリの作り方 21 1. アプリ開発 2. コード分析 3. アプリ提出用 チェックリスト ※ 起動・中断処理に (FxCop) 時間が掛かるとか 4. 年齢区分の ストアへ はパフォーマンス分 析で。(Express にも ※ Expressにも 検討 (ゲーム 簡易版が搭載) 付いてます! は必須) 5. アップロード 6. Windows App 7. Storeにアッ 用のパッ Certification プロード ケージ作成 Kit (WACK) で 8. 審査に通る チェック と公開 © 2011 Microsoft Corporation All Rights Reserved. ※ 実際には、開発初期段階から、頻繁にローカル用パッケージを作ってWACKでチェックすること。
  • 22. 2012/6/9 COD2012 - Metroアプリの作り方 22 Windows App Certification Kit アプリを実際に 起動してチェック される - クラッシュとハング - アプリケーション マニフェ ストの準拠 - Windows セキュリティ機能 - サポートされている Metro スタイル API - パフォーマンス - アプリケーション マニフェ スト リソース - デバッグ構成 - ファイルのエンコード 「Windows Store 開発者向けブログ」より http://blogs.msdn.com/b/windowsstore_ja/archive/2012/05/16/10306060.aspx
  • 23. 2012/6/9 COD2012 - Metroアプリの作り方 23 Storeでは、統計情報が開発者に提供される Windows ストア ダッシュボードの レポート画面 ダウンロード数 レビュー点数 売上額 国別ユーザー数 年齢別ユーザー数 平均使用時間 クラッシュレポート …など 「Windows Store 開発者向けブログ」より http://blogs.msdn.com/b/windowsstore_ja/archive/2012/05/16/10306060.aspx
  • 24. 2012/6/9 COD2012 - Metroアプリの作り方 24 Win8 Metro 開発のための情報 (その1) MSDN デベロッパーセンター Metro スタイル アプリ http://msdn.microsoft.com/ja-jp/windows/apps/br229512.aspx
  • 25. 2012/6/9 COD2012 - Metroアプリの作り方 25 Win8 Metro 開発のための情報 (その2) Windows Developer Days 2012 (2012/4/24-25) ビデオとスライド資料 http://channel9.msdn.com/Events/Windows-Developer-Days/Windows-Developer-Days-2012
  • 26. 2012/6/9 COD2012 - Metroアプリの作り方 26 Win8 Metro 開発のための情報 (その3) Building Windows 8 Windows エンジニアリング チームによるブログ http://blogs.msdn.com/b/b8_ja/
  • 27. 2012/6/9 COD2012 - Metroアプリの作り方 27 Win8 Metro 開発のためのイベント情報 facebook Go Metro http://www.facebook.com/5Metro
  • 28. 2012/6/9 COD2012 - Metroアプリの作り方 28 Microsoft のオフライン サポート Developer Camp Application Excellence Lab ・概要編 ※ 当面6月末まで ・デザイン編 ※ 現時点でストアに登録するほぼ ・実践編 唯一の道 ハンズオン トレーニング http://www.facebook.com/5Metro/app_100855993378035 http://www.facebook.com/5Metro/app_384971174888643
  • 29. 2012/6/9 COD2012 - Metroアプリの作り方 29 後半戦 JavaScript な人、ごめんなさい。 ここから先は、C# です。
  • 30. 2012/6/9 COD2012 - Metroアプリの作り方 30 さて。Win8 Metro だけ作って満足ですか?
  • 31. 2012/6/9 COD2012 - Metroアプリの作り方 31 Windows • 画面以外は共通化したい! 他の Phone 7 Win8 Metroの Win8 Metro VM DM プラット スナップと同じ 構成のUIでい フォーム けそう! Windows Phone 7 VM DM M (ロジック) ここは できるだけ デスクトップア Webアプリ WPF VM DM 共通に WinForm プリ したい!! フルスクリー UIを簡素化し ASP.NET ンってどうなの てWebでも提供 DM ASP.NET MVC よ!? したい Data Model できれば、VMの一部も! ※ 今日は Windows Phone 8 (Apollo) の話はしませんから! 6月20日の Windows Phone Summit に注目!!
  • 32. 2012/6/9 COD2012 - Metroアプリの作り方 32 Portable .NETで共通に WinRT Class 使える部分だ Library けを使う! .NET Silverlight .NET APIs VS2010SP1か 詳細はMSDN for Metro style apps ら可能 Visual Studio 2010 SP1 desktop Portable Library Tools PCL は ここを使う ※ http://msdn.microsoft.com/ja-jp/library/hh563947%28v=vs.110%29.aspx
  • 33. 2012/6/9 COD2012 - Metroアプリの作り方 33 VM と M をすべて PCL で書けるか? 例: コマンド処理 例: ファイル読み出し VM の ICommand の中でユーザーとの対話 PCL で使える StreamReader() (図の上段) WPF Metro メッセージボックスを出してユーザーの応答を得 パス文字列は不可、Streamオブジェクトのみ。V るメソッドを、V から VM に渡す? で、パス文字列から Stream を作り出して、VM 可能だけど、タイヘンだ! 経由で M に渡す? ヘタに意地を張ると、V が肥大化する!! うまい妥協点を探れ!
  • 34. 2012/6/9 COD2012 - Metroアプリの作り方 34 VS2012 で PCL を作る ※ VS2010SP1(Express除く)では、Portable Library Tools 2 を使う http://visualstudiogallery.msdn.microsoft.com/b0e0b5e9-e138-410b-ad10-00cb3caf4981/
  • 35. 2012/6/9 COD2012 - Metroアプリの作り方 35 VS2012のオブジェクトブラウザー PCL の範囲によっては、 ブラウザーには出てきて も、使えないことがある。 たとえば WP7 を含めると、 これはダメ。 (WP7.x は Legacy な PCL) ※ オブジェクトブラウザーで、PCLの範囲に限定してAPIを見ているところ。
  • 36. 2012/6/9 COD2012 - Metroアプリの作り方 36 VS 2010 Express for WP で PCL を使う Windows Phone SDK 7.1.1 参照の追加で、 PCL の dll を直 接指定する。 ※ WP8 では、プロジェクト参 照でいけるようになる気が する。 ※ ソースへのリンクを使って もよい。 ※ Windows Phone SDK 7.1.1 を Windows 8 Release Preview へインストールする際の注意点 http://blogs.msdn.com/b/aonishi/archive/2012/06/04/10314544.aspx
  • 37. 2012/6/9 COD2012 - Metroアプリの作り方 37 じつは、WP7 で PCL は、ちょっとツラい WP7とSilverlightを外し てPCLを作ると、Task やHttpClientの非同期 アクセスなど、便利なも のがいっぱい使える。 ※ 右は、WP7とSilverlightも含めたPCLに指定しなおしたところ。Taskなどがコンパイルエラーになっている。
  • 38. 2012/6/9 COD2012 - Metroアプリの作り方 38 WP7 で使うためには、非同期は昔の書き方で! Task (つまりasync / await) が使えないので、非同期は Begin ～ End パターンで書 くことになる。 そのほかにも、UrlEncode() とかが使えないとか、不便 な事がたくさん orz
  • 39. 2012/6/9 COD2012 - Metroアプリの作り方 39 WP7 側から呼び出して、データをセット Windows Phone 7.x では、 AsyncCallback メソッドの中 で、結果を受け取り、デー タをセットする。 UI スレッドではないので、 ちょっと面倒。
  • 40. 2012/6/9 COD2012 - Metroアプリの作り方 40 WPF で PCL を使う VS2012 参照の追加で、 PCL のプロジェクト を指定する。
  • 41. 2012/6/9 COD2012 - Metroアプリの作り方 41 WPF 側から呼び出して、データをセット WPF 4.5 では、 async / await が使 える。 await 後は UI スレッ ドに戻るので、非同 期の結果を取り出 すのも簡単。 (Metro も同様)
  • 42. 2012/6/9 COD2012 - Metroアプリの作り方 42 WPF / Metro / WP7
  • 43. 2012/6/9 COD2012 - Metroアプリの作り方 43 ○ ロジックを × 進化中。 WP7 と PCL 共用できる のは、 WP7 を対象 にするのは Silverlight を 対象にしてい まとめ 魅力 辛い ないなら、 お薦め! WP8 に期待! - .NET 4.5 WPF, WinForm, ASP.NET - Metro style app - ( WP8 ? )
  • 44. 2012/6/9 COD2012 - Metroアプリの作り方 44 • Metro スタイル アプリは、ス マホとタブレットに最適! まとめ • 前半 • Win8 Metro の開発と配布は、 Windows Phone と似てる! • Win8 Metro 用だけにアプリを 作るのはもったいない! • 後半 • Portable Class Library でロ ジックの共用化を図ろう
  • 45. 2012/6/9 COD2012 - Metroアプリの作り方 45 ご清聴 ありがとうございました