M5StackとSORACOM Arcを使って「消耗品の減少をお知らせするボタン」を作ろう

みなさんはAmazonダッシュボタンのことを覚えていますか？ボタンを押すだけで商品をAmazonに発注できるというもので、今思えばIoTの先駆けとも言えるサービスでした。

https://www.amazon.co.jp/Amazon-JK29LP-Amazon%E3%83%99%E3%83%BC%E3%82%B7%E3%83%83%E3%82%AF-Dash-Butto/dp/B071YGWHLS/

残念ながら現在はこのサービス自体が終了しています。ですが、今も消耗品の棚卸しに苦慮している会社・オフィスは多いのではないでしょうか？

そこで今回、M5StackとSORACOM Arcを使って「オフィスの消耗品の減少をお知らせするボタン」を作ってみました。

消耗品をストックしている棚にこういったデバイスを設置しておき、

![iOS の画像.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60996/3893817a-8128-1277-6a75-1642fca1b26e.jpeg)

上下ボタンで消耗品を選択して▶を押すと、以下のようにSlackでお知らせしてくれるボタンです。(自動発注ではなく、あくまで「お知らせ」のみです)

![Slack___bo_消耗品管理ちゃんねる___fusic.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60996/0c12158b-b121-4ae9-cf9e-476741d4c15d.png)

仕組みとしては以下の図のようになっています。SORACOMより2021年に発表された **SORACOM Arc** を利用している点がポイントです。

![infra_drawio_—_drawio-saves.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60996/364661dc-d205-e687-b5d9-3c0a68e4fdd9.png)

## 背景

弊社のオフィスにはインスタントコーヒー、紙コップ、ウェットティッシュといった消耗品が多数あります。これらの消耗品はバックオフィスチームにて発注しており、「減ってきたことに気づいたらバックオフィスチームに連絡しようね」という性善説のもと、運用されています。

![iOS の画像.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60996/fb2d93cb-b412-8a86-fadd-4622188516d4.jpeg)

しかし、減ってきたことを連絡するためには

- オフィス内でバックオフィスチームのメンバーを見つけて声をかける
- Slackでバックオフィスチームのメンバーに連絡する

といったことをする必要があり、連絡する側もされる側も手間が大きいです。そこで、「消耗品の減少をお知らせするボタン」を消耗品の横に設置することでより気軽に通知ができる仕組みを準備することにしました。

## 技術選定

### クラウド

バックオフィスチームへの通知手段としてSlackを使うことにしました。SORACOMから受け取ったデータを元に、Slackへメッセージを投稿すれば良いのでAWS Lambdaを使っています。

![infra_drawio_—_drawio-saves.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60996/23791eef-315e-57ae-2cf7-1db2c5db40a7.png)

### 通信

今回はオフィス内で利用するので2.4GHzのWi-Fiを利用することができます。

しかし、今後デバイスが増える可能性を考慮すると、デバイス内に証明書を置くことは避けたいところです。そこで、昨年登場した「SORACOM Arc」を使うことでSORACOMプラットフォームに接続し、そこからAWSへ連携する方法を採用しました。

![infra_drawio_—_drawio-saves.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60996/b3f74b4e-3d27-cf20-d604-7f9d81ef30dc.png)


こうすることで、我々が管理しているデバイスのみがAWSへ繋がる状態を担保しつつ、Wi-Fi経由でのデータ送信ができるようになっています。これまでSORACOMを使うためには物理SIMを購入・維持する必要がありましたが、SORACOM Arcを使えば仮想SIMの維持費用のみでSORACOMプラットフォームと接続できるので非常にありがたいです。

### デバイス

今回対象とする消耗品の数がそれなりにあり、かつ今後増減する可能性が高いことから、「1つのデバイスに消耗品の一覧を表示し、ボタンでそれを選んで通知する」といったUIが望ましいと考えました。よって「LCD」と「複数個のボタン」を搭載したデバイスとして「M5Stack」を活用しています。

![infra_drawio_—_drawio-saves.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60996/f33ddb28-aa28-27b9-9254-efbff3473aee.png)

電源については今回オフィス内で利用しているので、コンセントと接続することで電源を常時供給しています。

## 使用する準備

### 準備物

ソースコード一式を以下リポジトリで公開しています。

https://github.com/fusic/dash-button

こちらを取得の上作業を開始してください。

```sh
$ git clone git@github.com:fusic/dash-button.git
$ cd dash-button
```

必要なデバイスはM5Stack(+接続用のUSB Type-Cケーブル)のみです。Wi-Fi環境があるところで作業してください。

### クラウド

本システムを使うためには予めSlack Appを作成しておく必要があります。以下ページより作成・インストールしてください。

https://api.slack.com/apps

また、以下をメモしておいてください。

- Slack Appの `Bot User OAuth Token`
- Slackの通知先チャンネルID(Slackのチャンネル名をクリックすると最下部に表示されます)
- Slackのメンション先メンバーID(Slackのプロフィール画面の「メンバーIDをコピー」をクリックすることで取得できます)

