AppSheetで在庫管理アプリ(第2回)スプレッドシートからアプリ作成

folder_openAppSheet

在庫管理アプリを作りながら、AppSheetの使い方を学びましょう。
前回(第1回)は在庫管理アプリの概要について紹介しました。
今回は、実際にアプリを作成してみましょう。
スプレッドシートをGoogleドライブにアップロードして、テーブルと列の設定まで進めます。

【お知らせ】
2022年10月以降、AppSheetエディタの画面が新しく変更されています。
AppSheetのアップデートが速すぎて(汗)、このブログ記事はまだ新エディタの画面には対応していません。
エディタ画面右上にある「Switch to the legacy editor」というアイコンをクリックすると、新エディタと旧エディタの切り替えができます。
記事のアップデートができるまでは、とりあえず、旧エディタに切り替えて解説を読んでください。

Switch to the legacy editor」で旧エディタに切り替える。

※2022年1月22日修正
QRコードのPDF出力に関するバグを修正しました。
それにともない、QRコードの解説を修正し、「QRコード」の列タイプをVirtual Columnに変更しました。

1. スプレッドシートを作成する

それではアプリを作成していきましょう。
AppSheetアプリにはエクセルやGoogleスプレッドシートなどのデータが必要です。
このブログでは、在庫管理アプリのサンプルデータとしてエクセルのデータを用意しました。
まずは、下のエクセルのアイコンをクリックして、データをダウンロードしてください。

Googleアカウントにログインして、Googleドライブにエクセルのデータをアップロードしましょう。

GoogleドライブにエクセルのAppSheetデータをアップロードする。

Googleドライブ上でエクセルデータを開いた後、Googleスプレッドシートに変換して保存しておきます。

エクセルデータをGoogleスプレッドシートに変換する。

Googleスプレッドシートに変換して保存しました。

Googleスプレッドシートに変換して保存した。

2. AppSheetアプリを生成する

AppSheetにログインして、「Make a new app」をクリックします。

AppSheetにログイン後、「Make a new app」をクリックする。

「Start with your own data」をクリックします。

「Start with your own data」をクリックする。

App name(アプリ名)には日本語が入力できないので、とりあえず「InventoryApp」にします。
Category(カテゴリー)は選択しなくてもよいです。

「Create a new app」を設定する。

Choose your data(ファイルを選択)でさきほど保存したGoogleスプレッドシート(在庫管理)を選択して「select」をクリックします。

Googleスプレッドシートを選択してAppSheetアプリを生成する。

アプリが生成できました。
画面右にプレビューが表示すると下のようになります。

AppSheetエディタのプレビュー画面にアプリが表示される。

3. 在庫管理アプリのテーブルを追加する

AppSheetエディタの左側メニューにある「Data」をクリックして、データを確認しましょう。
タブメニュー「Tables」をクリックするとテーブルが表示されます。
テーブルとは、アプリからデータを追加したり、更新したり、削除できるデータの格納庫です。
「品目」というテーブルをクリックしてみましょう。

AppSheetエディタでテーブルを表示する。

「View Source」をクリックするとアプリに取り込んだスプレッドシートが表示されます。
「品目」というワークシートがあり、テーブル名になっています。

列を表示する。

ここで、在庫管理アプリで使用するテーブルを追加しましょう。
他に「入出庫履歴」というシートがありますね。このテーブルを追加します。
AppSheetエディタ画面に戻って「Data」→「Tables」でテーブル設定を続けます。

「New Table」の右に「Add a table for "入出庫履歴"」というボタンがあります。このボタンをクリックしましょう。

AppSheetアプリのデータソースとしてテーブルを追加する。

「入出庫履歴」のテーブルができました。
テーブルの設定は特に変更する必要はありません。次に進みましょう。

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」列の設定パネルが表示されます。

IDを設定する

Auto Compute → Initaial Value(初期値)を設定します。
「UNIQUEID()」という式が既にあると思いますが、これから別の式に上書きします。
三角フラスコアイコンをクリックします。

