Fujitsu

K5 Playground

K5 Playground × CF Webハンズオン

ハンズオン教材
アプリケーション作成:LINE操作画面 × LINE Chatbot

  • 前へ
  • 6. アプリケーション作成:LINE操作画面 × LINE Chatbot
  • 次へ

6.1. アプリケーションの説明

LINEアプリから決まった質問を送信するとbotが決まった返答を行うアプリケーションです。
また、LINE操作画面から手動でメッセージを入力することで、LINEアプリにメッセージを送信することも可能です。
(注)本ハンズオンで作成するチャットボットは、簡易チャットボットとなっており、留意事項があります。

(完成イメージ)

6.2. ハンズオンの流れ

以下の流れで、ハンズオンを実施致します。

  • 事前準備
  • K5 Playgroundの操作
  • アプリケーションの修正
  • アプリケーションの配備
  • アプリケーションの確認

6.3. 事前準備

ハンズオン「K5 「CF」の操作方法」を進めるために必要な、事前準備を行います。
以下の準備を行ってから、ハンズオンを進めてください。(既に実施済みの作業についてはスキップしてください。)

ブラウザのインストール

事前準備1.ブラウザ:「Google Chrome」または「Firefox」を利用」を参照して、「Google Chrome」、又は「Firefox」をインストールしてください。

Node.jsのインストール

事前準備2.Node.jsのインストール」を参照して、Node.jsをインストールしてください。

CFコマンドのインストール

事前準備3.CFコマンドのインストール」を参照して、CFコマンドをインストールしてください。

LINE Messaging APIアクセストークンの取得

事前準備6.LINE Messaging APIアクセストークンの取得」を参照して、APIキーを取得してください。

作業用フォルダの作成

「Cドライブ」、又は「Dドライブ」直下に「K5CF\LINEChatbot」フォルダを作成してください。

6.4. K5 Playgroundの操作

6.4.1. テンプレートの選択

1. K5 Playgroundにアクセス

サポートされているブラウザから、以下のURLにアクセスしてください。
https://playground.cloud.global.fujitsu.com

2. テンプレートの選択

「GET STARTED」ボタンをクリックしてください。

テンプレートの「Chat」をクリックしてください。

6.4.2. デザインのカスタマイズ

1. 新規アプリケーションの作成

「CREATE NEW APP」ボタンをクリックしてください。

2. 配色の変更

左メニュー「Theme」の「Color Scheme」から、配色を変更してください。
本教材では、「Vivid12」を選択しています。

配色が変更されたことを確認してください。

3. タイトルフォントの変更

左メニュー「Theme」の「Title Font」から、タイトルのフォントを変更してください。
本教材では、「Mitr Bold」を選択します。

タイトルのフォントが変更されたことを確認してください。

4. ボディーフォントの変更

左メニュー「Theme」の「Body Font」から、ボディーのフォントを変更してください。
本教材では、「Mitr」を選択します。

ボディーのフォントが変更されたことを確認してください。

5. 画面のデザイン変更

① リスト欄のデザイン変更

赤枠で囲った「EDIT」をクリックしてください。

デザインを選択してください。
本教材では、赤枠で囲ったデザインを選択します。

「OK」をクリックしてください。

リスト欄のデザインが変更されたことを確認してください。

② チャット欄のデザイン変更

赤枠で囲った「EDIT」をクリックしてください。

デザインを選択してください。
本教材では、赤枠で囲ったデザインを選択します。

「OK」をクリックしてください。

チャット欄のデザインが変更されたことを確認してください。

6.4.3. WebAPIのカスタマイズ

1. アプリケーション名の変更

左メニュー「Basic Information」から「APP info」をクリックしてください。

「APP Name」に[LINEChatbot]と入力してください。

2. WebAPIの追加

ここでは、LINEからの通知を受信して、受信内容に応じて処理を行う「webhook」という名前のWebAPIを新規に作成します。
左メニュー「Basic Information」の「WebAPIs」をクリックしてください。

「Create a New WebAPI」に「webhook」と入力し、エンターを押してください。

「POST」をアクティブにしてください。

