More than 5 years have passed since last update.

@i-dachin

Easy Easy

はじめてのLINE BOT開発でAzureに入門する決意がついた話

Last updated at 2019-07-12Posted at 2019-07-12

1 / 16

このお話の概要

LINE BOTで簡単なFAQを作ってみようとしたら、色々あってMS凄い（小並感）となった
なので「Bot開発やるならAzure使おう」ということを伝えたいお話

挑戦者のステータス

LINE BOT完全初心者
BOT開発初心者 (slackのslash commandを最近一つ作ったくらい)
能力的にはops/SREが中心だが、最近はアーキテクチャ/golangでの開発が中心
180kg程度だったらレッグプレスで持ち上げられる程度の筋力

参考にしたもの

全体の流れ

LINE BOT開発との出会い
実際に手を動かすまでに...
MessagingAPIを利用して ~~つくって~~触ってみたお話

LINE BOT開発との出会い

今でも忘れない私と「LINE BOT開発」の馴れ初めはconnpassから偶然オススメされた LINE Developer Community の「 LINE Developer Community : 第 2 回ボット自慢 LT 大会 」がきっかけでした。

そこで自慢された数々のBOTたちを見て
　『絶対流行る』
と興奮したのをよく覚えています。

実際に手を動かすまでに...

興奮冷めぬまま帰宅し、その熱のまま「よし、早速作ってみよう！！」となった時
　『全体像ってどんな感じだろう？』
　『あのいい感じに表示されてたアイテムの名前なんていうんだっけ？』
　『BOTってどういうフローで動いてるんだろう？』
と自分に前提となる知識がないことをその時ようやく思い出しました。

なので、まずは開発する前に情報収集に繰り出すことにしました。

□ イベントで情報収集

Try１：

ということでまずはイベントで情報収集！
参加したのは出会ったきっかけでもあるコミュニティ「LINE Developer Community」へ
色々な事例やどんなアーキテクチャでやっているかを調査してみました

結果：

事例はいっぱい聞ける
アーキテクチャも紹介してくれることもある
初心者向けのイベントも増えてきたので参考になる
でも基本的に、みんなレベルが高くて初心者の参考にするにはきつい
「初めてやってみました！」という人でもレベルが高いので軽く凹む

□ Developer用公式ドキュメントを参考にする

Try2:

「イベントではこんなこともできるよ！」ということのイメージはついてきた！
あとはLINE Developers 公式ドキュメントを見れば大体の概要はつかめるはず！

結果：（※間違ってたら指摘お願いします）

APIでどんなデータが取れるかは大体理解できる
- LINE内でWebアプリ動かしたい　→ LIFF
- ユーザーイベントをカスタマイズして制御したい →　Messaging API
アイテムの詳細名まではわからなかった

□ LINE公式ドキュメント(非Developer)を参考にする

Try3:

各UIアイテムの名前や料金とかはきっと別に資料が詳しくあるはず！
それを見ればきっとLINE BOTで使われているUIコンポーネントは把握できる！はず！

結果：

ようやくUIコンポーネントごとの名前を把握できた！
「こういうこともできますよー」の事例とリンクまで乗っている
最初に見るべきはこっちだったと断言できる

「これでようやくLINE BOTの登場人物は把握できた！」
「さあ、いざ開発へ！」

MessagingAPIを利用してつくって触ってみたお話

□ とりあえず進め方を整理する

ではどこから進めればいいんだろうか
ちょっと進め方を整理する。

LINE Developer Accountつくる
@kenakamuさんの記事を参考にしながら環境を整える
サンプルコードを動かしてみる
ちょっとカスタマイズしてみる

こんな感じであろう。
詰まるまでサクサク進めていく。

（ホントはgolang使いたかったけど、まずはbotに慣れてからにする）

□ LINE Developer Accountつくる

これは全く詰まるポイントがなかったのでちょっと割愛します

□ @kenakamuさんの記事を参考にしながら環境を整える

こちらも詰まるポイントが特にないのでぜひリンク先の記事を熟読してくだしあ。

※ nodeが元々入ってる人はバージョンが低い場合があるので注意！！
※ その場合は↓の記事を参考にバージョンを上げてみてください
https://qiita.com/ucan-lab/items/517ee13a2f8769ab866c

□ ちょっとカスタマイズしてみる

FAQを元々作りたかったので↓のような選択肢がまずほしい

ここでちょっと詰まった。

が、ここで最高な資料を見つけてしまう

MicrosoftさんのAzure公式資料！！
しかも日本語も対応！！！！
https://docs.microsoft.com/ja-jp/azure/bot-service/bot-builder-howto-add-suggested-actions?view=azure-bot-service-4.0&tabs=csharp

悩んでいた↓の問題が一気に解決！！！！

どうやって追加すればいいか
Botはどういうイベントフローなのか
デプロイの方法
などなどここを見れば悩みが解決する！！

こんな感じに↓↓

bot.js

// Copyright (c) Microsoft Corporation. All rights reserved.
// Licensed under the MIT License.

const { ActivityHandler } = require('botbuilder');

class MyBot extends ActivityHandler {
    constructor() {
        super();
        // See https://aka.ms/about-bot-activity-message to learn more about the message and other activity types.
        this.onMessage(async (context, next) => {
            await context.sendActivity(`You said '${ context.activity.text }'`);
            // By calling next() you ensure that the next BotHandler is run.
            await next();
        });

        this.onMembersAdded(async (context, next) => {
            const membersAdded = context.activity.membersAdded;
            for (let cnt = 0; cnt < membersAdded.length; ++cnt) {
                if (membersAdded[cnt].id !== context.activity.recipient.id) {
                    await context.sendActivity('Hello and welcome!');
                }
            }
            // By calling next() you ensure that the next BotHandler is run.
            await next();
        });
    }
}

module.exports.MyBot = MyBot;

指示にあったように
await context.sendActivity('Hello and welcome!');
を
await context.sendActivity('[conversationUpdate event detected]');
に書き換えてみる

簡単！！

そして気づいてしまう

botのエミュレータはある
すごいbotのフレームワークがある
ドキュメントも充実している
しかも日本語対応もしてる
AzureならFreeで試せる

あれ、Azureすごくない？？

結論

Azureのファンになります
※ BOTではAzureがすごい

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up