XAML で作る
Windows ストアアプリ
2014/03/22 MVP COMMUNITY CAMP #CLRH89
@KATSUYUZU
Agenda
 XAML
XAMLとは
なぜXAMLなのか
 Windows ストアアプリ
開発の手引き
Self Intoroduction
KatsuYuzu
 Work
 SIer
 VB.NET
 Private
 Twitter: しみみん(KatsuYuzu)
 Web: http://katsuyuzu.hatenablog.jp/
 C#
CLR/H スタッフをしておりますので登壇希望など、
お気軽にご相談ください。
XAML
EXTENSIBLE APPLICATION MARKUP LANGUAGE
 XAMLとは何なのか、なぜXAMLな
のかを知ってもらう。
章の目標
 プレゼンテーション層の言語
XAMLとは
一般的なユーザー
∩___∩
| ノ ヽ
/ ● ● |
| ( _●_) ミ
彡、 |∪| 、`\
/ __ ヽノ /´> )
(___) / (_/
ディ
スプ
レイ
XAML
プロ
グラ
ム
コンピューター
XAMLとは
 Extensible Application Markup
Language(XAML、ザムルと発音
する)は、オブジェクトやプロパ
ティ、あるいはそれらの関係や相
互作用を定義するために用いられ
るXMLベースの宣言的言語である。
出典:
http://ja.wikipedia.org/wiki/Extensible_
Application_Markup_Language
XAMLとは
HTMLに似てると
考えたら読みやすい?
なぜXAMLなのか
 プレゼンテーション層と
ドメイン層の分離
一般的なユーザー
∩___∩
| ノ ヽ
/ ● ● |
| ( _●_) ミ
彡、 |∪| 、`\
/ __ ヽノ /´> )
(___) / (_/
ディ
スプ
レイ
XAML
プロ
グラ
ム
コンピューター
なぜXAMLなのか
 仕様が読めない
 デザインの変更に弱い
なぜXAMLなのか
 仕様が読み取れる(状況は読めない)
 デザインの変更に強い
なぜXAMLなのか
 でも、これでもまだデザイン変更
時にプログラムの変更が必要
なぜXAMLなのか
 XAMLでバインディングすると
デザインの変更が容易になる
なぜXAMLなのか
 プレゼンテーション層と
ドメイン層の分離
一般的なユーザー
∩___∩
| ノ ヽ
/ ● ● |
| ( _●_) ミ
彡、 |∪| 、`\
/ __ ヽノ /´> )
(___) / (_/
ディ
スプ
レイ
XAML
プロ
グラ
ム
コンピューター
なぜXAMLなのか
 ModelとViewの分離
MVC系: MV + hoge
一般的なユーザー
∩___∩
| ノ ヽ
/ ● ● |
| ( _●_) ミ
彡、 |∪| 、`\
/ __ ヽノ /´> )
(___) / (_/
ディ
スプ
レイ
View Model
コンピューター
なぜXAMLなのか
 MVVM
Model – View - ViewModel
View ViewModel Model
コンピューター
なぜXAMLなのか
 MVVM
Model – View - ViewModel
View
・ViewModelの
監視
=
バインディング
ViewModel
・Viewの
データストア
・操作の伝達
Model
・アプリケー
ション
コンピューター
XAML
 XAMLとは
プレゼンテーションに特化した言語
 なぜXAMLなのか
分離に特化した言語
Windows ストアアプリ
DEVELOPING A WINDOWS STORE APP
 XAMLの応用を知ってもらう。
 Prismで開発のとっかかりを知っ
てもらう。
章の目標
XAMLの応用
 Blend
XAMLに特化したVisual Studioの仲間
XAMLの応用
 テンプレート
XAMLの応用
 Visual State
XAMLの応用
 ビヘイビア
【名詞】ふるまい
DependencyObjectを継承していて
IBehaviorを実装している
 アクション
DependencyObjectを継承していて
IActionを実装している
XAMLの応用
 ビヘイビア、アクション
XAMLの応用
 Blend
Visual Studioの友達
 テンプレート
XAMLの豊かな表現力
 Visual State
状態
 ビヘイビア、アクション
パーツをぽとぺた
Prism
 C#、XAML、Windows ランタイム向
け Prism を使った Windows ストア
ビジネス アプリの開発
 http://msdn.microsoft.com/ja-
jp/library/windows/apps/xx130643.aspx
 Prism for the Windows Runtime
Templates (Win 8.1)
 http://visualstudiogallery.msdn.microsoft.c
om/2a6c37e4-fe9a-4a93-baae-
a9bce4cf60c7
Prism
 Prism を使った Windows ストア アプリの作成
 UX の設計
 MVVM パターンの使用
 ページの作成とページ間の移動
 タッチの使用
 ユーザー入力の検証
 アプリケーション データの管理
 中断、再開、アクティブ化の処理
 疎結合コンポーネント間の通信
 タイルの操作
 検索の実装
 パフォーマンスの向上
Prism
 Prism を使った Windows ストア アプリの作成
 UX の設計
 MVVM パターンの使用
 ページの作成とページ間の移動
 タッチの使用
 ユーザー入力の検証
 アプリケーション データの管理
 中断、再開、アクティブ化の処理
 疎結合コンポーネント間の通信
 タイルの操作
 検索の実装
 パフォーマンスの向上
Prism
 MVVM パターンの使用
依存関係の管理
ViewModelへの注入
Viewとのバインディング
Prism
 依存関係の管理
アプリケーションの初期化時に登録
Prism
 ViewModelへの注入
コンストラクタに注入してくれる
Prism
 Viewとのバインディング
Prism
 Viewとのバインディング
名前という規約で
自動的にバインディング
Prism
 MVVM パターンの使用
依存関係の管理
ViewModelへの注入
Viewとのバインディング
Prism
 ページの作成とページ間の移動
ViewModelに注入された
INavigationServiceを使う
Prism
 ページの作成とページ間の移動
起点にコマンドをバインドしておく
Windows ストアアプリ
 Windows ストアアプリ
BlendでXAMLを使いこなす
Prismを参考にする
XAML で作る
Windows ストアアプリ
 XAMLとは
プレゼンテーションに特化した言語
 なぜXAMLなのか
分離に特化した言語
 Windows ストアアプリ
BlendでXAMLを使いこなす
Prismを参考にする

XAMLで作るWindows ストアアプリ #CLRH89