Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Windows 10 mobile uwpアプリの始め方~continuum編~ (公開用)

3.247 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Software
  • Als Erste(r) kommentieren

Windows 10 mobile uwpアプリの始め方~continuum編~ (公開用)

  1. 1. Windows 10 Mobile UWPアプリ の始め方 ~Continuum for Phone編~ @第14回まどべんよっかいち 2016/2/27 青木 宣明(@kumar0001)
  2. 2. 今日の内容 Continuum for Phone • Continuumとは? • Continuum for Phoneとは? • Continuum for Phoneの形態 Continuum対応アプリの開発 • Continuum対応アプリの要件 • Continuum対応アプリ開発のポイント Continuum for Phoneの活用方法
  3. 3. Continuum for Phone
  4. 4. Continuumとは? 英辞郎 on the WEBより Continuumとは“連続”したつながり
  5. 5. Windows 10のContinuum デバイスの物理形態に応じて、アプリ と Windowsシェルの外観と動作を最 適化する • デバイスを変えたときのユーザ体験の連続 性 Windows 10でのContinuum • タブレットモードとデスクトップモードの 切り替え
  6. 6. Continuumの例 2-in-1 セパレート タブレット
  7. 7. Continuum for Phoneとは? Windows 10 Mobile端末(電話)に Continuum対応のアクセサリを付けて、 モニターだけでなくマウスやキーボー ドを接続して、その電話をノート PC のように使い、さまざまな処理を実行 するユーザ体験 アプリを表示するディスプレイに基づ いてそのユーザーインターフェースを 最適化する
  8. 8. Continuum for Phoneの形態 https://msdn.microsoft.com/en-us/library/windows/hardware/mt608594 ①ワイヤレスドングル ②無線ドック ③有線ドック
  9. 9. ①ワイヤレスドングルでの無線Continuum https://www.microsoft.com/hardware/ja-jp/p/wireless-display-adapter ワイヤレスドングル キーボード・マウスは Bluetoothなど無線で接続
  10. 10. NuAns NEOによる無線Continuum
  11. 11. 無線Continuumの拡張 Miracast User Input Back Channel (UIBC) 拡張 Actiontec ScreenBeam Mini2 Continuum MiracastアダプタにUSBで キーボード、マウスを接 続できる キーボード、マウス の情報はUIBCで電話 に送信される
  12. 12. ②無線ドックによるContinuum
  13. 13. ③有線ドックによるContinuum 電話とは有線で接続
  14. 14. Lumia 950 https://www.microsoft.com/en/mobile/accessory/hd-500/
  15. 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. 16. Continuum for Phone 無線Continuum • 端末がタッチパッドに • Continuumでのスタートメニュー • 大画面での表示 • 2画面対応したアプリの例 PowerPointのプレゼンテーションモード デモ
  17. 17. 端末がタッチパッドに デモ
  18. 18. Continuumでのスタートメニュー デモ
  19. 19. 大画面での表示 デモ
  20. 20. 2画面対応したアプリの例 デモ
  21. 21. Continuum対応アプリの開発
  22. 22. Continuum対応アプリの要件は? UWPアプリであること UWPアプリであれば、Continuum使用 時に起動可能で、外部ディスプレイに 表示される
  23. 23. Continuum対応アプリのポイント Continuum利用の検知 外部ディスプレイ表示への適応 端末と外部ディスプレイの活用
  24. 24. Continuum対応アプリのポイント Continuum利用の検知 外部ディスプレイ表示への適応 端末と外部ディスプレイの活用
  25. 25. Continuum利用の検知 Continuum利用の検知 • SizeChangedイベント 端末・外部ディスプレイの判別 • UserInteractionModeを使用
  26. 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. 27. ②端末・外部ディスプレイの判別 UserInteractionMode で判別 • 端末画面 Touch • 外部モニタ Mouse http://blogs.msdn.com/b/shintak/archive/2016/02/07/10668404.aspx
  28. 28. Continuum対応アプリのポイント Continuum利用の検知 外部ディスプレイ表示への適応 端末と外部ディスプレイの活用
  29. 29. Continuumでアプリが対応すべきこと サイズ変更イベントでContinuum開始を検知 外部モニタへの表示はOSによって行われる アプリがすること=サイズ変更イベントを検 知して、解像度に応じてUIを変更する UWPアプリが複数の 解像度に対応する場 合と同じ
  30. 30. 解像度に応じたUI変更 – Adaptive UI 再配置 – Reposition リサイズ – Resize 再流し込み – Reflow 再表示 - Reveal 置き換え - Replace 再構成 - Re-architect
  31. 31. 再配置 – Reposition ・アプリのUI要素の位置を変更する
  32. 32. リサイズ – Resize ・UI要素、余白の大きさを調整する
  33. 33. 再流し込み – Reflow ・UI要素のフロー(配置の順序)を変更する (例)段組みを1列⇔2列と変更する
  34. 34. 再表示 - Reveal ・デバイスに特有の機能を、当該デバイスだけで表示する ・メニュー表示など、表示領域の大きなデバイスでは展開して表示する
  35. 35. 置き換え - Replace ・デバイスの表示領域によって、表示されるUI要素を置き換える (例)小型のデバイスでは必要に応じて展開されるハンバーガースタイルメ ニュー、大型のデバイスでは常時表示されるタブやコマンドバーを使う
  36. 36. 再構成 - Re-architect ・UIのレイアウトをデバイスごとに構成しなおす (例)小型のデバイスでは詳細情報を別画面で表示するが、大型のデバイスで は1画面で構成する
  37. 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. 38. AdaptiveTriggerでの切り替えポイント UIのレイアウトの切り替えは、デバイスの画面解像度を踏まえると、 320・720・1024がよい 電話 デスクトップ タブレット ファブレット
  39. 39. Continuum対応アプリのポイント Continuum利用の検知 外部ディスプレイ表示への適応 端末と外部ディスプレイの活用
  40. 40. 端末と外部ディスプレイの活用 ProjectionManagerで外部ディスプレ イの表示を制御できる • 外部ディスプレイへの表示ON • 端末と外部ディスプレイの表示入れ替え • 外部ディスプレイへの表示OFF
  41. 41. 外部ディスプレイへの表示ON 外部ディスプレイ側 電話側 電話側で実行 外部ディスプレイ側 電話側
  42. 42. 端末と外部ディスプレイの表示入れ替え 電話側で実行 外部ディスプレイ側 電話側
  43. 43. 外部ディスプレイへの表示OFF 外部ディスプレイ側 で実行 外部ディスプレイ側 電話側
  44. 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. 45. Continuum for Phoneの活用法
  46. 46. Continuumを何に使えるか? 単なる大画面表示として • 端末と外部ディスプレイのそれぞれの操作性を考 えて、Adaptive UIでアプリを設計する。 電話端末と外部ディスプレイの2画面表示 • 電話端末と外部ディスプレイの主・補助の関係に よるパターンが考えられる。
  47. 47. 単なる大画面表示として ・電話端末の画面よりは操作しやすい ・必ずしもデスクトップと同じ機能が使えるわけではないので、あくま でデスクトップPCの補完的位置づけ? Excel ・この利用方法だけではアプリをアピールしづらいのでは?
  48. 48. 電話端末と外部ディスプレイの2画面表示 PowerPointのプレゼンモードのように電話と 外部ディスプレイを補完的に使うことで、 PCのサブという位置付けとは違った方向で Continuumを活用できるのでは?
  49. 49. 電話端末と外部ディスプレイの2画面表示案① カメラ • ディスプレイ⇒画像の確認用ビューア、画像情報の詳細表示、(タッチ対応 であれば)シャッター/フォーカス操作 • 端末 ⇒カメラ本体 商談での電子カタログ • ディスプレイ⇒顧客向けのカタログ画面 • 端末 ⇒商品の在庫、価格などの担当者向け情報 家計簿・会計ソフト • ディスプレイ⇒帳簿 • 端末 ⇒入力補助(電卓、科目の入力用リストなど)
  50. 50. まとめ Continuum対応は特別なことではない • UWPアプリとして複数解像度に対応しておく。 • サイズ変更イベントを受けて、Visual State& Adaptive UIで適切なUIに変更する。 端末と外部ディスプレイの活用 • 大画面での表示だけでなく、端末と外部ディスプ レイの2画面を活用したアプリも考えたい。
  51. 51. Continuum for Phoneの課題 デスクトップの代替には厳しい • 有線Dockとモニタ、キーボードを用意するか? • デバイスの連続性よりも、UWPアプリのマルチデ バイス対応とクラウドによる同期で間に合いそう
  52. 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. 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. 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

×