クラウド側のLambdaはAWS SAM CLIを使ってデプロイできるようになっています。[こちら](https://docs.aws.amazon.com/ja_jp/serverless-application-model/latest/developerguide/serverless-sam-cli-install.html) のドキュメントを参考にインストールした上で、以下コマンドを実行ください。

```sh
$ sam build
$ sam deploy --guided

Configuring SAM deploy
======================

        Looking for config file [samconfig.toml] :  Found
        Reading default arguments  :  Success

        Setting default arguments for 'sam deploy'
        =========================================
        Stack Name [fusic-dash-button]: fusic-dash-button # 任意の名前でOK
        AWS Region [ap-northeast-1]: ap-northeast-1 # 他リージョンに変更可
        Parameter SlackBotToken []: (Slack App の Bot User OAuth Token) 
        Parameter SlackChannel []: (Slackの通知先チャンネルID) 
        Parameter SlackMensionId []: (Slackのメンション先メンバーID)
        #Shows you resources changes to be deployed and require a 'Y' to initiate deploy
        Confirm changes before deploy [y/N]:  y
        #SAM needs permission to be able to create roles to connect to the resources in your template
        Allow SAM CLI IAM role creation [Y/n]: y
        #Preserves the state of previously provisioned resources when an operation fails
        Disable rollback [y/N]: n
        Save arguments to configuration file [Y/n]: y
        SAM configuration file [samconfig.toml]: samconfig.toml
        SAM configuration environment [default]: default
```

### 通信

SORACOM Arcの仮想SIMを作成してください。

- [SORACOM Arc - バーチャル SIM/Subscriber を作成する](https://users.soracom.io/ja-jp/docs/arc/create-virtual-sim/)

デプロイしたLambdaを実行するようSORACOM Funkを有効化してください。

- [SORACOM Funk - SORACOM Funkを有効化する](https://users.soracom.io/ja-jp/docs/funk/enable-funk/)

デバイスはバイナリデータを送信しています。一方クラウド側のLambdaはJSONを受け取る前提で実装されているので、SORACOMのバイナリパーサーを利用してデータを変換しています。

以下手順にて設定ください。

- 1 - SORACOMコンソールにログインする
- 2 - SIMグループ設定→SORACOM Air for セルラー設定を開く

![SIM_グループ_-_SORACOM_ユーザーコンソール.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60996/7f182854-f38b-f7ac-af22-6159fbcc28f3.png)

- 3 -  バイナリパーサーをONしてフォーマットに `item:0:uint:32:little-endian` と入力する

![SIM_グループ_-_SORACOM_ユーザーコンソール.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60996/31a12ac0-955b-82be-9266-3a34df22de9d.png)

以上でSORACOMの設定は完了です。

### デバイス

以下の手順でプログラムをコンパイルして、M5Stackに書き込んでください。

1. デバイス(M5Stack)をPCに接続します
2. Arduino IDEで device ディレクトリ配下の `main.ino` を開きます
3. Arduino IDEでプログラムをUploadします

![main___Arduino_1_8_19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60996/a45e765f-9779-9520-4d81-91898697f405.png)

書き込みが完了したら、お手持ちのスマートフォンからM5Stack上で起動しているアクセスポイントへ接続し、M5StackをWi-Fi接続するよう設定します。

1. スマートフォンでM5StackのLCDに表示されたアクセスポイント ESP32_XXXXXXXX へ接続します
2. Wi-FiのSSID, PasswordおよびSORACOM Arcで作成した仮想SIMの情報を入力します

このあたりの仕組みをどのように実現しているか気になる方は、以下の記事を参照ください。

- [M5Stack BasicでSORACOM Arcに接続する方法](https://tech.fusic.co.jp/posts/2022-04-24-m5stack-soracom-arc/)

## 運用開始

M5Stackをオフィスの消耗品が置いてある棚に設置しました。

![iOS の画像 (1).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60996/ab945516-56ab-9dea-a646-a19255209aec.jpeg)

M5Stackだけだと使い方がわからないかもしれないので、このような張り紙をしています。

![Fusicダッシュボタン.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60996/4d1f33c6-0b4e-4abe-6282-32a2b5c03662.png)

準備が終わったタイミングでSlackで全社員に周知しました。

## 弊社における利用状況

弊社では、このボタンを実際に運用しています。本記事の公開時点で、運用開始から1ヶ月が経過したので利用状況を振り返ってみます。

- ボタンが押された回数: **7回**
    - 内、誤ってボタンが押された回数: **1回**
- 消耗品が少ないのにボタンが押されなかったケース: **0回**

物珍しさもあるかもしれませんが、意外と利用されたようです。

誤ってボタンが押されたケースは「インスタンスコーヒーの減少」を通知したケースです。インスタンスコーヒーは棚に詰替え用のパックが複数個置いてあるのですが、詰替え用のパックに気づかずに瓶の中身が減少した段階でボタンが押された、ということがありました。

バックオフィスチームからは「自分たちが日々見回りしなくても、なくなったら通知が来る(気づいた人が教えてくれる文化が根付いた)のでとても助かる」とのお言葉をいただきました🙏


## 感想

エンジニアからすると全く難しいことはしていないのですが、バックオフィスのメンバーとしてはかなり助かったとのフィードバックをいただき嬉しかったです。現場を知り、現場に合った対策を取ることの大事さを改めて実感しました。

今回、ボタンを置いた場所以外にも消耗品がいくつかあるようなので、近々ボタンを増やすことも計画中です。ボタンの数が増えてもSORACOM Arcを経由することで、デバイス側に鍵を置く必要がないのでとても管理しやすいです👍

![iOS の画像.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60996/3893817a-8128-1277-6a75-1642fca1b26e.jpeg)

みなさまのオフィスでもぜひお試しください。

----

本記事の内容について不明点やお困りの点がありましたら、以下へご連絡ください。

- https://github.com/fusic/dash-button/issues
- https://twitter.com/y_uuu