windows phone ＆ windows 8で見えてくるメトロの世界

Windows Phone ＆ Windows 8で見えてくるメトロの世界

Community Open Day 2012

株式会社システムフレンド

西村誠

お品書き

• 自己紹介

• 本セッションの目指すところ

• 概要

• Windows Phone、Windows 8の比較

• 開発者向け情報

自己紹介

•

• 名前:coelacanth

• スキル:Windows Phone

（公開アプリ数約40）

• コミュニティ:

ヒーロー島、WindowsPhoneハンズオン

CSS nite 広島、Hokuriku.NET

自己紹介

•

仕事ではPHPでEC-CUBEというフレームワークを触っています。

（一応、EC-CUBEのエバンジェリスト）

プライベートでWindows Phone開発しています（お仕事案件募集中）。

本セッションの目指すところ

• Metroスタイルアプリケーションについて興味を持ってもらう

• Metroスタイルアプリケーションについて考えてもらう

• Metroスタイルアプリケーション開発の最初の一歩の案内をする

想定されるリスナー

• Windows Phone開発について多少知識がある人

• Windows 8について多少知識がある人

• C#での開発に多少興味がある人

• アプリ開発で儲けたい！！という勢いのある人

(皮算用：午前のキーノートでWindows 8の基礎は

説明されているはずだ！！)

概要

メトロUIを採用している2つのプラットフォーム

Windows Phone, Windows 8につていどのくらい知っていますか？

Windows Phone

Windows Phone概要

• Windows Mobileの後継

世界的には2010年8月に販売開始

日本は昨年（2011年）8月にIS1２Tが登場

• メトロUIを本格的に採用した初のデバイス

• 日本ではIS12T1機種

Windows Phone概要

• 書籍も充実

• Webの情報もそろってきました

• 開発者視点では開発が容易な環境

• ただし普及台数は・・・

Windows Phone概要

• 価格もこなれて来ました

http://www.microsoft.com/ja-jp/windowsphone/

Windows 8

Windows 8概要

• タブレット向けのUIとしてメトロUIを採用した次期WindowsOS

タブレットにもPCにもなるOS

• 6月1日にRelease Previewが公開

（はい、このタイミングで出ましたよ・・・）

・タブレットなどに多く利用されているCPU=ARM版もある

Windows 8概要

• 製品の公開は2012年末（10月？）

• まだまだ開発環境としては安定しているとは言えない

• Windows Phoneに比べればプラットフォームとしての受け皿は大きい？

Windows 8概要

• Visualstudio11(古いバージョン)のプロジェクトを

VisualStudio2012RC（6月1日公開バージョン）で開いてみると・・・

メトロUI

メトロUI概要

• 地下鉄（Metro）のわかりやすい・・・（もう耳にタコ？）

• パノラマやピボット、特徴的なデザインのコントロールがあるので、

デザインしなくてもメトロらしいアプリが作れるよね！！

（Windows Phone時代）

メトロUI概要

というのは昔の話。

Windows 8になってメトロUIはかなり作法も厳しく、

メトロの作法に沿ってないアプリケーションを要求されます

（まだマーケットについては不明点も多くはっきりとしたことは言えないのですが）

現在公開されている初期アプリ審査では作法に沿ってないアプリはかなり落ちたとか・・・

メトロUI概要

作法1.

検索やファイル共有はコントラクト（後述）を利用する

アプリ独自の検索フォームを用意するのではなく、OSの提供する機能を用いて検索を行わせる

（共通の操作を行わせることで迷わせない）

メトロUI概要

作法1.

作法に則った操作というのはメトロスタイルアプリケーションの一つのキーで、それによって「コンテンツ最優先」のUIを実現しています。

画面の右に隠れているチャームや、フリックしないとあらわれないアプリケーションバーなｄ（例：メトロ版IE10）

メトロUI概要

作法2.

コンテンツ最優先

ボタンや検索窓、リンクなどを極力そぎ落としてコンテンツをフルに表示できるようなUIにする

作法1.のようなアプリに共通したルールがあってこその画面構成

メトロUI概要

作法3.

グループ化や階層化をボックスで表現しない

