【AppSheetで在庫管理】商品情報を自動で取り付ける（Yahoo! APIと連携するプロセスを考える）

AppSheetで食料品の在庫管理アプリを作るシリーズ、家で買いだめするような缶詰やレトルトなどのバーコードを読み取り、在庫として管理するアプリをGoogleスプレッドシートとAppSheetを使って作っています。アプリ作成については以下記事のシリーズをご覧下さい。

バーコードからYahoo!の商品情報を読み込みたい

さて、アプリでは商品のバーコードを読み込み商品情報を登録していますが、商品名や商品イメージは手入力になっています。一回登録すれば良いのですが、やはり一つづつ入力していくのは面倒です。

であれば、バーコードから外部サービスで商品情報が読み込めれば良いのでは、ということで、ありました。Yahoo!がAPIで商品情報を提供していました。他にもAmazonなどのAPIでも情報取得できますがが食品関係はYahoo!が強いらしい、ということで今回はYahoo! Web APIから商品情報を取得してアプリに反映させることにします。

AppSheetのUIが変更になりました

2022年10月よりAppSheetのUIが新しくなっていますが、このブログ記事のUIは更新前のものになっています。AppSheetではUIを新旧切り替えすることが可能です。記事の画像のUIと実際のUIが異なる場合はUIの切り替えを試してみてください。切り替えは以下のボタンを押すとできます。

AppSheetからAPIを呼び出す（Webhook経由で）

調べてみると、AppSheetのオートメーション機能を使ってWebhookでGAS（Google Apps Script）を呼び出しGASで処理を実行、実行結果はAppSheet APIでスプレッドシートに保存すれば外部データを取得することができるとのこと。今回はこれを再現することにします。

外部アクセスに必要な設定とは

このために必要となる設定は、

• Google Apps Scriptの登録と設定
• Yahoo!デベロッパーネットワークへの登録と設定

となります。GASでコーディングをする必要があるので、もはやノーコードアプリとは言えませんが、設定は難しくはありません。

参考となるサイト

なお、構築にあたっては以下のサイトを参考にしています。コンセプトはほとんどこのままです。いずれもわかりやすいのでぜひご参照ください。

ローコード・ノーコードで作るバーコード読み取り商品管理 ～素人による素人のためのマニュアル～

アプリでの流れを考える

理想的なプロセスは

在庫管理アプリの流れは、バーコードを読み込むと商品情報が既に登録されているか判別、無ければ商品登録画面に進む、となっています。商品情報登録画面に進む前にYahoo!より商品情報取り付ければ良いので、想定するプロセスは以下の通りとなるはずです。

外部データの取り付けには時間がかかる

ところが、この通りにAppSheetでプロセスを組み込んでもうまく作動しません。AppSheetでの画面の遷移やオートメーション機能の実行タイミングが、基本的にデータの保存・変更時点に限られるためです。

Yahoo!から商品情報を取得するのに時間がかる一方、AppSheetでの画面の遷移はデータ変更時点で実行されることから、商品情報登録画面が表示されたときにはYahoo!からの情報が間に合わないのです。

APIからデータ取得するタイムラグは手動で調整

これでは外部データを取り付けても自動化につながりません。そこで、プロセスを見直して商品情報取得プロセス実施後にデータが取り付けられるまで待機し、手動で商品情報編集画面に移動することにしました。

これで自動化と言えるのか、プロセス改善につながるのか疑問ですが、次のようなプロセスでアプリを構築することにします。

次は外部データ連携を設定する

プロセスのイメージはできましたので、次はプロセス構築に必要な外部データ連携の設定を行います。

次回は、GASとYahoo!デベロッパーネットワーク、そしてAppSheet APIの設定を説明し、AppSheetとどのように接続していくかご紹介します。

シリーズ目次

素人がノーコードで在庫管理アプリを簡単に作る・・・実際に作ってみるとどうなるのか？AppSheetを使って食料品の在庫管理アプリを作ってみました。バーコードの読み取り、入庫、出庫の動きをアプリで作りながら、ポイントや気づきを中心に触れてみました。素人ですので、書いてあるよりも良い方法もあるかもしれませんが、AppSheetからアプリを使い始めるまでの流れは一通り説明しています。実際の開発時間は、夕食後の時間を使って一週間程度です。さらに続編として、入出庫履歴の記録と在庫データの表示も追加しています。

Yahoo!商品検索APIから情報自動取り付け編