Azure Web AppsとNode.jsで作る電車運行状況通知──LINE Bot(3) / LINEとプログラムの連携

AWSやAzureを始めたとしたクラウドサービス全般を触っていく連載「クラウドサービス研究スタジオ」。この連載では、IaaS,PaaS,BaaS,SaaSなど幅広い形態のサービスを実際に使ってレポートしていきます！

今回作るもの
LINE Botとは
ビジネスアカウントを作成する
アカウントにBotの設定を追加する
Botを友達に追加する
Pushを送るプログラムを書いてみる
ローカル環境で試す
まとめ

あなたの知らない自分を発見できる。「グッドポイント診断」（無料）

今回作るもの

こんにちは、dotstudio株式会社ののびすけです。

今回はAzure Web Appsを使って電車運行状況を知らせてくれるLINE Botを作ってみます。

先に完成イメージのLINE Botを紹介します。

このような感じで登録した電車の遅延情報があればLINE Botが教えてくれます。

BotプログラムはNode.jsで作成し、Azure Web Appsにホスティングして運用します。

Azure Web Appsの設定
アプリケーション作成
LINEとプログラムの連携を試す
LINE Botをデプロイする

の四部構成で紹介します。

第三回の今回は前回作ったプログラムとLINEを連携して実際にLINEアプリ上で動くところを試してみます。

LINE Botとは

まず「Bot」とはプログラムの制御による自動発言システムのことです。

LINE上で動くBotを「LINE Bot」と呼んでいます。

LINE Botを作るためのAPIとしてLINE社が「LINE Messaging API」を提供しています。

Messaging APIサービスぺージ

Messaging APIには「Push API」と「Reply API」という2つのメイン機能があります。

PushはBot側が能動的にユーザに発言します。ReplyはユーザがBotに話しかけることをトリガーにBotが返答します。

今回は「Twitter上で遅延情報を取得したら能動的にユーザに話しかける」機能を実現するので、Push APIを使って作成していきましょう。

ビジネスアカウントを作成する

LINEのBotはTwitterなどと違い、通常のユーザーアカウントをBot化することはできず、ビジネスアカウントと呼ばれるアカウントを作る必要があります。

LINE Business CenterのMessagin APIのページにアクセスします。

右側の「Developer Trialを始める」を選択します。「Messaging APIを始める」を選択した場合、Push APIの機能を試せず後からの変更もできないのでよく注意してください。

作成済みのアカウントがある方は「アカウントリスト」から選択します。

「会社/事業者」を選択するポップアップが出ます。

「会社/事業者を追加する」から登録します。

作成済みの方は選択して進めてください。

入力画面で必要な情報を入力します。

法人/個人の選択はどちらでも問題ありません。

登録した会社名or事業者名を選択します。

アカウント名を入力、業種を選び、「確認する」を選択します。

画像はこの時点ではなくても大丈夫です。アカウント名も後から変更可能です。

確認画面に遷移するので「申し込む」を選択します。

申し込みという表現になってますが、次の画面で開設ができます。

これでビジネスアカウントの開設ができました。

アカウントにBotの設定を追加する

次にアカウントの設定を行うため、申し込み完了画面下部の「LINE@MANAGERへ」を選択しましょう。

はじめにLINEアカウントへのログインを求められます。

普段使っているLINEアカウントでログインします。

ログイン設定がまだの方は、LINEのスマートフォンアプリの設定 -> アカウントからメールアドレスを登録してください。

LINE@MANAGERのトップページは以下のような画面になります。

サイドバーのアカウント設定 > Bot設定と進み、「APIを利用する」を選択しましょう。

注意メッセージが表示されますが、特に気にせず「確認」を選択します。

「OK」を押しましょう。

これでビジネスアカウントをBotとして利用することができます。

Bot設定の画面に遷移します。

利用可能なAPIの項目にREPLY_MESSAGEとPUSH_MESSAGEの二つが表示されていることを確認して下さい。

一番最初の画面の選択で「Developer Trialを始める」を選択していれば大丈夫ですが、「Messaging APIを始める」を選択していた場合はREPLY_MESSAGEしか利用できません。

また設定ですが、スクリーショットと同様にWebhook送信を「利用する」にしましょう。

その他は以下の設定にしておくことをオススメします。

Webhook送信：利用する
Botのグループトーク参加：利用する
自動応答メッセージ：利用しない
友達追加時あいさつ：利用する

設定が終わったら「保存」を選択しましょう。

Botを友達に追加する

Bot設定画面のステータスの項目にある「LINE Developersで設定する」を選択します。

新規タブで「LINE Developers」の画面が開きます。

ここで表示されるChannel Secret・Channel Access Token・Your userIdは後で利用するので留意しておいて下さい。

また、ここで表示されるQRコードを使って、自分が作成したBotアカウントと友達になりましょう。

ここからはスマートフォン画面のキャプチャになります。QRコードリーダーを開きBotを友達追加しましょう。

「追加」を選択します。

「同意する」を選択します。

Botが友達に追加されました。

Pushを送るプログラムを書いてみる

前回作成したTwitter連携のプログラムをもとに、Node.jsでpush通知を送るプログラムを書いてみます。

server.jsを以下のように編集しましょう。

server.js
'use strict';

const http = require('http');
const https = require('https');
const crypto = require('crypto');
const Twitter = require('twitter');
const tw = new Twitter({
// Twitterの4つのキーを指定
  consumer_key: '', // Consumer Keyを記述
  consumer_secret: '', // Consumer Secretを記述
  access_token_key: '', // Access Tokenを記述
  access_token_secret: '' // Access Token Secretを記述
});
const TARGET_HASHTAG = '#TrainDelay';

