LoginSignup
8
2

More than 1 year has passed since last update.

@h2m_kinoko(キノコ h2m_kinoko)inマッシュ＆ルーム

LINEDC REVUP Mr.Medicine お薬通知くん

Last updated at Posted at 2022-10-22

image.png
#LINEDC_REVUP #LINEDC #キノコ式

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

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

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

自己紹介：キノコ1号

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

ノーコードツールとLINEで在庫管理ミニアプリを作ろう！

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

【ノーコード】明日から使える飲食店向け注文システムを作る！これが噂のRPA？ハンズオン！

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

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

構成図

2022.png

ハンズオンの前に簡単に

LINE Developersって？

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

Messaging API流れ

  • 引用

    https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/119864/0f98c08b-f912-a9f9-9295-d7dec2c02be9.png

  • Messaging APIデモ

    • QRを読み取ってデモを体験
      • メッセージ
      • フレックスメッセージ
        • Webサイト（LINE内でWebサイト表示）
        • 予約（日時選択）
        • クイックアクション

  • ドキュメント

LINE Developers コンソールって？

LINEでは、LINEプラットフォームを通じて以下のような機能を、サードパーティの開発者に提供しています。
・LINEアカウントの認証情報を利用してユーザー認証をする機能（LINEログイン）
・ユーザーとLINEのメッセージをやり取りする機能（Messaging API）

  • プロバイダー

    • サービスを提供し、ユーザーの情報を取得する開発者個人、企業、または団体等をサービス提供者
    • 開発者ごとに、最大10個のプロバイダーを作成可能

  • チャネル

    • LINEプラットフォームが提供する機能を、サービス提供者が利用するための通信路
    • LINEプラットフォームを利用するサービスを開発するには、チャネルを作成

Google Apps Scriptって？

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

Let's Try ハンズオン🍄

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

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

  • チャネルの作成

Messaging APIを選択

image.png

以下の項目を設定

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

3. 資料のコピー

資料はこちら

  • 「ファイル」-「コピーを作成」で、自身の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/c2c9ea80-986c-7509-d004-6bc18b7ce2d1.png

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

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

  • チャネル基本設定
    image.png

  • 以下のリンクをクリックしLINE Official Account Managerへ 移動
    image.png

  • LINE Official Account Manager左メニューにある「応答設定」を選択
    image.png

  • 応答設定を以下の通りに設定

    項目 設定
    応答メッセージ オフ
    Webhook オン

    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

    項目 設定
    Webhook URL （後ほど設定）
    Webhookの利用 （後ほど設定）
    チャネルアクセストークン 発行し、スプレッドシートへ

    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

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/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/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/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/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

6. Developerコンソールに戻る

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/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

  • このトリガー(updateAllTriggers)は

    • ボットでお薬通知登録をすると、「お薬通知用トリガー」が自動的に作成される

    • 「お薬通知用トリガー」は、毎日決まった時刻に通知をする

    • 以下が「お薬通知用トリガー」の一例

      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/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

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

  • お薬画像用のフォルダをGoogleドライブ上に作成

    • Googleドライブにお薬画像用のフォルダを作成
    • 共有設定を「リンクを知っている全員」に設定

    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/2fc9c7f5-8bb9-6739-424b-07d4abe199fb.png

11. 再び動作確認！

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

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

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

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

登壇後

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

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

登壇動画

  • キノコがわちゃわちゃしてますので、是非ご覧ください

8
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
8
2