Initial Valueを設定する。

今回「ID」には、QRコードの文字列かバーコードの文字列(13桁の数字)か、どちらかを使用したいと思います。
QRコードは、アプリで生成するユニークな値を使用するので、UNIQUEIDというAppSheet関数を使用します。
バーコードは、後で設定する「バーコード」列でスキャンした値を使用します。

ID列の設定
  • QRコードを使用する時:UNIQUEID関数でユニークな値を生成して「ID」にする
  • バーコードを使用する時:「バーコード」列でスキャンした値を「ID」にする

以上を式にすると、次のようになります。
Expression Assistant に、そのままコピペして「Save」をクリックして保存します。

IF([コード選択] = "QRコード", UNIQUEID(),[バーコード])

Expression Assistantに式を入力する。

以上の式は、「品目のコードにQRコードを使うならUNIQUEID、それ以外はスキャンしたバーコードの値を保存してIDにします」という意味です。

コード選択

「コード選択」列は、品目を識別するコードをQRコードにするか、バーコードにするかを選択するために使用します。
「コード選択」列はTYPEを「Enum」にしています。
「Enum」は、ボタンやプルダウンリストなどで値が選択できる列タイプです。複数の選択肢の中からひとつを選択する時に使います。

「コード選択」の左にあるペン型の編集アイコンをクリックすると、「コード選択」列の設定パネルが表示されます。

「コード選択」列は、AppSheetで品目を読み取る際に、QRコードかバーコードかを選択するために使用する。

Type Details を以下のように設定します。

  • Values :「Add」で「QRコード」「バーコード」を追加
  • Allow other values:チェックを外す
  • Base Type:「Text」
  • Input mode:「Buttons」

「Enum」を設定する。

バーコード

「バーコード」列は、バーコードをスキャンするために使用します。
列設定パネルを右にスクロールして、「バーコード」列の「SCAN?」をチェックしてください。

QRコードはアプリ側で作成するため、スキャンする必要はありません。

AppSheetでコードをスキャンするために、「SCAN?」にチェックを入れる。

作成日時

「作成日時」列に、品目マスタを作成した日時を保存しておきます。
「作成日時」の左にあるペン型の編集アイコンをクリックして、列設定パネルを表示します。

「作成日時」を設定する。

Auto Compute → Initaial Value(初期値)を設定します。
三角フラスコアイコンをクリックします。

Initial Valueを設定する。

Expression Assistant が表示されます。以下のように入力して「Save」をクリックします。
NOWというAppSheet関数は今日の日付を入力する関数です。

AppSheet列設定パネル、Expression AssistantでNOW関数を設定する。

 

NOW()

現在日時を入力する。

終わったら、「Done」をクリックして設定パネルを閉じます。

「Done」をクリックして、AppSheetの列設定パネルを閉じる。

最終更新日時

続けて、「最終更新日時」列を設定しましょう。
「最終更新日時」列には、品目マスタを更新した日時を保存しておきます。
ペン型の編集アイコンをクリックして、列設定パネルを表示します。

今度は、Auto Compute → App formulaを設定します。
三角フラスコアイコンをクリックします。

App formulaを設定する。

Expression Assistant が表示されます。
「作成日時」と同じように「NOW()」を入力して「Save」をクリックします。

AppSheet列設定パネル、Expression AssistantでNOW関数を設定する。

このようになっていれば大丈夫です。

AppSheetで設定パネルを確認する。

QRコード

ここで、QRコードをPDFで出力するための列をVirtual Columnで追加します。
Virtual Column とは文字通り「仮想的な列」なので、「品目」テーブルのスプレッドシートに値を保存しません。

QRコードの画像は、PDF出力するときだけ必要になります。
PDF出力する時だけQRコード画像のURLを生成するので、Virtual Columnを使ってみましょう。

QRコードの生成には、「TEC-IT」というQRコードジェネレーターを使用します。

QRコードジェネレーター

