先日、社内で開催したテクニカル・カンファレンスのライトニングトークにて使用した、LINE BotとGrafanaを使ったリアルタイムフィードバックシステム「bravo!」の作り方についてご紹介します。
テクニカル・カンファレンスについては、以下の過去記事をご覧ください。
以前他のチームメンバーが出した記事では、Grafanaサイドの設定の仕方などをご説明しました。
今回はLINE Bot設定編と題しまして、「bravo!」のクライアントサイドであるLINE Botの導入とその設定の仕方（LINE Botへメッセージを送ると、何かしら返事が返ってくるまで）をご説明します。
次回以降で実際にDynamoDBにデータを登録する処理を実装する予定なので、そちらの記事も併せてご参考いただければと思います。
次回以降で実際に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@MANAGERへのログインを求められます。「LINE@MANAGERへログイン」ボタンをクリックします。LINE@MANAGERでは、UIベースでLINE Botの基本的な設定を行うことができますが、今回はLambdaを使ってより拡張性の高いLINE Botを作りたいので、botを利用するための設定以外ではほとんどこの画面はいじりません。ちなみに、ログインに成功すると下記のようなページに飛びます。
Messaging APIの利用設定
LINE Botをユーザからのメッセージで動作させるために、Messaging APIという機能を使用します。
左側のメニューから「アカウント設定」→「Messaging API設定」の順で選択し、「プロバイダー」を選択して「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で実装していきたいと思います。
AWSコンソールの「Lambda」サービスから「関数の作成」ボタンをクリックします。
「関数の作成」画面で、関数名とランタイム、ロールを選択し、「関数の作成」ボタンをクリックします。
今回はNode.jsで実装していきたいと思います。
Lambdaの実装
以上でLambda関数が作成・設定できたので、早速実装を進めます。
index.jsファイル内のexports.handler関数が最初に呼ばれる関数です。
説明のため、ユーザからのメッセージをそのままオウム返しするコードを書いてみます。
index.jsファイル内のexports.handler関数が最初に呼ばれる関数です。
説明のため、ユーザからのメッセージをそのままオウム返しするコードを書いてみます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
var request = require("request"); // requestモジュール /** * テキストメッセージを返す */ var sendReplyMessage = function(sendData) { // ヘッダー定義 // AuthorizationにはbotそれぞれのChannel Access Tokenを設定(LINE developersで確認できる) var headers = { "Content-Type": "application/json", "Authorization": "Bearer {<ここにコピーしておいたChannel Access Tokenを書く>}", }; // オプション定義 // 返事をするだけならbodyにSendDataを設定するだけで、他はいじらなくてOK var options = { url: "https://api.line.me/v2/bot/message/reply", // LINEbotの返事をしてくれるAPI headers: headers, // 上で設定したヘッダー json: true, body: sendData }; // ユーザへメッセージの送信 request.post(options, function(error, response, body) { // 送信成功の場合 if (!error && response.statusCode == 200) { console.log("Send reply succeeded.", body); // コンソールに何を送ったか確認出力 // 送信失敗の場合 } else { console.log("response : ", JSON.stringify(response)); // コンソールにエラーメッセージを確認出力 } }); }; /** * LINEbotに何か送られてきたときのハンドラー */ exports.handler = function(req, context) { var body = JSON.parse(req.body); // リクエストのbodyをJSONにする var replyToken = body["events"][0]["replyToken"]; // 返信する時に必要なトークン var userId = body["events"][0]["source"]["userId"]; // ユーザIDを取得 var sendData = null; // 送信データ // Message Event(テキスト)が送られてきたとき if(body["events"][0]["type"] == "message"){ // 送られてきたテキストメッセージを取得 var receivedText = body["events"][0]["message"]["text"]; // 送信データ作成 sendData = { "replyToken": replyToken, // 返信する時に必要なトークン "messages": [{ // 送るメッセージ "type": "text", // 形式(今は「テキスト」) "text": receivedText // 文字 }] }; // 返信メッセージを送信 sendReplyMessage(sendData); } } |
ここで、以下の3つの点に注意していただきたいと思います。
1.replyToken
このトークンを取得しておかないと、何か送ってきたユーザへの返信ができません。
個別にユーザのIDを取得することもできるのですが、返事するだけならreplyTokenを使ったほうが簡単ですし、LINE Botからの能動的なメッセージ送信は有料プランへの登録が必須になります。
個別にユーザの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
そのためにまず、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からメッセージを送ってみると、こちらから送信したメッセージがオウム返しされてくるのが確認できます。
おわりに
さて、LINE Botの導入編いかがでしたでしょうか。
AWS Lambdaと組み合わせることによって、サーバレスでより簡単に導入することができたと思います。
次回DynamoDB連携編では、ユーザからのメッセージに応じてDynamoDBに実際に「bravo!」の情報を登録する処理を実装していきます。
乞うご期待！
AWS Lambdaと組み合わせることによって、サーバレスでより簡単に導入することができたと思います。
次回DynamoDB連携編では、ユーザからのメッセージに応じてDynamoDBに実際に「bravo!」の情報を登録する処理を実装していきます。
乞うご期待！
執筆者プロフィール
- tdi デジタルイノベーション技術部
- 社内の開発プロジェクトの技術支援や、Javaにおける社内標準フレームワークの開発を担当しています。Spring BootとTDDに手を出しつつ、LINE Botとかもいじったりしています。最近はマイクロサービスを勉強しつつ、クラウドアプリケーションを開発できるエンジニアの育成にも力を入れてます！
