普段こういうの気にしながら、こんな風に作ってます蜜葉 優
• H.N. :蜜葉 優 [mitsuba yu]• Expression Blendが好きな人• 最近はカメラが趣味• twitter:@mitsuba_tan• Community:Windows Phone Arch• blog:http...
• プログラマにはデザイナっていう人• デザイナにはプログラマっていう人• XAMLが好きな人• C#はよくわかんない。• ロジックとか興味ないけど• 見た目は綺麗な方がいいprofile
今日のお題は
できるだけC#を書かずにアプリをつくりたい
というか、できるだけBindingで作っていきたい
なんで?
答えはワークフローにあって
設計というより、普段こんなこと流れで、こんなこと考えてアプリ作ってます的な
そんなおはなしです。
• UIのための準備体操• コールドモックを作ろう• べたXAMLのすすめ• d:DataContext• ConverterとPropertyagenda
UIのための準備体操
• UIがないとアプリがつくれません。• 過去のMetro UI• プリミティブな図形• はっきりした面と色• 適切なマージンなどなど• 基本的にはテンプレート通りに作れば問題ないMicrosoft Style UI
• とはいえ、まじめにやるときはいきなりテンプレを使わずにスケッチします。UIについて
• スケッチを作れば、いまからどんなアプリを作っていくかがハッキリ見える。• この部分はこのコントロールで作れそうとか、ここはこういう風にGridを切ろうとかが見えてくる。UIについて
• いきなりXAMLを書き出すと、Gridの構造とか実験用Styleとかいっぱいできて、わけわからなくなりがち。• ->XAMLが汚くなる。• そうならないための準備体操スケッチ大事
• スケッチが出来たらデザインをします。• デザインにはPowerPoint StoryboardとかPsdテンプレートを使います。デザイン
デザインできた!
開発しよう!
いやそのまえに。
そのデザイン、ちゃんと使いやすい?
いや、実機で動かしたらなんか違うんだよね
・・・。
コールドモックを作ろう
• デザインのコレジャナイ感を回避する• 動きそうで動かないでもなんか動いてるモックアプリ目標
• Psdで作ったデザインの中に– ListViewがあれば、ListViewItemの画像を切り出す。– タイルグループは、タイルグループで画像にする– 背景とかヘッダーはそのままつかう作り方
• 安易にプロジェクトを作ってはいけません。• ここでようやくVisual Studioでモックプロジェクトを作成します。作り方
• プロジェクトのLayoutRootに背景画像をImageコントロールでおきます。作り方
Grid
• 適当なところにコンテンツ表示用のScrollViewerをおきます。作り方
GridScrollViewer
• StackPanelにしてならべます。作り方
GridScrollViewer
• ListViewの画像は縦に長いので、同じようにScrollViewerでスクロールできるようにします。作り方
GridScrollViewer
ぬるぬるうごくけどつつけないモックの出来上がり
ベタXAMLのすすめ
• じゃあクラス設計とか始めようとかなるかもしれないけど。• 悩む時間がもったいないので、べたべたでXAMLを書いていきます。• というか、さらさらとデータ周りが書けるほどC#わからへん。。べたXAMLのすすめ
• 文字列とかは適当で、これがデザインビューで見えるようにつくります。まず見える化
• ListViewなど、繰り返しが必要なコントロールは、1つベタで書いていきます。• ベタで書いたやつをコピーして、ItemsTemplateにします。• このとき、TextBlockとかは静的な文字列でOKまず見える化
• あとはListViewに適当にRectとかダミーオブジェクトをおいていく。• ItemsTemplateが定義されているから、子要素の数だけItemsTemplateのコントロールが生成される。• Rectをおいても四角形は表示されない。ま...
d:DataContext
• ここまでできると実データを表示して、アプリのレイアウトが崩れないか、綺麗に見えるか確認したくなる。• とりあえず表示のためにつくったRect(ダミーオブジェクト)も削除したい。• やっとBindingの出番ですね。d:DataContext
• d:DataContextはデザインビューでのみ実行されるDataContext• 実際にアプリを実行したときとは違うデザイン用のDataContextをデザインビューで表示できる。• これがないと画面になにも表示されない。• (そのために...
• d:DataContextはデザインビューでのみ実行されるDataContext• 実際にアプリを実行したときとは違うデザイン用のDataContextをデザインビューで表示できる。• これがないと画面になにも表示されない。• (そのために...
public partial class ListViewDataContext{public ObservableCollection<ListViewItemsProperty> ListViewItemsProperties = newO...
public ObservableCollection<ListViewItemsProperty>ListViewItemsProperties{get { return this.ListViewItemsProperties; }}}pu...
• <ListViewd:DataContext="{BindingListViewItemsProperties,Source={d:DesignInstanceType=DataContextのねーむすぺーす,IsDesignTimeCre...
ItemTemplateにBinding<Image Source=“{Binding ImageUri}” ><TextBlock Text=“{Binding Title}” >
見た目は出来たら動かしたい
ぴってしたら、出たり消えたりしてほしい!とか…
• 例えば、ToggleButtonがOnの時、Imageを表示して、Offの時は表示しないとかしたい。• Image.VisibilityにToggleButton.IsOnをBooleanToVisibilityConverter挟んでBi...
まとめ
• みつばてきワークフロー– スケッチ– デザイン– 使いやすさ確認用モックプロジェクト作成– 実プロジェクト作成– タイルとかスプラッシュ作る– とりあえずぜんぶXAMLで見えるようにする– XAMLに必要なクラス作る– DataContex...
• デザインとかXAMLの構造がもやもやしたままとりあえず書き出さない。• モックを作って、アプリとしてUI設計がいいかんじか、インタラクションに問題がないか試してみる。まとめ
• 実はべたXAMLはむだ!– XAMLerとC#erが1対1でペアプロ出来る環境であれば省略可能。あるいは全部出来る人– デザイナとプログラマをセットにするのが一番効率がいい• d:DataContextのおまじないはVSからもBlendから...
• インタラクションはBindingとConverterをうまく使って、.xaml.csにUI操作のためのコードをかかない!– デザイン変更するときにxamlみてーcsみてーxamlなおしてーうごかないーあーここのcsでなんかやらかしてるーって...
実は。
• UIのための準備体操• コールドモックを作ろう• べたXAMLのすすめ• d:DataContext• ConverterとPropertyagenda
• UIのための準備体操• コールドモックを作ろう <-SampleDataSetでOK• べたXAMLのすすめ <-SampleDataSetとDataStoreでOK• d:DataContext <-SampleDataSetでOK• C...
Windows BlueではBehaviorとDataSetとSampleDataがないのではよ!
ご清聴ありがとうございましたー
• みつばてきワークフロー– スケッチ– デザイン– 使いやすさ確認用モックプロジェクト作成– 実プロジェクト作成– タイルとかスプラッシュ作る– とりあえずぜんぶXAMLで見えるようにする– XAMLに必要なクラス作る– DataContex...
普段こういうこと気にしながら、こんな風に作ってます。
普段こういうこと気にしながら、こんな風に作ってます。
普段こういうこと気にしながら、こんな風に作ってます。
普段こういうこと気にしながら、こんな風に作ってます。
普段こういうこと気にしながら、こんな風に作ってます。
普段こういうこと気にしながら、こんな風に作ってます。
普段こういうこと気にしながら、こんな風に作ってます。
普段こういうこと気にしながら、こんな風に作ってます。
普段こういうこと気にしながら、こんな風に作ってます。
普段こういうこと気にしながら、こんな風に作ってます。
Upcoming SlideShare
Loading in …5
×

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

1,162 views

Published on

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

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,162
On SlideShare
0
From Embeds
0
Number of Embeds
173
Actions
Shares
0
Downloads
4
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

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

  1. 1. 普段こういうの気にしながら、こんな風に作ってます蜜葉 優
  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. • プログラマにはデザイナっていう人• デザイナにはプログラマっていう人• XAMLが好きな人• C#はよくわかんない。• ロジックとか興味ないけど• 見た目は綺麗な方がいいprofile
  4. 4. 今日のお題は
  5. 5. できるだけC#を書かずにアプリをつくりたい
  6. 6. というか、できるだけBindingで作っていきたい
  7. 7. なんで?
  8. 8. 答えはワークフローにあって
  9. 9. 設計というより、普段こんなこと流れで、こんなこと考えてアプリ作ってます的な
  10. 10. そんなおはなしです。
  11. 11. • UIのための準備体操• コールドモックを作ろう• べたXAMLのすすめ• d:DataContext• ConverterとPropertyagenda
  12. 12. UIのための準備体操
  13. 13. • UIがないとアプリがつくれません。• 過去のMetro UI• プリミティブな図形• はっきりした面と色• 適切なマージンなどなど• 基本的にはテンプレート通りに作れば問題ないMicrosoft Style UI
  14. 14. • とはいえ、まじめにやるときはいきなりテンプレを使わずにスケッチします。UIについて
  15. 15. • スケッチを作れば、いまからどんなアプリを作っていくかがハッキリ見える。• この部分はこのコントロールで作れそうとか、ここはこういう風にGridを切ろうとかが見えてくる。UIについて
  16. 16. • いきなりXAMLを書き出すと、Gridの構造とか実験用Styleとかいっぱいできて、わけわからなくなりがち。• ->XAMLが汚くなる。• そうならないための準備体操スケッチ大事
  17. 17. • スケッチが出来たらデザインをします。• デザインにはPowerPoint StoryboardとかPsdテンプレートを使います。デザイン
  18. 18. デザインできた!
  19. 19. 開発しよう!
  20. 20. いやそのまえに。
  21. 21. そのデザイン、ちゃんと使いやすい?
  22. 22. いや、実機で動かしたらなんか違うんだよね
  23. 23. ・・・。
  24. 24. コールドモックを作ろう
  25. 25. • デザインのコレジャナイ感を回避する• 動きそうで動かないでもなんか動いてるモックアプリ目標
  26. 26. • Psdで作ったデザインの中に– ListViewがあれば、ListViewItemの画像を切り出す。– タイルグループは、タイルグループで画像にする– 背景とかヘッダーはそのままつかう作り方
  27. 27. • 安易にプロジェクトを作ってはいけません。• ここでようやくVisual Studioでモックプロジェクトを作成します。作り方
  28. 28. • プロジェクトのLayoutRootに背景画像をImageコントロールでおきます。作り方
  29. 29. Grid
  30. 30. • 適当なところにコンテンツ表示用のScrollViewerをおきます。作り方
  31. 31. GridScrollViewer
  32. 32. • StackPanelにしてならべます。作り方
  33. 33. GridScrollViewer
  34. 34. • ListViewの画像は縦に長いので、同じようにScrollViewerでスクロールできるようにします。作り方
  35. 35. GridScrollViewer
  36. 36. ぬるぬるうごくけどつつけないモックの出来上がり
  37. 37. ベタXAMLのすすめ
  38. 38. • じゃあクラス設計とか始めようとかなるかもしれないけど。• 悩む時間がもったいないので、べたべたでXAMLを書いていきます。• というか、さらさらとデータ周りが書けるほどC#わからへん。。べたXAMLのすすめ
  39. 39. • 文字列とかは適当で、これがデザインビューで見えるようにつくります。まず見える化
  40. 40. • ListViewなど、繰り返しが必要なコントロールは、1つベタで書いていきます。• ベタで書いたやつをコピーして、ItemsTemplateにします。• このとき、TextBlockとかは静的な文字列でOKまず見える化
  41. 41. • あとはListViewに適当にRectとかダミーオブジェクトをおいていく。• ItemsTemplateが定義されているから、子要素の数だけItemsTemplateのコントロールが生成される。• Rectをおいても四角形は表示されない。まず見える化ItemsTemplateを作れば、実際はRectでもこんな風に表示される->
  42. 42. d:DataContext
  43. 43. • ここまでできると実データを表示して、アプリのレイアウトが崩れないか、綺麗に見えるか確認したくなる。• とりあえず表示のためにつくったRect(ダミーオブジェクト)も削除したい。• やっとBindingの出番ですね。d:DataContext
  44. 44. • d:DataContextはデザインビューでのみ実行されるDataContext• 実際にアプリを実行したときとは違うデザイン用のDataContextをデザインビューで表示できる。• これがないと画面になにも表示されない。• (そのためにダミーをおいてた)d:DataContext
  45. 45. • d:DataContextはデザインビューでのみ実行されるDataContext• 実際にアプリを実行したときとは違うデザイン用のDataContextをデザインビューで表示できる。• これがないと画面になにも表示されない。• (そのためにダミーをおいてた)• DataContextを書いてもらおう!d:DataContext
  46. 46. public partial class ListViewDataContext{public ObservableCollection<ListViewItemsProperty> ListViewItemsProperties = newObservableCollection<ListViewItemsProperty>();public ListViewDataContext(){ListViewItemsProperties.Add(new ListViewItemsProperty() {Title = "ほげ1",ImageUri = new Uri("http://hoge.com/fuga.png")});ListViewItemsProperties.Add(new ListViewItemsProperty() {Title = "ほげ2",ImageUri = new Uri("http://hoge.com/fuga.png")});ListViewItemsProperties.Add(new ListViewItemsProperty() {Title = "ほげ3",ImageUri = new Uri("http://hoge.com/fuga.png")});}
  47. 47. public ObservableCollection<ListViewItemsProperty>ListViewItemsProperties{get { return this.ListViewItemsProperties; }}}public class ListViewItemsProperty{public String Title { get; set; }public Uri ImageUri { get; set; }}}
  48. 48. • <ListViewd:DataContext="{BindingListViewItemsProperties,Source={d:DesignInstanceType=DataContextのねーむすぺーす,IsDesignTimeCreatable=True}}”>ListViewにおまじないを
  49. 49. ItemTemplateにBinding<Image Source=“{Binding ImageUri}” ><TextBlock Text=“{Binding Title}” >
  50. 50. 見た目は出来たら動かしたい
  51. 51. ぴってしたら、出たり消えたりしてほしい!とか…
  52. 52. • 例えば、ToggleButtonがOnの時、Imageを表示して、Offの時は表示しないとかしたい。• Image.VisibilityにToggleButton.IsOnをBooleanToVisibilityConverter挟んでBindingすればOK• ToggleButtonのイベントとかも極力かかない!• プロジェクトがConverterだらけになるのは仕方が無いかなぁとおもってる。ToggleButtonとVisibility
  53. 53. まとめ
  54. 54. • みつばてきワークフロー– スケッチ– デザイン– 使いやすさ確認用モックプロジェクト作成– 実プロジェクト作成– タイルとかスプラッシュ作る– とりあえずぜんぶXAMLで見えるようにする– XAMLに必要なクラス作る– DataContext作ってデータ取ってくる– ちょっといいかんじにアニメーションつける– 完成!まとめ
  55. 55. • デザインとかXAMLの構造がもやもやしたままとりあえず書き出さない。• モックを作って、アプリとしてUI設計がいいかんじか、インタラクションに問題がないか試してみる。まとめ
  56. 56. • 実はべたXAMLはむだ!– XAMLerとC#erが1対1でペアプロ出来る環境であれば省略可能。あるいは全部出来る人– デザイナとプログラマをセットにするのが一番効率がいい• d:DataContextのおまじないはVSからもBlendからも自動生成できないから覚えるしかない。。まとめ
  57. 57. • インタラクションはBindingとConverterをうまく使って、.xaml.csにUI操作のためのコードをかかない!– デザイン変更するときにxamlみてーcsみてーxamlなおしてーうごかないーあーここのcsでなんかやらかしてるーってなる。。まとめ
  58. 58. 実は。
  59. 59. • UIのための準備体操• コールドモックを作ろう• べたXAMLのすすめ• d:DataContext• ConverterとPropertyagenda
  60. 60. • UIのための準備体操• コールドモックを作ろう <-SampleDataSetでOK• べたXAMLのすすめ <-SampleDataSetとDataStoreでOK• d:DataContext <-SampleDataSetでOK• ConverterとProperty <-BehaviorでOKagenda
  61. 61. Windows BlueではBehaviorとDataSetとSampleDataがないのではよ!
  62. 62. ご清聴ありがとうございましたー
  63. 63. • みつばてきワークフロー– スケッチ– デザイン– 使いやすさ確認用モックプロジェクト作成– 実プロジェクト作成– タイルとかスプラッシュ作る– とりあえずぜんぶXAMLで見えるようにする– XAMLに必要なクラス作る– DataContext作ってデータ取ってくる– ちょっといいかんじにアニメーションつける– 完成!まとめ

×