Azure Bot Serviceで高速bot開発

LINEでbotアプリを開発する場合、[LINE Developers](https://developers.line.biz/ja/) の [Messaging API のドキュメント](https://developers.line.biz/ja/docs/messaging-api/) を読み解くことから始めるのが有用です。
APIの仕様を正確に把握することができ、アプリ開発の流れを丁寧に説明したクイックスタートがあり、好みの言語のSDKを選択し、その使い方を学ぶことができるからです。

ただし、書かれている手順で、開発を始めてみると以下の知識が多少は必要であることがわかります。

* SDKを利用する際のプログラミング言語の知識
* サーバー(ホスティングサービス)の知識

まず、サンプルアプリのソース一式をダウンロードして、ローカルで実行しようとした場合、一定の開発環境を構築する知識が必要になります。また、用意されたサンプルプログラムをだれでも利用できるように、サーバーに配置するために、herokuなどのホスティングサービスを利用するのですが、その知識もある程度必要かなと思います。せっかく新しいことを始めようとしたのに、これらが障壁になってしまい、途中で諦めてしまうこともあるかもしれません。
そこで、この記事では、Azureというクラウドコンピューティングサービスを利用し、そこに用意されたbotに特化したサービスのテンプレートを用い、**とりあえず**、極力壁を感じることなく、**高速にLINE botアプリを作ってみよう**ということのみにフォーカスし、開発の流れを紹介しようと思います。

流れを覚えてしまうと、**3分程度**で、LINEのオウム返しbotアプリを作ることができるはずです。

# 事前準備
* [LINE Developersの開発者用コンソール](https://developers.line.biz/console/)に、ご自身のLINEアカウントでログインできるかどうかを確認ください。できない場合、スマホやタブレットのLINEアプリで、メールアドレスとパスワードを設定してください。
* [Microsoft Azure](https://azure.microsoft.com/ja-jp/)のアカウントを作成してください。

# 1) LINEアプリの作成
① まずは、LINEアプリを作っていきます。[LINE Developersの開発者用コンソール](https://developers.line.biz/console/)にログインします。プロバイダーを作っていない場合、新しく作成します。作成するLINEアプリ等の提供者の名前になります。なお、既存のプロバイダーを使用してもよいので、必ず必要な作業ではありません。
![Image23.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/71395/54a00ffe-1d29-b8f8-dfd0-977a688c8022.jpeg)
② プロバイダーを選択したら、次に、新規チャネルを作成します。チャネルの種類は、「Messaging API」を選択します。
![Image24.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/71395/62719fb2-8573-6257-2594-667f683beb4b.jpeg)
③ 基本情報を埋めたら、作成ボタンをクリックします。「情報利用に関する同意について」を一読し、同意してください。

| 項目 | 値 |
|:--|:--|
| チャネルアイコン | 指定しなくてもいいですが、何らかの画像を指定しておくと友達になったあとにわかりやすいです。640px × 640pxが推奨です。 |
| チャネル名 | アプリの名前です。"LINE"を含まなければ、何でもいいです。 |
| チャネル説明 | アプリの説明です。何でもいいです。 |
| 大業種 | 大業種を指定してください。分からないときは、個人。 |
| 小業種 | 小業種を指定してください。分からないときは、個人（その他）。 |
| メールアドレス | メールアドレスを入力してください。 |
| LINE公式アカウント利用規約 の内容に同意します | チェックします。 |
| LINE公式アカウントAPI利用規約 の内容に同意します | チェックします。 |

④ アプリが作成され、チャネル基本設定が表示されているはずです。下のほうにスクロールし、**チャネルシークレットを控えておいてください**。
![Image28.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/71395/56aa5eb1-83e5-f39a-23b2-208068ff41a2.jpeg)

↓↓↓　スクロールして　↓↓↓

![Image27.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/71395/fa9223c6-ffab-6021-5fe2-421b3d6f6661.jpeg)
⑤ Message API設定へ移動し、一番下の**チャネルアクセストークンを発行し、控えておいてください**。
![Image29.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/71395/bcaa1648-2ece-27d9-c3e7-964ec49b4537.jpeg)

↓↓↓　一番下までスクロールして　↓↓↓

![Image30.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/71395/29c7b13a-7e8b-2daf-61a5-435c8e358ec4.jpeg)

↓ 発行ボタンをクリックすると、長い文字列が表示されますので、コピー！
![Image31_.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/71395/e5764088-e75a-d956-5b6e-40706adab6d0.jpeg)

これで、LINE側の初期設定は完了。慣れると1分未満でできるはずです。

# 2) Azure Bot Serviceの設定
① [Azure](https://azure.microsoft.com/ja-jp/)にサインインし、ポータル画面を開きます。
![Image32.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/71395/2171d448-2d30-62c8-9f3f-ec9904dc1aad.jpeg)
※英語表示を日本語に変えたい場合は、右上の歯車マークから変更できます
![Image33_.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/71395/7166e84b-7702-1b13-4c00-b2f4b78ed699.jpeg)
② 左上の≡メニューから、「すべてのサービス」を選択します。検索窓に"bot"と入力すると、Bot Serviceが表示されるので、選択します。
![Image34.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/71395/e9deeee8-c14e-647a-792b-2946aecb6f78.jpeg)
![Image35.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/71395/5c3fc6b3-8fcb-230d-f04c-35bd40469865.jpeg)
③ 左上の「+作成」をクリック、リストの下のほうにある「Web App Bot」を選択、「作成」をクリックします。
![Image36.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/71395/59481604-3424-dbc0-927c-7dc07e2143c6.jpeg)
![Image37.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/71395/52012a7c-621d-8eba-d0c6-2ec58cf157ca.jpeg)
![Image38.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/71395/ec205e66-f503-7afb-ff96-839d2ed28b06.jpeg)
④ 項目を埋め、作成します。作成ボタンクリック後、ちょっと時間がかかります。

| 項目 | 値 |
|:--|:--|
| ボットハンドル | botの名前です。何でもいいです。 |
| サブスクリプション | 何でもいいです。 |
| リソースグループ | 何でもいいです。 |
| 場所 | 何でもいいです。とりあえず、Japan Westを選びます。 |
| 価格レベル | 料金を発生させないように、**F0 (10K Premium メッセージ)**を選びます |
| アプリ名 | 何でもいいです。ボットハンドルが入っていると思います。 |
| ボットテンプレート | **Echo Bot (C#)、または、Echo Bot (NodeJS)**を選びます。 |
| App Serviceプラン/場所 | 何でもいいです。 |
| Application Insightsの場所 | オフにします。 |

※App Serviceプランを作成した場合は、App Serviceプランのスケールアップから、推奨される価格レベルに「F1」を選択し、適用することで、無料で利用することができます。
![Image39.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/71395/20a3b8d8-d2a3-ad32-2db0-ba61ac4ac46d.jpeg)


⑤ Bot Serviceをもう一度開くと、リストに作成したbotサービスが表示されているので、選択します。表示まで少し時間がかかることがあります。「+作成」の2つ隣の「更新」で表示を更新してみてください。
![Image41.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/71395/63e169ba-645a-bdc4-3816-574b8cf74197.jpeg)
⑥ 「チャネル」をクリックし、LINEを選択します。
![Image42.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/71395/5179b29b-7f60-4b68-06e8-790502152c0b.jpeg)
![Image43.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/71395/a36bca82-c718-1f84-974c-32ee293dd35d.jpeg)
⑦ 控えていた**チャネルシークレット**と、**チャネルアクセストークン**を入力し、保存します。下部の**webhookのURL**をコピーして、控えておきます。
![Image44.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/71395/5a25bbd3-eb7b-ab5b-c91c-293bb55e3e3d.jpeg)

これで、Azure上にオウム返しbot用のサービス構築と、LINEアプリとの連携設定が完了です。デプロイに少し時間がかかることがありますが、頑張れば、1分30秒くらいでできます。

# 3) 最後に、LINEにwebhook URLの設定をしたら、はい、できあがり
① また、LINE Developersに戻り、Messaging API設定の「応答メッセージ」の編集をクリックします。別ウィンドウで、LINE Official Account Managerが開きます。
![Image47.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/71395/71ebc0b6-cfaa-2500-2d2b-fa320f3c8407.jpeg)
② LINE Official Account Managerでは、あいさつメッセージをオフ、応答メッセージをオフ、Webhookをオンにし、「Messaging API設定」をクリックします。
![Image48.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/71395/707b8193-5023-9a02-5fdd-0b03e709f323.jpeg)
③ 控えていたAzure Bot Serviceの**webhookのURL**を入力します。**先頭に"https://"をつけるのをお忘れなく**。
![Image49.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/71395/2932ec21-cc73-589f-6902-7782a0e6f6e8.jpeg)
④ またまた、LINE Developersに戻ります。Messaging API設定にあるQRコードをスマホやタブレットのLINEアプリから読み取って、友達に追加します。メッセージを送信すると、オウム返しでメッセージが返ってくるのが確認できると思います！
![Screenshot_20210127-215505.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/71395/4ca8210d-2ae8-0770-b1d6-ffb18a195735.png)

速いからいいということではありませんが、かなり簡単に、自分のLINE botアプリが作成できたと思います。今後、このアプリに改造を加えていくには、ある程度の開発言語や開発環境の知識が必要にはなりますが、これまでに見てきた通り、LINE Developersや、Azureを利用することは、botアプリを作っていく上で、多くの難しい作業が簡素化され、直感的に利用できるというメリットがあると思います。かつ、LINEも、Azureもたくさんの利用者がいるので、多くのドキュメントやヒントがインターネット上にあります。ただし、どちらも日々進化し続けているサービスですので、書かれた日付だけは注意が必要です。

# 開発を継続していくため
Azure Bot Serviceで作成したbotアプリは、ソースをダウンロードすることができます。
![Image51.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/71395/a6cc7f2d-d41a-0258-a91d-a9e9cf96789d.jpeg)
また、デプロイセンターで、Azure Reposや、Githubというソース管理サービスと連携させることで、継続的な開発作業が容易に構築できます。この辺りは、別の記事にまとめたいと思います。
![Image52.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/71395/9c4f9d39-b767-9f6e-b9fc-a9ea5608b7d4.jpeg)