左メニュー「Added WebAPIs」に「POST /webhook」が追加されていることを確認してください。

6.4.4. WebAPIロジックのカスタマイズ

1. 「POST /webhook」ロジックのカスタマイズ

ここでは、新規に作成した「webhook」WebAPIの処理を実装します。

左メニュー「Added WebAPIs」から「POST /webhook」をクリックしてください。

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

ここでは、LINEからの通知を検証する処理を追加します。

右メニュー「API Logics」から「Messaging」をクリックしてください。

APIロジック「LINE Messaging API Receive Message」を「Start」と「End」の間にある「▼」にドラック&ドロップしてください。

APIロジック「LINE Messaging API Receive Message」が追加されたことを確認してください。

② APIロジック「FUJITSU Empty Logic」の追加

ここでは、LINEからのフォロー通知の情報を保存する処理を追加します。

右メニュー「API Logics」から「Custom」をクリックしてください。

APIロジック「FUJITSU Empty Logic」を「LINE Messaging API Receive Message」と「End」の間にある「▼」にドラック&ドロップしてください。

APIロジック「FUJITSU Empty Logic」が追加されたことを確認してください。

③ APIロジック「FUJITSU Empty Logic」の編集

「EDIT」をクリックしてください。

デフォルトで入力されているソースコードを削除し、以下のソースコードを入力してください。
本ロジックは、LINEアプリからフォロー通知がきたときに、フォロー通知の詳細を取得して、その詳細情報をアプリ内に格納する処理です。

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 recievedStream = {
    _id: event.source.userId,
    name: profile.displayName,
  };
  sample_streams.push(recievedStream);
}

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」をクリックしてください。

入力したソースコードが反映されているかを確認してください。

④ APIロジック「FUJITSU Empty Logic」の追加

ここでは、LINEからのチャット通知を保存をする処理を追加します。

「Custom」からAPIロジック「FUJITSU Empty Logic」を「FUJITSU Empty Logic」と「End」の間にある「▼」にドラック&ドロップしてください。

APIロジック「FUJITSU Empty Logic」が追加されたことを確認してください。

⑤ APIロジック「FUJITSU Empty Logic」の編集

「EDIT」をクリックしてください。

デフォルトで入力されているソースコードを削除し、以下のソースコードを入力してください。
本ロジックは、LINEからチャット通知がきたときに、チャットの詳細情報を取得し、その情報をアプリ内に格納する処理です。

var uuidv4 = require('uuid/v4');

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) {
  var recievedMessage = {
    stream_id: event.source.userId,
    user_id: profile.displayName,
    message: event.message.text,
    replyMessage_id: '',
    _id: uuidv4(),
  };
  sample_messages.push(recievedMessage);
}

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」をクリックしてください。

入力したソースコードが反映されているかを確認してください。

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

ここでは、LINEに返答するbot機能を追加します。

「Messaging」からAPIロジック「LINE Messaging API Send Message」を「FUJITSU Empty Logic」と「End」の間にある「▼」にドラック&ドロップしてください。

APIロジック「LINE Messaging API Send Message」が追加されたことを確認してください。

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

「EDIT」をクリックしてください。

デフォルトで入力されているソースコードを削除し、以下のソースコードを入力してください。
本ロジックは、ユーザーから決まった質問に対して、用意している答えを返す単純なbot機能です。
faqsオブジェクトのquestion、及びanswerを編集することでbot機能を編集することができます。

// @see https://devdocs.line.me/en/#push-message
// @todo set Channel Access Token and ID of the receiver
var accessToken = config.line.accessToken;
var faqs = [
  {
    question: 'help',
    answer: '1:url,2:Hi',
  },{
    question: 'url',
    answer: 'http://playground.cloud.global.fujitsu.com',
  },
  {
    question: 'Hi',
    answer: 'I am fine!',
  }
];

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 promises = [];
var uuidv4 = require('uuid/v4');
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));
        sample_messages.push({
          stream_id: event.source.userId,
          user_id: 'bot',
          message: faq.answer,
          replyMessage_id: '',
          _id: uuidv4(),
        });
      }
    });
  }
});

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

「OK」をクリックしてください。

入力したソースコードが反映されているかを確認してください。

