第14回まどべんよっかいちの発表資料です。 デモコードは以下で公開しています。 https://github.com/nobukuma/MadobenYok20160227

1. Windows 10 Mobile UWPアプリ
の始め方
～Continuum for Phone編～
＠第14回まどべんよっかいち
2016/2/27
青木 宣明(@kumar0001)

2. 今日の内容
Continuum for Phone
• Continuumとは？
• Continuum for Phoneとは？
• Continuum for Phoneの形態
Continuum対応アプリの開発
• Continuum対応アプリの要件
• Continuum対応アプリ開発のポイント
Continuum for Phoneの活用方法

3. Continuum for Phone

4. Continuumとは？
英辞郎 on the WEBより
Continuumとは“連続”したつながり

5. Windows 10のContinuum
デバイスの物理形態に応じて、アプリ
と Windowsシェルの外観と動作を最
適化する
• デバイスを変えたときのユーザ体験の連続
性
Windows 10でのContinuum
• タブレットモードとデスクトップモードの
切り替え

6. Continuumの例
2-in-1
セパレート
タブレット

7. Continuum for Phoneとは？
Windows 10 Mobile端末（電話）に
Continuum対応のアクセサリを付けて、
モニターだけでなくマウスやキーボー
ドを接続して、その電話をノート PC
のように使い、さまざまな処理を実行
するユーザ体験
アプリを表示するディスプレイに基づ
いてそのユーザーインターフェースを
最適化する

8. Continuum for Phoneの形態
https://msdn.microsoft.com/en-us/library/windows/hardware/mt608594
①ワイヤレスドングル
②無線ドック
③有線ドック

9. ①ワイヤレスドングルでの無線Continuum
https://www.microsoft.com/hardware/ja-jp/p/wireless-display-adapter
ワイヤレスドングル
キーボード・マウスは
Bluetoothなど無線で接続

10. NuAns NEOによる無線Continuum

11. 無線Continuumの拡張
Miracast User Input Back Channel (UIBC) 拡張
Actiontec ScreenBeam Mini2 Continuum
MiracastアダプタにUSBで
キーボード、マウスを接
続できる
キーボード、マウス
の情報はUIBCで電話
に送信される

12. ②無線ドックによるContinuum

13. ③有線ドックによるContinuum
電話とは有線で接続

14. Lumia 950
https://www.microsoft.com/en/mobile/accessory/hd-500/

15. ハードウェア要件
Snapdragon 617(MS8952)
・NuAns NEO
・VAIO Phone Biz
・MADOSMA Q601
Snapdragon 808(MS8992)
・ Lumia 950
・ Lumia 950XL
・ Acer Jade Primo
Snapdragon 810(MS8994)
・？

16. Continuum for Phone
無線Continuum
• 端末がタッチパッドに
• Continuumでのスタートメニュー
• 大画面での表示
• 2画面対応したアプリの例
PowerPointのプレゼンテーションモード
デモ

17. 端末がタッチパッドに
デモ

18. Continuumでのスタートメニュー
デモ

19. 大画面での表示
デモ

20. 2画面対応したアプリの例
デモ

21. Continuum対応アプリの開発

22. Continuum対応アプリの要件は？
UWPアプリであること
UWPアプリであれば、Continuum使用
時に起動可能で、外部ディスプレイに
表示される

23. Continuum対応アプリのポイント
Continuum利用の検知
外部ディスプレイ表示への適応
端末と外部ディスプレイの活用

24. Continuum対応アプリのポイント
Continuum利用の検知
外部ディスプレイ表示への適応
端末と外部ディスプレイの活用

25. Continuum利用の検知
Continuum利用の検知
• SizeChangedイベント
端末・外部ディスプレイの判別
• UserInteractionModeを使用

