アイデアをすぐ形に！ K5 Playgroundで開発するクラウドネイティブな最新Webアプリ（AD）

60分でLINEチャットボットアプリを作ろう～K5 Playgroundのテンプレートで本格アプリ開発

アイデアをすぐ形に！ K5 Playgroundで開発するクラウドネイティブな最新Webアプリ第4回

西岡結人（富士通株式会社）[著]

2018/02/23 14:00

BFFのカスタマイズ（2）

WebAPI「POST /webhook」のカスタマイズ

　作成した「POST /webhook」に、LINEからの受信内容に応じて行う処理を実装します。

①「LINE Messaging API Receive Message」APIロジックの追加

　最初に、「LINE Messaging API Receive Message」を追加します。このAPIロジックは、LINEから送られた通知であることを検証する処理です。

　左メニューの「Contents」で「Added WebAPIs」の「POST /webhook」をクリックします。右メニューの「APIロジック」から「Messaging」－「LINE Messaging API Receive Message」を、「Start」と「End」の間にドラッグ＆ドロップします。

「LINE Messaging API Receive Message」APIロジックを追加

②1つ目の「MongoDB Save Document」APIロジックの追加

　続いて、「MongoDB Save Document」を追加します。デフォルトでは、このAPIロジックは、MongoDBに保存する処理が記述されています。

　ここでは、LINEからフォロー通知を受け取った際に、フォローしたユーザー情報をMongoDBに保存する処理を実装します。

　「Database」－「MongoDB Save Document」を、「LINE Messaging API Receive Message」と「End」の間にドラッグ＆ドロップして追加します。

　右上の「EDIT」をクリックし、コードを次のように修正してください。

　このコードは、LINEからフォロー通知を受け取った際に、フォローを行ったユーザーの情報を取得し、そのユーザー情報をMongoDBのsample_streamに保存する処理です。ここでは、MongoDBの接続環境、およびコレクション（sample_stream）の作成は、既に用意されているものとします。

function getProfile(userId) {
  var accessToken = config.line.accessToken;
  var options = {
    url: 'https://api.line.me/v2/bot/profile/' + userId,
    json: true,
    method: 'get',
    headers: {
      'Authorization': 'Bearer ' + accessToken,
    },
  };
  return new Promise(function(resolve, reject) {
    Request(options, function(error, response, body) {
      if (!error && response.statusCode == 200) {
        resolve(body);
      }
    });
  });
}

function addStream(event, profile) {
  var collectionName = 'sample_stream';
  var document = {
    _id: event.source.userId,
    name: profile.displayName,
  };
  var url = 'mongodb://' + config.datasource.user + ':' + config.datasource.password + '@' + config.datasource.host + ':' + config.datasource.port + '/' + config.datasource.database;

  MongoClient.connect(url, function(err, db) {
    if (err) {
      // @todo handle error
      throw err;
    }
    db.collection(collectionName).save(document, function(err, result) {
      db.close();
      if (err) {
        // @todo handle error
        throw err;
      }
      return;
    });
  });
}

var lineEvents = JSON.parse(req.body);

lineEvents.events.forEach(function(event) {
  if(event.type === 'follow') {
    getProfile(event.source.userId).then(function(profile) {
      addStream(event, profile);
    });
  }
});
next({});

　「OK」をクリックして修正を確定します。

③2つ目の「MongoDB Save Document」APIロジックの追加

　ここでは、LINEからメッセージ通知を受け取った際に、受け取ったメッセージをMongoDBに保存する処理を実装します。

　2つ目の「MongoDB Save Document」を、1つ目の「MongoDB Save Document」と「End」の間にドラッグ＆ドロップして追加します。

　右上の「EDIT」をクリックし、コードを次のように修正してください。

　このコードは、LINEからメッセージ通知を受け取った際に、受け取ったメッセージをMongoDBのsample_messageに保存する処理です。ここでも、MongoDBの接続環境、およびコレクション（sample_message）の作成は、既に用意されているものとします。

