QRコードの実装

2Reading Time

Jqueryを使ってQRコードを生成し、それをWEBビューアを使って表示する方法を使います。

QRコードの出力関数の作成

まずはQRコードを出力するHTMLを作成してみます。

QRコードを生成するjQueryファイルは、ダウンロードし、自社のサーバーへアップロードしています。
このHTMLをテキストフィールドに入れて、ウェブビューアーでそのフィールドを参照するとQRコードが出力されます。

カスタム関数化

このHTMLをカスタム関数化し、幅、高さ、QRコードのテキストを変数として渡してあげます。

ファイルメーカーのカスタム関数として登録します。

グローバルリンク - QRコードの実装

QRコード出力関数

引数は「qrwidth」「qrheight」「バーコード文字列」の3つ。

WEBビューアでQRコードを表示

WEBビューアを使って先ほど作成したカスタム関数を呼び出してQRコードを表示します。

グローバルリンク - QRコードの実装

「カスタムWEBアドレス」を選択し、WEBアドレスにはカスタム関数と引数を設定します。

グローバルリンク - QRコードの実装

これでQRコードを表示することが可能です。

グローバルリンク - QRコードの実装

 

QRコードの再表示

アプリを終了して再度起動したときに、QRコードが表示されませんでした。

なので、WEBビューアの再表示のコードを追加しました。

まずはWEBビューアにオブジェクト名を設定します。今回は「ojt_QRコード」。

QRコードの再表示するコードを追加

<pre>

Webビューアの設定[ オブジェクト名: “ojt_QRコード”; 処理: 再読み込み ]

</pre>

このコードスクリプトを画面読み込み時に実行されるようスクリプトトリガで設定します。

グローバルリンク - QRコードの実装

QRコードの読み取り

スクリプトで、「デバイスから挿入」を作成します。

「指定」で入力させたいフィールドを指定。
※画面上にそのフィールドが存在しないとカメラは起動しません。

「次から挿入」を「バーコード」を指定し、QRコードにチェックを入れます。

グローバルリンク - QRコードの実装

 

これでこのスクリプトを実行すると、カメラが起動して、バーコードを読み込み、「バーコード文字列」フィールドに値が入ります。

 

参考記事

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

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