入力データ検証を使いこなそう    Silverlightを囲む会in東京#4田中 孝佳(@tanaka_733)
はじめに
サンプルアプリの公開説明に使うサンプルアプリを公開しています – http://techblog.hilife-   jp.info/2011/10/silverlightin4.html – PC持参の方はぜひどうぞ – IS12T, Wi...
で、公開してるブログの紹介銀の光と藍い空  – http://techblog.hilife-jp.info/Silverlight(Web), WP7, Azure, Kinect ネタが中心です最近はSilverlight 5 シリー...
自己紹介 (@tanaka_733)ERPパッケージベンダーの研究部門 – クラウドを使っていい感じにする研究Silverlightは業務アプリ開発で使ってます – サーバーサイドはJava – 前回発表したものです   https://...
なぜクライアントサイドの入力データ検証が必要なのか
サーバーサイド検証との違いサーバーサイドの検証は信頼性のため そして業務用要件を満たすため – SQLインジェクションなどを防ぎたい – 業務的にありえない値を入力させたくないクライアントサイド検証はUX向上 – サーバーサイド検証だけだと...
サーバーサイド検証        Client   Server       検       証         検                 証  API呼び出し
クライアントサイドに求められる事あらかじめ入力形式を教えてあげる – 入力データ検証を助けるため入力形式が誤っていた時、 どう修正すればいいか伝える – よくない例
入力データ検証を実装するには
WebフォームだとJSが基本HTMLは静的なので単体では検証できない – サーバーサイドで毎回検証するのは   通信コスト・サーバーの処理コストがかかるそこでJavaScriptの出番 – でもサーバーサイドでの検証も必要ですよ   Ja...
Silverlightでの検証入力検証の仕組みが用意されています  – ASP.NET の検証コントロール的なものWCF RIA Servicesなど使えば、 サーバーサイドとコードを共有する ことも可能  – ただし今回はやりません  –...
Silverlightにおける入力データ検証の実装
用意されているものUI部品 – DataForm (ちょっと特殊なので今回はなし) – Label – DescriptionViewer – ValidationSummary – TextBox, ComboBoxなど入力系UI検証ロジ...
UI部品を使ったサンプルアプリこのアプリを例にとって説明していきます
その前に前提条件MVVMでの実装です – 今回の実装にはPrismを使っていますが、   MVVMサポートライブラリに依存しない話です – ViewとViewModelの分離と   Bindingが重要   検証ロジックはViewModel...
VM側の実装方法
データ検証の実装方法いろいろ検証方法の定義 – 自前の検証関数で定義 – DataAnnotationsで定義VMでの実装方法 – 検証してNGだったら例外を投げる – IDataErrorInfoをVMが実装する – INotifyDat...
データ検証の実装方法検証方法の定義                          個人的に – 自前の検証関数で定義             おすすめ – DataAnnotationsで定義VMでの実装方法 – 検証してNGだったら例...
おすすめの理由DataAnnotations – 検証ロジックを宣言的に記述できる   if (str.Length >= 8 && str.Length <= 20)    とか書かなくていい – Label, DataformなどUIと...
Data Annotationsの使い方
DataAnnotationsの使い方プロパティにAnnotationを付与Annotationに従って検証する処理を追加 – Validator.TryValidateProperty や   TryValidateObjectで検証でき...
DataAnnotations一覧 検証属性                        説明 CustomValidationAttribute   検証用にカスタム メソッドを使用します。                         ...
DataAnnotationsの使い方プロパティに付加する              setterのコードは後で。
DataAnnotationsの欠点複雑な検証ロジックは カスタム検証メソッドが必要 – 例えば、IPv4アドレスとかCIDRとか – 正規表現でできるかもしれないけど、   複雑な正規表現はわかりづらい複数プロパティ間の検証がしづらい –...
カスタム検証メソッドの定義検証メソッドは下記の条件を満たすこと – publicなクラスで定義 – public staticなメソッド – 返り値はValidationResult   成功時はValidationResult.Succe...
カスタム検証メソッドの例IPv4アドレスをチェックする – IPAddress.TryParse メソッドを使用 – ValicationContextは使っていないので省略可
INotifyDataErrorInfoの使い方
IDataErrorInfoとINotifyDataErrorInfoの違いMSDNにはこう書いてます  – 一般に、Silverlight の新しいエンティティ ク    ラスでは、IDataErrorInfo を実装するのでは    なく...
INotifyDataErrorInfo メンバHasErrors プロパティ  – オブジェクトの検証エラーが発生しているかどう    かを示しますGetErrors メソッド  – 指定されたプロパティまたはオブジェクト全体の    検...
INotifyDataErrorInfoの実装例ViewModelに実装させたいことが多いそこで、ViewModelの基底クラスとして INotifyPropertyChangedと一緒に実装使用するMVVMインフラに合わせて 実装してお...
INotifyDataErrorInfoの実装例                ViewModelBaseクラス                ValidateProperty,                 ValidateObject...
この実装の注意点初期化時の値のままだと、 検証は起きません – 最初から検証すると、   入力画面がいきなり真っ赤でやな感じなにも入力せずに送信する事があるので、 TryValidateObjectを必ず行う
プロパティの実装コードスニペットにしておくのがお手軽  <Code Language="csharp">       <![CDATA[#region $property$ private $type$ $var$; public $type...
複数プロパティの関連の検証
複数プロパティの関連を検証DataAnnotationでは単一プロパティしか 検証できない方法は2つ(もしくはそれ以上) – ValidationContext経由で検証に必要な   ほかのプロパティを渡す – ValidateProper...
ValidationContextを使う方法ValidationContext.Items に必要な値をキーを指定して渡す検証メソッドでは必要な値を取り出す
UIコンポーネントの使い方
使えるUIコンポーネント入力系UI  – 検証時にポップアップLabel  – 必須入力時にVisualStateが代わる  – Display要素でLabelのContentを指定できるDescriptionViewer  – メッセー...
入力系UIでの設定ValidationSummary使用時には Bindingオプションを指定します
Windows Phone 7 では入力UIの検証属性は存在する検証系のUIは非サポートとの記述実際に検証属性を使っても何も起きな かった要はUI側のデータ検証は使えない – 画面が小さいので   そんな面倒な入力はさせるなってこと!?...
+α 非同期の検証が必要なとき検証はクライアントサイドのみで完結が原則 – この場合の検証は同期処理でOKしかし、例えば・・・ – SNSの入会フォームで   ユーザーIDの存在チェックは   それだけ先にチェックしたい! – 検証している...
+α 非同期の検証の実装INotifyPropertChangedを実装している 場合、 非同期処理の最後でGetErrorsの結果を変 更してErrorsChangedを呼べばよい今回のViewModelBaseの場合は、 ErrorsC...
+α 非同期の検証の実装サンプル おなじみ(?)のRx使ってます 実際は、3秒待ってではなく、  通信してWebResponseなりを見て検証する LTで面白い話があるそうなのでそれも期待
ご清聴ありがとうございました
111008 silverlight square_datavalidation
Upcoming SlideShare
Loading in …5
×

111008 silverlight square_datavalidation

1,402 views

Published on

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

  • Be the first to like this

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

No notes for slide

111008 silverlight square_datavalidation

  1. 1. 入力データ検証を使いこなそう Silverlightを囲む会in東京#4田中 孝佳(@tanaka_733)
  2. 2. はじめに
  3. 3. サンプルアプリの公開説明に使うサンプルアプリを公開しています – http://techblog.hilife- jp.info/2011/10/silverlightin4.html – PC持参の方はぜひどうぞ – IS12T, Win8MetroUIではだめですm(_ _)mソースコードはこちらで公開しています – https://skydrive.live.com/?cid=B43F4832F5 BAFBB9&id=B43F4832F5BAFBB9%211121#
  4. 4. で、公開してるブログの紹介銀の光と藍い空 – http://techblog.hilife-jp.info/Silverlight(Web), WP7, Azure, Kinect ネタが中心です最近はSilverlight 5 シリーズやってます – http://techblog.hilife- jp.info/search/label/Silverlight5
  5. 5. 自己紹介 (@tanaka_733)ERPパッケージベンダーの研究部門 – クラウドを使っていい感じにする研究Silverlightは業務アプリ開発で使ってます – サーバーサイドはJava – 前回発表したものです https://skydrive.live.com/view.aspx?cid=B43F483 2F5BAFBB9&resid=B43F4832F5BAFBB9%211128今回から 囲む会in東京 の運営にも 参加していますWP7, Kinect, クラウド関連の勉強会 にも出現します
  6. 6. なぜクライアントサイドの入力データ検証が必要なのか
  7. 7. サーバーサイド検証との違いサーバーサイドの検証は信頼性のため そして業務用要件を満たすため – SQLインジェクションなどを防ぎたい – 業務的にありえない値を入力させたくないクライアントサイド検証はUX向上 – サーバーサイド検証だけだと応答性が悪い – どんな値を入力すればいいか伝えてあげる 単にNGを出せばいいわけではない
  8. 8. サーバーサイド検証 Client Server 検 証 検 証 API呼び出し
  9. 9. クライアントサイドに求められる事あらかじめ入力形式を教えてあげる – 入力データ検証を助けるため入力形式が誤っていた時、 どう修正すればいいか伝える – よくない例
  10. 10. 入力データ検証を実装するには
  11. 11. WebフォームだとJSが基本HTMLは静的なので単体では検証できない – サーバーサイドで毎回検証するのは 通信コスト・サーバーの処理コストがかかるそこでJavaScriptの出番 – でもサーバーサイドでの検証も必要ですよ JavaScriptが無効だったり、 フォームを通さず通信されたりします 公開APIを用意すると、 もはやサーバーサイド検証のみ
  12. 12. Silverlightでの検証入力検証の仕組みが用意されています – ASP.NET の検証コントロール的なものWCF RIA Servicesなど使えば、 サーバーサイドとコードを共有する ことも可能 – ただし今回はやりません – どちらもC#/VB であることの強みですね
  13. 13. Silverlightにおける入力データ検証の実装
  14. 14. 用意されているものUI部品 – DataForm (ちょっと特殊なので今回はなし) – Label – DescriptionViewer – ValidationSummary – TextBox, ComboBoxなど入力系UI検証ロジック – いくつかのやり方が存在
  15. 15. UI部品を使ったサンプルアプリこのアプリを例にとって説明していきます
  16. 16. その前に前提条件MVVMでの実装です – 今回の実装にはPrismを使っていますが、 MVVMサポートライブラリに依存しない話です – ViewとViewModelの分離と Bindingが重要 検証ロジックはViewModel側に定義します 今回はロジックがないのでModelは出てきませんSilverlight4 です (5 RCでも動作を確認)Rx使ってます – 非同期検証を簡単に書きたかったから
  17. 17. VM側の実装方法
  18. 18. データ検証の実装方法いろいろ検証方法の定義 – 自前の検証関数で定義 – DataAnnotationsで定義VMでの実装方法 – 検証してNGだったら例外を投げる – IDataErrorInfoをVMが実装する – INotifyDataErrorInfoをVMが実装する
  19. 19. データ検証の実装方法検証方法の定義 個人的に – 自前の検証関数で定義 おすすめ – DataAnnotationsで定義VMでの実装方法 – 検証してNGだったら例外を投げる – IDataErrorInfoをVMが実装する – INotifyDataErrorInfoをVMが実装する
  20. 20. おすすめの理由DataAnnotations – 検証ロジックを宣言的に記述できる if (str.Length >= 8 && str.Length <= 20) とか書かなくていい – Label, DataformなどUIとの相性がよいINotifyDataErrorInfo – 例外を投げる=処理が中断される のが嫌い – IDataErrorInfoより改善されている
  21. 21. Data Annotationsの使い方
  22. 22. DataAnnotationsの使い方プロパティにAnnotationを付与Annotationに従って検証する処理を追加 – Validator.TryValidateProperty や TryValidateObjectで検証できる 今回はINotifyDataErrorInfo を実装したViewModelの基底クラス内 で記述します
  23. 23. DataAnnotations一覧 検証属性 説明 CustomValidationAttribute 検証用にカスタム メソッドを使用します。 特定の種類のデータ (電子メール アドレス、 DataTypeAttribute 電話番号など) を指定します。 EnumDataTypeAttribute 値が列挙体に含まれることを保証します。 RangeAttribute 最小値および最大値の制約を指定します。 RegularExpressionAttribute 正規表現を使用して有効な値を指定します。 RequiredAttribute 値が必須であることを指定します。 StringLengthAttribute 最大文字数および最小文字数を指定します。 ValidationAttribute 検証属性の基本クラスとして動作します。http://msdn.microsoft.com/ja-jp/library/dd901590%28v=vs.95%29.aspx
  24. 24. DataAnnotationsの使い方プロパティに付加する setterのコードは後で。
  25. 25. DataAnnotationsの欠点複雑な検証ロジックは カスタム検証メソッドが必要 – 例えば、IPv4アドレスとかCIDRとか – 正規表現でできるかもしれないけど、 複雑な正規表現はわかりづらい複数プロパティ間の検証がしづらい – 開始日は終了日より前とか – プロコトル一覧の選択がTCPなら ポート番号が入力必須とか
  26. 26. カスタム検証メソッドの定義検証メソッドは下記の条件を満たすこと – publicなクラスで定義 – public staticなメソッド – 返り値はValidationResult 成功時はValidationResult.Success – 第一引数は検証対象の値を表すオブジェクト – 第二引数は任意 検証要求についての追加情報を提供する ValidationContext
  27. 27. カスタム検証メソッドの例IPv4アドレスをチェックする – IPAddress.TryParse メソッドを使用 – ValicationContextは使っていないので省略可
  28. 28. INotifyDataErrorInfoの使い方
  29. 29. IDataErrorInfoとINotifyDataErrorInfoの違いMSDNにはこう書いてます – 一般に、Silverlight の新しいエンティティ ク ラスでは、IDataErrorInfo を実装するのでは なく、INotifyDataErrorInfo を実装して、柔 軟性を高める必要があります。IDataErrorInfoの特徴 – オブジェクトにつき1つのエラーメッセージ – 検証のタイミングはBinding時のみ
  30. 30. INotifyDataErrorInfo メンバHasErrors プロパティ – オブジェクトの検証エラーが発生しているかどう かを示しますGetErrors メソッド – 指定されたプロパティまたはオブジェクト全体の 検証エラーを含む IEnumerableを返します – IEnumerableの要素はToStringメソッドでエ ラーメッセージを返すErrorsChanged イベント – IEnumerable が変更されるたびに、ユーザー イ ンターフェイス (UI) スレッド上で発生させる
  31. 31. INotifyDataErrorInfoの実装例ViewModelに実装させたいことが多いそこで、ViewModelの基底クラスとして INotifyPropertyChangedと一緒に実装使用するMVVMインフラに合わせて 実装しておくと便利 – Prismの場合、 INotifyPropertyChanged を 実装したNotificationObjectを継承し、 検証結果を格納するErrorsContainerを使い ます
  32. 32. INotifyDataErrorInfoの実装例  ViewModelBaseクラス  ValidateProperty, ValidateObject メソッド を呼ぶと検証する  検証するとその結果を ErrorsContainerに格納  検証結果に変更があると、 ErrorsChanged イベント ハンドラを呼び出す
  33. 33. この実装の注意点初期化時の値のままだと、 検証は起きません – 最初から検証すると、 入力画面がいきなり真っ赤でやな感じなにも入力せずに送信する事があるので、 TryValidateObjectを必ず行う
  34. 34. プロパティの実装コードスニペットにしておくのがお手軽 <Code Language="csharp"> <![CDATA[#region $property$ private $type$ $var$; public $type$ $property$ { get { return $var$; } set { if ($var$ == value) { return; } $var$ = value; RaisePropertyChanged("$property$"); ValidateProperty("$property$", value); } } #endregion $end$]]> </Code>
  35. 35. 複数プロパティの関連の検証
  36. 36. 複数プロパティの関連を検証DataAnnotationでは単一プロパティしか 検証できない方法は2つ(もしくはそれ以上) – ValidationContext経由で検証に必要な ほかのプロパティを渡す – ValidatePropertyメソッドなどを継承して、 そのオブジェクト特有の検証処理を追加する
  37. 37. ValidationContextを使う方法ValidationContext.Items に必要な値をキーを指定して渡す検証メソッドでは必要な値を取り出す
  38. 38. UIコンポーネントの使い方
  39. 39. 使えるUIコンポーネント入力系UI – 検証時にポップアップLabel – 必須入力時にVisualStateが代わる – Display要素でLabelのContentを指定できるDescriptionViewer – メッセージを表示ValidationSummary – メッセージを一覧表示
  40. 40. 入力系UIでの設定ValidationSummary使用時には Bindingオプションを指定します
  41. 41. Windows Phone 7 では入力UIの検証属性は存在する検証系のUIは非サポートとの記述実際に検証属性を使っても何も起きな かった要はUI側のデータ検証は使えない – 画面が小さいので そんな面倒な入力はさせるなってこと!?ロジック内でのデータ検証には使えそう
  42. 42. +α 非同期の検証が必要なとき検証はクライアントサイドのみで完結が原則 – この場合の検証は同期処理でOKしかし、例えば・・・ – SNSの入会フォームで ユーザーIDの存在チェックは それだけ先にチェックしたい! – 検証している間に他の項目を入力できるこの場合非同期の検証が必要 – Silverlightだと通信がからむので必須
  43. 43. +α 非同期の検証の実装INotifyPropertChangedを実装している 場合、 非同期処理の最後でGetErrorsの結果を変 更してErrorsChangedを呼べばよい今回のViewModelBaseの場合は、 ErrorsContainerに追加しさえすればOK
  44. 44. +α 非同期の検証の実装サンプル おなじみ(?)のRx使ってます 実際は、3秒待ってではなく、 通信してWebResponseなりを見て検証する LTで面白い話があるそうなのでそれも期待
  45. 45. ご清聴ありがとうございました

×