windows phone & windows 8で見えてくるメトロの世界
DESCRIPTION
2012年3月のCommunityOpenDay広島会場で発表したスライドですTRANSCRIPT
![Page 1: Windows phone & windows 8で見えてくるメトロの世界](https://reader031.vdocuments.mx/reader031/viewer/2022020207/556600b4d8b42a2a4d8b4e50/html5/thumbnails/1.jpg)
Windows Phone & Windows 8で見えてくるメトロの世界
Community Open Day 2012
株式会社システムフレンド
西村 誠
![Page 2: Windows phone & windows 8で見えてくるメトロの世界](https://reader031.vdocuments.mx/reader031/viewer/2022020207/556600b4d8b42a2a4d8b4e50/html5/thumbnails/2.jpg)
お品書き
• 自己紹介
• 本セッションの目指すところ
• 概要
• Windows Phone、Windows 8の比較
• 開発者向け情報
![Page 3: Windows phone & windows 8で見えてくるメトロの世界](https://reader031.vdocuments.mx/reader031/viewer/2022020207/556600b4d8b42a2a4d8b4e50/html5/thumbnails/3.jpg)
自己紹介
•
• 名前:coelacanth
• スキル:Windows Phone
(公開アプリ数約40)
• コミュニティ:
ヒーロー島、WindowsPhoneハンズオン
CSS nite 広島、Hokuriku.NET
![Page 4: Windows phone & windows 8で見えてくるメトロの世界](https://reader031.vdocuments.mx/reader031/viewer/2022020207/556600b4d8b42a2a4d8b4e50/html5/thumbnails/4.jpg)
自己紹介
•
仕事ではPHPでEC-CUBEというフレームワークを触っています。
(一応、EC-CUBEのエバンジェリスト)
プライベートでWindows Phone開発しています(お仕事案件募集中)。
![Page 5: Windows phone & windows 8で見えてくるメトロの世界](https://reader031.vdocuments.mx/reader031/viewer/2022020207/556600b4d8b42a2a4d8b4e50/html5/thumbnails/5.jpg)
本セッションの目指すところ
• Metroスタイルアプリケーションについて興味を持ってもらう
• Metroスタイルアプリケーションについて考えてもらう
• Metroスタイルアプリケーション開発の最初の一歩の案内をする
![Page 6: Windows phone & windows 8で見えてくるメトロの世界](https://reader031.vdocuments.mx/reader031/viewer/2022020207/556600b4d8b42a2a4d8b4e50/html5/thumbnails/6.jpg)
想定されるリスナー
• Windows Phone開発について多少知識がある人
• Windows 8について多少知識がある人
• C#での開発に多少興味がある人
• アプリ開発で儲けたい!! という勢いのある人
(皮算用:午前のキーノートでWindows 8の基礎は
説明されているはずだ!!)
![Page 7: Windows phone & windows 8で見えてくるメトロの世界](https://reader031.vdocuments.mx/reader031/viewer/2022020207/556600b4d8b42a2a4d8b4e50/html5/thumbnails/7.jpg)
概要
メトロUIを採用している2つのプラットフォーム
Windows Phone, Windows 8につていどのくらい知っていますか?
![Page 8: Windows phone & windows 8で見えてくるメトロの世界](https://reader031.vdocuments.mx/reader031/viewer/2022020207/556600b4d8b42a2a4d8b4e50/html5/thumbnails/8.jpg)
Windows Phone
![Page 9: Windows phone & windows 8で見えてくるメトロの世界](https://reader031.vdocuments.mx/reader031/viewer/2022020207/556600b4d8b42a2a4d8b4e50/html5/thumbnails/9.jpg)
Windows Phone概要
• Windows Mobileの後継
世界的には2010年8月に販売開始
日本は昨年(2011年)8月にIS12Tが登場
• メトロUIを本格的に採用した初のデバイス
• 日本ではIS12T1機種
![Page 10: Windows phone & windows 8で見えてくるメトロの世界](https://reader031.vdocuments.mx/reader031/viewer/2022020207/556600b4d8b42a2a4d8b4e50/html5/thumbnails/10.jpg)
Windows Phone概要
• 書籍も充実
• Webの情報もそろってきました
• 開発者視点では開発が容易な環境
• ただし普及台数は・・・
![Page 11: Windows phone & windows 8で見えてくるメトロの世界](https://reader031.vdocuments.mx/reader031/viewer/2022020207/556600b4d8b42a2a4d8b4e50/html5/thumbnails/11.jpg)
Windows Phone概要
• 価格もこなれて来ました
http://www.microsoft.com/ja-jp/windowsphone/
![Page 12: Windows phone & windows 8で見えてくるメトロの世界](https://reader031.vdocuments.mx/reader031/viewer/2022020207/556600b4d8b42a2a4d8b4e50/html5/thumbnails/12.jpg)
Windows 8
![Page 13: Windows phone & windows 8で見えてくるメトロの世界](https://reader031.vdocuments.mx/reader031/viewer/2022020207/556600b4d8b42a2a4d8b4e50/html5/thumbnails/13.jpg)
Windows 8概要
• タブレット向けのUIとしてメトロUIを採用した次期WindowsOS
タブレットにもPCにもなるOS
• 6月1日にRelease Previewが公開
(はい、このタイミングで出ましたよ・・・)
・タブレットなどに多く利用されているCPU=ARM版もある
![Page 14: Windows phone & windows 8で見えてくるメトロの世界](https://reader031.vdocuments.mx/reader031/viewer/2022020207/556600b4d8b42a2a4d8b4e50/html5/thumbnails/14.jpg)
Windows 8概要
• 製品の公開は2012年末(10月?)
• まだまだ開発環境としては安定しているとは言えない
• Windows Phoneに比べればプラットフォームとしての受け皿は大きい?
![Page 15: Windows phone & windows 8で見えてくるメトロの世界](https://reader031.vdocuments.mx/reader031/viewer/2022020207/556600b4d8b42a2a4d8b4e50/html5/thumbnails/15.jpg)
Windows 8概要
• Visualstudio11(古いバージョン)のプロジェクトを
VisualStudio2012RC(6月1日公開バージョン)で開いてみると・・・
![Page 16: Windows phone & windows 8で見えてくるメトロの世界](https://reader031.vdocuments.mx/reader031/viewer/2022020207/556600b4d8b42a2a4d8b4e50/html5/thumbnails/16.jpg)
メトロUI
![Page 17: Windows phone & windows 8で見えてくるメトロの世界](https://reader031.vdocuments.mx/reader031/viewer/2022020207/556600b4d8b42a2a4d8b4e50/html5/thumbnails/17.jpg)
メトロUI概要
• 地下鉄(Metro)のわかりやすい・・・(もう耳にタコ?)
• パノラマやピボット、特徴的なデザインのコントロールがあるので、
デザインしなくてもメトロらしいアプリが作れるよね!!
(Windows Phone時代)
![Page 18: Windows phone & windows 8で見えてくるメトロの世界](https://reader031.vdocuments.mx/reader031/viewer/2022020207/556600b4d8b42a2a4d8b4e50/html5/thumbnails/18.jpg)
メトロUI概要
というのは昔の話。
Windows 8になってメトロUIはかなり作法も厳しく、
メトロの作法に沿ってないアプリケーションを要求されます
(まだマーケットについては不明点も多くはっきりとしたことは言えないのですが)
現在公開されている初期アプリ審査では作法に沿ってないアプリはかなり落ちたとか・・・
![Page 19: Windows phone & windows 8で見えてくるメトロの世界](https://reader031.vdocuments.mx/reader031/viewer/2022020207/556600b4d8b42a2a4d8b4e50/html5/thumbnails/19.jpg)
メトロUI概要
作法1.
検索やファイル共有はコントラクト(後述)を利用する
アプリ独自の検索フォームを用意するのではなく、OSの提供する機能を用いて検索を行わせる
(共通の操作を行わせることで迷わせない)
![Page 20: Windows phone & windows 8で見えてくるメトロの世界](https://reader031.vdocuments.mx/reader031/viewer/2022020207/556600b4d8b42a2a4d8b4e50/html5/thumbnails/20.jpg)
メトロUI概要
作法1.
作法に則った操作というのはメトロスタイルアプリケーションの一つのキーで、それによって「コンテンツ最優先」のUIを実現しています。
画面の右に隠れているチャームや、フリックしないとあらわれないアプリケーションバーなd(例:メトロ版IE10)
![Page 21: Windows phone & windows 8で見えてくるメトロの世界](https://reader031.vdocuments.mx/reader031/viewer/2022020207/556600b4d8b42a2a4d8b4e50/html5/thumbnails/21.jpg)
メトロUI概要
作法2.
コンテンツ最優先
ボタンや検索窓、リンクなどを極力そぎ落としてコンテンツをフルに表示できるようなUIにする
作法1.のようなアプリに共通したルールがあってこその画面構成
![Page 22: Windows phone & windows 8で見えてくるメトロの世界](https://reader031.vdocuments.mx/reader031/viewer/2022020207/556600b4d8b42a2a4d8b4e50/html5/thumbnails/22.jpg)
メトロUI概要
作法3.
グループ化や階層化をボックスで表現しない
作法4.
アプリバーの配置はグローバルコマンドは右側に、文脈上のコマンドは左側に
![Page 23: Windows phone & windows 8で見えてくるメトロの世界](https://reader031.vdocuments.mx/reader031/viewer/2022020207/556600b4d8b42a2a4d8b4e50/html5/thumbnails/23.jpg)
メトロUI概要
作法5.
タイポグラフィーも指標にあわせて
作法6.
画面遷移はHub&Spokesモデル
![Page 24: Windows phone & windows 8で見えてくるメトロの世界](https://reader031.vdocuments.mx/reader031/viewer/2022020207/556600b4d8b42a2a4d8b4e50/html5/thumbnails/24.jpg)
メトロUI概要
詳細はこの場では語り切れませんが、
Windows 8のメトロスタイルアプリケーションでは作法にあったアプリが求められます。
Windows Phoneもそうあるべき
メトロのコンセプトを理解した開発者急募な現状
![Page 25: Windows phone & windows 8で見えてくるメトロの世界](https://reader031.vdocuments.mx/reader031/viewer/2022020207/556600b4d8b42a2a4d8b4e50/html5/thumbnails/25.jpg)
比較
![Page 26: Windows phone & windows 8で見えてくるメトロの世界](https://reader031.vdocuments.mx/reader031/viewer/2022020207/556600b4d8b42a2a4d8b4e50/html5/thumbnails/26.jpg)
比較
Windows PhoneもWindows 8もメトロUIを採用した開発プラットフォームです
登場した時期も近いためきっと共通点も多いはず!!
Windows Phone開発者はWindows 8開発でも一歩先に出ることができるはず
![Page 27: Windows phone & windows 8で見えてくるメトロの世界](https://reader031.vdocuments.mx/reader031/viewer/2022020207/556600b4d8b42a2a4d8b4e50/html5/thumbnails/27.jpg)
比較
API
Windows 8 Windows Phone
WinRT Silverlight
XNA
Windows Phoneの開発環境はSilverlight、XNAでした Windows 8は異なりWinRTという新しいAPIを採用
![Page 28: Windows phone & windows 8で見えてくるメトロの世界](https://reader031.vdocuments.mx/reader031/viewer/2022020207/556600b4d8b42a2a4d8b4e50/html5/thumbnails/28.jpg)
比較
API
![Page 29: Windows phone & windows 8で見えてくるメトロの世界](https://reader031.vdocuments.mx/reader031/viewer/2022020207/556600b4d8b42a2a4d8b4e50/html5/thumbnails/29.jpg)
比較
WinRT(Windows Runtime)
ハイレベルなAPI(ハイレイヤーというべきか)
50ミリ秒以上waitが発生しそうな処理は非同期処理に
WinRTがJS+HTML、C#+XAML、 C+XAMLに対応できる仕組みは
「言語プロジェクション」「WinMetaData」によるマッピング
![Page 30: Windows phone & windows 8で見えてくるメトロの世界](https://reader031.vdocuments.mx/reader031/viewer/2022020207/556600b4d8b42a2a4d8b4e50/html5/thumbnails/30.jpg)
比較(コントラクト)
![Page 31: Windows phone & windows 8で見えてくるメトロの世界](https://reader031.vdocuments.mx/reader031/viewer/2022020207/556600b4d8b42a2a4d8b4e50/html5/thumbnails/31.jpg)
比較(コントラクト)
コントラクト
画像ピッカーや、カメラで撮影する場合はOSに処理をゆだねる。
(プログラム側では制御できなくなるが、画面の切り出しなどOS提供の機能が利用できる)
Windows PhoneのLauncher、Chooserと同じ感覚
![Page 32: Windows phone & windows 8で見えてくるメトロの世界](https://reader031.vdocuments.mx/reader031/viewer/2022020207/556600b4d8b42a2a4d8b4e50/html5/thumbnails/32.jpg)
比較(コントラクト)
役割 Windows 8 Windows Phone
写真を撮る CameraCaptureUI CameraCaptureTask
アドレス帳にアクセスする ContactPicker AddressChooserTask
アプリ間のデータやり取り DataTransferManager 該当なし(アプリ間のデータ授受はクラウドを利用)
Windows 8には検索を利用する検索コントラクトや、ファイルを操作するFilePickerなどがある
![Page 33: Windows phone & windows 8で見えてくるメトロの世界](https://reader031.vdocuments.mx/reader031/viewer/2022020207/556600b4d8b42a2a4d8b4e50/html5/thumbnails/33.jpg)
比較(コントラクト)
連絡先ピッカー
アプリから連絡先を取得して利用する
DEMO 001_ContactPickerSample_RC
![Page 34: Windows phone & windows 8で見えてくるメトロの世界](https://reader031.vdocuments.mx/reader031/viewer/2022020207/556600b4d8b42a2a4d8b4e50/html5/thumbnails/34.jpg)
比較(コントラクト)
連絡先ピッカー
async private void Button_Click_1(object sender, RoutedEventArgs e)
{
// using Windows.ApplicationModel.Contacts;
var picker = new ContactPicker();
ContactInformation contact = await picker.PickSingleContactAsync();
![Page 35: Windows phone & windows 8で見えてくるメトロの世界](https://reader031.vdocuments.mx/reader031/viewer/2022020207/556600b4d8b42a2a4d8b4e50/html5/thumbnails/35.jpg)
比較(コントラクト)
Windows Phoneなら
別のメソッドに分かれてしまう。
addressChooserTask = new AddressChooserTask();
addressChooserTask.Completed += addressChooserTask_Completed;
・
・
// 別メソッドかデリゲート
Void addressChooserTask_Completed(object sender, AddressResult e)
{
![Page 36: Windows phone & windows 8で見えてくるメトロの世界](https://reader031.vdocuments.mx/reader031/viewer/2022020207/556600b4d8b42a2a4d8b4e50/html5/thumbnails/36.jpg)
比較(コントラクト)
連絡先ピッカー
連絡先の選択はWindows Phoneの場合OSのアドレス帳、Windows 8は
Peopleアプリを含めその他対応アプリから取得可能と違いはあるが、
自分のアプリケーションから一旦制御が外れて、データを選択した結果を自分のアプリで取得できるのは似ている。
マイアプリ 別のアプリ
ここでアドレスを選んだ結果が返ってくる
![Page 37: Windows phone & windows 8で見えてくるメトロの世界](https://reader031.vdocuments.mx/reader031/viewer/2022020207/556600b4d8b42a2a4d8b4e50/html5/thumbnails/37.jpg)
比較(コントラクト)
連絡先ピッカー
それ以外にもデータの共有、ファイルの取得、カメラを起動して
映像の画像の取得、印刷などのことをAPIを通して行うことができる。
マイアプリ 別のアプリ
ここでアドレスを選んだ結果が返ってくる
![Page 38: Windows phone & windows 8で見えてくるメトロの世界](https://reader031.vdocuments.mx/reader031/viewer/2022020207/556600b4d8b42a2a4d8b4e50/html5/thumbnails/38.jpg)
比較(コントラクト)
DEMO 002_ContactSenderSample_RC
003_ContractReciverSample_RC
![Page 39: Windows phone & windows 8で見えてくるメトロの世界](https://reader031.vdocuments.mx/reader031/viewer/2022020207/556600b4d8b42a2a4d8b4e50/html5/thumbnails/39.jpg)
比較(コントラクト)
もう一つコントラクトのサンプルを紹介
アプリからアプリへとデータを渡すサンプル
マイアプリA Sender
マイアプリB Reciever
カメラデバイス
![Page 40: Windows phone & windows 8で見えてくるメトロの世界](https://reader031.vdocuments.mx/reader031/viewer/2022020207/556600b4d8b42a2a4d8b4e50/html5/thumbnails/40.jpg)
比較(コントラクト)
送信側
1.カメラの利用
CameraCaptureUI dialog = new CameraCaptureUI(); Size aspectRatio = new Size(16, 9); dialog.PhotoSettings.CroppedAspectRatio = aspectRatio; this.file = await dialog.CaptureFileAsync(CameraCaptureUIMode.Photo);
![Page 41: Windows phone & windows 8で見えてくるメトロの世界](https://reader031.vdocuments.mx/reader031/viewer/2022020207/556600b4d8b42a2a4d8b4e50/html5/thumbnails/41.jpg)
比較(コントラクト)
送信側
2.共有
DataTransferManager manager; manager = DataTransferManager.GetForCurrentView(); manager.DataRequested += new TypedEventHandler<DataTransferManager, DataRequestedEventArgs>(this.DataRequested); DataTransferManager.ShowShareUI();
![Page 42: Windows phone & windows 8で見えてくるメトロの世界](https://reader031.vdocuments.mx/reader031/viewer/2022020207/556600b4d8b42a2a4d8b4e50/html5/thumbnails/42.jpg)
比較(コントラクト)
送信側
2.共有
DataRequest request = args.Request; args.Request.Data.Properties.Title = "コントラクトサンプル"; args.Request.Data.Properties.Description = "画像データを共有します"; var fileStream = await file.OpenAsync(FileAccessMode.Read); request.Data.SetBitmap(RandomAccessStreamReference.CreateFromStream(fileStream));
![Page 43: Windows phone & windows 8で見えてくるメトロの世界](https://reader031.vdocuments.mx/reader031/viewer/2022020207/556600b4d8b42a2a4d8b4e50/html5/thumbnails/43.jpg)
比較(コントラクト)
受け手側
1.起動
// AppXaml.csの以下のメソッドが呼び出される OnShareTargetActivated(Activation.ShareTargetActivatedEventArgs args)
![Page 44: Windows phone & windows 8で見えてくるメトロの世界](https://reader031.vdocuments.mx/reader031/viewer/2022020207/556600b4d8b42a2a4d8b4e50/html5/thumbnails/44.jpg)
比較(コントラクト)
受け手側
2.画像にセット
// Get bitmap var bitmap = new BitmapImage(); RandomAccessStreamReference source = await shareOperation.Data.GetBitmapAsync(); bitmap.SetSource(await source.OpenReadAsync()); reciveImage.Source = bitmap;
![Page 45: Windows phone & windows 8で見えてくるメトロの世界](https://reader031.vdocuments.mx/reader031/viewer/2022020207/556600b4d8b42a2a4d8b4e50/html5/thumbnails/45.jpg)
比較(コントラクト)
参考:
「アプリで Windows 8 のコントラクトのアクティベーションを行う」
http://blogs.msdn.com/b/windowsappdev_ja/archive/2012/03/30/windows-8-activating-contracts.aspx
![Page 46: Windows phone & windows 8で見えてくるメトロの世界](https://reader031.vdocuments.mx/reader031/viewer/2022020207/556600b4d8b42a2a4d8b4e50/html5/thumbnails/46.jpg)
比較(レイアウト)
![Page 47: Windows phone & windows 8で見えてくるメトロの世界](https://reader031.vdocuments.mx/reader031/viewer/2022020207/556600b4d8b42a2a4d8b4e50/html5/thumbnails/47.jpg)
比較(レイアウト)
Windows Phoneはハードウェア環境が統一されており、
画面サイズ、RAM、CPUなどの
機種毎の差異をあまり意識する必要はありませんでした。
変わってWindows 8は画面サイズはまちまち、ハードウェア環境は千差万別です。
それに加えてレイアウトに関しても色々と考慮しておくことがあります。
![Page 48: Windows phone & windows 8で見えてくるメトロの世界](https://reader031.vdocuments.mx/reader031/viewer/2022020207/556600b4d8b42a2a4d8b4e50/html5/thumbnails/48.jpg)
比較(レイアウト)
Windows Phone
WVGA 800×480
1024×768以上
Windows 8
Windows 8では1024×768以下でメトロスタイルアプリは利用できない
(注意)
![Page 49: Windows phone & windows 8で見えてくるメトロの世界](https://reader031.vdocuments.mx/reader031/viewer/2022020207/556600b4d8b42a2a4d8b4e50/html5/thumbnails/49.jpg)
比較(レイアウト)
スナップ(Snap App)
Windows 8の場合、
1366×768ピクセル以上の解像度を持つモニターなら
画面上に分割して2つのアプリを表示できる。
1366×768以上 Snap
![Page 50: Windows phone & windows 8で見えてくるメトロの世界](https://reader031.vdocuments.mx/reader031/viewer/2022020207/556600b4d8b42a2a4d8b4e50/html5/thumbnails/50.jpg)
比較(レイアウト)
スナップ(Snap App)
開発する場合はシュミレーターで解像度を変えた場合を確認できる。
スナップも試せる。
DEMO 004 SnapSample
1366×768以上 Snap
![Page 51: Windows phone & windows 8で見えてくるメトロの世界](https://reader031.vdocuments.mx/reader031/viewer/2022020207/556600b4d8b42a2a4d8b4e50/html5/thumbnails/51.jpg)
比較(レイアウト)
スナップ(Snap App)
判定
if (ApplicationView.Value == ApplicationViewState.Snapped) { this.stateText.Text = "Snapされました"; this.stateText.FontSize = 12; } else { this.stateText.Text = "Snapされていません"; this.stateText.FontSize = 48; }
![Page 52: Windows phone & windows 8で見えてくるメトロの世界](https://reader031.vdocuments.mx/reader031/viewer/2022020207/556600b4d8b42a2a4d8b4e50/html5/thumbnails/52.jpg)
比較(レイアウト)
セマンティックズーム
画面をズームして一覧性を高める仕組み。
Ctr+「+キー」でズームアップ、Ctr+「-キー」でズームダウン
キータッチの場合はピンチイン、ピンチアウト
ズームした場合に単純なズームではなく意味合いを変える。
DEMO「スタート画面」「マーケット」など
![Page 53: Windows phone & windows 8で見えてくるメトロの世界](https://reader031.vdocuments.mx/reader031/viewer/2022020207/556600b4d8b42a2a4d8b4e50/html5/thumbnails/53.jpg)
比較(レイアウト)
セマンティックズーム
DEMO: 005 ZoomSample
![Page 54: Windows phone & windows 8で見えてくるメトロの世界](https://reader031.vdocuments.mx/reader031/viewer/2022020207/556600b4d8b42a2a4d8b4e50/html5/thumbnails/54.jpg)
比較(レイアウト)
セマンティックズーム
<SemanticZoom x:Name="semanticZoom" > <SemanticZoom.ZoomedOutView> // ズームアウト時の画面 </SemanticZoom.ZoomedOutView> <SemanticZoom.ZoomedInView> // ズームイン時の画面 </SemanticZoom.ZoomedInView> </SemanticZoom>
![Page 55: Windows phone & windows 8で見えてくるメトロの世界](https://reader031.vdocuments.mx/reader031/viewer/2022020207/556600b4d8b42a2a4d8b4e50/html5/thumbnails/55.jpg)
比較(レイアウト)
まとめ
Windows Phoneは固定画面サイズ
スナップなどの表示を検討しなくて良いのでレイアウトに関しては容易
Windows 8では色々な端末解像度、スナップなどを考慮する必要がある
ボタンなどのコントロールは共通のものが多く、どちらもXAMLという点では
同じなので技術の応用度は高い
![Page 56: Windows phone & windows 8で見えてくるメトロの世界](https://reader031.vdocuments.mx/reader031/viewer/2022020207/556600b4d8b42a2a4d8b4e50/html5/thumbnails/56.jpg)
比較(ライフサイクル)
![Page 57: Windows phone & windows 8で見えてくるメトロの世界](https://reader031.vdocuments.mx/reader031/viewer/2022020207/556600b4d8b42a2a4d8b4e50/html5/thumbnails/57.jpg)
比較(ライフサイクル)
Windows PhoneとWindows 8のライフサイクルは非常に似ています。
実行中
休止中 非実行
![Page 58: Windows phone & windows 8で見えてくるメトロの世界](https://reader031.vdocuments.mx/reader031/viewer/2022020207/556600b4d8b42a2a4d8b4e50/html5/thumbnails/58.jpg)
比較(ライフサイクル)
Windows Phone
![Page 59: Windows phone & windows 8で見えてくるメトロの世界](https://reader031.vdocuments.mx/reader031/viewer/2022020207/556600b4d8b42a2a4d8b4e50/html5/thumbnails/59.jpg)
比較(ライフサイクル)
Windows 8
![Page 60: Windows phone & windows 8で見えてくるメトロの世界](https://reader031.vdocuments.mx/reader031/viewer/2022020207/556600b4d8b42a2a4d8b4e50/html5/thumbnails/60.jpg)
比較(ライフサイクル)
Windows PhoneもWindows 8もデータを保存するタイミングは
休止状態に入るタイミング。
Windows Phone
Deactivatedイベント
Windows 8
OnSuspendingイベント
![Page 61: Windows phone & windows 8で見えてくるメトロの世界](https://reader031.vdocuments.mx/reader031/viewer/2022020207/556600b4d8b42a2a4d8b4e50/html5/thumbnails/61.jpg)
比較(ライフサイクル)
休止状態に入ったアプリケーションが完全に終了するタイミングはOS依存かつ
イベントが発生しない。
この辺はWindows PhoneとWindows 8のモデルは似ています。
(Windows PhoneはDormantとTombstoneの二つの休止状態があるがアプリがは意識する必要はない)
![Page 62: Windows phone & windows 8で見えてくるメトロの世界](https://reader031.vdocuments.mx/reader031/viewer/2022020207/556600b4d8b42a2a4d8b4e50/html5/thumbnails/62.jpg)
比較(ライフサイクル)
参考
Windows Phone の実行モデルの概要
http://msdn.microsoft.com/ja-jp/library/ff817008%28v=vs.92%29
アプリに対する “常に動作している” 感覚を重視したアプリ ライフサイクルの管理
http://blogs.msdn.com/b/windowsappdev_ja/archive/2012/04/16/managing-app-lifecycle.aspx
![Page 63: Windows phone & windows 8で見えてくるメトロの世界](https://reader031.vdocuments.mx/reader031/viewer/2022020207/556600b4d8b42a2a4d8b4e50/html5/thumbnails/63.jpg)
比較(データ管理)
![Page 64: Windows phone & windows 8で見えてくるメトロの世界](https://reader031.vdocuments.mx/reader031/viewer/2022020207/556600b4d8b42a2a4d8b4e50/html5/thumbnails/64.jpg)
比較(データ管理)
分離ストレージ
・IsolatedStorage
・アプリの固有のデータ保存領域
・他のアプリケーションからは利用できない
・Windows Phoneの場合アプリ間の連携はクラウド(Web)を使う
・Windows8はコントラクトも利用できる
![Page 65: Windows phone & windows 8で見えてくるメトロの世界](https://reader031.vdocuments.mx/reader031/viewer/2022020207/556600b4d8b42a2a4d8b4e50/html5/thumbnails/65.jpg)
比較(データ管理)
ローミング
同一アプリ&同一LiveIDであれば
ローミングという仕組みを使って違うPCのアプリ同志でデータを共有できる。
家のPCでやったゲームの続きを持ちだしたノートPCで再開できる。
ローミングの反映には5分ほど時間がかかる・・・betaのころは
![Page 66: Windows phone & windows 8で見えてくるメトロの世界](https://reader031.vdocuments.mx/reader031/viewer/2022020207/556600b4d8b42a2a4d8b4e50/html5/thumbnails/66.jpg)
比較(データ管理)
ローミング
同一アプリ&同一LiveIDであれば
ローミングという仕組みを使って違うPCのアプリ同志でデータを共有できる。
家のPCでやったゲームの続きを持ちだしたノートPCで再開できる。
ローミングの反映には5分ほど時間がかかる・・・betaのころは
![Page 67: Windows phone & windows 8で見えてくるメトロの世界](https://reader031.vdocuments.mx/reader031/viewer/2022020207/556600b4d8b42a2a4d8b4e50/html5/thumbnails/67.jpg)
比較(データ管理)
参考
Consumer Preview 以降のアプリ開発者向けの変更点
http://blogs.msdn.com/b/windowsappdev_ja/archive/2012/06/07/consumer-preview.aspx
(引用)Release Preview では、この機能を拡張してアプリ設定の HighPriority ローミングを追加しました。高優先度ローミングを使って、アプリ内の少量の状態データを高い頻度でローミングできるようにすることで、PC 間で中断のないアプリ エクスペリエンスを実現することができます。
![Page 68: Windows phone & windows 8で見えてくるメトロの世界](https://reader031.vdocuments.mx/reader031/viewer/2022020207/556600b4d8b42a2a4d8b4e50/html5/thumbnails/68.jpg)
比較(データ管理)
ローミング
とはいえローミングは複数PCが必要なので開発が難しいのです。
そういう場合はWindows 8のリモートデバッグ機能を使いましょう。
![Page 69: Windows phone & windows 8で見えてくるメトロの世界](https://reader031.vdocuments.mx/reader031/viewer/2022020207/556600b4d8b42a2a4d8b4e50/html5/thumbnails/69.jpg)
比較(タイル)
![Page 70: Windows phone & windows 8で見えてくるメトロの世界](https://reader031.vdocuments.mx/reader031/viewer/2022020207/556600b4d8b42a2a4d8b4e50/html5/thumbnails/70.jpg)
比較(タイル)
タイル
![Page 71: Windows phone & windows 8で見えてくるメトロの世界](https://reader031.vdocuments.mx/reader031/viewer/2022020207/556600b4d8b42a2a4d8b4e50/html5/thumbnails/71.jpg)
比較(タイル)
タイル
アプリケーションを表す正方形ないし長方形のアイコン
バッジ
タイルに表示できる
数字や小さいアイコン
セカンダリタイル
2つめ以降のタイル
![Page 72: Windows phone & windows 8で見えてくるメトロの世界](https://reader031.vdocuments.mx/reader031/viewer/2022020207/556600b4d8b42a2a4d8b4e50/html5/thumbnails/72.jpg)
比較(タイル)
タイル
Windows Phoneのころからタイルはアプリを起動していない状態でユーザーに情報を伝えてアプリの起動を促すことのできる重要な要素でした。
ただしWindows Phoneのタイルはユーザーが設定してくれないとスタート画面に表示されない
アプリがデフォルトでスタート画面に表示され、タイル幅もワイドなものが利用できるようになり
Windows 8ではタイルの重要性がWindows Phoneより増してきています!!
![Page 73: Windows phone & windows 8で見えてくるメトロの世界](https://reader031.vdocuments.mx/reader031/viewer/2022020207/556600b4d8b42a2a4d8b4e50/html5/thumbnails/73.jpg)
比較(タイル)
DEMO 006 TileAndToastSample_RC
![Page 74: Windows phone & windows 8で見えてくるメトロの世界](https://reader031.vdocuments.mx/reader031/viewer/2022020207/556600b4d8b42a2a4d8b4e50/html5/thumbnails/74.jpg)
開発環境
![Page 75: Windows phone & windows 8で見えてくるメトロの世界](https://reader031.vdocuments.mx/reader031/viewer/2022020207/556600b4d8b42a2a4d8b4e50/html5/thumbnails/75.jpg)
開発環境
現時点でWindows 8のMetroスタイルアプリケーションを開発するには
Windows 8環境にインストールしたVisualStudio2012RCが必要
Windows 7環境などで開発できるエミュレーターが求められる
逆にWindows Phone開発はVisualStudio2012では無理で、2010が必要。
一応Windows 8環境でも実行できる。
![Page 76: Windows phone & windows 8で見えてくるメトロの世界](https://reader031.vdocuments.mx/reader031/viewer/2022020207/556600b4d8b42a2a4d8b4e50/html5/thumbnails/76.jpg)
開発環境
(参考)
Windows Phone SDK 7.1.1をWindows 8 Release Previewへインストールする際の注意点
http://blogs.msdn.com/b/aonishi/archive/2012/06/04/10314544.aspx
![Page 77: Windows phone & windows 8で見えてくるメトロの世界](https://reader031.vdocuments.mx/reader031/viewer/2022020207/556600b4d8b42a2a4d8b4e50/html5/thumbnails/77.jpg)
開発環境
開発言語は C# & XAML, C++/C & XAMLなどの従来の.NET環境に加え、
HTML+CSS!!
![Page 78: Windows phone & windows 8で見えてくるメトロの世界](https://reader031.vdocuments.mx/reader031/viewer/2022020207/556600b4d8b42a2a4d8b4e50/html5/thumbnails/78.jpg)
開発環境
(雑談・・・)
Windows 8 RPがMacBookで安定しない
MacBookProおよびMacBook環境でブートキャンプで
Windows 8を利用している声が聞こえる中、私のMacBookではしばらく使っていると原因不明のフリーズ発生!!
![Page 79: Windows phone & windows 8で見えてくるメトロの世界](https://reader031.vdocuments.mx/reader031/viewer/2022020207/556600b4d8b42a2a4d8b4e50/html5/thumbnails/79.jpg)
開発環境
(雑談・・・)
はい、ご存じのとおり6月1日(RP公開)の物語です
![Page 80: Windows phone & windows 8で見えてくるメトロの世界](https://reader031.vdocuments.mx/reader031/viewer/2022020207/556600b4d8b42a2a4d8b4e50/html5/thumbnails/80.jpg)
開発環境
(雑談・・・)
BootCamp上のWindows 7上のVirtualBoxで起動 ×(重い)
BootCamp上のVMWarePlayerで起動 ×(重い)
MacOS上のVirtualBoxで起動 ×(重い)
MacOS上のVMWareFusion上で起動 ようやく安定!!
![Page 81: Windows phone & windows 8で見えてくるメトロの世界](https://reader031.vdocuments.mx/reader031/viewer/2022020207/556600b4d8b42a2a4d8b4e50/html5/thumbnails/81.jpg)
開発環境
(雑談・・・)
かなり限定された環境ですが参考になれば
![Page 82: Windows phone & windows 8で見えてくるメトロの世界](https://reader031.vdocuments.mx/reader031/viewer/2022020207/556600b4d8b42a2a4d8b4e50/html5/thumbnails/82.jpg)
開発環境
(雑談2)
タブレットPCが欲しい!!
だけど普通のタブレットじゃなくてSnapできる解像度がいい
(この時点で日本製全滅)
![Page 83: Windows phone & windows 8で見えてくるメトロの世界](https://reader031.vdocuments.mx/reader031/viewer/2022020207/556600b4d8b42a2a4d8b4e50/html5/thumbnails/83.jpg)
開発環境
(雑談2)
そしてタブレットにもノートPCにもなるハイブリッドがいい
(この時点で選択肢無し)
タッチデバイスを触らないとWindows 8を理解できない!!
![Page 84: Windows phone & windows 8で見えてくるメトロの世界](https://reader031.vdocuments.mx/reader031/viewer/2022020207/556600b4d8b42a2a4d8b4e50/html5/thumbnails/84.jpg)
開発環境
(雑談2)
ここで登場!!
![Page 85: Windows phone & windows 8で見えてくるメトロの世界](https://reader031.vdocuments.mx/reader031/viewer/2022020207/556600b4d8b42a2a4d8b4e50/html5/thumbnails/85.jpg)
開発環境
(雑談2)
iPadのSplashTop Winというアプリで
Windows 8のタッチ環境が体験できます!!
DEMO・・・れるかな
![Page 86: Windows phone & windows 8で見えてくるメトロの世界](https://reader031.vdocuments.mx/reader031/viewer/2022020207/556600b4d8b42a2a4d8b4e50/html5/thumbnails/86.jpg)
まとめ
![Page 87: Windows phone & windows 8で見えてくるメトロの世界](https://reader031.vdocuments.mx/reader031/viewer/2022020207/556600b4d8b42a2a4d8b4e50/html5/thumbnails/87.jpg)
まとめ
Windows 8とWindows Phoneは共通点が多い
情報もそろっていて、アプリの規模も比較的小さいWindows Phone開発から入る手も!!
逆にWindows 8でアーリーアダプターを目指すのも手
![Page 88: Windows phone & windows 8で見えてくるメトロの世界](https://reader031.vdocuments.mx/reader031/viewer/2022020207/556600b4d8b42a2a4d8b4e50/html5/thumbnails/88.jpg)
まとめ
広島でもWindows Phoneのハンズオンを定期的にやってます!!
Facebookページ
http://www.facebook.com/groups/273162962715808/
Windows 8もやりたいなぁ
(今のところOS縛りがあるのでハンズオンは集まらないか? ご意見募集中)
![Page 89: Windows phone & windows 8で見えてくるメトロの世界](https://reader031.vdocuments.mx/reader031/viewer/2022020207/556600b4d8b42a2a4d8b4e50/html5/thumbnails/89.jpg)
参考
Windows8
参考:
「Windows Developer Days 2012」
http://channel9.msdn.com/Events/Windows-Developer-Days/Windows-Developer-Days-2012
![Page 90: Windows phone & windows 8で見えてくるメトロの世界](https://reader031.vdocuments.mx/reader031/viewer/2022020207/556600b4d8b42a2a4d8b4e50/html5/thumbnails/90.jpg)
参考
Windows8
参考:
「GoMetro」
http://www.facebook.com/5Metro
![Page 91: Windows phone & windows 8で見えてくるメトロの世界](https://reader031.vdocuments.mx/reader031/viewer/2022020207/556600b4d8b42a2a4d8b4e50/html5/thumbnails/91.jpg)
参考
Windows8
参考:
「Application Excellence Lab」
http://blogs.msdn.com/b/aonishi/archive/2012/05/25/10310345.aspx
マイクロソフト品川本社でWindows 8アプリをチェックしてもらえる
マーケットプレイスに申請できるトークンも手に入る!!
![Page 92: Windows phone & windows 8で見えてくるメトロの世界](https://reader031.vdocuments.mx/reader031/viewer/2022020207/556600b4d8b42a2a4d8b4e50/html5/thumbnails/92.jpg)
参考
参考:
Windows Developer Days - WA-021 ライブコーディングのシナリオ
http://blogs.msdn.com/b/aonishi/archive/2012/06/07/10316610.aspx?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+AkiraOnishiWeblog+%28Akira+Onishi%27s+weblog%29&utm_content=livedoor
WDDで大西さんのセッションWPからWin8への移植
![Page 93: Windows phone & windows 8で見えてくるメトロの世界](https://reader031.vdocuments.mx/reader031/viewer/2022020207/556600b4d8b42a2a4d8b4e50/html5/thumbnails/93.jpg)
御清聴ありがとうございました
![Page 94: Windows phone & windows 8で見えてくるメトロの世界](https://reader031.vdocuments.mx/reader031/viewer/2022020207/556600b4d8b42a2a4d8b4e50/html5/thumbnails/94.jpg)