Metroアプリの作り方 (COD2012)

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


Metro
スタイル
アプリ Windows Store kindle Cut the Rope

朝日新聞楽天レシピ地球書店ビデオ


1. 没入型 2.高速かつ滑 • 開発者にとっ
Metro らかては
– フルスクリーン – 組み込みのアニ – 個人で世界市
アプリの – 「飾り」の廃止メーション場を相手にでき

特徴 – メニュー非表示 – 非同期API る

3. 安心で安全 4. いつでも、 • タッチ操作に
どこでも最適
– Store経由のみで – スマホ、タブレッ • スマホやタブ
配布ト、デスクトップ
– サンドボックス
レットに適し
– 1回購入で5台分ている
– API制限
Claudia Madobe © 2011 Microsoft Corporation All Rights Reserved.


MSの狙い～スマートフォンからデスクトップまで Metro!
デスクトップからスマホまで
売りたいのは
ココ !!

Windows 8 Release Preview Product guide http://www.microsoft.com/about/mspreview/windows8/Windows8_RP_Product_guide.pdf
p.28の画像に IS12T の写真を合成


タッチオペレーション
slide

swipe drag pinch / stretch

press & hold rotate

tap
× フリック
× スワイプして閉じる
(RPで "drag" になった)

http://www.microsoft.com/about/mspreview/windows8/Windows8_RP_Product_guide.pdf


Metroデザイン
Metro Windows Phone 7
≠ ↓ Metro Metro
Windows 8 アプリアプリ
Win 8
Metro アプリ
Win8 Metro スタイルアプリの動デスク
トップ
デスク
トップサンドボックス
作環境: AppContainer アプリアプリ AppContainer
(WWAHost.exe)

⇒ Win8上で動く1アプリに Windows 8
過ぎない


例外も居る

AppContainerで
動いている
Metroスタイルアプリ


スタート画面やMetroアプリも、従来のウィンドウ (その1)
管理者権限付きの
ウィンドウなら、
Metro 画面よりも
前面に出て来られる。


スタート画面やMetroアプリも、従来のウィンドウ (その2)
Spy++ で、Metro
アプリのウィンドウと
プロセスを見る。

※ PID 0x0000139C = 5020 (前画面参照)


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 (後述)


VS2012のオブジェクトブラウザー

※ オブジェクトブラウザーで、見る範囲を指定できる。


@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は年会費必要、
やプロセス間通信は分の首を絞める
連携広告は重要
利用できない


× ローカルDB Cloud志向
× ファイルの自由な
デスクトップのアクセス
アプリの発想は
× プリンタ制御
– データや重い処
理はサーバー
× 他アプリのコント
構想忘れる!! ロール
× USBポート、
で
– ユーザー設定
RS232Cポートはクラウドに

タブレットの機 Storeの機能 Storeの認定
能要件スマホで作れ
– 課金 × 単なる広告るもの、
– マルチタッチ × 個人的な情報の無と考えるのが
– 試用版
– カメラ、GPS、G 断取得
近道
センサー etc. – 広告 × CERO Z 相当


ストア認定要件

最低限、この要件
をクリアしていない
と、Storeに出品で
きない

＝配布できない

http://msdn.microsoft.com/ja-jp/library/windows/apps/hh694083


• 4パターン • 上と左の余白
UX デザインしろ
– landscape (full)
とタイトルの位
置やサイズ
「鉄の掟」があ
画面のる – snap • グリッド単位
– fill の画面構成
デザイン – portrait

• クローズボタン、検索
ボタン、共有ボタンetc.
は付けるな
• AppBarは下からデザイン
• ナビゲーションバーは
上からガイドの山
• スクロール方向は統一
しろ
…etc. etc.


膨大なデザインガイドライン
◆ 設計ガイド (英語のものもあり) ・アプリを世界対応にするためのガイドライン・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)


複雑な 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 はお勧めできない。


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


1. アプリ開発 2. コード分析 3. アプリ提出用
チェックリスト
※ 起動・中断処理に (FxCop)
時間が掛かるとか 4. 年齢区分の
ストアへはパフォーマンス分
析で。(Express にも
※ Expressにも検討 (ゲーム
簡易版が搭載)
付いてます! は必須)

5. アップロード 6. Windows App 7. Storeにアッ
用のパッ Certification プロード
ケージ作成 Kit (WACK) で
8. 審査に通る
チェック
と公開
© 2011 Microsoft Corporation All Rights Reserved.

※ 実際には、開発初期段階から、頻繁にローカル用パッケージを作ってWACKでチェックすること。


Windows App Certification Kit
アプリを実際に
起動してチェック
される

- クラッシュとハング
- アプリケーションマニフェ
ストの準拠
- Windows セキュリティ機能
- サポートされている Metro
スタイル API
- パフォーマンス
- アプリケーションマニフェ
ストリソース
- デバッグ構成
- ファイルのエンコード

