Skip to content

Latest commit

 

History

History
207 lines (153 loc) · 11 KB

3-a-practical-bot.md

File metadata and controls

207 lines (153 loc) · 11 KB

3-a. LINE Messaging API を利用した本格Botの開発 (前半)

Google Apps Script(GAS)を用いて，より本格的な機能を利用できるLINE Botを作成します．

Note

このハンズオンでは，Messaging APIの無料枠の中で実装します．
ご自身で独自に実装を拡張される場合，Botからの自発的なメッセージは500通/月を超えると費用が発生しますのでご注意ください．
ただし，支払い手続きを行う前に課金されることはありません．
詳しくはこちらをご覧ください．

LINE Developersアカウントの作成

まずは LINE Developers のサイトにアクセスし，右上のコンソールにログインをクリックします．

開いた画面でLINEアカウントでログインをクリックし，ご自身のLINEアカウントでログインされてください．

Tip

QRコードログイン機能が便利です．

ログインできたら，まずはプロバイダー(Bot開発者のプロフィール)を作成します．
プロバイダー画面で，作成をクリックして手順に従い作成します．

Messaging API利用のための初期設定

  1. チャネル設定画面より，Messaging APIを有効化します． Messaging APIの画像をクリックします．

  2. 以下の項目をそれぞれ入力・アップロードし，利用規約を確認して作成をクリックします．

    • 会社・事業者の所在地・地域：日本
    • チャネルアイコン：任意
    • チャネル名：Botの名前を決めてください
    • チャネル説明：Botの説明を入れてください（testなど）
    • 大業種：保育・学校
    • 小業種：大学所属サークル・部活動

  3. 以下の内容でMessaging APIチャネルを作成しますか？と表示されます．内容を確認して，問題なければOKをクリックします．

  4. チャネル基本設定にて,以下の要素をコピーしてメモ帳などのアプリケーションに控えておきます．

    • チャネルID(上から1番目)
    • チャネルシークレット(下から3番目,発行を押すと再発行されます)

  5. Messaging API設定を開き，表示されたQRコードをお手持ちのスマートフォンでスキャンして友だちとして登録します．

  6. Messaging API設定の最下部にスクロールしてチャネルアクセストークン(長期)の発行をクリックします．
    表示されたチャネルアクセストークンは，チャネルシークレットと同様に控えておきます．

  7. これからGoogle Apps Scriptを使用しますが，その後このLINE Developersのコンソール画面を再び操作します．
    閉じないようにしておきましょう．

Caution

チャネルシークレットやチャネルアクセストークンは，他者に知られないように注意してください．
もしGitHubの公開リポジトリなどでうっかり公開してしまったときは，速やかに発行ボタンをクリックして以前のものを無効化します．

Google Apps Scriptを書いてみる

これからGoogle Apps Scriptを使って，サーバプログラムを書いていきます．
まずはLINE Botから正常に情報を取得できるか試してみます．

  1. Google Driveにアクセスし，任意の場所で左上の新規→スプレッドシートをクリックします．

  2. 左上の無題のスプレッドシートをクリックして名前をLINE Botに変更します．

  3. 上部の拡張機能からApps Scriptを開きます．

  4. 同様に左上の無題のプロジェクトをクリックして名前をLINE Botに変更しておきます．

  5. 書きかけのmyFunction関数がありますがこれを削除して，以下のコードに置き換えます．

    function doPost(e){
    let sheet = SpreadsheetApp.getActive().getActiveSheet();
    sheet.appendRow([new Date(), e.postData.contents]);
}

  6. 右上のデプロイ→新しいデプロイをクリックし，種類を選択の右にある歯車⚙からウェブアプリを選択します．

  7. 表示された設定のうち，アクセスできるユーザーを全員に変更し，デプロイをクリックします．

  8. アクセスを承認をクリックし，ご自身のGoogleアカウントを選択します．
    このとき，Googleが承認していない開発者によるアプリケーションを実行しようとしているため
    Google hasn't verified this appと表示されます． 自身で作成したアプリですので承認します．
    左下に小さく表示されたAdvancedからGo to LINE Bot(unsafe)をクリックします．

  9. スプレッドシートの編集などを求める権限リクエストが表示されますので，Allowをクリックして許可します．

  10. 問題なければ，デプロイIDとウェブアプリのURLが発行されます．
    このうちウェブアプリのURLをコピーして，メモ帳などのアプリケーションに記録しておきます．

