tsubasatwi( つばさ） 
こんにちは、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個入荷されたらシート１に10個入荷という数字に反映させたいですよね。
ここで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コードを実装していきます。まずは、ＱＲコードをカメラで読んだときに、表示されるＵＲＬを作成していきます。
Gogleフォームの設定から、事前入力したURLを選択します。
ここは、何でも良いのですが、それぞれ一番上にあるものを選びました。
リンクを取得したものをGoogleスプレットシートに張り付けます。
今回の場合は、
entry.1947896047
entry.910477174 というところで事前に入力をされたものが２つあることが分かります。
それぞれ、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("https://chart.apis.google.com/chart?cht=qr&chs=170x170&chl=G2")
IMAGE関数の説明はこちらに詳細があります
以下のようにQR画像が表示されれば成功です。あとは、実際に読み取ってみてGoogleフォームが反映されているのを確認してみましょう。
まとめ
今回、GoogleスプレットシートとGoogleフォームのみでQRコードで読み取る在庫管理システムを作りました。近日中に、動画もNoCodeTvでアップします。
今回は、NoCodeCampのmasssaさんの農産物の収穫・選果管理システム【コンセプト】 からインスピレーションをもらい参考にさせて頂きました。こちらはGlideで実装されたプロジェクトですが、GAS使わないでなんとかならないかな～と考えて、かなり構成は変わってしまいましたが、「こういう感じでの在庫管理もできる」かなと考えてみました。構築よりもブログ書く方が時間がかかってしまいましたが。。ｗ
たまには、Googleスプレットシート系で実装するノーコードもいいですよね。それでも今日も良いノーコードライフを♪
