FileMakerを使ってレイアウトを作成していく中で、ユーザビリティアップのためには欠かせない「値一覧」。あらかじめ選択肢を定義しておき、オペレータにはその中から選択させるだけにする。表記揺れや入力ミスも抑えられ、入力速度のアップも期待できる。FileMakerを使っていく中で、かならず使いこなせるようになっておきたい機能のひとつだ。
FileMakerでは定義した値一覧を「コントロールスタイル」の表示形式から"ドロップダウンリスト"、"ポップアップメニュー"、"チェックボックスセット"、"ラジオボタンセット"のうちいずれかを選択して利用する。この中でもとりわけ"ドロップダウンリスト"は「選択肢の中から選ぶこともでき、ユーザの自由入力もできる」という特徴をもつ。使い勝手の良い表示形式だが、これをWebアプリケーションで実現したい場合はちょっと工夫が必要だ。今回はこれら値一覧をWebアプリケーションから使用する方法を紹介しよう。
PHPとJavaScriptをうまく使って、値一覧をWebアプリで実現!
使用するFileMakerファイル情報は次のとおり。
- ファイル名: fxphp_test.fp7
- レイアウト名: valueListsLayout
- テーブル名: valueLists
- フィールド: 画像を参照
- 値一覧: valueLists_1～valueLists_3はカスタム値、valueLists_4はフィールド「vl_textField_4」の値を使用
|
|
フィールド情報。値一覧の紹介のため、タイプは意識していない |
値一覧情報。valueLists_4はvl_textField_4の内容に応じて値が増えていくことになる |
|
レイアウト情報。値一覧を使用したフィールドのうち、ユーザが自由に入力できるのはドロップダウンリストを設定したvl_textField_4のみ |
値一覧をWebアプリケーションから利用する場合、FileMakerの表示形式とHTML要素はそれぞれ次のように対応する。
- ポップアップメニュー: <select><option>
- チェックボックスセット: <input type="checkbox">
- ラジオボタンセット: <input type="radio">
これらについてはFX.phpのFMView()で値一覧を取得し、foreach()などで展開すればOKだ。
fm_valueLists_1 - ポップアップメニューほかを実現
<?php
include_once('./fx/FX.php');
include_once('./fx/server_data.php');
// 文字列エスケープ用関数
function h($string)
{
return htmlspecialchars(trim($string), ENT_QUOTES, 'UTF-8');
}
$data = new FX($serverIP, $webCompanionPort, $dataSourceType, $scheme);
$data->SetDBData($databaseFileName,'valueLists', 1);
$data->SetDBUserPass($webUN,$webPW);
$data->SetCharacterEncoding('utf8');
$data->SetDataParamsEncoding('utf8');
$dataSet = $data->FMView();
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>FX.php 値一覧の表示(1)</title>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>
vl_textField_1<br>
ポップアップメニュー
</th>
<th>
vl_textField_2<br>
チェックボックスセット
</th>
<th>
vl_textField_3<br>
ラジオボタンセット
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<select name="vl_textField_1" id="vl_textField_1">
<?php
foreach($dataSet['valueLists']['valueLists_1'] as $key => $value )
{
?>
<option value="<?php echo h($value); ?>"><?php echo h($value); ?></option>
<?php
}
unset($key, $value);
?>
</select>
</td>
<td>
<?php
$n = 1;
foreach($dataSet['valueLists']['valueLists_2'] as $key => $value )
{
?>
<input type="checkbox" name="vl_textField_2" id="vl_textField_2_<?php echo $n; ?>" value="<?php echo h($value); ?>">
<label for="vl_textField_2_<?php echo $n; ?>"><?php echo h($value); ?></label>
<br>
<?php
$n++;
}
unset($key, $value);
?>
</td>
<td>
<?php
$n = 1;
foreach($dataSet['valueLists']['valueLists_3'] as $key => $value )
{
?>
<input type="radio" name="vl_textField_3" id="vl_textField_3_<?php echo $n; ?>" value="<?php echo h($value); ?>">
<label for="vl_textField_3_<?php echo $n; ?>"><?php echo h($value); ?></label>
<br>
<?php
$n++;
}
?>
</td>
</tr>
</tbody>
</table>
</body>
</html>
<select><option>、<input>ともにforeachをもちいて展開している。チェックボックス・ラジオボタンを使う場合は、<label>も忘れずに出力しておこう。実際にWebブラウザでアクセスする。
|
Safariでの表示結果。FileMakerで組んだレイアウトと似たようなUIが実現できている |
のこる「ドロップダウンリスト」は残念ながら現時点では対応するHTML要素が存在しない(HTML5では<input>のlistと<listdata>として対応)。ドロップダウンリストをWebアプリケーション上で再現するには、JavaScriptを活用する。JavaScriptを使ってドロップダウンリストのUIを作成するには、次のライブラリが便利だ。
- Dojo - Combobox
- Yahoo UI - AutoComplete
- jQuery - Autocomplete (jquery 1.2.6) など
それぞれのデプロイ方法、使い方については『【ハウツー】jQuery、Dojo、YUIの使えるウィジェット』を参考にしてほしい。ここでは手軽さからjQuery Autocompleteをもちいた実装をおこなう。
fm_valueLists_2.php - ドロップダウンリストを実現
<?php
include_once('./fx/FX.php');
include_once('./fx/server_data.php');
// 文字列エスケープ用関数
function h($string)
{
return htmlspecialchars(trim($string), ENT_QUOTES, 'UTF-8');
}
$data = new FX($serverIP, $webCompanionPort, $dataSourceType, $scheme);
$data->SetDBData($databaseFileName,'valueLists', 1);
$data->SetDBUserPass($webUN,$webPW);
$data->SetCharacterEncoding('utf8');
$data->SetDataParamsEncoding('utf8');
$dataSet = $data->FMView();
$valueLists_4_array = array_map('h', $dataSet['valueLists']['valueLists_4']);
$valueLists_4 = '\'' . implode('\',\'', $valueLists_4_array ) . '\'';
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>FX.php 値一覧の表示(2)</title>
<link href="./css/jquery.autocomplete.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="./js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="./js/jquery.autocomplete.min.js"></script>
<script type="text/javascript">
<!--
$(document).ready
(
function()
{
var valueLists_4_data = new Array
(
<?php echo ($valueLists_4); ?>
);
$('#vl_textField_4').autocomplete(valueLists_4_data, {minChars: 0});
}
);
-->
</script>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>
vl_textField_4<br>
ドロップダウンリスト
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" name="vl_textField_4" id="vl_textField_4" value="">
</td>
</tr>
</tbody>
</table>
</body>
</html>
jQuery Autocompleteでは、候補となる文字列を配列として格納する。FX.phpのFMView()で値一覧情報を取得し、implode()で配列を連結して出力させた。実際にWebブラウザでアクセスしてみよう。
|
|
Safariでの表示結果。ドロップダウンリストのように、値一覧から選択することもでき、自分で入力することもできる。入力途中の補完機能も嬉しい |
|
FileMaker ProとWebアプリケーションを連携させているシステムの場合、値一覧は強力なUIを作成するための一手となる。カスタム値のみで構成する簡単な値一覧から、データベース内や他ファイル内のフィールド値から構成する値一覧は、さまざまな場面で応用が効く。どんな入力フォームでも、誤入力はつきもの。それらを少しでも抑えられるよう、入力頻度の高いキーワードは積極的に値一覧化していこう。
またWebアプリケーションにおいてちょっとした機能から凝った機能を実現するにあたり、JavaScriptはもはや欠かせない技術となってきている。とくにFileMakerを使用したWebアプリケーションを実装する場合、優れたパフォーマンスを得るためにはAjaxは必要不可欠のテクニックだ。FileMakerとPHPを使用した開発に慣れてきたら、次にJavaScriptを勉強しておくことをおすすめしたい。
「シングルマルチモニター」でプログラマーやデザイナーも作業効率倍増！5Kウルトラワイドモニターの活用術
