Clickマニュアル/📚Click操作マニュアル/エレメント各種説明/バーコード生成・スキャナー
page icon

バーコード生成・スキャナー

  • バーコード生成 数値タイプのデータをバーコード表示することができます。
  • バーコードスキャナー 数値タイプのバーコードを読み取り、その数値を表示させます。
※スキャンの際は「CODE128」形式のバーコードを推奨しております。
 
目次

バーコード作成

サンプルアプリ
データベース内のデータをバーコード表示するためには、数値タイプの項目が必要となります。会員番号や製品番号などを作成し、その数値をバーコードとして表示します。　
バーコードを読み取ることでそのデータの 更新・削除 をすることができます。例えば、ユーザーにポイントやクーポンを 付与/使用 したり、物品の 貸出/返却 などをすることができます。

会員証を作る

バーコードエレメントの使用例として会員番号を用いたポイントアプリを作成します。

データベースの設定

Users テーブルに会員番号用の項目を作成します。
Users テーブルを開き、数値タイプの項目を作成します。（会員番号 とします。）

キャンバスの設定

バーコードを表示させる

バーコードを表示させるページを作成します。
「バーコード作成」エレメントを配置します。
 
「バーコードの値」に会員番号を表示させます。 カスタムテキストから「Logged In User > 会員番号」を選択します。
すると、ユーザーの会員番号が表示されるようになります。

バーコードスキャナー

サンプルアプリ
「CODE128」形式のバーコードを読み取ることができます。また、数値タイプ以外のデータを読み取ることはできません。 Click の「バーコード生成」にて作成されたものであれば問題なく読み取ることができます。

新規アプリ - データベースの共有

ユースケースを想定すると、バーコードを ”提示するためのアプリ” と ”読み取るためのアプリ” は別のアプリです。しかし、データベースは共有しなければなりません。ここではデータベースを共有した別アプリの作り方を説明します。

データベースの共有方法

  1. データベースを共有したいアプリを開きます。
  1. アプリの設定を開きます。
  1. 「アプリのコピー」をクリックします。
  1. 「🔘データベースを共有する」を選択します。
コピーしたアプリに必要ないページや機能は削除しましょう。

ポイントを付与する

読み込んだ会員番号と一致するユーザーにポイントを付与する機能を実装します。

データベースの設定

Users テーブルにポイント用の項目を作成します。
Users テーブルを開き、数値タイプの項目を作成します。（ポイント とします。）

キャンバスの設定

バーコードスキャナーを配置する

バーコードをスキャンするページを作成します。
「バーコードスキャナー」エレメントを配置します。

会員番号の一致するユーザーを表示

読み込まれた会員番号と一致するユーザーのみを表示する設定をします。
ユーザーを表示するためのリストを配置します。
 
フィルターの設定をします。 これはバーコードスキャナーで「読み込んだ会員番号と一致するユーザー」を表示する為です。
  1. 「 + OR 」をクリックして条件を設定していきます。
  1. 会員番号を選択します。
  1. 「空」ドロップダウンを変更します。 この設定では「会員番号が ”空（から）” と等しい」となっているため、「スキャンした会員番号と等しい」と設定します。
  1. 「Form Inputs > バーコードスキャナー 1」を選択します。

ポイントを付与する

タップしたユーザーにポイントを付与する設定をします。
  • ポイント付与とは？ 「既存ユーザーのデータ（ポイント項目）を更新」となります。 そのため、リストに ”ユーザーを更新する” ClickFlow を設定します。
 
ポイントを追加する設定をします。 具体的には「現在所有するポイントに〇〇ポイント追加する」となります。
  1. 現在のポイントを引用します カスタムテキストから「Current User > ポイント」を選択します。
  1. ポイントを追加します。 「現在のポイント」の後ろに ”+100（任意のポイント）” を入力します。
※ 数値タイプの項目は計算が可能なため、数学記号（+、- …）を使用することができます。

💡Tips

ポイントが付与されたかどうかわかりにくい…

ちゃんとユーザーをタップできたのか不安になり何度もタップしてしまう様なことが想定されます。つまり、アプリ利用者にわかりやすく示してあげることで解決することもあります！
 
ポイント付与時の確認モーダルや、ポイント付与後にその旨を表示させるだけで上記の不安や誤タップを解消することができます。
 
本マニュアルでは、バーコードエレメントの基本的な動作や設定を解説してきました。よりユーザーが使いやすいようにアップグレードしてみましょう！