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