Webstandard2007 Spry Widget Ver1
-
Upload
shinchi-fujikawa -
Category
Technology
-
view
5.377 -
download
6
description
Transcript of Webstandard2007 Spry Widget Ver1
![Page 1: Webstandard2007 Spry Widget Ver1](https://reader037.fdocuments.us/reader037/viewer/2022102922/546d2069af7959ea368b7689/html5/thumbnails/1.jpg)
Spry Widgetでつくる入力フォーム~「カラメル」ユーザー登録での開発事例紹介~
(株)paperboy&co.
藤川 真一
![Page 2: Webstandard2007 Spry Widget Ver1](https://reader037.fdocuments.us/reader037/viewer/2022102922/546d2069af7959ea368b7689/html5/thumbnails/2.jpg)
本セッションでのゴール
• Spry Widgetがどういうものかを知る
• Spry Widgetで入力フォームを作る場合の注意点を知る
• Spry Widgetを実際のプロジェクトで採用できるかの判断の材料を知る。
![Page 3: Webstandard2007 Spry Widget Ver1](https://reader037.fdocuments.us/reader037/viewer/2022102922/546d2069af7959ea368b7689/html5/thumbnails/3.jpg)
スライドのAgenda
• 自己紹介
• SpryFramework for Ajaxの紹介
• Spry Widgetによる入力フォームの作成
• 入力フォームについて改めて考える
• Spry Widgetってどうよ?
![Page 4: Webstandard2007 Spry Widget Ver1](https://reader037.fdocuments.us/reader037/viewer/2022102922/546d2069af7959ea368b7689/html5/thumbnails/4.jpg)
自己紹介
![Page 5: Webstandard2007 Spry Widget Ver1](https://reader037.fdocuments.us/reader037/viewer/2022102922/546d2069af7959ea368b7689/html5/thumbnails/5.jpg)
自己紹介• 藤川真一
• (株)paperboy &co . EC事業本部 ショッピングモール 「カラメル」プロデューサー
• えふしん (f-shin / fshin2000 )
• blog : 「F’s Garage」 http://www.milkstand.net
「 cnet読者blog F’s Garage type C 」
• twitterの携帯クライアント「movatwitter」
![Page 6: Webstandard2007 Spry Widget Ver1](https://reader037.fdocuments.us/reader037/viewer/2022102922/546d2069af7959ea368b7689/html5/thumbnails/6.jpg)
ショッピングポータル「カラメル」
• 月875円のネットショップASP「Color Me Shop ! pro」のショップが出店しているショッピングモール
![Page 7: Webstandard2007 Spry Widget Ver1](https://reader037.fdocuments.us/reader037/viewer/2022102922/546d2069af7959ea368b7689/html5/thumbnails/7.jpg)
ユーザー機能「マイカラメル」
• Color Me Shop!の「購入履歴」、「簡単買い物設定」買い物専用ソーシャルブックマーク機能「商品のお気に入り登録」
![Page 8: Webstandard2007 Spry Widget Ver1](https://reader037.fdocuments.us/reader037/viewer/2022102922/546d2069af7959ea368b7689/html5/thumbnails/8.jpg)
Spry Widgetとは?
![Page 9: Webstandard2007 Spry Widget Ver1](https://reader037.fdocuments.us/reader037/viewer/2022102922/546d2069af7959ea368b7689/html5/thumbnails/9.jpg)
まずはカラメル 会員登録ページによるDEMOを行います。
![Page 10: Webstandard2007 Spry Widget Ver1](https://reader037.fdocuments.us/reader037/viewer/2022102922/546d2069af7959ea368b7689/html5/thumbnails/10.jpg)
Spry(スプライ) Framework for Ajax
• AdobeのDreamweaver開発チームによる“デザイナー向け”JavaScriptライブラリ
• Ajaxの処理やリッチなUIが簡単に組み込めます
• BSDライセンスで、商用利用も改造も可能
http://labs.adobe.com/technologies/spry/
![Page 11: Webstandard2007 Spry Widget Ver1](https://reader037.fdocuments.us/reader037/viewer/2022102922/546d2069af7959ea368b7689/html5/thumbnails/11.jpg)
Spry Framework for Ajax の特徴• 組み込む際にXHTMLの文法を壊さない
• JavaScript とXHTMLとの関連づけは、classやspry:というネームスペースを介して繋がる
• スタイルは専用に用意されたCSSファイルに定義
<div id="RSSFeedsList" spry:region="dsCategories dsFeeds" class="SpryHiddenRegion"></div>
![Page 12: Webstandard2007 Spry Widget Ver1](https://reader037.fdocuments.us/reader037/viewer/2022102922/546d2069af7959ea368b7689/html5/thumbnails/12.jpg)
F’s Garage / December 01 , 2003~デザイナーの作るHTMLを壊したくないWeb開発者のために~
• HTMLにプログラムのコードを埋めるテンプレートフレームワークは失格
•完成品のデザインHTMLはそのままテンプレートとして、シームレスに使えるべし!
• �<div id="なにがし">にょろにょろ</div>の中身を置換してくれるテンプレートエンジンが欲しい
http://www.milkstand.net/fsgarage/archives/000220.html
![Page 13: Webstandard2007 Spry Widget Ver1](https://reader037.fdocuments.us/reader037/viewer/2022102922/546d2069af7959ea368b7689/html5/thumbnails/13.jpg)
Spry Framework for Ajaxの構成• Spry XML Data Sets
XMLの動的読み込み処理、キャッシュ、XMLのソート、自動リロードなどリッチなデータ処理 リッチなprototype.js
• Spry Effects
アニメーション処理をしてくれる。script.aculo.usのようなもの
• Spry Widget
XML Data SetsやEffectsと結びついて、リッチなUIを実現アコーディオン型のメニュー、プルダウンメニュー入力チェック機能
![Page 14: Webstandard2007 Spry Widget Ver1](https://reader037.fdocuments.us/reader037/viewer/2022102922/546d2069af7959ea368b7689/html5/thumbnails/14.jpg)
Spry Widgetの「Widget」とは?
• アプリケーションソフトやデスクトップ上で動作する、小規模なアクセサリーソフト
• グラフィカルユーザインターフェースを構成する部品要素、およびその集まり→ウィジェット・ツールキット。「window gadget」の合成語ともいわれている
ウィキペディアより
![Page 15: Webstandard2007 Spry Widget Ver1](https://reader037.fdocuments.us/reader037/viewer/2022102922/546d2069af7959ea368b7689/html5/thumbnails/15.jpg)
Spry Widgetの入力チェック機能• 各フォームに対してチェック事項を指定するだけで値チェック、入力文字数、入力フォーマットを自動で行う
• text field , textarea select , checkbox , radio に対応(radio button は、Spry1.5より対応)
• 画面上でエラーメッセージの表示、非表示を自動で制御してくれる
• 一つでもエラーがあるとsubmitが抑止される
![Page 16: Webstandard2007 Spry Widget Ver1](https://reader037.fdocuments.us/reader037/viewer/2022102922/546d2069af7959ea368b7689/html5/thumbnails/16.jpg)
HTML組み込み方法 step1 of 3メールアドレスの入力フォームの場合
・SpryのJavaScriptとCSSを読み込む
<script src="/user/javascripts/SpryAssets/SpryValidationTextField.js" type="text/javascript" ></script>
<link href="/user/javascripts/SpryAssets/SpryValidationTextField.css" rel="stylesheet" type="text/css" />
JavaScriptは、TextField, TextArea・・・と種別毎にScript
ファイルが分かれていますが、それぞれjsファイル単体で動きます。
![Page 17: Webstandard2007 Spry Widget Ver1](https://reader037.fdocuments.us/reader037/viewer/2022102922/546d2069af7959ea368b7689/html5/thumbnails/17.jpg)
HTML組み込み方法 step 2 of 3
<form method="post" name="form1" action="/user/info/confirm" >
<span id="spryEmail"> <input name="txtEmail" type="text" id="txtEmail" value="<% $email %>" />
<span class="textfieldRequiredMsg">入力してください</span>
<span class="textfieldMaxCharsMsg">25文字以内で入力してください。 </span> </span>
</form>
HTMLにテキストフィールドと、起こりうるエラーメッセージを個別に書く。
spanの構造とCSSの名称はルールで決まっています。
![Page 18: Webstandard2007 Spry Widget Ver1](https://reader037.fdocuments.us/reader037/viewer/2022102922/546d2069af7959ea368b7689/html5/thumbnails/18.jpg)
HTML組み込み方法 step3 of 3
入力チェックオブジェクトの生成、spanに関連づける
第一引数:関連づけるspanのID
第二引数:チェックするフォーマット:email , integer , date , none など第三引数:オブジェクトで記述 必須属性、最大文字数、どのタイミングチェックするか?
<script type="text/javascript"> <!-- var spryEmail = new Spry.Widget.ValidationTextField( "spryEmail", "email",
{isRequired:true , maxChars:50 , validateOn:["change"]});
//--> </script>
![Page 19: Webstandard2007 Spry Widget Ver1](https://reader037.fdocuments.us/reader037/viewer/2022102922/546d2069af7959ea368b7689/html5/thumbnails/19.jpg)
Dreamweaver CS3によるデモ
Dreamweaver CS3を使えば、手順1~3を全て自動で行ってくれます。
![Page 20: Webstandard2007 Spry Widget Ver1](https://reader037.fdocuments.us/reader037/viewer/2022102922/546d2069af7959ea368b7689/html5/thumbnails/20.jpg)
さて、Spryを使えば入力フォームが簡単に作れますが・・・
![Page 21: Webstandard2007 Spry Widget Ver1](https://reader037.fdocuments.us/reader037/viewer/2022102922/546d2069af7959ea368b7689/html5/thumbnails/21.jpg)
「Spry Framework for Ajax
= デザイナー向け
JavaScript フレームワーク」の罠
Spryだけで入力フォームらっくらく♪
![Page 22: Webstandard2007 Spry Widget Ver1](https://reader037.fdocuments.us/reader037/viewer/2022102922/546d2069af7959ea368b7689/html5/thumbnails/22.jpg)
「Spry Framework for Ajax
= デザイナー向け
JavaScript フレームワーク」の罠
世の中そんなに甘くない
Spryだけで入力フォームらっくらく♪
![Page 23: Webstandard2007 Spry Widget Ver1](https://reader037.fdocuments.us/reader037/viewer/2022102922/546d2069af7959ea368b7689/html5/thumbnails/23.jpg)
ここから先が本題です。
時間確認タイム 13:30ぐらい
![Page 24: Webstandard2007 Spry Widget Ver1](https://reader037.fdocuments.us/reader037/viewer/2022102922/546d2069af7959ea368b7689/html5/thumbnails/24.jpg)
入力フォームについて改めて考えましょう。
![Page 25: Webstandard2007 Spry Widget Ver1](https://reader037.fdocuments.us/reader037/viewer/2022102922/546d2069af7959ea368b7689/html5/thumbnails/25.jpg)
入力フォームの役割
• ユーザーが迷わず入力できるようにする
• エラーをチェックして、適切な値を入力できるようにナビゲーションする
• 不適切な文字をチェックして、不正な入力文字列をシステムに保存しない
![Page 26: Webstandard2007 Spry Widget Ver1](https://reader037.fdocuments.us/reader037/viewer/2022102922/546d2069af7959ea368b7689/html5/thumbnails/26.jpg)
入力フォームの役割
• ユーザーが迷わず入力できるようにする
• エラーをチェックして、適切な値を入力できるようにナビゲーションする
• 不適切な文字をチェックして、不正な入力文字列をシステムに保存しない
どれもSpry Widgetを使えば実現できそうに見えますが・・・。
![Page 27: Webstandard2007 Spry Widget Ver1](https://reader037.fdocuments.us/reader037/viewer/2022102922/546d2069af7959ea368b7689/html5/thumbnails/27.jpg)
ここでちょっとDEMO
![Page 28: Webstandard2007 Spry Widget Ver1](https://reader037.fdocuments.us/reader037/viewer/2022102922/546d2069af7959ea368b7689/html5/thumbnails/28.jpg)
入力チェック機能の分類
• クライアントサイドブラウザで、JavaScriptやAjaxを使った入力チェック ・・・ Spry Widget
• サーバーサイドPHPやPerlにて入力チェックを行う。「validator」ライブラリ
![Page 29: Webstandard2007 Spry Widget Ver1](https://reader037.fdocuments.us/reader037/viewer/2022102922/546d2069af7959ea368b7689/html5/thumbnails/29.jpg)
クライアントサイドの入力チェックは、「ユーザビリティ」のため
• 画面をSubmitすることなくあらゆることを実現することでユーザーの負担を減らす
• Spry Widgetを使おうが、Ajaxを使おうがセキュリティには役に立たない。
• システムの実現性には必要ではない(凝った制御は、JavasScriptが苦手な
大多数の開発者には敬遠される)
![Page 30: Webstandard2007 Spry Widget Ver1](https://reader037.fdocuments.us/reader037/viewer/2022102922/546d2069af7959ea368b7689/html5/thumbnails/30.jpg)
サーバサイドの入力チェックは、「システムセキュリティ」のため
• サーバでしかできない値チェック
• Ajaxの通信も簡単に改ざん可能
• クライアントから送られてくる値は、最後まで信用しない
• JavaScriptでチェックしてたことは一旦忘れる
![Page 31: Webstandard2007 Spry Widget Ver1](https://reader037.fdocuments.us/reader037/viewer/2022102922/546d2069af7959ea368b7689/html5/thumbnails/31.jpg)
ユーザビリティ向上=顧客獲得サーバとクライアントは密に連携すべし。
• Webでしか営業をしていないなら、Webサイトの動線すべてが営業マン
進むも自由、去るも自由
• クライアントの入力チェックとサーバサイドの入力チェックは、共にユーザビリティ向上にまい進すべき
![Page 32: Webstandard2007 Spry Widget Ver1](https://reader037.fdocuments.us/reader037/viewer/2022102922/546d2069af7959ea368b7689/html5/thumbnails/32.jpg)
カラメルでの入力チェック機能実施例DEMO
サーバではどんなチェックが必要なのか?
![Page 33: Webstandard2007 Spry Widget Ver1](https://reader037.fdocuments.us/reader037/viewer/2022102922/546d2069af7959ea368b7689/html5/thumbnails/33.jpg)
Spry Widgetで足りない機能
• 自前のエラーチェックをSpryのエラー表示に反映する方法がない!
1.サーバサイドで起きたエラー表示2.複数フォームに渡る日付入力の日付チェック3.メールアドレスの再入力チェック4.複雑な正規表現を使ったチェック
• FORMのonSubmitを乗っ取られている
![Page 34: Webstandard2007 Spry Widget Ver1](https://reader037.fdocuments.us/reader037/viewer/2022102922/546d2069af7959ea368b7689/html5/thumbnails/34.jpg)
足りない機能は付け足しましょう。BSDライセンスですし
時間確認タイム 13:45ぐらい
![Page 35: Webstandard2007 Spry Widget Ver1](https://reader037.fdocuments.us/reader037/viewer/2022102922/546d2069af7959ea368b7689/html5/thumbnails/35.jpg)
Spry Widget拡張計画発動
1. 自作のクライアントサイドのエラーチェックを追加できるようにする
2. onSubmitが乗っ取られてるのをなんとかする
3. 自由にエラーメッセージの表示、非表示を制御したい。
やりたいこと
![Page 36: Webstandard2007 Spry Widget Ver1](https://reader037.fdocuments.us/reader037/viewer/2022102922/546d2069af7959ea368b7689/html5/thumbnails/36.jpg)
Spry Widgetのエラー表示の仕組み
![Page 37: Webstandard2007 Spry Widget Ver1](https://reader037.fdocuments.us/reader037/viewer/2022102922/546d2069af7959ea368b7689/html5/thumbnails/37.jpg)
Inside Spry Widget ~ エラー表示制御の仕組み ~
![Page 38: Webstandard2007 Spry Widget Ver1](https://reader037.fdocuments.us/reader037/viewer/2022102922/546d2069af7959ea368b7689/html5/thumbnails/38.jpg)
Inside Spry Widget ~ エラー表示制御の仕組み ~
span id = “spryMail”
span class =”textfieldInvalidFormatMsg”
![Page 39: Webstandard2007 Spry Widget Ver1](https://reader037.fdocuments.us/reader037/viewer/2022102922/546d2069af7959ea368b7689/html5/thumbnails/39.jpg)
Inside Spry Widget ~ エラー表示制御の仕組み ~
span id = “spryMail”
span class =”textfieldInvalidFormatMsg”
.textfieldInvalidFormatState .textfieldInvalidFormatMsg{ display: inline; }
以下のスタイルが当たるとメッセージが表示される
![Page 40: Webstandard2007 Spry Widget Ver1](https://reader037.fdocuments.us/reader037/viewer/2022102922/546d2069af7959ea368b7689/html5/thumbnails/40.jpg)
Spry Widgetの入力チェック宣言spryMail
![Page 41: Webstandard2007 Spry Widget Ver1](https://reader037.fdocuments.us/reader037/viewer/2022102922/546d2069af7959ea368b7689/html5/thumbnails/41.jpg)
Spry Widgetの入力チェック宣言
var spryMailObj = new Spry.Widget.ValidationTextField(
"spryMail", spanのID名"email", フォーマット(メール、数値、日付、メール、URL、無)
{maxChars:100 , 最大文字数(全角半角不可)validateOn:["change"], チェックするタイミング(change,submitなど)
isRequired:false}); 必須チェック(デフォルトで必須チェック有)
spryMail
![Page 42: Webstandard2007 Spry Widget Ver1](https://reader037.fdocuments.us/reader037/viewer/2022102922/546d2069af7959ea368b7689/html5/thumbnails/42.jpg)
1. 自作のクライアントサイドのエラーチェックを追加できるようにする
![Page 43: Webstandard2007 Spry Widget Ver1](https://reader037.fdocuments.us/reader037/viewer/2022102922/546d2069af7959ea368b7689/html5/thumbnails/43.jpg)
自作のエラーチェックを追加する (1)
![Page 44: Webstandard2007 Spry Widget Ver1](https://reader037.fdocuments.us/reader037/viewer/2022102922/546d2069af7959ea368b7689/html5/thumbnails/44.jpg)
文字入力
自作のエラーチェックを追加する (1)
![Page 45: Webstandard2007 Spry Widget Ver1](https://reader037.fdocuments.us/reader037/viewer/2022102922/546d2069af7959ea368b7689/html5/thumbnails/45.jpg)
onChange!!
文字入力
自作のエラーチェックを追加する (1)
![Page 46: Webstandard2007 Spry Widget Ver1](https://reader037.fdocuments.us/reader037/viewer/2022102922/546d2069af7959ea368b7689/html5/thumbnails/46.jpg)
onChange!!
SpryValidationTextField.js自動チェック
文字入力
自作のエラーチェックを追加する (1)
![Page 47: Webstandard2007 Spry Widget Ver1](https://reader037.fdocuments.us/reader037/viewer/2022102922/546d2069af7959ea368b7689/html5/thumbnails/47.jpg)
onChange!!
SpryValidationTextField.js自動チェック
文字入力
自作のエラーチェックを追加する (1)
![Page 48: Webstandard2007 Spry Widget Ver1](https://reader037.fdocuments.us/reader037/viewer/2022102922/546d2069af7959ea368b7689/html5/thumbnails/48.jpg)
onChange!!
SpryValidationTextField.js自動チェック
文字入力
自作のエラーチェックを追加する (1)
![Page 49: Webstandard2007 Spry Widget Ver1](https://reader037.fdocuments.us/reader037/viewer/2022102922/546d2069af7959ea368b7689/html5/thumbnails/49.jpg)
onChange!!
SpryValidationTextField.js自動チェック
文字入力
自作のエラーチェックを追加する (1)
![Page 50: Webstandard2007 Spry Widget Ver1](https://reader037.fdocuments.us/reader037/viewer/2022102922/546d2069af7959ea368b7689/html5/thumbnails/50.jpg)
onChange!!
SpryValidationTextField.js自動チェック
文字入力
appendLogic
追加のエラーロジック
自作のエラーチェックを追加する (1)
![Page 51: Webstandard2007 Spry Widget Ver1](https://reader037.fdocuments.us/reader037/viewer/2022102922/546d2069af7959ea368b7689/html5/thumbnails/51.jpg)
onChange!!
SpryValidationTextField.js自動チェック
文字入力
appendLogic
追加のエラーロジック
appendLogic.onChange()
自作のエラーチェックを追加する (1)
![Page 52: Webstandard2007 Spry Widget Ver1](https://reader037.fdocuments.us/reader037/viewer/2022102922/546d2069af7959ea368b7689/html5/thumbnails/52.jpg)
onChange!!
SpryValidationTextField.js自動チェック
文字入力
appendLogic
追加のエラーロジック
appendLogic.onChange()
自作のエラーチェックを追加する (1)
![Page 53: Webstandard2007 Spry Widget Ver1](https://reader037.fdocuments.us/reader037/viewer/2022102922/546d2069af7959ea368b7689/html5/thumbnails/53.jpg)
自作のエラーチェックを追加する (2)
呼び出し元のHTMLのJavaScriptに、追加のエラーチェック処理を追加し、Spry Widgetに追加しておく。
mailAppendCheck = new Object();mailAppendCheck.onChange = function(me){
// ここでメールアドレスの重複チェックなどを行う。 return true // or false ;
}
// spry Widgetに追加spryMailObj.appendLogic = mailAppendCheck ;
![Page 54: Webstandard2007 Spry Widget Ver1](https://reader037.fdocuments.us/reader037/viewer/2022102922/546d2069af7959ea368b7689/html5/thumbnails/54.jpg)
自作のエラーチェックを追加する (3)
改造ファイル:SpryValidationTextField.js
~テキストフィールドのonChange処理~
Spry.Widget.ValidationTextField.prototype.onChange = function(e){
~ 通常のonChangeの処理(省略) ~
/* appendLogicの呼び出しを開始 */
this.appendLogic.onChange(this);
}
![Page 55: Webstandard2007 Spry Widget Ver1](https://reader037.fdocuments.us/reader037/viewer/2022102922/546d2069af7959ea368b7689/html5/thumbnails/55.jpg)
2. onSubmitが乗っ取られてるのをなんとかする
= onSubmit時に自作のチェックを追加する
![Page 56: Webstandard2007 Spry Widget Ver1](https://reader037.fdocuments.us/reader037/viewer/2022102922/546d2069af7959ea368b7689/html5/thumbnails/56.jpg)
onSubmit時に自作のチェックを追加する (1)
![Page 57: Webstandard2007 Spry Widget Ver1](https://reader037.fdocuments.us/reader037/viewer/2022102922/546d2069af7959ea368b7689/html5/thumbnails/57.jpg)
onSubmit時に自作のチェックを追加する (1)
フォーム送信
![Page 58: Webstandard2007 Spry Widget Ver1](https://reader037.fdocuments.us/reader037/viewer/2022102922/546d2069af7959ea368b7689/html5/thumbnails/58.jpg)
onSubmit!!
onSubmit時に自作のチェックを追加する (1)
フォーム送信
![Page 59: Webstandard2007 Spry Widget Ver1](https://reader037.fdocuments.us/reader037/viewer/2022102922/546d2069af7959ea368b7689/html5/thumbnails/59.jpg)
onSubmit!!
Spry.Widget.Form自動チェック
onSubmit時に自作のチェックを追加する (1)
フォーム送信
![Page 60: Webstandard2007 Spry Widget Ver1](https://reader037.fdocuments.us/reader037/viewer/2022102922/546d2069af7959ea368b7689/html5/thumbnails/60.jpg)
onSubmit!!
Spry.Widget.Form自動チェック
onSubmit時に自作のチェックを追加する (1)
フォーム送信
![Page 61: Webstandard2007 Spry Widget Ver1](https://reader037.fdocuments.us/reader037/viewer/2022102922/546d2069af7959ea368b7689/html5/thumbnails/61.jpg)
onSubmit!!
Spry.Widget.Form自動チェック
onSubmit時に自作のチェックを追加する (1)
フォーム送信
![Page 62: Webstandard2007 Spry Widget Ver1](https://reader037.fdocuments.us/reader037/viewer/2022102922/546d2069af7959ea368b7689/html5/thumbnails/62.jpg)
onSubmit!!
Spry.Widget.Form自動チェック
onSubmit時に自作のチェックを追加する (1)
フォーム送信
![Page 63: Webstandard2007 Spry Widget Ver1](https://reader037.fdocuments.us/reader037/viewer/2022102922/546d2069af7959ea368b7689/html5/thumbnails/63.jpg)
onSubmit!!
Spry.Widget.Form自動チェック appendLogic
追加のエラーロジック
onSubmit時に自作のチェックを追加する (1)
フォーム送信
![Page 64: Webstandard2007 Spry Widget Ver1](https://reader037.fdocuments.us/reader037/viewer/2022102922/546d2069af7959ea368b7689/html5/thumbnails/64.jpg)
onSubmit!!
Spry.Widget.Form自動チェック appendLogic
追加のエラーロジック
appendLogic.onSubmit()
onSubmit時に自作のチェックを追加する (1)
フォーム送信
![Page 65: Webstandard2007 Spry Widget Ver1](https://reader037.fdocuments.us/reader037/viewer/2022102922/546d2069af7959ea368b7689/html5/thumbnails/65.jpg)
onSubmit!!
Spry.Widget.Form自動チェック appendLogic
追加のエラーロジック
appendLogic.onSubmit()
onSubmit時に自作のチェックを追加する (1)
フォーム送信
![Page 66: Webstandard2007 Spry Widget Ver1](https://reader037.fdocuments.us/reader037/viewer/2022102922/546d2069af7959ea368b7689/html5/thumbnails/66.jpg)
onSubmit時に自作のチェックを追加する (2)
呼び出し元のHTMLのJavaScriptに、追加のエラーチェック処理を追加し、Spry Widgetに追加しておく。
submitCheck = new Object();submitCheck.onSubmit = function(me){
// ここでsubmit時に追加したいチェックを行う。 return true // or false ;
}
// spry Widgetに追加Spry.Widget.Form.appendLogic = submitCheck ;
![Page 67: Webstandard2007 Spry Widget Ver1](https://reader037.fdocuments.us/reader037/viewer/2022102922/546d2069af7959ea368b7689/html5/thumbnails/67.jpg)
onSubmit時に自作のチェックを追加する (2)
改造ファイル:SpryValidationTextField.js
注意:同じメソッドが、SpryValidationSelect.jsなどの にも定義されてるので全部同じように書き換える
Spry.Widget.Form.onSubmit = function(e){
~ 通常のonSubmitの処理(省略) ~this.appendLogic.onSubmit(this);
}
![Page 68: Webstandard2007 Spry Widget Ver1](https://reader037.fdocuments.us/reader037/viewer/2022102922/546d2069af7959ea368b7689/html5/thumbnails/68.jpg)
3. 自由にエラーメッセージの表示、非表示を制御したい。
![Page 69: Webstandard2007 Spry Widget Ver1](https://reader037.fdocuments.us/reader037/viewer/2022102922/546d2069af7959ea368b7689/html5/thumbnails/69.jpg)
エラーメッセージの表示、非表示を制御(1)
![Page 70: Webstandard2007 Spry Widget Ver1](https://reader037.fdocuments.us/reader037/viewer/2022102922/546d2069af7959ea368b7689/html5/thumbnails/70.jpg)
span id = “spryMail”
span class =”textfieldInvalidFormatMsg”
以下のスタイルが当たるとメッセージが表示される.textfieldInvalidFormatState .textfieldInvalidFormatMsg
エラー表示:{ display: inline; }
エラーメッセージの表示、非表示を制御(1)
![Page 71: Webstandard2007 Spry Widget Ver1](https://reader037.fdocuments.us/reader037/viewer/2022102922/546d2069af7959ea368b7689/html5/thumbnails/71.jpg)
エラーメッセージの表示、非表示を制御(2)
エラーメッセージを表示する。spryMailObj.addClassName( $('spryMail'), 'textfieldInvalidFormatState' )
エラーメッセージを非表示にする。spryMailObj.removeClassName($('spryMail'),'textfieldInvalidFormatState' );
※第二引数に対象のspanのDOMオブジェクトを渡す。
![Page 72: Webstandard2007 Spry Widget Ver1](https://reader037.fdocuments.us/reader037/viewer/2022102922/546d2069af7959ea368b7689/html5/thumbnails/72.jpg)
エラーメッセージの表示、非表示を制御(3)
サーバサイドで発生した入力エラーを、Spry Widgetの表示方法で表示する
/* PHPから出力 */
setErrorMessage('spryUserName' , 'AccountIsAlreadyExist');/* PHPから出力 */
// サーバからのエラーコードをエラークラス名に合わせておく。function setErrorMessage(spryId , errClass){
spryMailObj.addClassName($(spryId),errClass);
}
![Page 73: Webstandard2007 Spry Widget Ver1](https://reader037.fdocuments.us/reader037/viewer/2022102922/546d2069af7959ea368b7689/html5/thumbnails/73.jpg)
カスタムのエラーメッセージを表示する
![Page 74: Webstandard2007 Spry Widget Ver1](https://reader037.fdocuments.us/reader037/viewer/2022102922/546d2069af7959ea368b7689/html5/thumbnails/74.jpg)
カスタムのエラーメッセージを表示するspryMail
<span class="textfieldReinputMsg">
![Page 75: Webstandard2007 Spry Widget Ver1](https://reader037.fdocuments.us/reader037/viewer/2022102922/546d2069af7959ea368b7689/html5/thumbnails/75.jpg)
カスタムのエラーメッセージを表示するspryMail
<span class="textfieldReinputMsg">
■CSSファイル 「SpryValidationTextFiled.css」 に、カスタムメッセージのクラスを追加する。 .textfieldRequiredState .textfieldRequiredMsg, .textfieldReinputState .textfieldReinputMsg { display: inline; }
■エラー表示方法 spryMailObj.addClassName($('spryMail'),'textfieldReinputState' );
![Page 76: Webstandard2007 Spry Widget Ver1](https://reader037.fdocuments.us/reader037/viewer/2022102922/546d2069af7959ea368b7689/html5/thumbnails/76.jpg)
Spry Widgetって実際どうよ?
~採用を検討するときに知っておくべき事~
![Page 77: Webstandard2007 Spry Widget Ver1](https://reader037.fdocuments.us/reader037/viewer/2022102922/546d2069af7959ea368b7689/html5/thumbnails/77.jpg)
プロジェクトにおけるSpry Widgetのメリット
• エラーメッセージを予めHTMLに書いておくのでデザイン、コーディングしやすい
• プライオリティが低くなりがちなリッチクライアント機能の開発効率化
• Adobeプロダクトによる 「いいもの使っている感」
• クロスブラウザ対応
![Page 78: Webstandard2007 Spry Widget Ver1](https://reader037.fdocuments.us/reader037/viewer/2022102922/546d2069af7959ea368b7689/html5/thumbnails/78.jpg)
Spry Widgetのデメリット
• カスタムエラーを組み込めないと、絶対に機能が足りない
• HTML上にエラーメッセージを予め書かなきゃいけないこと(Dreamweaverありきの仕様?!)CSSをオフにしたら、エラーメッセージが表示されてしまう。アクセシビリティ?!
![Page 79: Webstandard2007 Spry Widget Ver1](https://reader037.fdocuments.us/reader037/viewer/2022102922/546d2069af7959ea368b7689/html5/thumbnails/79.jpg)
Spry Widgetの注意点
• textAreaの文字数チェックで、IMEで日本語を入力するときの挙動 [DEMO]
• 日本の携帯でのメールアドレスチェック
• textAreaのprototype.jsとのコンフリクト問題(Spry 1.5で解消)
![Page 80: Webstandard2007 Spry Widget Ver1](https://reader037.fdocuments.us/reader037/viewer/2022102922/546d2069af7959ea368b7689/html5/thumbnails/80.jpg)
DreamweaverでのSpry Widget
の注意点
• CS3にインストールされてるSpryのバージョンは1.4 (現在、1.5がprereleaseされている)
1.サイトフォルダを上書き
2.'DW application folder/Configuration/Shared/Spry/'
http://blogs.adobe.com/spryteam/2007/06/post.html
![Page 81: Webstandard2007 Spry Widget Ver1](https://reader037.fdocuments.us/reader037/viewer/2022102922/546d2069af7959ea368b7689/html5/thumbnails/81.jpg)
Spry Widget まとめ
• クロスプラットフォームで、時間をかけずにリッチな入力フォームを実現できる
• セキュリティは、別途必要
• JavaScriptのエラー処理の拡張は必須
• JavaScriptオフのユーザーについてはターゲットユーザーを明確にした上で選択する
![Page 82: Webstandard2007 Spry Widget Ver1](https://reader037.fdocuments.us/reader037/viewer/2022102922/546d2069af7959ea368b7689/html5/thumbnails/82.jpg)
Spry Widget 拡張版ソース
• 今日の内容に対応したSpry Widgetの改良版は、 http://f-shin.net/labs/ にて公開します。
• 今のところ、建設予定地しかありません。今週中に設置します。早速試してみたいという方がいたら教えてください。プライオリティが高くなります。
![Page 83: Webstandard2007 Spry Widget Ver1](https://reader037.fdocuments.us/reader037/viewer/2022102922/546d2069af7959ea368b7689/html5/thumbnails/83.jpg)
ご清聴ありがとうございました。
質問をどうぞ。
せっかくなので、ここで話していないサーバ側の話でもアーキテクチャの話でも
結構です。
後からでも質問がある方は、[email protected] まで。