const HOST = 'api.line.me';
const CH_SECRET = ''; // Channel Secretを記述
const CH_ACCESS_TOKEN = ''; // Channel Access Tokenを記述
const USER_ID = ''; // Your userIdを記述
const PUSH_PATH = '/v2/bot/message/multicast';
const SIGNATURE = crypto.createHmac('sha256', CH_SECRET);
const PORT = 3000;

const pushClient = (userId, SendMessageObject) => {
    let postDataStr = JSON.stringify({ to: userId, messages: SendMessageObject });
    let options = {
        host: HOST,
        port: 443,
        path: PUSH_PATH,
        method: 'POST',
        headers: {
            'Content-Type': 'application/json; charset=UTF-8',
            'X-Line-Signature': SIGNATURE,
            'Authorization': `Bearer ${CH_ACCESS_TOKEN}`,
            'Content-Length': Buffer.byteLength(postDataStr)
        }
    };

    return new Promise((resolve, reject) => {
        let req = https.request(options, (res) => {
                    let body = '';
                    res.setEncoding('utf8');
                    res.on('data', (chunk) => {
                        body += chunk;
                    });
                    res.on('end', () => {
                        resolve(body);
                    });
        });

        req.on('error', (e) => {
            reject(e);
        });
        req.write(postDataStr);
        req.end();
    });
};

tw.stream('statuses/filter', {'track': TARGET_HASHTAG}, (stream) => {
  stream.on('data', (data) => {
    if (data.text.indexOf('上野東京ライン') !== -1) {
        let PushSendMessageObject = [{
          type: 'text',
          text: data.text
        }];

        pushClient([USER_ID], PushSendMessageObject)
          .then((body) => {
            console.log(body);
          }, (e) => {console.log(e)});

        console.log(data.text);
    }
  });
});

Twitterの呼び出し部分（const tw=のブロック）には前回Twitter側で取得した4つのキーを指定します。CH_SECRET、CH_ACCESS_TOKEN、USER_IDには先ほどLINE Developersの画面で取得した値を入れます。

ローカル環境で試す

LINE Botを試すためにはWebhookURLをLINE developersに登録する必要があります。

PaaSなどにホスティングする前に、手元のPCのlocalhostにグローバルからアクセスできるようにするトンネリングツールを利用しましょう。

ngrok
localtunnel

などが有名です。今回はngrokを利用します。

まずはngrokのサイトにいき、本体をダウンロードして解凍します。

Macの場合、デフォルトでダウンロードフォルダ(~/Downloads)に保存されます。

$ cd ~/Downloads
$ pwd
/Users/n0bisuke/Downloads
$ ./ngrok help

エラーが出なければOKです。

次に、ngrokにユーザー登録をします。サイトからユーザー登録をしましょう。

ユーザー登録後のページで表示されるコマンドを実行します。

$ ./ngrok authtoken xxxxxxxxxxxxxxxxxxx

Authtoken saved to configuration file: /Users/n0bisuke/.ngrok2/ngrok.yml

これでユーザーアカウントとPCが紐付けられます。この作業は最初の1回だけです。

次にトンネリングサーバーを起動します。./ngrok http ポート名と指定します。

今回はNode.jsアプリケーションを3000番ポートで利用するので3000を指定しましょう。

$ ./ngrok http 3000

ngrok by @inconshreveable                                    (Ctrl+C to quit)

Session Status                online
Account                       n0bisuke (Plan: Free)
Version                       2.1.18
Region                        United States (us)
Web Interface                 http://127.0.0.1:4040
Forwarding                    http://1148cbd9.ngrok.io -> localhost:3000
Forwarding                    https://1148cbd9.ngrok.io -> localhost:3000

Connections                   ttl     opn     rt1     rt5     p50     p90
                              0       0       0.00    0.00    0.00    0.00

起動すると表示されるhttps://で始まるアドレスを利用します。

この場合はhttps://1148cbd9.ngrok.ioです。このアドレスは起動の度に変わるため、ngrokは起動し続けて開発を行うことをおススメします。

以下のように、ngrokのプロセスとNode.jsアプリケーションのプロセスを並行して実行します。

LINE developersの画面下部の「EDIT」を選択します。

「Webhook URL」の部分に先ほどのngrockのアドレスを指定しましょう。

どうでしょうか? #TrainDelayのハッシュタグに自分の指定した路線の情報が投稿されると反応があると思います。

実際に検証する際には流れの速いハッシュタグで試すのがオススメです。

まとめ

いかがだったでしょうか。

LINE Botを試すにはグローバルからアクセスできるSSL（https）のwebhook URLが必要ですが、localhostにアクセスできるトンネリングツールを使うと簡単に試せたのではないかと思います。

次回は継続的に稼働できるようAzure Web Appsにデプロイさせてみたいと思います。

それではまた。

のびすけ

dotstudio株式会社代表取締役CEO。1989年生まれ。岩手県立大学在籍時にITベンチャー企業の役員を務める。同大学院を卒業後、株式会社LIGにWebエンジニアとして入社し、Web制作に携わる。 2016年7月よりdotstudio株式会社を立ち上げ、IoT領域を中心に活動している。日本最大規模のIoTコミュニティであるIoTLTや、JavaScript RoboticsコミュニティNodeBotsの主催、IoTバックエンドサービスであるMilkcocoaのエバンジェリストとしても活動中。
Twitter: @n0bisuke
dotstudio, inc.: https://dotstud.io/

※本記事は「CodeIQ MAGAZINE」掲載の記事を転載しております。