20140531 めとべや東京4 ユニバーサル アプリ入門

ユニバーサル Windows アプリ入門2014/5/31 めとべや東京 #4Micosoft MVP for Client App Dev大田　一希

自己紹介

▪ 名前▪ 大田　一希（かずき）

▪ Twitter ： @okazuki

▪ 肩書き▪ Microsoft MVP for Client App Dev

2011/07-2014/06

▪ Blog▪ かずきの Blog@hatena

http://okazuki.hatenablog.com/

▪ 猫派 / 犬派▪ 犬派

▪ 特徴▪ 左耳が超聞こえづらい

おやくそく事項

▪ 記載の内容は個人の見解であり、所属する企業を代表するものではありません。

今日のゴール

▪ ユニバーサル Windows アプリ作りの”楽さ”と“辛さ”の共有。

ユニバーサル Windows アプリとは

ユニバーサル Windows アプリとは

▪ 開発者目線▪ ワンソースで Windows ストアアプリと Windows Phone アプリの開発が

出来る

▪ 利用者目線▪ Windows ストアと Windows Phone ストアで同じアプリに見える▪ どちらかのストアで購入すると、もう片方でも購入済みになる▪ 設定情報などのデータが同期される

ユニバーサル Windows アプリのプラットフォーム▪ Windows ストアアプリでお馴染の Windows ランタイム

Windows Kernel Services

入力、インタラクション、 etc… DirectX 、メディア、 etc…

Windows Runtime

C/C++ C#/VB

XAML

JavaScript

HTML/CSS

PC の Windows ランタイムと , Phone の Windows ランタイム

▪ 高い互換性

Store app Phone app

固有部分• SettingFlyout• AppBar• SearchBox• etc…

固有部分• BackButton• Pivot• System Chrome• etc…

Visual Studio によるサポート

▪ ユニバーサル Windows アプリは 3 プロジェクト構成▪ Windows 8.1 用プロジェクト

▪ Windows Phone 8.1 用プロジェクト

▪ 共有用プロジェクト

コンパイル時の動作

▪ こうではない

Windows Phone 8.1Windows

Phoneアプリ

Windows 8.1ストアアプリ 参照

参照

Shared(dll)

コンパイル時の動作

▪ 以下のようなイメージでコンパイルされる

※ 要はソースコードをリンクで追加して共有したのと同じことになる。

Windows 8.1 Sharedストアアプリ

Windows Phone 8.1 SharedWindows

Phoneアプリ

エディタの支援機能

▪ Shared プロジェクトにあるファイルは、 Windows ストアアプリと Windows Phone アプリなのか編集中に切り替え可能

#ifディレクティブが切り替わる

デザイナの支援機能

▪ Shared プロジェクトにあるファイルは、 Windows ストアアプリと Windows Phone アプリなのか編集中に切り替え可能

ユニバーサル Windows アプリとは

▪ ストアで同一アプリとして扱える▪ ローミングデータの共有

▪ どちらかを購入すると両方購入したことになる

▪ 実行環境と Visual Studio の支援▪ 互換性の高い Windows ランタイム

▪ IDE によるソースコード共有の仕組み

共通化のテクニック

コードの共有

▪ Shared で定義したクラスをストアアプリ、 Phone アプリで使う

ページ ページ

共有するクラス

Windowsストアアプリ

WindowsPhone アプリ

コードの共有

▪ 非互換部分は #if ディレクティブ▪ Windows ストアアプリのときのみのコード▪ #if WINDOWS_APP

～#endif

▪ Windows Phone アプリのときのみのコード▪ #if WINDOWS_PHONE_APP

～#endif

さらに踏み込んだコードの共有

▪ ほぼ共通化。差分は UserControl 化

UserControl1 UserControl1

Page

Windowsストアアプリ

WindowsPhone アプリ

クラス

さらに踏み込んだコードの共有

▪ ヘッダーなどの差異の吸収▪ 同名の UserControl を個別のプロジェクトに定義する

▪ 一部の見た目の変更▪ リソースに同名の値を定義する

▪ 見た目の大きな差異▪ 同名の Style を個別のプロジェクトに定義する

▪ 共通のリソースの定義▪ Shared プロジェクトの ResourceDictionary などに定義する

割と死ぬ非互換！！

▪ *****Picker 系 , WebAuthenticationBroker 死亡▪ Store▪ await で OK

▪ Phone▪ 一度 Picker 系別アプリに移動するため、アプリはサスペンドする。 OnActivated イベントで続きの処理をする

▪ 地図死亡▪ そもそも別物

▪ AppBar▪ Store▪ 普通に使える

▪ Phone▪ 使えない。 CommandBar のみ。 TopAppBar プロパティをセットすると死ぬ

まとめ

まとめ

▪ ユニバーサル Windows アプリ▪ 楽にソースコード共有が出来る仕組み

▪ 高い互換性

▪ ストアでの 1 つのアプリっぽい演出やローミングデータの共有

▪ 注意点▪ どこを共有するのか注意しよう（安易に画面を共有すると…）

▪ 非互換は、しっかりあるので非互換部を Shared におかないように気を付けよう