Help us understand the problem. What is going on with this article?

祝 LINE チャンネル追加!Azure Bot Service で翻訳チャットボット作成 (1)Azure Bot Service から LINE 接続 編

Azure Bot Service で作成した (または Bot Registration されている Bot Framework ベースの) チャットボットアプリ には、Skype や Microsoft Teams、Slack などへノンコーディングで接続できるチャンネルが用意されています。この度 Azure Bot Service に追加された LINE チャンネルを活用して、入力した言葉を翻訳してくれるチャットボットを作成して LINE から使うまでのプロセスを紹介します。

1. Azure Bot Service から LINE 接続編

準備

Microsoft アカウント & Azure サブスクリプション

  • Microsoft アカウント
  • Azure サブスクリプション
    • 無料試用版で充分です。上記↑で取得した Microsoft アカウントで申し込みを行います。(無料のプランがあるので、従量課金プランでも大丈夫ですが念のため。)
    • Azure 無料アカウントを今すぐ作成
  • (オプション) 作成済みの Azure Bot Service
    • 既に Azure Bot Service を作成済みの場合は、1.1 の手順を飛ばしてください

LINEアカウント (またはビジネスアカウント)

LINE アプリでご利用中のアカウントで OK です。

1.1. Azure Bot Service で EchoBot を作成する

