ガジェット通信 GetNews

見たことのないものを見に行こう

IBM BluemixとNode.jsでお天気通知! – Facebook Messenger Bot(2) / Botのベースを作成

DATE:
  • ガジェット通信 GetNewsを≫

今回作るもの

こんにちは、エンジニアのちゃんとくです。テクニカルライターとしてdotstudioに参加しています。

連載第2回の今回は、2016年に公開された話題のMessenger Platformを使ってFacebook Messenger Botを作りIBM Bluemixにホスティングしてみます。

下記のようにお天気を教えてくれるものを想定しています。

dotstudio-01

BotプログラムはNode.jsで作成し、IBM Bluemixで提供されているWeather Company Dataから天気情報を取得してIBM Bluemixにホスティングし運用します。

下記の構成で手順を紹介します。
IBM Bluemixの設定
Botのベースを作成
天気情報を取得
Facebook Messenger Botをデプロイ

今回はBotプログラムのベース部分作成を説明していきます。

IBM Bluemixの設定とデプロイ方法については前回の記事をご覧ください。

筆者の環境

OS X El Capitan(v10.11.6)
Node.js v8.2.1

Facebook Messenger Botとは

「Bot」とはプログラムの制御による自動発言システムのことです。連載第1回ではLINEアプリ上で動く「LINE Bot」を作成しました。

Messenger PlatformというMessengerアプリ開発のプラットフォームを使い作成していきます。

dotstudio-03

Receive/Send APIを使ってやり取りする形式で、LINE Bot開発の経験がある方はスムーズに導入できると思います。詳細はAPIリファレンスを参照してください。

Facebookアプリを作成する

まずは開発を始めるためにFacebookの開発者登録をしましょう。

Facebook for Developers

スタートからアカウントとアプリの作成を進めます。

アプリ名は後から変更できるのでわかりやすい名前をつけましょう。

作成できると、ダッシュボードに移動します。左の「製品を追加」タブから「Messenger」を選択しましょう。

Messengerプラットフォームに移動し、各種設定が行えるようになります。

Facebookページを作成する

Facebook Messenger BotはFacebookページと連携します。既存の管理ページか、新規に作成したページを利用しましょう。

今回は私が運営しているNode女学園のページを連携させてみます(現在Botは稼働していません)。

ページが非公開状態の場合連携させることができないので注意してください。

Node.jsでWebhookを作成する

Messengerの開発にはエンドポイントURLの設定が必要です。Node.jsで作成していきましょう。

コマンドラインからプロジェクトディレクトリを作成して、その下にpackage.jsonを作成します。は任意のアプリ名に置き換えてください。

$ mkdir
$ cd /
$ npm init –yes

実行すると下記のメッセージとともにpackage.jsonが作成されます。

{
“name”: “”,
“version”: “1.0.0”,
“description”: “”,
“main”: “index.js”,
“scripts”: {
“test”: “echo “Error: no test specified” && exit 1″
},
“keywords”: [],
“author”: “”,
“license”: “ISC”
}

今回使うモジュールをnpmコマンドでインストールしてpackage.jsonに書き込みます。

$ npm install express request body-parser –save

次にプログラムのメインとなるapp.jsを作成します。

$ touch app.js

エディタでapp.jsを開き以下をコピー&ペーストします。

$ touch app.js

エディタでapp.jsを開き以下をコピー&ペーストします。

app.js
‘use strict’

const express = require(‘express’);
const bodyParser = require(‘body-parser’);
const request = require(‘request’);
const app = express();
const token = ”;

app.set(‘port’, (process.env.PORT || 3000));

app.use(bodyParser.urlencoded({extended: false}));
app.use(bodyParser.json());

app.get(‘/’, function (req, res) {
res.send(‘Hello, Facebook Messenger Bot.’)
});

app.get(‘/webhook’, function (req, res) {
if (req.query[‘hub.verify_token’] === token) {
res.send(req.query[‘hub.challenge’])
}
res.send(‘Error, wrong token’)
console.log(req.query[‘hub.challenge’]);
});

app.listen(app.get(‘port’), function() {
console.log(‘running on port’, app.get(‘port’))
});

の部分にはご自身でtokenを設定してください。のちほどFacebook側の設定で使用します。

ngrokで試す

ホスティングする前に、ローカル環境からwebhookを試してみます。PCのlocalhostにグローバルからアクセスできるトンネリングツールを利用しましょう。

今回はngrokを利用します。

ngrockのサイトにいき、ダウンロードして解凍します。

ダウンロードフォルダで正しく動作するか確認しましょう。

dotstudio-12

次にngrokのユーザ登録をします。先ほどのページから登録し、登録後に表示されるコマンドを自身のコマンドラインで実行します。

