LoginSignup
18
10

More than 5 years have passed since last update.

@Illly(Daichi Nishida)

徐々に壊れていくLINE BOTを作ってみた

Last updated at Posted at 2018-11-22

目次

  1. このLINE BOTのコンセプト
  2. 使用した技術
  3. 手順アウトライン
  4. 手順詳細
  5. 完成したもの(画像)
  6. お友達に?
  7. github
  8. イラストについて

このLINE BOTのコンセプト

  • 我々の知らないところで終わりそうな世界がある。
  • その世界でかろうじて機能しているBOTがいた。
  • BOTはあてもなく通信を試みてたらあなたとつながった。
  • BOTは終わりそうな世界の話をするよりもあなたとたわいもない雑談をしながら最後を迎えることにした。
  • モニターがあってBOTの顔を見ることができる(ただの画像ね)。
  • 徐々に壊れていく様子が返事やモニターを通してわかる。

作ろうと思ったときに思いついたのはこれくらい。クオリティは気にしちゃだめ。

使用した技術

  • node.js (v8.10.0)
    • Express(v4.16.4) - node.jsのフレームワークを利用するためのパッケージ
    • @line/bot-sdk (v6.3.0) - LINEのMessaging APIを利用するためのパッケージ
    • request (v2.88.0) - a3rtのTalk APIへPOSTするためのパッケージ
  • now.sh (v12.1.3) - 最終的にできたものをここにデプロイする
  • ngrok (v2.2.8) - テストするときにいちいちnow.shにデプロイするの面倒くさいからローカル環境に直接繋げられるツール

手順アウトライン

階層構造をもっとうまく表したかったけど、これで我慢…

  1. 開発前の事前準備
    1. (1-1) LINE BOTのアカウント作成 & 設定
    2. (1-2) a3rtのTalk APIのキーの取得
  2. node.jsでBOT開発
    1. (2-1) プロジェクトの土台を作成
    2. (2-2) LINE BOTにメッセージを送れるようにする
    3. (2-3) Talk APIにリクエストを送って返事をもらえるようにする
    4. (2-4) 壊れている様子を文字で演出する
    5. (2-5) "モニター"機能の追加
    6. (2-6) 壊れている様子を"モニター"で演出する
    7. (2-7) 最後のディテールをちょいちょい
  3. now.shでネットにデプロイ
    1. (3-1) デプロイ前にすること
    2. (3-2) デプロイ

手順詳細

1. 開発前の事前準備

開発を始める前にアカウント登録やAPIキーの取得などをしないといけない! ここらに関してはネットに資料がたくさん転がっているので自分が参照した資料を記載しておく。

(1-1) LINE BOTのアカウント作成 & 設定
(1-2) a3rtのTalk APIのキーの取得
  • 以下のリンクで跳んだ先に「API KEY 発行」ボタンがあるのでクリック。その後のページでメアドを登録するとメールでAPI KEYを送ってくれる。後のステップでAPI KEYを用いるのでメモメモ…

2. node.jsでBOT開発

(2-1) プロジェクトの土台を作成
  • プロジェクトディレクトリの作成とnpm init -y
  • 必要なパッケージのインストール
  • server.jsファイルを作成
ターミナル
$ mkdir <プロジェクト名>
$ cd <プロジェクト名> 
$ npm init -y
$ npm i --save express @line/bot-sdk request  # バージョン気になる人はバージョンも
$ npm i --save-dev ngrok now
$ touch server.js
(2-2) LINE BOTにメッセージを送れるようにする
  • LINE BOTのチャンネル設定ページの「Channel Secret」と「Channel access token」を発行/メモ
  • LINE BOTのチャンネル設定ページの「Use webhooks」を「Enabled」に設定
  • LINE BOTと会話するための最低限のコードを記載
server.js
// パッケージのインポート
const express = require('express');
const line    = require('@line/bot-sdk');


// LINE BOTのチャンネル設定ページの「Channel Secret」と「Channel access token」の値
const lineConfig = {
    channelSecret:      'XXXXXXXXXXXXXXXXXXXX',
    channelAccessToken: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX'
};


// Expressの起動
const portNum = process.env.PORT || 3000; // 環境変数に決められたポートあればそれを、なければ3000
const app = express();
app.listen(portNum, () => {
    console.log(`Server running at ${portNum}`);
});


// LINE BOTのwebhookのためのルーティング
app.post('/webhook', line.middleware(lineConfig), (req, res) => {
    console.log(req.body.events);
    Promise
      .all(req.body.events.map(handleEvent)) // このhandleEventの中身はちょっと下に定義してあるfunctionだよ
      .then((result) => res.json(result));
});