作法4.

アプリバーの配置はグローバルコマンドは右側に、文脈上のコマンドは左側に

メトロUI概要

作法5.

タイポグラフィーも指標にあわせて

作法6.

画面遷移はHub&Spokesモデル

メトロUI概要

詳細はこの場では語り切れませんが、

Windows 8のメトロスタイルアプリケーションでは作法にあったアプリが求められます。

Windows Phoneもそうあるべき

メトロのコンセプトを理解した開発者急募な現状

比較

比較

Windows PhoneもWindows 8もメトロUIを採用した開発プラットフォームです

登場した時期も近いためきっと共通点も多いはず！！

Windows Phone開発者はWindows 8開発でも一歩先に出ることができるはず

比較

API

Windows 8 Windows Phone

WinRT Silverlight

XNA

Windows Phoneの開発環境はSilverlight、XNAでした Windows 8は異なりWinRTという新しいAPIを採用

比較

API

比較

WinRT(Windows Runtime)

ハイレベルなAPI(ハイレイヤーというべきか)

50ミリ秒以上waitが発生しそうな処理は非同期処理に

WinRTがJS+HTML、C#＋XAML、 C＋XAMLに対応できる仕組みは

「言語プロジェクション」「WinMetaData」によるマッピング

比較(コントラクト)


コントラクト

画像ピッカーや、カメラで撮影する場合はOSに処理をゆだねる。

(プログラム側では制御できなくなるが、画面の切り出しなどOS提供の機能が利用できる)

Windows PhoneのLauncher、Chooserと同じ感覚


役割 Windows 8 Windows Phone

写真を撮る CameraCaptureUI CameraCaptureTask

アドレス帳にアクセスする ContactPicker AddressChooserTask

アプリ間のデータやり取り DataTransferManager 該当なし(アプリ間のデータ授受はクラウドを利用)

Windows 8には検索を利用する検索コントラクトや、ファイルを操作するFilePickerなどがある


連絡先ピッカー

アプリから連絡先を取得して利用する

DEMO 001_ContactPickerSample_RC



async private void Button_Click_1(object sender, RoutedEventArgs e)

{

// using Windows.ApplicationModel.Contacts;

var picker = new ContactPicker();

ContactInformation contact = await picker.PickSingleContactAsync();


Windows Phoneなら

別のメソッドに分かれてしまう。

addressChooserTask = new AddressChooserTask();

addressChooserTask.Completed += addressChooserTask_Completed;

・

・

// 別メソッドかデリゲート

Void addressChooserTask_Completed(object sender, AddressResult e)

{



連絡先の選択はWindows Phoneの場合OSのアドレス帳、Windows 8は

Peopleアプリを含めその他対応アプリから取得可能と違いはあるが、

自分のアプリケーションから一旦制御が外れて、データを選択した結果を自分のアプリで取得できるのは似ている。

マイアプリ別のアプリ

ここでアドレスを選んだ結果が返ってくる



それ以外にもデータの共有、ファイルの取得、カメラを起動して

映像の画像の取得、印刷などのことをAPIを通して行うことができる。

マイアプリ別のアプリ

ここでアドレスを選んだ結果が返ってくる


DEMO 002_ContactSenderSample_RC

003_ContractReciverSample_RC


もう一つコントラクトのサンプルを紹介

アプリからアプリへとデータを渡すサンプル

マイアプリA Sender

マイアプリB Reciever

カメラデバイス


送信側

1.カメラの利用

CameraCaptureUI dialog = new CameraCaptureUI(); Size aspectRatio = new Size(16, 9); dialog.PhotoSettings.CroppedAspectRatio = aspectRatio; this.file = await dialog.CaptureFileAsync(CameraCaptureUIMode.Photo);


送信側

2.共有

DataTransferManager manager; manager = DataTransferManager.GetForCurrentView(); manager.DataRequested += new TypedEventHandler<DataTransferManager, DataRequestedEventArgs>(this.DataRequested); DataTransferManager.ShowShareUI();


送信側

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));


受け手側

1.起動

