はじめに
前回作成した「負けないじゃんけん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の箇所を以下のように修正し保存
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
コード
'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ファイル
# 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という設定なので
違う形で目的を果たしてくれて助かりました。
感想
リッチメニューは非常に簡単でとても使いやすかったです。今回は少し残念な反応でしたが、有効なユースケースも探していきたいと思います。お子さんいる方、じゃんけんで誰かを景気付けたい方、使ってみてください。
