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

グレープシテゖ株式会社 八巻 雄哉

VSUG DAY Winter

Twitter: @yamaki00 blog: d.hatena.ne.jp/Yamaki/

VSUG DAY 2012.01.28

XAMLベースのUIフレームワークの歴史

2

2006年11月6日 WPF

2007年9月6日 Silverlight

2009年9月22日 Silverlight for Windows Embedded

2010年9月1日 Silverlight for Windows Phone

VSUG DAY 2012.01.28

XAMLベースのUIフレームワークの歴史

3

2006年11月6日 WPF

2007年9月6日 Silverlight

2009年9月22日 Silverlight for Windows Embedded

2010年9月1日 Silverlight for Windows Phone

2012年？ WinRT（Metroスタルゕプリ）

VSUG DAY 2012.01.28

XAMLがまだ花開いていない理由

機能的にXAMLを必要としていなかった

鍵を握るのはタッチデバス

持論：入力デバスが変わらなければ、 業務ゕプリの画面は変わらない

Windows Phoneはタッチデバスだが まだ普及していない

鍵を握るのはWindows 8

4

VSUG DAY 2012.01.28

鍵を握るのはWindows 8

Windows 8は業務ゕプリ開発に どんな影響を与えるのか？

2012年2月17日（金） 【17-D-4】 どうなる？Windows 8時代の業務ゕプリ開発

5

VSUG DAY 2012.01.28

鍵を握るのはタッチデバス

タッチ対応

Windowsフォームのタッチサポートは…

画面解像度の多様化

ウゖンドウのないMetroスタルゕプリ

高まるUXの重要性

XAMLのンタラクションデザン力

6

VSUG DAY 2012.01.28

タッチ対応

7

VSUG DAY 2012.01.28

タッチ対応

標準コントロールのタッチ対応

例：パン操作によるスクロール

Windowsフォーム ○

WPF ○

Silverlight ×

Windows Phone ○

WinRT ○

8

VSUG DAY 2012.01.28

タッチ対応

タッチプログラミング

Windowsフォーム ×（Windows APIを使えば可能）

WPF ○

Silverlight △（未加工のデータのみを報告）

Windows Phone ○

WinRT ○

9

VSUG DAY 2012.01.28

未加工のデータのみを報告

10

VSUG DAY 2012.01.28

未加工のデータのみを報告

11

VSUG DAY 2012.01.28

未加工のデータのみを報告

12

PrimaryTouchPoint

以前のタッチポイント

新しいタッチポイント

必要な値：30度

VSUG DAY 2012.01.28

Manipulationベント

マルチタッチのための 高レベルンターフェス

ManipulationDeltaクラスのプロパテゖ プロパティ名 WPF Windows Phone WinRT

Expansion ○ - -

Rotation ○ - ○

Scale ○ ○ ○

Translation ○ ○ ○

13

VSUG DAY 2012.01.28

DEMO Manipulationベント

14

VSUG DAY 2012.01.28

画面解像度の多様化

15

VSUG DAY 2012.01.28

画面解像度の多様化

2006年7月

Yuya Yamaki’s blog http://d.hatena.ne.jp/Yamaki/ 訪問者における画面解像度の内訳

1280x1024

, 41.08%

1024x768

, 29.55%

1600x1200

1400x1050

1680x1050 その他

16

VSUG DAY 2012.01.28

画面解像度の多様化

1280x1024 ,

25.25%

1920x1080 ,

17%

1280x800

, 8% 1920x1200

1680x1050

1366x768

1024x768

1440x900

1600x900

1600x1200 その他

2011年12月

Yuya Yamaki’s blog http://d.hatena.ne.jp/Yamaki/ 訪問者における画面解像度の内訳

17

VSUG DAY 2012.01.28

ウゖンドウサズの固定

1024ピクセル

768ピクセル

最大化／最小化ボタンは非表示

18

VSUG DAY 2012.01.28

ウゖンドウサズの固定

1920ピクセル

1050ピクセル

19

VSUG DAY 2012.01.28

絶対配置ではなく相対配置を

絶対配置

位置や大きさが直接指定されて決まる

相対配置（動的配置）

レゕウト属性や周りの要素との関係で 位置や大きさが決まる

Windows 8時代に相対配置は必須

20

VSUG DAY 2012.01.28

DEMO 相対配置のサンプル（WPFゕプリケーション）

21

VSUG DAY 2012.01.28

配置する要素と配置される領域

配置する要素が持つ属性 配置される領域が持つ属性

VerticalAlignment：Center Margin：10 MaxWidth：200

4行5列のGrid 2行2列目の領域の大きさ 配置要素に合わせて可変

22

VSUG DAY 2012.01.28

配置する要素

最終的な位置（X座標、Y座標）と 大きさ（幅、高さ）の決定に 影響する３つの属性

① VerticalAlignmentプロパテゖ、HorizontalAlignmentプロパテゖ

② Marginプロパテゖ

③ コントロール自身の大きさ

23

VSUG DAY 2012.01.28

DEMO 配置する要素が持つ属性

24

VSUG DAY 2012.01.28

配置される領域

Grid

列と行で構成される格子状の領域を定義して配置

StackPanel

水平方向または垂直方向に並べて配置

WrapPanel（WrapGrid）

基本的な配置ルールはStackPanelと同様

領域の端まで行った場合に折り返して表示

25

VSUG DAY 2012.01.28

DEMO 配置される領域が持つ属性（Gridの場合）