26. ①Continuum利用の検知
Continuumの判別
• SizeChangedイベントが発生
public MainPage()
{
this.InitializeComponent();
Window.Current.SizeChanged += Current_SizeChanged;
}
private void Current_SizeChanged(
object sender,
Windows.UI.Core.WindowSizeChangedEventArgs e)
{
}
デスクトップでウィンドウサイズが変更
した場合と同じ

27. ②端末・外部ディスプレイの判別
UserInteractionMode で判別
• 端末画面 Touch
• 外部モニタ Mouse
http://blogs.msdn.com/b/shintak/archive/2016/02/07/10668404.aspx

28. Continuum対応アプリのポイント
Continuum利用の検知
外部ディスプレイ表示への適応
端末と外部ディスプレイの活用

29. Continuumでアプリが対応すべきこと
サイズ変更イベントでContinuum開始を検知
外部モニタへの表示はOSによって行われる
アプリがすること＝サイズ変更イベントを検
知して、解像度に応じてUIを変更する UWPアプリが複数の
解像度に対応する場
合と同じ

30. 解像度に応じたUI変更 – Adaptive UI
再配置 – Reposition
リサイズ – Resize
再流し込み – Reflow
再表示 - Reveal
置き換え - Replace
再構成 - Re-architect

31. 再配置 – Reposition
・アプリのUI要素の位置を変更する

32. リサイズ – Resize
・UI要素、余白の大きさを調整する

33. 再流し込み – Reflow
・UI要素のフロー（配置の順序）を変更する
（例）段組みを1列⇔2列と変更する

34. 再表示 - Reveal
・デバイスに特有の機能を、当該デバイスだけで表示する
・メニュー表示など、表示領域の大きなデバイスでは展開して表示する

35. 置き換え - Replace
・デバイスの表示領域によって、表示されるUI要素を置き換える
（例）小型のデバイスでは必要に応じて展開されるハンバーガースタイルメ
ニュー、大型のデバイスでは常時表示されるタブやコマンドバーを使う

36. 再構成 - Re-architect
・UIのレイアウトをデバイスごとに構成しなおす
（例）小型のデバイスでは詳細情報を別画面で表示するが、大型のデバイスで
は1画面で構成する

37. 外部ディスプレイ表示への適応
VisualState
• AdaptiveTrigger
 MinWindowWidthもしくはMinWindowHeight
VisualState.Setters
• x:Name=“name”を付けた他要素のプロパティを変更
可能
 例： RelativePanelの位置関係
 例： GridのColumnの幅（Grid.ColumnDefinition）
<VisualStateGroup x:Name="WindowSizeStates">
<VisualState x:Name="WideState">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth=“720” />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="name.RelativePanel.Below" Value="img" />
<Setter Target="name.RelativePanel.AlignLeftWith" Value="img" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>

38. AdaptiveTriggerでの切り替えポイント
UIのレイアウトの切り替えは、デバイスの画面解像度を踏まえると、
320・720・1024がよい
電話 デスクトップ
タブレット
ファブレット

39. Continuum対応アプリのポイント
Continuum利用の検知
外部ディスプレイ表示への適応
端末と外部ディスプレイの活用

40. 端末と外部ディスプレイの活用
ProjectionManagerで外部ディスプレ
イの表示を制御できる
• 外部ディスプレイへの表示ON
• 端末と外部ディスプレイの表示入れ替え
• 外部ディスプレイへの表示OFF

41. 外部ディスプレイへの表示ON
外部ディスプレイ側
電話側
電話側で実行
外部ディスプレイ側 電話側

42. 端末と外部ディスプレイの表示入れ替え
電話側で実行
外部ディスプレイ側 電話側

43. 外部ディスプレイへの表示OFF
外部ディスプレイ側
で実行
外部ディスプレイ側 電話側

44. 【補足】Continuum非対応
どうしても対応させたくない場合
• Package.appxanifest
mobile:MobileMultiScreenPropertiesの
RestrictToInternalScreen属性をtrueに
<Applications>
<Application ...>
<Extensions>
<mobile:Extension Category="windows.mobileMultiScreenProperties">
<mobile:MobileMultiScreenProperties
RestrictToInternalScreen="true"/>
</mobile:Extension>
</Extensions>
</Application>
</Applications>

