SlideShare a Scribd company logo
入力データ検証を使いこなそう

    Silverlightを囲む会in東京#4

田中 孝佳(@tanaka_733)
はじめに
サンプルアプリの公開

説明に使うサンプルアプリを公開しています
 – http://techblog.hilife-
   jp.info/2011/10/silverlightin4.html
 – PC持参の方はぜひどうぞ
 – IS12T, Win8MetroUIではだめですm(_ _)m
ソースコードはこちらで公開しています
 – https://skydrive.live.com/?cid=B43F4832F5
   BAFBB9&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=B43F483
    2F5BAFBB9&resid=B43F4832F5BAFBB9%211128
今回から 囲む会in東京 の運営にも
 参加しています
WP7, Kinect, クラウド関連の勉強会
 にも出現します
なぜクライアントサイドの
入力データ検証が必要なのか
サーバーサイド検証との違い

サーバーサイドの検証は信頼性のため
 そして業務用要件を満たすため
 – SQLインジェクションなどを防ぎたい
 – 業務的にありえない値を入力させたくない
クライアントサイド検証はUX向上
 – サーバーサイド検証だけだと応答性が悪い
 – どんな値を入力すればいいか伝えてあげる
  単にNGを出せばいいわけではない
サーバーサイド検証


        Client   Server


       検
       証         検
                 証
  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で面白い話があるそうなのでそれも期待
ご清聴
ありがとうございました
111008 silverlight square_datavalidation

More Related Content

PDF
知って得するC#
PPTX
Orange Cube 自社フレームワーク 2015/3
PDF
Try_to_writecode_practicaltest #atest_hack
PDF
xUnit Test Patterns - Chapter19
PPTX
T90 きっと怖くないmvvm & mvpvm
PDF
基礎からのCode Contracts
PDF
Flutterを体験してみませんか
PDF
C# コーディングガイドライン 2013/02/26
知って得するC#
Orange Cube 自社フレームワーク 2015/3
Try_to_writecode_practicaltest #atest_hack
xUnit Test Patterns - Chapter19
T90 きっと怖くないmvvm & mvpvm
基礎からのCode Contracts
Flutterを体験してみませんか
C# コーディングガイドライン 2013/02/26

What's hot (20)

PDF
xUnit Test Patterns - Chapter16
PPTX
Mvpvm pattern
PPTX
Code Contracts in .NET 4
PDF
HttpClientModule
PDF
DoActionからJava VMバイトコードに変換する話
PDF
ActionScriptを使わないFlash勉強会 #1(前日版)
PDF
Unit testing JavaScript with JUnit/JavaFX
PDF
最近の単体テスト
PDF
今からでも遅くないC#開発
PPTX
C#や.NET Frameworkがやっていること
PPTX
C#の書き方
PDF
C#coding guideline その2_20130325
PDF
Apexデザインパターン
PPTX
.NET Core 2.x 時代の C#
PDF
Java SE 9の紹介: モジュール・システムを中心に
PDF
はじめよう JavaFX 2.x(第3回 岡山Javaユーザー会)
PPTX
T93 com入門
PDF
Laravelとテストについて
PPTX
C# 7.2 with .NET Core 2.1
PPTX
Interaction channel
xUnit Test Patterns - Chapter16
Mvpvm pattern
Code Contracts in .NET 4
HttpClientModule
DoActionからJava VMバイトコードに変換する話
ActionScriptを使わないFlash勉強会 #1(前日版)
Unit testing JavaScript with JUnit/JavaFX
最近の単体テスト
今からでも遅くないC#開発
C#や.NET Frameworkがやっていること
C#の書き方
C#coding guideline その2_20130325
Apexデザインパターン
.NET Core 2.x 時代の C#
Java SE 9の紹介: モジュール・システムを中心に
はじめよう JavaFX 2.x(第3回 岡山Javaユーザー会)
T93 com入門
Laravelとテストについて
C# 7.2 with .NET Core 2.1
Interaction channel
Ad

Viewers also liked (9)

PPTX
敏捷产品研发
PPTX
Scrum培训
PDF
Scientific Writing Task 3
PPTX
Powerpointforslideshare
PPTX
About me
PDF
quest diagnostics 2008ProxyCard
PDF
То, что вы хотели знать о HandlerSocket, но не смогли нагуглить / Сергей Авер...
PPT
Erlang kansai01
PPT
Predigtpräsentation 2008 11 16, H G, Heilung
敏捷产品研发
Scrum培训
Scientific Writing Task 3
Powerpointforslideshare
About me
quest diagnostics 2008ProxyCard
То, что вы хотели знать о HandlerSocket, но не смогли нагуглить / Сергей Авер...
Erlang kansai01
Predigtpräsentation 2008 11 16, H G, Heilung
Ad

