たたみラボ

  • about
  • member
  • r&d
  • blog
  • tatamicast

blog

RSS

AJAXなスケジュール調整

icon December 26, 2005 10:20 AM by yuugo このエントリーを含むはてなブックマーク

Ajaxをやってみたいというお題でスケジュール調整のツールを作ってみました。

 

http://tatamilab.jp/~yuugo/cgi/cal/callender.html

既にこのスケジュール調整は終わっているので、ご自由に触ってみてください。

特徴

  1. 保存ボタンはなくクリックすると即保存されます
  2. サーバーサイドではテーブル構造を管理せず、UIとデータ構造の両方をJavaScriptで管理しています
  3. prototype.jsを使ってみました
  4. データ形式はXMLではなくJSONというJavaScriptオブジェクトのテキスト形式です

制限事項

  1. win IE でしか動きません
  2. フィールド定義のUIがありません
  3. ロックの管理はしていません
  4. このスケジュール調整のアプリ自体の出来はイマイチ
    • 更新されているかどうかが分かりにくく、心配になってもう一回新規ブラウザで開いて確認したくなる
      →一応ステータスバーに「更新しました」が出てくるようにはしているが、そんなところ誰も見ない
    • 全て都合が悪いのか、未記入なのかの「ステータス」情報の項目を入れ忘れてた

CGIソース(ファイルの書き込みと読み出しだけ)

#! /usr/bin/perl
use strict;

use CGI;
use CGI::Carp qw(fatalsToBrowser);

my $q = CGI->new;

print "Content-type: text/plain\n";
print "Charset: utf-8\n\n";

my $file = "./dat.dat";

#dataという項目が送られている時には保存する
if($q->param("data")){
 open(FH,'>'.$file) or die;
 print FH $q->param("data");
 close(FH);
 print "保存しました";
#それ以外はファイルの内容を返す
}else{
 open(FH,$file) or die;
 my $v = <FH>;
 close(FH);
 print $v;
}

保存されるデータ(さらした場所に置いてます)

[["有家",1,1,0,1],["木村",0,1,1,1],["佐々木",0,0,0,0],["和田",1,0,1,1],["フナミ",1,1,1,1],["斎藤",1,1,1,1],["山本",1,1,1,1],["矢野",1,1,0,1],["大井",0,1,1,1],["石橋",1,1,1,1],["特別ゲスト",0,0,0,0]]

prototype.jsを始めて使ってみて

  • ドキュメントはたしかにない
    • ぐぐったのをちらほら見たレベル
  • prototype.jsのソースはやっぱり読んだ
    • 逆にこれ読むことがいい練習
    • でも使ったのは「Ajax.Request」だけ
  • Objectにextendというプロパティが追加されている
    • 「for xxx in 配列」が使えない(xxxに「extend」が入ってくる)
    • for (var i = 0;i<xxx.length;i++) という記述方法でやるべし
    • 元々、配列だかコレクションだか曖昧なのはこれに限らず多いので、明示的に「for (var i = 0;i<xxx.length;i++)」の記述方法の方がいいかも
  • Ajax.RequestでGETを複数回呼ぶと、全く同じクエリストリングだとキャッシュを見てしまう
    • IEだけの現象かも知れない
    • 理屈の上ではGETはそういうもの
    • 毎回新規のデータが欲しい時にはPOSTを使う
    • GETでダミーのクエリストリングを毎回変えるという手もあるが、それはお行儀が悪い気がする

json.jsを使ってみて

  • 使うメソッドは二つ
  • JSON.stringify
    • JavaScriptのオブジェクトを引数に渡すとJSONの文字列形式に直してくれる
  • JSON.parse
    • JSONの文字列を渡すとJavaScriptオブジェクトに変換してくれる
    • evalでもいいけど、それだとスクリプトを実行される可能性もある
  • XMLよりも好きです
    • ハッシュと配列の区別があるので好き
    • C系のエスケープシーケンスなのでなじみぶかい
    • XMLだと初心者はこんなところで躓く
      • キーダイレクトで取り出したいハッシュ系の構造と繰り返しが存在する配列系の構造の区別がデータ上でやりにくい
      • 改行や空白をが認識されるんだかされないんだかが分かりにくい
      • 例えばタブはどう表現したらいい?
      • DOMの「getElementsByxxx」がうっとおしい
    • XMLHTTPRequestはセキュリティの制限があるらしい(試したことはない)
      • 自ドメインではないところへのリクエストが禁止されるブラウザもある
      • JavaScriptならScriptのsrcで別ドメインのJSONをとってくればいいらしい 

今後の技術的な可能性

  • ロック・フィールド定義のUIを作ればファイルメーカーっぽいサービスはできそう
  • 並び替え・抽出も全てクライアントサイドでやる
    • やってみると意外と速いかも
    • テーブル結合までクライアントサイドでやっちゃうのもあり
  • UNDOのキャッシュもローカルにおいておく
    • ローカルに置くことでサーバーサイドに更新した後も戻せる

COMMENTS

prototype.js といえば、$(myDiv) が function だと気づくのにえらい時間がかかった記憶が・・・
ちなみに、僕が知る限り、一番充実している prototype.js のドキュメントです。
http://www.sergiopereira.com/articles/prototype.js.html

December 26, 2005 12:30 PM by jimbo  

POST COMMENT




(書式を変更するような一部のHTMLタグを使うことができます)

必ず利用規約に同意いただいた上で送信ください。

TRACKBACKS

ページトップへ



(C) RECRUIT MEDIA COMMUNICATIONS CO., LTD.