QRコードを用いたポイント機能の実装
対象環境
Webブラウザ、ネイティブアプリ（iOS,Android)
対象プラン
Freeプラン以上
サンプルアプリ
クローンURL
目的
QRコード生成およびQRコードスキャンエレメントを用いて、QRコードを用いたポイント機能を実装する手順をまとめます。
（前提）
- アプリにUsers（ユーザー）テーブルが存在し、ログイン機能が利用可能。
- 画面編集で「テキスト」「ボタン」「カスタムリスト」等のエレメントが利用可能。
- データ更新アクション（レコードの作成／更新）が利用可能。
- 以下の仕様でデモアプリを作成します。
（仕様）
ユーザーが会員証のQRコードを店員に提示する
↓
店員がQRコードを読み取る
↓
システムの会員情報と一致したらユーザーに１ポイントを付与する
1. Usersテーブルにポイント項目を追加
`Users`テーブルに、`ポイント`項目（数値型 ）を追加します。初期値が0になるよう、ユーザーの新規登録のアクションで0を入力するようにします。
2. 総ポイント数の表示
1. 表示したい画面にテキストエレメントを配置。
2. テキストの設定で「変数を追加」→ `logged in user` → `ポイント` を指定。
3. 同画面上でポイント更新が起きた際は最新値が反映されるよう、ページの設定で”自動更新”を選択します。
3. QRコード表示ボタンおよびQRコード表示画面の作成
総ポイント数表示画面の下部に、ＱＲコード表示ボタンを作成します。ボタンのアクションにページ移動を設定し、新規ページ作成で、ＱＲコード表示用のページを作成します。
ＱＲコードを表示するページを作成したら、ＱＲコード生成エレメントを設置します。
ＱＲコード生成エレメント（またはバーコード生成エレメント）を設置したら、値を設定します。ＱＲコードの場合は、メールアドレス等の文字列を設定できます。
＊ＱＲコードの代わりにバーコードを利用することもできます。その場合は、バーコード生成エレメントを設置します。
＊バーコードの場合は、ユーザー固有の番号（数値）をusersテーブルで設定し、バーコードの値とします。
4. QRコードスキャンページを作成する。
QRコードを用いたポイント機能アプリでは、通常、ユーザーのアプリでユーザー固有の値をコード表示して、ショップのアプリで読み取りして、ユーザーの確認を行って、そのユーザーにポイントを付与する、という流れになります。
ここでは、QRコードをスキャンし、ポイントを付与するページの作成を説明します。
１．コード読み取りエレメントを設置する。
２．インプットエレメントを設置する。バーコード読み取りの場合は、数値タイプにする。
また、不透過度を0にするなどでインプットが見えないようにする。
３．コード読み取りエレメントのアクション設定で、エレメントの値変更を選択し、インプットの値にコード読みとり結果を入力する。
（注）設定項目のプルダウンで、「QRコード読み取り」ではなく、「Form input」内の「コード良読み取り」を選択する。
４．usersテーブルのカスタムリストを配置する。カスタムフィルターで会員コード番号をインプットエレメントで絞り込みする。
５．カスタムリスト上に、ポイント付与ボタンを設置する。ボタンのアクションで、current userの更新を選択し、現在のポイント数に+1する処理を設定する。
最終更新日：2025/10/21