PHP とjQueryライブラリ「jqPlot」で綺麗なグラフを描画する【9/10】

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

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

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

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

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

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

そういった思想、好み、規約なんかのレベルでフレームワークを考えると、はやり「ビュースクリプトでビジネスロジックを実装するのは“気持ち悪い”からダメ」と言う事になる。当然、俺も気持ち悪い。ただし、「悪」では決してない。

でももしかしたら、俺が気持ち悪いという部分はみんなとは違うかもしれない。

俺は基本的にWebデザイナにサーバサイドなビジネスロジックを考えさせるのはおかしいと思っている。たまにPHPが分かるWebデザイナもいる。そういう時は、ヘルパなどは説明しないでそのまま渡したりしている。

しかしPHP以外にまた別のフォーマットを覚えてもらうというケースが発生する可能性がある。それは、Smartyなどのテンプレートエンジンの存在だ。

PHP自体がテンプレートエンジンのようなものなので、テンプレートエンジンでテンプレートエンジンを動かすのはものすごい抵抗がある。特にCakePHPなどのフレームワークでSmartyを使っているのは、本当にデザイナのためなんだろうか。

実際にSmartyは何度も使っていたけど、SmartyはSmartyという方言を新たに習得する必要がある。
そして処理が嵩むので、当然ネイティブなPHPより遅くなる。ただでさえ遅くなるMVCフレームワークをさらに遅くするのもなんだかよろしさが薄い気がするわけだ。

多少話がそれたが、というわけでビューとコントローラの分離を考慮して実装して見る。CとVがほぼ完全分離という意味で、こういう例もあるという事を紹介したい。

どんなアクションでも、完全にデータが揃うまでビュースクリプトに渡さない、と言うものだ。
前回作ったvoteアクションで実装して見る。

view plain print ?

function vote()
{
if(!emptyempty($this->data)) {
if(!is_numeric($this->data['Quickpoll'])) {
$this->redirect('index');
}
// 該当するレコードの投票数を取得
$selected = $this->Quickpoll->read('voted', $this->data['Quickpoll']);
// 投票数をインクリメント
$voted = ++$selected['Quickpoll']['voted'];
// 投票を反映
$this->Quickpoll->id = $this->data['Quickpoll'];
$this->Quickpoll->saveField('voted', $voted);
}
// quickpollsからデータを取得
$conditions = array(
'fields' => array(
'Quickpoll.options',
'Quickpoll.voted',
),
);
$quickpolls = $this->Quickpoll->find('list', $conditions);
// 投票データを整形する
$data = array();
foreach($quickpolls as $key=>$value) {
$data[] = "['".$key."',".$value."]";
}
// ビューへセット
$this->set('data', join(",", $data));
}

function vote()
  {
    if(!empty($this->data)) {

      if(!is_numeric($this->data['Quickpoll'])) {
        $this->redirect('index');
      }

      // 該当するレコードの投票数を取得
      $selected = $this->Quickpoll->read('voted', $this->data['Quickpoll']);
      // 投票数をインクリメント
      $voted = ++$selected['Quickpoll']['voted'];
      // 投票を反映
      $this->Quickpoll->id = $this->data['Quickpoll'];
      $this->Quickpoll->saveField('voted', $voted);
    }

    // quickpollsからデータを取得
    $conditions = array(
      'fields' => array(
        'Quickpoll.options',
        'Quickpoll.voted',
      ),
    );
    $quickpolls = $this->Quickpoll->find('list', $conditions);

    // 投票データを整形する
    $data = array();
    foreach($quickpolls as $key=>$value) {
      $data[] = "['".$key."',".$value."]";
    }

    // ビューへセット
    $this->set('data', join(",", $data));

  }

何も選択されて無い場合、空のレコードが生成されてしまうので、その処理も追加してある（５～７行目）。この部分はモデルのvalidateで行っても良いだろう。

後は、基本的に１つの変数をdataにセットしているだけだ。前回までは配列をセットし、ビュースクリプト側で反復処理をさせていたが、今回はセットされたデータを表示するのみ、となっている。
そのため、ビュースクリプトも変更しなければならない。

view plain print ?

<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>

<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>

３行目で$dataを表示しているだけになった。これなら分かりやすい。

この程度の処理なら、たいした問題では無いが、たとえば複数のテーブルからログを採取し、整形して出力するような場合、コントローラ側でのファットな実装が重さの原因となるだろう。

さらに細かくみて見ると、voteアクションではセットする変数を直前で整形しているが、ここにビューの要素が出てきてしまっている。

view plain print ?

$data[] = "['".$key."',".$value."]";

$data[] = "['".$key."',".$value."]";

この部分だ。これは思いっきりビューだ。Vからビジネスロジックは排除できたが、CにVが入ってしまうのは宜しく無い。

