思いの外長くなってしまったJavaScriptの基本的な話しだけど、もう少しで終わる予定なので、Node.jsやりたくて死にそうに焦ってる君には悪いが、少しの間お付き合い願いたい。


嫌ならあっち行け。


というわけで、関数に関してもう少し基礎をおさらいしていこうと思う。


おさらいだけで終わらないように祈っていてもらえると嬉しいかもね。

さてさて、JavaScriptの基礎を続けてやっていこうと思う。

なんでNode.jsの記事なのにJavaScriptの基礎から説明するの？って思うかもしれない。

恐らく多くの人が同じように疑問を持っていることだろう。

だがしかし！！そんなどうでもいい疑問は犬が食えばいい。俺はそんな面倒くさい質問に答えたくない。

多くのブログが、『こうやったらこうなった』しか書かない、ただのノイズ記事ばっかりなことに対し、俺は『こうやったらこうなったのはこうだから』までは書きたいと思ってる。

そして『そもそも何のためにそんなことするの？』ってのも、ある程度、そう、示唆する段階でいいので、念の為に書いておきたいとは思ってる。当然そこには基礎が含まれるわけだ。

というわけで、面倒くさいけど答えてみた。

もういいよ、行ってみよう。

なんていうか、また自分のブログの存在を忘れてて、ついつい更新が滞ってしまったようだ。

恐らくそういった要素をみんなが期待してると思うので特に悪いとか思ってないのでさっさと続けよう。

さぁ、NodeJSだ。

ところで記述の話になるけど、Node.jsなのか、nodejsなのか、NodeJSなのか、よくわかってないんだけど、一体全体どういう書き方をすればいいのか？

Node.jsだけじゃなくてAngular.JSとかもそうだよね。というわけで公式サイト見てみた。

node.js

Node.jsが正解らしい。でもページタイトルは『Node.js』じゃなくて『node.js』になってるんだよなぁ。
まぁいけどさ。一応、記事のタイトル書きなおした。

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

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

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

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

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

残念なお知らせだ。

Yiiの記事を書いてからというもの、著しくアクセス数が落ちたことと、まるで読まれていないことと、業務でYii使ってたけど部署異動でやらなくなるし、それにモチベーション的にどうでも良くなったので、この連載は一時停止するよ。

以前、MySQLで正しくランキングを作る記事と、i18nをちゃんとやる記事を途中まで書いてたんだけど、今のところ再開の見込みはゼロ。やっぱり飽きちゃったというか、今それどころじゃないよね、という体。

今回のYiiに関してはもしかしたら再開する可能性がある。なので中止じゃないんだ。あくまで『もしかしたら再開』するかもしれないレベル。でも恐らく二度とやらない気もする。

連載の途中だけど、ファンキーなネタが転がりこんできたので、一発記事を書くことにしたよ。

Google Web Designerというのは、HTML5、CSS3、JavaScriptのオーサリングツールだ。まだベータ版だけど、面白そうなのでインストールしてみたよ。

詳しくはここを読んでもらえればわかると思う。

Google Web Designer

一部では『AdobeとWebデザイナをGoogleが殺しに来た！』なんて言われてるらしいよ。

まぁAdobeのアプリってそもそもバカ高いし、Creative Cloudも体験版ほとんどインストールしてひと通りいじってみた感じ、悪くはないんだけど、相変わらず動作がもっさりしてて、いじってて全然楽しくないんだよね。楽しくないのにクリエイティブな作業するのって苦痛だし、ちょっと俺はできないなぁ。

それからWebデザイナというより、むしろフロントエンドエンジニアを殺しに来たんじゃないかって感じもしないでもない。ま、俺としては別にどっちでもいいんだけどね！！！

というわけで、早速ダウンロードしてインストールしてみたのでレビューするよ。

どうしても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ハックなライブラリだ。