45. Continuum for Phoneの活用法

46. Continuumを何に使えるか？
単なる大画面表示として
• 端末と外部ディスプレイのそれぞれの操作性を考
えて、Adaptive UIでアプリを設計する。
電話端末と外部ディスプレイの2画面表示
• 電話端末と外部ディスプレイの主・補助の関係に
よるパターンが考えられる。

47. 単なる大画面表示として
・電話端末の画面よりは操作しやすい
・必ずしもデスクトップと同じ機能が使えるわけではないので、あくま
でデスクトップPCの補完的位置づけ？
Excel
・この利用方法だけではアプリをアピールしづらいのでは？

48. 電話端末と外部ディスプレイの2画面表示
PowerPointのプレゼンモードのように電話と
外部ディスプレイを補完的に使うことで、
PCのサブという位置付けとは違った方向で
Continuumを活用できるのでは？

49. 電話端末と外部ディスプレイの2画面表示案①
カメラ
• ディスプレイ⇒画像の確認用ビューア、画像情報の詳細表示、（タッチ対応
であれば）シャッター／フォーカス操作
• 端末 ⇒カメラ本体
商談での電子カタログ
• ディスプレイ⇒顧客向けのカタログ画面
• 端末 ⇒商品の在庫、価格などの担当者向け情報
家計簿・会計ソフト
• ディスプレイ⇒帳簿
• 端末 ⇒入力補助（電卓、科目の入力用リストなど）

50. まとめ
Continuum対応は特別なことではない
• UWPアプリとして複数解像度に対応しておく。
• サイズ変更イベントを受けて、Visual State＆
Adaptive UIで適切なUIに変更する。
端末と外部ディスプレイの活用
• 大画面での表示だけでなく、端末と外部ディスプ
レイの２画面を活用したアプリも考えたい。

51. Continuum for Phoneの課題
デスクトップの代替には厳しい
• 有線Dockとモニタ、キーボードを用意するか？
• デバイスの連続性よりも、UWPアプリのマルチデ
バイス対応とクラウドによる同期で間に合いそう

52. 参考資料
MSDN
• Continuum for Phone
• https://msdn.microsoft.com/en-
us/library/windows/hardware/mt608594(v=vs.85).aspx
• ユニバーサル Windows プラットフォーム (UWP) アプリ用レス
ポンシブ デザイン 101
• https://msdn.microsoft.com/ja-jp/library/windows/apps/dn958435.aspx
• プロジェクション マネージャーのガイドライン
• https://msdn.microsoft.com/ja-jp/library/windows/apps/dn495078.aspx

53. 参考資料
MSDNブログ (JP)
• Continuum for Phone (電話用の Continuum) に対応したアプリを作成す
る
• http://blogs.msdn.com/b/naokis/archive/2016/02/04/continuum-for-
phone-continuum.aspx
• スマートフォン用 Continuum について
• http://blogs.msdn.com/b/shintak/archive/2016/01/05/10662939.aspx
• UWP を Continuum に完全対応させるには？
• http://blogs.msdn.com/b/shintak/archive/2016/02/07/10668366.aspx

54. 参考資料
MSDNブログ (EN)
• Optimizing apps for Continuum for phone
• https://blogs.windows.com/buildingapps/2015/12/07/optimizing
-apps-for-continuum-for-phone/
• Make your app look great on any size screen or window (10 by 10)
• https://blogs.windows.com/buildingapps/2015/09/01/make-
your-app-look-great-on-any-size-screen-or-window-10-by-10/
GitHub
• Hands on Workshop for Windows 10 Developer Training
• https://github.com/Windows-Readiness/WinDevWorkshop
• 02. Adaptive UI