in place editor

今日はin place editorです。
ページ遷移なしでフォームのサブミットができるってやつ。
Flickrとかで使われてるんだけど。言葉で説明するよりも見た方が早い。
http://takatoshi.dyndns.org/examples/scriptaculous/inplaceeditor/inplaceeditor.cgi
なんか入力して「create」をクリックするとそれが保存されてリスト表示されます。保存したテキストを編集するにはそのテキスト行の付近にマウスを持っていってクリックします。するとフォームが現れるのでテキストを編集してサブミットします。そんだけ。データはクッキーに保存しています。保持期間は1日です。
クッキーってのはクライアント側に保存するものなので、サーバー側でデータを受け取ってからクライアントに返さないといけません。つまり、HTTPヘッダにクッキーを保存するように指定して普通にページを返さないといけないということです。別にそれでいいじゃんといえばそうなのだけれど、リダイレクトできないという点がいまいちです。なにかデータをPOSTされたあとはリダイレクトして同じデータがPOSTされるのを防ぐってのが普通なんだけどそれができないわけです(POSTしたあとにブラウザでリロードすると同じデータをPOSTしまう。ブラウザによってはメッセージを出して注意を促すが)。まあ、普通はデータ保存にDBを使うので問題はないでしょう。
script.aculo.usのライブラリはcontrols.jsとeffects.jsを使います。effects.jsは色の反転とかに使ってると思われ、in place editorの機能自体はcontrols.jsのほうかな(調べてないけど。たぶん)。
編集するためのページ遷移が不要になるのですごく便利なんだけど、実際はそんなにうまく行かなくて。別にこの機能に限った話ではないのだけれど、JavaScriptをオフにしているブラウザをサポートするって話になると従来通りの編集機能が必要条件であり、こういう便利機能はただの「おまけ」みたいな感じになってしまいがちです。そろそろJavaScriptオフはサポートしなくてもいいと思うんだけどなあ・・・。

    • -

http://wiki.script.aculo.us/scriptaculous/show/Ajax.InPlaceEditor