2. 「GET /sample_streams」ロジックのカスタマイズ

本WebAPIは、フォローされているユーザー一覧を返すWebAPIです。

左メニュー「Contents」から「GET /sample_streams」をクリックしてください。

① APIロジック「Stream Channel Fetch Stream Channel」の削除

APIロジック「Stream Channel Fetch Stream Channel」の「×」をクリックしてください。
(注)本ハンズオンでは、DBを使用しないため、DBからデータを取得する本ロジックを削除します。

APIロジック「Stream Channel Fetch Stream Channel」が削除されたことを確認してください。

② APIロジック「FUJITSU Empty Logic」の追加

ここでは、フォローされているユーザー一覧をアプリ内から取得する処理を追加します。

「Custom」からAPIロジック「FUJITSU Empty Logic」を「Start」と「End」の間にある「▼」にドラック&ドロップしてください。

APIロジック「FUJITSU Empty Logic」が追加されたことを確認してください。

③ APIロジック「FUJITSU Empty Logic」の編集

「EDIT」をクリックしてください。

デフォルトで入力されているソースコードを削除し、以下のソースコードを入力してください。
本ロジックは、フォローされているユーザー一覧をアプリ内から取得する処理です。

next(sample_streams);

「OK」をクリックしてください。

入力したソースコードが反映されているかを確認してください。

3. 「POST /sample_streams」ロジックの削除

本ハンズオンでは、使用しないWebAPIのため、処理を削除します。

左メニュー「Contents」から「POST /sample_streams」をクリックしてください。

① APIロジック「Stream Channel Fetch Stream Channel」の削除

APIロジック「Stream Channel Fetch Stream Channel」の「×」をクリックしてください。

APIロジック「Stream Channel Fetch Stream Channel」が削除されたことを確認してください。

4. 「GET /sample_messages」ロジックのカスタマイズ

本WebAPIは、指定されたユーザーのメッセージ一覧を返すWebAPIです。

左メニュー「Contents」から「GET /sample_messages」をクリックしてください。

① APIロジック「Stream Channel Fetch Stream Channel」の削除

APIロジック「Stream Channel Fetch Stream Channel」の「×」をクリックしてください。

APIロジック「Stream Channel Fetch Stream Channel」が削除されたことを確認してください。

② APIロジック「FUJITSU Empty Logic」の追加

「Custom」からAPIロジック「FUJITSU Empty Logic」を「Start」と「End」の間にある「▼」にドラック&ドロップしてください。

APIロジック「FUJITSU Empty Logic」が追加されたことを確認してください。

③ APIロジック「FUJITSU Empty Logic」の編集

「EDIT」をクリックしてください。

デフォルトで入力されているソースコードを削除し、以下のソースコードを入力してください。
本ロジックは、LINE操作画面で指定されたユーザーのメッセージ一覧をアプリ内から取得する処理です。

var filter = req.query.filter ? JSON.parse(req.query.filter) : '';
var stream_id = filter ? filter.where.stream_id : '';
var messageList = sample_messages.filter(function(item, index){
  if(item.stream_id === stream_id) return true;
});

next(messageList);

「OK」をクリックしてください。

入力したソースコードが反映されているかを確認してください。

5. 「POST /sample_messages」ロジックのカスタマイズ

本WebAPIは、LINEにメッセージを送信するWebAPIです。

左メニュー「Contents」から「POST /sample_messages」をクリックしてください。

① APIロジック「Stream Channel Fetch Stream Channel」の削除

APIロジック「Stream Channel Fetch Stream Channel」の「×」をクリックしてください。

APIロジック「Stream Channel Fetch Stream Channel」が削除されたことを確認してください。

② APIロジック「FUJITSU Empty Logic」の追加

「Custom」からAPIロジック「FUJITSU Empty Logic」を「Start」と「End」の間にある「▼」にドラック&ドロップしてください。

APIロジック「FUJITSU Empty Logic」が追加されたことを確認してください。

③ APIロジック「FUJITSU Empty Logic」の編集

「EDIT」をクリックしてください。

