買い物業務をおうちDXで改善した

# はじめに
この記事は[弥生 Advent Calendar 2021](https://qiita.com/advent-calendar/2021/yayoi)の10日目の記事です。
我が家では買い物は週に1度なのですが、この「買い物」業務をDXで改善したので、ご紹介します。

# 経緯
## 買い物の問題点
我が家の「買い物」業務は下記のような問題点を抱えていました。

* 毎回すべてのストックを確認しないと、今週買うべきなのかわからない<br>
※ストックとは：調味料やシャンプーなどの詰め替えのこと<br>
　1週間に1度しか買い物に行かないので、ストックを切らすと大変なことになることもある<br>
　・特に「常に1つ以上ストックしておく必要はないがなくなると困る」もの、料理酒とか
* 品目が多いため、確認が大変
    * 我が家は71品目管理しています（2021/11/29現在）
* 出先で急に「あれ、〇〇ってまだあったっけ？」と思い出したときに確認ができない
    * 家に誰かいればいいけど…
* 「たぶんまだ買わなくても大丈夫」と買わずに帰ると、実際は買う必要があった事象が頻発

そこで、簡単にストック数の確認が出来たり、出先で確認ができるようにしたいと考え、ストック情報をIT化するという発想に至りました。

## ただのIT化ではない、おうちDXだ
Googleスプレッドシートにストック品とその数を書けばいいのでは？と考えましたが、極度のズボラなので、

* Googleスプレッドシートはスマホでは見づらい、PCは立ち上げるのが面倒
    * そもそも出先ではスマホしかない
* 買うべきものだけフィルタをかける作業が面倒
* 日常的にGoogleスプレッドシート（Googleドライブ）にアクセスしないので面倒

という問題があり、せっかくIT化した割には不便だと思ってしまったのです。
ストック管理だけをIT化するのではなく、IT技術を使った買い物業務全体の改革＝おうちDXが必要だったのです。

# 「ストック管理システム」を作った
かくして、ただのIT化ではない、下記のような「ストック管理システム」を構築しました。
細かいところは別の記事を書こうと思います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/57278/836dc217-92cd-c1b2-2228-9a3103369a4b.png)

## 使ったもの
* Google Apps Script
    * ロジックはすべてここに集約しています
    * 拡張性を持たせたかったのでAPI的なプロジェクトを用意しています
        * LINE通知は試験的導入から始めたので今後API経由に移行する予定
* Google Sheets（スプレッドシート）
    * DBとして使っています
    * データ量がまだ少ないので性能はあまり期待していません
    * 使用履歴とかを考慮するような仕組みを導入する場合にはしんどいかも？
* LINE Messaging API
    * 公式アカウントを使って配信しています
    * システムのポータル的な役割も持たせています（ここからwebアプリを起動する）
    * LINEは日常で使っているので、ユーザの導入負担が少なめ

## 日々の運用
下記のシナリオを想定しています。

<dl>
<dt>① トリガー：ストック品を開封した/購入した、管理するストック品が増えた/減った</dt>
<dd>→LINE公式アカウントの起動ボタンからwebアプリを起動し、内容を登録する</dd>
<dt>② トリガー：買い物に行く日の前日（金曜日）になった</dt>
<dd>→LINE公式アカウントから購入対象のストック品一覧が通知される</dd>
<dt>③ トリガー：ストック品がいくつあるか見たい</dt>
<dd>→LINE公式アカウントの起動ボタンからwebアプリを起動する</dd>
<dt>④ トリガー：最新の購入対象のストック品一覧が見たい</dt>
<dd>→LINE公式アカウントの集計ボタンを押すと最新の購入対象のストック品一覧が返信される</dd>
</dl>

## LINE公式アカウント
専用のLINE公式アカウントを作成しました。
Messaging APIでメッセージのやり取りとリッチメニュー(画面下部に出すボタン)を使っています。
ちなみに未認証アカウントなので検索しても検索結果には出ません。
### 機能
* 定期通知
    * Google Apps Scriptのトリガー実行により、金曜日の夜に購入対象のストック品一覧が通知されます。
* 随時集計
    * リッチメニューの「ストック集計」を押すと、「ストック集計」と発言します。
    * それをトリガーに最新の購入対象のストック品一覧を取得できます。
    * 定期通知は友達登録している人全員に通知しますが、随時集計ではボタンを押した人だけに通知されます。
* webアプリ起動
    * 「アプリを起動」を押すとwebブラウザが立ち上がり、webアプリを起動できます。

後述の認証の仕組みが構築できないため、操作系の機能は持たせませんでした。
トーク画面のショートカットをホーム画面に作っておくとワンタップで起動できて便利です。
<img width="400" alt="LINEからアプリ起動まで.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/57278/a932519e-4d43-884d-1b4f-ae5de2caad58.gif">
ちなみに公式アカウント名やwebアプリタイトルの「[STG]」はステージング環境を表しています。
自分たちしか使わないシステムですが、自分の勉強のため本番環境とステージング環境を用意しています。

## webアプリ
一覧があるだけのシングルページアプリです。
Google Apps Script、Vue（Vuetify）で作っています。
webアプリ自体は一般公開していますが、Googleアカウントによる認証機構を導入し、
許可したGoogleアカウント以外のアカウントではデータが見られないようにしています。
Googleアカウントは今や持っていない人はほとんどいないので、導入負荷はありません。

