【 】
FileMaker の Webビューアを表示・編集インターフェイスとして使う方法
~ 内容 ~
FileMaker を使ったデジタル・ホワイトボード カスタム App のデモを開発しました。大画面のモニタ、デジタルサイネージ、iPad などいつでも見られるように掲示することを想定しています。本サイトでは内容を一通り説明することを目的としています。開発したファイルは開発トレーニング教材として提供する予定をしております。
デモのホワイトボードはシンプルに時間帯と予定の2項目で構成されています。時間帯は FileMaker で変更できて予定は FileMaker だけでなく、Web ビューア からも変更できます。
会議室の予約状況、受付や待合室、歯科医院のチェアごとの診察予定、自動車整備工場のピット稼働状況など応用できます。デモはテキスト入力で編集しますが、ドロップダウン(プルダウン)やスライダーを使用する変更もできると思います。
~ 表示・編集にあえて Web ビューア を使う理由 ~
FileMaker の操作に不慣れでも、ホワイトボードの編集はブラウザから簡単に操作できるようにしました。
テーブル::フィールド / リレーションシップ
[Display] テーブル
PK(主キー)
[HTML] テーブル
HTMLsource(HTMLソース)
[Schedule] テーブル
FK(外部キー)
時間帯
予定
<< リレーション >>
Display::PK –< Schedule::FL
｜
└ [ X ] – HTNL::HTMLsource
変数を設定 [ $引数 ; 値: Get(スクリプト引数) ] 変数を設定 [ $時間帯 ; 値: JSONGetElement ( $引数 ; "time" ) ] 変数を設定 [ $予定 ; 値: JSONGetElement ( $引数 ; "task" ) ] レイアウト切り替え [ 「Schedule」 (Schedule) ; アニメーション: なし ] 検索モードに切り替え [ 一時停止: オフ ] フィールド設定 [ Schedule::時間帯 ; $時間帯 ] 検索実行 [ ] フィールド設定 [ Schedule::予定 ; $予定 ] レコード/検索条件確定 [ ダイアログあり: オフ ] 全レコードを表示 レイアウト切り替え [ 元のレイアウト ; アニメーション: なし ]
HTMLソース
(HTML内に JavaScript と CSS を直接記述しています)
<!DOCTYPE html>
Schedule
| 時間帯 | 予定 |
|---|
Webビューアの設定 (Displayレイアウト)
[レ] Webビューア内容とのインタラクションを許可
[レ] JavaScript による FileMaker スクリプトの実行を許可
Let( [@JSON = While( [ $時間帯 = List ( Schedule::時間帯 ); $予定 = List ( Schedule::予定 ); $最大 = ValueCount($時間帯); $カウント = 0; $結果 = "" ]; $カウント < $最大; [$結果 = JSONSetElement ( $結果; "data[" & $カウント & "]time"; GetValue($時間帯; $カウント + 1); 1); $結果 = JSONSetElement ( $結果; "data[" & $カウント & "]task"; GetValue($予定; $カウント + 1); 1); $カウント = $カウント + 1 ]; JSONFormatElements ( JSONGetElement($結果; "data") ) )]; "data:text/html," & Substitute( HTML::HTMLsource; "%JSON%"; @JSON ) )
【Webビューアの設定の解説】
01行目 Let()式で Webビューアに表示する内容を作成します
* 21行目 "data:text/html," から始める形でHTMLソースを表示します
02行目 Let()式内で使用する変数 @JSON に While()式で時間帯と予定のJSONデータを追加します
* While ([初期変数] ; 条件 ; [ロジック] ; 結果)
* 初期変数には以下をセットします
$時間帯 = Scheduleテーブルの時間帯フィールド値のリストを設定します
$予定 = Scheduleテーブルの予定フィールド値のリストを設定します
$最大 = while()式で繰り返す上限値をセットします
* ここでは $時間帯 の要素数をセットします
$カウント JSON値を使用するため 0 でセットし、while()式内で$最大まで繰り返します
$結果 作成するJSONデータを格納するためセットします
11行目 $カウント < $最大
* $カウント が $最大 になるまで繰り返します
13 - 14行目 $結果 に JSONSetElement()式で値(時間帯、予定)を追加します
* JSONSetElement (json ; キーまたは索引またはパス ; 値 ; タイプ)
* json は while()式で繰り返し使用するため $結果を使用します
* キーまたは索引... は data[*n]time に時間帯を data[*n]task に予定を追加します
*n は先頭からの数
* 値 は getvalue()式を使用して $時間帯、$予定 の($カウント+1)番目を読み込んでセットします
FileMaker では先頭を1行と扱い、対して$カウントは JSONデータを読み込むため先頭を0とします
そのため getvalue()式の $カウント は +1 として FileMaker に合わせます
* タイプ は 時間帯、予定 ともテキストなので 1(テキスト)とします
15行目 $カウント の値を1追加します
18行目 JSONFormatElements は完成したデータを読みやすいようにフォーマットします
JSONGetElement はJSONデータから必要な値を取得します
* JSONGetElement (json ; キーまたは索引またはパス)
* while()式で作成した JSON値($結果) から data の階層を取り出します
* {[{"time":"09:00","task":"ミーティング"...}]}
↓
[{"time":"09:00","task":"ミーティング"...}]
FileMakerで [] から始まるJSONデータの作成ができないため
一度 data 階層を作成して、{[]} として、後から data 階層を取り除けば
[] から始まるJSONデータが完成する
21 "data:text/html," は Web ビューアでHTMLを表示するためのヘッダ
* Substitute()式を使用して HTMLソースの %JSON% を作成したJSON値(@JSON)に置き換えて表示