CodeIgniter 続き

今日は、CodeIgniterでの続きを作成。
unit_test.phpの改造は、

成功の場合:背景がグリーン&テスト名テキストリンクをクリックするとテスト結果が表示
失敗の場合:背景がレッド&テスト名テキストリンクをクリックするとテスト結果が表示

となりました。とても見やすくなってとても満足。
ただしunit_testというものが、私が書いたものが正しいテストなのかどうかはわからないので、ユニットテストそのものを次の課題にします。
(コーディング途中、ユニットテストを書きながら、テストをする方法やテストをする箇所等が十分なのかどうなのかがとても不安です)

で、現在習作しているソレは、自分用のダイエット用に書いています。

1:計測都度の体重の記録と表示
2:食べたものを都度記録と表示

この2つの役割をするものを書いていますが、すごく納得がいかない状態。
最初からやりなおしてみようかと思っています。

CodeIgniter unit_test.phpをいじる

OSC翌日、1.6.3ではunit_testは色が変わるよ!というのをkenjiさんから教わりました。(kenjiさんありがとうございます!)
ということで、早速にコードを確認。

判定部分など、ほぼ1.6.1に対して書いたものと同じような書き方だったことに満足♪
CodeIgniterへの理解力が少しだけ上がっているのかもと嬉しくなりました。

結局unit_testは、1.6.1をそのまま改造し、表示方法を変更しました。

  1. テストを通過したものは背景を緑(明るい緑)
  2. テストを失敗したものは背景を赤(明るい赤・・・ピンクw)
  3. テスト名だけ(つまりテスト結果は1行)を表示
  4. 上記をテキストリンクに変更
  5. テキストリンクをクリックするとテスト結果の詳細を表示
    (Javascript)

if文の処理内等、プログラムが通過する部分には必ずテストを書くというルールで、ふたたびアプリのコーディングを再開しました。
登録、修正、削除の機能が入った小さい小さいアプリですが、一通り書けたら「ふりかえり」をしたいと思います。

CodeIgniter unit_test.phpを眺める

CodeIgniterのunit_test.phpのソースを眺めつつ、
改造しちゃおうかと眺め・・・・


ユーザガイドから参照

テスト結果を初期状態のものとは違ったフォーマットにしたい場合、
ユーザ定義のテンプレートをセットできます。
以下は、シンプルなテンプレートの例です。
必須の擬似変数に注意してください:

<?php
$str = '
<table border="0" cellpadding="4" cellspacing="1">
    {rows}
        <tr>
        <td>{item}</td>
        <td>{result}</td>
        </tr>
    {/rows}
</table>';


$this->unit->set_template($str);
?>

あれれ?{item}と{result}しかないよ?
失敗だったら色を変えたいのに・・・・・

136行目あたりから・・・・

<?
$temp = $this->_template_rows;
$temp = str_replace('{item}', $key, $temp);
$temp = str_replace('{result}', $val, $temp);
$table .= $temp;
?>

あぁ、置き換えてるのね。

unit_test.phpを書き換えちゃうかなぁ・・・
なにか間違ってる気がすごくするんだけれども、結果がずらずらずらっとテーブルで表示されてるだけではあまりにもわかりにくい(>_<)

追記:2008.08.08
メモ

  • 170行目あたりのfunction result($results = array()){}の中で言語ファイルによる翻訳が行われている
  • 翻訳後の$keyで判定して文字色を変えるのは、オレオレすぎてなんだかなぁ・・・
  • 翻訳前の$keyも情報として持っていてほしいよ・・・CodeIgniterたん(TAT)
  • 元々の仕組みとして、色を変える仕組みがは入っててほしかった。置き換えでは元々のフォーマットでは無理っぽいなぁ
  • 元々の仕組みとして、色を変える仕組みがは入っててほしかったなぁ
  • 使うの嫌になってきた・・・
  • なんてことだ・・・試してみたら$this->unit->set_template($str);は、そのメゾットの中でしか有効にならないのか
  • CodeIgniter嫌いになりそう(;A;)うぇーん

CodeIgniter ユニットテスト unit_test

ViewとCSSから少し離れたフリをして・・・・
modelを書いてみようということで、ユニットテストクラスを使ってみようと思います。
データのinsertな処理はそのままcontrollerで書いてしまいました。
これもmodelにいれちゃったほうがいいのかな?