### 機能
* 一覧表示
    * 管理しているストック品を一覧表示します。
    * Search窓にワードを入力することで絞り込みができます。
    * 分類でグループ化しており、グループ単位で閉じることができます。

画面最上部の注意書きはGoogle Apps Scriptで作っている以上表示されるのは仕方ないのですが、なんとかしたかった部分です。
<img width="400" alt="一覧操作.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/57278/e9794181-1850-9c94-b39a-872bcba7ca6f.gif">

* ストック品追加
    * 管理するストック品を追加できます。

<img width="400" alt="ストック品追加.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/57278/26f50019-0ac8-ca06-4c2d-f07558fd0d49.gif">

* ストック品操作①
    * 追加
        * 購入した時にストック数を加算できます。
        * 購入日を記録することができます。
    * 使用
        * 開封した時にストック数を減算できます。
        * 開封日を記録することができます。

最終購入日・最終開封日は普段見る必要がないので、一覧をすっきりさせるために隠しています。
gifでは日付の記録がわかりやすいように展開していますが、展開しなくても追加/使用はできます。
追加/使用のダイアログでデフォルトを「1」にしたのがこだわりポイントです。
※1個を追加/使用する頻度が圧倒的に多いため
<img width="400" alt="ストック追加使用.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/57278/38502ba8-c162-82a9-2abd-1f4ef133ec36.gif">

* ストック品操作②
    * ストック情報編集
        * ストック品名、通知閾値、分類を編集できます。
    * 操作取り消し
        * 間違えて操作してしまったときに操作を取り消すことができます。
    * 削除
        * 管理する必要がなくなったストック品を一覧から削除することができます。

操作取り消し機能は、例えば間違えて数を減らしてしまった際に、追加操作をすればストック数は修正できますが、「使用した」「追加した」履歴が残ってしまうという問題があります。
最終開封日/最終購入日を正しくすることと、開封日の間隔をもとに次回の購入予測を立てるために、操作履歴をきれいにする機能です。
<img width="400" alt="ストック編集から削除2.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/57278/d13b6c35-a266-d377-9409-7c357cd866e3.gif">
（動画が長いのでフレームレートを下げた結果、カクカクに見えますが本来はヌルヌルです。）

# 「ストック管理システム」の導入効果
いいこともありましたが、当然悪いこともありました。
トータルでは**圧倒的改善**だと思います。
特に3つ目の改善は、IT化ではなくDXと言える改善だと思います。

## 改善したこと
* 金曜日に自動的に購入すべきものの一覧が送られてくるので、それを見て買うかどうか考えるだけの簡単作業になった
    * 洗面台の下もキッチンの下も見なくていい
    * 買い忘れもない
    * 何も考えずに全部買ってもいい
* 出先でもwebアプリでストック数を確認できるようになった
    * 見やすいし、検索も簡単
* **開封したことを記録することで、時間的な観点で購入タイミングを考えられるようになる**
    * まだ開けたばっかりだし買わなくても大丈夫、という判断がものを見なくてもできる
        * いつ開けたっけ？を記憶ではなくストック管理システムで確認できる
    * そろそろ〇〇買う時期じゃないですか？という提案が出来そう
        * データが十分集まったら提案方法を考える
        * AIとか使えそうですね
* 「分類」の項目をうまく使うことでストック収納場所も記録できる
    * あれどこにしまったけ？ということもなくなった

## 悪化したこと
* 開封したり購入したりしたことをいちいち記録しなければいけなくなった
    * 30秒もあればできるのでたいしたデメリットではないが、ものやタイミングによっては面倒に感じる
        * 例）いざお風呂に入ろうとして服を脱ぎ捨てた後にシャンプーを詰め替えなければならないことに気づいたとき
    * すぐに登録しなくてもいいよう、追加/使用ダイアログで日付を入力できるようにした
        * 最初は操作日を登録していたので、日を跨げなかった
    * もっと手軽に記録できる方法を導入したい

## コスト
* **0円**
    * かかったのは光熱費と私の工数だけ
    * 運用保守費用も**0円**

## 狙っていなかったけれどよかった効果
* 私がGoogle Apps Script、Google Sheets、Vue（Vuetify）、LINE Messaging APIを完全に理解した
* 開発の仕方もこだわったので、VS Code、Git（GitHub）、GitHub Actionsも完全に理解した
    * [完全に理解したとは](https://togetter.com/li/1268851#:%7E:text=%E3%80%90%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E7%94%A8%E8%AA%9E%E8%A7%A3%E8%AA%AC%E3%80%91%20%E3%80%8C%E5%AE%8C%E5%85%A8,%E3%81%8C%E9%80%B2%E3%82%93%E3%81%A0%E3%81%A8%E3%81%84%E3%81%86%E6%84%8F%E5%91%B3%E3%80%82)
    * 日々の改善の中で「チョットデキル」になっていきたい

# おうちDXしましょう
今回は利用しませんでしたが、スマート家電の導入などもおうちDXのひとつだと思います。
ArduinoやRaspberry Piなどのマイコンボードを用いたIoT等も便利なものを作っている方がたくさんいます。
家電はお金がかかるので少々ハードルが高いですが、今回のようなwebサービスの組み合わせであれば、手軽に導入できます。
ITの力を駆使して快適な生活を送りましょう。

ストック管理システムのリポジトリは公開しています。
MITライセンスですのでご自由にどうぞ。

https://github.com/yuukieiu/StockManagementSystem