【コラム】

FileMaker×PHPで作る、簡単・便利なWebアプリ

13 値一覧でユーザビリティアップ! JavaSciptを活用せよ

13/116

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を作成するには、次のライブラリが便利だ。

それぞれのデプロイ方法、使い方については『【ハウツー】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を勉強しておくことをおすすめしたい。

13/116

インデックス

連載目次
第116回 最新の情報を追い続ける
第115回 簡易エラーロギングで、トラブルシューティングをより素早く(2)
第114回 簡易エラーロギングで、トラブルシューティングをより素早く(1)
第113回 表示方法「表形式」の落とし穴
第112回 FileMaker Webアプリで見落としやすいセキュリティのポイント
第111回 外部データソースに注意! Web公開が遅くなったときのチェック
第110回 FX_Fuzzy_Debuggerで補足できるエラー
第109回 FileMakerデバッグの際に有用なツールを自作する
第108回 繰り返しフィールドを扱うときの注意点
第107回 FX.phpのデバッグメッセージをコンソールに表示する
第106回 FileMaker Serverの「使用状況」とは
第105回 Web経由でのCSVエクスポート
第104回 Web公開でのグラフ表示にチャレンジ
第103回 データベースデザインレポートを活用したWeb帳票(4)
第102回 データベースデザインレポートを活用したWeb帳票(3)
第101回 データベースデザインレポートを活用したWeb帳票(2)
第100回 データベースデザインレポートを活用したWeb帳票(1)
第99回 SetLogicalOR()と空白・改行文字の取扱いについて
第98回 FMCakeMixでスクリプトを二重起動させない方法
第97回 コマンドラインを活用したメンテナンス方法(3)
第96回 コマンドラインを活用したメンテナンス方法(2)
第95回 コマンドラインを活用したメンテナンス方法
第94回 FMFind()とFMView()の処理の違いとは
第93回 オブジェクトフィールドからファイル参照への移行法
第92回 FX.phpで複合検索をおこなうには(3)
第91回 FX.phpで複合検索をおこなうには(2)
第90回 FX.phpで複合検索をおこなうには(1)
第89回 Hello, FMCakeMix! チュートリアル(14)
第88回 Hello, FMCakeMix! チュートリアル(13)
第87回 Hello, FMCakeMix! チュートリアル(12)
第86回 Hello, FMCakeMix! チュートリアル(11)
第85回 Hello, FMCakeMix! チュートリアル(10)
第84回 Hello, FMCakeMix! チュートリアル(9)
第83回 Hello, FMCakeMix! チュートリアル(8)
第82回 Hello, FMCakeMix! チュートリアル(7)
第81回 Hello, FMCakeMix! チュートリアル(6)
第80回 Hello, FMCakeMix! チュートリアル(5)
第79回 Hello, FMCakeMix! チュートリアル(4)
第78回 Hello, FMCakeMix! チュートリアル(3)
第77回 Hello, FMCakeMix! チュートリアル(2)
第76回 Hello, FMCakeMix! チュートリアル(1)
第75回 最新FMCakeMixの動向を追う(3)
第74回 最新FMCakeMixの動向を追う(2)
第73回 最新FMCakeMixの動向を追う
第72回 FileMaker Webアプリを支えるライブラリ集
第71回 メンテ必須事項! 長期運用でのポイント(4)
第70回 メンテ必須事項! 長期運用でのポイント(3)
第69回 メンテ必須事項! 長期運用でのポイント(2)
第68回 メンテ必須事項! 長期運用でのポイント(1)
第67回 FileMaker Server 10→11での変更点
第66回 FX.php/APIの違い - スクリプトの実行
第65回 FX.php/APIの違い - レコード削除
第64回 FX.php/APIの違い - レコード編集(2)
第63回 FX.php/APIの違い - レコード編集(1)
第62回 FX.php/APIの違い - レコード検索(7)
第61回 FX.php/APIの違い - レコード検索(6)
第60回 FX.php/APIの違い - レコード検索(5)
第59回 FX.php/APIの違い - レコード検索(4)
第58回 FX.php/APIの違い - レコード検索(3)
第57回 FX.php/APIの違い - レコード検索(2)
第56回 FX.php/APIの違い - レコード検索(1)
第55回 FX.php/APIの違い - レコード登録(2)
第54回 FX.php/APIの違い - レコード登録(1)
第53回 番外編: CakePHPでFileMakerを使う方法
第52回 レコードの取扱いに特化したクラス"FileMaker_Record" (3)
第51回 レコードの取扱いに特化したクラス"FileMaker_Record" (2)
第50回 レコードの取扱いに特化したクラス"FileMaker_Record" (1)
第49回 結果セットの取扱いに特化したクラス、FileMaker_ResultSet(2)
第48回 結果セットの取扱いに特化したクラス、FileMaker_ResultSet(1)
第47回 ポータル情報の取得に特化したクラス、FileMaker_Field
第46回 フィールド情報の取得に特化したクラス、FileMaker_Field(4)
第45回 フィールド情報の取得に特化したクラス、FileMaker_Field(3)
第44回 フィールド情報の取得に特化したクラス、FileMaker_Field(2)
第43回 フィールド情報の取得に特化したクラス、FileMaker_Field(1)
第42回 レイアウト情報取得に特化したFileMaker_Layout(3)
第41回 レイアウト情報取得に特化したFileMaker_Layout(2)
第40回 レイアウト情報取得に特化したFileMaker_Layout(1)
第39回 API for PHPの中枢、FileMakerクラス(3)
第38回 API for PHPの中枢、FileMakerクラス(2)
第37回 API for PHPの中枢、FileMakerクラス(1)
第36回 API for PHPでのオブジェクトフィールド取り扱い
第35回 API for PHPでのレコード複製・削除方法、関連メソッド紹介
第34回 API for PHPでのレコード編集方法、関連メソッド紹介(2)
第33回 API for PHPでのレコード編集方法、関連メソッド紹介(1)
第32回 API for PHPでのレコード検索、関連メソッド紹介(2)
第31回 API for PHPでのレコード検索、関連メソッド紹介(1)
第30回 API for PHPを使うなら覚えておきたいvalidateの使い方
第29回 API for PHPでのレコード登録方法、関連するメソッドの紹介(2)
第28回 API for PHPでのレコード登録方法、関連するメソッドの紹介(1)
第27回 API for PHPでのDB接続手順、レコード表示まで(2)
第26回 API for PHPでのDB接続手順、レコード表示まで(1)
第25回 2大ライブラリのもうひとつ、API for PHPを試す
第24回 スピードアップのための徹底チューニング(6) 総集編
第23回 スピードアップのための徹底チューニング(6) スクリプトを活用せよ
第22回 スピードアップのための徹底チューニング(5) 続・集計には中間テーブル
第21回 スピードアップのための徹底チューニング(4) 集計には中間テーブル
第20回 スピードアップのための徹底チューニング(3) 集計フィールドは置かない
第19回 スピードアップのための徹底チューニング(2) 検索実装の御法度
第18回 スピードアップのために徹底チューニング(1) フィールドの配置法
第17回 見落としがちな「アカウントとアクセス権」の管理術
第16回 「CSVからデータをインポートしたい」には要注意!(2) - 実装編
第15回 「CSVからデータをインポートしたい」には要注意!(1) - まずは解説から
第14回 エラーコード早見表 & お手軽デバッグ「Fuzzy_Debugger」
第13回 値一覧でユーザビリティアップ! JavaSciptを活用せよ
第12回 オブジェクトフィールドから脱却! よりよいパフォーマンスを出す実装とは
第11回 オブジェクトフィールドは鬼門?! Webから取り扱うときの注意点
第10回 PHPデプロイ/FMサーバ管理者必見、カスタマイズすべき設定
第9回 PHPのインストール~FileMakerデプロイ
第8回 FileMaker Webアプリのインストール
第7回 FileMakerといえば帳票! さくっとデザインしてWebからPDFダウンロード
第6回 FileMakerならではのメリットを出すには - スクリプトを活用せよ
第5回 基礎編はこれで終わり! - 詳細/変更/削除処理
第4回 いよいよUIの実装へ! 最初は登録/一覧画面
第3回 FileMakerのCRUDはこれで完璧! - FMEdit()~FMDelete()まで
第2回 レコードの登録 - 各種関数・メソッドの紹介
第1回 まずは2大ライブラリを比較

もっと見る



転職ノウハウ

あなたが本領発揮できる仕事を診断
あなたの仕事適性診断

シゴト性格・弱点が20の質問でサクッと分かる!

「仕事辞めたい……」その理由は?
「仕事辞めたい……」その理由は?

71%の人が仕事を辞めたいと思った経験あり。その理由と対処法は?

3年後の年収どうなる? 年収予報
3年後の年収どうなる? 年収予報

今の年収は適正? 3年後は? あなたの年収をデータに基づき予報します。

激務な職場を辞めたいが、美女が邪魔して辞められない
激務な職場を辞めたいが、美女が邪魔して辞められない

美人上司と可愛い過ぎる後輩に挟まれるエンジニアの悩み

人気記事

一覧

イチオシ記事

新着記事

求人情報