FileMaker 19の新機能「Web ビューアで JavaScript を実行」の使い方とインスペクタの活用方法

こんにちは。

株式会社フルーデンスの小巻です。

2020年05月21日にFileMaker 19がリリースされました。

今回は、タイトルの通りFileMaker 19の新機能「Web ビューアで JavaScript を実行」の使い方とインスペクタの活用方法について書きます。

サンプルファイル

以下のリポジトリからCloneか、ダウンロードしてください。

https://github.com/frudens/filemaker-webviewer-javascript

https://github.com/frudens/filemaker-webviewer-javascript/archive/master.zip

filemaker19-perform-javascript-in-web-viewer-15

filemaker19-perform-javascript-in-web-viewer-16

FileMakerからWeb ViewerのJavaScriptを実行(イメージ)

以下のスクショのように実行できます。

左のFileMakerの「fmToWeb」というボタンをクリックすると、Web ViewerのJavaScriptが実行されます。

filemaker19-perform-javascript-in-web-viewer-1

Web Viewerの準備

ここから、具体的な手順になります。

続きを読む →

filemaker-simple-qr-code-view-1

FileMakerで(jquery.qrcode.jsを使って)簡単にQRコードを表示する

こんにちは。

株式会社フルーデンスの小巻です。

FileMakerで、QRコードを表示したいことがありましたので、比較的簡単に実装できる方法を模索しました。

HTMLソース内で参照しているJavaScriptなどは、ご自分のS3などにホストして使ってください。

できること

  • 生成したQRコードを、Webビューアに表示する。

できないこと

  • 生成したQRコードを、オブジェクトフィールドに保存する。

QRコードをバイナリデータとして取得する部分につていは、AWS Lambda + API Gateway で別途記事にします。

ダウンロード

cloneするか、ダウンロードしてください。

https://github.com/frudens/filemaker-qr

jquery.qrcode.jsのドキュメントを確認する

最近は、積極的にJavaScriptを使うようにしています。(Node.js 楽しい!)

今回は、jquery-qrcodeというjQueryライブラリを使います。

https://github.com/jeromeetienne/jquery-qrcode

exampleをみると、説明の必要がないくらい簡単です。

早速、FileMakeで使えるように実装します。

まずは表示されることを確認する

  1. html(例として)フィールドに以下のHTMLを貼り付けます。
  2. Webビューアの計算式にhtmlフィールドを設定します。
  3. WebビューアにQRコードが表示されます。

filemaker-simple-qr-code-view-1

data:text/html,
<!DOCTYPE html>
<head>
<style>
#qrcodeTable {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
</style>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="http://jeromeetienne.github.io/jquery-qrcode/src/jquery.qrcode.js"></script>
<script src="http://jeromeetienne.github.io/jquery-qrcode/src/qrcode.js"></script>

<div id="qrcodeTable"></div>
<script>
jQuery('#qrcodeTable').qrcode({
  render  : "table",
  width  : 200,
  height  : 200
  text  : "https://frudens.jp"
});
</script>

</body>
</html>

続きを読む →