FX.php + Flexigrid + FileMaker でWeb一覧画面を動的に作成してみる
FlexigridとはPaulo P. Marinas氏が開発・公開しているjQueryプラグインです。非常に簡単なコードを書くだけで、既存のテーブルに対してソートやカラムのサイズ変更といった、さまざまな視覚効果を与えることができます。このライブラリは同サイトにてThe MIT License、GNU GENERAL PUBLIC LICENSE Version 3のデュアルライセンスのもとで公開されています。
FileMakerとPHPを連携させたWebアプリケーションの開発手法としては、FileMaker Pro 9 リリース時に公開されたFileMaker PHP for APIやPHP Site Assistant(正直微妙まだ発展途上のため、これからに期待です)、そしてFX.phpが挙げられますが、ここではFX.phpを利用して、一覧画面を半自動的に生成してみたいと思います。
※ FX.phpにはない独自クラスなどがあります。適宜読み飛ばしてください。
従来の書き方だと
コントローラ$data = new FX_ext();
$data->SetDBData(DATABASE,"test",1);
$data->AddDBParam('-skip',$skip);
/* ごにょごにょ */
$dataSet=$data->FMFind();ビューア
<table class="list" cellspacing="0" >
<tr>
<th>(ヘッダ)</th>
</tr>
<?php
if ($dataSet['foundCount'] > 0)
{
foreach($dataSet['data'] as $key => $value)
{
$recid = strtok($key, '.');
?>
<tr>
<td class="md"><?= $value['fieldName'][0] ?> </td>
</tr>
<?php
}
}
?>
</table>こんな感じでしょうか。一覧画面ですと、このほかにページャやソートなどが実装されているかも知れません。
ではここから手抜きをして、一覧のテンプレートをいちいち作成しなくてもいいようにしたいと思います。具体的には次のとおりです。
- FileMakerレイアウトに配置されているフィールド情報を取得し、自動的に一覧を生成
- 一覧の生成はFlexigridにおこなってもらう
Flexigridは2〜5行のJavaScriptコードを追加するだけで、上記のようなテーブル一覧にもすぐに組み込むことができますが、せっかくですのでソートやページャ・簡易検索といった強力な機能を使用できる実装にします。データのやり取りはXMLとJSONがサポートされています。ここではJSONを選択しました。
修正後のコード
コントローラ$postdata = sanitizeTag($_POST);
if ( 'list_json' == $mode)
{
$sortname = ( $postdata['sortname'] ) ? $postdata['sortname'] : 'serial';
$sortorder = ( $postdata['sortorder'] ) ? $postdata['sortorder'] : 'descend';
$max= ( $postdata['rp'] ) ? $postdata['rp'] : 15 ;
$page = ( $postdata['page'] ) ? $postdata['page'] - 0 : 1 ;
switch($sortorder)
{
case 'desc':
$sortorder = 'descend';
break;
case 'asc':
$sortorder = 'ascend';
break;
default:
$sortorder = 'descend';
break;
}
$data = new FX_ext();
$data->SetDBData(DATABASE,"test",$max);
$data->AddSortParam($sortname, $sortorder ,1);
$data->AddDBParam('-skip',$max*($page-1));
if ($postdata['qtype'] && $postdata['query'] )
{
$data->AddDBParam($postdata['qtype'],$postdata['query']);
}
$dataSet=$data->FMFind();
$json = array
(
'page' => $page,
'total' => $dataSet['foundCount'],
);
foreach($dataSet['data'] as $key => $value)
{
$recid = strtok($key, '.');
unset($tmp);
$tmp[] = $recid;
foreach($dataSet['fields'] as $fKey => $fValue)
{
$tmp[] = printFormat($value[$fValue['name']][0], $fValue['type']).($postdata['serial']);
}
$json['rows'][] =
(
array
(
'id' => $recid,
'cell' => $tmp
)
);
}
$output = json_encode($json);
echo $output."\n";
}配列でのフィールド定義
// フィールド名のラベルを設定
$fieldName2Label_array = array
(
// フィールド名 => 日本語ラベル(タグOK)
'text_field' => 'テキスト',
'date_field' => '日付',
'serial' => 'シリアル'
);ビューア(JavaScript)
<script type="text/javascript" src="./js/jquery-1.2.3.js"></script>
<script type="text/javascript" src="./js/flexigrid.js"></script>
<script type="text/javascript">
<!--
$(document).ready(function()
{
$("#list").flexigrid
(
{
url: './hoge.php?mode=list_json',
procmsg: '読み込んでいます。しばらくお待ちください..',
pagestat: '{total} 件中、{from} - {to} 件目を表示',
dataType: 'json',
colModel :
[
{display: '#', name : 'recid', width: 70, sortable : true, align: 'center' },
<?php
$n = 0;
foreach($dataSet['fields'] as $fKey => $fValue)
{
if (0 < $n) { echo ",\n"; }
?>
{display: '<?= printLabel($fieldName2Label_array, $fValue['name']) ?>', name : '<?= $fValue['name'] ?>', width:100, sortable : true, align: '<?= printAlign($listDisplayAlign_array, $value[$fValue['name']][0], $fValue['type'], 'none') ?>'}
<?php
$n++;
}
unset($fKey,$fValue);
?>
],
searchitems :
[
<?php
$n = 0;
foreach($dataSet['fields'] as $fKey => $fValue)
{
if (0 < $n) { echo ",\n"; }
?>
{display: '<?= printLabel($fieldName2Label_array, $fValue['name']) ?>', name : '<?= $fValue['name'] ?>'}
<?php
$n++;
}
unset($fKey,$fValue);
?>
],
sortname: 'recid',
sortorder: 'desc',
usepager: true,
useRp: true,
rp: 15,
width: 'auto',
height: 'auto'
}
);
}
);
-->
</script>ビューア(HTML)
<table id="list" style="display:none"></table>
実行結果
JavaScriptにPHPコードを突っ込んでいたり、JSONの出力方法がまだまだきれいになりそうですが、とりあえずFileMakerレイアウトに配置されているフィールド情報をもとに、テーブルを組むこと(?)なく一覧画面が自動作成できました。