function getProfile(userId) {
  var accessToken = config.line.accessToken;
  var options = {
    url: 'https://api.line.me/v2/bot/profile/' + userId,
    json: true,
    method: 'get',
    headers: {
      'Authorization': 'Bearer ' + accessToken,
    },
  };
  return new Promise(function(resolve, reject) {
    Request(options, function(error, response, body) {
      if (!error && response.statusCode == 200) {
        resolve(body);
      }
    });
  });
}

function saveMessage(event, profile) {
  // @see http://mongodb.github.io/node-mongodb-native/2.1/tutorials/crud/
  var collectionName = 'sample_message';  // @todo set collection name
  var document = {
    stream_id: event.source.userId,
    user_id: profile.displayName,
    message: event.message.text,
    replyMessage_id: '',
  };                       // @todo set document data for insert
  var url = 'mongodb://' + config.datasource.user + ':' + config.datasource.password + '@' + config.datasource.host + ':' + config.datasource.port + '/' + config.datasource.database;
  return new Promise(function(resolve, reject) {
    MongoClient.connect(url, function(err, db) {
      if (err) {
        // @todo handle error
        reject(err);
      }
      db.collection(collectionName).save(document, function(err, result) {
        db.close();
        if (err) {
          // @todo handle error
          reject(err);
        }
        resolve(result);
      });
    });
  });
}

var lineEvents = JSON.parse(req.body);
var promises = [];
lineEvents.events.forEach(function(event) {
  if(event.type === 'message' &&  event.message.type === 'text') {
    promises.push(getProfile(event.source.userId).then(function(profile) {
      return saveMessage(event, profile);
    }));
  }
});

Promise.all(promises).then(function() {
  next({});
});

　「OK」をクリックして修正を確定します。

④「LINE Messaging API Send Message」APIロジックの追加

　「LINE Messaging API Send Message」を追加します。このAPIロジックは、LINEにメッセージを送信するAPIロジックです。

　ここでは、「LINE Messaging API Send Message」APIロジックを修正し、ボット機能を実装します。

　「Messaging」－「LINE Messaging API Send Message」を、2つ目の「MongoDB Save Document」と「End」の間にドラッグ＆ドロップします。

「LINE Messaging API Send Message」APIロジックを追加

　右上の「EDIT」をクリックし、コードを次のように修正してください。

　このコードは、LINEから特定の質問を受け取ったとき、あらかじめ用意した答えを返すという単純なボット処理です。

　ここでは、「こんにちは」「寝るよ」のメッセージを受け取った際に、あらかじめ用意した答えを返す処理になっています。「question:」や「answer:」の内容を変えてみたり、他のQAを追加したりすることで、返答が変わります。自由に変更してみてください。

var accessToken = config.line.accessToken;
var faqs = [
  {
    question: 'こんにちは',
    answer: 'こんにちは。今日はいい天気ですね。',
  },{
    question: '寝るよ',
    answer: 'おやすみなさい！',
  }
];

function sendMessage(userId, text) {
  // @todo Send message object
  var message = [
    {
      "type": "text",
      "text": text,
    },
  ];
  var options = {
    url: 'https://api.line.me/v2/bot/message/push',
    method: 'post',
    headers: {
      'Authorization': 'Bearer ' + accessToken,
    },
    json: {
      "to": userId,
      "messages": message,
    }
  };
  return new Promise(function(resolve, reject) {
    Request(options, function(error, response, body) {
      if (!error && response.statusCode == 200) {
        resolve(body);
      } else {
        res.end(JSON.stringify(error));
        reject(error);
      }
    });
  });
}

var lineEvents = JSON.parse(req.body);
var answers = [];
var promises = [];
lineEvents.events.forEach(function(event) {
  if(event.type === 'message' &&  event.message.type === 'text') {
    faqs.forEach(function(faq) {
      if(event.message.text.includes(faq.question)) {
        promises.push(sendMessage(event.source.userId, faq.answer));
        answers.push({
          stream_id: event.source.userId,
          user_id: 'bot',
          message: faq.answer,
          replyMessage_id: '',
        });
      }
    });
  }
});
Promise.all(promises).then(function() {
  next(answers);
});