$ ./ngrok authtoken xxxxxxxxxxxxxxxxxxx

ユーザとPCが紐づけられ、以後トンネリングが利用できるようになります。

./ngrok http でトンネリングサーバが起動します。今回ポートは3000を指定しましょう。

$ ./ngrok http 3000

起動すると利用できるアドレスが表示されます。

SSL対応のエンドポイントが必要なので、https://の方のアドレスを利用しましょう。

ngrokは起動のたびにアドレスが変わるので、下記のようにngrokを起動したまま別のタブでNode.jsアプリケーションを実行します。

先ほど取得したローカルトンネルサーバのアドレスをFacebookアプリのwebhookに登録します。「Webhookの設定」を選択しましょう。

コールバックURLにローカルトンネルサーバのアドレス/webhookを記載します。トークンにはプログラム内で記載した任意のトークンを記述します。サブスクリプションは全て選択しておきましょう。

「確認して保存」を押すと、アドレスにアクセスし正常にレスポンスを返すと登録されます。ngrokの実行画面でアクセスが来ていることがわかります。

Facebookページを連携する

Facebookページを設定しアプリケーションのアクセストークンを発行します。

発行されたトークンをコピーし、curlコマンドを叩いてBotを起動させます。

curl -ik -X POST “https://graph.facebook.com/v2.6/me/subscribed_apps?access_token=”

正しく設定できるとFacebookページの更新を受け取ることができるようになります。

オウム返しBotを作成する

Botプログラムのベースとして、オウム返しBotを作成してみましょう。

`app.js`を以下のように変更します。

app.tjs
‘use strict’

const express = require(‘express’);
const bodyParser = require(‘body-parser’);
const request = require(‘request’);
const app = express();
const token = ”;
const sendTextMessage = (sender, text) => {
const messageData = {
text:text
}
request({
url: ‘https://graph.facebook.com/v2.6/me/messages’,
qs: {access_token:token},
method: ‘POST’,
json: {
recipient: {id:sender},
message: messageData,
}
}, (error, response, body) => {
if (error) {
console.log(‘Error: ‘, error);
} else if (response.body.error) {
console.log(‘Error: ‘, response.body.error);
}
});
}

app.set(‘port’, (process.env.PORT || 3000));

app.use(bodyParser.urlencoded({extended: false}));
app.use(bodyParser.json());

app.get(‘/’, function (req, res) {
res.send(‘Hello, Facebook Messenger Bot.’);
});

app.get(‘/webhook’, function (req, res) {
if (req.query[‘hub.verify_token’] === token) {
res.send(req.query[‘hub.challenge’]);
}
res.send(‘Error, wrong validation token’);
});

app.post(‘/webhook’, function (req, res) {
let messaging_events = req.body.entry[0].messaging
for (let i = 0; i < messaging_events.length; i++) {
let event = req.body.entry[0].messaging[i]
let sender = event.sender.id
if (event.message && event.message.text) {
let text = event.message.text
sendTextMessage(sender, text.substring(0, 200));
}
}
res.sendStatus(200);
});

app.listen(app.get('port'), function() {
console.log('running on port', app.get('port'));
});

冒頭のには、先ほど取得したアクセストークンを記載します。

試してみる

変更したら再度npm startでNode.jsアプリケーションを実行し、Facebook Messenger上で試してみます。

オウム返しができました!

まとめ

今回はBotのベースになるプログラムを作ってみました。

開発段階でエンドポイントURLが必要になることがネックでしたが、localhostにグローバルアクセスできるトンネリングツールを使うことで簡単に検証することができました。またSSL対応もしてくれているのでとても便利ですね。

次回はIBM BluemixのWeather Company Dataを使って天気情報の取得をしていきたいと思います。

それではまた!

●著者プロフィール

dotstudio ちゃんとく
大学までは文系で法学を学んでいたが「モノを作れる人」に憧れて知識ゼロからエンジニアに転身。本業ではPHPでWebサーバサイド開発を担う傍ら、テクニカルライターとしてdotstudioに参加している。Node.jsユーザグループ内の女性コミュニティ「Node Girls」を主催。趣味の電子工作では日本最大のIoTコミュニティ「IoTLT」で体当たり電子工作を発表中。
Twitter: @tokutoku393 / dotstudio, inc.

カテゴリー : デジタル・IT タグ :
CodeIQ MAGAZINEの記事一覧をみる ▶
  • 誤字を発見した方はこちらからご連絡ください。
  • ガジェット通信編集部への情報提供はこちらから
  • 記事内の筆者見解は明示のない限りガジェット通信を代表するものではありません。