uxdd mvvm store apps 蜜葉式開発フロー

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

• H.N. : 蜜葉 優 [mitsuba yu]• Expression Blend が好きな人• 最近はカメラが趣味• twitter:@mitsuba_tan• Community:Windows Phone Arch• blog:http://d.hatena.ne.jp/c-mitsuba

profile

• プログラマにはデザイナっていう人• デザイナにはプログラマっていう人• UX デザイナとかインタラクションデベ

ロッパーとか怪しい肩書きはじめました• XAML が好きな人• C# はよくわかんない。• ロジックとか興味ないけど• 見た目は綺麗な方がいい

profile

経緯

なんかちょっとまえからWindows Store Appsっていうのがあるらしい

作ってみよう！

なんかテンプレがむずかしい

あれ、 Windows Phone にあった SampleDatasetも DataStore も Behavior もないじゃない

なんかあたしが Windows Phone でやってたことが何一つできない・・・

XAML(Blend) と C#/VB(Visual Studio) ってデザイナとプログラマの協業支援じゃなかったっけ…

決別の危機！

ちょっと作り方を考えよう。

ふむ、、、こうすればいいかも？

今日はそんな体験談をお話します。

• アプリケーション開発を分担する– MVVM

– 協業

テーマ

• すばらしき Windows Phone

– SampleDataset

– DataStore

– Behavior

agenda

• Windows Store Apps でこうつくった– ラフ作成– コピペ XAML

– ItemsTemplate 書く– ぷろっぷたぶたぶぐらい覚えれるよね– CollectionViewSource でしあわせ

agenda

前提知識

• Silverlight,WPF,WindowsPhoneApps,Window

s Store Apps を開発するときのパターン• XAML=

Extensible Application Markup Language

• C#/VB

– なんか処理するコード

XAML+C#/VB

• 誤解を恐れずにいっちゃえば、• XAML = HTML ＋ CSS 的な役割• C#/VB = Javascript 的な役割

XAML+C#/VB

MVVM みたいなもの

ModelViewViewModel

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

なんかむずかしくってよーわからん。

View : みためViewMode : 表示したいデータをまとめたやつModel : 実際にデータ取ってくるコード

程度に考えてる

もう少し言うと、なんでもかんでもMVVMにする必要はないかんじ

• MVVM を使うと綺麗に疎結合できる！– V,VM,M 間でだれがどこを実装するか分担できる

• 一人やったら、やらなくてもいいんちゃうの？

– 綺麗に分けるのに、どこまで分けるかとか、難しい実装とかいるかもしれない。• べたで書いた方が開発速度がいいかもしれない。

– コードの再利用性が高くなる！• ほんとに再利用する？

– 綺麗に分けると、コードをいじった時の影響が少なくて済むから保守性があがる。• これはそうかも

MVVM に思うこと

MVVM に思うこと• MVVM を使うと綺麗に疎結合できる！

– V,VM,M 間でだれがどこを実装するか分担できる• 一人やったら、やらなくてもいいんちゃうの？

– 綺麗に分けるのに、どこまで分けるかとか、難しい実装とかいるかもしれない。• べたで書いた方が開発速度がいいかもしれない。

– コードの再利用性が高くなる！• ほんとに再利用する？

– 綺麗に分けると、コードをいじった時の影響が少なくて済むから保守性があがる。• これはそうかも

とはいえ、やっぱりむずかしそう

まーでもC#とかよくわかんないし、流行りでなんかいいらしいけど、よくわかんない。

でもC#書いてくれる人が書きやすいように見た目つくると、あとでいろいろ変更とかあったときに勝手にやれるらしい

デザイナ「プログラマのことなんてほっといてデザインできる！」

プログラマ「デザイナほっといてとりあえずデータさえ取ってくればいい」

ぷろぐらむとかしらなくても見た目がつくれる！

じゃあ見た目は XAML で完結すればいいんじゃないか！

とりあえず見た目に関してはC#書いたら負けなんじゃないか！ 　　←結論

気づいたら MVVM のような形になってた

M <-> V M <-> M

言い換えれば、ホットモックみたいなものをつくります。

すばらしきWindows Phone

• SampleDataSet

• DataStore

• Behavior

• Binding

• Converter

Windows 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 Phone の場合

• つくるもののデータがあれば、いきなり作りはじめられます。

• 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# なしで作れたこともあった。

• データもある体で作れるし、 XAML で出来ないところはプログラマにまかせるって言える

Windows Phone の場合

とはいえ、日本で売っていない Windows Phone 8

7.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 Apps のデザイ

ナならちょっとぐらい C# 書けないと…

まとめ

• ただまぁ、 ItemsTemplate 作って、 CollectionViewSource でデータでるようにしたし、ここまでやったから、

• あとプログラマよろしく でいいとおもう– デザイナとプログラマの線引き– 協業なんてなかったんや。。。

まとめ

所感

せっかく、めとろめとろ言ってたんやから、電話みたいにもっと作りやすくしてほしいなー

ご清聴ありがとうございました

@mitsuba_tan