「Windows Store 開発者向けブログ」より http://blogs.msdn.com/b/windowsstore_ja/archive/2012/05/16/10306060.aspx


Storeでは、統計情報が開発者に提供される
Windows ストア
ダッシュボードの
レポート画面

ダウンロード数
レビュー点数
売上額
国別ユーザー数
年齢別ユーザー数
平均使用時間
クラッシュレポート
…など

「Windows Store 開発者向けブログ」より http://blogs.msdn.com/b/windowsstore_ja/archive/2012/05/16/10306060.aspx


Win8 Metro 開発のための情報 (その1)
MSDN
デベロッパーセンター
Metro スタイルアプリ

http://msdn.microsoft.com/ja-jp/windows/apps/br229512.aspx


Windows
Developer Days 2012
(2012/4/24-25)

ビデオとスライド資料

http://channel9.msdn.com/Events/Windows-Developer-Days/Windows-Developer-Days-2012


Building Windows 8

Windows
エンジニアリング
チームによるブログ

http://blogs.msdn.com/b/b8_ja/


Win8 Metro 開発のためのイベント情報
facebook
Go Metro

http://www.facebook.com/5Metro


Microsoft のオフラインサポート
Developer Camp Application Excellence Lab
・概要編 ※ 当面6月末まで
・デザイン編 ※ 現時点でストアに登録するほぼ
・実践編唯一の道

ハンズオン
トレーニング

http://www.facebook.com/5Metro/app_100855993378035 http://www.facebook.com/5Metro/app_384971174888643


後半戦

JavaScript な人、ごめんなさい。
ここから先は、C# です。


さて。Win8 Metro だけ作って満足ですか?


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 に注目!!


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


VM と M をすべて PCL で書けるか?
例: コマンド処理例: ファイル読み出し
VM の ICommand の中でユーザーとの対話 PCL で使える StreamReader() (図の上段)

WPF Metro

メッセージボックスを出してユーザーの応答を得パス文字列は不可、Streamオブジェクトのみ。V
るメソッドを、V から VM に渡す? で、パス文字列から Stream を作り出して、VM
可能だけど、タイヘンだ! 経由で M に渡す?

ヘタに意地を張ると、V が肥大化する!! うまい妥協点を探れ!


VS2012 で PCL を作る

※ VS2010SP1(Express除く)では、Portable Library Tools 2 を使う
http://visualstudiogallery.msdn.microsoft.com/b0e0b5e9-e138-410b-ad10-00cb3caf4981/


VS2012のオブジェクトブラウザー

PCL の範囲によっては、
ブラウザーには出てきて
も、使えないことがある。
たとえば WP7 を含めると、
これはダメ。
(WP7.x は Legacy な PCL)

※ オブジェクトブラウザーで、PCLの範囲に限定してAPIを見ているところ。


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


じつは、WP7 で PCL は、ちょっとツラい
WP7とSilverlightを外し
てPCLを作ると、Task
やHttpClientの非同期
アクセスなど、便利なも
のがいっぱい使える。

※ 右は、WP7とSilverlightも含めたPCLに指定しなおしたところ。Taskなどがコンパイルエラーになっている。


WP7 で使うためには、非同期は昔の書き方で!
Task (つまりasync / await)
が使えないので、非同期は
Begin ～ End パターンで書
くことになる。

そのほかにも、UrlEncode()
とかが使えないとか、不便
な事がたくさん orz


WP7 側から呼び出して、データをセット
Windows Phone 7.x では、
AsyncCallback メソッドの中
で、結果を受け取り、デー
タをセットする。

UI スレッドではないので、
ちょっと面倒。


WPF で PCL を使う
VS2012

参照の追加で、
PCL のプロジェクト
を指定する。


WPF 側から呼び出して、データをセット
WPF 4.5 では、
async / await が使
える。

await 後は UI スレッ
ドに戻るので、非同
期の結果を取り出
すのも簡単。
(Metro も同様)


WPF / Metro / WP7


○ ロジックを × 進化中。 WP7 と

PCL 共用できる
のは、
WP7 を対象
にするのは
Silverlight を
対象にしてい
まとめ魅力辛いないなら、
お薦め!

WP8 に期待!

- .NET 4.5
WPF, WinForm, ASP.NET
- Metro style app
- ( WP8 ? )


• Metro スタイルアプリは、ス
マホとタブレットに最適!
まとめ • 前半 • Win8 Metro の開発と配布は、
Windows Phone と似てる!

• Win8 Metro 用だけにアプリを
作るのはもったいない!
• 後半 • Portable Class Library でロ
ジックの共用化を図ろう


ご清聴ありがとうございました

Metroアプリの作り方 (COD2012)

Recommended

More Related Content

Similar to Metroアプリの作り方 (COD2012) (20)

More from Yasuhiko Yamamoto (20)

Recently uploaded (13)

Metroアプリの作り方 (COD2012)