ブラウザーで Azure Portal (https://portal.azure.com) を開き、Azure サブスクリプションが紐づいている Microsoft アカウントでサインインします。
Azure Portal から左端ナビゲーションバーから [+リソースの作成] をクリックします。
20190308_01.PNG

新規 ペインの検索欄に Web App Bot と入力し、表示される Web App Bot をクリックします。Web App Bot ペインで [作成] をクリックして作成に進みます。
20190308_02.PNG

Web アプリ ボット ペインで必要事項を設定します。
20190308_03.PNG

  • ボット名
    • お好みの名前を入力します。こちら Azure Bot Service 全体で一意となる名前になるような名前を設定してください。一意となる名前を入力すると ✓ (チェックマーク) が表示されます
  • サブスクリプション (※デフォルトのまま)
  • リソースグループ
    • お好みのグループを新規作成 or 既存のリソースグループを選択します
  • 場所
    • Bot アプリを配置するデータセンターロケーションを選択します。ここでは Japan East (東日本) を選択しています
  • 価格レベル
    • 開発や検証では F0 (無償版) で充分です
  • アプリ名 (※自動入力)
    • 基本的にボット名と同じ名前が自動入力されますが、こちらも azurewebsites.net で一意となる必要があるため、適時修整してください
  • ボットテンプレート
    • クリックして、ボットテンプレート ペインを開き、今回は以下を選択します
      • SDK バージョン : SDK v4
      • SDK 言語 : C# or Node.js (お好みの方を選択)
      • テンプレート : EchoBot
    • [作成] をクリックして テンプレートの選択を確定します
  • App Service プラン
    • これまでに Azure App Service を作成している場合はそちらが自動設定されている場合があります。そのまま利用する or 新規作成を行ってください
  • Azure Storage
    • Bot の状態 (ステート) やログを保存するストレージを設定します。新規作成 or 既存のストレージを選択します
  • Application Insights
    • アプリの稼働ログを取得するサービスです。お好みですが、ここではデフォルトのまま オン になっています。
  • Application Insights の場所
    • Application Insights をオンにした場合に表示されます。ここでは Japan East (東日本) を選択しています。
  • Microsoft アプリ ID とパスワード
    • デフォルトのまま アプリIDとパスワードの自動作成 で OK です

Web アプリボット ペイン の一番下にある [作成] をクリックするとアプリが作成されます。

アプリの作成(デプロイ)が成功した旨のメッセージが表示されたら、[リソースに移動] をクリックして作成した Web アプリボット を表示します。
20190308_04.PNG

App Service プランを新規作成した場合、プランが S1 の有償プランになっています。[すべての App Service 設定] > [スケールアップ] をクリックして 無償プラン(F1) に変更しておくと良いでしょう。
20190308_06.PNG

作成した Web アプリ ボット ペインのメニューから Web チャットでテスト をクリックします。チャット画面が表示されるので、メッセージを入力すると、オウム返し (Echo) でメッセージが返答されれば Web アプリボットは正常に作成されています。
20190308_07.PNG

1.2. LINE 公式アカウントの開設

LINE for Business のアカウント開設 Web サイト にアクセスします。
未認証アカウントを開設する をクリックし、まずは未認証アカウントの作成に進みます。

20190927_01.png

ログイン画面が表示されたら、お持ちの LINE アカウント(またはビジネスアカウント)でログインインします。

20190927_02.png

LINE 公式アカウント作成 のページで必要事項を入力します。

  • アカウントの基本情報
    • アカウント名 : お好きなモノを (半角スペースは利用不可)
    • メールアドレス : 管理者、問い合わせ先となるメールアドレスを入力
  • 業種 : 目的に合うものを選択します。個人で検証している場合は、個人 の項目がありますのでそちらから選択すると良いでしょう

設定したアカウント名は念のためローカルに保存しておきます。
入力できたら画面下部の 確認する をクリックして次のステップに進みます。

20190927_03.png

入力内容の確認 画面で、入力&選択した内容を確認し、完了する をクリックして、公式アカウントを作成します。

20190927_04.png

LINE 公式アカウントが作成されました と表示されたらOKです。LINE Account Manager へ をクリックして、LINE Account Manager の画面に進みます。

20190927_05.png

初回、情報利用に関する利用について という画面が表示される場合は 同意 をクリックして進みます。

20190927_06.png

1.3. LINE Account Manager から Messaging API の設定

Account Manager が表示されたら、画面右の 設定 をクリックします。

20190927_07.png

アカウント設定画面が表示されたら、左列にある Messaging API をクリックして表示します。

20190927_08.png

[Messaging API を利用する] をクリックします。

20190927_09.png

プロバイダーの選択 ダイアログで、お好みのプロバイダー名を入力 (または作成済みのプロバイダーを選択) ます。念のため設定したプロバイダー名はローカルに保存しておきます。
[同意する] をクリックして進みます。

20190927_10.png

プライバシーポリシーと利用規約 ダイアログはとりあえず未入力のまま [OK] をクリックします。

20190927_11.png

Messaging API を利用 確認のダイアログで、内容を確認して [OK] をクリックして設定を完了します。

20190927_12.png

Messaging API の画面で、ステータス利用中 になっているのを確認します。その下にある Channel ID と Channel Secret をローカルに保存しておきます。

20190927_13.png

その他の設定は LINE Developers から行えます と記載されているので、その LINE Developers のリンクをクリックします。(または https://developers.line.biz/ にブラウザからアクセスします)

1.4. Messaging API のアクセストークンの取得

LINE Developers のページで、Messaging API をクリックします。

20190927_14.png

画面中央の Messaging API の [今すぐはじめよう] をクリックします。

20190927_15.png

画面左バーのプロバイダーリストから、1.3. で作成したプロバイダーをクリックします。

20190927_16.png

表示されるチャネル(1.2. で作成した LINE 公式アカウントのアカウント名)をクリックします。

20190927_17.png

チャネルの基本設定が表示されます。画面を下にスクロールして メッセージ送受信設定 という項目を探します。

20190927_18.png

メッセージ送受信設定 に記載されている アクセストークン(ロングターム) をコピーしてローカルに保存しておきます。再度このページで設定を行うので、ブラウザーは閉じないでおきます。

20190927_19.png

1.5. LINE Messaging API と Azure Bot Service アプリの接続

Azure Portal から Web App Bot に LINE の接続設定を行う

Azure Portal に戻り、1.1 で作成した Web App Bot、または作成済みの Azure Bot Service を表示します。
Web アプリ ボット ペインのメニューから チャンネル をクリックします。その他のチャンネル に表示されている LINE をクリックします。
20190308_20.PNG

LINEを構成 のページで、ローカルに保存しておいた Channel Secret (チャンネルシークレット) と チャンネルアクセストークン を貼り付けます。
また、表示されている Webhook の URL をコピーしてローカルに保存しておきます。
20190308_20_02.PNG

[保存] をクリックして、Web App Bot 側の設定を保存します。

LINE Developer ページから Azure Web App Bot への接続設定を行う

再び LINE Developer ページを開き、作成した Message API のチャネルを開きます。
基本情報 タブ内にある メッセージ送受信設定 を再度表示します。

Webhook URL の欄にある [編集] をクリックして、Azure Portal から取得しておいた Webhook URL を貼り付け、[更新] をクリックして保存します。
20190308_22.PNG

[接続確認] が表示されたらクリックし、✓ 成功しました と表示されるのを確認してください。
20190308_23.PNG

Webhook 送信 の欄にある [編集] をクリックして、利用する を選択して [更新] をクリックして有効化します。
20190308_21.PNG

さらにページをスクロールして LINE@機能の利用 を表示します。
自動応答メッセージ の欄にある [設定はこちら] をクリックして設定ページを表示します。(LINEアプリからの本人認証が必要な場合があります。)
image.png

別のページが開くので、応答設定応答メッセージオフ になっているのを確認します。(ボットが応答するのでココで自動応答しなくて良いですよね...)
image.png

友だち追加時あいさつ はお好みで編集してください。
編集する場合は、 チャネル基本設定友達追加時あいさつ設定はこちら をクリックして設定ページを表示します。(LINEアプリからの本人認証が必要な場合があります。)
応答設定あいさつメッセージ[あいさつメッセージ設定] をクリックします。
image.png
テキストを修正して、[保存を保存] をクリックして内容を保存します。
image.png

1.6 LINE アプリからの接続テスト

LINE アプリから LINE Developer ページに表示されている QR コードを読み取り、追加します。
20190308_26.PNG

友だち追加メッセージが表示されたら、入力してみます。ひとまず入力した内容がそのままオウム返し (Echo) で返答されれば、接続テストは完了です。
20190308_27.PNG

LINE からの接続がうまくいかないときのトラブルシュート
1. 何も返答が返ってこない場合
- LINE Developers ページでの設定
Webhook送信: 「利用する」設定したはずなのに「利用しない」にリセットされている場合がありますので、再度確認してください
- Azure Web Bot がスタンバイ状態
しばらく Bot へのアクセスが無い場合、F0(無償プラン) だとスタンバイ状態になっていて、LINE からの接続がタイムアウトになる場合があります。Webチャット で動作を再度確認してから LINE アプリで確認してください
2. "Something went wrong" と表示される場合
Azure Web App 側での動作が失敗しているときに表示されるメッセージです。Azure Web App の動作確認を行ってください

Next Step

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした