Azure FunctionsでLINE Bot作成

#はじめに
本記事は、Microsoft AzureのAzure Bot Serviceを利用した、画像認識の方法を記載しています。
※2021年9月時点での手順です(クラウドサービスのため変更されている可能性あり)

#前提
- LINEアカウントを持っていること
    - 通常のLINEを利用できるもの
    - もしLINEを使っていない場合は、アカウントの作成が必要
- Azureアカウントを持っていること
    - もしアカウントを持っていない場合は、[こちら](https://azure.microsoft.com/ja-jp/free/search/?&ef_id=EAIaIQobChMIkviS3O3m8gIVUltgCh2S0QKUEAAYASAAEgIIgPD_BwE:G:s&OCID=AID2200208_SEM_EAIaIQobChMIkviS3O3m8gIVUltgCh2S0QKUEAAYASAAEgIIgPD_BwE:G:s&gclid=EAIaIQobChMIkviS3O3m8gIVUltgCh2S0QKUEAAYASAAEgIIgPD_BwE)からアカウント登録

#準備手順
##LINE Messaging API
###LINE Developersにログイン
[こちら](https://developers.line.biz/ja/)からLINE Developersサイトを開きます。
LINE Developersサイトの右上の「ログイン」ボタン(下記画像の赤枠部分)をクリックします。
![LINEDevelopers.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505689/568e9482-ed7b-2007-ab07-e5bfb6382e34.png)
「ログイン方法選択」画面に遷移します。
そして、「LINEアカウントでログイン」ボタン(下記画像の赤枠部分)をクリックします。
![LINEDevelopers.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505689/250d121f-25c2-488d-7a1a-fdc669a84dc0.png)
LINEアカウントで設定しているメールアドレスとパスワードを入力するか、もしくはQRコードログインを使用してLINEアカウントでログインしてください。
![LINEDevelopersログイン.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505689/0124bca8-03b7-6b8a-7c04-0480f2e1f560.png)

###LINE Messaging API channelの作成
Providersの横の「Create」ボタン(下記画像の赤枠部分)をクリックします。
![Provider.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505689/0a7a6606-5a9e-b0e9-3bae-305d87485864.png)
「Provider name」を入力し、「Create」ボタン(下記画像の赤枠部分)をクリックします。
![CreateProvider.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505689/993abf69-a95c-6af7-0dc6-0ac42180dccd.png)
「Channels」タブを選択します。
![Channels.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505689/35fbf72c-59c9-cd51-9894-0214ea3751ae.png)
「Create a Messaging API channel」(下記画像の赤枠部分)を選択します。
![CreateMessagingAPIChannel.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505689/b6fcd9e5-404b-e245-f19c-f4ed979ec0f6.png)
下記画像の「Create a channel」ページに遷移し、次の必須項目を入力する。

- Channel name：チャンネル名
- Channel description：チャンネル概要
- Category：LINE Botの利用種類
- Subcategory：Categoryを細分化したもの

![CreateChannel.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505689/58a35080-f403-0c49-4872-c5ff566f3760.png)
2つの利用規約を確認し、同意してチェックします。
そして、「Create」ボタン(下記画像の赤枠部分)をクリックします。
![ChannelCreate.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505689/6fb314b6-76e5-432b-8329-3bfcc65617e4.png)
内容を確認し「OK」ボタン(下記画像の赤枠部分)をクリックします。
![CreateChannel.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505689/698ed07a-8aa3-4b84-a301-2226c84d02a3.png)
内容を確認し「同意する」ボタン(下記画像の赤枠部分)をクリックします。
![CreateChannelAgree.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505689/a8588f27-8681-f6fd-7cf4-0bf2ff81aeab.png)
「Basic setting」タブを選択し、次の項目を設定します。

- Channel Secret：再発行(後に使用するため、メモ帳にコピー)

![BasicSetting.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505689/a183a34b-014c-9983-f404-64b1ae303c3a.png)
「Messaging API setting」タブを選択し、次の項目を設定します。

- QRコード：スマホで読み込んで友達登録
- Webhook URL：後ほどAzure Functionsで取得するURL
- Use webhook：オン
- Auto-reply messages：応答メッセージをオフ
- アクセストークン：後に使用するため、メモ帳にコピー
![MessagingAPISetting.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505689/c2d441d9-e6f8-6305-80bf-18ff6de4add5.png)

##Azure Functions
###Azure Portalにログイン
[こちら](https://azure.microsoft.com/ja-jp/account/)から「Azure アカウントの管理」ページ(下記画像)を開きます。
左の「ポータルに移動」ボタン(下記画像の赤枠部分)をクリックします。
![account.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505689/fb3f544d-5acf-7858-fa76-f84c09bbe759.png)
アカウント情報
![portal.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505689/48f23b3c-9de5-e1b1-2513-4e617ba3a353.png)

###Azure Functionsの作成
上の検索窓から「関数アプリ」と検索し、「サービス」欄から「関数アプリ」を選択します。
![search.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505689/4b7399c3-2f06-f5d5-0c3a-2a47abd09117.png)
「関数アプリ」画面(下記画像)が開かれます。
上の「作成」ボタン(下記画像の赤枠部分)をクリックします。
![AppliedAIService.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505689/dcffeb88-18e0-604b-5e6f-5a5046a9dc54.png)

以下の項目を入力して、「確認および作成」ボタン(下記画像の赤枠部分)をクリックします。

- サブスクリプション：任意(今回は、「Azure for Students」)
- リソースグループ：任意(今回は、「botservicetest」)
- 関数アプリ名：：任意(今回は、「botservicetest-1」)
- 公開：任意(今回は、「コード」)
- ランタイムスタック：任意(今回は、「Node.js」)
- バージョン：任意(今回は、「14 LTS」)
- 地域：任意(今回は、「Japan East」)
![CreateAzureFunctions1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505689/84689a5f-1de1-a7f1-7110-d3d41f136ffc.png)
「作成」ボタン(下記画像の赤枠部分)をクリックします。
![CreateAzureFunctions2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505689/4d289de2-6fa8-33b8-8276-75bb6ceca84a.png)
デプロイが完了するのを待ちます。
完了したら、「リソースに移動」ボタン(下記画像の赤枠部分)をクリックします。
![deploy.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505689/235a14de-3930-ad08-4752-258d545bfa97.png)
左の「開発ツール」枠から「コンソール」を選択します。
```npm install @line/bot-sdk```と入力し、LINE Bot SDKをインストールします。
![console.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505689/d570d639-4475-4b05-6096-df173af376a2.png)
左の「関数」枠から「関数」を選択し、「作成」ボタン(下記画像の赤枠部分)をクリックします。
![createFunctions1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505689/fc001818-3c51-3c9b-6190-1ba1b9952b3c.png)
以下の項目を入力して、「作成」ボタン(下記画像の赤枠部分)をクリックします。

- 開発環境：任意(今回は、「ポータルでの開発」)
- テンプレートの選択：HTTP trigger
- 新しい関数：任意(今回は、「LINE-Bot-Test」)
- Authorization level：Function
![createFunctions2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505689/ffd60507-aefb-c40e-2e79-84b1b8dbce45.png)
左の「Developer」枠から「コードとテスト」を選択します。
![code1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505689/49ffa0ef-7a24-cd60-b335-1fa3cbbd84f3.png)
下記コードを記載します。
[LINE Messaging API channelの作成](#line-messaging-api-channelの作成)で発行した「チャンネルシークレット」と「チャンネルアクセストークン」を```<YOUR_TOKEN>```と```<YOUR_SECRET>```に入力します。

```javascript:index.js
const line = require('@line/bot-sdk');

const config = {
    channelAccessToken: '<YOUR_TOKEN>',
    channelSecret:  '<YOUR_SECRET>',
};

const client = new line.Client(config);

module.exports = async function (context, req) {
    context.log('JavaScript HTTP trigger function processed a request.');

    if (req.query.message || (req.body && req.body.events)) {
        if (req.body && req.body.events[0]) {
            message = {
                type: "text",
                text: req.body.events[0].message.text
            }
            console.log(message);
            if (req.body.events[0].replyToken) {
                client.replyMessage(req.body.events[0].replyToken, message);
            }
        }
        else {
            context.res = {
                status: 200,
                body: req.query.message
            };
        }
    }
    else {
        context.res = {
            status: 200,
            body: "Please check the query string in the request body"
        };
    };
};
```

記載したら、「保存」ボタン(下記画像の赤枠部分)をクリックします。
![code2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505689/5a4cde3b-2de3-bc0d-4306-b697f06b7f55.png)
「関数のURLの取得」ボタン(下記画像の赤枠部分)をクリックし、取得したURLを作成した「LINE Messaging API channel」のwebhook URLに登録します。
![code3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505689/4378ca55-6dfd-91c1-b5c4-34d7175eaac6.png)
その後、LINEにメッセージを送ると、オウム返しBotが完成したことを確認できます。
![LINE.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505689/f6f7e198-2eca-5418-3d31-1f8990c0e641.png)