ひよっこエンジニアの休日

面白そうだからいろいろまねしてみよう!

AzureでLINEのBotを作ってみる【エコーBot編】

今回やる事

Azure Bot ServiceでエコーBotを作成し LINEに連携させてみます。友達追加後、メッセージのオウム返しを確認します。結果的にノーコードでできました。

【目次】

きっかけ

某運送会社の配達依頼などができるLINE Botを使ってて、面白そう!こういうの作ってみたい!と思いました。そういえばこの前connpassでそういう事してたイベントあったなぁ。あんな感じで割と簡単にできるのでは?と、『azure bot line』で検索したらちょうど良い記事がでてきたので今回はこれをまねて単純なエコーBotを作ってみます。

linedevelopercommunity.connpass.com

tech-blog.cloud-config.jp

Bot作成

Azureアカウント作成

アカウントを持ってなかったので作成*1。12か月は無料で使えるようです*2。登録後即ポータル画面へ。

Azure Bot Service作成

 『Bot Service』から『Web App Bot』を作成しました。設定は以下の画像の通り。

Web App Bot の設定

Web App Bot の設定

作成押下でデプロイ走ります(1分くらい)。デプロイ完了後、『App Serviceプラン』を無料プラン*3へ変更しました。

【実験】Botアプリは動いてる?

作成したBotはどんな動作をするんだろうか?気になったので、とりあえず『Web アプリ ボット』に切り替え『Web チャットでテスト』を使用して動作を確認してみました。何もコーディングしてないのにエコー返してくれる!すごい!!

今回はエコーBotをそのまま使用するため、ソースの確認・変更やビルドはしていません。

Botアプリの動作確認

Botアプリの動作確認

 これでBotの作成完了。続いてLINE側の設定を行います。

LINE Developers登録

LINEのアカウントでログイン。とりあえず日本語設定に変えてホームに移動しました。ホームにはすべきこと・流れが表示されていてわかりやすかったです。

そういえばこの時スマホにLINEの通知がきてました。LINE Developersにログインした事をLINE公式からトークメッセージしてくれててなんか安心しました。

Messaging API作成

まずはプロバイダーの作成。『line』など、一部の文字列は使えませんでした*4。そして後から理解しましたが、このプロバイダー名は利用者に表示されるため注意が必要です。

次にチャネルの作成。チャネルの種類が選べましたが、今回は『Messaging API』を使用しました。アイコンの設定に悩みましたが、いらすとやさんからオウム画像をお借りしました。設定時の画像は取り忘れ。

www.irasutoya.com

【実験】友達登録してメッセージ送るとどうなる?

APIができたので一度動作確認してみました。もちろんBotサービスとの連携はまだなので何もできないはずですが、、何がどこまでできて、どんなエラーがでるのか気になったので。結果はこの通りです。

  • 友達登録できる!
  • トークを始められる!
  • メッセージを送れる!

何もエラーになりませんでした。『Messaging API設定』のQRコードスマホで写真撮って友達登録できました。友達追加画面でアプリ名と画像が表示された時は嬉しくなりました。

友達登録時にメッセージが届き、こちらからメッセージを送ってもエラーにならず、何も設定していない状態でいい感じの回答を返していました。

LINEチャネル作成直後の挙動

LINEチャネル作成直後の挙動


Azure Bot ServiceとLINE Messaging APIの連携

さていよいよBotサービスを連携させます。Web アプリ ボットのチャンネルからLINEを選択し、『チャンネル シークレット』*5と『チャンネル アクセス トークン』*6を設定し、保存します。

その下の『webhook URL』をコピー*7し、LINE側のMessaging API設定、更新します。検証押下でエラーがでましたが、もう一度押すと通りました(タイミングの問題?)最後に、『webhookの利用』をオンに変えます。

これでエコーBot作成完了。最後に動作確認がてら遊んでみます。

Botで遊ぶ

エコーBotの動作確認。。あれ?

エコーBot完成!?

エコーBot完成!?

想定外でした。『いい感じの回答』は今回返してほしくなかった。。

まぁそうか、LINE側の設定変えなきゃ固定メッセージ返すだろ。。って事で、Messaging API設定の『応答メッセージ』の設定リンク*8へ遷移、設定をオフにし、無事にエコーBotを完成させました。

なお、固定メッセージの内容等*9もここ*10で変更できそうです。

最後に

今回はここまで。単純ですが、エコーBotの作成を行いました。AzureやLINE APIなど初めて触れるものばかりでしたが、参考サイトの親切な説明のおかげで進めることができました。作成時間はこの記事を書きながら3時間程度。もっと手早くできるようになりたいですね。

*1:クレジット登録必要

*2:Azure for Students という学生向けプランあり こちらはクレジット登録不要

*3:記事作成時『F1』プラン

*4:予約語

*5:LINE側のチャネル基本設定より

*6:LINE側のMessaging API設定より 『発行』処理必要

*7:https://は手入力した

*8:Account Manager

*9:友達追加時のメッセージとか

*10:Account Manager