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.

//publish/ MSPTutorial 応用編

781 views

Published on

//publish/のMSPによるハンズオンで使用したスライドです。
発展編のみを掲載しております。

Published in: Technology
  • Be the first to comment

//publish/ MSPTutorial 応用編

  1. 1. 応用編 Microsoft Student Partners 五十嵐 祐貴 2014/5/17 /publish// 1
  2. 2. データバインディング 2014/5/17 /publish// 2
  3. 3. データバインディングとは データソースとビューを簡単に結びつける(同期する)ための仕組み ◦ コントロールのプロパティ と インスタンスのプロパティ ◦ コントロールのプロパティ と コントロールのプロパティ etc… 同期の方向も選べる ◦ ソース → Target : OneTime ◦ ソースが変更されたとき(もしくは起動時)、1回のみターゲットプロパティを変更 ◦ ソース ⇒ ターゲット : OneWay ◦ ソースプロパティが変更されたとき、ターゲットプロパティを変更(こちらは複数回可能) ◦ ソース ⇔ ターゲット : TwoWay ◦ ソースプロパティorターゲットプロパティが変更されたとき、ターゲットプロパティorソースプロパティを変更 2014/5/17 /publish// 3
  4. 4. データバインディングとは 今までの例 XAML コード 実行結果 コントロールのプロパティに直接 インスタンスを格納している 2014/5/17 /publish// 4 listView_Todo.Items.Add("ほげ"); listView_Todo.Items.Add("ふが"); <ListView x:Name="listView_Todo" /> 要素 ほげ ふが
  5. 5. データバインディングとは データバインディングを用いた例 XAML コード 実行結果は同様 インスタンスは コード側が保持 2014/5/17 /publish// 5 <ListView x:Name="listView_Todo" ItemsSource="{Binding}" /> var foo = new System.Collections.ObjectModel.ObservableCollection<string>(); foo.Add("ほげ"); foo.Add("ふが"); foo.Add("ぴよ"); listView_Todo.DataContext = foo; // listView_Todo.ItemsSource = foo;
  6. 6. データバインディングとは 今までの例 XAML コード 実行結果 someTextBlockにlistView_Todoで選択している値が表示される コントロールのプロパティとプ ロパティに関係を持たせる(ex.同 期させる)場合、そのトリガーと してイベントを使う必要がある 2014/5/17 /publish// 6 private void listView_Todo_SelectionChanged(object sender, SelectionChangedEventArgs e) { if (listView_Todo.SelectedIndex > -1) someTextBlock.Text = listView_Todo.Items[listView_Todo.SelectedIndex].ToString(); } <ListView x:Name="listView_Todo" SelectionChanged="listView_Todo_SelectionChanged"/> <TextBlock x:Name=“someTextBlock" />
  7. 7. データバインディングとは データバインディングを用いた例 XAML コード 不要 実行結果は同様 Bindingのターゲットにはコント ロールのプロパティも指定でき るため、容易に関係を持たせる ことができる この場合、同期の方向は OneWay(ListView ⇒ TextBlock)で あるため、ListViewで選択されて いる要素を変えれば、TextBlock の値も即時変更される 2014/5/17 /publish// 7 <ListView x:Name="listView_Todo" /> <TextBlock Text="{Binding ElementName=listView_Todo,Path=SelectedItem}" />
  8. 8. データバインディングの実装例 ソースをバインディングに対応させる ◦ ソースのフィールドをプロパティに変更する ソースの値が変更された際に更新(を通知)する必要がある場合、 INotifyPropertyChangedインターフェイスを実装する 2014/5/17 /publish// 8 // TodoItem.csを編集 public class TodoItem { public string Name { get; set; } public int Level { get; set; } public DateTimeOffset PeriodTime { get; set; } (…後略…)
  9. 9. データバインディングの実装例 コード側にソースのインスタンスを保持する List<T>でも出来るが、ObservableCollection<T>を使うと、要素の追 加・削除も更新が通知される 2014/5/17 /publish// 9 // MainPage.xaml.csを編集 using System.Collections.ObjectModel; // 先頭に追加 (…中略…) public sealed partial class MainPage : Page { private ObservableCollection<string> todoCollection = new ObservableCollection<string>(); (…後略…)
  10. 10. データバインディングの実装例 コントロールのDataContextにインスタンスをセットする 2014/5/17 /publish// 10 // MainPage.xaml.csを編集 public MainPage() { this.InitializeComponent(); App.Current.Suspending+=Current_Suspending; App.Current.Resuming += Current_Resuming; (…中略…) listView_Todo.DataContext = todoCollection; // 追加 } (…後略…)
  11. 11. データバインディングの実装例 ビューをBindingを用いて書き換える コードを書き換える ◦ 直接UIを操作するコードからモデルを操作するコードへ 以上で完成です。 動作確認をしてみましょう。 2014/5/17 /publish// 11 // MainPage.xamlを編集 <ListView (…中略…) ItemsSource="{Binding}" /> // MainPage.xaml.csを編集 private void button_Add_Click(object sender, RoutedEventArgs e) { string name = textBox_Name.Text; int level = int.Parse(comboBox_Level.SelectedItem.ToString()); DateTimeOffset period = datePicker_Period.Date; TodoItem item = new TodoItem(name,level,period); todoCollection.Add(item.ConvertTodoString()); }
  12. 12. データバインディングおまけ編 モデル、ビュー部分を以下のように書き換えることも可能 Converterを用いることでBindingの値を変更することも可能 2014/5/17 /publish// 12 private ObservableCollection<TodoItem> todoCollection = new ObservableCollection<TodoItem>(); <ListView (…中略…) ItemsSource=“{Binding}“ DisplayPath=“Name" /> private void button_Add_Click(object sender, RoutedEventArgs e) { string name = textBox_Name.Text; int level = int.Parse(comboBox_Level.SelectedItem.ToString()); DateTimeOffset period = datePicker_Period.Date; TodoItem item = new TodoItem(name,level,period); todoCollection.Add(item); }
  13. 13. データバインディング参考リンク集 データバインディング(WPF) - ++C++;// 未確認飛行 C ◦ http://ufcpp.net/study/dotnet/wpf_binding.html 連載:WPF入門:WPFの「データ・バインディング」を理解する - @IT ◦ http://www.atmarkit.co.jp/ait/articles/1010/08/news123.html WindowsストアアプリプログラミングTips – garicchi.com ◦ http://garicchi.com/?page_id=111 2014/5/17 /publish// 13
  14. 14. ストーリーボード 2014/5/17 /publish// 14
  15. 15. ストーリーボードとは ストアアプリではアニメーションを簡単に適用することができる 基本的に、1つのアニメーションは始点の値,終点の値,アニメーション時 間で構成される アニメーションごとの結びつき等、アニメーションのまとまりを表した ものを ストーリーボード と言う 2014/5/17 /publish// 15
  16. 16. ストーリーボードの実装例 例として、追加ボタンを押した際にIS12Tちゃんが震えるモーションを 追加する Visual Studioには非常に強力なUIデザインツール、Blendが付属 Blendを使えば、UIデザインを人手でコードを書かずスムーズに行える 今回はBlendを用いて作業を行っていく 2014/5/17 /publish// 16
  17. 17. ストーリーボードの実装例 MainPage.xamlを右クリックし、[Blendで開く]をクリック Blendが起動する 2014/5/17 /publish// 17
  18. 18. ストーリーボードの実装例 Blendの画面 2014/5/17 /publish// 18 「オブジェクトとタイムライン」ウインドウ プロパティウインドウ
  19. 19. ストーリーボードの実装例 オブジェクトとタイムラインウインドウの新規作成ボタンをクリック 今回は ItemAddStoryboard と入力(ここは任意の名前で良い) OKをクリック 2014/5/17 /publish// 19
  20. 20. ストーリーボードの実装例 Blendが記録モードとなる この時操作した内容が記録され、自動的にタイムラインに追加される 2014/5/17 /publish// 20
  21. 21. ストーリーボードの実装例  タイムラインウインドウの時間軸(黄色の線)が0:00.000(0.0秒)であることを確認 デザイナ、もしくはオブジェクトウインドウから Image コントロール が選択されていることを確認する 2014/5/17 /publish// 21
  22. 22. ストーリーボードの実装例 Blend右側のプロパティウインドウにある変換グループの回転プロパ ティのZの値の右側にある□をクリックし、現在地の記録をクリック 2014/5/17 /publish// 22
  23. 23. ストーリーボードの実装例  タイムラインウインドウの時間軸(黄色の線)を0:00.200(0.2秒)へ移動(ドラッグ) デザイナ、もしくはオブジェクトウインドウから Image コントロール が選択されていることを確認する 2014/5/17 /publish// 23
  24. 24. ストーリーボードの実装例 タイムラインウインドウの0.0sの箇所にひし形の点が打たれている これは キーフレーム と呼ばれる、アニメーションの始点や終点時のプ ロパティの値を記録しておくもの 2014/5/17 /publish// 24
  25. 25. ストーリーボードの実装例 Blend右側のプロパティウインドウにある変換グループの回転プロパ ティのZの値を20に変更しEnterキーを押す(もしくは現在値の記録) デザイナのIS12Tちゃんも変更されていることが確認できる 2014/5/17 /publish// 25
  26. 26. ストーリーボードの実装例 タイムラインウインドウの0.0s~0.2sまでに線が引かれる 始点と終点のキーフレームが指定され、アニメーションが発生した 基本的に間の値は補間される 2014/5/17 /publish// 26
  27. 27. ストーリーボードの実装例  同様に、タイムラインウインドウの時間軸を0:00.400(0.4秒)へ移動(ドラッグ) Imageが選択されているかを確認し、回転のZプロパティの値を -20 に 変更 2014/5/17 /publish// 27
  28. 28. ストーリーボードの実装例  さらに同様に、タイムラインウインドウの時間軸を0:00.600(0.6秒)へ移動(ドラッグ) Imageが選択されているかを確認し、回転のZプロパティの値を 0 に変 更 2014/5/17 /publish// 28
  29. 29. ストーリーボードの実装例 タイムラインに4つのキーフレームが打たれている 動作確認のため、再生ボタンを押す ⇒ IS12Tちゃんが動けばOK 2014/5/17 /publish// 29
  30. 30. ストーリーボードの実装例 動きが少々ぎこちない キーフレームの間の値は補間される 補間のされ方(値の変わり方)を表す関数をEasing Functionと呼ぶ Easing Functionを変更してみよう 2014/5/17 /publish// 30
  31. 31. ストーリーボードの実装例 オブジェクトとタイムラインウインドウ内にあるImageの左側の▷をク リックし展開する 展開されて出てきた要素 Projection をクリック 2014/5/17 /publish// 31
  32. 32. ストーリーボードの実装例 プロパティウインドウからEasing Functionを選択できる 好きなものを選びましょう (例: Bounce InOut) 2014/5/17 /publish// 32
  33. 33. ストーリーボードの実装例 一通り操作が終わったら、記録を停止するため、デザイナ左上の赤いボ タンをクリック ファイル → すべて保存 をクリックした後、Blendを終了させる 2014/5/17 /publish// 33
  34. 34. ストーリーボードの実装例 Visual Studioに戻ると、以下のような画面が表示される場合がある その場合は すべてに適用 をクリックする 2014/5/17 /publish// 34
  35. 35. ストーリーボードの実装例 MainPage.xaml.csのbutton_Addをクリックしたときのイベントハンドラ に追記する 以上で完了です。 動作確認をしてみましょう 2014/5/17 /publish// 35 // MainPage.xaml.csを編集 private void button_Add_Click(object sender, RoutedEventArgs e) { (…中略…) ItemAddStoryboard.Begin(); // この行を追加 }
  36. 36. コントロールテンプレート 2014/5/17 /publish// 36
  37. 37. コントロールテンプレートとは コントロールに対して適用する(UIの構成も含めた)スタイルを定義する もの コントロール自体の形や動作(例:ボタンが押された時のアクション)も変 更することが出来る 定義したテンプレートを参照させることで、変更を最小限にできる ストアアプリの強力な”スタイルシート” 複雑なスタイルも定義することが出来る 2014/5/17 /publish// 37
  38. 38. コントロールテンプレートの実装例 MainPage.xamlを右クリックし、[Blendで開く]をクリック Blendが起動する 2014/5/17 /publish// 38
  39. 39. コントロールテンプレートの実装例 button_Add(“追加”ボタン)をオブジェクトとタイムラインウインドウで 選択 右クリックし、テンプレートの編集からコピーとして編集をクリックす る 2014/5/17 /publish// 39
  40. 40. コントロールテンプレートの実装例 Styleリソースの作成 画面が表示される 名前には適当な文字列(ここではRadiusButtonStyleとする)を入力する 以上でbutton_Addをベースとしたテンプレートが作成される 2014/5/17 /publish// 40
  41. 41. コントロールテンプレートの実装例 Blendがテンプレートの編集画面となる Blendの上部に階層リンクバーが表示されていることが確認できる 2014/5/17 /publish// 41
  42. 42. コントロールテンプレートの実装例 テンプレートとして設定したい項目を、左側のオブジェクトとタイムラ インウインドウ、右側のプロパティウインドウを用いて設定していく 今回は角丸スタイルを設定するため、オブジェクトとタイムラインウイ ンドウからBorderを選択 2014/5/17 /publish// 42
  43. 43. コントロールテンプレートの実装例 今回は角丸スタイルを設定するため、CornerRadiusを10とした プロパティの値を変更すると、デザイナーにも即時反映される 2014/5/17 /publish// 43
  44. 44. コントロールテンプレートの実装例 オブジェクトとタイムラインウインドウのテンプレート名(今回は RadiusButton)の左側にあるボタンをクリックする 以上でテンプレートの編集が終わり、元の画面に戻る 2014/5/17 /publish// 44
  45. 45. コントロールテンプレートの実装例 作成したテンプレートを他のボタンにも適用させましょう button_Deleteを右クリック テンプレートの編集のリソースの適用 作成したテンプレートを選択する 同様にしてbutton_hushigiにも適用する 2014/5/17 /publish// 45
  46. 46. コントロールテンプレートの実装例 すべてのボタンが角丸になったことが確認できる 2014/5/17 /publish// 46
  47. 47. コントロールテンプレートの実装例 では、RadiusButtonスタイルを変更してみましょう リソースウインドウ(初期設定ではプロパティウインドウと同じウイン ドウグループ)の[Page]を展開する RadiusButtonの右側にあるリソースの編集ボタンをクリック 2014/5/17 /publish// 47
  48. 48. コントロールテンプレートの実装例 先ほどと同じテンプレートの編集画面に移動する 同様にして、プロパティウインドウを用いて編集できる 2014/5/17 /publish// 48
  49. 49. コントロールテンプレートの実装例 変化をわかりやすくするため、Buttonを180度回転させる テンプレートに変更を適用する 2014/5/17 /publish// 49
  50. 50. コントロールテンプレートの実装例 RadiusButtonを適用したすべてのボタンが180度回転している 同じ作業を繰り返してボタンの回転を取り消し(0度にする)、修正が適用 されたか確認してみましょう 2014/5/17 /publish// 50
  51. 51. ストーリーボードの実装例 全ての操作が終わったら、ファイル → すべて保存 をクリックした後、 Blendを終了させる Visual Studioに戻ると、以下のような画面が表示される場合がある その場合は すべてに適用 をクリックする 2014/5/17 /publish// 51
  52. 52. コントロールテンプレートの実装例 おまけ 表示メニューから分割ビューを選択すると、Blendによって生成された XAMLを確認することができます。 自動生成されたXAMLがどのようなことを行っているのか確認してみま しょう 2014/5/17 /publish// 52
  53. 53. コントロールテンプレートの実装例 おまけ XAMLを確認すると、ControlTemplateとStyleの両方が含まれていること が確認できる。余裕があれば自動生成されたXAMLの意味を考えてみま しょう 2014/5/17 /publish// 53 <Style x:Key="RadiusButtonStyle" TargetType="Button"> <Setter Property=“Background” Value=“{ThemeResource ButtonBackgroundThemeBrush}”/> // プロパティの値の変更を行う箇所 (…中略…) <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType=“Button”> // ControlTemplateを定義する箇所 <Grid> // ベースとなるコントロールとしてGridを用いている <VisualStateManager.VisualStateGroups> // クリックされた等の状態でのスタイルを定義する場所 <VisualStateGroup x:Name="CommonStates"> <VisualState x:Name=“Normal”/> // それぞれの状態の定義を行う場所 <VisualState x:Name="PointerOver"> (…中略…) </VisualStateGroup> </VisualStateManager.VisualStateGroups> <Border x:Name="Border" BorderBrush=" {TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Margin="3" CornerRadius="10"> </Border> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style>
  54. 54. Azure Mobile Service 2014/5/17 /publish// 54
  55. 55. Azure Mobile Serviceの実装例 Microsoft Azureポータル ( https://manage.windowsazure.com/ )に移動 する 左下の新規ボタンをクリックし、コンピューティング、モバイルサービ ス、作成の順にクリックする 2014/5/17 /publish// 55
  56. 56. Azure Mobile Serviceの実装例 モバイルサービスの作成画面が表示されるので、画面の指示にしたがっ て作成する 今回はデータベースも利用する 入力が終わったら右下の矢印ボタンをクリックする 2014/5/17 /publish// 56
  57. 57. Azure Mobile Serviceの実装例 データベースを作成する場合、次の画面でデータベースの設定画面が表 示される 入力が終わったら右下の完了ボタンをクリックする 2014/5/17 /publish// 57
  58. 58. Azure Mobile Serviceの実装例 ステータスバーに以下のような表示が現れたらモバイルサービスの構築 は完了 作成したモバイルサービス名をクリックする 2014/5/17 /publish// 58
  59. 59. Azure Mobile Serviceの実装例 プラットフォームの選択からWindowsストアをクリックし、既存の WINDOWSストアアプリに接続するをクリックする 2014/5/17 /publish// 59
  60. 60. Azure Mobile Serviceの実装例 画面の表示に沿って進めていきましょう プロジェクトを右クリックし、NuGetパッケージの管理をクリックする 2014/5/17 /publish// 60
  61. 61. Azure Mobile Serviceの実装例 検索ボックスにWindowsAzure.MobileServicesと入力し、Windows Azure Mobile Servicesをインストールする 2014/5/17 /publish// 61
  62. 62. Azure Mobile Serviceの実装例 インストールが終了したらApp.xaml.csを開き、先ほど表示された手順1 を実行する 以下に例を示す 2014/5/17 /publish// 62 using Microsoft.WindowsAzure.MobileServices; (…中略…) namespace SampleTodoApp { sealed partial class App : Application { public static MobileServiceClient MobileService = new MobileServiceClient( "https://mspsample.azure-mobile.net/", “AAAAAAAAAAAAAAAAAAAAAAA" ); (…後略…)
  63. 63. Azure Mobile Serviceの実装例 データを追加した時、データを削除した時にモバイルサービスを更新す るコードを追加する 2014/5/17 /publish// 63 private async void button_Add_Click(object sender, RoutedEventArgs e) // button_Addをクリックした時のイベントハンドラ { (…中略…) await App.MobileService.GetTable<TodoItem>().InsertAsync(item); //MobileServiceに追加 } (…前略…) await App.MobileService.GetTable<TodoItem>().DeleteAsync(item); //MobileServiceから削除
  64. 64. Azure Mobile Serviceの実装例 MainPageをロードした際に、Mobile Serviceからデータを取得しUIを更 新するコードを追加する 2014/5/17 /publish// 64 (…前略…) todoCollection = await App.MobileService.GetTable<TodoItem>(). .ToCollectionAsync();
  65. 65. Azure Mobile Serviceのサンプル 新しいWINDOWSストアアプリを作成するをクリックすると、ストアア プリのサンプルがダウンロードできる 2014/5/17 /publish// 65
  66. 66. Azure Mobile Service参考リンク集 MicrosoftAzureMobileService入門 – garicchi.com ◦ http://garicchi.com/?page_id=8131 第1回 Windows Azureモバイルサービスの基礎 – 技術評論社 ◦ http://gihyo.jp/dev/serial/01/wams/0001 2014/5/17 /publish// 66
  67. 67. 2014/5/17 /publish// 67

×