// これがなにしてるかちょっとわからないからエロい人教えて
const client = new line.Client(lineConfig);


// LINE BOTがユーザーから受け取ったイベントからいろいろ処理をするイベントハンドラ
// LINE BOTの返信に関してのロジックは全部ここ
function handleEvent(event) {
  if (event.type !== 'message' || event.message.type !== 'text') {
    return Promise.resolve(null);
  }

  return client.replyMessage(event.replyToken, {
    type: 'text',
    text: event.message.text // 実際に返信の言葉を入れる箇所(event.message.textはユーザーが送ったテキスト)
  });
}
  • ベースとなるロジックができたところで動くかを確認するためにngrok http 3000を実行。以下のコードの40a35b6c.ngrok.ioに相当する箇所をコピーする。
ターミナル
# 以下を実行したら、なんか出てくるはず
$ ngrok http 3000

    ngrokby@inconshreveable(Ctrl+C to quit)

    Session Status                online
    Session Expires               7 hours, 59 minutes
    Version                       2.2.8
    Region                        United States (us)
    Web Interface                 http://127.0.0.1:4040
    Forwarding                    http://40a35b6c.ngrok.io -> localhost:3000
    Forwarding                    https://40a35b6c.ngrok.io -> localhost:3000
                                      ##### 40a35b6c.ngrok.ioに相当する部分をコピー! ######

    Connections                   ttl     opn     rt1     rt5     p50     p90
                                  0       0       0.00    0.00    0.00    0.00
  • コピーしたらLINE BOTのチャンネル設定ページの「Webhook URL」の箇所にExpressのルーティングで定義したパスを末尾につけて登録する。私の例だと40a35b6c.ngrok.io/webhookとなる。
  • これでLINE BOTと友だちになってメッセージを送ったらオウム返ししてくれるはず!
(2-3) Talk APIにリクエストを送って返事をもらえるようにする
  • 一つのファイルにすべてを書くとごっちゃになるので、Talk APIにリクエストを送る部分をモジュール化する。
    • smallTalk.jsファイルを作成して、そこにTalk API用のロジックを作成し、server.jsにインポートする。
smallTalk.js
// Talk API用のロジックが含まれたファイル

// パッケージのインポート
const request = require('request');


// Talk APIを利用するためにPOSTするURLとAPI Key
const smallTalkApiKey     = 'XXXXXXXXXXXXXXXXXXXXXXXXX';
const smallTalkRequestUrl = 'https://api.a3rt.recruit-tech.co.jp/talk/v1/smalltalk';


// 以下のfunctionをモジュール化
// 引数はユーザーからのテキスト
module.exports = function(userText){

  // Talk APIが受け付けるリクエスト情報
  const smallTalkRequestOption = {
    url: smallTalkRequestUrl,
    form: {
      apikey: smallTalkApiKey,
      query: userText
    }
  };

  // Promiseを返す
  return new Promise((resolve, reject) => {
    // POST リクエストを送信する
    request.post(smallTalkRequestOption, function(err, res, body){
      if(err){
        reject(err);
      }

      // Talk APIから受け取ったstring型のレスポンスをJavaScript Objectにする
      const bodyObj = JSON.parse(body);

      // .results[0].replyはTalk APIからの返信
      if(bodyObj.results[0].reply){
        resolve(bodyObj.results[0].reply);          // 返信がある場合はそれをresolve
      } else {
        reject('Invalid response from smallTalk');  // ない場合はreject
      }
    });
  });
}
  • server.jsでこのモジュールをインポートして、ユーザーのテキストを入力して返事を返すようにする。
server.js
const express = require('express');
/* (略) */
const smallTalk = require('./smallTalk'); // smallTalk.jsでmodule.exportsしたfunctionをそのままインポート

/* (略) */

// LINE BOTがユーザーから受け取ったイベントからいろいろ処理をするイベントハンドラ
// LINE BOTの返信に関してのロジックは全部ここ
// 中身の大幅変更
function handleEvent(event) {

  // ユーザーがテキストを送ったくれた場合のみ反応、それ以外は無視
  if(event.message.type === 'text'){
    const userText = event.message.text; // ユーザーの送ってくれたテキスト

    smallTalk(userText)
      // smallTalkResはTalk APIからの返信(smallTalk.jsでresolveしたやつ)
      .then((smallTalkRes) => {
        return client.replyMessage(event.replyToken, {
          type: 'text',
          text: smallTalkRes
        });
      })
      // エラーだった場合、「...」って返す
      .catch((err) => {
          return client.replyMessage(event.replyToken, {
            type: 'text',
            text: '...'
          });
      });
  } else {
    return Promise.resolve(null);
  }
}
  • これで会話が成立するようになった!
