Smarty を使った開発でデバッグを行う 4 つの方法

  PHP のテンプレートエンジン Smarty を使って開発するときに,割り当てた変数が複雑になって困ることはありませんか?
  その際,何らかの方法を使って割り当てた変数を確認するのですが,いくつか方法があります.

1. 常にデバッギングコンソールを表示する方法


  おそらく一番有名な方法ですが,$debugging に true を指定して,常にデバッギングコンソールを表示する方法です.

require_once 'Smarty.class.php';

$smarty = new Smarty;
$smarty->debugging = true;


  これで,常にデバッギングコンソールが表示されます.

  デバッギングコンソールは,window.open() を使った JavaScript によるポップアップウィンドウですが,以下のように _smarty_debug_output に html を割り当てることで,ドキュメント中に埋め込むことができます.

require_once 'Smarty.class.php';

$smarty = new Smarty;
$smarty->debugging = true;
$smarty->assign('_smarty_debug_output', 'html'); // 'html' を '' にするとポップアップ


- ref.: $debugging
  http://smarty.php.net/manual/en/variable.debugging.php

2. URL に SMARTY_DEBUG が含まれる場合にデバッギングコンソールを表示する方法


  $debugging_ctrl に 'URL' を指定して,URL に QUERY_STRING が含まれる場合にデバッギングコンソールを表示する方法です.

require_once 'Smarty.class.php';

$smarty = new Smarty;
$smarty->debugging_ctrl = 'URL'; // 解除は 'NONE'


  このように設定して,

http://example.com/foo.php?bar=baz

  という URL の場合には,

http://example.com/foo.php?bar=baz&SMARTY_DEBUG

  このようにすれば,デバッギングコンソールが表示されます.
  ちなみに,SMARTY_DEBUG=off の場合は,デバッギングコンソールは表示されません.

  $debugging = true の場合は,この設定は無視されます.

- ref.: $debugging_ctrl
  http://smarty.php.net/manual/en/variable.debugging.ctrl.php

3. テンプレート変数 debug を利用してデバッギングコンソールを表示する方法


  デバッギングコンソールはテンプレート変数を使っても表示することができます.

{debug}


  たったこれだけです.$debugging や $debugging_ctrl の設定にかかわらず表示されます.
  ポップアップ式ではないデバッギングコンソールをドキュメントに埋め込むには以下のようにします.

{debug output='html'}


- ref.: {debug}
  http://smarty.php.net/manual/en/language.function.debug.php

4. debug_print_var 修正子を利用して,割り当てられた変数を表示する方法


  この方法はドキュメントに載っていないのですが,上記 3 つのデバッギングコンソールを表示する方法とは異なり,1 つの変数の内容を表示するものです.

$foo = array(
    'a' => '',
    'b' => '',
    'c'=> array(
        'd' => ''
    )
);

$smarty->assing('foo', $foo);


  上記のように,配列が割り当てられた場合は,

{$foo|@debug_print_var} {* $foo は配列なので @ が必要 *}


  このようにすることで,以下のように $foo の内容だけが出力されます.

Array (3)
a => あ
b => い
c => Array (1)
 d => う

  debug_print_var はプラグインとして含まれてますが,ドキュメントには載っていません.
  しかし,デフォルトのデバッギングコンソール用のテンプレート debug.tpl で使われています.

  debug_print_var はデフォルトでは 40 文字で表示が切られてしまいます.これはオプションで調節できます.
  例えば 100 文字まで表示する場合は,以下のように指定してあげれば OK です.

{$foo|@debug_print_var:0:100}


  100 の前のオプションの 0 は,配列やオブジェクトを表示する際のインデント幅です.


- おまけ
  Smarty のテンプレート内で JavaScript を書く場合 { } がテンプレート変数として扱われるので {literal} で囲むのが面倒だとか,JavaScript の中にテンプレート変数を割り当てられないだとか耳にすることがあります.

  この場合は,テンプレート変数の { } を変更すればいいです.

require_once 'Smarty.class.php';

$smarty = new Smarty;
$smarty->left_delimiter  = '<{';
$smarty->right_delimiter = '}>';


  上記の設定は XOOPS が使っているもので,テンプレート変数は以下のよう記述します.

<{$foo}>


  これを使うと,以下のように JavaScript を場合に {literal} で囲む必要もありませんし,JavaScript の中にテンプレート変数を割り当てることもできます.

