さて、Nodejsだよ。時代は10年前からJavaScriptだ。

Googleのおっさんおばさん、原理主義のクソガキたちが、それをすでに証明してるじゃないか。

もうPHPとかRubyとかどうでもいいわ（言い過ぎ）！！！

というわけでNodejsなわけである。

なんでNodejs？って思うかもしれないけど、それは各位おのおの方それぞれが勝手に無断で無許可に無節操に想像しておけば良い話で、特別俺が何か言い訳をするなんてナンセンスな事はしないよ。

CakePHPのバリデーションは非常に便利だ。1.1時代はかなりショボすぎる感があったけど、1.2になって、直感的にかなり分かりやすいものになった。

具体的に例を出すと、例えばメールフォームがあたっとして、内訳が

• 件名：subject
• 宛先：to
• 本文：body

があったとする。
それらにバリデーションを入れる場合、例えば件名は空禁止、toはemail形式、本文は最低5文字（実際には5バイト）入力するのを強制する場合は、以下のような内容でモデルを設定することになる。

class Mail extends AppModel {
  public $name = 'Mail';
  public $validate = array(
    // 件名のバリデーション
    'subject' => array(
      // 空入力
      array(
        'rule' => array('notEmpty'),
        'message' => '件名を入力してください',
        'last' => true,
        'required' => true,
      ),
    ),
    // 宛先のバリデーション
    'to' => array(
      // email形式
      array(
        'rule' => array('email'),
        'message' => '正しいメールアドレスを入力してください',
        'last' => true,
        'required' => true,
      ),
    ),
    // 本文のバリデーション
    'body' => array(
      // 入力文字数
      array(
        'rule' => array('minLength', 5),
        'message' => '最低5バイトは入力してください',
        'last' => true,
        'required' => true,
      ),
    ),
  );

記事を書いた後CakePHP武将のecworks_masap氏に言われて気がついたんだけど、1点注意！「5バイト」なんて文字は運用では使わない。ユーザに対して「バイト」なんて単位を書くのはおかしいからだ。しかしここではあくまで例として（minLengthを使ったため）コードとの整合性を重視し、あえて「5バイト」と書いてみた。

各フィールド名の中には複数の条件を入れることができる。そしてそれらの条件1個1個に名前を付けることもできるが、今回は1つのフィールドに1個しか条件を入れてないので、特に名前は付けていない。

だから、'subject' => array()の中にいきなりarray()で条件をかいている。

各条件のコメント分にも書いてあるような内容を名前にしておくとあとで便利になる場合がある。もしくは厳密に名前を独自に付けることによるコントローラ側でのバリデーション判別などする場合も便利になる。具体的には以下のように、いきなり
array()ではなく、名前を指定してarray()を代入する。
'subject' => array( 'empty_case' => array( 'rule' => ・・・・・・ 'required'=> true));

どうしてもCakePHP内のビューやコントローラ内で、php自体によってHTMLタグを生成したいという人以外は、可能な限り以下の方法をとると、寝覚めが良いはずだ。

• HTMLタグには極力アトリビュートを付けない
• 付けるのは少しのIDといくつかのclass程度
• 当然TABLEタグでレイアウトなんぞは組まない

