技術の犬小屋

Webプログラミングを餌に生きる犬のメモ帳

Posts in the CakePHP category

仕事でjQueryのグラフ描画に特化したプラグイン”jqplot”を使ったので、使い方を備忘録として書き留めておく。
環境としてはCakePHP2.2.2にjqplot1.0.4とjqplotに付属してきたjQueryを組み込んで使用した。
 
CakePHP2.xへの組み込み方としては、至極簡単な説明になってしまうが、jsフォルダ以下にjQueryとjqplotを配置し、Viewで以下のように読み込めば良い。

<?php echo $this->Html->script('jquery'); ?>
<?php echo $this->Html->script('jquery.jqplot'); ?>

 
jqplotはjQueryのプラグインという位置付けなので、使用する為にはjQuery本体の準備が必要である。
 

グラフを描いてみる

積み上げ棒グラフを描いてみた。これは、ゲームの継続率の詳細を表すと仮定した内容のグラフである。
棒グラフの上に継続率、棒グラフの色が継続率の分布、棒グラフの下に日付、折線が登録者数を表している。
積み上げ棒グラフ
 
以下、CakePHPに組み込んだ際のコードになる。分かり辛くなるのを避ける為に動的なコードは静的なものに置き換えてある。冒頭のjsファイルとcssの読み込みのパスさえ合っていれば、そのままコピペして使用可能である。
 

<?php echo $this->Html->css('jquery.jqplot'); ?>
<!--[if lt IE 9]><?php echo $this->Html->script('excanvas'); ?><![endif]-->
<?php echo $this->Html->script('jquery'); ?>
<?php echo $this->Html->script('jquery.jqplot'); ?>
<?php echo $this->Html->script('plugins/jqplot.barRenderer'); ?>
<?php echo $this->Html->script('plugins/jqplot.pointLabels'); ?>
<?php echo $this->Html->script('plugins/jqplot.highlighter'); ?>
<?php echo $this->Html->script('plugins/jqplot.cursor'); ?>
<?php echo $this->Html->script('plugins/jqplot.categoryAxisRenderer'); ?>
<script type="text/javascript">
$(document).ready(function() {
	//パーセンテージを表す積み重ね棒グラフの変数
	var p1 = [67, 50, 58, 40, 35, 33, 38, 2.76497]; //0%
	var p2 = [7, 5, 3, 9, 12, 12, 10, 7.83410];    //1~10%
	var p3 = [2, 3, 5, 6, 8, 6, 8, 9.67741];       //11~20%
	var p4 = [1, 7, 2, 7, 10, 8, 10, 12.90322];    //21~30%
	var p5 = [2, 6, 7, 12, 11, 14, 9, 16.12903];   //31~40%
	var p6 = [7, 5, 3, 4, 5, 2, 4, 13.82488];      //41~50%
	var p7 = [2, 3, 5, 3, 3, 4, 4, 11.98156];      //51~60%
	var p8 = [1, 7, 2, 4, 4, 3, 6, 9.67741];       //61~70%
	var p9 = [2, 6, 7, 9, 7, 9, 4, 6.45161];       //71~80%
	var p10 = [7, 5, 3, 5, 4, 4, 4, 5.52995];      //81~90%
	var p11 = [2, 3, 5, 1, 1, 5, 3, 3.22580];      //91~100%
	//日付ごとのユーザー数を表す線グラフの変数
	var sumUser = [
            [1, 40],
            [2, 21],
            [3, 820],
            [4, 60],
            [5, 80],
            [6, 90],
            [7, 100],
            [8, 110]
        ];

	// chart data 積み重ね棒グラフの継続率分布
	var dataArray = [
            p1,
            p2,
            p3,
            p4,
            p5,
            p6,
            p7,
            p8,
            p9,
            p10,
            p11,
            sumUser
        ];

	// x-axis ticks 登録日
	var xticks = [
            '12月',
            '1月',
            '02-01',
            '02-02',
            '02-03',
            '02-04',
            '02-05',
            '02-06'
        ];
	// x2-axis ticks 登録日ごとの継続率
	var x2ticks = [
            '12.65%',
            '9.82%',
            '7.65%',
            '9.2%',
            '8.4675%',
            '11.2525%',
            '12.5678%',
            '14.5432%'
        ];

	// chart rendering options
	var options = {
		stackSeries: true,
		title: '継続率',
		cursor: {
            show: true,
            zoom: false,
            looseZoom: false,
            showTooltip: false
        },
		legend: {
    		show: true,
    		location: 'ne',
    		placement: 'outsideGrid'
		},
		series: [
    		{label: '0%', useNegativeColors: false},
    		{label: '1~10%', useNegativeColors: false},
    		{label: '11~20%', useNegativeColors: false},
    		{label: '21~30%', useNegativeColors: false},
    		{label: '31~40%', useNegativeColors: false},
    		{label: '41~50%', useNegativeColors: false},
    		{label: '51~60%', useNegativeColors: false},
    		{label: '61~70%', useNegativeColors: false},
    		{label: '71~80%', useNegativeColors: false},
    		{label: '81~90%', useNegativeColors: false},
    		{label: '91~100%', useNegativeColors: false},
    		{
    			label: '登録者数',
    			disableStack : true,
    			renderer: jQuery.jqplot.LineRenderer,
    			lineWidth: 2,
    			pointLabels: {
					show: false
				},
				color: '#FF7D7D',
				markerOptions: {
					size: 5, color: 'red'
				},
				xaxis: 'x2axis', yaxis: 'y2axis'
    		}
		],
    	seriesDefaults: {
    		renderer:jQuery.jqplot.BarRenderer,
    		rendererOptions: {
                barWidth: 35,
                shadowAlpha: 0.03,
                fillToZero: true,
                highlightMouseOver: false
            },
    		pointLabels: {show: true}
    	},
    	axes: {
    		xaxis: {
    			label:"日付",
        		renderer: jQuery.jqplot.CategoryAxisRenderer,
        		labelOptions: {
                    fontSize: '20pt'
                },
        		ticks: xticks
			},
			x2axis: {
    			label:"継続率(%)",
        		renderer: jQuery.jqplot.CategoryAxisRenderer,
        		labelOptions: {
                    fontSize: '20pt'
                },
        		ticks: x2ticks
			},
			yaxis: {
				label:"継\n続\n率\n分\n布\n(%)",
				labelOptions: {
                    fontSize: '20pt'
                },
                tickOptions: {
					formatString: '%.2f%'
				},
            	min: 0,
            	max: 100,
            	numberTicks:11
            },
            y2axis: {
				label:"登\n録\n者\n数",
				labelOptions: {
                    fontSize: '20pt'
                },
                tickOptions: {
					formatString: '%d人'
				},
            	min: 0
            }
    	},
    	highlighter: {
            show: true,
            showLabel: true,
            tooltipAxes: 'y',
            sizeAdjust: 7.5 ,
            tooltipLocation : 'ne'
        }
	};

	jQuery.jqplot('graph', dataArray, options);
});
</script>
<div id="graph" style="height:600px;width:800px;margin:30px;">

 
 
