초초심자가 젠켄 LINEBOT를 조금만 진화시켜 보았다.

소개

전회 작성한 「지지 않는 켄켄 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 파일

# 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이라는 설정이므로
다른 형태로 목적을 다해주고 살아났습니다.

감상

풍부한 메뉴는 매우 쉽고 사용하기 쉬웠습니다. 이번은 조금 유감스러운 반응이었습니다만, 유효한 유스 케이스도 찾아 가고 싶습니다. 자녀가 있는 분, 싸움으로 누군가를 경기 짓고 싶은 분, 사용해 보세요.