WebビューアからJavaScript実行使って便利にしてみよう。

JavaScript実行スクリプトを使ったサンプルを作ってみました。
是非ともベストプラクティスにしてください。

FileMakerでQRコード生成。

今回は、そこそこ※ニーズがあるだろうQRコードのWebビューアで生成をしていきたいと思います。
（※個人的な主観です。）

今回はFileMakerというよりはJavaScript等々がメインになってしまいます...
私はFileMakerしかできないので、JavaScriptの書き方等々拙い文章で恐れ入りますが、ご参考になれば幸いです。

早速本題へ行ってみよう

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

exampleをみると、説明が書いてあります。
早速、FileMakeで使えるように実装します。

とは言え、何か例にしたい。
という事で下記を参照しました。

これを読んでいくと、

<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.qrcode/1.0/jquery.qrcode.min.js"></script> 
<script type="text/JavaScript"> 
    $(function(){
      var qrtext = "ここにQRコード化したいテキストを入力";
      var utf8qrtext = unescape(encodeURIComponent(qrtext));
      $("#img-qr").html("");
      $("#img-qr").qrcode({width:160,height:160,text:utf8qrtext}); 
    });
    </script>
</head>
<body>
<div id="img-qr"></div>
</body>
</html>

と書いてあります。
FileMakerに表示をするのであれば、Webビューアに、"data:text/html,"を追加すれば、表示出来ます。

上記コードを使えば、FileMakerのWebビューアにQRコードが表示されました。

・補足
後で色々調べたらめっちゃ綺麗な文章で書いてあったわ。

こちら参考にして頂いても可。

ここからが本番

ここまでは皆さんもご存知の方も多いのではないでしょうか。

私は無知故にここからこのQRコードをbase64エンコードしてオブジェクトフィールドに取り込みたい。
沼にハマってしまったわけです。

綺麗に書かれているなー。思ったのは、下記です。

読んでいくと、

FileMaker ユーザーに Chart.js をおすすめする決定的なポイント

上記の比較表をご覧いただいておわかりの通り、
Chart.js は Canvas を使って表示している点です。
Canvas はとてもかんたんに表示内容を画像化できます。

FileMaker Webビューアを使う際に印刷やPDF出力の問題があります。
Webビューアに表示される状態をそのまま印刷やPDF出力できません。
そこで、Chart.js の Canvas からかんたんに画像を FileMaker に渡します。
FileMaker で印刷やPDF出力する際は Webビューアを含んだレイアウトではなく、
Canvasから渡された画像を含んだレイアウトを使用することで解決できます。

Canvas を使用しないライブラリでは SVG を使うものがほとんどのようです。
高度にインタラクティブなグラフを表示するには SVG の方が有利です。
ですがこれらを勘案すると、FileMaker ユーザーには Canvas を使用する Chart.js がおすすめだと考えています。

と書かれています。

というわけでCanvas要素を確認していく。

作成されたQRコード画像のHTMLを見ると

の中にcanvas要素が作られている。だから表示されている画像データはjqueryで↓取得出来る。 var canvas = $(“#img-qr canvas”);

という事で、まずHTMLを少し改良しました。

<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.qrcode/1.0/jquery.qrcode.min.js"></script> 
<script type="text/JavaScript"> 
    $(function(){
      var qrtext = "ここにQRコード化したいテキストを入力";
      var utf8qrtext = unescape(encodeURIComponent(qrtext));

      $("#img-qr").html("");
      $("#img-qr").qrcode({width:160, height:160, text:utf8qrtext});

      var base64EncodedData = $("#img-qr canvas")[0].toDataURL().split(',')[1];

    });
</script>
</head>
<body>
<div id="img-qr"></div>
</body>
</html>

先ほどのグラフの画像化と同時に後はFileMakerでスクリプトを2点作成。
スクリプト名は分かりやすくGetQRImageとしました。

変数を設定[$imageqr;"FileMaker.PerformScript ('ReturnQRImage' , $(\"#img-qr canvas\")[0].toDataURL());"]
Webビューア で JavaScript を実行[オブジェクト名:"Viewer";
関数名:"eval";引数:$imageqr]

取得され戻ってくるスクリプト名ReturnQRImageにて取得します。

変数を設定[$param;Get ( スクリプト引数 )]
フィールド設定[table::Object;Base64Decode ( Substitute ( $param ; "data:image/png;base64," ; "" ) ; "qrcode.png" )]

これにてFileMakerのオブジェクトフィールドにQRコードが取得出来ました。

本当に大変だった。ありがとうーーーー！！！！！