トーハム紀行

WHAT'S NEW?

ラベル PHP の投稿を表示しています。すべての投稿を表示

composer（コンポーザ）というのは指揮者のことだ。何故かIT業界では、すでに存在する意味を持つ単語を節操もなくそのまま使うケースが多い。はっきりいって検索でどっちがヒットするのか不明な場合が多いし、迷惑だと思う。

だからcomposerって名前とか、日常でも使う単語をそのまま使ってるプロダクトはあんまり好きじゃない。

とは言え、好きじゃないのはネーミングだけで、機能は好きな場合が多い。

composerはphp専用のパッケージ管理ツールだ。もともとSymphonyという大げさで仰々しいPHPフレームワークについていたおまけ要素だったらしいが、便利なので独立したらしい。

映画で言うスピンアウト的なプロダクトだね。うん。そして案外簡単に設定できる。

すっかり忘れてた。
PHP Advent Calendar 2013だった。
今日は俺の担当だ。

というわけで、PHPの配列に関していろいろどうでもいい話をしようと思う。

まず俺がPHPを始めたのは2000年くらい。当時はバージョンが３だった。
PHPの名前もまだ、『PHP: Hypertext Preprocessor』の頭文字ではなく、『Personal Home Page』の略だった時代ね。そう、PHPはホームページやWebアプリ唯一専用のスクリプト言語だったんだよね。

当時はまだCGIが全盛期でPerlが主役だった時代。どの書店にいっても、ホームページコーナーにはCGIセクションがあり、そこにはPerl、CGIの2文字を冠した書籍しか見つけられなかったくらい。

■Poderosaのインストール

Poderosa（ポデローサ）って知ってる？
俺かなり好き好んで使ってるターミナルソフトなんだよね。

昔はTeraTermとか使ってたけど、もうね、俺の中では古くて仕方がない。
だからPoderosa。

http://ja.poderosa.org/download/binary.html

いろいろ表示に不具合とか出ることもあるけど、トータル的に使い勝手がよいので、是非これを使ってゲストOSに接続して行きたい！！

というわけで、ダウンロードしてインストールしておいておくれ。

インストールしたら接続しよう。
特に何も設定しなければ、192.168.56.101とか192.168.56.102とかになってると思う。なってなかったら、直接VMにrootでログインして、

ifconfig p7p1

と入力しよう。表示されたinetの部分を確認だコンチキショー！！！

さて、それではPoderosaで接続できたら早速次に行ってみよう。

■Fedoraのセットアップ

さて、次はどうするかというと、おもむろにFedora18を起動だ！！！
ちなみに小学生の時に山室（やまむろ）っていうやつがいて、すごく乱暴者だったなぁ。

VMを起動するには、起動したいVMを選択した状態で、起動ボタン（画面の赤丸）をクリックするか、起動したいVMダブルクリック（赤四角）すればOK。

さて、早速起動だ。

はじめに

日本全国のWeb野郎！！！もちろん女もいるからWeb女！！
いいか、Webサーバってのはな、Linuxなんだよ！！！

Linuxが一番人気あるんだYO！！
MacのOS XのベースになってるBSDなんかウンコだ！！！
うんこぷりぷり！！！

そんなマニアックて（Linuxより堅牢で素晴らしい）OSなんか、シロウトには用がない！！

というわけで、Linuxで人気のあるUbuntuなんていう腐れミーハーなペラい（しかも元になったDebianはかなり素晴らしい出来栄えなので是非一度お試しあれ！）Linuxなんか使わないで、『え？ありえなくない？』って思っちゃうほどしつこくてクドくて濃い～～～OSである、Fedoraを使って、君のWindows上に小さなインターネット環境をまるごと作ってしまおうじゃないか！！

これならWindowsで開発しつつ、仮想のWebサーバが反応してくれるので、Wordpressだって動いちゃうし、BaserCMSだって動いちゃうわけよ。しかも、オフラインででもね！！！

これでノートPCで電車内で隣の人に嫌な顔されながらででも開発ができるってもんでがショ！！
ぶひ！！

■今度は本当にLAMPですぞ！

前回『LAMPだ！』と言いながらまるでLAMPに触れなかったのはなかなかおもしろかったし興味深かったと思う。何よりも楽しんでいただいて恐縮だYO！
ざまぁねぇっす！！

さて、本題。

とにかくいま直ぐにFedora17CUIを起動して、ログインしよう。
ログインは当然rootでおこなう。何しろユーザがrootしかいないからね。
ちなみにPoderosaなどの端末を使ってログインするとコピペができるから楽すぎて鼻血ブー且つオヤジブーだ。

というわけで、ユーもさっさとログインしちゃいなYO!

■LAMPだ！！

さて、今回はWindows7にインストールしたVirtualBoxで動かすFedora17で、LAMP環境を作るの巻だ！！
ただし細かい設定の説明とかは面倒臭いし、ググればノイズみたいなクソ記事が大量にヒットするとおもうので、そちらをぜひご覧あれ。

