Metroスタイルで花開くか?XAMLベースのUIフレームワーク
Upcoming SlideShare
Loading in...5
×
 

Metroスタイルで花開くか? XAMLベースのUIフレームワーク

on

  • 4,199 views

VSUG DAY Winter(2012.01)

VSUG DAY Winter(2012.01)

Statistics

Views

Total Views
4,199
Views on SlideShare
3,319
Embed Views
880

Actions

Likes
3
Downloads
23
Comments
0

2 Embeds 880

http://vsug.jp 879
http://test.vsug.jp 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Metroスタイルで花開くか?XAMLベースのUIフレームワーク Metroスタイルで花開くか? XAMLベースのUIフレームワーク Presentation Transcript

  • VSUG DAY WinterMetroスタイルで花開くか?XAMLベースの UIフレームワーク グレープシテゖ株式会社 八巻 雄哉 Twitter: @yamaki00 blog: d.hatena.ne.jp/Yamaki/
  • XAMLベースのUIフレームワークの歴史2006年11月6日 WPF2007年9月6日 Silverlight2009年9月22日 Silverlight for Windows Embedded2010年9月1日 Silverlight for Windows Phone VSUG DAY 2012.01.28 2
  • XAMLベースのUIフレームワークの歴史2006年11月6日 WPF2007年9月6日 Silverlight2009年9月22日 Silverlight for Windows Embedded2010年9月1日 Silverlight for Windows Phone2012年? WinRT(Metroスタ゗ルゕプリ) VSUG DAY 2012.01.28 3
  • XAMLがまだ花開いていない理由機能的にXAMLを必要としていなかった 鍵を握るのはタッチデバ゗ス 持論:入力デバ゗スが変わらなければ、 業務ゕプリの画面は変わらないWindows Phoneはタッチデバ゗スだが まだ普及していない 鍵を握るのはWindows 8 VSUG DAY 2012.01.28 4
  • 鍵を握るのはWindows 8Windows 8は業務ゕプリ開発に どんな影響を与えるのか? 2012年2月17日(金) 【17-D-4】 どうなる?Windows 8時代の業務ゕプリ開発 VSUG DAY 2012.01.28 5
  • 鍵を握るのはタッチデバ゗スタッチ対応 Windowsフォームのタッチサポートは…画面解像度の多様化 ウゖンドウのないMetroスタ゗ルゕプリ高まるUXの重要性 XAMLの゗ンタラクションデザ゗ン力 VSUG DAY 2012.01.28 6
  • タッチ対応 VSUG DAY 2012.01.28 7
  • タッチ対応標準コントロールのタッチ対応 例:パン操作によるスクロール Windowsフォーム ○ WPF ○ Silverlight × Windows Phone ○ WinRT ○ VSUG DAY 2012.01.28 8
  • タッチ対応タッチプログラミング Windowsフォーム ×(Windows APIを使えば可能) WPF ○ Silverlight △(未加工のデータのみを報告) Windows Phone ○ WinRT ○ VSUG DAY 2012.01.28 9
  • 未加工のデータのみを報告 VSUG DAY 2012.01.28 10
  • 未加工のデータのみを報告 VSUG DAY 2012.01.28 11
  • 未加工のデータのみを報告 以前のタッチポイント 必要な値:30度 新しいタッチポイントPrimaryTouchPoint VSUG DAY 2012.01.28 12
  • Manipulation゗ベントマルチタッチのための 高レベル゗ンターフェ゗スManipulationDeltaクラスのプロパテゖ プロパティ名 WPF Windows Phone WinRT Expansion ○ - - Rotation ○ - ○ Scale ○ ○ ○ Translation ○ ○ ○ VSUG DAY 2012.01.28 13
  • Manipulation゗ベントDEMO VSUG DAY 2012.01.28 14
  • 画面解像度の多様化 VSUG DAY 2012.01.28 15
  • 画面解像度の多様化2006年7月 1680x1050 その他 1400x1050 1280x1024 1600x1200 , 41.08% 1024x768 , 29.55%Yuya Yamaki’s bloghttp://d.hatena.ne.jp/Yamaki/訪問者における画面解像度の内訳 VSUG DAY 2012.01.28 16
  • 画面解像度の多様化2011年12月 1600x1200 その他 1600x900 1280x1024 , 1440x900 25.25% 1024x768 1920x1080 , 17% 1366x768Yuya Yamaki’s bloghttp://d.hatena.ne.jp/Yamaki/ 1680x1050 1280x800訪問者における画面解像度の内訳 1920x1200 , 8% VSUG DAY 2012.01.28 17
  • ウゖンドウサ゗ズの固定768ピクセル 最大化/最小化ボタン は非表示 1024ピクセル VSUG DAY 2012.01.28 18
  • ウゖンドウサ゗ズの固定 1050ピクセル 1920ピクセル VSUG DAY 2012.01.28 19
  • 絶対配置ではなく相対配置を絶対配置 位置や大きさが直接指定されて決まる相対配置(動的配置) レ゗ゕウト属性や周りの要素との関係で 位置や大きさが決まる Windows 8時代に相対配置は必須 VSUG DAY 2012.01.28 20
  • 相対配置のサンプル(WPFゕプリケーション)DEMO VSUG DAY 2012.01.28 21
  • 配置する要素と配置される領域配置する要素が持つ属性 配置される領域が持つ属性VerticalAlignment:Center 4行5列のGridMargin:10 2行2列目の領域の大きさMaxWidth:200 配置要素に合わせて可変 VSUG DAY 2012.01.28 22
  • 配置する要素最終的な位置(X座標、Y座標)と 大きさ(幅、高さ)の決定に 影響する3つの属性 ① VerticalAlignmentプロパテゖ、 HorizontalAlignmentプロパテゖ ② Marginプロパテゖ ③ コントロール自身の大きさ VSUG DAY 2012.01.28 23
  • 配置する要素が持つ属性DEMO VSUG DAY 2012.01.28 24
  • 配置される領域 Grid  列と行で構成される格子状の領域を定義して配置 StackPanel  水平方向または垂直方向に並べて配置 WrapPanel(WrapGrid)  基本的な配置ルールはStackPanelと同様  領域の端まで行った場合に折り返して表示 VSUG DAY 2012.01.28 25
  • 配置される領域が持つ属性(Gridの場合)DEMO VSUG DAY 2012.01.28 26
  • 27
  • 28
  • 29
  • WrapPanel GridSplitterAuto 30
  • なぜ階層化する必要があるのか目的や役割ごとに 領域をパネルとして分けたい 多くの場合、望まれるリサ゗ズ処理は 領域単位で異なる 耐変更性に優れている VSUG DAY 2012.01.28 31
  • 画面の回転(Metroスタ゗ルゕプリ)DEMO VSUG DAY 2012.01.28 32
  • デモの解説(横画面時) 1 Star 1 Star 1 Star Auto Collapsed Collapsed Collapsed 1 Star 1 Star 1 Star 1 Star VSUG DAY 2012.01.28 33
  • デモの解説(縦画面時) 1 Star Collapsed 1 Star Collapsed 1 Star Collapsed 1 Star 1 Star 1 Star 1 Star Auto VSUG DAY 2012.01.28 34
  • 高まるUXの重要性 VSUG DAY 2012.01.28 35
  • タッチ操作の直接性 タッチ操作の直接性 人 マウス(コントローラ) カーソル UI 人 UI画面は表示デバ゗スでもあり、 操作デバ゗スでもある クリック感のない操作デバ゗ス 状況に合わせて変化する操作デバ゗ス VSUG DAY 2012.01.28 36
  • クリック感のない操作デバ゗ス処理を待つことに慣れていても、 押したかそうでないかが分からない という状況には慣れていない フゖードバックがとても大切 VSUG DAY 2012.01.28 37
  • 状況に合わせて変化する操作デバ゗ス銀行ATMにおける暗証番号の覗き見防止暗証番号(4桁)を入力してください 暗証番号(4桁)を入力してください 暗証番号 訂正 暗証番号 訂正 1 2 3 7 4 1 4 5 6 8 5 2 7 8 9 9 6 3 0 0 VSUG DAY 2012.01.28 38
  • XAMLの゗ンタラクションデザ゗ン力強力、かつ手軽なゕニメーションコントロールテンプレートVisual State Manager(VSM)“Lookless”コントール 外観に依存しない、 外観が完全に自由なコントロール VSUG DAY 2012.01.28 39
  • 例:ListBoxコントロールの定義 これまで  複数の文字列データを上から下に向かって縦方向に 表示し、ユーザーがそれらの中から1つ、もしくは 複数の項目を選択する  項目を表示しきれない場合には、 右側のスクロールバーを使用してスクロールする XAML UIフレームワーク  複数のデータ(文字列に限らない)を列挙し、ユーザー がそれらの中から1つ、もしくは複数の項目を選択する VSUG DAY 2012.01.28 40
  • “Lookless”なListBoxコントロールDEMO VSUG DAY 2012.01.28 41
  • WinRTのXAML UIフレームワーク VSUG DAY 2012.01.28 42
  • Metroスタ゗ルとWPFの違い Metro style Apps Desktop Apps XAML + C# / VB WPF Language .NETCore Language Programing Collections Collections C#、Visual Basic Linq C#、Visual Basic Linq Reflection Reflection Windows Runtime APIs .NET Framework System Services UI Data Security UI Device Security XAML Storage Network XAML Storage Network Windows APIKernel Windows Kernel Services VSUG DAY 2012.01.28 43
  • .NET Frameworkクラスラ゗ブラリの種類.NET Framework Client Profile Extended.NET for Metro style apps(.NETCore)共通言語ランタ゗ム(CLR)は共通 VSUG DAY 2012.01.28 44
  • Controls名前空間のクラスを比較 Windows.UI.Xaml. System.Windows.Controls名前空間 Controls名前空間 Windows Runtime WPF 4.5 Windows Phone Developer Developer Silverlight 5 RC OS 7.1 Preview Previewクラス数 77 165 117 60※ 他の名前空間にあるが、クラス名が同じもの、 もしくは同じ役割のクラスも含めた数字 VSUG DAY 2012.01.28 45
  • Controls名前空間のクラスを比較 WinRTにしかないクラスは20個 感覚的に近いのはWPFよりもSilverlight  たとえばDynamicResourceや LogicalTreeHelperがない WinRTのControls名前空間 = Windows PhoneのSilverlight + マウスサポート + 新コントロール 今までWPFにしかなかったものも一部サポート  たとえばDataTemplateSelectorやGroupStyle VSUG DAY 2012.01.28 46
  • 新コントロール CarouselPanel  ListView CaptureElement  ProgressRing FlipView  ToggleSwitch GridView  VariableSizedWrapGrid JumpViewer  WrapGrid VSUG DAY 2012.01.28 47
  • 新コントロール(WinRTのXAML UIフレームワーク)DEMO VSUG DAY 2012.01.28 48
  • 最後に言いたいことまとめ VSUG DAY 2012.01.28 49
  • XAMLフゔミリー WPF/Silverlight WinRT Silverlight for Windows Phone PC スレート スマートフォン VSUG DAY 2012.01.28 50
  • XAML vs HTML これまでのプラットフォーム XAML vs HTML ≒クラ゗ゕントゕプリケーション vs Webゕプリケーション Metroスタ゗ルゕプリ XAML vs HTML  どちらもクラ゗ゕントゕプリケーション  開発言語と開発ツールが主な比較ポ゗ント  ほぼスキルセットで選んでよいのでは? VSUG DAY 2012.01.28 51
  • 選択のポ゗ントパフォーマンスと操作性クロスプラットフォームデスクトップゕプリケーションの開発需要 VSUG DAY 2012.01.28 52