FileMaker×PHPで作る、簡単・便利なWebアプリ(107) FX.phpのデバッグメッセージをコンソールに表示する

FileMakerとFX.phpを使ったWebアプリ開発において、おおきな助けとなる「デバッグ機能」と「FX Fuzzy Debugger」。開発中におかしな挙動をしたときに、いちいち変数をvar_dump()で展開する前に、これらの機能を有効にするだけでトラブルの切り分けをおこなえる可能性がある。

FX.php/FX Fuzzy Debuggerのデバッグメッセージをコンソールに表示

FileMakerとFX.phpを使ったWebアプリ開発において、おおきな助けとなる「デバッグ機能」と「FX Fuzzy Debugger」。開発中におかしな挙動をしたときに、いちいち変数をvar_dump()で展開してエラーコードやFileMaker ServerへのURIリクエストを確認する前に、これらの機能を有効にするだけでトラブルの切り分けをおこなえる可能性がある。

FX.phpのデバッグ機能

FX.phpに用意されているデバッグ機能のひとつ。定数「DEBUG」を定義することでこのデバッグ機能が有効になる。FileMaker Serverへアクセスが発生する都度、使用したURIを画面上に出力してくれるようになる。リクエスト中にどのようなクエリが含まれているか、また実際にアクセスすることでどのようなXMLが返っているかの確認がおこなえる。

定数「DEBUG」を定義すると、FileMaker Serverへアクセスが発生する都度使用したURIが画面上に表示されるようになる

FX Fuzzy Debugger

FX.php version 4.5以降で用意されたデバッグ機能。FX.phpのデバッグ機能に加え、詳細なエラーメッセージや、エラーの原因となっているフィールド名の提案をしてくれる。FX Fuzzy Debuggerを有効にするには、定数「DEBUG_FUZZY」を定義すれば良い。仕組み上、FX.phpをインクルードする前に定義する必要があるので注意が必要。これでlastDebugMessageに詳細なエラーメッセージが格納されるようになるので、取りだして出力すればOKだ。

定数「DEBUG_FUZZY」を定義することでFX Fuzzy Debuggerが有効になる。FX.phpで用意されているデバッグ機能に加え、より詳細なエラーメッセージやヘルプが表示されるようになる

便利なこれらの機能だが、使用する場面によっては画面レイアウトが崩れるのが玉に瑕。ここではこのデバッグ情報を、console.logでWebブラウザのコンソール上に表示してみるように修正をおこなってみよう。

console.logはFirefoxの著名な拡張「Firebug」のConsole APIの関数のひとつ。Firebugのコンソールに、文字列を出力する。Webアプリを開発する際、おもにJavaScriptの実装で活躍する。開発メニューを有効にしたSafariや、Google ChromeのJavaScriptコンソールなど、利用できるWebブラウザも広がってきている。Internet Explorerでも、Companion.JSといったプラグインや、Firebug Liteといったブックマークレットを使用することで利用可能だ。(参考: 【ハウツー】あのFirebugがIEでも使えるようになる!? 簡易版Firebug「Firebug Lite」)

まずこのconsole.logをPHP上で簡単に使えるように、PHPの関数を定義しておく。関数名はconsole_logとした。

function console_log($value)
{
    echo '<script type="text/javascript">';
    echo "\nif (('console' in window) ) {\n";
    printf('  console.log(\'%s\');', str_replace("\n", "\\\n", trim(htmlspecialchars(strip_tags($value), ENT_QUOTES, 'utf-8'))));
    echo "\n}\n";
    echo "</script>\n";
}

このconsole_log関数は、引数としてわたされた文字列をJavaScriptで囲む。Webブラウザが結果を受け取り、コンソール上に表示するというわけだ。printf部分で文字列を加工しているが、これらの意味は次のとおり。

str_replace: 文字列リテラルにふくまれる改行文字の直前に"\"を挿入するため
trim: 文字列の先頭および末尾にある不要なホワイトスペースを取りのぞくため
htmlspecialchars: "や'など、JavaScriptエラーの原因となる文字列をエスケープしたいため
strip_tags: デバッグメッセージ中にふくまれるHTMLタグを削除するため

作成した関数をもちいて、FX.phpのデバッグ機能で出力されるメッセージをWebブラウザのコンソール上に表示してみよう。FX.php内の「echo $currentDebugString;」を、すべて「echo console_log($currentDebugString);」に置換する。定数「DEBUG」を定義して実行してみよう。

Safariのエラーコンソールで動作を確認。FX.phpデバッグ機能のログがコンソールに表示されるようになった

今度はFuzzy Debuggerのデバッグメッセージをコンソール上に表示してみよう。まずは定数「DEBUGFUZZY」を定義する。続いてFileMaker Serverへのリクエスト実行後に、echo consolelog($fx->lastDebugMessage);の一文を追加する。あとはConsole APIに対応したWebブラウザで動作を確認するだけだ。

Safariのエラーコンソールで動作を確認。FX Fuzzy Debuggerのデバッグメッセージがコンソールに表示されるようになった

console_log関数であらかじめ文字列加工をおこなっているので、不要なHTMLタグはすべて削除された状態でコンソールに表示されるようになる。ログを改行して表示することができないので少々見づらいという欠点はあるものの、画面レイアウトを崩さずにデバッグメッセージを確認したい時に有効な手段だ。

なお、デバッグメッセージを画面に表示していないだけでJavaScriptコードは出力されている。header()など、出力の前にコールする必要がある関数を使っている場合はデバッグ機能を有効にするとうまく動かなくなる場合もあるので注意されたい。