Modelの役割
なんとなくイメージ: Controllerが使役する素敵な式神さまw
(結界師にでてくるかわいい式神さまだと、なんとなく嬉しい)
DBに接続して、あれこれしてくれる役割のもの

CodeIgniter ユーザガイド(日本語版)より参照

<?
$this->unit->run( test, expected result, 'test name' );
?>

ここでの test は、テストしたいコードの実行結果が入り、expected result には、期待するデータ型 [または期待する値] が入ります。それから、test name では、オプションで、テストに名前を付けることができます。

ということなので、テストの名前がつけられる。

….で、2日ほど格闘。
やっぱり書いてみないとわからなかったなぁ的なことがいっぱいありました。
もうすこし試行錯誤してみようと思います。

課題とか疑問とか

  • ユニットテストが楽しい事はわかった。
  • テスト結果を活用したいと思った
  • is_objectでオブジェクト型が判定できないのは何故なのだろうか?
  • テストが失敗したら、テスト結果のテーブルは赤にしたい
    (色を変えたい)
  • 通常処理経路、例外処理経路をユニットテストをみて追えるようにしたい。
    (色変すべきかな?)

せっかく本コードに直接書いてしまうスタイルなわけだから、何かバグが発生したときに、それが通常処理だったのか例外処理だったのかは、テスト結果から追えるようにしたい。
都度誰かが手を入れながら、メンテされていくソースコードであればあるほど
それらはわかった方がいいのではないかなと思うわけです。

テスト名の工夫と、テスト結果を吐き出すViewに手を入れればできるのではないかなと予想してます。

TODO:

  • CodeIgniterでunit_testを活用しているコード(サンプル)を探す。
  • そもそもユニットテストってどうすべきなの?を調べてみる
  • 書きかけのコードをまずは完成させないと!
  • mock-up.html(雛形HTML)のカタチを考える。作る!

CodeIgniter ViewとCSSの思考(3)

サーバにUPはしていませんが、ひな形的に作ったhtmlファイルに追記

  • tableタグとそれに対応するCSS
  • olタグとそれに対応するCSS
  • ulタグとそれに対応するCSS
  • aタグとそれに対応するCSS

あとは都度必要なものを随時作成。

CodeIgniter側での課題:viewファイルを表示する部品ごとに作成
viewsフォルダの中身は表示させる部品を作る為のviewファイルで構成。

views/機能役割名/ファイル名.php

とりあえずPCの場合でしか考えてない訳だけれど、別の切り口でのそれも必要だと思います。
今後の課題ってことでとりあえずCodeIgniterを知る為にPCの場合のみで作成してみてから、考えたいと思います。

  • 用意する必要があるもの
    • モバイルの場合
    • PC用ページの場合
    • PC用ページ(印刷用)の場合

CodeIgniter ViewとCSSの思考(2)

簡単にモックを書いてみました。
足りない要素もあるわけですが、勢いのままにとりあえず作ってみました。

CSSがない状態

CSSなし
CSSがない状態の表示
テキストリンクをクリックすると実際に作ったhtmlファイルが表示され、画像をクリックするとキャプチャが表示されます。
素のHTMLです。次のCSSがある状態は、このHTMLにCSSの設定を足したものになります。

CSSがある状態:boxsubが右側

floatを右に設定したもの
CSSがある状態:boxsubが右側の場合
boxmainとboxsubをfloat:leftで設定をしています。文書としては、boxmainのほうが先に記述していますが、表示は右側になっています。

CSSがある状態:boxsubが左側

floatを左に設定したもの
CSSがある状態:boxsubが左側
boxmainとboxsubをfloat:rightで設定をしています。表示が左側になっています。
ID名をbox_rightのように、右左を表す表記にすると、CSSの設定によってIDの表す方角が嘘になってしまうため、役割である「メイン」「サブ」という命名をしています。

カレンダーについては、次のサイトを参考にさせていただきました。
A CSS styled calendar
カレンダーを複数設置する場合を考え、#calendarではなく、.calendarとして設定をしています。