// AppXaml.csの以下のメソッドが呼び出される OnShareTargetActivated(Activation.ShareTargetActivatedEventArgs args)


受け手側

2.画像にセット

// Get bitmap var bitmap = new BitmapImage(); RandomAccessStreamReference source = await shareOperation.Data.GetBitmapAsync(); bitmap.SetSource(await source.OpenReadAsync()); reciveImage.Source = bitmap;


参考：

「アプリで Windows 8 のコントラクトのアクティベーションを行う」

http://blogs.msdn.com/b/windowsappdev_ja/archive/2012/03/30/windows-8-activating-contracts.aspx

比較(レイアウト)


Windows Phoneはハードウェア環境が統一されており、

画面サイズ、RAM、CPUなどの

機種毎の差異をあまり意識する必要はありませんでした。

変わってWindows 8は画面サイズはまちまち、ハードウェア環境は千差万別です。

それに加えてレイアウトに関しても色々と考慮しておくことがあります。


Windows Phone

WVGA 800×480

1024×768以上

Windows 8

Windows 8では1024×768以下でメトロスタイルアプリは利用できない

(注意)


スナップ(Snap App）

Windows 8の場合、

1366×768ピクセル以上の解像度を持つモニターなら

画面上に分割して2つのアプリを表示できる。

1366×768以上 Snap



開発する場合はシュミレーターで解像度を変えた場合を確認できる。

スナップも試せる。

DEMO 004 SnapSample

1366×768以上 Snap



判定

if (ApplicationView.Value == ApplicationViewState.Snapped) { this.stateText.Text = "Snapされました"; this.stateText.FontSize = 12; } else { this.stateText.Text = "Snapされていません"; this.stateText.FontSize = 48; }


セマンティックズーム

画面をズームして一覧性を高める仕組み。

Ctr+「+キー」でズームアップ、Ctr+「-キー」でズームダウン

キータッチの場合はピンチイン、ピンチアウト

ズームした場合に単純なズームではなく意味合いを変える。

DEMO「スタート画面」「マーケット」など



DEMO: 005 ZoomSample



<SemanticZoom x:Name="semanticZoom" > <SemanticZoom.ZoomedOutView> // ズームアウト時の画面 </SemanticZoom.ZoomedOutView> <SemanticZoom.ZoomedInView> // ズームイン時の画面 </SemanticZoom.ZoomedInView> </SemanticZoom>


まとめ

Windows Phoneは固定画面サイズ

スナップなどの表示を検討しなくて良いのでレイアウトに関しては容易

Windows 8では色々な端末解像度、スナップなどを考慮する必要がある

ボタンなどのコントロールは共通のものが多く、どちらもXAMLという点では

同じなので技術の応用度は高い

比較(ライフサイクル)


Windows PhoneとWindows 8のライフサイクルは非常に似ています。

実行中

休止中非実行


Windows Phone


Windows 8


Windows PhoneもWindows 8もデータを保存するタイミングは

休止状態に入るタイミング。

Windows Phone

Deactivatedイベント

Windows 8

OnSuspendingイベント


休止状態に入ったアプリケーションが完全に終了するタイミングはOS依存かつ

イベントが発生しない。

この辺はWindows PhoneとWindows 8のモデルは似ています。

(Windows PhoneはDormantとTombstoneの二つの休止状態があるがアプリがは意識する必要はない)


参考

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

比較(データ管理)


分離ストレージ

・IsolatedStorage

・アプリの固有のデータ保存領域

・他のアプリケーションからは利用できない

・Windows Phoneの場合アプリ間の連携はクラウド(Web)を使う

・Windows8はコントラクトも利用できる


ローミング

同一アプリ&同一LiveIDであれば

ローミングという仕組みを使って違うPCのアプリ同志でデータを共有できる。

家のPCでやったゲームの続きを持ちだしたノートPCで再開できる。

ローミングの反映には5分ほど時間がかかる・・・betaのころは


参考

Consumer Preview 以降のアプリ開発者向けの変更点

http://blogs.msdn.com/b/windowsappdev_ja/archive/2012/06/07/consumer-preview.aspx

(引用)Release Preview では、この機能を拡張してアプリ設定の HighPriority ローミングを追加しました。高優先度ローミングを使って、アプリ内の少量の状態データを高い頻度でローミングできるようにすることで、PC 間で中断のないアプリエクスペリエンスを実現することができます。


ローミング

とはいえローミングは複数PCが必要なので開発が難しいのです。

そういう場合はWindows 8のリモートデバッグ機能を使いましょう。

比較(タイル)

比較(タイル)

タイル

比較(タイル)

タイル

アプリケーションを表す正方形ないし長方形のアイコン

バッジ

タイルに表示できる

数字や小さいアイコン

セカンダリタイル

2つめ以降のタイル

比較(タイル)

タイル

Windows Phoneのころからタイルはアプリを起動していない状態でユーザーに情報を伝えてアプリの起動を促すことのできる重要な要素でした。

ただしWindows Phoneのタイルはユーザーが設定してくれないとスタート画面に表示されない

アプリがデフォルトでスタート画面に表示され、タイル幅もワイドなものが利用できるようになり

Windows 8ではタイルの重要性がWindows Phoneより増してきています！！

比較(タイル)

DEMO 006 TileAndToastSample_RC

開発環境

開発環境

現時点でWindows 8のMetroスタイルアプリケーションを開発するには

Windows 8環境にインストールしたVisualStudio2012RCが必要

Windows 7環境などで開発できるエミュレーターが求められる

逆にWindows Phone開発はVisualStudio2012では無理で、2010が必要。

一応Windows 8環境でも実行できる。

開発環境

(参考)

Windows Phone SDK 7.1.1をWindows 8 Release Previewへインストールする際の注意点

http://blogs.msdn.com/b/aonishi/archive/2012/06/04/10314544.aspx

開発環境

開発言語は C# & XAML, C++/C & XAMLなどの従来の.NET環境に加え、

HTML+CSS！！

開発環境

(雑談・・・)

Windows 8 RPがMacBookで安定しない

MacBookProおよびMacBook環境でブートキャンプで

Windows 8を利用している声が聞こえる中、私のMacBookではしばらく使っていると原因不明のフリーズ発生！！

開発環境

(雑談・・・)

はい、ご存じのとおり6月1日(RP公開)の物語です

開発環境

(雑談・・・)

BootCamp上のWindows 7上のVirtualBoxで起動 ×(重い)

BootCamp上のVMWarePlayerで起動 ×(重い)

MacOS上のVirtualBoxで起動 ×(重い)

MacOS上のVMWareFusion上で起動ようやく安定！！

開発環境

(雑談・・・)

かなり限定された環境ですが参考になれば

開発環境

(雑談2)

タブレットPCが欲しい！！

だけど普通のタブレットじゃなくてSnapできる解像度がいい

(この時点で日本製全滅)

開発環境

(雑談2)

そしてタブレットにもノートPCにもなるハイブリッドがいい

(この時点で選択肢無し)

タッチデバイスを触らないとWindows 8を理解できない！！

開発環境

(雑談2)

ここで登場！！

開発環境

(雑談2)

iPadのSplashTop Winというアプリで

Windows 8のタッチ環境が体験できます！！

DEMO・・・れるかな

まとめ

まとめ

Windows 8とWindows Phoneは共通点が多い

情報もそろっていて、アプリの規模も比較的小さいWindows Phone開発から入る手も！！

逆にWindows 8でアーリーアダプターを目指すのも手

まとめ

広島でもWindows Phoneのハンズオンを定期的にやってます！！

Facebookページ

http://www.facebook.com/groups/273162962715808/

Windows 8もやりたいなぁ

(今のところOS縛りがあるのでハンズオンは集まらないか？ご意見募集中)




参考

Windows8

参考：

「Windows Developer Days 2012」

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

参考

Windows8

参考：

「GoMetro」

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

参考

Windows8

参考：

「Application Excellence Lab」


マイクロソフト品川本社でWindows 8アプリをチェックしてもらえる

マーケットプレイスに申請できるトークンも手に入る！！


参考

参考：

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への移植

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

windows phone ＆ windows 8で見えてくるメトロの世界

Documents