Similar to 111008 silverlight square_datavalidation (20)

PDF
60分でわかる!SilverlightとWPFの入力チェック
PDF
jQuery Validation x ASP.NET MVC で遭遇した不具合 & 対抗ハック
PDF
C# から java へのプログラム移植で体験したtddの効果は?
PDF
Code complete ch22_developper_test
PDF
エクストリームエンジニア4
PPTX
Junit4
PPTX
アプリの不具合を少なくするために
PDF
Introduction to Spock
PDF
実務者のためのかんたんScalaz
PPT
タダで始めるテストファースト入門 ~ C# Express + NUnit
PDF
Unit test in android
PDF
Kanazawa.js.Next
PDF
Prism + ReactiveProperty入門
PDF
基礎から見直す ASP.NET MVC の単体テスト自動化方法 ~ Windows Azure 関連もあるかも~
PDF
『JUnit実践入門』写経・実践会 in 横浜 #2
KEY
Unit testで定時帰宅!
PDF
テストコードの定型化
PPTX
関数型言語&形式的手法セミナー(3)
PPTX
Msを16倍出し抜くwpf開発1回目
60分でわかる!SilverlightとWPFの入力チェック
jQuery Validation x ASP.NET MVC で遭遇した不具合 & 対抗ハック
C# から java へのプログラム移植で体験したtddの効果は?
Code complete ch22_developper_test
エクストリームエンジニア4
Junit4
アプリの不具合を少なくするために
Introduction to Spock
実務者のためのかんたんScalaz
タダで始めるテストファースト入門 ~ C# Express + NUnit
Unit test in android
Kanazawa.js.Next
Prism + ReactiveProperty入門
基礎から見直す ASP.NET MVC の単体テスト自動化方法 ~ Windows Azure 関連もあるかも~
『JUnit実践入門』写経・実践会 in 横浜 #2
Unit testで定時帰宅!
テストコードの定型化
関数型言語&形式的手法セミナー(3)
Msを16倍出し抜くwpf開発1回目

More from Takayoshi Tanaka (20)

PDF
deep dive distributed tracing
PPTX
202202 open telemetry .net handson
PPTX
202109-New_Relic-for-csharp-engineers
PDF
20210129 azure webapplogging
PDF
20201127 .NET 5
PPTX
Unity(再)入門
PPTX
最近のQ#について
PDF
SRENEXT 2020 [B5] New RelicのSREに学ぶ SREのためのNew Relic活用法
PDF
20191024 Get Start gRPC with ASP.NET
PDF
New Relicで始める、.NET Applications on AWSのObservability
PPTX
C#エンジニアのためのdocker kubernetesハンズオン (再)
PPTX
20190806 Q# Measurements
PPTX
C#エンジニアのためのdocker kubernetesハンズオン
PDF
20190604 Containerized MagicOnion on kubernetes with Observability with New R...
PDF
.NET Core向けコンテナおよびデバッグ関連のVisual Studio 2019の機能
PDF
.NET Core向けコンテナおよびデバッグ関連のVisual Studioの新機能
PDF
Try! Visual Studio 209 git feature
PDF
Q#基礎 ver1.1
PDF
(過去バージョン) Q#基礎 ver1.0
PDF
ゼロから始めるQ#
deep dive distributed tracing
202202 open telemetry .net handson
202109-New_Relic-for-csharp-engineers
20210129 azure webapplogging
20201127 .NET 5
Unity(再)入門
最近のQ#について
SRENEXT 2020 [B5] New RelicのSREに学ぶ SREのためのNew Relic活用法
20191024 Get Start gRPC with ASP.NET
New Relicで始める、.NET Applications on AWSのObservability
C#エンジニアのためのdocker kubernetesハンズオン (再)
20190806 Q# Measurements
C#エンジニアのためのdocker kubernetesハンズオン
20190604 Containerized MagicOnion on kubernetes with Observability with New R...
.NET Core向けコンテナおよびデバッグ関連のVisual Studio 2019の機能
.NET Core向けコンテナおよびデバッグ関連のVisual Studioの新機能
Try! Visual Studio 209 git feature
Q#基礎 ver1.1
(過去バージョン) Q#基礎 ver1.0
ゼロから始めるQ#

111008 silverlight square_datavalidation