 どういう事かというと、吐出されたHTMLタグまでをphpで制御しようというのはおかしいと思っているから、そういう完全に見た目という意味でのビューは、jQueryなどのクライアントサイドスクリプトでやっちまえばいいだろう。

こういう考えで開発していくと、CakePHPのFormヘルパーが吐き出す、そっけなく簡素で女々しいHTMLタグも、むしろそれでいてくれてありがとうと思えるほど便利になる。

さて、俺が何を言いたいのか、わかっていただけてるかな。


「CakePHPのFormヘルパーで出力されたラジオボタンを整列したい」という問に対してphpでHTMLタグを出力させ、cssなどで整形するという解決

これ、完全に、デザイナの領域なのに、開発側で対応しようというのがそもそもの間違いであり、こういった作業は往々にして大した結果に至らない。要するに解決にならない場合が多いのではないだろうか。

とにかく、無理矢理が良くない、ということを言いたい。

CakePHPはほぼphpで書かれたMVCだけど、Vから先のことはこう考えるとよいだろう。

JavaScriptで、HTML（DOM）とCSSをコントロールする

だ。俺が言いたいことがわかっていただけたかな。

CakePHPのMVCよろしく、jQueryをコントローラとし、DOMで拾う内容をモデルとし、それらを吐き出すためにcss、場合によってはHTMLで整形してビューとする、というような流れを考えたほうが良い。

このほうが何しろソースは綺麗になるわ、サーバの負荷分散にもなるわ、デザイナのスキルアップにもなるわ、開発者の手間も省けるわ、で、いいことずくめだ。どうしてやらない？と俺は聞きたい。

ちなみにこの方法が実現できない様な糞ブラウザ（IE）を上司から要求されたら、そいつにこう言ってあげるとよいだろう。

「おや？部長、口からクソがはみ出てますよ？」

と。


というわけで、前置きが長くなったけど、CakePHPで素直に出力したcheckboxを、DOM操作で整列させるjQueryプラグインを作ったので披露してみたい。

CakePHP側では以下のようなビューを使用することとする。

echo $form->input('hobbies', array(
      'type' => 'select',
      'multiple' => 'checkbox',
      'options' => $masters['hobby'],
      'div' => true,
      'label' => false,
    ))

$masters['hobby']には、find('list')などして生成したマスタデータが入っている。

そしてこのビューを素直に表示させたときのサンプルがこうだ。