(2-4) 壊れている様子を文字で演出する
  • 表現方法は悩んだが、Talk APIの返信の文字をランダムにこんな「ĀçĊëÛÂĬ¶抵ｼ�」感じの文字(以降バグ文字と呼ぶ)で置換する方法で表現してみることにした。
  • また、話せば話すほどどんどん壊れていく様子を表したいので、LINEのユーザーIDをキーとしたBOTの壊れ度(以降バグレベルと呼ぶ)のハッシュを作って管理することにした。
  • 話せば必ずバグレベルが上がるのではなく、25%くらいの確率でバグレベルが上がるようにした。
  • バグレベルは数値で表現し、0で始まり、9を上限とした。このレベルの数だけの文字をバグ文字と置換することにした(Talk APIの返信はそんなに長くないので9でかなり壊れたように見せれると思った)。
  • バグ文字は配列で定義してそれをランダムに一つ選び、Talk APIの返信の中のランダムな文字と置換することにした。
server.js
/* (略) */


// LINEのユーザーIDをキーとしたBOTのバグレベルのハッシュを管理
var userGlitchLevel = {};

// バグ文字の配列
const glitchCharArray = [ /* バグ文字を配列にいっぱい並べる */ ];


// ユーザーのバグレベルを上げるfunction、引数はLINEユーザーのID
function addGlitchLevel(userId){
  // 25%の確率でバグレベルが上がる
  if (Math.random() <= 0.25){
    if(userGlitchLevel[userId] < 9){ // バグレベルのマックスは9
      userGlitchLevel[userId]++;
    }else{
      userGlitchLevel[userId] = 1;
    }
  }
}


// ユーザーのバグレベルを取得、まだハッシュにいない人は0となる
function getGlitchLevel(userId){
  return userGlitchLevel[userId] || 0;
}


// バグ文字に置換するfunction
function glitchifyText(userId, text){
  let returnTextArray = text.split(''); // ユーザーからのテキストを一文字ずつ分けた配列にする

  // ユーザーのバグレベルの数だけループ
  for(let count = 0; count < getGlitchLevel(userId); count++){
    const glitchChar = glitchCharArray[Math.floor(Math.random() * glitchCharArray.length)]; // ランダムなバグ文字を取得
    returnTextArray[Math.floor(Math.random() * returnTextArray.length)] = glitchChar;       // ランダムな位置の文字をバグ文字に置換
  }

  return returnTextArray.join(''); // 最後に配列をもとに戻す
}


// LINEのテキスト返信オブジェクトのラクラク作成function、引数としてLINEのユーザーIDとTalk APIからの返信
function replyText(userId, text){
  const returnText = glitchifyText(userId, text);
  return {type: 'text', text: returnText};
}

/* (略) */

    // handleEventの中のTalkAPIの返信を返すところのロジック
    smallTalk(userText)
      .then((smallTalkRes) => {
        return client.replyMessage(event.replyToken, replyText(userId, smallTalkResponse)); // replyText functionを使うようにした
      })

/* (略) */
  • これで話していくと徐々にLINE BOTが「壊れていく」様子が文字でわかるようになった。
(2-5) "モニター"機能の追加
  • モニター機能とは、通信先のBOTの可愛い姿を御尊顔できる機能である。
  • LineのMessaging APIにはFlexと呼ばれる返信するメッセージをかっこよくスタイリングできる物があるので、それでモニターっぽくする。
  • ユーザーが「モニター」と入力したら表示するようにする。
  • ちなみにBOTの画像に選んだのは以下のイラスト。なんか世界観とあっている気がした。もし迷惑でしたらこのLINE BOTからすぐに取り下げます。

alt

server.js
/* (略) */

  // handleEventの中、event.message.type === 'text'のif文の中
  if(userText === 'モニター'){
      return client.replyMessage(event.replyToken, {
        type: 'flex',
        altText: 'モニター',
        contents: {
          type: 'bubble',
          header: {
            type: 'box',
            layout: 'vertical',
            contents: [{
              type: 'text',
              text: 'モニター',
              weight: 'bold',
              align: 'center'
            }]
          },
          hero: {
            type: 'image',
            url: <画像URL httpsじゃないとあかんで>,
            size: 'full',
            aspectRatio: '1:1',
            aspectMode: 'cover'
          },
          footer: {
            type: 'box',
            layout: 'vertical',
            contents: [{
              type: 'text',
              text: 'Source: http://seiga.nicovideo.jp/seiga/im4937714?track=seiga_illust_keyword',
              color: '#aaaaaa',
              size: 'xxs'
            }]
          }
        }
      });
    }

