20140531 めとべや東京4 ユニバーサル アプリ入門
TRANSCRIPT
![Page 1: 20140531 めとべや東京4 ユニバーサル アプリ入門](https://reader036.vdocuments.site/reader036/viewer/2022062300/5565fcdfd8b42a2a4d8b4bc6/html5/thumbnails/1.jpg)
ユニバーサル Windows アプリ入門2014/5/31 めとべや東京 #4Micosoft MVP for Client App Dev大田 一希
![Page 2: 20140531 めとべや東京4 ユニバーサル アプリ入門](https://reader036.vdocuments.site/reader036/viewer/2022062300/5565fcdfd8b42a2a4d8b4bc6/html5/thumbnails/2.jpg)
自己紹介
▪ 名前▪ 大田 一希(かずき)
▪ Twitter : @okazuki
▪ 肩書き▪ Microsoft MVP for Client App Dev
2011/07-2014/06
▪ Blog▪ かずきの Blog@hatena
http://okazuki.hatenablog.com/
▪ 猫派 / 犬派▪ 犬派
▪ 特徴▪ 左耳が超聞こえづらい
![Page 3: 20140531 めとべや東京4 ユニバーサル アプリ入門](https://reader036.vdocuments.site/reader036/viewer/2022062300/5565fcdfd8b42a2a4d8b4bc6/html5/thumbnails/3.jpg)
おやくそく事項
▪ 記載の内容は個人の見解であり、所属する企業を代表するものではありません。
![Page 4: 20140531 めとべや東京4 ユニバーサル アプリ入門](https://reader036.vdocuments.site/reader036/viewer/2022062300/5565fcdfd8b42a2a4d8b4bc6/html5/thumbnails/4.jpg)
今日のゴール
▪ ユニバーサル Windows アプリ作りの”楽さ”と“辛さ”の共有。
![Page 5: 20140531 めとべや東京4 ユニバーサル アプリ入門](https://reader036.vdocuments.site/reader036/viewer/2022062300/5565fcdfd8b42a2a4d8b4bc6/html5/thumbnails/5.jpg)
ユニバーサル Windows アプリとは
![Page 6: 20140531 めとべや東京4 ユニバーサル アプリ入門](https://reader036.vdocuments.site/reader036/viewer/2022062300/5565fcdfd8b42a2a4d8b4bc6/html5/thumbnails/6.jpg)
ユニバーサル Windows アプリとは
▪ 開発者目線▪ ワンソースで Windows ストアアプリと Windows Phone アプリの開発が
出来る
▪ 利用者目線▪ Windows ストアと Windows Phone ストアで同じアプリに見える▪ どちらかのストアで購入すると、もう片方でも購入済みになる▪ 設定情報などのデータが同期される
![Page 7: 20140531 めとべや東京4 ユニバーサル アプリ入門](https://reader036.vdocuments.site/reader036/viewer/2022062300/5565fcdfd8b42a2a4d8b4bc6/html5/thumbnails/7.jpg)
ユニバーサル Windows アプリのプラットフォーム▪ Windows ストアアプリでお馴染の Windows ランタイム
Windows Kernel Services
入力、インタラクション、 etc… DirectX 、メディア、 etc…
Windows Runtime
C/C++ C#/VB
XAML
JavaScript
HTML/CSS
![Page 8: 20140531 めとべや東京4 ユニバーサル アプリ入門](https://reader036.vdocuments.site/reader036/viewer/2022062300/5565fcdfd8b42a2a4d8b4bc6/html5/thumbnails/8.jpg)
PC の Windows ランタイムと , Phone の Windows ランタイム
▪ 高い互換性
Store app Phone app
固有部分• SettingFlyout• AppBar• SearchBox• etc…
固有部分• BackButton• Pivot• System Chrome• etc…
![Page 9: 20140531 めとべや東京4 ユニバーサル アプリ入門](https://reader036.vdocuments.site/reader036/viewer/2022062300/5565fcdfd8b42a2a4d8b4bc6/html5/thumbnails/9.jpg)
Visual Studio によるサポート
▪ ユニバーサル Windows アプリは 3 プロジェクト構成▪ Windows 8.1 用プロジェクト
▪ Windows Phone 8.1 用プロジェクト
▪ 共有用プロジェクト
![Page 10: 20140531 めとべや東京4 ユニバーサル アプリ入門](https://reader036.vdocuments.site/reader036/viewer/2022062300/5565fcdfd8b42a2a4d8b4bc6/html5/thumbnails/10.jpg)
コンパイル時の動作
▪ こうではない
Windows Phone 8.1Windows
Phoneアプリ
Windows 8.1ストアアプリ 参照
参照
Shared(dll)
![Page 11: 20140531 めとべや東京4 ユニバーサル アプリ入門](https://reader036.vdocuments.site/reader036/viewer/2022062300/5565fcdfd8b42a2a4d8b4bc6/html5/thumbnails/11.jpg)
コンパイル時の動作
▪ 以下のようなイメージでコンパイルされる
※ 要はソースコードをリンクで追加して共有したのと同じことになる。
Windows 8.1 Sharedストアアプリ
Windows Phone 8.1 SharedWindows
Phoneアプリ
![Page 12: 20140531 めとべや東京4 ユニバーサル アプリ入門](https://reader036.vdocuments.site/reader036/viewer/2022062300/5565fcdfd8b42a2a4d8b4bc6/html5/thumbnails/12.jpg)
エディタの支援機能
▪ Shared プロジェクトにあるファイルは、 Windows ストアアプリと Windows Phone アプリなのか編集中に切り替え可能
#ifディレクティブが切り替わる
![Page 13: 20140531 めとべや東京4 ユニバーサル アプリ入門](https://reader036.vdocuments.site/reader036/viewer/2022062300/5565fcdfd8b42a2a4d8b4bc6/html5/thumbnails/13.jpg)
デザイナの支援機能
▪ Shared プロジェクトにあるファイルは、 Windows ストアアプリと Windows Phone アプリなのか編集中に切り替え可能
![Page 14: 20140531 めとべや東京4 ユニバーサル アプリ入門](https://reader036.vdocuments.site/reader036/viewer/2022062300/5565fcdfd8b42a2a4d8b4bc6/html5/thumbnails/14.jpg)
ユニバーサル Windows アプリとは
▪ ストアで同一アプリとして扱える▪ ローミングデータの共有
▪ どちらかを購入すると両方購入したことになる
▪ 実行環境と Visual Studio の支援▪ 互換性の高い Windows ランタイム
▪ IDE によるソースコード共有の仕組み
![Page 15: 20140531 めとべや東京4 ユニバーサル アプリ入門](https://reader036.vdocuments.site/reader036/viewer/2022062300/5565fcdfd8b42a2a4d8b4bc6/html5/thumbnails/15.jpg)
共通化のテクニック
![Page 16: 20140531 めとべや東京4 ユニバーサル アプリ入門](https://reader036.vdocuments.site/reader036/viewer/2022062300/5565fcdfd8b42a2a4d8b4bc6/html5/thumbnails/16.jpg)
コードの共有
▪ Shared で定義したクラスをストアアプリ、 Phone アプリで使う
ページ ページ
共有するクラス
Windowsストアアプリ
WindowsPhone アプリ
![Page 17: 20140531 めとべや東京4 ユニバーサル アプリ入門](https://reader036.vdocuments.site/reader036/viewer/2022062300/5565fcdfd8b42a2a4d8b4bc6/html5/thumbnails/17.jpg)
コードの共有
▪ 非互換部分は #if ディレクティブ▪ Windows ストアアプリのときのみのコード▪ #if WINDOWS_APP
~#endif
▪ Windows Phone アプリのときのみのコード▪ #if WINDOWS_PHONE_APP
~#endif
![Page 18: 20140531 めとべや東京4 ユニバーサル アプリ入門](https://reader036.vdocuments.site/reader036/viewer/2022062300/5565fcdfd8b42a2a4d8b4bc6/html5/thumbnails/18.jpg)
さらに踏み込んだコードの共有
▪ ほぼ共通化。差分は UserControl 化
UserControl1 UserControl1
Page
Windowsストアアプリ
WindowsPhone アプリ
クラス
![Page 19: 20140531 めとべや東京4 ユニバーサル アプリ入門](https://reader036.vdocuments.site/reader036/viewer/2022062300/5565fcdfd8b42a2a4d8b4bc6/html5/thumbnails/19.jpg)
さらに踏み込んだコードの共有
▪ ヘッダーなどの差異の吸収▪ 同名の UserControl を個別のプロジェクトに定義する
▪ 一部の見た目の変更▪ リソースに同名の値を定義する
▪ 見た目の大きな差異▪ 同名の Style を個別のプロジェクトに定義する
▪ 共通のリソースの定義▪ Shared プロジェクトの ResourceDictionary などに定義する
![Page 20: 20140531 めとべや東京4 ユニバーサル アプリ入門](https://reader036.vdocuments.site/reader036/viewer/2022062300/5565fcdfd8b42a2a4d8b4bc6/html5/thumbnails/20.jpg)
割と死ぬ非互換!!
▪ *****Picker 系 , WebAuthenticationBroker 死亡▪ Store▪ await で OK
▪ Phone▪ 一度 Picker 系別アプリに移動するため、アプリはサスペンドする。 OnActivated イベントで続きの処理をする
▪ 地図死亡▪ そもそも別物
▪ AppBar▪ Store▪ 普通に使える
▪ Phone▪ 使えない。 CommandBar のみ。 TopAppBar プロパティをセットすると死ぬ
![Page 21: 20140531 めとべや東京4 ユニバーサル アプリ入門](https://reader036.vdocuments.site/reader036/viewer/2022062300/5565fcdfd8b42a2a4d8b4bc6/html5/thumbnails/21.jpg)
まとめ
![Page 22: 20140531 めとべや東京4 ユニバーサル アプリ入門](https://reader036.vdocuments.site/reader036/viewer/2022062300/5565fcdfd8b42a2a4d8b4bc6/html5/thumbnails/22.jpg)
まとめ
▪ ユニバーサル Windows アプリ▪ 楽にソースコード共有が出来る仕組み
▪ 高い互換性
▪ ストアでの 1 つのアプリっぽい演出やローミングデータの共有
▪ 注意点▪ どこを共有するのか注意しよう(安易に画面を共有すると…)
▪ 非互換は、しっかりあるので非互換部を Shared におかないように気を付けよう