 まぁこんな感じだよな。当然縦に長くなる。

正直いって、生粋の開発者として長年生きてる人にとっては、この時点でこれ以上いじるのはやめたほうが良い。ろくなことがない。デザイナがやりにくくなるだけだ。2列にしてと言われても、開発者はやっちゃだめだ。

今回で「PHP とjQueryライブラリ「jqPlot」で綺麗なグラフを描画する」シリーズは最終回にしたおきたい。
というわけで、vote.ctpの説明をする。

現状のvote.ctpは以下のようになっているはずだ。

[/app/views/quickpolls/vote.ctp]

<div id="graph" style="width:600px;height:300px;margin:30px;"></div>
<script type="text/javascript">
  var data = [<?php echo $data;?>];
  plot = $.jqplot('graph', [data], {
    title: 'モビルスーツ人気投票',
    series:[{renderer:$.jqplot.BarRenderer}],
    axes: {
      xaxis: {
        renderer: $.jqplot.CategoryAxisRenderer,
        tickRenderer: $.jqplot.CanvasAxisTickRenderer,
        tickOptions: {
          enableFontSupport: true,
          angle: -30
        }
      }
    }
  });
</script>

読みこんでいるプラグインは以下になる。

プラグイン名	説明
jqplot.barRenderer.min.js	棒グラフを描画するのに必須
jqplot.categoryAxisRenderer.min.js	カテゴリを反映させるために必須
jqplot.canvasAxisTickRenderer.min.js	tickの表示や角度を付ける場合に必須

ビュースクリプトでビジネスロジックを書いてしまうと言うのがどうしてダメなのか、もしくはどうして気持ちが悪いのか、というのを考えて見よう。

そもそもPHP君からしてみれば、動かしているPHPファイルがMだろうがVだろうがCだろうが、全く関係ない。もっとプリミティブな階層で動かしているので、そんな話は全く理解してないはず。

しかし、人間から見た場合、情報を扱うレイヤ、表示するレイヤ、それらを管理するレイヤという風に分けた方が、脳みそが分かりやすいからだ。

なので、只の思想と言うことになる。只の思想を実装に代えた物がMVCフレームワークだ。だからビュースクリプトにビジネスロジックを書くことに対しては、極端な話、只の個人の好き嫌いと言う事になる。

それを、「MVCフレームワークだから当然Cでビジネスロジックを実装し、Vは表示のみだろう」という話に持って言ってもし様が無いわけで、正直、全く理由になってはいない。何しろ只の好みの問題なのだから。

とはいえ、せっかく人間が作ったこれらの思想、CakePHPで言うところの規約にも当てはまるが、自ら破るのもなんだか後味が悪いし、どうせ複雑なものであるならば、最初は正攻法で攻めて見たいと思うのは多くの人がそう思っても否定出来ないと思う。

CakePHPを使用して、jqPlotの表示テストを行う。
用意するものは当然としてCakePHPだ。バージョンは安定している1.2を使う。
プラットフォームはLinuxだが、XAMPPなどを使用している人は適宜自分の環境に合わせて構築していただこう。XAMPPは止むを得ない場合以外は使ってないので良く分からんのだ。

CakePHPをダウンロード後展開し、最低限の設定が終わっていることを前提とする。そしてアクセスする際のURLは

http://example.com/cake_test/

とする。

ドキュメントルート内の「/cake_test」を仮想的なドキュメントルートにしたいので、CakePHPにそれを教えておかないとマズい事になる。どういうことかと言うと、CSSやJavaScript、画像などの絶対パスがおかしくなる。/imgなどとすると、/cake_test/imgではなく、/imgを見てしまうからだ。これはmod_rewrite側で指定するのが楽だ。
各「.htaccess」にRewriteBaseを記述しておく必要があるので、以下の様に編集しておく。

変更ファイル	追記内容
/cake_test/.htaccess	RewriteBase /cake_test
/cake_test/app/.htaccess	RewriteBase /cake_test/app
/cake_test/app/webroot/.htaccess	RewriteBase /cake_test/app/webroot

これで絶対パスが正しく認識されるようになる。mod_rewrite便利すぎ。

次にデータベースだ。データベース名はjqplotとして作る。

create database `cake_test` default character set utf8 collate utf8_general_ci;

さて、jqPlotの大まかな概要と実装方法が分かったことで、これを実用させてみようと思う。
使うフレームワークはCakePHPだ。よって、言語はPHPと言う事になる。

実際に作業に入る前に、俺の考えを少しだけ、説明したいと思う。

以前までWebアプリはPerl（当時はバージョン4）で開発していたが、CGIという仕組み上、どうしても納得行くレスポンスが取れず、デバグもやりにくかった。しかしPHP（当時はバージョン3）が登場し、一気にPHPでの開発にシフトした俺だが、今ではむしろフレームワークを使うことによる余計なプロセスが、個人的にPerlをやっていた時代よりWebサーバに負担をかけているのを自覚し始めている。
※1個のクエリで済むところを、20個ほどのクエリが走っているときもある

要するにフレームワークは開発者のエゴでしかないわけだ。

• O/Rマッピングで多様なDBと接続！
• ビジネスロジックとビューの完全分離！

などなど。

個人的には時代を考慮した結果、人間にタスクが割り当てられない状態で開発するのが良いと考え、プロシージャルじゃなければなんでもいいわけだ。しかしそれがフレームワークと直結しているとは思っていない。

これに関しては、ゲーム開発を経験したことがある人はご理解いただけると思う。
メモリの使い方に関する思想など、正直、ゲーム開発とWeb開発は正反対といってよい。Webはメモリをじゃぶじゃぶ使いすぎる。さらにApacheの勉強が足りない人が意外に大勢いることが分かった（もちろん俺だって勉強中だ）。

今回は円グラフを描画させてみようと思う。
基本的にはPieレンダラープラグインを読み込み、それをレンダラーに指定すればOKなはずだ。
早速いってみよう。

まずは円グラフのプラグインであるPieRendererを読み込む。headタグ内を以下のように編集する。

<!--[if IE]><script language="javascript" type="text/javascript" src="excanvas.min.js"></script><![endif]-->
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.jqplot.min.js"></script>
<script type="text/javascript" src="plugins/jqplot.pieRenderer.min.js"></script>

これで円グラフを描画させる準備が整った。

次にデータを指定してみようと思う。
円グラフだからといって、データの合計が100になっている必要はない。好きなパラメータを好きなだけ指定することが出来るので、とりあえず以下のように設定してみた。

$(document).ready(function(){
  var data1 = [5,1,6,5,7,3];
  plot = $.jqplot('graph', [data1]);
});

それから円グラフなので、描画領域を正方形に変更してみた。
後で凡例を表示させるなど、編集をする場合、適宜サイズを調整しておこう。

<body>

<h1>jqPlot Test 3</h1>
<div id="graph" style="width:400px;height:400px;margin:30px;"></div>

</body>

このままではまだ折れ線グラフのままだ。
plotオブジェクトにrendererプロパティを設定し、PieRendererプラグインで描画させてみよう。
今回は全体設定であるseriesDefaultsプロパティを使ってみた。

plot = $.jqplot('graph', [data1],{
    seriesDefaults:{
      renderer:$.jqplot.PieRenderer
    }
  });

さて、これだけで画面に円グラフが表示されたと思うが、いかがだろうか。

さて、折れ線グラフのデータを元に、まずは棒グラフを作成してみよう。
最初にほぼプレーンな折れ線グラフを描画してみる。分かりやすいように、読み込むライブラリは最低限にしておく。

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.jqplot.min.js"></script>

データなどの定義はこのようにしてみた。

$(document).ready(function(){
  var data1 = [8,5,7,6,9,12,5,1,2,4,3,7,1,2,1,3,4,6,9];
  plot = $.jqplot('graph', [data1]);
});

少々x軸方向へのデータが多いので、HTMLで作成した描画エリアも多少サイズを変更しておいた。

<h1>jqPlot Test 2</h1>
<div id="graph" style="width:600px;height:200px;margin:30px;"></div>

これをブラウザで表示させると、以下のようになった。

これを折れ線グラフから、棒グラフへ変更してみる。
デフォルトでは折れ線だが、そのほかの形式へ変更するには、都度プラグインを読み込む必要がありそうだ。棒グラフの場合、barRendererプラグインになる。

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.jqplot.min.js"></script>
<script type="text/javascript" src="plugins/jqplot.barRenderer.min.js"></script>

これで棒グラフを描画する準備が整った。
次に、plotに対して例によってオプションを指定しよう。グラフ全体に関わるデフォルト値として、seriesDefaultというプロパティが用意されているので、早速追記しておく。

plot = $.jqplot('graph', [data1], {
    seriesDefaults: {
    }
  });

さて、このseriesDefaultに何を指定するのか、だ。このままでは折れ線グラフは棒グラフにはならない。よって、グラフの形態を変更するためのrendererプロパティをまずは記述しようじゃないか。

plot = $.jqplot('graph', [data1], {
    seriesDefaults: {
      renderer:$.jqplot.BarRenderer
    }
  });

これで棒グラフが描画されるはずだ。早速ブラウザで見てみる。

棒グラフにはなったはなったが、なんじゃこれは。使い物になるレベルではない。これではよろしさが皆無である。

さて、次にインタフェースの挙動をカスタマイズしてみよう。
まずは、グラフのデータのポインタにマウスオーバーすると、ツールチップを表示するようにして見る。
これにはhighlighterというプラグインが必要になる。
まずは読みこんでみる。headerタグ内に以下を追記する。

<script type="text/javascript" src="plugins/jqplot.highlighter.min.js"></script>

これでツールチップを表示するハイライト機能が読みこまれた。
次に、ハイライト機能を実際に記述してみよう。
highlighterプロパティに、ツールチップの位置、フォーマットなどが指定可能だ。

plot = $.jqplot('graph', [data1, data2], {
    title:'会員サイト アクセス数',
    legend:{
      show:true,
      location: 'nw',
      yoffset: 6
    },
    series:[
      {label:'メンバー'},
      {label:'ビジター'}
    ],
    axes: {
      xaxis:{
        renderer: $.jqplot.DateAxisRenderer,
        min:'2010/01/01',
        max:'2010-01-04',
        numberTicks: 4,
        label: '過去7日分'
      },
      yaxis:{
        min:0,
        max:12,
        label:'アクセス数'
      }
    },
    highlighter: {
      tooltipLocation: 'n',
      tooltipFormatstring: '<strong>%d</strong>'
    }
  });

この状態でブラウザでグラフを表示させ、データのポインタにマウスを当ててみよう。
ツールチップがフェードインして表示されるようになった。

さて、次はグラフに凡例を表示させてみよう。その前に、jqPlot付属のCSSを適用させておく。これできれいに凡例が表示できるようになる。

もっとも、最初からCSSを読み込んでおけば問題はないが、今回は流れ的にこの時点でCSSを実装することにした。
というわけで、headタグ内を以下のように編集してみた。

<title>jqPlot テスト</title>
<link rel="stylesheet" type="text/css" href="jquery.jqplot.css" />
・・・

これできれいなデザインでグラフを描画できるようになる。FireFoxとIEで描画の差がほとんど無くなるので、以後はFireFox 3.5のキャプチャを使用することにする。

さて、このグラフの左上に、「アクセス数」などの凡例を表示させて見る。ただ、データが1個だと凡例も1個になり、少々さびしいので、まずはデータを2個に増やすことにした。

さて、前回はグラフの表示オプションは一切指定せず、デフォルト状態で表示してみた。
これはこれでキレイなグラフだが、いろいろ足りないことがある。ざっとあげると、

• 軸の数値が半端
• 凡例が無い
• 棒グラフなどの別の形式も使用したい

などがあるとおもう。
まずは横軸の数値を、日付に変更してみよう。

日付をティッカーとして表示するには、面倒だがプラグインを読みこまないといけない。このjqPlotは、基本機能以外はほぼすべてプラグインとして実装する形式なので、scriptタグをたくさん記述する羽目になる。まぁjQueryを使う時点であきらめなければいけない要素でもあるのだが、素直に実装してみよう。

まず、plugins/jqplot.dateAxisRenderer.min.jsを読みこむように、headタグ内にscriptタグを追記する。必ず、jquery.jqplot.jsもしくはjquery.jqplot.min.jsの後に読みこむように記述する事。

<!--[if IE]><script language="javascript" type="text/javascript" src="excanvas.min.js"></script><![endif]-->
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.jqplot.min.js"></script>
<script type="text/javascript" src="plugins/jqplot.dateAxisRenderer.min.js"></script>

これで準備が整った。
次に、jqplotメソッドの3番目の引数として、JSON形式で各種プロパティを設定して行く。プロパティは、axesという名前が付いている。これは軸、つまり英語で言うところのaxisの複数形だ。axes内にx座標の軸、y座標の軸を設定する事が出来るようになっている。

Webサイト上にグラフを表示させたいとき、最初に思いつくのがpChartだ。PHPのグラフライブラリで、非常にカスタマイズ性に優れている。ストリームでグラフ画像を出力することも出来る。

他にはFlashベースでXMLを読み込んで表示させる方法もあるが、今のところフリーで使えるFlashグラフはあまり良いものを見つけられてない。

今回、今まで手を出してなかったJavaScriptによるグラフ描画を試してみようと思う。
個人的にjQueryを多用するので、jQuery専用のグラフライブラリ「jqPlot」を使用してみる。

jqPlotは大前提として、

• jQuery
• excanvas

の使用が必須になっている。
jQueryはいわずと知れたJavaScriptの超汎用ライブラリだが、excanvasはIE向けにcanvas機能を実現する、いわばCANVASハックなライブラリだ。