リアルタイムフィードバックシステムの作り方 with LINE Bot ~LINE Bot設定編~

Pocket

先日、社内で開催したテクニカル・カンファレンスのライトニングトークにて使用した、LINE BotとGrafanaを使ったリアルタイムフィードバックシステム「bravo!」の作り方についてご紹介します。
テクニカル・カンファレンスについては、以下の過去記事をご覧ください。
以前他のチームメンバーが出した記事では、Grafanaサイドの設定の仕方などをご説明しました。
今回はLINE Bot設定編と題しまして、「bravo!」のクライアントサイドであるLINE Botの導入とその設定の仕方(LINE Botへメッセージを送ると、何かしら返事が返ってくるまで)をご説明します。 
次回以降で実際にDynamoDBにデータを登録する処理を実装する予定なので、そちらの記事も併せてご参考いただければと思います。
※2018/7時点のものになりますので、設定画面のレイアウトなどが変更となっている可能性があります。

リアルタイムフィードバックシステム 構成の概要

おさらいとなりますが、「bravo!」の構成は以下のようになっています。
構成はフロントエンドにLINE Botを使用し、処理をAWS(Amazon Web Services:Amazon.comにより提供されているクラウドコンピューティングサービス)で行っています。
LINE Botの画面上に「bravo!」ボタンが用意されており、ボタンが押されるとAPI GatewayやLambdaファンクション、DynamoDBを通り、最終的にAmazon ElasticSearchにデータが連携されます。グラフの描画にはGrafanaを使用しました。

LINE Botの導入

LINE@アカウントの作成

最初にLINE Botのbotアカウントを作成します。
LINE@にアクセスし、「LINE@アカウントを作成する」ボタンをクリックします。
その後は画面の指示にしたがって作成を進めます。
 
アカウント作成が完了すると、LINE@MANAGERへのログインを求められます。「LINE@MANAGERへログイン」ボタンをクリックします。LINE@MANAGERでは、UIベースでLINE Botの基本的な設定を行うことができますが、今回はLambdaを使ってより拡張性の高いLINE Botを作りたいので、botを利用するための設定以外ではほとんどこの画面はいじりません。ちなみに、ログインに成功すると下記のようなページに飛びます。 

Messaging APIの利用設定

LINE Botをユーザからのメッセージで動作させるために、Messaging APIという機能を使用します。
左側のメニューから「アカウント設定」→「Messaging API設定」の順で選択し、「プロバイダー」を選択して「APIを利用する」ボタンをクリックします。

次に、ユーザへの応答メッセージの設定をします。
Messaging APIを利用開始すると、「Messaging API設定」画面が下記の画像のように変わります。

※単純にメッセージを返したい場合は変更せずに、左側のメニューの「メッセージ」から設定してください。

次に、LambdaからLINE Botへアクセスするためのトークンを発行しておきます。
「Messaging API設定」画面の「LINE Developersで設定する」ボタンをクリックし、別ウィンドウで開いた画面の下部にある、アクセストークン(ロングターム)の「再発行」ボタンをクリックします。
これは後で使うのでコピーしておきます。これを他人に知られてしまうと、LINE Botへアクセスされてしまうので扱いには要注意です。

Lambdaの設定

Lambdaの作成

それでは、今回のLINE Botの脳とも呼べるLambdaに設定に入ります。まずはLambda関数を作成します。
AWSコンソールの「Lambda」サービスから「関数の作成」ボタンをクリックします。
「関数の作成」画面で、関数名とランタイム、ロールを選択し、「関数の作成」ボタンをクリックします。
今回はNode.jsで実装していきたいと思います。

Lambdaの実装

以上でLambda関数が作成・設定できたので、早速実装を進めます。
index.jsファイル内のexports.handler関数が最初に呼ばれる関数です。
説明のため、ユーザからのメッセージをそのままオウム返しするコードを書いてみます。
ここで、以下の3つの点に注意していただきたいと思います。

1.replyToken

このトークンを取得しておかないと、何か送ってきたユーザへの返信ができません。
個別にユーザのIDを取得することもできるのですが、返事するだけならreplyTokenを使ったほうが簡単ですし、LINE Botからの能動的なメッセージ送信は有料プランへの登録が必須になります。

2.リクエストヘッダー内のAuthorization

これにLINE Developersのbot設定から確認できる、Channel Access Token(LINE Botの設定時に「コピーしておく」と書いていたもの)を設定しないといけません。

3.Node.jsのrequestモジュール

AWS Lambdaの中にはhttpsなど既に標準で入っているモジュールもあるのですが、
入っていないモジュールももちろんあります。

今回は標準で入っていない、requestモジュールというものを使用しています。その場合は、こちらで準備してあげなくてはいけません。
モジュールを準備できたら、以下のような構成でzipファイルを作り、アップロードします。zip形式でなかったり、フォルダー構成が違ったりすると正常にモジュールを読み込んでくれませんので、注意してください。
node_modules配下に使いたいモジュールが入っています。

このとき、ソースが書いてあるjsファイルのファイル名は必ず「index.js」でなくてはなりません(デフォルト設定の場合のみ)。「index.js」以外にしてしまうと、Lambdaの設定をいじらない限り、exports.handlerで拾ってくれなくなり、エラーになります。

Webhook URLの設定

API Gatewayの設定

実装が完了したら、最後にLINE BotのWebhook URLにLambdaを設定します。
そのためにまず、API Gatewayの設定を行います。
 
Lambdaの編集画面にある、「▼Designer」から、「API Gateway」をクリックして、トリガーに追加します。
「トリガーの設定」項目が下に出てくるので、下記項目を設定し、「追加」ボタンをクリックします。
その後、API Gatewayの詳細から「URLの呼び出し」項目のURLをコピーします。
[API]:新規APIの作成
[セキュリティ]:要件に合わせて(今回は単純な動作確認をしたいだけなので、「オープン」にしています)
[API名]:任意
[デプロイされるステージ]:prod

Webhook URLの登録

LINE Developersの「チャネル基本設定」画面にて、「Webhook送信」項目を「利用する」に変更し、「Webhook URL」項目にコピーしたURLを登録します。
また、デフォルトでは「自動応答メッセージ」と「友だち追加時あいさつ」が「利用する」になっていますが、今回はそこも自分でカスタマイズしたいので、「利用しない」に変更します。

動作確認

以上で、LINE Botの導入が完了しました。
LINEからメッセージを送ってみると、こちらから送信したメッセージがオウム返しされてくるのが確認できます。

おわりに

さて、LINE Botの導入編いかがでしたでしょうか。
AWS Lambdaと組み合わせることによって、サーバレスでより簡単に導入することができたと思います。
次回DynamoDB連携編では、ユーザからのメッセージに応じてDynamoDBに実際に「bravo!」の情報を登録する処理を実装していきます。
乞うご期待!
お問い合わせ先

執筆者プロフィール

Yamauchi Kentaro
Yamauchi Kentarotdi デジタルイノベーション技術部
社内の開発プロジェクトの技術支援や、Javaにおける社内標準フレームワークの開発を担当しています。Spring BootとTDDに手を出しつつ、LINE Botとかもいじったりしています。最近はマイクロサービスを勉強しつつ、クラウドアプリケーションを開発できるエンジニアの育成にも力を入れてます!
Pocket

関連記事