<script type="text/javascript">
function foo() {
    var a = '<{$foo|escape:"javascript"}>';
};
</script>



- Smarty 入門 PHP5+テンプレート・エンジンでつくる MVC アプリケーション
  4798108839
  http://www.amazon.co.jp/o/ASIN/4798108839/todaysnonsenc-22/ref=nosim/
  山田 祥寛 (著)
  翔泳社
  ISBN: 4798108839
  2005/3/15
  2,940 円

実用SSH 第2版 ― セキュアシェル徹底活用ガイド

  4873112877
  http://www.amazon.co.jp/o/ASIN/4873112877/todaysnonsenc-22/ref=nosim/
  Daniel J. Barrett (著), Richard E. Silverman (著), Robert G. Byrnes (著),
  小島 肇 (監修), 坂井 順行 (翻訳), 鹿田 幸治 (翻訳), 園田 道夫 (翻訳),
  高橋 基信 (翻訳), 根津 研介 (翻訳), 宮本 久仁男 (翻訳)
  オライリー・ジャパン
  ISBN: 4873112877
  2006/11/22
  5,040 円

- 目次
  http://www.oreilly.co.jp/books/4873112877/toc.html

- 「実用SSH 第2版 ― セキュアシェル徹底活用ガイド」サポートページ
  http://www.st.ryukoku.ac.jp/~kjm/security/sshbook/

ユーザ中心ウェブサイト戦略 仮説検証アプローチによるユーザビリティサイエンスの実践

  4797333529
  http://www.amazon.co.jp/o/ASIN/4797333529/todaysnonsenc-22/ref=nosim/
  株式会社ビービット 武井 由紀子 (著), 遠藤 直紀 (著)
  ソフトバンククリエイティブ
  ISBN: 4797333529
  2006/9/27
  2,940 円

ユーザ行動特性に基づくウェブサイト設計法
ウェブビジネス成功のカギはユーザ行動特性の理解にある!
ユーザビリティテストで業界一の実績をもつコンサルタントが、戦略の立案から基本導線・詳細画面設計、
さらに効果検証まで、ユーザ中心設計に基づくウェブサイト戦略を徹底解説。ウェブマスター必読!

<input type="hidden" /> の値を見やすく表示するデバッグ用の JavaScript ライブラリ

  フォームの <input type="hidden" /> の値をテーブルで見やすく表示するライブラリ HiddenView というのを作ってみました.
  いちいちソースを確認して,値が入っているか確認するのが面倒な人用.他の JavaScript ライブラリは必要としません.

- 使い方
  HiddenView.js を読み込んで,onload イベントで new HiddenView(); をしてください.これだけ.

<script type="text/javascript" src="HiddenView.js"></script>
<script type="text/javascript">
window.onload = function() {
  new HiddenView();
};
</script>


- 表示サンプル
  HiddenView

  ユーザ登録画面で,項目を入力してもらって,その確認画面というイメージ.上部の灰色のテーブル部分が実際の確認画面.
  下部の青色のテーブルが <input type="hidden" /> の値を示しています.
  
  この例では,テーブルにスタイルを指定しているので,この様な表示になっています.
  テーブルに hv-table というクラス名をつけていますので,自由にスタイルを決めることができます.

- ソース
  最下部でダウンロードできるようにしてありますが,一応ソース自体を載せておきます.

var HiddenView = function() {
    this.initialize();
};
HiddenView.prototype = {
    initialize: function() {
        var input = document.getElementsByTagName('input');
        var table = document.createElement('table');
        var tbody = document.createElement('tbody');
        
        var row = this.createRow([ 'Name', 'Value' ], true);
        tbody.appendChild(row);
        
        for (var i = 0, len = input.length; i < len; ++i) {
            if (input[i].type == 'hidden') {
                var row = this.createRow([ input[i].name, input[i].value ]);
                tbody.appendChild(row);
            }
        }
        table.appendChild(tbody);
        table.className = 'hv-table';
        table.setAttribute('class', 'hv-table');
        document.getElementsByTagName('body').item(0).appendChild(table);
    },
    createRow: function(values, header) {
        var row = document.createElement('tr');
        for (var i = 0, len = values.length; i < len; ++i) {
            var col = document.createElement(header ? 'th' : 'td');
            col.appendChild(document.createTextNode(values[i]));
            row.appendChild(col);
        }
        return row;
    }
};


  やっていることはシンプルで,input 要素の type 属性の値が hidden のものを探してきて,テーブルを作っています.

