Windows Store Apps、普段こういうこと気にしながら、こんな風に作ってます。

1. 普段こういうの気にしながら、こんな風に作ってます
蜜葉 優

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

3. • プログラマにはデザイナっていう人
• デザイナにはプログラマっていう人
• XAMLが好きな人
• C#はよくわかんない。
• ロジックとか興味ないけど
• 見た目は綺麗な方がいい
profile

6. 今日のお題は

7. できるだけC#を書かずにアプリを
つくりたい

8. というか、できるだけBindingで
作っていきたい

9. なんで？

10. 答えはワークフローにあって

11. 設計というより、
普段こんなこと流れで、
こんなこと考えて
アプリ作ってます的な

12. そんなおはなしです。

13. • UIのための準備体操
• コールドモックを作ろう
• べたXAMLのすすめ
• d:DataContext
• ConverterとProperty
agenda

14. UIのための準備体操

15. • UIがないとアプリがつくれません。
• 過去のMetro UI
• プリミティブな図形
• はっきりした面と色
• 適切なマージンなどなど
• 基本的にはテンプレート通りに作れば問題ない
Microsoft Style UI

16. • とはいえ、まじめにやるときはいきなりテ
ンプレを使わずにスケッチします。
UIについて

18. • スケッチを作れば、いまからどんなアプリ
を作っていくかがハッキリ見える。
• この部分はこのコントロールで作れそうと
か、ここはこういう風にGridを切ろうとか
が見えてくる。
UIについて

19. • いきなりXAMLを書き出すと、Gridの構造
とか実験用Styleとかいっぱいできて、わ
けわからなくなりがち。
• ->XAMLが汚くなる。
• そうならないための準備体操
スケッチ大事

20. • スケッチが出来たらデザインをします。
• デザインにはPowerPoint Storyboardとか
Psdテンプレートを使います。
デザイン

23. デザインできた！

24. 開発しよう！

25. いやそのまえに。

26. そのデザイン、ちゃんと使いやすい？

27. いや、実機で動かしたら
なんか違うんだよね

28. ・・・。

29. コールドモックを作ろう

30. • デザインのコレジャナイ感を回避する
• 動きそうで動かないでもなんか動いてる
モックアプリ
目標

31. • Psdで作ったデザインの中に
– ListViewがあれば、ListViewItemの画像を切り出
す。
– タイルグループは、タイルグループで画像にす
る
– 背景とかヘッダーはそのままつかう
作り方

36. • 安易にプロジェクトを作ってはいけません。
• ここでようやくVisual Studioでモックプロ
ジェクトを作成します。
作り方

37. • プロジェクトのLayoutRootに背景画像を
Imageコントロールでおきます。
作り方

38. Grid

39. • 適当なところにコンテンツ表示用の
ScrollViewerをおきます。
作り方

40. Grid
ScrollViewer

41. • StackPanelにしてならべます。
作り方

42. Grid
ScrollViewer

43. • ListViewの画像は縦に長いので、同じように
ScrollViewerでスクロールできるようにしま
す。
作り方

44. Grid
ScrollViewer

46. ぬるぬるうごくけどつつけない
モックの出来上がり

47. ベタXAMLのすすめ

48. • じゃあクラス設計とか始めようとかなるか
もしれないけど。
• 悩む時間がもったいないので、べたべたで
XAMLを書いていきます。
• というか、さらさらとデータ周りが書けるほどC#わからへん。。
べたXAMLのすす
め

49. • 文字列とかは適当で、これがデザイン
ビューで見えるようにつくります。
まず見える化

50. • ListViewなど、繰り返しが必要なコ
ントロールは、１つベタで書いて
いきます。
• ベタで書いたやつをコピーして、
ItemsTemplateにします。
• このとき、TextBlockとかは静的な
文字列でOK
まず見える化

51. • あとはListViewに適当にRectとかダ
ミーオブジェクトをおいていく。
• ItemsTemplateが定義されているか
ら、子要素の数だけItemsTemplate
のコントロールが生成される。
• Rectをおいても四角形は表示されな
い。
まず見える化
ItemsTemplateを作れば、実際はRectでもこんな風に表示される->

52. d:DataContext

53. • ここまでできると実データを表示して、ア
プリのレイアウトが崩れないか、綺麗に見
えるか確認したくなる。
• とりあえず表示のためにつくったRect（ダ
ミーオブジェクト）も削除したい。
• やっとBindingの出番ですね。
d:DataContext