以上
 
 
参考
jqPlot – jQuery プラグイン

CakePHP2.xではDB操作系の関数で重要なものが3つある。
 
これらがCakephp2.xにてDBを操作する為の最低限必要な関数である。
 

find()

対象を検索する。Controllerに記述。亜種として単一フィールドを対象にして検索できるfindBy<フィールド名>()などがある。

$this->CakeSample->find($id);

 
 

save()

対象を保存/挿入する。Controllerに記述。亜種としてトランザクション処理に使えるsaveAll()などがある。

$this->CakeSample->save($id);

 
 

delete()

対象を削除する。

$this->Unit->delete($id);

 
 
 
上記3つ以外にも重要だと思った機能を以下に羅列。
 
 

loadModel()

Controllerを別のModelと関連付けることができる。Controllerに記述。突発的に他のモデルを読み込みたいときなどに利用する。

$this->loadModel('Model');

 
※$usesに複数モデルを読み込ませておかなければいけない点に注意。
 
※’Model’には読み込みたいモデル名を記述する。
 
public $uses = array('Foo', 'Bar', 'Baz');
$this->loadModel('Foo');
 
 

setDataSource()

Modelを別のDBと関連付ける。Controllerに記述。複数DBに書き込みたい場合などに利用する。

$this->Model->setDataSource('database');

 
※$usesに複数モデルを読み込ませておかなければいけない点に注意。
 
※’CakeSample’には対象のモデル名を記述する。
 
※’database’にはdetabase.phpかbootstrap.phpで作ったデータベースの変数名を記述する。
 
public $uses = array('Foo', 'Bar', 'Baz');
$this->Foo->setDataSource('development');
 
 

$this->modelClass = null;

ControllerとModelの関連付けを解除する。Controllerに記述。

$this->modelClass = null;

 
 

アソシエーション

レスポンスに他のDBの内容を含めたり、いろいろできる。Modelに記述。

public $belongsTo = array(
  'CakeSample' =>array(
    'className' => 'CakeSample',
    'foreignKey'=> 'id'
  )
);

 
 

アソシエーションの動的解除

アソシエーションを解除することができる。メソッドによってレスポンスを変えたい時に便利。Controllerに記述。

$this->CakeSample->unbindModel(array(
'hasAndBelongsToMany'=>array('CakeSample2')), false);

 
 

カウンターキャッシュ

アソシエーションで関連付けられたテーブルのレコード数を自動カウントする。Modelに記述。

public $belongsTo = array(
  'CakeSample' =>array(
    'counterCache' => true
  )
);

 
 
以上
 
 
参考
自分が書いたソースコード

業務でCakePHPってFrameworkを使う機会があったので、ちょっとしたメモ。
今回の業務ではCakePHP2.0を使用した。
 
 

設計モデル”MVC”とは

MVC(Model-View-Controller)とはソフトウェアの設計モデルの一つで、処理の中核を担う「Model」、表示・出力を司る「View」、入力を受け取ってその内容に応じてViewとModelを制御する「Controller」の3要素の組み合わせでシステムを実装する方式。

 
IT用語辞典より引用
 
 
上記の説明がまさに的を得ている。CakePHPはModel, View, Controllerの3つの塊で1セットになって機能する。
 
Cakeでは各ファイルは命名規約に従って名前付けを行わなければならない。
 
以下に命名規約について一覧をまとめておく。
 
 
 

Model

ModelファイルはModelフォルダ直下にキャメルケースの命名規約で設置する。
 
例:
../Model/CakeSample.php
 
 

View

ViewファイルはViewフォルダ直下にキャメルケース+複数形でフォルダを設置し、その中に実装メソッド名の.ctpファイルを設置する。
 
例:
../View/CakeSamples/index.ctp
 
 

Controller

ControllerファイルはControllerフォルダの直下にキャメルケース+複数形+”Controller”の命名規約で設置する。
 
例:
../Controller/CakeSamplesController.php
 
 

DB

Modelと関連付けられるDBのテーブルはアンダーバー区切り+複数形の命名規約で設置する。
 
例:
cake_samples
 
 
 
 
よくよく調べてみると、付属ツールのBakeを使えば、この命名規約に沿ってファイルを自動生成してくれるみたい。命名規約だけ面倒だが、それ以外は物凄く楽。リクエストURLの拡張子を変えるだけで内蔵されてるmod_rewriteがURLを書き換えて表示方法を変更してくれたりする。