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

22
ユユユユユユ Windows ユユユユユ 2014/5/31 めめめめめめ #4 Micosoft MVP for Client App Dev めめ

Upload: -

Post on 28-May-2015

854 views

Category:

Technology


2 download

TRANSCRIPT

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

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

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

自己紹介

▪ 名前▪ 大田 一希(かずき)

▪ Twitter : @okazuki

▪ 肩書き▪ Microsoft MVP for Client App Dev

2011/07-2014/06

▪ Blog▪ かずきの Blog@hatena

http://okazuki.hatenablog.com/

▪ 猫派 / 犬派▪ 犬派

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

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

おやくそく事項

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

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

今日のゴール

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

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

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

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

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

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

出来る

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

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

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

Windows Kernel Services

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

Windows Runtime

C/C++ C#/VB

XAML

JavaScript

HTML/CSS

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

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

▪ 高い互換性

Store app Phone app

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

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

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

Visual Studio によるサポート

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

▪ Windows Phone 8.1 用プロジェクト

▪ 共有用プロジェクト

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

コンパイル時の動作

▪ こうではない

Windows Phone 8.1Windows

Phoneアプリ

Windows 8.1ストアアプリ 参照

参照

Shared(dll)

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

コンパイル時の動作

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

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

Windows 8.1 Sharedストアアプリ

Windows Phone 8.1 SharedWindows

Phoneアプリ

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

エディタの支援機能

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

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

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

デザイナの支援機能

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

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

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

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

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

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

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

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

共通化のテクニック

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

コードの共有

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

ページ ページ

共有するクラス

Windowsストアアプリ

WindowsPhone アプリ

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

コードの共有

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

~#endif

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

~#endif

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

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

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

UserControl1 UserControl1

Page

Windowsストアアプリ

WindowsPhone アプリ

クラス

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

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

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

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

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

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

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

割と死ぬ非互換!!

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

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

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

▪ AppBar▪ Store▪ 普通に使える

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

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

まとめ

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

まとめ

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

▪ 高い互換性

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

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

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