幸いにもPHPには（PHP5.2からデフォルトで使用可能）連想配列をJSON形式にしてくれるPECLモジュールがあるので、それでdataをコントローラ側で作ってしまっても良い。ただし、そこまでやるのは今回の趣旨から大きく外れすぎるので、とっとと次へ進む事にする。

さて、いろいろ突っ込みどころがあるスクリプトだが、最低限のロジックだけは入れておこう。
現状、voteアクションが実行された際、voteビューが表示されるわけだが、このページは実はリロードで投票することが可能になっている。仮に「フォビドゥン」を選択した状態で投票し、voteビューでリロードすると、「フォビドゥン」へ2回投票したことになってしまう。これはマズい。

重複投稿を避ける一番簡単な方法がある。該当するアクションに対して、自分自身へリダイレクトする方法だ。アクションの最後に以下のコードを追記してみよう。

view plain print ?

$this->redirect('vote');

$this->redirect('vote');

これで、投票結果ページをリロードしても、追加で投票はされなくなる。ただし、アクション内が

投票された場合の処理
投票に関係なく必ず実行される処理

という処理がないと動かないので注意。リダイレクトした場合、2だけが実行されるからだ。

投票された場合、1＞2の順で実行される。1は自分自身へリダイレクトし、リダイレクトした際には投票はされていないので、自動的に1が無視され（この時点で重複登録の回避になっている）、2が実行されて結果だけが表示される、という流れだ。

このような実装にしておくと、たとえば投票画面で「結果を見る」リンクを静的に設置しておいても、問題なく動くようになる。

この状態でのvoteアクション全体のソースコードは以下のようになる。

view plain print ?

function vote()
{
if(!emptyempty($this->data)) {
if(!is_numeric($this->data['Quickpoll'])) {
$this->redirect('index');
}
// 該当するレコードの投票数を取得
$selected = $this->Quickpoll->read('voted', $this->data['Quickpoll']);
// 投票数をインクリメント
$voted = ++$selected['Quickpoll']['voted'];
// 投票を反映
$this->Quickpoll->id = $this->data['Quickpoll'];
$this->Quickpoll->saveField('voted', $voted);
// 重複投稿の回避
$this->redirect('vote');
}
// quickpollsからデータを取得
$conditions = array(
'fields' => array(
'Quickpoll.options',
'Quickpoll.voted',
),
);
$quickpolls = $this->Quickpoll->find('list', $conditions);
// 投票データを整形する
$data = array();
foreach($quickpolls as $key=>$value) {
$data[] = "['".$key."',".$value."]";
}
// ビューへセット
$this->set('data', join(",", $data));
}

function vote()
  {
    if(!empty($this->data)) {

      if(!is_numeric($this->data['Quickpoll'])) {
        $this->redirect('index');
      }

      // 該当するレコードの投票数を取得
      $selected = $this->Quickpoll->read('voted', $this->data['Quickpoll']);
      // 投票数をインクリメント
      $voted = ++$selected['Quickpoll']['voted'];
      // 投票を反映
      $this->Quickpoll->id = $this->data['Quickpoll'];
      $this->Quickpoll->saveField('voted', $voted);

      // 重複投稿の回避
      $this->redirect('vote');
    }

    // quickpollsからデータを取得
    $conditions = array(
      'fields' => array(
        'Quickpoll.options',
        'Quickpoll.voted',
      ),
    );
    $quickpolls = $this->Quickpoll->find('list', $conditions);

    // 投票データを整形する
    $data = array();
    foreach($quickpolls as $key=>$value) {
      $data[] = "['".$key."',".$value."]";
    }

    // ビューへセット
    $this->set('data', join(",", $data));

  }

これで、わざわざ

登録処理アクション（ビュー未使用）
結果表示アクション（ビュー使用）

なんていうアクションを書かないで済むわけだ。CakePHPを俺流に料理してみた結果、このやり方が一番スマートな気がする。

現在までの各ファイルのソースコードはこちら。

[app/controllers/quickpolls_controller.php]

view plain print ?

class QuickpollsController extends AppController {
var $name='Quickpolls';
var $helpers = array('Html', 'Javascript');
function beforeFilter()
{
$this->layout = 'jqplot';
}
function index()
{
$conditions = array(
'fields' => array(
'Quickpoll.id',
'Quickpoll.options',
),
);
$this->set('quickpolls', $this->Quickpoll->find('list', $conditions));
}
function vote()
{
if(!emptyempty($this->data)) {
if(!is_numeric($this->data['Quickpoll'])) {
$this->redirect('index');
}
$selected = $this->Quickpoll->read('voted', $this->data['Quickpoll']);
$voted = ++$selected['Quickpoll']['voted'];
$this->Quickpoll->id = $this->data['Quickpoll'];
$this->Quickpoll->saveField('voted', $voted);
$this->redirect('vote');
}
$conditions = array(
'fields' => array(
'Quickpoll.options',
'Quickpoll.voted',
),
);
$quickpolls = $this->Quickpoll->find('list', $conditions);
$data = array();
foreach($quickpolls as $key=>$value) {
$data[] = "['".$key."',".$value."]";
}
$this->set('data', join(",", $data));
}
}

