皆さん、ForguncyアプリでQRコードを取り扱ったことはありますか?

Forguncyのモバイルアプリでは、「QRコード読み込み」がコマンドの機能として標準搭載されています!お読みいただいている方の中にもモバイルアプリ経由で使ったことがある方がいらっしゃるかもしれませんが、機能があるのは知ってるけれども試したことがない方も多いのでは?私は後者でした。

特にForguncyのPCアプリにおいては、QRコードに関するコマンドの機能も用意されておらず、そもそも使えることすら知らない人が多数派なのでは?と感じています。

今回は実際に、PCにUSBタイプのQRコードリーダーをつないで使う、受付アプリを作ってみました。

QRコードリーダーについては、マウスやキーボードと同様に入力装置に該当します。Forguncyアプリの設計を工夫することで、QRコードリーダー経由でデータを利用することができます。

アプリのファイルや使用したQRコードリーダーなども紹介しますので、みなさんがアプリを設計される際に「こんな方法もあるぞ!」という感じで参考にしてもらえたら嬉しいです。

このページでは以下のことがわかります!

  • ForguncyでのQRコードの使い方
  • 受付アプリの仕組み

このページの想定読者

  • Forguncyをもっと使いこなしたい人
  • QRコードを使ったシステムを作ってみたい人

このページの情報はV8以降で動作確認済みです。

デモアプリ(受付システム)の説明

前提!※USBのQRコードリーダーを使用しています。もちろんForguncyライセンスには含まれないので別売りです。※

今回のデモアプリで作るページは、

 ①コード読み込みページ

 ②受付結果確認ページ

のシンプルな2ページ構成です。これだけで受付システムの基本的な動作は実現できます。

各ページの設定詳細については後述。

テーブルについて、「uketuke」というテーブルを用意しました。

受付けたらステータスを変えるだけなので、簡単な構成です。

事前準備(物理)

①QRコードリーダー
 QRコードリーダーは以下のものを使用しました。

 ・YH1795JP(amazonで3000~4000円程度)

②QRコード
 受付するためにはQRコードをあらかじめ作っておく必要があります。
今回QRコード作成は以下のサイトで出力してみました。

https://www.cman.jp/QRcode

実際に作成したデモ用のQRコード

↑このQRコードは「3」という数値が入っています。
今回のアプリで読み込むとID=3のレコードが読み込まれます。

補足ですが、Forguncy上でもQRコードの生成が可能です。

動的にQRコードが作れるので使い勝手が良い機能です。

公式マニュアルに情報があるので、ぜひこちらも見ていただきたいです。

マニュアルはこちら

外観の紹介(物理)

ノートPCのUSBポートにQRコードリーダーを接続しただけの、シンプルな構成です。

屋外であっても持ち出して活用できる可能性を感じます。

実際のシステムの動き

全体の動作イメージは以下の図の通りです。

PCでアプリ(コード読み込みページ)を立ち上げた状態で待ち構えて、QRコードリーダーで読み取ると、テーブルのIDと突合した上で受付確認ページに遷移します。
このピッ!と鳴ってページが遷移してくれる動きがすごい面白いです!
あんなことにも使えるかも?なんて想像も湧いてくるので、ぜひ試してみてほしいです。

アプリの設定詳細について

各ページの設定を紹介します。まず①コード読み込みページから。

読み込みと書かれた入力欄(テキストボックス)とリストビューが配置されています。
ピッ、をすると読み込み部にQRコードリーダーで読み込んだ値が入ります(デモでは3が入っていた部分)。

今回のデモでは、QRコードリーダーで読み込んだ結果と、テーブルに登録済みのIDを突合させて、ステータスを変化させています。
社員の出勤管理のイメージに近いです。
動作状況を分かりやすくするため、処理状況一覧としてリストビューを置いて表示させています。

ポイントは赤枠の読み込み部とページロード時のコマンドです。

まずページロード時のコマンドから見ていきます。

以下の図がページロード時のコマンドです。フォーカス設定というコマンドは入力カーソルを指定できるので、

ページが読み込まれるたびに、読み込み部に入力カーソルが出ている状態にします。
これで安定してQRコードを受け付ける状態が維持できます。

下図はデバック時の様子です。
入力欄に「|」が表示されて、入力する準備ができた状態になりました。

次に読み込み部のコマンドを見ていきましょう。

特に複雑な処理はしていません。

まず条件分岐で読み込み部(ここではC7セルのテキストボックス)が空白かどうかを判定しています。
QRコードを読み取ったとき、つまり空白でなくなった場合に、処理を指示していきます。

次にテーブルデータの更新コマンドで、受付テーブルの「ステータス」列を更新します。

QRコードリーダーで読み込んだ値と一致するIDのレコードを「受付済み」に更新します。

テーブルデータの更新後にリストビューを更新し、確認画面(ページ2)へと遷移させます。

遷移先の②の受付確認ページを見ていきましょう。

この画面は受け付けたデータを表示しています。

先ほどの画面からID情報が引き渡されているため、受付された方が自動的に表示されるようになっています。

最後に「コード読み込み画面に戻る」ボタンを押すと①の画面に戻ります。
これで続けて次の人の受け付けをすることができる、というイメージです。

終わりに

いかがでしたでしょうか。

バーコードリーダーとQRコードを使用することで簡単に受付の仕組みを作ることができます。

実際のfgcpファイルも置いておきますで、

QRコードリーダー気になるけど使ったことないな、という方は参考にしてもらえれば嬉しいです。

デモファイルはこちら(.fgcp形式のファイルです)

実際に利用される際はエラー処理など適宜必要な処理を追加してください。

【著者】

haru

Forguncyをさらに知って、良いアプリを作っていきましょう!

Forguncyに出会った時にこんなに簡単にWEBアプリを作れるツールがあるのかと衝撃を受け、Forguncyアプリ開発のファンになりました。開発ハードル低さや生産性の高さを多くのForgncyの利用者に知ってもらうため、たくさん記事を書いていきます!

これまでサーバー周りからソフト開発まで幅広く実施してきましたが、最近では生成AIやデータ活用に関して調査をしています。良い機会なので社会的関心が高いところとForguncyを絡めた記事を書いていく予定です!