GASを用いてSlack上で購買を構築，運営した(Interactive Message機能追加編)

(※本記事は，[過去記事](https://qiita.com/zensai3805/items/e61de58184f8df744169)のアップデート版となりますが，過去記事は雑なため読む必要はありません。)

#概要
私は所属する研究室にて，研究室購買を運営しています。
安く仕入れて仲間に売る，時々入荷量を読み間違えて自分で渋々買い続ける…なんてこともあります。

私は運営方法として，**Slackを利用した購買チャンネルによる売買システム**を構築，活用しました。
こういった取引をシステム化する際大きな障壁となるのが，**誰が・何を・いつ**買ったのかの紐付けです。

購入の度に買った商品を選択し，自分が誰であるかを認証していては，なかなかシステムも普及しません。
また，在庫管理の手間もバカにならず，結局はアナログ購買に戻ってしまう，という事例も多いのではないのでしょうか。

本記事は，Slackが普及しており，机のパソコンでは常にSlackがある，スマホでも勿論Slackアプリは入っている……そんな環境のコミュニティでの，システムの構築のひとつの例となっています。

以下でユースケースの説明をさせていただきます。

##商品購入編
具体的には，Slackの購買専用チャンネルに以下のような投稿が並んでいます。

<img width="320" alt="スクリーンショット 2018-02-02 15.49.29.png" src="https://qiita-image-store.s3.amazonaws.com/0/211225/5502a97d-4cd8-aba2-4c9a-7177a9138481.png">

利用者は，上の商品価格が書かれたボタンを押すだけで，予め入金した電子マネー口座からお金が引き落とされます。
<img width="208" alt="スクリーンショット 2018-02-02 16.40.20.png" src="https://qiita-image-store.s3.amazonaws.com/0/211225/79d4f18f-a673-ee3e-7af5-34b162681fc2.png">

通知はユーザーに対しDMが来ます。あとは，購入した商品を冷蔵庫から取り出せば取引完了です。
以前は現金にて購買を運営していましたが，
・お釣りの問題により入荷できる商品に縛りが出る
・売買のログが取れないために分析ができない

という問題がありました。この辺は電子化により問題は解決したと思っています。

##電子マネー入金編
取引は電子マネーにて行うため，もちろん入金が必要です。
研究室ということで**信用**に頼っている面が強いのが正直な実情です。

具体的には，専用の場所の缶の中に現金を入れた後，側に置いてあるiPadよりWeb UIにて入金処理をしてもらっています。
<img width="426" alt="スクリーンショット 2018-02-02 16.52.17.png" src="https://qiita-image-store.s3.amazonaws.com/0/211225/8761b7ea-d725-6fc1-30a3-83d6ab01d1b8.png">

ユーザー名と入金額を選択し，送信ボタンを押します。

カメラの導入やWeb UI自体を扱える人を管理人のみに絞る施策も検討しましたが，現状は取引に不正は確認できていないため，利便性を優先しています。

##商品追加編
商品の追加はとても簡単で，Slack上にてslash commandにて商品の追加ができます。
具体的には，`/add_shop <商品名> <価格> <在庫数> <商品画像URL>`を打ち込むことで，追加されます。

チップスターを100円で10個入荷する際には
<img width="1361" alt="スクリーンショット 2018-02-02 16.12.35.png" src="https://qiita-image-store.s3.amazonaws.com/0/211225/ef49862d-3041-71ab-bf25-dadd200d9203.png">

と打ち込めば…

<img width="303" alt="スクリーンショット 2018-02-02 16.12.50.png" src="https://qiita-image-store.s3.amazonaws.com/0/211225/2f57e0f1-db38-e4ed-7b36-8f7cc416a67c.png">
上のように通知がきて，

<img width="294" alt="スクリーンショット 2018-02-02 16.14.17.png" src="https://qiita-image-store.s3.amazonaws.com/0/211225/74d2610e-5d7e-8255-acee-4c7de37039c0.png">
確かに商品が追加できましたね。

#実装方法
上記システムはSlackの各種機能を活用し，GAS(GoogleAppScript)を裏でで稼働させて実現しています。
ユーザーの残高等のデータはGoogleSpreadSheetにて管理しています。

##商品購入処理の実装
<img width="320" alt="スクリーンショット 2018-02-02 15.49.29.png" src="https://qiita-image-store.s3.amazonaws.com/0/211225/5502a97d-4cd8-aba2-4c9a-7177a9138481.png">

比較的見やすいものになっているかなという感触は持っていますが，説明しますと上の投稿には，
・商品名
・在庫数
・商品画像(裏でURLによって指定)
・金額(このボタンを押すと商品を購入できます)
・キャンセル(購入をキャンセルすることができます)

以上5つの情報が，SlackのMessage Attachmentsの機能にて組み上げられており，Incoming Webhookにて投げています。
Slack Message Attachmentsの公式ドキュメントは[こちら](https://api.slack.com/docs/message-attachments)

具体的にSlackに対して以下のような内容を投げています。

```js
var messageData = {　　
    "attachments": [　　{　　
        "title": "調製豆乳",
        "text": "在庫: 11",
        "fallback": "Sorry, no support for buttons.",
        "callback_id": "ButtonResponse",
        "color": "#3AA3E3",
        "attachment_type": "default",
        "actions": [{
            "name": "buy",
            "text": "85円",
            "type": "button",
            "value": "85"
        }, {
            "name": "cancel",
            "text": "キャンセル",
            "type": "button",
            "value": "85"
        }],
        "image_url": url
    }]
}
```

実装のイメージ図としては，以下のような感じです。
<img width="1588" alt="スクリーンショット 2018-02-05 17.51.59.png" src="https://qiita-image-store.s3.amazonaws.com/0/211225/76c3a985-a49b-afd4-b825-10d4138ec860.png">
ボタンを押すとGASのwebhookが叩かれる事については，上記のMessage Attachmentsのドキュメントに加えて，Interactive Message Buttonのドキュメント([こちら](https://api.slack.com/docs/message-buttons))に詳しいかと思います。

ボタンが押されると，SlackはGASの該当スクリプトへ押した人の名前やID，また商品の名前，価格，在庫数などといった情報をJSONにて投げます。
それを受けてGAS側で購入者の残高を適切に減らした後，Slackへの応答として，在庫数を1個減らした投稿へ修正を投げる訳ですね。

上記のGASスクリプトに関しては，人様に見せるのも恥ずかしい稚拙さではありますが，[こちら](https://github.com/zensai3805/Slack_shop_receiver)と[こちら](https://github.com/zensai3805/slack_shop_api)になります。

##電子マネー入金の実装
こちらはシンプルに以下のようなイメージです。
<img width="867" alt="スクリーンショット 2018-02-05 18.07.53.png" src="https://qiita-image-store.s3.amazonaws.com/0/211225/a89d614e-b709-6a57-1a26-922b2986c3e8.png">
この実装に関しては，以下の記事を大いに参考にさせていただきました。
[GoogleAppsScript(GAS)で入力フォームを作る(Qiita)](https://qiita.com/tamtam0847/items/8b79754bb10fe58a01a3)

##商品追加の実装
商品の追加については，slach commandからGASのwebhookを叩き，投稿させています。
投稿方法については，上述のMessage Attachmentsのドキュメントに詳しいです。

<img width="1043" alt="スクリーンショット 2018-02-05 18.14.41.png" src="https://qiita-image-store.s3.amazonaws.com/0/211225/6447a5d2-a677-6eb7-cf1a-bc0c55668035.png">

こちらも稚拙なスクリプトですが，用いているのは[こちら](https://github.com/zensai3805/Slack_shop_add_command)です。

#まとめ
現状の運営状況としては，他に便利がアイデアが浮かばない限りは現状のまま運用しようというレベルには達していると考えています。
SkackのInteractive Messagesの機能の問題点としては，応答に3000msの縛りがあるため，GASの処理内容によってはTimeoutが発生する可能性がある点でしょうか。

また現状のシステムを活用して，Slackのslash commandによる研究室内での学生の送金にも対応し，研究室の学生予算の集金なんかも行なっています。
Slackでの購買は上述の通り誰が何を買ったかの紐付けがストレス無く実現できるため，Slackのコミュニティで購買なんかを実現する際は，選択肢のひとつとして検討する価値はあると思っています。