class QuickpollsController extends AppController {

  var $name='Quickpolls';
  var $helpers = array('Html', 'Javascript');

  function beforeFilter()
  {
    $this->layout = 'jqplot';
  }

  function index()
  {
    $conditions = array(
      'fields' => array(
        'Quickpoll.id',
        'Quickpoll.options',
      ),
    );
    $this->set('quickpolls', $this->Quickpoll->find('list', $conditions));
  }

  function vote()
  {
    if(!empty($this->data)) {

      if(!is_numeric($this->data['Quickpoll'])) {
        $this->redirect('index');
      }

      $selected = $this->Quickpoll->read('voted', $this->data['Quickpoll']);
      $voted = ++$selected['Quickpoll']['voted'];
      $this->Quickpoll->id = $this->data['Quickpoll'];
      $this->Quickpoll->saveField('voted', $voted);
      $this->redirect('vote');
    }
    $conditions = array(
      'fields' => array(
        'Quickpoll.options',
        'Quickpoll.voted',
      ),
    );
    $quickpolls = $this->Quickpoll->find('list', $conditions);

    $data = array();
    foreach($quickpolls as $key=>$value) {
      $data[] = "['".$key."',".$value."]";
    }
    $this->set('data', join(",", $data));

  }
}

※コメントなどは削除済み

[app/models/quickpoll.php]

view plain print ?

class Quickpoll extends AppModel {
var $name = 'Quickpoll';
}

class Quickpoll extends AppModel {
  var $name = 'Quickpoll';
}

※バリデーションは消しておいた

[app/views/quickpolls/index.ctp]

view plain print ?

<?php echo $form->create('Quickpoll', array(
'url' => array(
'controller' => 'quickpolls',
'action' => 'vote',
)));?>
<?php echo $form->input('Quickpoll',array(
'type' => 'radio',
'options' => $quickpolls,
'legend' => false,
'div' => false,
'separator' => '
',
'value' => null,
)
);?>
<?php echo $form->end('Vote');?>

<?php echo $form->create('Quickpoll', array(
  'url' => array(
    'controller' => 'quickpolls',
    'action' => 'vote',
)));?>
<?php echo $form->input('Quickpoll',array(
  'type' => 'radio',
  'options' => $quickpolls,
  'legend' => false,
  'div' => false,
  'separator' => '<br />',
  'value' => null,
  )
);?>
<?php echo $form->end('Vote');?>

[app/views/quickpolls/vote.ctp]

view plain print ?

<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>

<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>

[app/views/layouts/jqplot.ctp]

view plain print ?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>CakePHP jqPlot Test</title>
<?php echo $html->css('jquery.jqplot.min'); ?>
<?php echo $javascript->link('jquery-1.3.2.min'); ?>
<?php echo $javascript->link('jquery.jqplot.min'); ?>
<?php echo $javascript->link('plugins/jqplot.categoryAxisRenderer.min'); ?>
<?php echo $javascript->link('plugins/jqplot.canvasTextRenderer.min'); ?>
<?php echo $javascript->link('plugins/jqplot.canvasAxisTickRenderer.min'); ?>
<?php echo $javascript->link('plugins/jqplot.barRenderer.min'); ?>
</head>
<body>
<h1>CakePHP jqPlot Test</h1>
<div>
<?php echo $content_for_layout; ?>
</div>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>CakePHP jqPlot Test</title>
<?php echo $html->css('jquery.jqplot.min'); ?>
<!--[if IE]><?php echo $javascript->link('excanvas.min'); ?><![endif]-->
<?php echo $javascript->link('jquery-1.3.2.min'); ?>
<?php echo $javascript->link('jquery.jqplot.min'); ?>
<?php echo $javascript->link('plugins/jqplot.categoryAxisRenderer.min'); ?>
<?php echo $javascript->link('plugins/jqplot.canvasTextRenderer.min'); ?>
<?php echo $javascript->link('plugins/jqplot.canvasAxisTickRenderer.min'); ?>
<?php echo $javascript->link('plugins/jqplot.barRenderer.min'); ?>

</head>
<body>

<h1>CakePHP jqPlot Test</h1>
<div>
<?php echo $content_for_layout; ?>
</div>

</body>
</html>

次回はvoteビューに記述されたjqPlotの説明をする。

まだつづく。