Upgrade to Pro — share decks privately, control downloads, hide ads and more …

安否確認を LINE Bot で

sumihiro3
February 02, 2023

安否確認を LINE Bot で

【大阪会場で新年会!】LINEDC&LDGK 新年LT会【事例/ミニアプリ/bot開発Tips】

sumihiro3

February 02, 2023
Tweet

More Decks by sumihiro3

Other Decks in Programming

Transcript

  1. ҆൱֬ೝΛ -*/&#PUͰ
    -*/&%$-%(,৽೥-5ձ
    2023.02.02
    Sumihiro Kagawa

    View full-size slide


  2. オフライン会場
    イベント再開︕
    🎉 🎉
    2

    View full-size slide

  3. ⾃⼰紹介

    View full-size slide

  4. ⾃⼰紹介
    n 加川 澄廣(かがわ すみひろ)
    l 兵庫県在住
    l LINE API Expert (2019.04〜)
    l 所属
    Ø 株式会社ブレイブテクノロジー
    - LINE ミニアプリを利⽤したサービスの開発・運⽤をしています
    - LINE DC での活動が縁で、趣味が仕事に繋がっちゃいました
    l 趣味
    Ø 開発コンテストへの参加
    Ø e-bike でゆるゆる⾛る
    - 時には 100km 超えの⻑距離(アワイチ、ビワイチ など)も⾛ります
    sumihiro3
    sumihiro.kagawa
    4

    View full-size slide

  5. 本⽇のテーマ

    View full-size slide

  6. LINE Bot で安否確認
    6

    View full-size slide

  7. 突然ですが
    n背景説明
    l 社内で “ISMS管理責任者” を担当しています
    Ø 昨年に ISMS(※)認証を取得
    • ※: 情報セキュリティマネジメントシステム, JIS Q 27001:2014
    - 情報資産の管理や、情報セキュリティ対策、情報セキュリティインシデント
    の管理や改善などの基準を整理して認証を取得しました
    Ø 運⽤における “BCP (事業継続計画)” の⼀環で、年に⼀
    度「安否確認」の運⽤テストを実施します

    View full-size slide

  8. 安否確認
    n主な流れ
    実施すること 概要
    緊急連絡先の収集 従業員の皆さんから休⽇にも連絡可能な⼿段を収集
    送信先の設定 収集した連絡先を ML などに登録
    事業継続観点での設問設定 “災害あったけど無事︖出勤はできそう︖” などの確認
    災害情報の収集 災害はいつ、どこで発⽣するか分かりません
    安否確認報告の依頼 災害の発⽣場所に応じて、誰に連絡すべきかを整理
    安否確認報告の収集、催促 全員が安否報告を実施しているかを確認、未報告の⽅
    には催促を実施
    安否確認報告結果の整理 報告⽤にまとめる
    खಈͰ΍Δͷ͸໘౗Ͱ͢ʜ

    View full-size slide

  9. ⾯倒なことは
    LINE Bot
    にやってもらおう
    9

    View full-size slide

  10. 安否確認
    n主な流れ
    実施すること
    緊急連絡先の収集
    送信先の設定
    事業継続観点での設問設定
    災害情報の収集
    安否確認報告の依頼
    安否確認報告の収集、催促
    安否確認報告結果の整理
    ໘౗ͳՕॴ͸ -*/&#PU
    ʹ͓೚ͤ

    View full-size slide

  11. 安否確認 Bot ができること
    n友だち登録するだけで連絡先を Get︕
    l 友だち登録時に⽒名と居住地を登録して
    もらう

    View full-size slide

  12. 安否確認 Bot ができること
    n災害情報を⾃動で収集
    Ø 地震情報をほぼリアルタイムで提供されている API を利⽤
    し、定期的に情報を収集
    https://www.p2pquake.net/json_api_v2/

    View full-size slide

  13. 安否確認 Bot ができること
    n災害発⽣時に対象者へ⾃動で安否確認
    メッセージを送信
    l 地震情報を知ってから送るのではなく、
    ⾃動で検知して送信できる
    - 災害発⽣地域に住んでいる⼈だけに送ることも⾃動で
    できる
    - オフィスのある地域で発⽣した場合は全員に送るなど
    の設定も可

    View full-size slide

  14. 安否確認 Bot ができること
    n安否報告も LINE からポチポチするだ
    けで完了
    l 災害時の慌ただしい時でも簡単に報告で
    きる
    - FlexMessage を使うと視認性が上がるのでオススメ

    View full-size slide

  15. 安否確認 Bot ができること
    n報告結果はスプレッドシートへ登録
    Ø Google スプレッドシートを DB として利⽤
    Ø 安否確認の報告状況はスプレッドシートで誰でも容易に閲
    覧できる
    Ø 回答が完了していない⽅には時間をおいてリマインド

    View full-size slide

  16. システム構成・利⽤技術

    View full-size slide

  17. 主な利⽤技術(LINE)
    利⽤技術 ⽤途など
    LINE
    Messaging API
    皆さんおなじみ LINE を使った Chat Bot 等を容易に構築できる API
    Ø UI は LINE トークルームで提供されるものを利⽤できるのでスピーディーに
    サービス開発できる
    FLEX
    MESSAGE
    SIMULATOR
    FlexMessage を簡単操作で作成できる便利ツール
    Ø GUI 操作で優れたレイアウト、視認性の⾼いメッセージを構築できる
    Ø 構築したメッセージを JSON 形式で出⼒できるので、コードへコピペするだ
    けで利⽤できる
    https://developers.line.biz/flex-simulator/

    View full-size slide

  18. 主な利⽤技術(その他)
    利⽤技術 ⽤途など
    Google Apps
    Script (GAS)
    Google が提供する、主にGoogleのサービスを⾃動化するスクリプ
    ト⾔語と実⾏環境
    Ø LINE Messaging API の Webhook 受信や、地震情報収集などの実⾏環境とし
    て利⽤
    Clasp GAS のローカル開発環境や CLI を提供
    Ø ローカルでは TypeScript で実装でき、GAS 実⾏環境への Push 時に GAS
    (JavaScript) へのトランスパイルをしてくれる
    Ø スプレッドシートなどのクラスも提供されているので型が使えて便利
    Google
    スプレッドシー

    みんな⼤好きスプレッドシート
    Ø今回は DB として利⽤
    Øエンジニアではない⽅でも容易に読み書きできるのも採⽤理由の
    ⼀つ

    View full-size slide

  19. 今回のアプリ実装での
    ポイント

    View full-size slide

  20. 1. Chat Bot といえばステータス管理
    nステータス管理がうまくされないと、Chat Bot が
    場違いな回答をしてしまう恐れアリ
    Ø ユーザー登録、安否報告などユースケースごとで状態管理
    Ø 状態を表す Enum などを定義して状態管理での例外を少
    なくする

    View full-size slide

  21. 1. Chat Bot といえばステータス管理
    namespace Users {
    /**
    * ユーザー登録状態を表す Enum
    */
    export enum UserStatus {
    /** 友だち登録直後 */
    CREATED = 'CREATEDʼ,
    /** ブロック後 */
    DELETED = 'DELETEDʼ,
    /** ⽒名登録された状態 */
    NAME_REGISTERED = 'NAME_REGISTEREDʼ,
    /** 居住地が登録された状態 */
    AREA_REGISTERED = 'AREA_REGISTEREDʼ,
    /** ユーザー登録が完了した(安否確認メッセージを送信できる)状態 */
    READY = 'READYʼ,
    }

    View full-size slide

  22. 1. Chat Bot といえばステータス管理
    // ユーザーのステータスに応じた処理を実施する
    switch (user.status) {
    case Users.UserStatus.CREATED:
    // ユーザーの名前を登録
    updateUserEmployeeName(user, message, replyToken);
    break;
    case Users.UserStatus.NAME_REGISTERED:
    // 居住地を登録
    updateUserArea(user, message, replyToken);
    break;
    case Users.UserStatus.AREA_REGISTERED:
    // 登録完了状態とする
    updateUserEntryCompleted(user);
    break;
    default:
    // デフォルトのメッセージを返す
    const textMessage = LineApi.createTextMessage(`${message}ンゴ`);
    LineApi.replyMessage([textMessage], replyToken);
    }
    状態の型を明確にできていれば例外
    的な処理(if のネスト)などもなく
    コードもシンプルになる

    テストコードも書きやすくなる

    View full-size slide

  23. 2. ユーザーからの反応は “Postback” をうまく使おう
    nテキスト送信してもらうと⼊⼒がブレ、
    処理が複雑になるので避ける
    Ø 安否確認の場合、簡単・正確に処理できる
    よう選択肢ボタンを押してもらうのが適切
    - ボタン押下でテキストメッセージを送るのではなく、
    Postback で定型データを送信
    - 下記のようにクエリーパラメーター形式としています
    • “type=confirmation&id=1&question=3&answer=⼀部損壊”

    View full-size slide

  24. 2. ユーザーからの反応は “Postback” をうまく使おう
    {
    type: 'buttonʼ,
    action: {
    type: 'postbackʼ,
    data: ʻtype=confirmation&id=1&question=3&answer=なしʼ,
    label: 'なしʼ,
    displayText: 'なしʼ,
    },
    style: 'primary',
    },
    {
    type: 'buttonʼ,
    action: {
    type: 'postbackʼ,
    data: 'type=confirmation&id=1&question=3&answer=⼀部損壊ʼ,
    label: '⼀部損壊ʼ,
    displayText: '⼀部損壊ʼ,
    },
    style: 'secondaryʼ,
    },
    単なるテキストでは判別できない、
    質問の特定に必要な情報(どの安否
    確認の、何問⽬への回答か)などを
    まとめてサーバーへ送信できる
    サーバーへ送信するデータと、タイムライン
    で表⽰される吹き出しテキストを分けて設定
    できる

    View full-size slide

  25. まとめ
    1. Chat Bot といえばステータス管理
    Ø ステータス(状態)はユースケース毎に存在する
    Ø 型付けされているとシンプルなコードが書けます
    2. ユーザーからの反応は “Postback” をうまく使おう
    Ø ユーザーのテキスト⼊⼒は、データとしての信頼性は低い
    Ø ⾃由⽂の解析は⼿間がかかるだけなので、出来るだけ定型化
    3. 業務で使う Bot なら GAS という選択肢はアリ︕
    Ø エンジニアでない⼈との連携にスプレッドシートは便利
    Ø Webhook 受信可能なので Bot サーバーとして問題なし
    - GAS デプロイ処理と、Messaging API の Webhook URL 変更を⾃動化できると尚良い

    View full-size slide

  26. ご清聴
    ありがとうございました︕

    View full-size slide

  27. SNS アカウントなど
    @sumihiro3
    Sumihiro.Kagawa
    LINE API Expert
    29

    View full-size slide