/* (略) */
  • これで「モニター」と入力すると素晴らしいイラストが表示されるようになった。
(2-6) 壊れている様子を"モニター"で演出する
  • ユーザーのバグレベルによってイラストにノイズなどを表示する。
  • それを動的に行う方法はなかったので、すでに処理を行った画像を用意し、URLの配列を用意。もし画像の加工が禁止行為でしたらこのLINE BOTからすぐに取り下げます。先にお詫び申し上げます。
  • いつも同じだとつまらないので、それぞれのバグレベルの画像を3つほど用意する。つまり2次元配列となる。
  • この2次元配列からバグレベルに応じた画像をランダムに表示する。
server.js
/* (略) */

// バグレベルに応じた画像を格納した2次元配列
const glitchImageArray = [
  [url1, url2, url3], // バグレベル0の画像
  [url1, url2, url3], // バグレベル1の画像
  [url1, url2, url3], // バグレベル2の画像
 /* (略) */
  [url1, url2, url3], // バグレベル7の画像
  [url1, url2, url3], // バグレベル8の画像
  [url1, url2, url3]  // バグレベル9の画像
];

/* (略) */
(2-7) 最後のディテールをちょいちょい
  • LINE BOTを友人として追加したとき、もしくはブロック解除したときにメッセージを表示するようにする。
  • 「モニター」といちいち入力するのめんどいのでMessaging APIのquickReply機能を利用する。
    • quickReply機能は、LINEの下側にちょこっと選択肢が出てきて、選択したときに自動的にメッセージを入力してくれたり、位置情報を教えたり、リンク先に遷移したり、いろいろなことをユーザーに行わせることができる機能。
  • とりあえずquickReplyで「モニター」と入力させるボタンをすべてのメッセージに付加する。
server.js
/* (略) */

// [定義済み]
// LINEのテキスト返信オブジェクトのラクラク作成function、引数としてLINEのユーザーIDとTalk APIからの返信
// 追加機能としてquickReplyを追加
function replyText(userId, text){
  const returnText = glitchifyText(userId, text);
  return {
    type: 'text',
    text: returnText,
    quickReply: { // ここがquickReplyのコード
      items:[
        {
          type: 'action',
          action: {
            type: 'message',
            label: 'モニターを見る',
            text: 'モニター'
          }
        }
      ]
    }
  };
}

/* (略) */

  // HandleEventの中、event.message.type === 'text'のif文の前
  // LINE BOTを友人として追加したとき、もしくはブロック解除したときにメッセージを表示するようにする
  if(event.type === 'follow'){
    return client.replyMessage(event.replyToken, {
      type: 'text',
      text: <友達になってくれてありがとうメッセージ>
    });
  }

/* (略) */
  • これでちょっとユーザビリティ(?)があがった？

3. now.shでネットにデプロイ

(3-1) デプロイ前にすること
  • 最近(2018/11/9)now.shのバージョンが上がって、よくQiitaにみるデプロイ方法だとうまくいかないので注意。
  • 蒸気を回避するにはnow.jsonファイルを作成し、使用するversionを明記(これ大事)、またデプロイ時にURLが変わらないようにaliasの記載。now.shでのurlの雛形は<alias>.now.sh。
  • now.shでデプロイしたファイルらは公開されるのでLINE BOTやTalk APIで使用したキーをコードの中に生で記入するのではなく、nowの中に環境変数として登録し、それを参照するようにする。以下のリンク先にやり方が記載してあるので参照。
now.json
{
  "version": 1,
  "alias": <URLがalias.now.shとなります>
}
(3-2) デプロイ
  • これでnow -e 環境変数=@secret code...コマンドを実行すると環境変数の設定とともにdeployが開始される。
  • deployが終わったらnow aliasコマンドを実行すると、aliasのURLがちゃんと設定される。

完成したもの

ゲームではないですが、ネタバレっぽくなります?

友人として登録したとき
3804.jpg

初めてモニターで見るとき
3793-min.jpg

初めて会話するとき
3794-min.jpg

壊れてきたときのモニター
3798-min.jpg

壊れてきたときの会話
3800-min.jpg

完全に壊れたときのモニター
3802-min.jpg

完全に壊れたときの会話
3801-min.jpg

お友達に?

  • 以下のQRコードでともだちになってください!

1542888124713.jpg

github

イラストについて

使用したイラストはニコニコ静画の「星宮あき」さんのイラストです。

フリーアイコンとしてニコニコ静画に載っていますが、画像を加工したことや利用したことに関して問題があればすぐに取り下げます。

18
10
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
18
10