GoogleスプレットシートとGoogleフォームでQRコード在庫管理システムを作ってみた

こんにちは、NoCodeCampのツバサです。

今回は、GoogleスプレットシートとGoogleフォームでQRコードの在庫管理システムを作ったので、作り方の紹介です。

完成イメージとしては、各倉庫にApple,Banana,OrangeのQRコードがあり、QRコード読み取り、数量を入れると、現在の在庫状況が記録されるというものです。Googleアカウントがあれば基本無料で作成できるので、在庫管理をしているけど、システム導入できないな~って人は、チャレンジしてみてください。

完成イメージのスプレットシート

事前準備

Googleアカウントを作成し、GoogleFormを作成してください。
GoogleDriveからGoogleFormを作成していきます。

フォルダから、右クリックで以下のような画面がでるので、Googleフォームを選択してください。
Googleフォームの使い方が分からない方は、
【2021年完全版】Googleフォームの使い方を徹底解説|作り方から作成例まで詳しく紹介 あたりを参考にして下さい。

Googleフォームで入力フォームを作る

Googleフォームで入力するフォームを作っていきます。
今回の必須なものは、商品名,入荷/出荷,数量をつくります。
商品名,入荷出荷は、ラジオボタンを使っていきます。

項目を作ったら、Googleスプレットシートを作成していきます。Googleフォーム側の操作は以上になります。

Googleスプレットシートで在庫管理票を作る

作成したGoogleスプレットシートを開けましょう。Googleフォームと同じ項目が作られていると思います。

ここには、Googleフォームで送信された内容が、追加されていきますので、ここに追加されたものを集計する表を作る必要があります。下の方にあるシートを追加する+ボタンを押して新しいシートを作って下さい。

シート1では、以下のように1行目に項目を、A2~は、商品名を入れていきます。
在庫数は、入荷-出荷 の数が入るようにします。

入荷数と出荷数のそれぞれの合計を計算する

ここから少し難しくなります。現在アンケートフォームを入力すると、商品名は順番に入るようになってます。
例えば、Appleが10個入荷されたらシート1に10個入荷という数字に反映させたいですよね。

ここでSumifs 関数を使って合計を求めます。
Sumifsとは、複数の条件を指定して数値を合計する関数になります。

【引用】できるネット SUMIFS関数で複数の条件を指定して数値を合計する

例えば、B2の列なら、以下のように記入します。

=Sumifs('フォームの回答 1'!$D$2:$D$100,'フォームの回答 1'!$B$2:$B$100,A2,'フォームの回答 1'!$C$2:$C$100,$B$1)

条件1は 商品名 (Apple)
条件2 は、入荷 or 集荷 を複合条件として入力してます。

QRコードを読み込んだ時にURLを作成する

ここまでで、アンケートフォームに入力すれば、在庫数が把握できるようになりました。
ここからは、QRコードを実装していきます。まずは、QRコードをカメラで読んだときに、表示されるURLを作成していきます。
Gogleフォームの設定から、事前入力したURLを選択します。

ここは、何でも良いのですが、それぞれ一番上にあるものを選びました。

リンクを取得したものをGoogleスプレットシートに張り付けます。
今回の場合は、
entry.1947896047
entry.910477174   というところで事前に入力をされたものが2つあることが分かります。

それぞれ、A2,B1に変更し、 あとは、コピぺで複製していきましょう。

注意として、GoogleフォームURLをそのまま、張り付けると&がつくのですが、このままだとQRコードで反映されないので、%26 に変更をします。

これは、コンフィグにURL文字列を設定するとき、URLに使用不可とされる文字を含めるには、URLエンコードした文字に置き換える必要があるためです。 詳しくは、以下のYahoo知恵袋を参考にどうぞ。

IMAGE関数とGoogleのAPIを使ってスプレッドシートにQRコードを表示させたいのですが、HTMLの末尾にGoogle Analyticsで見るパラメーター(”&”が付いています)をつけた場合、QRコードは生成されても、このパラメーター がURLに反映いたしません。

【TIPS】viewformのところを、formResponseに変更するとコードを読み込むだけで、自動でアンケートをフォームを登録することも可能です。

IMAGE関数でQRコードを作成

QRコードで表示するURLが作れましたので、最後にQRコードを表示します。
Googleスプレッドシートには、IMAGE()があるので、それを使います。

Google chart でパラメーターを確認できます。

今回は以下の入力をしていきます。
cht=qr ・・QR表示
chs=177×177   ・・QRのサイズ
chl=G2      ・・入荷URLの場所

IMAGE関数の説明はこちらに詳細があります

以下のようにQR画像が表示されれば成功です。あとは、実際に読み取ってみてGoogleフォームが反映されているのを確認してみましょう。

まとめ

今回、GoogleスプレットシートとGoogleフォームのみでQRコードで読み取る在庫管理システムを作りました。近日中に、動画もNoCodeTvでアップします。

今回は、NoCodeCampのmasssaさんの農産物の収穫・選果管理システム【コンセプト】 からインスピレーションをもらい参考にさせて頂きました。こちらはGlideで実装されたプロジェクトですが、GAS使わないでなんとかならないかな~と考えて、かなり構成は変わってしまいましたが、「こういう感じでの在庫管理もできる」かなと考えてみました。構築よりもブログ書く方が時間がかかってしまいましたが。。w

たまには、Googleスプレットシート系で実装するノーコードもいいですよね。それでも今日も良いノーコードライフを♪



この記事を書いた人

tsubasatwi( つばさ)

国立工業高専卒業(新居浜工業高等専門学校)
「イベント×IT×営業」のカスタマーサクセスマネージャーとして活躍。セールス→構築管理運用まで全体プロジェクト管理の豊富な経験あり。

・主にITに関するイベント集客/法人営業/開発を担当
・大手通信会社を中心にエンタープライズのIT導入を担当(B2B)

DMMで日本初の NoCodeサロン を運営
「NoCodeCamp プログラミングを使わないIT開発 」
https://lounge.dmm.com/detail/2549/