windows 10 mobile uwpアプリの始め方～continuum編～ (公開用)
TRANSCRIPT
Windows 10 Mobile UWP アプリの始め方～ Continuum for Phone 編～
＠第 14 回まどべんよっかいち2016/2/27青木 宣明 (@kumar0001)
今日の内容Continuum for Phone• Continuum とは？• Continuum for Phone とは？• Continuum for Phone の形態
Continuum 対応アプリの開発• Continuum 対応アプリの要件• Continuum 対応アプリ開発のポイント
Continuum for Phone の活用方法
Continuum for Phone
Continuum とは？
英辞郎 on the WEB より
Continuum とは“連続”したつながり
Windows 10 の Continuum
デバイスの物理形態に応じて、アプリと Windows シェルの外観と動作を最適化する• デバイスを変えたときのユーザ体験の連
続性Windows 10 での Continuum• タブレットモードとデスクトップモード
の切り替え
Continuum の例
2-in-1
セパレート
タブレット
Continuum for Phone とは？Windows 10 Mobile 端末（電話）にContinuum 対応のアクセサリを付けて、モニターだけでなくマウスやキーボードを接続して、その電話をノート PC のように使い、さまざまな処理を実行するユーザ体験
アプリを表示するディスプレイに基づいてそのユーザーインターフェースを最適化する
Continuum for Phone の形態
https://msdn.microsoft.com/en-us/library/windows/hardware/mt608594
① ワイヤレスドングル
② 無線ドック ③ 有線ドック
① ワイヤレスドングルでの無線 Continuum
https://www.microsoft.com/hardware/ja-jp/p/wireless-display-adapter
ワイヤレスドングル
キーボード・マウスはBluetooth など無線で接続
NuAns NEO による無線 Continuum
無線 Continuum の拡張Miracast User Input Back Channel (UIBC) 拡張
Actiontec ScreenBeam Mini2 Continuum
Miracast アダプタに USB でキーボード、マウスを接続できる
キーボード、マウスの情報は UIBC で電話に送信される
② 無線ドックによる Continuum
③ 有線ドックによる Continuum
電話とは有線で接続
Lumia 950
https://www.microsoft.com/en/mobile/accessory/hd-500/
ハードウェア要件Snapdragon 617(MS8952)・ NuAns NEO・ VAIO Phone Biz・ MADOSMA Q601
Snapdragon 808(MS8992)・ Lumia 950・ Lumia 950XL・ Acer Jade Primo
Snapdragon 810(MS8994)・？
Continuum for Phone
無線 Continuum• 端末がタッチパッドに• Continuum でのスタートメニュー• 大画面での表示• 2 画面対応したアプリの例
PowerPoint のプレゼンテーションモード
デモ
端末がタッチパッドに デモ
Continuum でのスタートメニューデモ
大画面での表示 デモ
2 画面対応したアプリの例 デモ
Continuum 対応アプリの開発
Continuum 対応アプリの要件は？
UWP アプリであること
UWP アプリであれば、 Continuum 使用時に起動可能で、外部ディスプレイに表示される
Continuum 対応アプリのポイント
Continuum 利用の検知
外部ディスプレイ表示への適応
端末と外部ディスプレイの活用
Continuum 対応アプリのポイント
Continuum 利用の検知
外部ディスプレイ表示への適応
端末と外部ディスプレイの活用
Continuum 利用の検知
Continuum 利用の検知• SizeChanged イベント
端末・外部ディスプレイの判別• UserInteractionMode を使用
①Continuum 利用の検知Continuum の判別• SizeChanged イベントが発生
public MainPage(){ this.InitializeComponent(); Window.Current.SizeChanged += Current_SizeChanged;}
private void Current_SizeChanged( object sender, Windows.UI.Core.WindowSizeChangedEventArgs e){} デスクトップでウィンドウサイズが変更した場合と同じ
② 端末・外部ディスプレイの判別UserInteractionMode で判別• 端末画面 Touch• 外部モニタ Mouse
http://blogs.msdn.com/b/shintak/archive/2016/02/07/10668404.aspx
Continuum 対応アプリのポイント
Continuum 利用の検知
外部ディスプレイ表示への適応
端末と外部ディスプレイの活用
Continuum でアプリが対応すべきことサイズ変更イベントで Continuum 開始を検知
外部モニタへの表示は OS によって行われる
アプリがすること＝サイズ変更イベントを検知して、解像度に応じて UI を変更する UWP アプリが複数の解像度に対応する場合と同じ
解像度に応じた UI 変更 – Adaptive UI
再配置 – Reposition
リサイズ – Resize
再流し込み – Reflow
再表示 - Reveal
置き換え - Replace
再構成 - Re-architect
再配置 – Reposition
・アプリの UI 要素の位置を変更する
リサイズ – Resize
・ UI 要素、余白の大きさを調整する
再流し込み – Reflow
・ UI 要素のフロー（配置の順序）を変更する （例）段組みを 1 列⇔ 2 列と変更する
再表示 - Reveal
・デバイスに特有の機能を、当該デバイスだけで表示する・メニュー表示など、表示領域の大きなデバイスでは展開して表示する
置き換え - Replace
・デバイスの表示領域によって、表示される UI 要素を置き換える （例）小型のデバイスでは必要に応じて展開されるハンバーガースタイルメニュー、大型のデバイスでは常時表示されるタブやコマンドバーを使う
再構成 - Re-architect
・ UI のレイアウトをデバイスごとに構成しなおす （例）小型のデバイスでは詳細情報を別画面で表示するが、大型のデバイスでは 1 画面で構成する
外部ディスプレイ表示への適応VisualState• AdaptiveTrigger
MinWindowWidth もしくは MinWindowHeightVisualState.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>
AdaptiveTrigger での切り替えポイント
UI のレイアウトの切り替えは、デバイスの画面解像度を踏まえると、320 ・ 720 ・ 1024 がよい
電話 デスクトップタブレットファブレット
Continuum 対応アプリのポイント
Continuum 利用の検知
外部ディスプレイ表示への適応
端末と外部ディスプレイの活用
端末と外部ディスプレイの活用ProjectionManager で外部ディスプレイの表示を制御できる• 外部ディスプレイへの表示 ON• 端末と外部ディスプレイの表示入れ替え• 外部ディスプレイへの表示 OFF
外部ディスプレイへの表示 ON
外部ディスプレイ側
電話側
電話側で実行
外部ディスプレイ側 電話側
端末と外部ディスプレイの表示入れ替え
電話側で実行
外部ディスプレイ側 電話側
外部ディスプレイへの表示 OFF
外部ディスプレイ側で実行
外部ディスプレイ側 電話側
【補足】 Continuum 非対応どうしても対応させたくない場合• Package.appxanifest
mobile:MobileMultiScreenProperties のRestrictToInternalScreen 属性を true に
<Applications> <Application ...> <Extensions> <mobile:Extension Category="windows.mobileMultiScreenProperties"> <mobile:MobileMultiScreenProperties RestrictToInternalScreen="true"/> </mobile:Extension> </Extensions> </Application> </Applications>
Continuum for Phone の活用法
Continuum を何に使えるか？単なる大画面表示として• 端末と外部ディスプレイのそれぞれの操作性を考えて、 Adaptive UI でアプリを設計する。
電話端末と外部ディスプレイの 2 画面表示• 電話端末と外部ディスプレイの主・補助の関係によるパターンが考えられる。
単なる大画面表示として
・電話端末の画面よりは操作しやすい・必ずしもデスクトップと同じ機能が使えるわけではないので、あくまでデスクトップ PC の補完的位置づけ？
Excel
・この利用方法だけではアプリをアピールしづらいのでは？
電話端末と外部ディスプレイの 2 画面表示
PowerPoint のプレゼンモードのように電話と外部ディスプレイを補完的に使うことで、 PC のサブという位置付けとは違った方向で Continuum を活用できるのでは？
電話端末と外部ディスプレイの 2 画面表示案①カメラ• ディスプレイ⇒画像の確認用ビューア、画像情報の詳細表示、（タッチ対応であれば）シャッター／フォーカス操作• 端末 ⇒カメラ本体
商談での電子カタログ• ディスプレイ⇒顧客向けのカタログ画面• 端末 ⇒商品の在庫、価格などの担当者向け情報
家計簿・会計ソフト• ディスプレイ⇒帳簿• 端末 ⇒入力補助（電卓、科目の入力用リストなど）
まとめContinuum 対応は特別なことではない• UWP アプリとして複数解像度に対応しておく。• サイズ変更イベントを受けて、 Visual State＆
Adaptive UI で適切な UI に変更する。
端末と外部ディスプレイの活用• 大画面での表示だけでなく、端末と外部ディスプレイの２画面を活用したアプリも考えたい。
Continuum for Phone の課題
デスクトップの代替には厳しい• 有線 Dock とモニタ、キーボードを用意するか？• デバイスの連続性よりも、 UWP アプリのマルチデバイス対応とクラウドによる同期で間に合いそう
参考資料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
参考資料MSDN ブログ (JP)
• Continuum for Phone ( 電話用の Continuum) に対応したアプリを作成する• http://blogs.msdn.com/b/naokis/archive/2016/02/04/continuum-for-pho
ne-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
参考資料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