Fedoraだったら今まで100回は入れてる感じなんだけど、だいたい大きく分けると3つのフェーズに分かれる。

初期設定（ネットワーク、便利アプリなどの設定）
LAMPの構築
使用アプリのインストール

3はGUIでやる処理なので、今回は上の2つをやろうぜ。
そしてそれらの設定に先立って、VirtualBox側の設定をまず最初に野郎じゃないかこの野郎！

さて今回はバックエンドの構築ということで、前回インストールしたApache、php、MySQL、Postfix、BINDの設定を中心に説明したいと思う。

繰り返しになるが、あくまで俺が何度も試してみた結果でしかないので、これが正解というわけではないことを断っておく。

ただ、Linuxを基礎から覚えたい！Webの仕組みを1から網羅したい！という人だけではないとおもうし、必要に迫られてググってたどり着いた人も多いとおもうので、なるべくかいつまんで説明する予定だ。

ただしかいつまむと言ってもさすが俺のことだ。DNSの部分など、可能な限り、「AするとBになる」という因果関係だけで終わらせるのは避け（これは俺の大嫌いなパターン）「AするとBになるのはCだから」まで掘り下げて書こうと思っている。しかしくどくならないように、全体的にはさっぱりサラサラのサラサーティ且つ、ダウニー的爽やかさを醸し出せるように意識して書いたつもりだ（おい、怒るな！）。

ちなみにLinuxのホスト名をtorhamzedd.comとし、ドメインもtorhamzedd.comとするのを前提として説明する。

というわけで早速いってみよう。

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

SQLの修行は一旦おいておき、CakePHP1.3がどういう動きをするのか調べてみた。

上から順番にインデントさせて書いてみた。

さすがに作りが凝ってる。

■/index.php

・各種定数の定義

■/app/webroot/index.php

・各種定数の定義

・bootstrapの読み込み

■/cake/bootstrap.php

・PHPバージョン定数の定義

・PHPエラー表示に関する設定

・/cake/basics.phpの読み込み

今回はインスコしたパッケージの設定を行い、さらにWindows上で開発する際に便利なsambaも入れてみようと思う。

■各種パッケージライブラリのインスコ

まず設定に先立ち、必要なパッケージライブラリを豪勢にインスコしよう。
そのためにはrootになる。

# su -
パスワード

今回入れるライブラリは以下になる。

php-bcmath	任意精度演算に関する精度の拡大。つまり符号なし32ビット演算がオーバーフローを起こし、2038年問題を引き起こすのを未然に防ぐためにこれを入れておく
php-devel	phpの開発者向けライブラリ。
php-gd	GDライブラリのphp版
php-imap	phpでIMAPをいじる場合に使用
php-ldap	phpでldapをいじる場合に使用
php-mbstring	日本語圏なら必須。全角を正しく扱えるようになる（ただし完璧ではない）
php-mcrypt	暗号化のライブラリ。いろいろなOSSで使用されるので入れておく
php-mysql	MySQLを使うなら必須
php-pdo	phpでDBをいじる際、一番処理が速いので入れておく
php-pear	phpで作られた各種ライブラリへのアクセス用に入れておく
php-pspell	phpで辞書を扱う際に使われる便利なライブラリ。使用頻度は低いがオモロいので入れておく
php-snmp	phpでsnmpを使う場合に使用
php-soap	phpでsoapで通信する場合に使用
php-tidy	htmlスクレイピングライブラリ
php-xml	xmlを簡単に扱えるようになるので入れておく
php-xmlrpc	xmlを使ったサーバ間通信などで使うので入れておく
mod_ssl	なんちゃってSSLで使うので入れておく
mod_perl	PerlをCGIじゃなくApacheモジュールっぽく動かして高速化するので入れておく
mod_dav_svn	Subversionをhttp経由でアクセスさせるのに必須

さて、今回はCentOSにインスコ（インストール）されているパッケージなどをアップデートする予定だ。

基本的に、と言うよりむしろ現在では当然の如く、yumコマンドでパッケージをインストールする（ソースコンパイルやrpmを作ったりするのは一度やって置くべきだ）。

Yumex（Yum Extender）というGUIソフトを使うと、グラフィカルにインスコすることも出来るが、ここではあえてコマンドラインで入力する事にする。

まずはCentOSにログインしよう。前回OSのシャットダウンではなく、VMPlayerを直接閉じていれば、勝手にサスペンド状態になり、直前の状態から再開することが可能になる。これがVMPlayerの便利なところのひとつだ。

「仮想マシンの再生」をクリックすると、「仮想マシンの状態を復元しています...」となり、だいたい20秒前後で元の状態に戻る。こりゃ便利。

今回で「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個に増やすことにした。

■Poderosaのインストール

■Fedoraのセットアップ

はじめに

Translate

Author

Blog Archive

Popular Posts

Tag Labels