Webhook URLの設定

  1. LINE Developersのコンソール画面を開き，Messaging API設定からWebhook URLの編集ボタンをクリックします．

  2. 先ほど生成したウェブアプリのURLをここにペーストし，更新をクリックします．

  3. Webhookの利用をオンにして，Webhook URLの検証をクリックします．
    LINE Developersのコンソール画面に成功と表示され，元のGoogleスプレッドシートに以下のような文字列が記録されればOKです．

    2024/04/16 15:00:00 {"destination":"U3a4...","events":[]}

  4. LINE公式アカウント機能の応答メッセージの右にある編集をクリックし，応答メッセージをオフにします．

  5. LINEアプリから作成したBotアカウントに対して，何らかのメッセージを送信してみます．
    Googleスプレッドシートに以下のような文字列が記録されればOKです．

    2024/04/16 15:20:00	{"destination":"U3a4...","events":[{"type":"message","message":{"type":"text","id":"5040...","quoteToken":"vFKAy...","text":"送信した文字列"},"webhookEventId":"01HV...","deliveryContext":{"isRedelivery":false},"timestamp":1713...,"source":{"type":"user","userId":"U97c..."},"replyToken":"ed08...","mode":"active"}]}

    少し読みにくいので整形すると，以下のようなJSON形式のメッセージが出力されたことを確認できます．
    今回はこちらのWebサービスを使って整形しました．

    {
    "destination": "U3a4...",
    "events": [
        {
            "type": "message",
            "message": {
                "type": "text",
                "id": "5040...",
                "quoteToken": "vFKAy...",
                "text": "送信した文字列"
            },
            "webhookEventId": "01HV...",
            "deliveryContext": {
                "isRedelivery": false
            },
            "timestamp": 1713...,
            "source": {
                "type": "user",
                "userId": "U97c..."
            },
            "replyToken": "ed08...",
            "mode": "active"
        }
    ]
}

    どうやらe.postData.contentsをJSONフォーマットのテキストとして読み込んだとき，
    送信したメッセージは内部のeventsに含まれるmessage.textに格納されているようですね．

メッセージ内容の取得

取得したデータのうち，メッセージテキストのみを記録するようにしてみましょう．

  1. Google Apps Scriptの編集画面を開きます．

  2. 以下の行を見つけ，

    sheet.appendRow([new Date(), e.postData.contents]);

    e.postData.contentsをJSON.parse(e.postData.contents).events[0].message.textに差し替えます．

  3. 左上のデプロイ→デプロイを管理→右上の鉛筆マークをクリックし， バージョンを新バージョンにしてデプロイをクリックします．

  4. 以降，LINEアカウントにテキストメッセージを送ったとき，自分が送信したメッセージ(と日付)のみがスプレッドシートに記録されていればOKです．

それでは，実際に送信されたメッセージを使用した処理を書いていきます．

メッセージ内容に応じた処理の分岐

送信されたメッセージを解析して，どのような処理を行うか分岐できるようにします．

  1. 先ほどの変更により，コードの3行目がとても長く読みにくいコードになっていると思います．
    これは美しくないので，以下のように書き換えます．

    function doPost(e){
    let sheet = SpreadsheetApp.getActive().getActiveSheet();
    let data = JSON.parse(e.postData.contents);
    let events = data.events;
    
    for(let i = 0; i < events.length; i++){
        let event = events[i];

        if (event.type == 'message'){
            if (event.message.type == 'text'){
                sheet.appendRow([new Date(), event.message.text]);
                if (event.message.text == '教えて'){
                    // TBD
                }
            }
        }
    }
}

  2. 左上のデプロイ→デプロイを管理→右上の鉛筆マークをクリックし， バージョンを新バージョンにしてデプロイ．
    LINEアカウントにメッセージを送ってスプレッドシートに記録されることを確認します．

これで，

などを判定できるようになりました．
後半では，Raspberry Pi Pico Wと連携したLINE Botの開発に挑戦します．

プログラミング経験のある方は，あとの説明がなくとも好きなように実装できるかもしれません．
そのまま作成いただいても，後半をskipして応用コンテンツに取り組まれても構いません．

3-b. LINE Messaging API を利用した本格Botの開発 (後半) へ進む
4-(a) MQTT・クラウドサービスを使った本格IoT へ進む
4-(b) 他のボードやセンサ，ディスプレイなどを試してみる へ進む

目次に戻る