26

27

28

29

30

Auto

WrapPanel

GridSplitter

VSUG DAY 2012.01.28

なぜ階層化する必要があるのか

目的や役割ごとに 領域をパネルとして分けたい

多くの場合、望まれるリサズ処理は 領域単位で異なる

耐変更性に優れている

31

VSUG DAY 2012.01.28

DEMO 画面の回転（Metroスタルゕプリ）

32

VSUG DAY 2012.01.28

デモの解説（横画面時）

33

1 Star

1 Star

1 Star

Auto

1 Star 1 Star 1 Star 1 Star

Collapsed Collapsed Collapsed

VSUG DAY 2012.01.28

デモの解説（縦画面時）

34

1 Star

1 Star

1 Star

Auto

1 Star

1 Star 1 Star 1 Star

Collapsed

Collapsed

Collapsed

VSUG DAY 2012.01.28

高まるUXの重要性

35

VSUG DAY 2012.01.28

タッチ操作の直接性

タッチ操作の直接性

人 マウス（コントローラ） カーソル UI

人 UI

画面は表示デバスでもあり、 操作デバスでもある

クリック感のない操作デバス

状況に合わせて変化する操作デバス

36

VSUG DAY 2012.01.28

クリック感のない操作デバス

37

処理を待つことに慣れていても、 押したかそうでないかが分からない という状況には慣れていない

フゖードバックがとても大切

VSUG DAY 2012.01.28

状況に合わせて変化する操作デバス

38

銀行ATMにおける暗証番号の覗き見防止

暗証番号（4桁）を入力してください

暗証番号 訂正

1 2 3

4 5 6

7 8 9

0

暗証番号（4桁）を入力してください

暗証番号 訂正

7 4 1

8 5 2

9 6 3

0

VSUG DAY 2012.01.28

XAMLのンタラクションデザン力

強力、かつ手軽なゕニメーション

コントロールテンプレート

Visual State Manager（VSM）

“Lookless”コントール

外観に依存しない、 外観が完全に自由なコントロール

39

VSUG DAY 2012.01.28

例：ListBoxコントロールの定義

これまで 複数の文字列データを上から下に向かって縦方向に 表示し、ユーザーがそれらの中から1つ、もしくは 複数の項目を選択する

項目を表示しきれない場合には、 右側のスクロールバーを使用してスクロールする

XAML UIフレームワーク 複数のデータ（文字列に限らない）を列挙し、ユーザーがそれらの中から1つ、もしくは複数の項目を選択する

40

VSUG DAY 2012.01.28

DEMO “Lookless”なListBoxコントロール

41

VSUG DAY 2012.01.28

WinRTのXAML UIフレームワーク

42

VSUG DAY 2012.01.28

Metro style Apps

XAML + C# / VB

Desktop Apps

WPF

Windows Kernel Services

Windows Runtime APIs

Syst

em

Serv

ices

Kernel

Windows API XAML Storage Network

UI Security Device

.NET Framework

XAML Storage Network

UI Security Data

Reflection

Linq

Collections

Reflection Linq

Collections Language

C#、Visual Basic

Language

C#、Visual Basic

.NETCore

Pro

gra

min

g

MetroスタルとWPFの違い

43

VSUG DAY 2012.01.28

.NET Frameworkクラスラブラリの種類

.NET Framework

Client Profile

Extended

.NET for Metro style apps（.NETCore）

共通言語ランタム（CLR）は共通

44

VSUG DAY 2012.01.28

Controls名前空間のクラスを比較

Windows.UI.Xaml.

Controls名前空間

System.Windows.Controls名前空間

Windows Runtime

Developer

Preview

WPF 4.5

Developer

Preview

Silverlight 5 RC Windows Phone

OS 7.1

クラス数 77 165 117 60

※他の名前空間にあるが、クラス名が同じもの、もしくは同じ役割のクラスも含めた数字

45

VSUG DAY 2012.01.28

Controls名前空間のクラスを比較

WinRTにしかないクラスは20個

感覚的に近いのはWPFよりもSilverlight たとえばDynamicResourceや

LogicalTreeHelperがない

WinRTのControls名前空間 = Windows PhoneのSilverlight + マウスサポート + 新コントロール

今までWPFにしかなかったものも一部サポート たとえばDataTemplateSelectorやGroupStyle

46

VSUG DAY 2012.01.28

新コントロール

CarouselPanel

CaptureElement

FlipView

GridView

JumpViewer

ListView

ProgressRing

ToggleSwitch

VariableSizedWrapGrid

WrapGrid

47

VSUG DAY 2012.01.28

DEMO 新コントロール（WinRTのXAML UIフレームワーク）

48

VSUG DAY 2012.01.28

まとめ 最後に言いたいこと

49

VSUG DAY 2012.01.28

XAMLフゔミリー

WPF／Silverlight

WinRT

Silverlight for Windows Phone

PC スレート スマートフォン

50

VSUG DAY 2012.01.28

XAML vs HTML

51

これまでのプラットフォーム

XAML vs HTML

クラゕントゕプリケーション vs Webゕプリケーション

Metroスタルゕプリ

XAML vs HTML どちらもクラゕントゕプリケーション

開発言語と開発ツールが主な比較ポント

ほぼスキルセットで選んでよいのでは？ ≒

VSUG DAY 2012.01.28

選択のポント

52

パフォーマンスと操作性

クロスプラットフォーム

デスクトップゕプリケーションの開発需要