webstandard2007 spry widget ver1
DESCRIPTION
TRANSCRIPT
Spry Widgetでつくる入力フォーム～「カラメル」ユーザー登録での開発事例紹介～
（株）paperboy&co.
藤川 真一
本セッションでのゴール
• Spry Widgetがどういうものかを知る
• Spry Widgetで入力フォームを作る場合の注意点を知る
• Spry Widgetを実際のプロジェクトで採用できるかの判断の材料を知る。
スライドのAgenda
• 自己紹介
• SpryFramework for Ajaxの紹介
• Spry Widgetによる入力フォームの作成
• 入力フォームについて改めて考える
• Spry Widgetってどうよ？
自己紹介
自己紹介• 藤川真一
• （株）paperboy &co . EC事業本部 ショッピングモール 「カラメル」プロデューサー
• えふしん (f-shin / fshin2000 )
• blog : 「F’s Garage」 http://www.milkstand.net
「 cnet読者blog F’s Garage type C 」
• twitterの携帯クライアント「movatwitter」
ショッピングポータル「カラメル」
• 月875円のネットショップASP「Color Me Shop ! pro」のショップが出店しているショッピングモール
ユーザー機能「マイカラメル」
• Color Me Shop!の「購入履歴」、「簡単買い物設定」買い物専用ソーシャルブックマーク機能「商品のお気に入り登録」
Spry Widgetとは？
まずはカラメル 会員登録ページによるDEMOを行います。
Spry（スプライ） Framework for Ajax
• AdobeのDreamweaver開発チームによる“デザイナー向け”JavaScriptライブラリ
• Ajaxの処理やリッチなUIが簡単に組み込めます
• BSDライセンスで、商用利用も改造も可能
http://labs.adobe.com/technologies/spry/
Spry Framework for Ajax の特徴• 組み込む際にXHTMLの文法を壊さない
• JavaScript とXHTMLとの関連づけは、classやspry:というネームスペースを介して繋がる
• スタイルは専用に用意されたCSSファイルに定義
<div id="RSSFeedsList" spry:region="dsCategories dsFeeds" class="SpryHiddenRegion"></div>
F’s Garage / December 01 , 2003~デザイナーの作るHTMLを壊したくないWeb開発者のために~
• HTMLにプログラムのコードを埋めるテンプレートフレームワークは失格
•完成品のデザインHTMLはそのままテンプレートとして、シームレスに使えるべし！
• �<div id="なにがし">にょろにょろ</div>の中身を置換してくれるテンプレートエンジンが欲しい
http://www.milkstand.net/fsgarage/archives/000220.html
Spry Framework for Ajaxの構成• Spry XML Data Sets
XMLの動的読み込み処理、キャッシュ、XMLのソート、自動リロードなどリッチなデータ処理 リッチなprototype.js
• Spry Effects
アニメーション処理をしてくれる。script.aculo.usのようなもの
• Spry Widget
XML Data SetsやEffectsと結びついて、リッチなUIを実現アコーディオン型のメニュー、プルダウンメニュー入力チェック機能
Spry Widgetの「Widget」とは？
• アプリケーションソフトやデスクトップ上で動作する、小規模なアクセサリーソフト
• グラフィカルユーザインターフェースを構成する部品要素、およびその集まり→ウィジェット・ツールキット。「window gadget」の合成語ともいわれている
ウィキペディアより
Spry Widgetの入力チェック機能• 各フォームに対してチェック事項を指定するだけで値チェック、入力文字数、入力フォーマットを自動で行う
• text field , textarea select , checkbox , radio に対応（radio button は、Spry1.5より対応）
• 画面上でエラーメッセージの表示、非表示を自動で制御してくれる
• 一つでもエラーがあるとsubmitが抑止される
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ファイル単体で動きます。
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の名称はルールで決まっています。
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>
Dreamweaver CS3によるデモ
Dreamweaver CS3を使えば、手順１～３を全て自動で行ってくれます。
さて、Spryを使えば入力フォームが簡単に作れますが･･･
「Spry Framework for Ajax
= デザイナー向け
JavaScript フレームワーク」の罠
Spryだけで入力フォームらっくらく♪
「Spry Framework for Ajax
= デザイナー向け
JavaScript フレームワーク」の罠
世の中そんなに甘くない
Spryだけで入力フォームらっくらく♪
ここから先が本題です。
時間確認タイム 13:30ぐらい
入力フォームについて改めて考えましょう。
入力フォームの役割
• ユーザーが迷わず入力できるようにする
• エラーをチェックして、適切な値を入力できるようにナビゲーションする
• 不適切な文字をチェックして、不正な入力文字列をシステムに保存しない
入力フォームの役割
• ユーザーが迷わず入力できるようにする
• エラーをチェックして、適切な値を入力できるようにナビゲーションする
• 不適切な文字をチェックして、不正な入力文字列をシステムに保存しない
どれもSpry Widgetを使えば実現できそうに見えますが・・・。
ここでちょっとDEMO
入力チェック機能の分類
• クライアントサイドブラウザで、JavaScriptやAjaxを使った入力チェック ・・・ Spry Widget
• サーバーサイドPHPやPerlにて入力チェックを行う。「validator」ライブラリ
クライアントサイドの入力チェックは、「ユーザビリティ」のため
• 画面をSubmitすることなくあらゆることを実現することでユーザーの負担を減らす
• Spry Widgetを使おうが、Ajaxを使おうがセキュリティには役に立たない。
• システムの実現性には必要ではない（凝った制御は、JavasScriptが苦手な
大多数の開発者には敬遠される）
サーバサイドの入力チェックは、「システムセキュリティ」のため
• サーバでしかできない値チェック
• Ajaxの通信も簡単に改ざん可能
• クライアントから送られてくる値は、最後まで信用しない
• JavaScriptでチェックしてたことは一旦忘れる
ユーザビリティ向上＝顧客獲得サーバとクライアントは密に連携すべし。
• Webでしか営業をしていないなら、Webサイトの動線すべてが営業マン
進むも自由、去るも自由
• クライアントの入力チェックとサーバサイドの入力チェックは、共にユーザビリティ向上にまい進すべき
カラメルでの入力チェック機能実施例DEMO
サーバではどんなチェックが必要なのか？
Spry Widgetで足りない機能
• 自前のエラーチェックをSpryのエラー表示に反映する方法がない！
１．サーバサイドで起きたエラー表示２．複数フォームに渡る日付入力の日付チェック３．メールアドレスの再入力チェック４．複雑な正規表現を使ったチェック
• FORMのonSubmitを乗っ取られている
足りない機能は付け足しましょう。BSDライセンスですし
時間確認タイム 13:45ぐらい
Spry Widget拡張計画発動
1. 自作のクライアントサイドのエラーチェックを追加できるようにする
2. onSubmitが乗っ取られてるのをなんとかする
3. 自由にエラーメッセージの表示、非表示を制御したい。
やりたいこと
Spry Widgetのエラー表示の仕組み
Inside Spry Widget ～ エラー表示制御の仕組み ～
Inside Spry Widget ～ エラー表示制御の仕組み ～
span id = “spryMail”
span class =”textfieldInvalidFormatMsg”
Inside Spry Widget ～ エラー表示制御の仕組み ～
span id = “spryMail”
span class =”textfieldInvalidFormatMsg”
.textfieldInvalidFormatState .textfieldInvalidFormatMsg{ display: inline; }
以下のスタイルが当たるとメッセージが表示される
Spry Widgetの入力チェック宣言spryMail
Spry Widgetの入力チェック宣言
var spryMailObj = new Spry.Widget.ValidationTextField(
"spryMail", spanのID名"email", フォーマット(メール、数値、日付、メール、URL、無)
{maxChars:100 , 最大文字数（全角半角不可）validateOn:["change"], チェックするタイミング（change,submitなど)
isRequired:false}); 必須チェック（デフォルトで必須チェック有）
spryMail
1. 自作のクライアントサイドのエラーチェックを追加できるようにする
自作のエラーチェックを追加する (1)
文字入力
自作のエラーチェックを追加する (1)
onChange!!
文字入力
自作のエラーチェックを追加する (1)
onChange!!
SpryValidationTextField.js自動チェック
文字入力
自作のエラーチェックを追加する (1)
onChange!!
SpryValidationTextField.js自動チェック
文字入力
自作のエラーチェックを追加する (1)
onChange!!
SpryValidationTextField.js自動チェック
文字入力
自作のエラーチェックを追加する (1)
onChange!!
SpryValidationTextField.js自動チェック
文字入力
自作のエラーチェックを追加する (1)
onChange!!
SpryValidationTextField.js自動チェック
文字入力
appendLogic
追加のエラーロジック
自作のエラーチェックを追加する (1)
onChange!!
SpryValidationTextField.js自動チェック
文字入力
appendLogic
追加のエラーロジック
appendLogic.onChange()
自作のエラーチェックを追加する (1)
onChange!!
SpryValidationTextField.js自動チェック
文字入力
appendLogic
追加のエラーロジック
appendLogic.onChange()
自作のエラーチェックを追加する (1)
自作のエラーチェックを追加する (2)
呼び出し元のHTMLのJavaScriptに、追加のエラーチェック処理を追加し、Spry Widgetに追加しておく。
mailAppendCheck = new Object();mailAppendCheck.onChange = function(me){
// ここでメールアドレスの重複チェックなどを行う。 return true // or false ;
}
// spry Widgetに追加spryMailObj.appendLogic = mailAppendCheck ;
自作のエラーチェックを追加する (3)
改造ファイル：SpryValidationTextField.js
～テキストフィールドのonChange処理～
Spry.Widget.ValidationTextField.prototype.onChange = function(e){
～ 通常のonChangeの処理（省略） ～
/* appendLogicの呼び出しを開始 */
this.appendLogic.onChange(this);
｝
2. onSubmitが乗っ取られてるのをなんとかする
＝ onSubmit時に自作のチェックを追加する
onSubmit時に自作のチェックを追加する (1)
onSubmit時に自作のチェックを追加する (1)
フォーム送信
onSubmit!!
onSubmit時に自作のチェックを追加する (1)
フォーム送信
onSubmit!!
Spry.Widget.Form自動チェック
onSubmit時に自作のチェックを追加する (1)
フォーム送信
onSubmit!!
Spry.Widget.Form自動チェック
onSubmit時に自作のチェックを追加する (1)
フォーム送信
onSubmit!!
Spry.Widget.Form自動チェック
onSubmit時に自作のチェックを追加する (1)
フォーム送信
onSubmit!!
Spry.Widget.Form自動チェック
onSubmit時に自作のチェックを追加する (1)
フォーム送信
onSubmit!!
Spry.Widget.Form自動チェック appendLogic
追加のエラーロジック
onSubmit時に自作のチェックを追加する (1)
フォーム送信
onSubmit!!
Spry.Widget.Form自動チェック appendLogic
追加のエラーロジック
appendLogic.onSubmit()
onSubmit時に自作のチェックを追加する (1)
フォーム送信
onSubmit!!
Spry.Widget.Form自動チェック appendLogic
追加のエラーロジック
appendLogic.onSubmit()
onSubmit時に自作のチェックを追加する (1)
フォーム送信
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 ;
onSubmit時に自作のチェックを追加する (2)
改造ファイル：SpryValidationTextField.js
注意：同じメソッドが、SpryValidationSelect.jsなどの にも定義されてるので全部同じように書き換える
Spry.Widget.Form.onSubmit = function(e){
～ 通常のonSubmitの処理（省略） ～this.appendLogic.onSubmit(this);
｝
3. 自由にエラーメッセージの表示、非表示を制御したい。
エラーメッセージの表示、非表示を制御(1)
span id = “spryMail”
span class =”textfieldInvalidFormatMsg”
以下のスタイルが当たるとメッセージが表示される.textfieldInvalidFormatState .textfieldInvalidFormatMsg
エラー表示：{ display: inline; }
エラーメッセージの表示、非表示を制御(1)
エラーメッセージの表示、非表示を制御(2)
エラーメッセージを表示する。spryMailObj.addClassName( $('spryMail'), 'textfieldInvalidFormatState' )
エラーメッセージを非表示にする。spryMailObj.removeClassName($('spryMail'),'textfieldInvalidFormatState' );
※第二引数に対象のspanのDOMオブジェクトを渡す。
エラーメッセージの表示、非表示を制御(3)
サーバサイドで発生した入力エラーを、Spry Widgetの表示方法で表示する
/* PHPから出力 */
setErrorMessage('spryUserName' , 'AccountIsAlreadyExist');/* PHPから出力 */
// サーバからのエラーコードをエラークラス名に合わせておく。function setErrorMessage(spryId , errClass){
spryMailObj.addClassName($(spryId),errClass);
}
カスタムのエラーメッセージを表示する
カスタムのエラーメッセージを表示するspryMail
<span class="textfieldReinputMsg">
カスタムのエラーメッセージを表示するspryMail
<span class="textfieldReinputMsg">
■CSSファイル 「SpryValidationTextFiled.css」 に、カスタムメッセージのクラスを追加する。 .textfieldRequiredState .textfieldRequiredMsg, .textfieldReinputState .textfieldReinputMsg { display: inline; }
■エラー表示方法 spryMailObj.addClassName($('spryMail'),'textfieldReinputState' );
Spry Widgetって実際どうよ？
～採用を検討するときに知っておくべき事～
プロジェクトにおけるSpry Widgetのメリット
• エラーメッセージを予めHTMLに書いておくのでデザイン、コーディングしやすい
• プライオリティが低くなりがちなリッチクライアント機能の開発効率化
• Adobeプロダクトによる 「いいもの使っている感」
• クロスブラウザ対応
Spry Widgetのデメリット
• カスタムエラーを組み込めないと、絶対に機能が足りない
• HTML上にエラーメッセージを予め書かなきゃいけないこと（Dreamweaverありきの仕様？！）CSSをオフにしたら、エラーメッセージが表示されてしまう。アクセシビリティ？！
Spry Widgetの注意点
• textAreaの文字数チェックで、IMEで日本語を入力するときの挙動 [DEMO]
• 日本の携帯でのメールアドレスチェック
• textAreaのprototype.jsとのコンフリクト問題（Spry 1.5で解消）
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
Spry Widget まとめ
• クロスプラットフォームで、時間をかけずにリッチな入力フォームを実現できる
• セキュリティは、別途必要
• JavaScriptのエラー処理の拡張は必須
• JavaScriptオフのユーザーについてはターゲットユーザーを明確にした上で選択する
Spry Widget 拡張版ソース
• 今日の内容に対応したSpry Widgetの改良版は、 http://f-shin.net/labs/ にて公開します。
• 今のところ、建設予定地しかありません。今週中に設置します。早速試してみたいという方がいたら教えてください。プライオリティが高くなります。
ご清聴ありがとうございました。
質問をどうぞ。
せっかくなので、ここで話していないサーバ側の話でもアーキテクチャの話でも
結構です。
後からでも質問がある方は、[email protected] まで。