Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Visual Studio 2015 リリース記念 勉強会 universal windows platform app

5,931 views

Published on

8/8日の勉強会の発表資料です。

Published in: Technology
  • Be the first to comment

Visual Studio 2015 リリース記念 勉強会 universal windows platform app

  1. 1. Universal Windows Platform app 2015/8/8 Visual Studio 2015 リリース記念 勉強会 大田 一希
  2. 2. 自己紹介 • 名前/SNS • 大田 一希 • Twitter: @okazuki • Blog • かずきのBlog@hatena http://okazuki.hatenablog.com/ • その他 • Microsoft MVP for Windows Platform Development • Minecraftはじめました • Spring Boot(Java)はじめました
  3. 3. お約束事項 • 記載の内容は個人の見解であり、所属する企業を代表するものではあり ません。
  4. 4. 今日のゴール • Visual Studio 2015で追加されたUniversal Windows Platform appの概 要と開発の雰囲気をつかんでもらう
  5. 5. Universal Windows Platform (UWP) まずは概要
  6. 6. Visual Studio 2015で開発できるアプリ(一部) Visual Studio 2015 C# Web ネイティブ ASP.NET 従来のデスクトップ Windows Forms WPF Xamarin iOS Windows 8 Windows Phone Windows Store app Universal Universal Windows Platform app And roid
  7. 7. Visual Studio 2015で開発できるアプリ(一部) Visual Studio 2015 C# Web ネイティブ ASP.NET 従来のデスクトップ Windows Forms WPF Xamarin iOS Windows 8 Windows Phone Windows Store app Universal Universal Windows Platform app And roid
  8. 8. Universal Windows Platform(UWP) • 以下の環境で動く • PC • Desktop • Tablet • Mobile • IoT • Surface Hub • Xbox • HoloLens • ワンバイナリ
  9. 9. Hello world(Demo(s)) • Visual Studio • Windows Universalから新規作成 • 1プロジェクト • パソコン・電話で動く
  10. 10. アダプティブなUI(レスポンシブ) 12:38 Window title Window title 電話 タブレット デスクトップ 一般的なプラットフォーム
  11. 11. 画面のブレークポイント • 電話(の中でも小さい)の画面 • 320epx以下 12:38
  12. 12. 画面のブレークポイント • タブレットや大きめの電話や横画面の電話 • 321epx~720epx Window title 12:38
  13. 13. 画面のブレークポイント • デスクトップなどの画面 • 720epx~1024epx Window title
  14. 14. 画面のブレークポイント • デスクトップなどの大きな画面 • 1024epx~ Window title
  15. 15. 画面のブレークポイント 12:38 Window title 12:38 Window title Window title 320epx 720epx 1024epx
  16. 16. アダプティブなコード • 状況に応じて呼び分け • 電話固有機能 • デスクトップ固有機能
  17. 17. 特徴的な機能
  18. 18. 特徴的な機能 • 強化されたVisual State Manager • RelativePanel • SplitView • AppBar • ApiInformation
  19. 19. 強化されたVisual State Manager • VisualStateに以下のプロパティが追加された • StateTriggers このステートに来るための条件を設定できる • Setter StyleなどのSetterと同じ要領でプロパティの変更を書ける (プロパティを変えるためだけにStoryboardを書かなくてもいい)
  20. 20. 強化されたVisual State Manager AdaptiveTriggerでWindowの最小幅を指 定することが出来る。 その最小幅まではそのStateになる。 SetterのTargetでコントロール名.プロパティの 書式で変更対象を指定してValueで変更 後の値を指定する。
  21. 21. Demo(s)
  22. 22. RelativePanel
  23. 23. RelativePanel • VisualTreeを深くせずに複雑なレイアウトが可能(らしい) • 相対位置によるレイアウト+Margin+Alignment • 画面の上下左右の端や中央 • とあるコントロールの上下左右の端や中央 • RelativePanel.LeftOf=“Button1”のように記述していく
  24. 24. RelativePanelの添付プロパティ • Above: 上 • Bellow: 下 • RightOf: 右 • LeftOf: 左 • AlignRightWith: 指定したコント ロールの右に合わせる • AlignLeftWith: 指定したコントロー ルの左に合わせる • AlignRightWithPanel: パネルの右 に合わせる • AlignLeftWithPanel: パネルの左 に合わせる • Top, Bottom, HorizontalCenter, VerticalCenter, etc…
  25. 25. RelativePanel Window title 起点 LeftOf RightOf Above Bellow
  26. 26. RelativePanel Window title 起点 AlightL eftWith AlighRig htWith AlignTopWith AlignBottomWith AlignVerticalCent erWith AlignHorizontalC enterWith
  27. 27. RelativePanel Window title AlignTopWithPanel AlignLeftWithPanel AlignBottomWithPanel AlignRightWithPanel AlignVerticalCenterWithPanel AlignHorizontalCenterWith Panel
  28. 28. Demo(s)
  29. 29. SplitView
  30. 30. SplitView 俗に言うハンバーガーメニューを作る コントロール
  31. 31. SplitView Paneにメニュー部分 Contentに右側部分
  32. 32. SplitView • DisplayMode 表示形式 • Inline • インライン形式 • Overlay • 上にかぶさる形式 • CompactInline • 完全に隠れないInline • CompactOverlay • 完全に隠れないOverlay • IsPaneOpen • Paneが表示中かどうか • CompactPaneLength • DisplayModeがCompactの時の表示幅
  33. 33. Demo(s)
  34. 34. おまけ • アイコンはSegoe MDL2 Assetsの私用領域に入ってる
  35. 35. AppBar
  36. 36. AppBar • 画面下(上)に置けるボタンを配置するた めのコントロール • UWPでは、画面の何処にでも置ける • PrimaryCommandが初期状態で表示され る • SecondaryCommandが…を押したときにメ ニューっぽく表示される • Contentプロパティに任意のコントロールを置 ける
  37. 37. Demo(s)
  38. 38. アダプティブコード 以下のAPIを使って型が提供されているかどうかを判定して処理を書いていく。 • ApiInformation • IsTypePresent • IsPropertyPresent • IsEventPresent • etc… https://msdn.microsoft.com/ja-jp/library/windows.foundation.metadata.apiinformation.aspx
  39. 39. アダプティブコード • “文字列”で型名などを指定します
  40. 40. Demo(s)
  41. 41. まとめ
  42. 42. まとめ • Universal Windows Platform app • 様々なプラットフォームで1バイナリで動く • PC • Mobile • SurfaceHub • Xbox • HoloLens • アダプティブUI • アダプティブコード
  43. 43. まとめ • 強化されたVisual State Manager • AdaptiveTriggerでレスポンシブ対応が簡単に可能 • RelativePanel • VisualTreeを深くせず複雑なレイアウトが可能 • VSMと連携して再配置が容易 • SplitView • ハンバーガーメニュー • AppBar • より汎用的なコントロールとなっている • AppInformation • アダプティブなコードを書くための肝のAPI
  44. 44. まとめ • Visual Studio 2015を使ってUWPを作りましょう!

×