チーム開発の要はviewmodelにある
DESCRIPTION
めとべや東京#2TRANSCRIPT
![Page 1: チーム開発の要はViewModelにある](https://reader034.vdocuments.us/reader034/viewer/2022052213/5565ffafd8b42a2a4d8b4daa/html5/thumbnails/1.jpg)
2013.10.12初音玲
チーム開発の要はViewModelにある
![Page 2: チーム開発の要はViewModelにある](https://reader034.vdocuments.us/reader034/viewer/2022052213/5565ffafd8b42a2a4d8b4daa/html5/thumbnails/2.jpg)
自己紹介▷お仕事の略歴
•システム企画
•インフラ構築
•業務アプリ構築
• DB設計、構築、各種支援
▷お仕事外の略歴
• Microsoft MVP for Developer Tools (2008/04-14/03)
• Oracle ACE (2008/04-:日本で2人目)
![Page 3: チーム開発の要はViewModelにある](https://reader034.vdocuments.us/reader034/viewer/2022052213/5565ffafd8b42a2a4d8b4daa/html5/thumbnails/3.jpg)
はじめてシリーズ
▷はじめてのVC#2012
![Page 4: チーム開発の要はViewModelにある](https://reader034.vdocuments.us/reader034/viewer/2022052213/5565ffafd8b42a2a4d8b4daa/html5/thumbnails/4.jpg)
Kinect本 監修▷音声認識(Speech SDK)の解説あります
![Page 5: チーム開発の要はViewModelにある](https://reader034.vdocuments.us/reader034/viewer/2022052213/5565ffafd8b42a2a4d8b4daa/html5/thumbnails/5.jpg)
画面デザインの分業
![Page 6: チーム開発の要はViewModelにある](https://reader034.vdocuments.us/reader034/viewer/2022052213/5565ffafd8b42a2a4d8b4daa/html5/thumbnails/6.jpg)
分業は失敗する
![Page 7: チーム開発の要はViewModelにある](https://reader034.vdocuments.us/reader034/viewer/2022052213/5565ffafd8b42a2a4d8b4daa/html5/thumbnails/7.jpg)
なぜ、デザイン分業は失敗するのか?デザイナがパワーポイントやIllustratorで静止画としてデザイン
デザインパーツと称して、個々の枠をデザインから抜き出し
デザインパーツができてからあとから可変部分をコードで表示
デザインセンスのない可変部分の表示
後工程でデザイナがいないので
可変部分だけで詳細調整
ペイントブラシで画像修正
これじゃない画面が完成
![Page 8: チーム開発の要はViewModelにある](https://reader034.vdocuments.us/reader034/viewer/2022052213/5565ffafd8b42a2a4d8b4daa/html5/thumbnails/8.jpg)
なぜ失敗しつづけるのか
理由は明白です
![Page 9: チーム開発の要はViewModelにある](https://reader034.vdocuments.us/reader034/viewer/2022052213/5565ffafd8b42a2a4d8b4daa/html5/thumbnails/9.jpg)
可変データ込みの
デザイン決定者の不在
![Page 10: チーム開発の要はViewModelにある](https://reader034.vdocuments.us/reader034/viewer/2022052213/5565ffafd8b42a2a4d8b4daa/html5/thumbnails/10.jpg)
分業したはずなのに
最後のデザイン調整は
「デザインできませんから」
といった開発担当
![Page 11: チーム開発の要はViewModelにある](https://reader034.vdocuments.us/reader034/viewer/2022052213/5565ffafd8b42a2a4d8b4daa/html5/thumbnails/11.jpg)
これでうまくいったら奇跡
Or
担当者ががんばった
![Page 12: チーム開発の要はViewModelにある](https://reader034.vdocuments.us/reader034/viewer/2022052213/5565ffafd8b42a2a4d8b4daa/html5/thumbnails/12.jpg)
運任せ
Or
属人性
![Page 13: チーム開発の要はViewModelにある](https://reader034.vdocuments.us/reader034/viewer/2022052213/5565ffafd8b42a2a4d8b4daa/html5/thumbnails/13.jpg)
そこで
ViewModel先行
![Page 14: チーム開発の要はViewModelにある](https://reader034.vdocuments.us/reader034/viewer/2022052213/5565ffafd8b42a2a4d8b4daa/html5/thumbnails/14.jpg)
WindowsストアアプリのViewModelとは
プロパティ
メソッド
XAMLBinding
データ (プロパティ)
業務logic (メソッド)
View ViewModel Model
プロパティ参照Binding
プロパティ更新
メソッド実行
メソッド実行
![Page 15: チーム開発の要はViewModelにある](https://reader034.vdocuments.us/reader034/viewer/2022052213/5565ffafd8b42a2a4d8b4daa/html5/thumbnails/15.jpg)
WindowsストアアプリのViewModelとは
プロパティ
メソッド
ViewModel
![Page 16: チーム開発の要はViewModelにある](https://reader034.vdocuments.us/reader034/viewer/2022052213/5565ffafd8b42a2a4d8b4daa/html5/thumbnails/16.jpg)
ViewModelのプロパティとメソッド▷UI工程の最初に設計
プロパティ
メソッド
![Page 17: チーム開発の要はViewModelにある](https://reader034.vdocuments.us/reader034/viewer/2022052213/5565ffafd8b42a2a4d8b4daa/html5/thumbnails/17.jpg)
設計工程での画面デザイン▷ソリューションに以下のクラスファイルを追加
• Modelのクラス
• ViewModelのクラス
• Viewのクラス
![Page 18: チーム開発の要はViewModelにある](https://reader034.vdocuments.us/reader034/viewer/2022052213/5565ffafd8b42a2a4d8b4daa/html5/thumbnails/18.jpg)
設計工程での画面デザイン
▷ViewModelに設計済のプロパティとメソッドを定義
•入口の定義だけで中身はなくてよい
![Page 19: チーム開発の要はViewModelにある](https://reader034.vdocuments.us/reader034/viewer/2022052213/5565ffafd8b42a2a4d8b4daa/html5/thumbnails/19.jpg)
設計工程での画面デザイン
▷ViewModelのクラスを継承してサンプルデータクラスを作成
• Blendの機能でクラスからサンプル生成可能
![Page 20: チーム開発の要はViewModelにある](https://reader034.vdocuments.us/reader034/viewer/2022052213/5565ffafd8b42a2a4d8b4daa/html5/thumbnails/20.jpg)
設計工程での画面デザイン
▷デザイナがViewをXAMLを使ってデザイン•サンプルデータを使って可変部分も含めてデザイン
• StoryBoardを使ってアニメーションもデザイン
•開発担当は、必要に応じてコンバーターを提供
•自然とコラボレーション
![Page 21: チーム開発の要はViewModelにある](https://reader034.vdocuments.us/reader034/viewer/2022052213/5565ffafd8b42a2a4d8b4daa/html5/thumbnails/21.jpg)
XAMLで
デザイン担当と
開発担当は
語り合う
![Page 22: チーム開発の要はViewModelにある](https://reader034.vdocuments.us/reader034/viewer/2022052213/5565ffafd8b42a2a4d8b4daa/html5/thumbnails/22.jpg)
できるWeb会社は
HTMLと
JavaScriptで
語り合う
![Page 23: チーム開発の要はViewModelにある](https://reader034.vdocuments.us/reader034/viewer/2022052213/5565ffafd8b42a2a4d8b4daa/html5/thumbnails/23.jpg)
まとめ▷デザイン担当に必要情報を渡すために
• ViewModelクラスとサンプルデータクラスの提供
▷開発担当がデザインコンセプトを理解するため
• XAMLを使ってデザインし会話
つまり
![Page 24: チーム開発の要はViewModelにある](https://reader034.vdocuments.us/reader034/viewer/2022052213/5565ffafd8b42a2a4d8b4daa/html5/thumbnails/24.jpg)
ロジックがなくても
デザインが確認できる
設計工程 成果物
![Page 25: チーム開発の要はViewModelにある](https://reader034.vdocuments.us/reader034/viewer/2022052213/5565ffafd8b42a2a4d8b4daa/html5/thumbnails/25.jpg)
ロジックに専念できる
設計工程 成果物
![Page 26: チーム開発の要はViewModelにある](https://reader034.vdocuments.us/reader034/viewer/2022052213/5565ffafd8b42a2a4d8b4daa/html5/thumbnails/26.jpg)
スタートは
開発担当が作る
ViewModel
![Page 27: チーム開発の要はViewModelにある](https://reader034.vdocuments.us/reader034/viewer/2022052213/5565ffafd8b42a2a4d8b4daa/html5/thumbnails/27.jpg)
FIN