はじめに

前回作成した「負けないじゃんけんLINEBOT」が楽しかったらしく、子供に「またできないの？」と聞かれたので、Heroku化することにしました。ついでに実験的にリッチテキストを活用して、UXが良くなるか試しています。

仕様

じゃんけんをしたら、必ず自分が「勝つ」か「あいこ」にしてくれるボット。
・ぐー、ちょき、ぱー以外に一言そえてくれる。
・カタカナでグー、チョキ、パーを書かれたら、オウム返しであいこになる。
・リッチテキストを押すと、「じゃんけんしよー」と誘ってくれる。
・その他のメッセージは「なまえ」「なんさい」以外はオウム返し。

環境

Node.js v10.16.3
Windows 10 pro
Visual Studio Code v1.39.1
heroku v7.35.0

手順

1.じゃんけんLINEBOTを作る。
こちら参照。
server.jsをindex.jsに名前を変更して保存する(コードは下記のindex.js)。
2．リッチテキストを加える。
こちらを参考に作成しました。
なかなかリッチテキストの画面に行けず、迷子になりました。
まずは下記の「変更はこちら」から「ホーム」をクリックすると「リッチメニュー」のある画面にいけます。

本来はぐー、ちょき、ぱーで各々ボタンを分けたかったですが、テキストは1種類しか設定できないので、じゃんけんを誘う形にしました。
3．Heroku化する
　①.gitignoreファイルを最上部に作る（コードは下記参照）。
　②同じくProcfileというファイルを最上部に作り、web: node index.jsというコードを入れる。
　③index.js app.listen 修正
　index.jsのapp.listenの箇所を以下のように修正し保存

index.js


  app.listen(process.env.PORT || 8080);

④gitリポジトリの対象にする初期設定

git init

　⑤gitリポジトリにアプリ追加

git add --a

　⑥gitリポジトリにコミット

git commit -m "commit"

　⑦herokuアプリ追加
　自分でアプリケーションネームは考える。ほかにあると作成できないので日付など追加する。

heroku create アプリケーションネーム

⑧herokuにプッシュ

git push heroku master

コード

index.js

'use strict';

const express = require('express');
const line = require('@line/bot-sdk');
const PORT = process.env.PORT || 8080;

const config = {
    channelSecret: 'チャンネルシークレット',
    channelAccessToken: 'チャンネルアクセストークン'
};

const app = express();

app.get('/', (req, res) => res.send('Hello LINE BOT!'));
app.post('/webhook', line.middleware(config), (req, res) => {
    console.log(req.body.events);
    Promise
      .all(req.body.events.map(handleEvent))
      .then((result) => res.json(result));
});

const client = new line.Client(config);

function handleEvent(event) {

  const message = event.message.text;
  let replyMessage = event.message.text;

  if (event.type !== 'message' || event.message.type !== 'text') {
    return Promise.resolve(null);
  }


  // 部分一致（どこかで1つQiitaの文言が出る）
  if( message.indexOf('じゃんけん') > -1 ){
    replyMessage = 'お、いいね。ぐー、ちょき、ぱーのどれかだしてね。最初はぐー、じゃんけんぽん';
  }

  if( message.indexOf('なまえ') > -1 ){
    replyMessage = 'わたしのなまえは　まるこです。';
  }
  if( message.indexOf('なんさい') > -1 ){
    replyMessage = 'わたしはうまれたてです。';
}
if( message.indexOf('へー') > -1 ){
    replyMessage = 'ほー';
}

  // 特定の文言だけ返答
  if( message == 'ぐー' ){
    const randomMessages = [
        "ちょき　なかなかつよいね",
        "ちょき　まけちゃった",
        "ぐー　きがあうね"
    ];
    replyMessage = randomMessages[Math.floor(Math.random()*3)];
    }

  if( message == 'ちょき' ){
    const randomMessages = [
        "ぱー　くやしい＞＿＜",
        "ぱー　最強やん",
        "ちょき　二人合わせてバルタン聖人"
    ];
    replyMessage = randomMessages[Math.floor(Math.random()*3)];
  }
  if( message == 'ぱー' ){
    const randomMessages = [
        "ぐー　おぬしもやるな",
        "ぐー　どんだけ強いの",
        "ぱー　ハイタッチ　"
    ];
    replyMessage = randomMessages[Math.floor(Math.random()*3)];
  }
  return client.replyMessage(event.replyToken, {
    type: 'text',
    text: replyMessage
  });
}

app.listen(PORT);
console.log(`Server running at ${PORT}`);

下記は.gitignoreファイル

.gitignore

# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# Runtime data
pids
*.pid
*.seed
*.pid.lock

# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov

# Coverage directory used by tools like istanbul
coverage

# nyc test coverage
.nyc_output

# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
.grunt

# Bower dependency directory (https://bower.io/)
bower_components

# node-waf configuration
.lock-wscript

# Compiled binary addons (https://nodejs.org/api/addons.html)
build/Release

# Dependency directories
node_modules/
jspm_packages/

# TypeScript v1 declaration files
typings/

# Optional npm cache directory
.npm

# Optional eslint cache
.eslintcache

# Optional REPL history
.node_repl_history

# Output of 'npm pack'
*.tgz

# Yarn Integrity file
.yarn-integrity

# dotenv environment variables file
.env

# next.js build output
.next

動作確認

テスト

リッチテキストのついたじゃんけんLINEBOTをさっそく子供に試してみました。最初は画面上の絵のグーを一所懸命押してた。「やっぱり、そうだよね～」と心の中で思いながら、じゃんけんはメッセージを送ってねとお願い（苦笑）すると1、2回じゃんけんで遊んでくれました。
が、その後じゃんけん以外のメッセージを送りはじめ、オウム返しに気づくと、
何故か子供はLINEBOTがどこまで完璧に真似できるのかという勝負を挑みはじめました。
こちらはLINEBOTだから「どんなものも完璧さ！」と思ってましたが、
なんと平仮名の修飾文字はそのままではなく（）で返答されるのですね。
勝負に勝ったと子供は大喜びしてました（笑）
もともと負けて自信を与えてくれるLINEBOTという設定なので
違う形で目的を果たしてくれて助かりました。

感想

リッチメニューは非常に簡単でとても使いやすかったです。今回は少し残念な反応でしたが、有効なユースケースも探していきたいと思います。お子さんいる方、じゃんけんで誰かを景気付けたい方、使ってみてください。