XAMLで作るWindows ストアアプリ #CLRH89
-
Upload
katsuyuzu -
Category
Technology
-
view
1.005 -
download
2
description
Transcript of XAMLで作るWindows ストアアプリ #CLRH89
![Page 1: XAMLで作るWindows ストアアプリ #CLRH89](https://reader033.fdocuments.net/reader033/viewer/2022052619/55660bd4d8b42a06318b483c/html5/thumbnails/1.jpg)
XAML で作るWindows ストアアプリ2014/03/22 MVP COMMUNITY CAMP #CLRH89
@KATSUYUZU
![Page 2: XAMLで作るWindows ストアアプリ #CLRH89](https://reader033.fdocuments.net/reader033/viewer/2022052619/55660bd4d8b42a06318b483c/html5/thumbnails/2.jpg)
Agenda
XAML
XAMLとは
なぜXAMLなのか
Windows ストアアプリ
開発の手引き
![Page 3: XAMLで作るWindows ストアアプリ #CLRH89](https://reader033.fdocuments.net/reader033/viewer/2022052619/55660bd4d8b42a06318b483c/html5/thumbnails/3.jpg)
Self Intoroduction
KatsuYuzu Work
SIer
VB.NET
Private
Twitter: しみみん(KatsuYuzu)
Web: http://katsuyuzu.hatenablog.jp/
C#
CLR/Hスタッフをしておりますので登壇希望など、
お気軽にご相談ください。
![Page 4: XAMLで作るWindows ストアアプリ #CLRH89](https://reader033.fdocuments.net/reader033/viewer/2022052619/55660bd4d8b42a06318b483c/html5/thumbnails/4.jpg)
XAMLEXTENSIBLE APPLICATION MARKUP LANGUAGE
![Page 5: XAMLで作るWindows ストアアプリ #CLRH89](https://reader033.fdocuments.net/reader033/viewer/2022052619/55660bd4d8b42a06318b483c/html5/thumbnails/5.jpg)
XAMLとは何なのか、なぜXAMLなのかを知ってもらう。
章の目標
![Page 6: XAMLで作るWindows ストアアプリ #CLRH89](https://reader033.fdocuments.net/reader033/viewer/2022052619/55660bd4d8b42a06318b483c/html5/thumbnails/6.jpg)
プレゼンテーション層の言語
XAMLとは
一般的なユーザー
∩___∩| ノ ヽ
/ ● ● || ( _●_) ミ彡、 |∪| 、`\
/ __ ヽノ /´> )(___) / (_/
ディスプレイ
XAML
プログラム
コンピューター
![Page 7: XAMLで作るWindows ストアアプリ #CLRH89](https://reader033.fdocuments.net/reader033/viewer/2022052619/55660bd4d8b42a06318b483c/html5/thumbnails/7.jpg)
XAMLとは
Extensible Application Markup Language(XAML、ザムルと発音する)は、オブジェクトやプロパティ、あるいはそれらの関係や相互作用を定義するために用いられるXMLベースの宣言的言語である。
出典:
http://ja.wikipedia.org/wiki/Extensible_
Application_Markup_Language
![Page 8: XAMLで作るWindows ストアアプリ #CLRH89](https://reader033.fdocuments.net/reader033/viewer/2022052619/55660bd4d8b42a06318b483c/html5/thumbnails/8.jpg)
XAMLとは
HTMLに似てると考えたら読みやすい?
![Page 9: XAMLで作るWindows ストアアプリ #CLRH89](https://reader033.fdocuments.net/reader033/viewer/2022052619/55660bd4d8b42a06318b483c/html5/thumbnails/9.jpg)
なぜXAMLなのか
プレゼンテーション層とドメイン層の分離
一般的なユーザー
∩___∩| ノ ヽ
/ ● ● || ( _●_) ミ彡、 |∪| 、`\
/ __ ヽノ /´> )(___) / (_/
ディスプレイ
XAML
プログラム
コンピューター
![Page 10: XAMLで作るWindows ストアアプリ #CLRH89](https://reader033.fdocuments.net/reader033/viewer/2022052619/55660bd4d8b42a06318b483c/html5/thumbnails/10.jpg)
なぜXAMLなのか
仕様が読めない
デザインの変更に弱い
![Page 11: XAMLで作るWindows ストアアプリ #CLRH89](https://reader033.fdocuments.net/reader033/viewer/2022052619/55660bd4d8b42a06318b483c/html5/thumbnails/11.jpg)
なぜXAMLなのか
仕様が読み取れる(状況は読めない)
デザインの変更に強い
![Page 12: XAMLで作るWindows ストアアプリ #CLRH89](https://reader033.fdocuments.net/reader033/viewer/2022052619/55660bd4d8b42a06318b483c/html5/thumbnails/12.jpg)
なぜXAMLなのか
でも、これでもまだデザイン変更時にプログラムの変更が必要
![Page 13: XAMLで作るWindows ストアアプリ #CLRH89](https://reader033.fdocuments.net/reader033/viewer/2022052619/55660bd4d8b42a06318b483c/html5/thumbnails/13.jpg)
なぜXAMLなのか
XAMLでバインディングするとデザインの変更が容易になる
![Page 14: XAMLで作るWindows ストアアプリ #CLRH89](https://reader033.fdocuments.net/reader033/viewer/2022052619/55660bd4d8b42a06318b483c/html5/thumbnails/14.jpg)
なぜXAMLなのか
プレゼンテーション層とドメイン層の分離
一般的なユーザー
∩___∩| ノ ヽ
/ ● ● || ( _●_) ミ彡、 |∪| 、`\
/ __ ヽノ /´> )(___) / (_/
ディスプレイ
XAML
プログラム
コンピューター
![Page 15: XAMLで作るWindows ストアアプリ #CLRH89](https://reader033.fdocuments.net/reader033/viewer/2022052619/55660bd4d8b42a06318b483c/html5/thumbnails/15.jpg)
なぜXAMLなのか
ModelとViewの分離
MVC系: MV + hoge
一般的なユーザー
∩___∩| ノ ヽ
/ ● ● || ( _●_) ミ彡、 |∪| 、`\
/ __ ヽノ /´> )(___) / (_/
ディスプレイ
View Model
コンピューター
![Page 16: XAMLで作るWindows ストアアプリ #CLRH89](https://reader033.fdocuments.net/reader033/viewer/2022052619/55660bd4d8b42a06318b483c/html5/thumbnails/16.jpg)
なぜXAMLなのか
MVVM
Model – View - ViewModel
View ViewModel Model
コンピューター
![Page 17: XAMLで作るWindows ストアアプリ #CLRH89](https://reader033.fdocuments.net/reader033/viewer/2022052619/55660bd4d8b42a06318b483c/html5/thumbnails/17.jpg)
なぜXAMLなのか
MVVM
Model – View - ViewModel
View
・ViewModelの監視
=バインディング
ViewModel
・Viewのデータストア・操作の伝達
Model
・アプリケーション
コンピューター
![Page 18: XAMLで作るWindows ストアアプリ #CLRH89](https://reader033.fdocuments.net/reader033/viewer/2022052619/55660bd4d8b42a06318b483c/html5/thumbnails/18.jpg)
XAML
XAMLとは
プレゼンテーションに特化した言語
なぜXAMLなのか
分離に特化した言語
![Page 19: XAMLで作るWindows ストアアプリ #CLRH89](https://reader033.fdocuments.net/reader033/viewer/2022052619/55660bd4d8b42a06318b483c/html5/thumbnails/19.jpg)
Windows ストアアプリDEVELOPING A WINDOWS STORE APP
![Page 20: XAMLで作るWindows ストアアプリ #CLRH89](https://reader033.fdocuments.net/reader033/viewer/2022052619/55660bd4d8b42a06318b483c/html5/thumbnails/20.jpg)
XAMLの応用を知ってもらう。
Prismで開発のとっかかりを知ってもらう。
章の目標
![Page 21: XAMLで作るWindows ストアアプリ #CLRH89](https://reader033.fdocuments.net/reader033/viewer/2022052619/55660bd4d8b42a06318b483c/html5/thumbnails/21.jpg)
XAMLの応用
Blend
XAMLに特化したVisual Studioの仲間
![Page 22: XAMLで作るWindows ストアアプリ #CLRH89](https://reader033.fdocuments.net/reader033/viewer/2022052619/55660bd4d8b42a06318b483c/html5/thumbnails/22.jpg)
XAMLの応用
テンプレート
![Page 23: XAMLで作るWindows ストアアプリ #CLRH89](https://reader033.fdocuments.net/reader033/viewer/2022052619/55660bd4d8b42a06318b483c/html5/thumbnails/23.jpg)
XAMLの応用
Visual State
![Page 24: XAMLで作るWindows ストアアプリ #CLRH89](https://reader033.fdocuments.net/reader033/viewer/2022052619/55660bd4d8b42a06318b483c/html5/thumbnails/24.jpg)
XAMLの応用
ビヘイビア
【名詞】ふるまい
DependencyObjectを継承していてIBehaviorを実装している
アクション
DependencyObjectを継承していてIActionを実装している
![Page 25: XAMLで作るWindows ストアアプリ #CLRH89](https://reader033.fdocuments.net/reader033/viewer/2022052619/55660bd4d8b42a06318b483c/html5/thumbnails/25.jpg)
XAMLの応用
ビヘイビア、アクション
![Page 26: XAMLで作るWindows ストアアプリ #CLRH89](https://reader033.fdocuments.net/reader033/viewer/2022052619/55660bd4d8b42a06318b483c/html5/thumbnails/26.jpg)
XAMLの応用
Blend
Visual Studioの友達
テンプレート
XAMLの豊かな表現力
Visual State
状態
ビヘイビア、アクション
パーツをぽとぺた
![Page 27: XAMLで作るWindows ストアアプリ #CLRH89](https://reader033.fdocuments.net/reader033/viewer/2022052619/55660bd4d8b42a06318b483c/html5/thumbnails/27.jpg)
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
![Page 28: XAMLで作るWindows ストアアプリ #CLRH89](https://reader033.fdocuments.net/reader033/viewer/2022052619/55660bd4d8b42a06318b483c/html5/thumbnails/28.jpg)
Prism
Prism を使った Windows ストアアプリの作成
UX の設計
MVVM パターンの使用
ページの作成とページ間の移動
タッチの使用
ユーザー入力の検証
アプリケーションデータの管理
中断、再開、アクティブ化の処理
疎結合コンポーネント間の通信
タイルの操作
検索の実装
パフォーマンスの向上
![Page 29: XAMLで作るWindows ストアアプリ #CLRH89](https://reader033.fdocuments.net/reader033/viewer/2022052619/55660bd4d8b42a06318b483c/html5/thumbnails/29.jpg)
Prism
Prism を使った Windows ストアアプリの作成
UX の設計
MVVM パターンの使用
ページの作成とページ間の移動
タッチの使用
ユーザー入力の検証
アプリケーションデータの管理
中断、再開、アクティブ化の処理
疎結合コンポーネント間の通信
タイルの操作
検索の実装
パフォーマンスの向上
![Page 30: XAMLで作るWindows ストアアプリ #CLRH89](https://reader033.fdocuments.net/reader033/viewer/2022052619/55660bd4d8b42a06318b483c/html5/thumbnails/30.jpg)
Prism
MVVM パターンの使用
依存関係の管理
ViewModelへの注入
Viewとのバインディング
![Page 31: XAMLで作るWindows ストアアプリ #CLRH89](https://reader033.fdocuments.net/reader033/viewer/2022052619/55660bd4d8b42a06318b483c/html5/thumbnails/31.jpg)
Prism
依存関係の管理
アプリケーションの初期化時に登録
![Page 32: XAMLで作るWindows ストアアプリ #CLRH89](https://reader033.fdocuments.net/reader033/viewer/2022052619/55660bd4d8b42a06318b483c/html5/thumbnails/32.jpg)
Prism
ViewModelへの注入
コンストラクタに注入してくれる
![Page 33: XAMLで作るWindows ストアアプリ #CLRH89](https://reader033.fdocuments.net/reader033/viewer/2022052619/55660bd4d8b42a06318b483c/html5/thumbnails/33.jpg)
Prism
Viewとのバインディング
![Page 34: XAMLで作るWindows ストアアプリ #CLRH89](https://reader033.fdocuments.net/reader033/viewer/2022052619/55660bd4d8b42a06318b483c/html5/thumbnails/34.jpg)
Prism
Viewとのバインディング
名前という規約で自動的にバインディング
![Page 35: XAMLで作るWindows ストアアプリ #CLRH89](https://reader033.fdocuments.net/reader033/viewer/2022052619/55660bd4d8b42a06318b483c/html5/thumbnails/35.jpg)
Prism
MVVM パターンの使用
依存関係の管理
ViewModelへの注入
Viewとのバインディング
![Page 36: XAMLで作るWindows ストアアプリ #CLRH89](https://reader033.fdocuments.net/reader033/viewer/2022052619/55660bd4d8b42a06318b483c/html5/thumbnails/36.jpg)
Prism
ページの作成とページ間の移動
ViewModelに注入されたINavigationServiceを使う
![Page 37: XAMLで作るWindows ストアアプリ #CLRH89](https://reader033.fdocuments.net/reader033/viewer/2022052619/55660bd4d8b42a06318b483c/html5/thumbnails/37.jpg)
Prism
ページの作成とページ間の移動
起点にコマンドをバインドしておく
![Page 38: XAMLで作るWindows ストアアプリ #CLRH89](https://reader033.fdocuments.net/reader033/viewer/2022052619/55660bd4d8b42a06318b483c/html5/thumbnails/38.jpg)
Windows ストアアプリ
Windows ストアアプリ
BlendでXAMLを使いこなす
Prismを参考にする
![Page 39: XAMLで作るWindows ストアアプリ #CLRH89](https://reader033.fdocuments.net/reader033/viewer/2022052619/55660bd4d8b42a06318b483c/html5/thumbnails/39.jpg)
XAML で作るWindows ストアアプリ
XAMLとは
プレゼンテーションに特化した言語
なぜXAMLなのか
分離に特化した言語
Windows ストアアプリ
BlendでXAMLを使いこなす
Prismを参考にする