では、Virtual Columnを作成しましょう。
AppSheetエディタの左側メニュー「Data」をクリックします。
タブメニュー「Columns」をクリックして、「品目」をクリックして列設定パネルを開きます。

「Add Virtual Column」をクリックして、Virtual Columnを追加します。

VIrtual Columnを追加する

Column nameに列名「QRコード」を入力します。
次に、App formulaを設定しましょう。三角フラスコアイコンをクリックします。

列名を「QRコード」にして、App formulaを設定する。

Expression Assistantに以下の式をコピペしてください。

IF( [コード選択] = "QRコード", CONCATENATE("https://qrcode.tec-it.com/API/QRCode?data=", [ID], "&dpi=96" ), "" )

見やすく改行すると、こんな感じです。

Expression Assistantに式を入力する。

QRコードは、「コード選択」列で「QRコード」を選択したときだけ生成すればよいので、IF関数で分岐しています。

QRコードジェネレーターのURLは、

  • "https://qrcode.tec-it.com/API/QRCode?data="(QRコードジェネレーターのURL)
  • 「ID」(QRコードを生成したい文字列)
  • "&dpi=96"(画像の大きさ)

という、3つの文字列を組み合わせています。
このように、複数の文字列をつなげてひとつの文字列を生成するときには、CONCATENATEというAppSheet関数を使用します。
()の中に、つなげたい文字列や [ 列名 ] をカンマ(, )で区切って列挙します。

CONCATENATE関数 CONCATENATE("文字列1", "文字列2", "文字列3", ・・・)

以上で、QRコードジェネレーターが「ID」列の文字列をQRコードにしてくれます
App formulaを設定すると、以下のようになります。

最後に、Typeで列タイプを「Image」にして、「Save」をクリックして保存してください。

列タイプを「image」にする。

「品目」テーブルの列設定は以上です。
設定ができたら、画面右上の「SAVE」をクリックして保存してください。

AppSheetには自動的に保存する機能がありません。
設定を変更したら必ず「SAVE」で保存することを忘れずに。

「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?」をチェックしてください。

AppSheetでコードをスキャンするために、「SCAN?」にチェックを入れる。

また、「品目」列のTYPEは「Ref」にしています。
「Ref」は、別テーブルの列の値を参照したり、テーブル間のリレーションシップを設定する列タイプです。

Ref
  • 別テーブルの値を参照して、リスト表示などに使用する
  • テーブル間のリレーションシップを設定する

「品目」の左にあるペン型の編集アイコンをクリックして、設定パネルが表示しましょう。
Type Details の「Source table」を「品目」にしてください。

AppSheetの列設定パネル、「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」

「Number」列のDisplay modeを「Range」にする。

今回は例として「Maximum value(最大値)」を50にしています。
取り扱っている品目次第で、ここの値を変えて大丈夫です。

作成日時

「作成日時」列は、「品目」テーブルと同じです。入出庫履歴を作成した日時を保存します。

「作成日時」を編集する。

「入出庫履歴」テーブルの列設定パネルから直接編集しましょう。
右側にスクロールして「作成日時」の「INITIAL VALUE」フィールドをクリックしましょう。

「INITIAL VALUE」フィールドをクリックして、直接編集する。

Expression Assistant が表示されるので、「NOW()」を入力して「Save」をクリックします。

AppSheet列設定パネル、Expression AssistantでNOW関数を設定する。

以上、在庫管理アプリを生成してみました。
使いやすいアプリにするためには、もっと細かい設定が必要になりますが、今回(第2回)は説明が長くなってしまったので次回以降で解説します。

次回(第3回)は、AppSheet AutomationでQRコードをPDFファイルで出力します。
Googleドキュメントでひな形を作っておくと、PDFファイルを簡単に出力できるようになります。
Automationの基本的な設定方法についても詳しく解説します。

Share Me!

前の投稿
AppSheetで在庫管理アプリ(第3回)AutomationでQRコードをPDF出力
次の投稿
AppSheetで在庫管理アプリ(第1回)QRコード、バーコードで業務効率化

関連記事

メニュー