universal windows app 入門
TRANSCRIPT
![Page 1: Universal Windows app 入門](https://reader035.vdocuments.net/reader035/viewer/2022062312/5565fbcfd8b42a20158b54ed/html5/thumbnails/1.jpg)
Universal Windows app入門どんなテクノロジなのか?どこまでできるのか?
大田 一希
![Page 2: Universal Windows app 入門](https://reader035.vdocuments.net/reader035/viewer/2022062312/5565fbcfd8b42a20158b54ed/html5/thumbnails/2.jpg)
お約束事項• 掲載内容は私自身の見解であり、所属する組織を代
表するものではありません
![Page 3: Universal Windows app 入門](https://reader035.vdocuments.net/reader035/viewer/2022062312/5565fbcfd8b42a20158b54ed/html5/thumbnails/3.jpg)
自己紹介• 名前
大田 一希(かずき) Twitter : @okazuki
• 肩書き Microsoft MVP for Client App Dev
2011/07-2014/06
• Blog かずきの Blog@hatena
http://okazuki.hatenablog.com/
• 猫派 / 犬派 犬派
![Page 4: Universal Windows app 入門](https://reader035.vdocuments.net/reader035/viewer/2022062312/5565fbcfd8b42a20158b54ed/html5/thumbnails/4.jpg)
今日のゴール• Universal Windows app について1つ「へ~っ」って
思ってもらう
![Page 5: Universal Windows app 入門](https://reader035.vdocuments.net/reader035/viewer/2022062312/5565fbcfd8b42a20158b54ed/html5/thumbnails/5.jpg)
Universal Windows app とは
12:38Start User Name
![Page 6: Universal Windows app 入門](https://reader035.vdocuments.net/reader035/viewer/2022062312/5565fbcfd8b42a20158b54ed/html5/thumbnails/6.jpg)
売り文句• ワンソースでマルチプラットフォームのアプリが開
発できる
ローミングデータ共有
ストア上で同じアプリ扱い
![Page 7: Universal Windows app 入門](https://reader035.vdocuments.net/reader035/viewer/2022062312/5565fbcfd8b42a20158b54ed/html5/thumbnails/7.jpg)
開催日 > プログラム >
Text
Text
Text
Text
Universal Windows app入門
etc
etc
2014/05/10@なぞ社
2014/05/10@なぞ社
お知らせ
![Page 8: Universal Windows app 入門](https://reader035.vdocuments.net/reader035/viewer/2022062312/5565fbcfd8b42a20158b54ed/html5/thumbnails/8.jpg)
12:38
WPArch
texttexttexttext
お知らせ
![Page 9: Universal Windows app 入門](https://reader035.vdocuments.net/reader035/viewer/2022062312/5565fbcfd8b42a20158b54ed/html5/thumbnails/9.jpg)
実現するための仕組み 1• Windows Runtime が Windows Phone に実装された
Windows Kernel Services
入力、インタラクション、 etc… DirectX 、メディア、 etc…
Windows Runtime
C/C++ C#/VB
XAML
JavaScript
HTML/CSS
![Page 10: Universal Windows app 入門](https://reader035.vdocuments.net/reader035/viewer/2022062312/5565fbcfd8b42a20158b54ed/html5/thumbnails/10.jpg)
高い互換性
Windowsstore app
WindowsPhone app
固有部分• SettingFlyout• AppBar• SearchBox• etc…
固有部分• BackButton• Pivot• System Chrome• etc…
![Page 11: Universal Windows app 入門](https://reader035.vdocuments.net/reader035/viewer/2022062312/5565fbcfd8b42a20158b54ed/html5/thumbnails/11.jpg)
実現するための仕組み 2• IDE によるサポート
Windows ( Windows 8.1) ストアアプリのプロジェクト
WindowsPhone ( Windows Phone 8.1) Windows Phone アプリのプロジェクト
Shred 共通部分のコードを置く プラットフォーム固有部は #if
ディレクティブ
![Page 12: Universal Windows app 入門](https://reader035.vdocuments.net/reader035/viewer/2022062312/5565fbcfd8b42a20158b54ed/html5/thumbnails/12.jpg)
コンパイル時の動作• コンパイルは別々に行われる
Windows store app + Shared プロジェクト Windows Phone app + Shared プロジェクト
![Page 13: Universal Windows app 入門](https://reader035.vdocuments.net/reader035/viewer/2022062312/5565fbcfd8b42a20158b54ed/html5/thumbnails/13.jpg)
地味に非互換• 90% 以上の互換性の厄介さはご存知ですよね?
![Page 14: Universal Windows app 入門](https://reader035.vdocuments.net/reader035/viewer/2022062312/5565fbcfd8b42a20158b54ed/html5/thumbnails/14.jpg)
非互換と Tips
![Page 15: Universal Windows app 入門](https://reader035.vdocuments.net/reader035/viewer/2022062312/5565fbcfd8b42a20158b54ed/html5/thumbnails/15.jpg)
ケース1「戻る」• Windows Phone では、ハードボタンの戻るを処理し
ないとアプリが閉じてしまう
12:38
October, 2010
SuMo Tu WeTh Fr Sa26 27 28 29 30 1 23 4 5 6 7 8 9
10 11 12 13 14 15 1617 18 19 20 21 22 2324 25 26 27 28 29 3031 1 2 3 4 5 6
App1
![Page 16: Universal Windows app 入門](https://reader035.vdocuments.net/reader035/viewer/2022062312/5565fbcfd8b42a20158b54ed/html5/thumbnails/16.jpg)
ケース1「戻る」• 対処方法
以下のコードをページに入れる#if WINDOWS_PHONE_APP Windows.Phone.UI.Input.HardwareButtons.BackPressed += (_, e) => { if (this.Frame.CanGoBack) { e.Handled = true; this.Frame.GoBack(); } }#endif
![Page 17: Universal Windows app 入門](https://reader035.vdocuments.net/reader035/viewer/2022062312/5565fbcfd8b42a20158b54ed/html5/thumbnails/17.jpg)
ケース2「ヘッダー」• Windows と Windows Phone のヘッダー違うよね
…?• 同じ名前の UserControl 定義テクニック
UserControl1 UserControl1
Page
Windows store app Windows Phone app
![Page 18: Universal Windows app 入門](https://reader035.vdocuments.net/reader035/viewer/2022062312/5565fbcfd8b42a20158b54ed/html5/thumbnails/18.jpg)
ケース3「 GridView の見た目」• ストアアプリと同じ ItemTemplate でいける?• 同じ名前のリソース定義テクニック
ItemTemplate1 ItemTemplate1
Page
Windows store app Windows Phone app
同じ要領で Style も出来ます。
![Page 19: Universal Windows app 入門](https://reader035.vdocuments.net/reader035/viewer/2022062312/5565fbcfd8b42a20158b54ed/html5/thumbnails/19.jpg)
ケース4「本当に画面を共通化する?」• 共通化可能だが…
これまでのテクニックでワンソース+ α で作成可能
• 現実解は基本別々に作って共通化可能な部分をUserControl で作成する
![Page 20: Universal Windows app 入門](https://reader035.vdocuments.net/reader035/viewer/2022062312/5565fbcfd8b42a20158b54ed/html5/thumbnails/20.jpg)
ケース4「本当に画面を共通化する?」
Model
ViewModel
View
Shared
個別
![Page 21: Universal Windows app 入門](https://reader035.vdocuments.net/reader035/viewer/2022062312/5565fbcfd8b42a20158b54ed/html5/thumbnails/21.jpg)
Universal Windows app の所感• 画面の共通化は、かなり難しい
共通の UserControl 同名の Style や UserControl
• その他の部分の共通化はかなり便利
![Page 22: Universal Windows app 入門](https://reader035.vdocuments.net/reader035/viewer/2022062312/5565fbcfd8b42a20158b54ed/html5/thumbnails/22.jpg)
まとめ• Universal Windows app とは以下の機能の組み合わせ
Windows ストアアプリと Windows Phone アプリの高い互換性
ユーザーがコードをリンクとして追加して管理してたコード共有を IDE が面倒を見てくれる
ストアに登録するときに同じアプリとして登録できる ローミングデータを共有できる
• 注意点 共通化するべき個所は何処か見極める