はじめに

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

前提

LINEアカウントを持っていること
- 通常のLINEを利用できるもの
- もしLINEを使っていない場合は、アカウントの作成が必要
Azureアカウントを持っていること
- もしアカウントを持っていない場合は、こちらからアカウント登録

準備手順

LINE Messaging API

LINE Developersにログイン

こちらからLINE Developersサイトを開きます。
LINE Developersサイトの右上の「ログイン」ボタン(下記画像の赤枠部分)をクリックします。

「ログイン方法選択」画面に遷移します。
そして、「LINEアカウントでログイン」ボタン(下記画像の赤枠部分)をクリックします。

LINEアカウントで設定しているメールアドレスとパスワードを入力するか、もしくはQRコードログインを使用してLINEアカウントでログインしてください。

LINE Messaging API channelの作成

Providersの横の「Create」ボタン(下記画像の赤枠部分)をクリックします。

「Provider name」を入力し、「Create」ボタン(下記画像の赤枠部分)をクリックします。

「Channels」タブを選択します。

「Create a Messaging API channel」(下記画像の赤枠部分)を選択します。

下記画像の「Create a channel」ページに遷移し、次の必須項目を入力する。

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

2つの利用規約を確認し、同意してチェックします。
そして、「Create」ボタン(下記画像の赤枠部分)をクリックします。

内容を確認し「OK」ボタン(下記画像の赤枠部分)をクリックします。

内容を確認し「同意する」ボタン(下記画像の赤枠部分)をクリックします。

「Basic setting」タブを選択し、次の項目を設定します。

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

「Messaging API setting」タブを選択し、次の項目を設定します。

QRコード：スマホで読み込んで友達登録
Webhook URL：後ほどAzure Functionsで取得するURL
Use webhook：オン
Auto-reply messages：応答メッセージをオフ
アクセストークン：後に使用するため、メモ帳にコピー

Azure Functions

Azure Portalにログイン

こちらから「Azure アカウントの管理」ページ(下記画像)を開きます。
左の「ポータルに移動」ボタン(下記画像の赤枠部分)をクリックします。

アカウント情報

Azure Functionsの作成

上の検索窓から「関数アプリ」と検索し、「サービス」欄から「関数アプリ」を選択します。

「関数アプリ」画面(下記画像)が開かれます。
上の「作成」ボタン(下記画像の赤枠部分)をクリックします。

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

サブスクリプション：任意(今回は、「Azure for Students」)
リソースグループ：任意(今回は、「botservicetest」)
関数アプリ名：：任意(今回は、「botservicetest-1」)
公開：任意(今回は、「コード」)
ランタイムスタック：任意(今回は、「Node.js」)
バージョン：任意(今回は、「14 LTS」)
地域：任意(今回は、「Japan East」)

「作成」ボタン(下記画像の赤枠部分)をクリックします。

デプロイが完了するのを待ちます。
完了したら、「リソースに移動」ボタン(下記画像の赤枠部分)をクリックします。

左の「開発ツール」枠から「コンソール」を選択します。
npm install @line/bot-sdkと入力し、LINE Bot SDKをインストールします。

左の「関数」枠から「関数」を選択し、「作成」ボタン(下記画像の赤枠部分)をクリックします。

以下の項目を入力して、「作成」ボタン(下記画像の赤枠部分)をクリックします。
開発環境：任意(今回は、「ポータルでの開発」)
テンプレートの選択：HTTP trigger
新しい関数：任意(今回は、「LINE-Bot-Test」)
Authorization level：Function

左の「Developer」枠から「コードとテスト」を選択します。

下記コードを記載します。
LINE Messaging API channelの作成で発行した「チャンネルシークレット」と「チャンネルアクセストークン」を<YOUR_TOKEN>と<YOUR_SECRET>に入力します。

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"
        };
    };
};

記載したら、「保存」ボタン(下記画像の赤枠部分)をクリックします。

「関数のURLの取得」ボタン(下記画像の赤枠部分)をクリックし、取得したURLを作成した「LINE Messaging API channel」のwebhook URLに登録します。

その後、LINEにメッセージを送ると、オウム返しBotが完成したことを確認できます。

Azure FunctionsでLINE Bot作成