デフォルトで入力されているソースコードを削除し、以下のソースコードを入力してください。
本ロジックは、LINE操作画面から入力されたメッセージをアプリ内に格納する処理です。

var uuidv4 = require('uuid/v4');
var streamMessage = {
  stream_id: req.body.stream_id,
  user_id: req.body.user_id,
  message: req.body.message,
  replyMessage_id: '',
  _id: uuidv4(),
};
sample_messages.push(streamMessage);

next(streamMessage);

「OK」をクリックしてください。

入力したソースコードが反映されているかを確認してください。

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

「Messaging」からAPIロジック「LINE Messaging API Send Message」を「FUJITSU Empty Logic」と「End」の間にある「▼」にドラック&ドロップしてください。

APIロジック「LINE Messaging API Send Message」が追加されたことを確認してください。

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

「EDIT」をクリックしてください。

赤文字部分を修正してください。
本ロジックは、LINE操作画面から入力されたメッセージをLINEに送信する処理です。

----------------------------------------------------------------------------------
~省略~
----------------------------------------------------------------------------------
var accessToken = config.line.accessToken;
var messageReceiverId = req.body.stream_id;

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

「OK」をクリックしてください。

入力したソースコードが反映されているかを確認してください。

6.4.5. アプリケーションのダウンロード

1. アプリケーションのダウンロード

「DOWNLOAD」ボタンをクリックしてください。

利用規約を確認の上、「DOWNLOAD」ボタンをクリックしてください。
(注)複数回クリックすると、ダウンロードに失敗する場合がございますので、ご注意ください。

2. zipファイルの展開

ダウンロードした「LINEChatbot.zip」を事前準備で用意した作業用フォルダに展開してください。

「LINEChatbot」フォルダに移動し、資材が展開されているかを確認してください。

6.5. アプリケーションの修正

6.5.1. バックエンドの修正

1. ディレクトリの移動

「D:\K5CF\LINEChatbot\backend」フォルダに移動してください。

2. 「package.json」の修正

任意のテキスト・エディターを使用して、「package.json」ファイルを開いてください。

赤文字部分に事前準備「Node.jsのインストール」でインストールしたNode.jsのバージョンを入力し、上書き保存してください。

"engines": {			
  "node": "Node.jsのバージョン"					
},

設定例

    「v6.11.2」のバージョンを使用している場合

    "engines": {			
      "node": "6.11.2"					
    },

使用しているバージョンを調べる場合は、コマンドプロンプトから以下のコマンドを実行してください。
[node -v]コマンドを実行してください。

node -v

実行結果

    C:\>node -v
    v6.11.2

3. 「config.js」の修正

任意のテキスト・エディターを使用して、「config.js」ファイルを開いてください。

事前準備6「LINE Messaging APIアクセストークンの取得」で取得したアクセストークンとチャネルシークレットを赤文字部分の[ACCESS_TOKEN]、[CHANNEL_SECRET]に設定し、上書き保存してください。

module.exports = {
  serverPort: process.env.PORT || 3000,
  line: { accessToken: "[ACCESS_TOKEN]", secret: "[CHANNEL_SECRET]" }
};

設定例

    アクセストークンが「Sample_Token」、チャネルシークレットが「Sample_Secret」の場合

    module.exports = {
      serverPort: process.env.PORT || 3000,
      line: { accessToken: "Sample_Token", secret: "Sample_Secret" }
    };

4. 「index.js」の修正

任意のテキスト・エディターを使用して、「index.js」ファイルを開いてください。

赤文字部分のソースコードを追加し、上書き保存してください。

----------------------------------------------------------------------------------
~省略~
----------------------------------------------------------------------------------
var swaggerDoc = JSON.parse(fs.readFileSync('./api/swagger.json', 'utf8'));

global.sample_streams = [];
global.sample_messages = [];