54. • d:DataContextはデザインビューでのみ実行
されるDataContext
• 実際にアプリを実行したときとは違うデザ
イン用のDataContextをデザインビューで表
示できる。
• これがないと画面になにも表示されない。
• （そのためにダミーをおいてた）
d:DataContext

55. • d:DataContextはデザインビューでのみ実行
されるDataContext
• 実際にアプリを実行したときとは違うデザ
イン用のDataContextをデザインビューで表
示できる。
• これがないと画面になにも表示されない。
• （そのためにダミーをおいてた）
• DataContextを書いてもらおう！
d:DataContext

56. public partial class ListViewDataContext
{
public ObservableCollection<ListViewItemsProperty> ListViewItemsProperties = new
ObservableCollection<ListViewItemsProperty>();
public ListViewDataContext()
{
ListViewItemsProperties.Add(new ListViewItemsProperty() {
Title = "ほげ１",
ImageUri = new Uri("http://hoge.com/fuga.png")
});
ListViewItemsProperties.Add(new ListViewItemsProperty() {
Title = "ほげ２",
ImageUri = new Uri("http://hoge.com/fuga.png")
});
ListViewItemsProperties.Add(new ListViewItemsProperty() {
Title = "ほげ３",
ImageUri = new Uri("http://hoge.com/fuga.png")
});
}

57. public ObservableCollection<ListViewItemsProperty>
ListViewItemsProperties
{
get { return this.ListViewItemsProperties; }
}
}
public class ListViewItemsProperty
{
public String Title { get; set; }
public Uri ImageUri { get; set; }
}
}

58. • <ListView
d:DataContext="{Binding
ListViewItemsProperties,
Source={d:DesignInstance
Type=DataContextのねーむすぺーす,
IsDesignTimeCreatable=True}}”
>
ListViewにおまじないを

59. ItemTemplateにBinding
<Image Source=“{Binding ImageUri}” >
<TextBlock Text=“{Binding Title}” >

60. 見た目は出来たら動かしたい

61. ぴってしたら、出たり消えたりし
てほしい！とか…

62. • 例えば、ToggleButtonがOnの時、Imageを表
示して、Offの時は表示しないとかしたい。
• Image.VisibilityにToggleButton.IsOnを
BooleanToVisibilityConverter挟んでBindingす
ればOK
• ToggleButtonのイベントとかも極力かかな
い！
• プロジェクトがConverterだらけになるのは
仕方が無いかなぁとおもってる。
ToggleButtonとVisibility

63. まとめ

64. • みつばてきワークフロー
– スケッチ
– デザイン
– 使いやすさ確認用モックプロジェクト作成
– 実プロジェクト作成
– タイルとかスプラッシュ作る
– とりあえずぜんぶXAMLで見えるようにする
– XAMLに必要なクラス作る
– DataContext作ってデータ取ってくる
– ちょっといいかんじにアニメーションつける
– 完成！
まとめ

65. • デザインとかXAMLの構造がもやもやした
ままとりあえず書き出さない。
• モックを作って、アプリとしてUI設計がい
いかんじか、インタラクションに問題がな
いか試してみる。
まとめ

66. • 実はべたXAMLはむだ！
– XAMLerとC#erが１対１でペアプロ出来る環境
であれば省略可能。あるいは全部出来る人
– デザイナとプログラマをセットにするのが一
番効率がいい
• d:DataContextのおまじないはVSからも
Blendからも自動生成できないから覚える
しかない。。
まとめ

67. • インタラクションはBindingとConverterを
うまく使って、.xaml.csにUI操作のための
コードをかかない！
– デザイン変更するときにxamlみてーcsみてー
xamlなおしてーうごかないーあーここのcsで
なんかやらかしてるーってなる。。
まとめ

68. 実は。

69. • UIのための準備体操
• コールドモックを作ろう
• べたXAMLのすすめ
• d:DataContext
• ConverterとProperty
agenda

70. • UIのための準備体操
• コールドモックを作ろう <-SampleDataSetでOK
• べたXAMLのすすめ <-SampleDataSetとDataStoreでOK
• d:DataContext <-SampleDataSetでOK
• ConverterとProperty <-BehaviorでOK
agenda

71. Windows Blueでは
Behaviorと
DataSetと
SampleData
がないのではよ！

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

73. • みつばてきワークフロー
– スケッチ
– デザイン
– 使いやすさ確認用モックプロジェクト作成
– 実プロジェクト作成
– タイルとかスプラッシュ作る
– とりあえずぜんぶXAMLで見えるようにする
– XAMLに必要なクラス作る
– DataContext作ってデータ取ってくる
– ちょっといいかんじにアニメーションつける
– 完成！
まとめ