Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
UXDD MVVM Store Apps 蜜葉式開発フロー蜜葉 優
• H.N. :蜜葉 優 [mitsuba yu]• Expression Blendが好きな人• 最近はカメラが趣味• twitter:@mitsuba_tan• Community:Windows Phone Arch• blog:http...
• プログラマにはデザイナっていう人• デザイナにはプログラマっていう人• UXデザイナとかインタラクションデベロッパーとか怪しい肩書きはじめました• XAMLが好きな人• C#はよくわかんない。• ロジックとか興味ないけど• 見た目は綺麗な方...
経緯
なんかちょっとまえからWindows Store Appsっていうのがあるらしい
作ってみよう!
なんかテンプレがむずかしい
あれ、Windows PhoneにあったSampleDatasetもDataStoreもBehaviorもないじゃない
なんかあたしがWindows Phoneでやってたことが何一つできない・・・
XAML(Blend)とC#/VB(VisualStudio)ってデザイナとプログラマの協業支援じゃなかったっけ…
決別の危機!
ちょっと作り方を考えよう。
ふむ、、、こうすればいいかも?
今日はそんな体験談をお話します。
• アプリケーション開発を分担する– MVVM– 協業テーマ
• すばらしきWindows Phone– SampleDataset– DataStore– Behavioragenda
• Windows Store Appsでこうつくった– ラフ作成– コピペXAML– ItemsTemplate書く– ぷろっぷたぶたぶぐらい覚えれるよね– CollectionViewSourceでしあわせagenda
前提知識
• Silverlight,WPF,WindowsPhoneApps,WindowsStore Appsを開発するときのパターン• XAML=Extensible Application Markup Language• C#/VB– なんか処...
• 誤解を恐れずにいっちゃえば、• XAML = HTML+CSS的な役割• C#/VB = Javascript的な役割XAML+C#/VB
MVVMみたいなもの
ModelViewViewModel
MVVMModel View ViewModel(モデル・ビュー・ビューモデル;MVVM)は、独自のGUI(グラフィカルユーザーインターフェース)を持つアプリケーションソフトウェアを、以下に述べるようなModel-View-ViewModelの...
なんかむずかしくってよーわからん。
View : みためViewMode :表示したいデータをまとめたやつModel : 実際にデータ取ってくるコード
程度に考えてる
もう少し言うと、なんでもかんでもMVVMにする必要はないかんじ
• MVVMを使うと綺麗に疎結合できる!– V,VM,M間でだれがどこを実装するか分担できる• 一人やったら、やらなくてもいいんちゃうの?– 綺麗に分けるのに、どこまで分けるかとか、難しい実装とかいるかもしれない。• べたで書いた方が開発速度が...
MVVMに思うこと• MVVMを使うと綺麗に疎結合できる!– V,VM,M間でだれがどこを実装するか分担できる• 一人やったら、やらなくてもいいんちゃうの?– 綺麗に分けるのに、どこまで分けるかとか、難しい実装とかいるかもしれない。• べたで書...
とはいえ、やっぱりむずかしそう
まーでもC#とかよくわかんないし、流行りでなんかいいらしいけど、よくわかんない。
でもC#書いてくれる人が書きやすいように見た目つくると、あとでいろいろ変更とかあったときに勝手にやれるらしい
デザイナ「プログラマのことなんてほっといてデザインできる!」
プログラマ「デザイナほっといてとりあえずデータさえ取ってくればいい」
ぷろぐらむとかしらなくても見た目がつくれる!
じゃあ見た目はXAMLで完結すればいいんじゃないか!
とりあえず見た目に関してはC#書いたら負けなんじゃないか!←結論
気づいたらMVVMのような形になってた
M <-> V M <-> M
言い換えれば、ホットモックみたいなものをつくります。
すばらしきWindows Phone
• SampleDataSet• DataStore• Behavior• Binding• ConverterWindows Phoneの場合
• SampleDataSet– 実行時に取得するデータをデザイン時に仮に生成してくれる機能– 取得するデータの形式さえ決まっていれば、コードの実装を待たずにデザインを作ることができるようになるのがメリットWindows Phoneの場合
• DataStore– アプリケーション内で利用したい値を保持する機能– DataStoreの生成にはコードを必要とせず、ビジュアルに定義が可能– 後述するBehaviorをつかえば、値の変更も可能Windows Phoneの場合
• Behavior– だれのなにをどうしたときに、– だれのなにをどうするっていう機能– 例えば、ボタンをクリックしたときに、テキストを変更するとかWindows Phoneの場合
• Binding– コントロールのプロパティとコントロールのプロパティをひもづける機能– 例えば、TextBoxに入力している文字とTextBlockに表示する文字をひもづけるWindows Phoneの場合
• Converter– Bindingでひもづけた間でデータに何か編集を行う機能(というか実装?– 例えば、TextBoxに100(int)と入力すると、TextBlockに01:40(TimeSpan)と表示するなどWindows Phon...
• つくるもののデータがあれば、いきなり作りはじめられます。• SampleDatasetで簡単Windows Phoneの場合
• もしもデータがなければ、それっぽいデータを作ればいい。• XMLからSampleDataSetのインポートで簡単Windows Phoneの場合
• UIで必要な動的な値はDataStoreでおっけーWindows Phoneの場合
・ボタン押した時になにかしたいはビヘイビアでおっけー・ステートの変更とかも、Storyboardキックしたりとかプロパティ変えるとかDataStoreの値になんかするとかも簡単Windows Phoneの場合
やってみよう
例えばHatenaFotolifeの画像を取ってくるhttp://f.hatena.ne.jp/hotfoto?mode=rss
Xml取ってくればすぐにデザインができる!
例えば1から順番に数字タップして速度を競うゲームを作ってみる
SampleDataSetを実データとして使ったり、ビヘイビアを駆使すればコードいらず!
• SampleDataSet,DataStore,behavior,binding,Converter,Storyboardあたりを駆使すれば、見た目はほとんど実装できたし、動的なものが必要ないアプリはC#なしで作れたこともあった。• データ...
とはいえ、日本で売っていないWindows Phone 87.8 ->
アプリ作っても使える人も端末も少ないのが現実
そこでwin8に合わせてStore Appsかー
• Windows Store AppsにはSampleDataset、DataStore、Behaviorがない。• あるのは、Storyboard、Binding、Converterぐらい最初に言ったように
• SampleDataSetがないDataStoreがない!– データありきでデザインとか開発ができない• Behaviorがない!– C#かかなあかん。。最初に言ったように
Storeのデモ!
と言いたいけど、さっきの電話レベルをストアでやるのはちょっとつらい
いやかなりつらい
なので、アプリを作る前に、クラスの設計とかデータの構造とかどの画面でどんな情報が必要でどう紐づくっていう設計を最初にきちんとしないとつらい。。
ほんとはアプリ構成とかIAとかやるべきだけど、こんなふうにViewから作ります。
ほんとはアプリ構成とかIAとかやるべきだけど、今日はできた前提でViewを作ります。
・ベタ書きXAML・ItemsTemplate化・CollectionViewSource・必要ならConverter自作
ここまでできれば、あとはプログラマよろしく!
でも、、、
やっぱりパソコンはちょっとたいへん <ー結論
• Windows Store Appsでは協業・分離できるほどの環境が整ってない。• ボタン押した時にStoryboardを動かすとかもC#で書かないといけない。• .csがどんどんXAMLと密結合する• しかも、Windows Store ...
• ただまぁ、ItemsTemplate作って、CollectionViewSourceでデータでるようにしたし、ここまでやったから、• あとプログラマよろしく でいいとおもう– デザイナとプログラマの線引き– 協業なんてなかったんや。。。まとめ
所感
せっかく、めとろめとろ言ってたんやから、電話みたいにもっと作りやすくしてほしいなー
ご清聴ありがとうございました@mitsuba_tan
UXDD MVVM Store Apps 蜜葉式開発フロー
Upcoming SlideShare
Loading in …5
×

UXDD MVVM Store Apps 蜜葉式開発フロー

724 views

Published on

  • Be the first to comment

  • Be the first to like this

UXDD MVVM Store Apps 蜜葉式開発フロー

  1. 1. UXDD MVVM Store Apps 蜜葉式開発フロー蜜葉 優
  2. 2. • H.N. :蜜葉 優 [mitsuba yu]• Expression Blendが好きな人• 最近はカメラが趣味• twitter:@mitsuba_tan• Community:Windows Phone Arch• blog:http://d.hatena.ne.jp/c-mitsubaprofile
  3. 3. • プログラマにはデザイナっていう人• デザイナにはプログラマっていう人• UXデザイナとかインタラクションデベロッパーとか怪しい肩書きはじめました• XAMLが好きな人• C#はよくわかんない。• ロジックとか興味ないけど• 見た目は綺麗な方がいいprofile
  4. 4. 経緯
  5. 5. なんかちょっとまえからWindows Store Appsっていうのがあるらしい
  6. 6. 作ってみよう!
  7. 7. なんかテンプレがむずかしい
  8. 8. あれ、Windows PhoneにあったSampleDatasetもDataStoreもBehaviorもないじゃない
  9. 9. なんかあたしがWindows Phoneでやってたことが何一つできない・・・
  10. 10. XAML(Blend)とC#/VB(VisualStudio)ってデザイナとプログラマの協業支援じゃなかったっけ…
  11. 11. 決別の危機!
  12. 12. ちょっと作り方を考えよう。
  13. 13. ふむ、、、こうすればいいかも?
  14. 14. 今日はそんな体験談をお話します。
  15. 15. • アプリケーション開発を分担する– MVVM– 協業テーマ
  16. 16. • すばらしきWindows Phone– SampleDataset– DataStore– Behavioragenda
  17. 17. • Windows Store Appsでこうつくった– ラフ作成– コピペXAML– ItemsTemplate書く– ぷろっぷたぶたぶぐらい覚えれるよね– CollectionViewSourceでしあわせagenda
  18. 18. 前提知識
  19. 19. • Silverlight,WPF,WindowsPhoneApps,WindowsStore Appsを開発するときのパターン• XAML=Extensible Application Markup Language• C#/VB– なんか処理するコードXAML+C#/VB
  20. 20. • 誤解を恐れずにいっちゃえば、• XAML = HTML+CSS的な役割• C#/VB = Javascript的な役割XAML+C#/VB
  21. 21. MVVMみたいなもの
  22. 22. ModelViewViewModel
  23. 23. MVVMModel View ViewModel(モデル・ビュー・ビューモデル;MVVM)は、独自のGUI(グラフィカルユーザーインターフェース)を持つアプリケーションソフトウェアを、以下に述べるようなModel-View-ViewModelの3つの部分に分割して設計・実装するソフトウェアアーキテクチャパターンである。MVC(Model-View-Controller)の派生パターンであり、特にPresentation Model[1]パターンを直接の祖先に持つ。MVVMを考慮してアプリケーションを開発する目的は、他のMVC系のパターンと同様にアプリケーションの「プレゼンテーションとドメインを分離[2]」する事で、アプリケーション開発における保守性・開発生産性に寄与する事である。元来マイクロソフト社のユーザーインターフェースサブシステムであるWPF(Windows Presentation Foundation)やSilverlightの世界で生まれた考え方ではあるが、現在はAndroidやウェブブラウザ上でのJavaScriptの世界でもMVVMの利用は広がっている。wikipedia
  24. 24. なんかむずかしくってよーわからん。
  25. 25. View : みためViewMode :表示したいデータをまとめたやつModel : 実際にデータ取ってくるコード
  26. 26. 程度に考えてる
  27. 27. もう少し言うと、なんでもかんでもMVVMにする必要はないかんじ
  28. 28. • MVVMを使うと綺麗に疎結合できる!– V,VM,M間でだれがどこを実装するか分担できる• 一人やったら、やらなくてもいいんちゃうの?– 綺麗に分けるのに、どこまで分けるかとか、難しい実装とかいるかもしれない。• べたで書いた方が開発速度がいいかもしれない。– コードの再利用性が高くなる!• ほんとに再利用する?– 綺麗に分けると、コードをいじった時の影響が少なくて済むから保守性があがる。• これはそうかもMVVMに思うこと
  29. 29. MVVMに思うこと• MVVMを使うと綺麗に疎結合できる!– V,VM,M間でだれがどこを実装するか分担できる• 一人やったら、やらなくてもいいんちゃうの?– 綺麗に分けるのに、どこまで分けるかとか、難しい実装とかいるかもしれない。• べたで書いた方が開発速度がいいかもしれない。– コードの再利用性が高くなる!• ほんとに再利用する?– 綺麗に分けると、コードをいじった時の影響が少なくて済むから保守性があがる。• これはそうかも
  30. 30. とはいえ、やっぱりむずかしそう
  31. 31. まーでもC#とかよくわかんないし、流行りでなんかいいらしいけど、よくわかんない。
  32. 32. でもC#書いてくれる人が書きやすいように見た目つくると、あとでいろいろ変更とかあったときに勝手にやれるらしい
  33. 33. デザイナ「プログラマのことなんてほっといてデザインできる!」
  34. 34. プログラマ「デザイナほっといてとりあえずデータさえ取ってくればいい」
  35. 35. ぷろぐらむとかしらなくても見た目がつくれる!
  36. 36. じゃあ見た目はXAMLで完結すればいいんじゃないか!
  37. 37. とりあえず見た目に関してはC#書いたら負けなんじゃないか!←結論
  38. 38. 気づいたらMVVMのような形になってた
  39. 39. M <-> V M <-> M
  40. 40. 言い換えれば、ホットモックみたいなものをつくります。
  41. 41. すばらしきWindows Phone
  42. 42. • SampleDataSet• DataStore• Behavior• Binding• ConverterWindows Phoneの場合
  43. 43. • SampleDataSet– 実行時に取得するデータをデザイン時に仮に生成してくれる機能– 取得するデータの形式さえ決まっていれば、コードの実装を待たずにデザインを作ることができるようになるのがメリットWindows Phoneの場合
  44. 44. • DataStore– アプリケーション内で利用したい値を保持する機能– DataStoreの生成にはコードを必要とせず、ビジュアルに定義が可能– 後述するBehaviorをつかえば、値の変更も可能Windows Phoneの場合
  45. 45. • Behavior– だれのなにをどうしたときに、– だれのなにをどうするっていう機能– 例えば、ボタンをクリックしたときに、テキストを変更するとかWindows Phoneの場合
  46. 46. • Binding– コントロールのプロパティとコントロールのプロパティをひもづける機能– 例えば、TextBoxに入力している文字とTextBlockに表示する文字をひもづけるWindows Phoneの場合
  47. 47. • Converter– Bindingでひもづけた間でデータに何か編集を行う機能(というか実装?– 例えば、TextBoxに100(int)と入力すると、TextBlockに01:40(TimeSpan)と表示するなどWindows Phoneの場合
  48. 48. • つくるもののデータがあれば、いきなり作りはじめられます。• SampleDatasetで簡単Windows Phoneの場合
  49. 49. • もしもデータがなければ、それっぽいデータを作ればいい。• XMLからSampleDataSetのインポートで簡単Windows Phoneの場合
  50. 50. • UIで必要な動的な値はDataStoreでおっけーWindows Phoneの場合
  51. 51. ・ボタン押した時になにかしたいはビヘイビアでおっけー・ステートの変更とかも、Storyboardキックしたりとかプロパティ変えるとかDataStoreの値になんかするとかも簡単Windows Phoneの場合
  52. 52. やってみよう
  53. 53. 例えばHatenaFotolifeの画像を取ってくるhttp://f.hatena.ne.jp/hotfoto?mode=rss
  54. 54. Xml取ってくればすぐにデザインができる!
  55. 55. 例えば1から順番に数字タップして速度を競うゲームを作ってみる
  56. 56. SampleDataSetを実データとして使ったり、ビヘイビアを駆使すればコードいらず!
  57. 57. • SampleDataSet,DataStore,behavior,binding,Converter,Storyboardあたりを駆使すれば、見た目はほとんど実装できたし、動的なものが必要ないアプリはC#なしで作れたこともあった。• データもある体で作れるし、XAMLで出来ないところはプログラマにまかせるって言えるWindows Phoneの場合
  58. 58. とはいえ、日本で売っていないWindows Phone 87.8 ->
  59. 59. アプリ作っても使える人も端末も少ないのが現実
  60. 60. そこでwin8に合わせてStore Appsかー
  61. 61. • Windows Store AppsにはSampleDataset、DataStore、Behaviorがない。• あるのは、Storyboard、Binding、Converterぐらい最初に言ったように
  62. 62. • SampleDataSetがないDataStoreがない!– データありきでデザインとか開発ができない• Behaviorがない!– C#かかなあかん。。最初に言ったように
  63. 63. Storeのデモ!
  64. 64. と言いたいけど、さっきの電話レベルをストアでやるのはちょっとつらい
  65. 65. いやかなりつらい
  66. 66. なので、アプリを作る前に、クラスの設計とかデータの構造とかどの画面でどんな情報が必要でどう紐づくっていう設計を最初にきちんとしないとつらい。。
  67. 67. ほんとはアプリ構成とかIAとかやるべきだけど、こんなふうにViewから作ります。
  68. 68. ほんとはアプリ構成とかIAとかやるべきだけど、今日はできた前提でViewを作ります。
  69. 69. ・ベタ書きXAML・ItemsTemplate化・CollectionViewSource・必要ならConverter自作
  70. 70. ここまでできれば、あとはプログラマよろしく!
  71. 71. でも、、、
  72. 72. やっぱりパソコンはちょっとたいへん <ー結論
  73. 73. • Windows Store Appsでは協業・分離できるほどの環境が整ってない。• ボタン押した時にStoryboardを動かすとかもC#で書かないといけない。• .csがどんどんXAMLと密結合する• しかも、Windows Store AppsのデザイナならちょっとぐらいC#書けないと…まとめ
  74. 74. • ただまぁ、ItemsTemplate作って、CollectionViewSourceでデータでるようにしたし、ここまでやったから、• あとプログラマよろしく でいいとおもう– デザイナとプログラマの線引き– 協業なんてなかったんや。。。まとめ
  75. 75. 所感
  76. 76. せっかく、めとろめとろ言ってたんやから、電話みたいにもっと作りやすくしてほしいなー
  77. 77. ご清聴ありがとうございました@mitsuba_tan

×