(つづく)
#とりあえず寝ます(^_^;)
#MacIE5.2 で表示崩れがあったのでCSSを修正。うっかりうっかり。
#WinXP IE6 Firefox でとりあえず確認。
#Mac IE5.2 Firefox Opera9.27 Safari3.1.1 でとりあえず確認
#もちょっと調整したい部分もあるけど、とりあえずなのでこれでw
#テーブルの基本設定もいれとかないと不便なことに気がついた・・・・・(汗)
#ページャーも必要だね!

CodeIgniter ViewとCSSの思考

どう書くべきなのかを悩みつつ、viewファイルの作り方とCSSについて悩んでみました。
もくもく会なるものを知り、たまには自宅を飛び出して・・・ということで浅草国際通りのデニーズにていろいろ考え中。
いきなりNEKOGET MYFACEをCodeigniterで書くのは大変だった!ということで簡単に日記っぽいアプリをコーディングしてみました。どう書くべき?を悩みながらなので遅々としているわけですが、なんとか書けそうかなぁ?まで到達。

PC用のviewの組み立てについて

基本ファイル views/common/*
  • views/common/base.php
  • views/common/header.php
  • views/common/footer.php

controllers/hoge.phpで記述されるviewは必ず次のような書き方になる。

<?
$data['header'] = $this->load->view('common/header',$data,TRUE);
$data['footer']  = $this->load->view('common/footer',$data,TRUE);
$this->load->view('common/base',$data);
?>

当初考えたbase.phpの中身

・・・省略
<body>
    <?=$header;?>
    <?=$box;?>
    <?=$footer;?>
</body>
・・・省略

考え直したbase.phpの中身

・・・省略
<body>
<?=$header;?>
<div id="box">
    <? if(isset($boxmain)){ ?>
        <div id="boxmain"><?=$boxmain; ?></div>
    <? } ?>
        <? if(isset($boxsub)){ ?>
        <div id="boxsub"><?=$boxsub; ?></div>
     <? } ?>
 </div>
<?=$footer;?>
</body>
・・・省略

2カラムのレイアウトにしてみました。
id=”boxmain” はメインのコンテンツ
id=”boxsub” はメニューリンク等、サブコンテンツとなります。

CSS的にはfloatの設定をすれば、boxsubを右側に表示をさせることも左側に表示をさせることもできるので、文書としては先にメイン、次にサブ内容を表示させます。

先日参加したアクセシビリティセミナーでの教訓として、メインとなる文書は最初の方にあった方がいいということで、このような構成です。3カラムにするだけの情報量が無いことと、私自身が3カラムはあまり好きではないため、2カラムで作成。

id名にleft,right等をつけないのは、CSSの書き方によってid名が嘘になる為。

CSSの構造化
  • htmlタグに対する共通設定
  • フォントの設定
  • headerの設定
  • boxの設定
  • footerの設定
  • h1,h2,h3,h4,h5,h6に対する設定

(課題:これだけでは足りないはずなので、ここは後でさらに考える)

SKINテーマを切り替え可能にするフォルダ構成
  • /skin/テーマ名/images/*(画像ファイル)
  • /skin/テーマ名/css/*.css

テーマ名をconfigで設定することで、スキンテーマを切り替え可能にします。
cssファイルから呼び出される画像ファイルは、cssファイルから見た相対パスで取得できるため、テーマ名が切り替わることで、適用されるCSSファイルが変更され、そのCSSファイルから見た画像ファイルが利用できます。
また、スキンテーマを作成する際のモックファイルを準備しやすくなります。

モックファイルのセット
  • /index.html
  • /skin/テーマ名/css/*.css
  • /skin/テーマ名/images/画像ファイル

CSSファイルを1枚にするか? 複数にするか?

これはすごく悩む訳で・・・・
CSSのclassの設定を class=”class1 class2″ といった設定ではなく、できるだけxhtmlの構造を生かしてのCSSにしたいと思います。
#追記:勉強用に書いているものは単純なつくりなので、とりあえずは1枚で対応してみます。

  • #header ul .glovalnavi{…}
  • #header li {…}
  • #header li a {…}
  • #header li a:hover{…}

(つづく)
#下書きも書かずに考えながら書いてるので、随時更新ですw
#そろそろバッテリー切れだ(残0:18)  2008.08.03 01:01
#codeがわかりやすくなるようにプラグインを追加 http://www.chameleonic.org/plugin/php-hilightstring
#プラグインにあわせて、ちょっとだけ修正 2008.08.03 2:10