swaggerTools.initializeMiddleware(swaggerDoc, function (middleware) {
----------------------------------------------------------------------------------
~省略~
----------------------------------------------------------------------------------

(注)本ハンズオンでは、LINEからの通知をDBではなく、簡易的にアプリ内へ格納しています。ここでは、アプリ内に格納するためのグローバル変数を定義しています。アプリ内にデータを格納する事についての留意事項は、「6.8.本ハンズオンで作成するアプリケーションの留意事項」を参照してください。

5. ディレクトリの移動

「D:\K5CF\LINEChatbot\backend\api」フォルダに移動してください。

6. 「swagger.json」の修正

任意のテキスト・エディターを使用して、「swagger.json」ファイルを開いてください。

赤文字部分のソースコードを追加し、上書き保存してください。

----------------------------------------------------------------------------------
~省略~
----------------------------------------------------------------------------------
"/webhook": {
  "post": {
    "description": "",
    "parameters": [{
      "name": "data",
      "in": "body",
      "schema": {
        "type": "string"
      }
    }],
    "responses": {
      "200": {
        "description": ""
      }
    },
    "operationId": "webhookPOST",
    "x-swagger-router-controller": "Chat"
  }
}
----------------------------------------------------------------------------------
~省略~
----------------------------------------------------------------------------------

6.6. アプリケーションの配備

アプリケーションをK5 CFに配備します。

使用するアプリケーション

  • バックエンドアプリ「AAA00001-xxxx1234」:node.js_buildpack
  • フロントエンドアプリ①「AAA00001-yyyy1234」:staticfile_buildpack

アプリケーション配備時のイメージ

6.6.1. バックエンドの配備

1. ディレクトリの移動

「D:\K5CF\LINEChatbot\backend」ディレクトリに移動してください。

d:						
cd \K5CF\LINEChatbot\backend

2. パッケージの追加

実行に必要なパッケージ情報を追加します。

[npm install]コマンドを実行してください。

npm install --save uuid

実行結果

    「ERR!」が出力されていないことを確認してください。

    D:\K5CF\LINEChatbot\backend>npm install --save uuid
    backend@1.0.0 D:\K5CF\LINEChatbot\backend
    `-- uuid@3.1.0

3. アプリケーションの配備

バックエンドアプリをK5 CFに配備します。

[cf push]コマンドを実行してください。

cf push <バックエンドアプリ>

実行例

    バックエンドアプリ「AAA00001-xxxx1234」に配備する場合

    cf push AAA00001-xxxx1234

実行結果

    「ERR!」が出力されていないこと、及びstateに「running」が出力されていることを確認してください。

    D:\K5CF\LINEChatbot\backend>cf push AAA00001-xxxx1234
    ----------------------------------------------------------------------------------
    ~省略~
    ----------------------------------------------------------------------------------
         state     since                    cpu    memory          disk          details
    	 #0   running   2017-12-12 03:15:59 PM   0.0%   22.9M of 512M   80.7M of 1G

6.6.2. フロントエンドの配備

1. ディレクトリの移動

「D:\K5CF\LINEChatbot\frontend」フォルダに移動してください。

d:						
cd \K5CF\LINEChatbot\frontend

2. バックエンドアプリURLの指定

フロントエンドアプリが接続するバックエンドアプリのURLを指定します。

コマンドを実行して、バックエンドアプリのURLを設定してください。

  • Windowsの場合
  • set API_URL=<バックエンドアプリURL>
  • Mac/Linuxの場合
  • export API_URL=<バックエンドアプリURL>

実行例

    WindowsOSを利用して、バックエンドアプリURL「http://AAA00001-xxxx1234.jp-east-2.cf-app.net/」を設定する場合

    set API_URL=http://AAA00001-xxxx1234.jp-east-2.cf-app.net/

3. パッケージのインストール

フロントエンドアプリをビルドするために必要なパッケージをインストールします。

[npm install]コマンドを実行してください。
(注)実行に必要なパッケージをインストールしているため、時間がかかります。

npm install

実行結果

    「ERR!」が出力されていないことを確認してください。

    D:\K5CF\LINEChatbot\frontend>npm install
    npm WARN deprecated content-type-parser@1.0.2: This package has been renamed whatwg-mimetype; please upgrade.
    ----------------------------------------------------------------------------------
    ~省略~
    ----------------------------------------------------------------------------------
    npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\chokidar\node_modules\fsevents):
    npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"ia32"})
    npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.1.1 (node_modules\sane\node_modules\fsevents):
    npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"ia32"})

4. タスク一覧の取得

[npm run]コマンドを実行してください。

npm run

実行結果

    「build」が出力されていることを確認してください。

    D:\K5CF\LINEChatbot\frontend>npm run
    Lifecycle scripts included in Map:
      start
    	webpack-dev-server -d --progress --colors --open
      test
    	cross-env BABEL_JEST_STAGE=0 jest
    
    available via `npm run-script`:
      build
    	webpack -p --progress --colors --display-error-details --env.production
      lint
    	eslint app/** --fix

5. 「build」タスクの実行

フロントエンドアプリをビルドします。

[npm run build]コマンドを実行してください。

npm run build

実行結果

    「ERR!」が出力されていないことを確認してください。

    D:\K5CF\LINEChatbot\frontend>npm run build
    
    > Chat@1.0.0 build D:\K5CF\LINEChatbot\frontend
    > webpack -p --progress --colors --display-error-details --env.production
    
    Hash: b6d872c6e601194d1ee3
    Version: webpack 2.7.0
    Time: 22127ms
        Asset    Size  Chunks                    Chunk Names
    bundle.js  950 kB       0  [emitted]  [big]  main
       [0] ./~/react/react.js 56 bytes {0} [built]
       [1] ./~/prop-types/index.js 956 bytes {0} [built]
      [10] ./~/material-ui/utils/colorManipulator.js 7.62 kB {0} [built]
      [12] ./~/material-ui-fj/styles/getMuiFjTheme.js 7.37 kB {0} [built]
      [13] ./~/fbjs/lib/invariant.js 1.51 kB {0} [built]
      [19] ./~/react-dom/index.js 59 bytes {0} [built]
     [117] ./~/react-router/es/index.js 1.46 kB {0} [built]
     [192] ./~/material-ui-fj/styles/MuiFjThemeProvider.js 4.27 kB {0} [built]
     [193] ./~/material-ui-fj/styles/setFontFamily.js 1.28 kB {0} [built]
     [317] ./~/react-router/es/useRouterHistory.js 282 bytes {0} [built]
     [326] ./~/material-ui-fj/styles/baseThemes/index.js 7.57 kB {0} [built]
     [327] ./~/react-tap-event-plugin/src/injectTapEventPlugin.js 1.04 kB {0} [built]
     [345] ./app/App.js 4.05 kB {0} [built]
     [351] ./app/stores/StreamStore.js 3.67 kB {0} [built]
     [607] ./~/material-ui-fj/styles/baseThemes/Vivid05.js 1.85 kB {0} [built]
        + 844 hidden modules

6. ディレクトリの移動

ビルドされたフロントエンドアプリが格納されている「public」ディレクトリに移動します。

「D:\K5CF\LINEChatbot\frontend\public」に移動してください。

cd \K5CF\MyInstaMap\frontend\public

7. アプリケーションの配備

ビルドされたフロントエンドアプリをK5 CFに配備します。

[cf push]コマンドを実行してください。

cf push <フロントエンドアプリ①>

実行例

    フロントエンドアプリ①「AAA00001-yyyy1234」に配備する場合

    cf push AAA00001-yyyy1234

実行結果

    「ERR!」が出力されていないこと、及びstateに「running」が出力されていることを確認してください。

    D:\K5CF\LINEChatbot\frontend\public>cf push AAA00001-yyyy1234
    ----------------------------------------------------------------------------------
    ~省略~
    ----------------------------------------------------------------------------------
         state     since                    cpu    memory         disk         details
    #0   running   2017-12-12 03:31:39 PM   0.0%   2.5M of 256M   8M of 1G

6.7. アプリケーションの確認

1. フロントエンドアプリのURLにアクセス

WebブラウザからフロントエンドアプリのURLにアクセスしてください。
http://<フロントエンドアプリ①>.<リージョン識別子>.cf-app.net/

実行例

    東日本リージョン2のCFに配備したフロントエンドアプリ①「AAA00001-yyyy1234」にアクセスする場合
    http://AAA00001-yyyy5678.jp-east-2.cf-app.net/

2. フロントエンドアプリの表示

以下のようにLINE操作画面が表示されていることを確認してください。

3. アプリケーションの確認前準備

「LINE developers」にアクセスして、LINEとバックエンドアプリの接続情報を設定します。

① Webhookの設定

「LINE developers」にアクセスし、事前準備「LINE Messaging APIアクセストークンの取得」で作成したチャネルを開いてください。

「メッセージ送受信設定」の「Webhook送信」を「利用する」に更新してください。

Webhook URLを更新してください。
赤枠部分に、以下の内容を設定してください。
<バックエンドアプリ>.<リージョン識別子>.cf-app.net/webhook

設定例

    LINEから東日本リージョン2(jp-east-2)環境にあるバックエンドアプリ(AAA00001-xxxx1234)に接続する場合
    AAA00001-xxxx1234.jp-east-2.cf-app.net/webhook

② チャットボットを友だちに追加

LINEアプリの「友だち追加」画面から「LINEアプリへのQRコード」のQRコードを読み込み友だち追加してください。

LINEアプリで友だち追加できたことを確認してください。

4. アプリケーションの確認

① 追加されたユーザーの確認

LINE操作画面の「STREAMS」にLINEアプリから友だち追加を行ったユーザーが追加されていることを確認してください。

② LINE操作画面からメッセージを送信

LINE操作画面に任意の名前とメッセージを入力し、「POST」をクリックしてください。
本教材では、Name欄に「test」、メッセージ欄に「test」と入力しております。

送信したメッセージが、LINE操作画面に出力されたこと、及びLINEアプリに送信されたことを確認してください。

    LINE操作画面

    LINEアプリ

③ LINEアプリからメッセージを送信

LINEアプリからメッセージを送信してください。
本教材では、「test」と入力しております。

送信したメッセージが、LINEアプリに出力されたこと、及びLINE操作画面に送信されたことを確認してください。

    LINEアプリ

    LINE操作画面

④ ボット機能の確認

「6.4.4. WebAPIロジックのカスタマイズ」の「⑥ APIロジック「LINE Messaging API Send Message」の追加」で実装したボットが質問に返答することを確認します。

本教材で実装しているボットが返答可能なメッセージ一覧

  • help
  • url
  • Hi

LINEアプリから「help」と送信してください。

「bot」から返答あったことを確認してください。

    LINEアプリ

    LINE操作画面

「6.4.4. WebAPIロジックのカスタマイズ」の「⑥ APIロジック「LINE Messaging API Send Message」の追加」で実装したロジックを編集することで、対応可能なQAを増やすことができます。

以上で、ハンズオン「アプリケーション作成:LINE操作画面 × LINE Chatbot」は終了です。

6.8. 本ハンズオンで作成するアプリケーションの留意事項

本ハンズオンで作成するアプリケーションには、以下の留意事項があります。

  • 本ハンズオンの実行環境では、DB環境を提供していないため、LINEから受信したデータを一時的にアプリ内に保持しています。
    • バックエンドアプリを再起動や再配備した場合は、アプリ内に保持しているデータは削除されます。
    • データが削除された場合は、LINEアプリからチャットボットを「ブロック」⇒「ブロック解除」して、もう一度フォローしてください。
    • 本ハンズオンでは使用しませんが、[cf scale]コマンドでインスタンスを増やした場合、正常に動作しません。
  • LINE操作画面の左下にある「ADD NEW STREAM」は使用しません。
    • 「D:\K5CF\Chat\frontend\app\components\StreamList」の「StreamList.js」ファイルを修正することで、画面から削除することができます。
  • DBを使用したチャットボットを作成されたい場合は、K5をご契約していただき、K5上でDB環境をご用意の上、K5 ShowcaseのChatbot and UI for LINE を参照してください。
  • 本ハンズオンでは、バックエンドアプリのWebAPIには認証機能を付けていないため、LINEから重要な情報は送信しないでください。バックエンドアプリのWebAPIに認証機能を付ける場合は、K5にご契約の上、K5 API Managementをご利用ください。
  • 前へ
  • 6. アプリケーション作成:LINE操作画面 × LINE Chatbot
  • 次へ

Japan

国・地域を変更

ページの先頭へ