LINEとボット作って激ツン公式アカウントを作る | cloud.config Tech Blog

作っていくぞ～

作るやつ

こんな感じ

LINE公式アカウント作る

LINE Developersにアクセス

https://developers.line.biz/ja/

ログイン

自分が普段使ってるLINEでもログインできるし、商業用に作りたいんならメールアドレスでアカウント作ってログインもできるぞ

今日は個人で作るからLINEアカウントでログイン

プロバイダーを作るぞ

プロパイダー > 作成を押すんだ

名前は適当でいい

チャネルを作るぞ

Messaging APIを押すんだ

チャネルの種類：Messaging API
プロバイダー：さっき作ったプロバイダーの名前
チャネルアイコン：適当な画像。なくていい
チャネル名：LINE公式アカウントの名前
チャネル説明：適当。「あ」とかでいい
大業種：適当。どれでもいい
小業種：適当。どれでもいい
メールアドレス：自分のメールアドレス。連絡が取れるやつ。来ないけど
プライバシーポリシーURL：プライバシーポリシーがあればそのURL。ピンとこないなら書くな
サービス利用規約URL：利用規約があればそのURL。知らない？なら書くな

LINE公式アカウント利用規約とLINE公式アカウントAPI利用規約をよく読んで同意にチェック。よく読め

ほんで作成

できたな。おさらいだ

これを作った。次はボット作るぞ

Azure Web App Bot作る

Azureポータルにアクセス

https://portal.azure.com

アカウントとサブスクリプション作ってない奴はググって作れ。ブログで書いてもAzure側の手順ちょこちょこ変わるから書きたくないんだ

リソースの作成を押すんだ

Web App Botで検索

これを作るぞ。作成を押すんだ

ボットハンドル：ボットの名前
サブスクリプション：作ったサブスクリプションなので勝手に入力されてる
リソースグループ：さっきのLINEで作ったプロバイダーみたいなやつ。このWeb App Botをグループ分けするための器。適当な名前でいい
場所：東日本(Japan East)でいい
価格レベル：どれだけでかいボットを作るか。金がかかるかかからないかの選択なので注意。個人で遊ぶ程度ならF0でいい
アプリ名：ボットハンドルで入力されたやつが勝手にぶち込まれる
ボットテンプレート：どの言語でどんなボットを作るか。後で書く。私はEcho Bot(NodeJS)にした
App Serviceプラン/場所：ボットをデプロイするApp Serviceの場所。東日本(Japan East)で新規作成すればいい
Application Insights：ボットを解析してくれるApplication Insightsを作るか作らないか
Microsoft アプリ ID とパスワード：何もしなくていい。何もするな

ボットテンプレート

今の時点で作れるのは4種類。Echo Botと基本ボットの2種類がC#かNode.jsのどっちかで作れるので4種類

Echo Bot：オウム返ししてくれるだけのボット。もちろんいじることで他のこともできる
基本ボット：言語理解とボット分析ができるとは書いてある。ただLUISアカウントを作らないといけないから私はやったことない

言語はどっちでもいい。私はNode.jsが一番好き

作成を押してデプロイを待つんだ

作ったリソースを見てみるぞ

Webチャットでテストを押すんだ

作ったボットで遊ぶことができるぞ

今はまだ純粋に言葉をそのまま返してくれるだけ。こいつを汚していきます

本来なら

ボットのソースコードをダウンロードしてくる
コードをいじる
デプロイする

っていう作業が必要でめんどくさい。パイプライン組んで自動化すればいいけどこのブログに書くのがめんどくさい。

ということでオンラインコードエディターでいじっていく

このオンラインコードエディターはさっき言った、ソースのダウンロード・デプロイをすっ飛ばしてコードをいじれる。ブラウザ上でいじれるのでエディタを用意する必要もない。

/bot.jsを見てみよう

赤枠のところが「ユーザがメッセージを送ってきたときの処理」、青枠のところが「ユーザがチャットを開始したときの処理」だ。

11~12行目を見てみよう。11行目に`Echo: ${ context.activity.text }`とある。

${ context.activity.text }はユーザが実際に送ってきたメッセージだ。

12行目のcontext.sendActivity()でメッセージを返している。

context.activityの中身を見てみよう。

await context.sendActivity(JSON.stringify(context.activity, null, "\n")); // この行を追加
const replyText = `Echo: ${ context.activity.text }`;
await context.sendActivity(MessageFactory.text(replyText, replyText));

これを見るとtimestamp from.name channelId typeで「いつ」「誰が」「どのチャットで」「どんな形式で」メッセージを送ってきたかもわかるようだ。

さらにコードをいじっていく

this.onMessage(async (context, next) => {
    if (context.activity.text === "デバッグ") {
        await context.sendActivity(JSON.stringify(context.activity, null, "\n"));
    } else if (context.activity.text === "こんにちは") {
        await context.sendActivity("うるせぇ");
    } else {
        const replyText = `Echo: ${ context.activity.text }`;
        await context.sendActivity(MessageFactory.text(replyText, replyText));
        // By calling next() you ensure that the next BotHandler is run.
    }
    await next();
});