LINEDC REVUP Mr.Medicine お薬通知くん

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/119864/5fe3e541-2f7e-2020-8232-cab11e46b086.png)
#LINEDC_REVUP #LINEDC #キノコ式

# イベント当日の動画を公開いただきました！

https://youtu.be/-uHeBiQVYI4

# キノコ式：LINE Bot と Googleスプレッドシートで日常にちょっとの便利と彩りを

セッション：[https://revup.jp/session/itini-f-n](https://revup.jp/session/itini-f-n)

自己紹介：[キノコ1号](https://www.line-community.me/ja/apiexpert/detail/61e4313569e9a522434aa056)

### 過去のイベントからの事例

[ノーコードツールとLINEで在庫管理ミニアプリを作ろう！](https://linedevelopercommunity.connpass.com/event/218562/)

長崎県の子ども食堂を支援する学生さんが、子ども食堂で活用

[【ノーコード】明日から使える飲食店向け注文システムを作る！これが噂のRPA？ハンズオン！](https://linedevelopercommunity.connpass.com/event/227077/)


神奈川県の居酒屋さんが注文システムを自作！稼働中！
LINE公式アカウント：[https://lin.ee/gdC5bDm](https://lin.ee/gdC5bDm)





# 完成形デモをまずはご覧ください

https://youtu.be/oOnUtdajb00


### 構成図

![2022.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/119864/2be6cd58-b04e-3713-f189-baeccc3282ff.png)

# ハンズオンの前に簡単に

### LINE Developersって？

> LINEでは、外部の企業や開発者に向けて、LINEのサービスとの連携が可能になるAPI（以降、LINE APIと呼びます）を提供しています。LINE Developersサイト（ [https://developers.line.biz/ja/](https://developers.line.biz/ja/) ） では、そうしたLINE APIの仕様や、開発手順を解説したドキュメントを開発者向けに提供しています。
> 

- [プロダクト](https://developers.line.biz/ja/)
    - LINEログイン
    - Messaging API
    - [LINEミニアプリ](https://www.linebiz.com/jp/service/line-mini-app/)
    - LINE Things
    - LINE CLOVA
    - CLOVA Extensions Kit
    - LINE Pay
    - ブロックチェーンサービス
- [ユースケースサイト](https://lineapiusecase.com/ja/top.html)

### Messaging API流れ

- [引用](https://lineapiusecase.com/ja/api/msgapi.html)
    
    ![https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/119864/0f98c08b-f912-a9f9-9295-d7dec2c02be9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/119864/0f98c08b-f912-a9f9-9295-d7dec2c02be9.png)
- [Messaging APIデモ](https://lineapiusecase.com/ja/api/msgapi.html#:~:text=%E3%81%AB%E5%88%87%E3%82%8A%E6%9B%BF%E3%81%88%E3%81%BE%E3%81%99%E3%80%82-,%E3%83%87%E3%83%A2%E3%82%92%E8%A6%8B%E3%82%8B,-%E3%81%8A%E6%89%8B%E6%8C%81%E3%81%A1%E3%81%AE)
    - QRを読み取ってデモを体験
        - メッセージ
        - フレックスメッセージ
            - Webサイト（LINE内でWebサイト表示）
            - 予約（日時選択）
            - クイックアクション
- [ドキュメント](https://developers.line.biz/ja/docs/messaging-api/)

### LINE Developers コンソールって？

- [概要](https://developers.line.biz/ja/docs/line-developers-console/)

> LINEでは、LINEプラットフォームを通じて以下のような機能を、サードパーティの開発者に提供しています。
・LINEアカウントの認証情報を利用してユーザー認証をする機能（LINEログイン）
・ユーザーとLINEのメッセージをやり取りする機能（Messaging API）
> 
- [プロバイダー](https://developers.line.biz/ja/docs/line-developers-console/overview/#developer:~:text=%23-,%E3%83%97%E3%83%AD%E3%83%90%E3%82%A4%E3%83%80%E3%83%BC,-LINE%20Developers%E3%82%B5%E3%82%A4%E3%83%88)
    - サービスを提供し、ユーザーの情報を取得する開発者個人、企業、または団体等をサービス提供者
    - 開発者ごとに、最大10個のプロバイダーを作成可能
    
- [チャネル](https://developers.line.biz/ja/docs/line-developers-console/overview/#provider:~:text=%23-,%E3%83%81%E3%83%A3%E3%83%8D%E3%83%AB,-%E3%83%81%E3%83%A3%E3%83%8D%E3%83%AB%E3%81%AF%E3%80%81LINE)
    - LINEプラットフォームが提供する機能を、サービス提供者が利用するための通信路
    - LINEプラットフォームを利用するサービスを開発するには、チャネルを作成

### Google Apps Scriptって？

- Googleのさまざまなサービスを利用するためのスクリプト言語
- JavaScriptが元になっている
- Webhookを受け取れる

# Let's Try ハンズオン🍄

### 1. Developersコンソールにログイン

- [ログイン画面](https://developers.line.biz/console/)

![https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/119864/2b126347-f077-0906-853f-624607ce93db.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/119864/2b126347-f077-0906-853f-624607ce93db.png)

> LINEビジネスIDとは？
LINEビジネスIDとは、LINEが提供するビジネス向け、または開発者向けの各種管理画面にログインができる共通認証システムです。
LINEビジネスIDには、LINEアカウントでのログイン、またはメールアドレスのみで利用できるビジネスアカウントでのログインがご利用いただけます。
> 

### 2. プロバイダーとチャネルを作成

- プロバイダーの作成

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/119864/0e337582-cfd8-c6ae-17fb-854e505e54eb.png)


- チャネルの作成

Messaging APIを選択

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/119864/0517c053-69b3-0b35-d3a3-02f81732f2b0.png)

以下の項目を設定

| 項目 | 設定 |
| --- | --- |
| チャネルの種類 | （Messaging API） |
| プロバイダー | （作成したプロバイダ） |
| 会社・事業者の所在 | 日本 |
| チャネル名 | 任意 |
| チャネル説明 | 任意 |
| 大業種 | 個人 |
| 小業種 | 個人（その他） |
| 利用規約2箇所にチェック | - |

### 3. 資料のコピー

[資料はこちら](https://docs.google.com/spreadsheets/d/1609BCVJHSstGE94APn_AKjD6Ol9SZaVSW0PsvmoMPx8/edit?usp=sharing)

- 「ファイル」-「コピーを作成」で、自身のGoogleドライブにコピー

![https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/119864/6f4753af-039e-95b1-5756-d51fe2dce8df.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/119864/6f4753af-039e-95b1-5756-d51fe2dce8df.png)

![https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/119864/c2c9ea80-986c-7509-d004-6bc18b7ce2d1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/119864/c2c9ea80-986c-7509-d004-6bc18b7ce2d1.png)

<aside>
💡 各シートについて

- 「お薬」シート（直接編集することはない）
    - 通知登録した薬一覧
- 「setting」シート(**事前設定が必要**)
    - チャネルアクセストークン
        - 本当に自身のサービスかどうか？を証明するもの
    - お薬ユーザーID
        - お薬の通知を飛ばすユーザーID
    - お薬画像GoogleドライブフォルダID
        - お薬画像を保存しておくGoogleドライブのフォルダID
- 「status」シート（直接編集することはない）
    - 途中操作などの状態を管理
</aside>

### 4. Developerコンソール側の設定

- チャネル基本設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/119864/b2b7edba-ba6e-339b-236e-7de29bc5aa42.png)


- 以下のリンクをクリックしLINE Official Account Managerへ 移動
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/119864/50808ddd-5555-1e7f-9874-c8f49b0e9293.png)

- LINE Official Account Manager左メニューにある「応答設定」を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/119864/96416e85-d697-b5a9-4fe3-65cf7e309b1b.png)    

- 応答設定を以下の通りに設定
    
    
    | 項目 | 設定 |
    | --- | --- |
    | 応答メッセージ | オフ |
    | Webhook | オン |

    ![https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/119864/9237400e-7b27-c1ef-a790-a835d473d097.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/119864/9237400e-7b27-c1ef-a790-a835d473d097.png)

- Messaging API設定
    
    ![https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/119864/e3a383d9-8d2f-a60a-4213-b97afa4b12bd.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/119864/e3a383d9-8d2f-a60a-4213-b97afa4b12bd.png)
    
    | 項目 | 設定 |
    | --- | --- |
    | Webhook URL | （後ほど設定） |
    | Webhookの利用 | （後ほど設定） |
    | チャネルアクセストークン | 発行し、スプレッドシートへ |
    - [チャネルアクセストークンとは？](https://developers.line.biz/ja/docs/messaging-api/channel-access-tokens/#what-are-channel-access-tokens)
    - チャネルアクセストークンをペスプレッドシート「setting」シートの「チャネルアクセストークン」にコピペ
    

    ![https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/119864/d22d0d28-c4d8-951d-3445-730ce7ff423f.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/119864/d22d0d28-c4d8-951d-3445-730ce7ff423f.png)
    **↓↓↓**
    ![https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/119864/78f3356e-d7f5-4b44-caeb-bb6fdefe0966.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/119864/78f3356e-d7f5-4b44-caeb-bb6fdefe0966.png)

### 5. GASデプロイ

- スプレッドシート「拡張機能」-「Apps Script」を選択
![https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/119864/7ff436a7-1098-8e58-005c-8f2676616eb0.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/119864/7ff436a7-1098-8e58-005c-8f2676616eb0.png)

- 以下のような画面が開く
    
    ![https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/119864/0ffe3ac5-3563-8aef-2863-35bae6e0be37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/119864/0ffe3ac5-3563-8aef-2863-35bae6e0be37.png)
    

- 「デプロイ」-「デプロイを管理」
    
    ![https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/119864/7e0d105d-8fb9-233b-b074-e43a0eb3850d.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/119864/7e0d105d-8fb9-233b-b074-e43a0eb3850d.png)
    

- 「デプロイメントの作成」
    
    ![https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/119864/d2dcc7ab-d5e4-f9b5-e19b-d4fedfb644bb.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/119864/d2dcc7ab-d5e4-f9b5-e19b-d4fedfb644bb.png)
    

- 設定
    
    ![https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/119864/ddca03ae-c6bb-7bb3-0f55-e59d9993612e.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/119864/ddca03ae-c6bb-7bb3-0f55-e59d9993612e.png)
    
    | 項目 | 設定 |
    | --- | --- |
    | バージョン | 新しいバージョン |
    | 説明 | （省略） |
    | 次のユーザーとして実行 | 自分 |
    | アクセスできるユーザー | 全員 |

以下の手順・図に沿ってデプロイ完了する

- デプロイを管理
    
    ![https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/119864/0632fc96-234e-8775-3246-2781bcdf9808.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/119864/0632fc96-234e-8775-3246-2781bcdf9808.png)
    

- アクセス許可
    
    ![https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/119864/af577278-79eb-587c-ee5c-2b4379b933f0.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/119864/af577278-79eb-587c-ee5c-2b4379b933f0.png)
    
    ![https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/119864/c82a3c8d-d3b0-59b7-6b25-33f1971a5c46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/119864/c82a3c8d-d3b0-59b7-6b25-33f1971a5c46.png)
    

- デプロイ完了
    - WebアプリURLをコピーしておく

    ![https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/119864/b41ac6b1-ab9f-04e8-bc67-692075efafe6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/119864/b41ac6b1-ab9f-04e8-bc67-692075efafe6.png)

### 6. Developerコンソールに戻る

- Messaging APIの「Webhook URL」に貼り付け、「Webhookの利用」をオンに
    
    ![https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/119864/01592539-908d-d163-986b-44d8ce549152.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/119864/01592539-908d-d163-986b-44d8ce549152.png)
    
- 検証を押して「成功」と出ればOK！
    
    ![https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/119864/f670f3fa-9694-d48a-2a37-8e55cb8181d9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/119864/f670f3fa-9694-d48a-2a37-8e55cb8181d9.png)
    

- [送られるWebhookイベントの内容](https://developers.line.biz/ja/reference/messaging-api/#webhook-event-objects)

### 7. GASのトリガーを作成

- トリガーから以下の設定で登録
![https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/119864/ef839efa-c333-9667-5dff-c0df3d3131ca.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/119864/ef839efa-c333-9667-5dff-c0df3d3131ca.png)
![https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/119864/300990b2-4924-d29b-af40-8b5da7e49ff7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/119864/300990b2-4924-d29b-af40-8b5da7e49ff7.png)

    | 項目 | 設定 |
    | --- | --- |
    | 実行する関数を選択 | updateAllTriggers |
    | 実行するデプロイを選択 | Head |
    | イベントのソースを選択 | 時間主導型 |
    | 時間ベースのトリガーのタイプを選択 | 日付ベースのタイマー |
    | 時刻を選択 | （任意） |
    - 作成後の状態
    
    ![https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/119864/daecac3c-4dc2-2d73-8b21-0ca3dedbde47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/119864/daecac3c-4dc2-2d73-8b21-0ca3dedbde47.png)
    

- このトリガー(updateAllTriggers)は
    - ボットでお薬通知登録をすると、「お薬通知用トリガー」が自動的に作成される
    - 「お薬通知用トリガー」は、毎日決まった時刻に通知をする
    - 以下が「お薬通知用トリガー」の一例
        
        ![https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/119864/3435c926-4d33-006a-0758-64eaff4407d6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/119864/3435c926-4d33-006a-0758-64eaff4407d6.png)
        
    - ただし、**「お薬通知用トリガー」は「特定の日時で1回のみ」しか動作しない**ため、updateAllTriggersを夜間とかに動かすことで「お薬通知用トリガー」を毎日更新している
    

### 8. ユーザーIDをコピペ

- Developersコンソール「チャネル基本設定」にある「あなたのユーザーID」をスプレッドシート「setting」シートの「お薬ユーザーID」にコピペ

    ![https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/119864/a161c32c-ea64-73ed-0028-cc1f4758306c.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/119864/a161c32c-ea64-73ed-0028-cc1f4758306c.png)
    **↓↓↓**
    ![https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/119864/6cf658b3-55f0-33aa-9c78-8e953224344a.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/119864/6cf658b3-55f0-33aa-9c78-8e953224344a.png)


### 9. ここで一度動作確認！

- ボットを友達登録
    
    ![https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/119864/c3fe2812-319c-847b-457a-7a751d2de656.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/119864/c3fe2812-319c-847b-457a-7a751d2de656.png)

### 10. お薬画像も登録できるように

- お薬画像用のフォルダをGoogleドライブ上に作成
    - Googleドライブにお薬画像用のフォルダを作成
    - 共有設定を「リンクを知っている全員」に設定
    
    ![https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/119864/94736446-a327-415a-d409-c4a0561eef08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/119864/94736446-a327-415a-d409-c4a0561eef08.png)
    

    - フォルダIDをスプレッドシート「setting」シートの「お薬画像GoogleドライブフォルダID」にコピペ
    
    drive.google.com/drive/folders/**【この部分】**

    ![https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/119864/fe9fea96-8f06-dafd-9def-5aef35cd128f.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/119864/fe9fea96-8f06-dafd-9def-5aef35cd128f.png)
    **↓↓↓**
    ![https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/119864/2fc9c7f5-8bb9-6739-424b-07d4abe199fb.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/119864/2fc9c7f5-8bb9-6739-424b-07d4abe199fb.png)

### 11. 再び動作確認！

- 画像と共に通知されたでしょうか！？

### 12. リッチメニューの作成

- [リッチメニューって？](https://developers.line.biz/ja/docs/messaging-api/using-rich-menus/)
- [デモ](https://lineapiusecase.com/ja/api/msgapi.html#:~:text=NEW-,%E3%83%AA%E3%83%83%E3%83%81%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC,-LINE%E5%85%AC%E5%BC%8F%E3%82%A2%E3%82%AB%E3%82%A6%E3%83%B3%E3%83%88)
- [LINE Official Account Managerで作成](https://manager.line.biz/)

### 13. クイックリプライにアクションを追加

- [カメラアクション](https://developers.line.biz/ja/reference/messaging-api/#camera-action)
- [カメラロールアクション](https://developers.line.biz/ja/reference/messaging-api/#camera-roll-action)

```
items: [
        {
          type: "action",
          action: {
            type: "datetimepicker",
            label: "時刻設定",
            data: "select-time",
            mode: "time",
          },
        },
        {
          type: "action",
          action: {
            type: "camera",
            label: "写真を撮る"
          },
        },
        {
          type: "action",
          action: {
            type: "cameraRoll",
            label: "写真を開く"
          }
        },
      ],
```

# 登壇後

無事に？終えられた気がします笑

動画内でも触れてますが、これをきっかけに何か身近でこんな使い方ができそうとか、できたなどありましたら是非お知らせください！

### 登壇動画
- キノコがわちゃわちゃしてますので、是非ご覧ください

https://youtu.be/veCZOSpKaSo?t=7492