「LINE Messaging API Send Message」APIロジックを編集

「OK」をクリックして修正を確定します。

⑤3つ目の「MongoDB Save Document」APIロジックの追加

　さらに「MongoDB Save Document」を追加します。ここでは、ボット機能で返答したメッセージをMongoDBに保存する処理を実装します。「Database」－「MongoDB Save Document」を、「LINE Messaging API Send Message」と「End」の間にドラッグ＆ドロップして追加します。　

　右上の「EDIT」をクリックし、コードを次のように修正してください。このコードは、ボット機能で返答したメッセージをMongoDBのsample_messageに保存する処理です。 MongoDBの接続環境、およびコレクション（sample_message）の作成は、既に用意されているものとします。

if (!results.length) {
  next({});
  return;
}
// @see http://mongodb.github.io/node-mongodb-native/2.1/tutorials/crud/
var collectionName = 'sample_message';  // @todo set collection name
var document = results; // @todo set document data for insert
var url = 'mongodb://' + config.datasource.user + ':' + config.datasource.password + '@' + config.datasource.host + ':' + config.datasource.port + '/' + config.datasource.database;
MongoClient.connect(url, function(err, db) {
  if (err) {
    // @todo handle error
    throw err;
  }
  db.collection(collectionName).insertMany(document, function(err, result) {
    db.close();
    if (err) {
      // @todo handle error
      throw err;
    }
    next({});
  });
});

　「OK」をクリックして修正を確定します。

WebAPI「POST /sample_messages」のカスタマイズ

　POST /sample_messagesは、デフォルトでは、Chatテンプレートで用意されている操作画面から送信したメッセージをMongoDBに保存する処理のみ実装されています。

　ここでは、APIロジックを追加し、操作画面から送信したメッセージが、LINEへ送信される処理を追加実装しましょう。

①「LINE Messaging API Send Message」APIロジックの追加

　「LINE Messaging API Send Message」を追加します。

　ここでは、操作画面から送信されたメッセージがLINEへ送信されるように実装します。

　「Messaging」－「LINE Messaging API Send Message」を、「MongoDB - Stream Channel」と「End」の間にドラッグ＆ドロップします。

　「LINE Messaging API Send Message」には、LINE操作画面に入力されたメッセージをLINEに送信する処理を記述します。右上の「EDIT」をクリックしてください。次のコードを以下に示すように修正します。

（省略）
var accessToken = config.line.accessToken;
var messageReceiverId = '';

// @todo Send message object
var message = [
  {
    "type":"text",
    "text":"hello world"
  },
];
（省略）

　↓

（省略）
var accessToken = config.line.accessToken;
var messageReceiverId = req.body.stream_id;

// @todo Send message object
var message = [
  {
    "type":"text",
    "text": req.body.message
  },
];
（省略）

　「OK」をクリックして修正を確定します。これでBFFのカスタマイズは完了です。

次のページ
作成したアプリのダウンロード

この記事は参考になりましたか？

印刷用を表示

アイデアをすぐ形に！ K5 Playgroundで開発するクラウドネイティブな最新Webアプリ連載記事一覧: 本当に「優れたUX」を目指そう～AI技術やA/Bテストでフロントエンドを改善し続ける方法

Webアプリは会話するスピードで開発しよう～ReactやBFFで高速にプロトタイピングする...

60分でLINEチャットボットアプリを作ろう～K5 Playgroundのテンプレートで本...

もっと読む

この記事の著者: 西岡結人（富士通株式会社）（ニシオカユイト）

　大阪府出身。基幹系業務アプリの開発を経験後、2016年に富士通株式会社に出向。現在は同社クラウドサービスK5の拡販用資材等の開発に従事。週末は外でフットサルや家でゴロゴロ読書や映画鑑賞。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この著者の最近の執筆記事