在庫管理アプリを作りながら、AppSheetの使い方を学びましょう。
前回（第1回）は在庫管理アプリの概要について紹介しました。
今回は、実際にアプリを作成してみましょう。
スプレッドシートをGoogleドライブにアップロードして、テーブルと列の設定まで進めます。
【お知らせ】
2022年10月以降、AppSheetエディタの画面が新しく変更されています。
AppSheetのアップデートが速すぎて（汗）、このブログ記事はまだ新エディタの画面には対応していません。
エディタ画面右上にある「Switch to the legacy editor」というアイコンをクリックすると、新エディタと旧エディタの切り替えができます。
記事のアップデートができるまでは、とりあえず、旧エディタに切り替えて解説を読んでください。
※2022年1月22日修正
QRコードのPDF出力に関するバグを修正しました。
それにともない、QRコードの解説を修正し、「QRコード」の列タイプをVirtual Columnに変更しました。
目次
1. スプレッドシートを作成する
それではアプリを作成していきましょう。
AppSheetアプリにはエクセルやGoogleスプレッドシートなどのデータが必要です。
このブログでは、在庫管理アプリのサンプルデータとしてエクセルのデータを用意しました。
まずは、下のエクセルのアイコンをクリックして、データをダウンロードしてください。
Googleアカウントにログインして、Googleドライブにエクセルのデータをアップロードしましょう。
Googleドライブ上でエクセルデータを開いた後、Googleスプレッドシートに変換して保存しておきます。
Googleスプレッドシートに変換して保存しました。
2. AppSheetアプリを生成する
AppSheetにログインして、「Make a new app」をクリックします。
「Start with your own data」をクリックします。
App name（アプリ名）には日本語が入力できないので、とりあえず「InventoryApp」にします。
Category（カテゴリー）は選択しなくてもよいです。
Choose your data（ファイルを選択）でさきほど保存したGoogleスプレッドシート（在庫管理）を選択して「select」をクリックします。
アプリが生成できました。
画面右にプレビューが表示すると下のようになります。
3. 在庫管理アプリのテーブルを追加する
AppSheetエディタの左側メニューにある「Data」をクリックして、データを確認しましょう。
タブメニュー「Tables」をクリックするとテーブルが表示されます。
テーブルとは、アプリからデータを追加したり、更新したり、削除できるデータの格納庫です。
「品目」というテーブルをクリックしてみましょう。
「View Source」をクリックするとアプリに取り込んだスプレッドシートが表示されます。
「品目」というワークシートがあり、テーブル名になっています。
ここで、在庫管理アプリで使用するテーブルを追加しましょう。
他に「入出庫履歴」というシートがありますね。このテーブルを追加します。
AppSheetエディタ画面に戻って「Data」→「Tables」でテーブル設定を続けます。
「New Table」の右に「Add a table for "入出庫履歴"」というボタンがあります。このボタンをクリックしましょう。
「入出庫履歴」のテーブルができました。
テーブルの設定は特に変更する必要はありません。次に進みましょう。
4. AppSheetに品目マスタを登録する
「品目」テーブルの列を設定しましょう。
このテーブルはAppSheetで品目のマスタデータを登録して、在庫量を表示するためにも使います。
AppSheetエディタの左側メニューにある「Data」を選択した状態で、タブメニュー「Columns」または、テーブルパネルの「View Columns」をクリックしましょう。
各テーブルの「列（Columns）」が一覧で表示されます。
列には、アプリから追加した各項目のデータの値（文字、数字、日付、時間など）が保存されます。
アプリから追加したデータは、スプレッドシートでは1行ずつ記録されていきます。
この1行のデータを「レコード」と呼びます。
それでは、「品目」テーブルの列を設定していきましょう。
下の表のように、各列のフィールドを設定してください。
「品目」テーブルの列設定
| NAME | TYPE | KEY | LABEL | SHOW? | EDITABLE? | REQUIRE? |
|---|---|---|---|---|---|---|
| _RowNumber | Number | |||||
| ID | Text | check | check | check | ||
| コード選択 | Enum | check | check | check | ||
| バーコード | Text | check | check | |||
| 品目名 | Text | check | check | check | check | |
| 保管場所 | Text | check | check | |||
| 数量 | Number | check | check | check | ||
| 写真 | Image | check | check | |||
| QRコードファイル | File | check | check | |||
| 作成日時 | DateTime | check | check | check | ||
| 最終更新日時 | DateTime | check | ||||
| Related 入出庫履歴s | List | check |
「品目」テーブルの各列について設定します。
ID
「ID」列については電子名刺アプリで詳しい説明をしていますので、こちらを参照してください。
それでは「ID」列を設定しましょう。
「ID」の左にあるペン型の編集アイコンをクリックすると、「ID」列の設定パネルが表示されます。
Auto Compute → Initaial Value（初期値）を設定します。
「UNIQUEID()」という式が既にあると思いますが、これから別の式に上書きします。
三角フラスコアイコンをクリックします。
今回「ID」には、QRコードの文字列かバーコードの文字列（13桁の数字）か、どちらかを使用したいと思います。
QRコードは、アプリで生成するユニークな値を使用するので、UNIQUEIDというAppSheet関数を使用します。
バーコードは、後で設定する「バーコード」列でスキャンした値を使用します。
- QRコードを使用する時：UNIQUEID関数でユニークな値を生成して「ID」にする
- バーコードを使用する時：「バーコード」列でスキャンした値を「ID」にする
以上を式にすると、次のようになります。
Expression Assistant に、そのままコピペして「Save」をクリックして保存します。
IF( [コード選択] = "QRコード", UNIQUEID(), [バーコード] )
以上の式は、「品目のコードにQRコードを使うならUNIQUEID、それ以外はスキャンしたバーコードの値を保存してIDにします」という意味です。
コード選択
「コード選択」列は、品目を識別するコードをQRコードにするか、バーコードにするかを選択するために使用します。
「コード選択」列はTYPEを「Enum」にしています。
「Enum」は、ボタンやプルダウンリストなどで値が選択できる列タイプです。複数の選択肢の中からひとつを選択する時に使います。
「コード選択」の左にあるペン型の編集アイコンをクリックすると、「コード選択」列の設定パネルが表示されます。
Type Details を以下のように設定します。
- Values ：「Add」で「QRコード」「バーコード」を追加
- Allow other values：チェックを外す
- Base Type：「Text」
- Input mode：「Buttons」
バーコード
「バーコード」列は、バーコードをスキャンするために使用します。
列設定パネルを右にスクロールして、「バーコード」列の「SCAN?」をチェックしてください。
QRコードはアプリ側で作成するため、スキャンする必要はありません。
作成日時
「作成日時」列に、品目マスタを作成した日時を保存しておきます。
「作成日時」の左にあるペン型の編集アイコンをクリックして、列設定パネルを表示します。
Auto Compute → Initaial Value（初期値）を設定します。
三角フラスコアイコンをクリックします。
Expression Assistant が表示されます。以下のように入力して「Save」をクリックします。
NOWというAppSheet関数は今日の日付を入力する関数です。
現在日時を入力する。
終わったら、「Done」をクリックして設定パネルを閉じます。
最終更新日時
続けて、「最終更新日時」列を設定しましょう。
「最終更新日時」列には、品目マスタを更新した日時を保存しておきます。
ペン型の編集アイコンをクリックして、列設定パネルを表示します。
今度は、Auto Compute → App formulaを設定します。
三角フラスコアイコンをクリックします。
Expression Assistant が表示されます。
「作成日時」と同じように「NOW()」を入力して「Save」をクリックします。
このようになっていれば大丈夫です。
QRコード
ここで、QRコードをPDFで出力するための列をVirtual Columnで追加します。
Virtual Column とは文字通り「仮想的な列」なので、「品目」テーブルのスプレッドシートに値を保存しません。
QRコードの画像は、PDF出力するときだけ必要になります。
PDF出力する時だけQRコード画像のURLを生成するので、Virtual Columnを使ってみましょう。
QRコードの生成には、「TEC-IT」というQRコードジェネレーターを使用します。
では、Virtual Columnを作成しましょう。
AppSheetエディタの左側メニュー「Data」をクリックします。
タブメニュー「Columns」をクリックして、「品目」をクリックして列設定パネルを開きます。
「Add Virtual Column」をクリックして、Virtual Columnを追加します。
Column nameに列名「QRコード」を入力します。
次に、App formulaを設定しましょう。三角フラスコアイコンをクリックします。
Expression Assistantに以下の式をコピペしてください。
IF( [コード選択] = "QRコード", CONCATENATE("https://qrcode.tec-it.com/API/QRCode?data=", [ID], "&dpi=96" ), "" )
見やすく改行すると、こんな感じです。
QRコードは、「コード選択」列で「QRコード」を選択したときだけ生成すればよいので、IF関数で分岐しています。
QRコードジェネレーターのURLは、
- "https://qrcode.tec-it.com/API/QRCode?data="（QRコードジェネレーターのURL）
- 「ID」（QRコードを生成したい文字列）
- "&dpi=96"（画像の大きさ）
という、3つの文字列を組み合わせています。
このように、複数の文字列をつなげてひとつの文字列を生成するときには、CONCATENATEというAppSheet関数を使用します。
（）の中に、つなげたい文字列や [ 列名 ] をカンマ（, ）で区切って列挙します。
以上で、QRコードジェネレーターが「ID」列の文字列をQRコードにしてくれます
App formulaを設定すると、以下のようになります。
最後に、Typeで列タイプを「Image」にして、「Save」をクリックして保存してください。
「品目」テーブルの列設定は以上です。
設定ができたら、画面右上の「SAVE」をクリックして保存してください。
AppSheetには自動的に保存する機能がありません。
設定を変更したら必ず「SAVE」で保存することを忘れずに。
5. AppSheetで入出庫棚卸を記録する
続けて、「入出庫履歴」テーブルの列を設定してきましょう。
このテーブルには、AppSheetから入出庫や棚卸を記録していきます。
AppSheetエディタの左側メニューにある「Data」を選択した状態で、タブメニュー「Columns」→ 「入出庫履歴」をクリックして、列設定パネルを開きます。
下の表のように、各列のフィールドを設定してください。
「入出庫履歴」テーブルの列設定
| NAME | TYPE | KEY | LABEL | SHOW? | EDITABLE? | REQUIRE? |
|---|---|---|---|---|---|---|
| _RowNumber | Number | |||||
| ID | Text | check | check | check | ||
| 品目 | Ref | check | check | check | check | |
| 操作内容 | Enum | check | check | check | ||
| 変更前の数量 | Number | check | check | |||
| 数量 | Number | check | check | check | ||
| 数量の増減 | Number | check | check | |||
| 変更後の数量 | Number | check | check | |||
| メモ | LongText | check | check | |||
| 作成日時 | DateTime | check | check | check |
「入出庫履歴」テーブルの各列について設定していきます。
品目
「品目」列は、入出庫記録の際に品目のコード（QRコードまたはバーコード）をスキャンして読み取るために使用します。
列設定パネルを右にスクロールして、「品目」列の「SCAN?」をチェックしてください。
また、「品目」列のTYPEは「Ref」にしています。
「Ref」は、別テーブルの列の値を参照したり、テーブル間のリレーションシップを設定する列タイプです。
- 別テーブルの値を参照して、リスト表示などに使用する
- テーブル間のリレーションシップを設定する
「品目」の左にあるペン型の編集アイコンをクリックして、設定パネルが表示しましょう。
Type Details の「Source table」を「品目」にしてください。
操作内容
「操作内容」列は、「入庫」「出庫」「棚卸」から操作をひとつ選択する「Enum」列にしています。
また、選択した操作内容で、他の列の表示を切り替えます。設定は次回（第3回）行います。
ペン型編集ボタンをクリックして、列設定パネルを開いてください。 Type Details を以下のように設定します。
- Values ：「Add」で「入庫」「出庫」「棚卸」を追加
- Allow other values：チェックを外す
- Base Type：「Text」
- Input mode：「Buttons」
数量
入庫や出庫の数量を入力する列です。 列TYPEを「Number」にしていますが、ここでは入力しやすさを考えて「Range」モードを使ってみましょう。
ペン型編集ボタンをクリックして、列設定パネルを開いてください。 Type Details を以下のように設定します。
- Show thousands separator：チェックする
- Display mode:：「Range」
- Maximum value：「50」
- Minimum value：「1」
- Increase/decrease step：「1」
今回は例として「Maximum value（最大値）」を50にしています。
取り扱っている品目次第で、ここの値を変えて大丈夫です。
作成日時
「作成日時」列は、「品目」テーブルと同じです。入出庫履歴を作成した日時を保存します。
「入出庫履歴」テーブルの列設定パネルから直接編集しましょう。
右側にスクロールして「作成日時」の「INITIAL VALUE」フィールドをクリックしましょう。
Expression Assistant が表示されるので、「NOW()」を入力して「Save」をクリックします。
以上、在庫管理アプリを生成してみました。
使いやすいアプリにするためには、もっと細かい設定が必要になりますが、今回（第2回）は説明が長くなってしまったので次回以降で解説します。
次回（第3回）は、AppSheet AutomationでQRコードをPDFファイルで出力します。
Googleドキュメントでひな形を作っておくと、PDFファイルを簡単に出力できるようになります。
Automationの基本的な設定方法についても詳しく解説します。
