More Related Content Similar to Metroアプリの作り方 (COD2012)
Similar to Metroアプリの作り方 (COD2012) (20) More from Yasuhiko Yamamoto
More from Yasuhiko Yamamoto (20) 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
ご清聴 ありがとうございました