見渡すにはいい感じの本だった。

Ajaxデザインパターン ―ユーザビリティと開発効率の向上のために
Michael Mahemoff
オライリー・ジャパン / 5040円 ( 2007-05-15 )

Ajaxというよりは、ユーザビリティのデザインパターン的。それをAjaxで実装するためのヒントみたいな。

後半テストとかデバッグとかの話だけどここらへんはだれちゃった。

UI指向だったらflex2とかいうアプローチもあるけど。

MochiKitのチャート描画ライブラリであるPlotKitでヒストグラムを描かせてみた。

del.icio.us - Mochikit

ちょっとした折れ線チャートとかヒストグラム、パイチャートの類はPlotKit使うと便利そう(javascriptだけでできるし)。

Ajaxで試したかったので、わざわざJSON形式でファイルを別に作成しておいて、非同期で読み込ませるようにした(data.json)。

{
  "name" : "sqrt",
  "value" : [[0, 0.3],[1, 1], [2, 1.414], [3, 1.73], [4, 2]]
}

スクリプトはこんな感じで結構短い。

  function plot_async() {
    var url = 'data.json';
    var d = loadJSONDoc(url);
    var gotData = function (data) {
    var layout = new Layout("bar");
      layout.addDataset(data.name, data.value);
      layout.evaluate();

    var chart = new SweetCanvasRenderer($("chart"), layout);
    chart.render();  
    };
    var dataFetchFailed = function (err) {
      alert("data not found");
    };
    d.addCallbacks(gotData, dataFetchFailed);
  }

これで割と綺麗なグラフが作成される。

デモも置いておく。

フレームワークに組み込めば、お手軽にチャートが作成できそうな感じだ。

Lightbox JSを触ってみた。やっぱいい感じ。でも右下にcloseのアイコンとか出るはずなのに出なかったりするのは、cssの設定が悪いのかな。

lightbox用に小さい画像と、大きい画像（クリックしたときに表示される画像）の二つを用意しないといけないが、この作業を、いちち手でやるのは面倒だということで、windowsでperlスクリプトを ドラッグドロップ化したのでお手軽になった。でもユッキー様をあやしながら書いたのでスクリプトはやっつけ。名前考えるのが面倒というありがちな理由で、とりあえずプロセス番号がファイル名で且つCドライブに吐き出すようにしておいた。

use strict;
use Image::Magick;

### image size
my $width = 480;
my $height = 360;
my $width_small = 160;
my $height_small = 120;

my $imgfile = shift or die "couldn't read ImageFile\n"; 
$imgfile =~ /\\(\w+).(jpg|JPG)$/;
my $filename = $1;

### output
#my $output = "C:/" . $filename .".jpg";
#my $output_small = "C:/" . $filename ."_small.jpg";
my $output = "C:/".$$.".jpg";
my $output_small = "C:/".$$."_small.jpg";

my $image = Image::Magick->new;
$image->Read($imgfile);
$image->Resize(width=>$width, height=>$height, blur=>0.8);
$image->Set(quality=>60);
$image->Write($output);

$image->Resize(width=>$width_small, height=>$height_small);
$image->Write($output_small);

undef $image;
exit;

ちなみに、Image::Magickモジュールのインストールは楽だった。imagemagickをインストールする際に「perlでモジュールとして使う」にチェックを入れるだけ。

実際は、もうちょっとちゃんと書いて、サーバーにftpしつつ、アップロードした画像をlightboxで扱うためのhtmlを吐き出すコードまで書いておけば申し分ないな。

いつも使っている画像アップロード用CGIをいじるという選択肢もあったんだけど、ドロップレット風味で実用っぽいものをひとつくらい作ってみたかったので今回はWindowsプログラミング。

他には実際にやってみて思ったのは、縮小画像を載せるんじゃなくて画像を切り取りつつ、小さくしたものをアイコン的に表示させておくほうがいいなと思った。単なる拡大縮小じゃつまらん。とか考えると、gimp使ったほうがいいのか？

いやいや、これを敢えてCGI+javascriptでやるべきでしょう

みたいな禅問答のはじまりだ。手段が目的化しつつあることにはうすうす気付いているけどネ。

AjaxによるRESTへの影響は勉強になることが多かった。特にRESTのあたり。