付箋会議システム blog版
付箋アプリのAjax版、完成(ということに)しました。これまでの調査の総集編と考察。
| 未振分の付箋 |
前回のJavaScriptだけの付箋アプリから、Ajaxを使って、サーバサイドへの状態保存(HTTPセッションを使ってます)ができるようになりました。
画面をリロードしても、直前の状態に戻ります。スナップショットを押すと、そのときの状態を保存&再生できます。
セッションではなく、データベースに永続化すれば、みんなでワイワイいじれるようになるはず。もっと画面いっぱいにスペースを使って、ゴミ箱とかもつければ、結構便利だと思いませんか?
※IEとFireFoxでは動くのですが、Operaでは、変になります。そろそろコノ方法に無理が出てきたのでしょうか。。。
作りこみのポイントは、
- 付箋・振分ボックスは、AjaxUpdaterを使って、サーバ経由で生成する。
- 付箋を各ボックスにonDropするタイミングで、draggable、droppableのそれぞれのelement.idをサーバに保存。
- 振分ボックスを移動するとき、draggableのonEndで、draggableの座標をサーバへ保存。
- あとは、セッションに保存した状態を、適宜、HTML再出力しているだけ。位置情報の再生は前回を参照。
若干苦労したのは、ブラウザ上でのインスタンス管理ですが、タイミングを見計らって、ズバっと全削除&再生成する方法を取りました。
インスタンスの全削除のコードは、prototype.jsの拡張で、次のように記述できます。イテレータが使えるんですね!
$A( $('pane').childNodes ).each(
function(node){
node.remove();
}
);
こういうGUIとしてのAjaxやJavaScriptの利用は、意外と簡単だという印象が残りました。なんといってもサーバサイド通信がお手軽。単純にHTTP-GET/POSTするだけですから。ここは、Flashやアプレットにはない魅力だと思います。
きれいに着飾りたければHTMLをいじればいいというのも、ラクです。いろんなコンテンツを簡単に集約できるのは、やっぱりHTMLですね。
比較できるものでもないとは思いますが、コレと全く同じモノをFlashで作ろうと思ったら、私の場合は、もうちょっと時間がかかるかもしれません(慣れの問題かもしれません)。
ただし、Ajaxでこれ以上のことをやろうとすると、苦労することは目に見えています。こういう付箋アプリみたいなものは、要件としては「印刷」や「拡大縮小」「入れ子」なんてのはきっと出てくると思います。そんなこと言われたら、直ぐに限界が見えてきます。
ブラウザの限界は飛躍的に向上しているものの、だからといって、UI要件の見通しが立たないようなプロジェクトでは、利用するのは辛いのではないかと思いました。
開発環境としては、APIがソースコードを読まなければわからないのが、残念です。これからの整備待ち(されるのか)?
全体的に、
無理をするくらいなら、最初からFlashで作ろう!と思います。でも、スクリプト感覚で、自分が必要なツールをササッと作ってしまうには、Ajaxも適した方法だと思いました。
以上、このシリーズは、終了です。自分用の考察ツールがほしいと思って作り始めましたが、一人で考えるなら、やっぱり紙と鉛筆がいいw。

