2006-03-04 (Sat)

次世代のフォーム処理について

だから今後のフォーム回りの設計については、基本的にJavaScriptなしでもフル機能動作するフォーム設計を行った上で、もしもJavaScriptが利用できる場合はより快適に動作する、といった方針で作っていくことを考えていた。

基本的にはonSubmitをフックして、JavaScriptで対応できる処理の場合はJavaScript側で処理を代行した上で、return false;するようなアプローチね。

引用元: いしなお! - 次世代のフォーム処理 (いしなお! より)

同意。JavaScript オフだと動かないウェブサービスなんてうんこうry。

ちなみに自分の場合は、追求はしていないけど現時点でそれなりに自己満足してる方法はあります。

フォーム送信先のページで適当に区切りとなる文字(コメント文とか)を出力しておいて、JavaScript が on の場合は、XMLHttp 通信を使ってその部分だけを取得して元の画面内に描画、そうじゃない場合は普通に画面遷移して描画っていう事をしています。こういう事をしてるっていう話しはあんまり聞かないけど、すごくお手軽な上に操作感も向上したと感じると思ってます。

元々出力するはずだった HTML を切り取ってるだけなので、サーバもクライアントも速度が向上するわけではありませんし、負荷も減るわけではありませんが、サクサク感が違います。あと適度にエフェクトも付けると派手さがアップして素人受けは多分良いです。

具体的にどういう画面で使用しているかと言うと、ウェブ上でデータの編集・削除を行なうようなフォームで使っています。たとえば、会員情報の変更や削除とか。これらは結構導入しやすいです。MM/Memo の投稿の編集画面とかでやっても良いんじゃないかって気がします。

まぁ、これだけだと次世代と呼ぶのは恥ずかしすぎるので、だれかお手軽でカッコイイ方法があったら教えて欲しい。

ちなみに、送信先の内容によっては 悪いAjaxの使い方 って言われちゃうので気をつけないといけませんけど。

ていうか、サーバーとクライアントでテンプレートを共有したい場合 てのは結構良さげだと思うんですけど、駄目なんですか?上で書いた方法は、かなりこれに近いんですが。いずれはそういう形にしたいとも思ってましたし。

Posted by Kyosuke Takayama at 2006-03-04 (Sat) 00:00 printable version

この記事へのコメント

1) ishinao (2006-03-06 (Mon) 17:47)

Ajaxも通常のPOSTも、送信先(が返すHTML)は同じにしておいて、Ajaxの場合はその一部を切り取って表示する、というアプローチは作るのが楽そうですね。ちょっとだけAjax対応にしたい場合なんかに使えそう。

ちなみに、「サーバーとクライアントでテンプレートを共有したい場合」で書いたアプローチは、すでにばりばり使っています。ただこのアプローチ自体は、フォーム処理とはあまり関係ない話なので。

フォーム処理の話は、どうせJavaScriptを使うのならばJavaScriptなしで動作するフォームに補足的にJavaScript処理を追加するのではなく、全面的にJavaScriptを使った処理として書き直した方がいい場合も(の方が)多いのではないか、みたいなニュアンスです。該当日のコメントにもちょっと補足的情報があります。

2) takayama (2006-03-06 (Mon) 23:10)

なるほど、「JavaScript必須」と「非JavaScript」環境はどうやって共存させてる?っていうお話しだと思っていました。これはこれで他の皆さんがどうやってるか興味ありますね。

フォーム処理の話しですが、補足的な物というと私が上に書いたような簡単な内容という事になると思いますが、もっと、こう、凄く便利にするためにはやっぱり全面的にその部分を作って行った方が洗練されたものが出来るような気もしますけど、まだそこまで高機能なものを思い付く所まで行ってないので正直な所よくわかりません。すみません、役に立たん返事で… ^^;

コメントはお気軽にどうぞ

Cookie に保存しますか?


・スパム対策のため、http:// を含むコメントの投稿は出来ません。
・スパムチェックのため、投稿がすぐに反映されない場合があります。
・メールアドレス入力欄には何も入力しないでください。

トラックバック

トラックバックURL: http://espion.just-size.jp/mt-tb.cgi/554


 
Copyright (C) Kyosuke Takayama, All rights reserved.