Webビューアで可変の閲覧画面を作成する【初級】

時々、WEB画面のような可変項目や横並びも対応した内容の画面表示の要望があった場合、Filemakerのポータルでは横並び表示はできません。その対処として「Webビューア」という選択肢なんていかがでしょう？

Webビューアは
HTMLコードに書き直して可変項目も対応！
簡単なものから複雑なものまで！

できますが！今回は初級編として簡単なJavaScriptを使用した方法で軽く触れるだけです。お遊びレベルの特にエラーチェックもないレジっぽいシステム風なもので試してみましょう！

Webビューアの良いところはWEB画面と同じレイアウトが出来るという事でしょう。
そしてFileMakerでは面倒な横並びがCSSで組めば簡単に出来るという点です。

という事で横並びにしてみました！

★仕様

シンプルに、商品名をクリックしたら、右のポータルの明細一覧に追加されるという動きです！
.

サンプルファイル：　WEBビューア.fmp12
.

★初級レシピ

・対象バージョン
FM19

データーベース

【Info】テーブル

Ct_HTML
Ft_Js
Ft_CSS

【商品マスタ】

Ft_商品名
Fn_金額

【レシート】テーブル
レシートっぽくするためのヘッダーです。
【レシート明細】テーブル
Webビューアで表示しクリックしたものを入れる場所です。
.
.

実際の画面

お試し画面では、生成された計算フィールドのHTMLソースと、編集可能なJavaScriptフィールドとCSSフィールドを表示しています。
実際にいじりながら画面の変化がみられるので、好きな幅や色味など変更してみましょう！。

ダウンロードしたファイルを見て、軽く弄って分かった方は以下は説明なので読まなくても大丈夫です。
どんどんカスタマイズしてみましょう！
.

★中身の説明

Webビューアで重要な場所のみ説明しています。

リレーション
フィールド設定
Webビューア設定
スクリプト

リレーション

とってもシンプル。このリレーションは今回のWebビューアのボタンを押下した後のデータ作成に必要なリレーションです。
ここでは、レシートテーブルとのリレーションで「このリレーションシップを使用して、このテーブルでのレコード作成を許可」にチェックしておきます。
チェックすることで面倒な新規レコード作成をなくしています。

.

フィールド設定

★HTMLの計算フィールド

HTMLを生成する基本枠は計算フィールドにしています。
メインの値を表示するHTMLはカスタムしやすく変数にしています。変数にすることで書き換えるたびにレコードの更新日が変わるという事を阻止します。

記述の説明

- ＜HTML lang=’ja’＞　…は文字化けしないように日本語指定するために必要です。
- ＜meta charset=’UTF-8’ /＞　…はFileMakerの文字コードに合わせてUtf-8だよと教えるために記述。
- Ft_CSS …CSSフィールドを置くことで、ここに置くことで書き換えたものが即時反映されます。
- $$HTML …スクリプトでHTMLを生成したものを変数にセットし、Bodyに出力しています。
- Ft_Js 　…JavaScriptフィールドです。ここに置くことで書き換えたものが即時反映されます。

★JSの設定フィールドの中身

document.addEventListener('DOMContentLoaded',function(){

var btns = document.querySelectorAll('.button');

for(var i = 0; i < btns.length; i++){

btns[i].addEventListener('click',function(){

this.style.color = 'blue';

FileMaker.PerformScriptWithOption("JS_addMeisai", this.id + '\n' + 1 );

},false);

}

},false);

今回はシンプルなので、難しいことはしていません。
素のJavaScriptでDivタグのClass名「button」がクリックされたらFileMakerのスクリプトをキックするという動きです。
ポイントはこの後説明する商品名をボタンとして表示させるHTMLと合わせる部分があるという事です！
まずは、DivタグのClass指定をしている「button」がクリックされたら、IDの値（ここでは商品IDがはいっています）を取得します。
そのあと、FileMaker独自のJavaScriptコードでスクリプト名と引数記述します！

Clarisのヘルプはここ
公式：FileMaker.PerformScriptWithOption (スクリプト, 引数, オプション);
ソースの記述箇所： FileMaker.PerformScriptWithOption("JS_addMeisai", this.id + '\n' + 1 );

引数を改行区切りで連結することで複数の値を引数として設定できます。今回は簡単に個数としての１を足しています。
.

★CSSの設定フィールドの中身

ここで横並びの設定を行います。
Ｗｅｂビューアの横幅サイズをＣＳＳで調整するとき、％だとうまく取得できずに幅調整がうまくできないため、ここでは、ボタンを囲む親のDIVタグで横幅サイズを指定し、子のクラスで良い感じに設定するようにflex-basisで幅を％で指定しています。
シンプルに設定しているので自由に変更して、気に入るデザインに変えていきましょう！

Webビューア設定

ここで重要なのはカスタムWebを選択、HTMLを生成する計算フィールドを指定し、JavaScriptのチェックをOnにすることとです。

.

スクリプト

★HTML生成スクリプト

このスクリプトでは、横並びのボタン用のHTMLを生成しています。
まず、商品マスタに移動して、ループ処理で商品名と商品マスタIDを取得しています。
その際に、HTMLコードで取得した商品名と商品マスタIDを挟みながら変数に追加していってます。
ポイントは、HTMLコードの生成です！
ClassはJavaScriptで拾うために決めた”button"を指定。Idは、商品IDをセットします（レシート明細にセットするのに使います）
変数はすでに計算式に埋め込んでいるので自動で反映されます。画面が重くなって読み込まなくなってきた場合は「ウインドウ内容の再表示」スクリプトを活用しましょう。

.

★JavaScriptからキックするファイルメーカー内のスクリプト

次に、JavaScriptでキックされるスクリプトです。
JavaScriptで記述する名称と同じ名称を使用します。なるべく半角英数字でスクリプト名を設定しましょう（設定時の全角などの名称間違い防止のために！）
スクリプト引数でJavaScriptで設定した引数を取得し、セットしていきます。改行区切りで複数取得できるのでGetValueで取得しなおしましょう。
あとは、いつも通りスクリプトを組むだけ！簡単！

.
以上で、今回の簡単Ｗｅｂビューア画面の説明は終了です。

ココから細かい設定を追加していくとより複雑なものが出来ていきます。