2006-03-03 [長年日記]
_ 次世代のフォーム処理
Ajaxを利用することで、Webアプリのフォーム回りの処理もいろいろできるようになるわけだけど、その処理が主機能に関連するものの場合は、そう簡単にJavaScript必須にするわけにもいかない。
だから今後のフォーム回りの設計については、基本的にJavaScriptなしでもフル機能動作するフォーム設計を行った上で、もしもJavaScriptが利用できる場合はより快適に動作する、といった方針で作っていくことを考えていた。
基本的にはonSubmitをフックして、JavaScriptで対応できる処理の場合はJavaScript側で処理を代行した上で、return false;するようなアプローチね。
で、実際にそういう高機能なフォームを書いてみようと試してみたところ、すぐに手が止まってしまった。具体的にどう書くという方針が全然練れていなかったらしい。
というか、JavaScriptなしで完全に動作するフォームの上に、JavaScriptを使うとより快適に動作するフォーム機能を載せようというアプローチ自体に無理があるのかな。もちろんそういうアプローチが可能な場合もあるけれども、そういうアプローチが可能なケースはかなりレアな気もしてきた。
素直に、JavaScriptなし版のフォームとJavaScript必須なフォームを、それぞれ別に作った方がいいのかもしれない。この辺を追求してみた人っているのかな？
このセクションに対するはてなブックマーク
[TrackBack URL: http://tdiary.ishinao.net/tb.rb/20060303]
http://shibuyajs.org/ の右上の検索では、JavaScriptが使えるならその場で検索結果を表示、使えないなら通常の検索を行ってます。
> JavaScriptなしで完全に動作するフォームの上に、JavaScriptを使うとより快適に動作するフォーム機能
はてなのユーザ登録では、Ajaxが使えるならユーザidの重複チェックを一文字入力ごとに行っています。もちろん使えなかったら通常のvalidateで引っかかると。
より快適に、というのは実現しやすいのじゃないのでしょうか。
ちゃんと読み込んでないので単なるご紹介なんですが、"degradable Ajax"というキーワードでいくつかエントリを見たことがあります。
たとえばこのへんとか。
http://particletree.com/features/the-hows-and-whys-of-degradable-ajax/
これは、非JavascriptなDHTMLを、Javascriptで動的にAjax化することで両対応しているようです。いしなおさんの言われているアプローチに近いのではないでしょうか。
＞secondlifeさん
シンプルなフォームだと、そういう補助的なJavaScriptの書き方（基本的な流れは同じで、JavaScriptによる拡張部分はあってもなくてもOK）でいけるんですけど、実際にとある情報更新系のフォームに適用させようとしたところ、そういうアプローチではうまくまとめられなかったんですよ。
そこで、フォームにAjaxを適用する際のパターンとしては、
・JavaScriptなしでも動作するフォームに補助的に（動作の流れはそのままに）JavaScriptで機能を拡張するパターン
・JavaScriptを適用するのならば、初めからJavaScriptを前提とした設計（動作の流れ自体異なる）にした方が望ましいパターン
があり、なんでも前者のアプローチで書こうとするのはやめた方がいいのではないか、と思ったわけです。
って、こう書いてみるとやけに当たり前のことを書いている気がしてきましたが。
＞秋元さん
上記ページは、まさしく私のとろうとしたアプローチに関する話でした。
このページで紹介されている方法は、まずJavaScriptなしで動作するフォームを書いてから、JavaScriptが有効な場合は（a href、input type="submit"の）すべてのonclickを無効化し、新たにJavaScriptによるイベントハンドラを追加して、そちらでフルJavaScriptの処理コードを書く、といったアプローチのようですね。
（JavaScriptコード部分が）大がかりすぎて、自分で採用するにはちょっとキビしそうな気がしますが、命名規則（何にどう識別名をつけて処理するか）やサーバーサイドの処理の共通化にまで踏み込んで書かれているんで、いろいろ参考になりました。
それにしても、このページの場合はフルAjaxなサイトを非JavaScript環境でも動作させよう（degradable）と考えているのに対して、私の場合は非JavaScript環境で動作するサイト（の一部）をJavaScript有効な環境で拡張しよう（upgradable）と考えているあたり、同じことを考えていても立ち位置が全然違うなー。