- ダウンロード
  http://pocari.org/tools/HiddenView/HiddenView.zip

  上記サンプルで表示してあるスタイルシートも同梱しています.
  一応,Firefox 2.0,IE 6.0, Opera 9.02 (いずれも OS は Windows XP) で動作確認しています.

- ライセンス
  MIT ライセンスにします.同梱しているスタイルシートについては著作権は主張しません.

セオリー・オブ・スタイルシート

  4774127833
  http://www.amazon.co.jp/o/ASIN/4774127833/todaysnonsenc-22/ref=nosim/
  技術評論社編集部 (編集)
  技術評論社
  ISBN: 4774127833
  2006/5/19
  3,360 円

  スタイルシートの理論の部分を神崎正英氏が執筆とのことで,これは見なければ.

PHP の薬箱 エラー・トラブル回避のテクニックとセキュリティ対策

  486167140X
  http://www.amazon.co.jp/o/ASIN/486167140X/todaysnonsenc-22/ref=nosim/
  佐久嶋 ひろみ (著)
  九天社
  ISBN: 486167140X
  2006/11
  2,940 円

  Amazon には目次がないけど,出版社のサイトにでていました.

- PHP の薬箱
  http://www.9-ten.co.jp/bookdata/140X.php

  これをみると,Symfony や Zend Framework など最近の話題も扱っているようにみえます (どれくらいのボリュームかはまた別ですが).
  対象がいまいち分からなかったりもするのですが,逆引き用として使えるのかも.ちょっと気になる.

DVD 42 枚,テレビシリーズ全話を収録した LUPIN THE BOX - TV & The Movie -

  B000J4S522
  http://www.amazon.co.jp/o/ASIN/B000J4S522/todaysnonsenc-22/ref=nosim/
  ASIN: B000J4S522
  75,000 円

  これはすごい.値段もすごいけど.内容は以下のとおり.

  • 1stシリーズ (全23話)
  • 2ndシリーズ (全155話)
  • 3rdシリーズ (全50話)
  • 1978年「ルパン VS 複製人間」
  • 1979年「カリオストロの城」
  • 1985年「バビロンの黄金伝説」

  せっかくだったら,劇場版もテレビスペシャルも全部入れてくれたらよかったのに.
  そしたら,買ったかも.

PHP 5.2.0 でデフォルトの拡張モジュールになった JSON 拡張モジュールを試してみる

- JSON 関数
  http://php.net/json

$data = array(
    'a' => '',
    'b' => '',
    'c'=> array(
        'd' => ''
    )
);

mb_convert_variables('UTF-8', 'EUC-JP', $data);
$json = json_encode($data);
echo $json, "\n";

$array = json_decode($json, true);
mb_convert_variables('EUC-JP', 'UTF-8', $array);
print_r($array);


  文字コードは EUC-JP で.文字コードが UTF-8 の場合は,mb_convert_variables() での文字コードの変換は必要ありません.

{"a":"\u3042","b":"\u3044","c":{"d":"\u3046"}}
Array
(
    [a] => あ
    [b] => い
    [c] => Array
        (
            [d] => う
        )

)

  PHP 5.1.6 以前や PHP 4.4.4 以前の場合は Jsphon を使えば同等のことができます.
  もちろん,JSON 拡張モジュールをインストールすれば古いバージョンの PHP でも JSON 関数が使えます.

- Jsphon
  http://www.hawklab.jp/jsonencoder/

- PECL :: Package :: json
  http://pecl.php.net/package/json

mb_convert_variables() は連想配列のキーを文字コードを変換しない

- mb_convert_variables
  http://php.net/mb_convert_variables

$array = array(
    'あいうえお' => 'アイウエオ'
);

mb_convert_variables('UTF-8', 'EUC-JP', $array);
var_dump($array);


  文字コードは EUC-JP で.「アイウエオ」は UTF-8 に変換されるけど,「あいうえお」は EUC-JP のまま.

  まあ,文字コードが変換されるとキーが変わってしまうわけなので,そういう仕様なんでしょう.