youthtech-chatbot

これは20180808に行うyouthtechのチャットボットハンズオンで作るbotのサンプルです。

作成手順

1. Node.jsのインストール

MacOS

nvmを使ってインストールしていきます。

gitがインストールされているか確認

git -version

※ gitコマンドがインストールされてない方は、
こちら→http://www.tettori.net/post/1491/
2. gitを用いてnvmをインストール

git clone https://github.com/creationix/nvm.git ~/.nvm

nvmを有効にする

source ~/.nvm/nvm.sh

これによってnvmコマンドが使えるようになる

念のためインストールされているか確認

nvm --version

問題なければ、 0.33.11 などが表示されます。

node.jsをインストール

nvm install v8.11.3

node.jsのバージョン確認

nvm ls; node -v

参考：http://www.tettori.net/post/1495/

2. LINE Developersのアカウント作成(今回はすべて無料枠で作成します。クレカ情報などもいりません。)

以下のサイトでLINE Botのアカウントを作成します。
https://developers.line.me/ja/services/messaging-api/

新規プロバイダーの作成「新規プロバイダーを作成」ボタンを押し、
画面の指示に従ってプロバイダーの作成を行います。
新規チャネル作成 LINE Botのアカウントを作成します。

アプリアイコン画像、アプリ名、アプリ説明を記入してください。
プラン：「Developer Trial」にします。
大業種、小業種：自由にご記入ください。
メールアドレス：連絡の取れるアドレスを記入します。

「入力内容を確認する」 → 「同意する」 → 「作成」の順に進みます。

BotのLINEアカウントが完成です！！
Bot一覧に移動するので、自分が作成したBotを選択します。

一通りのLINE Botの情報が出てくるので、なんとなく目を通してみてください。

まずは、「QRコード」を自分のスマホで読み取り、LINEで作ったアカウントと
友達になりましょう！
　

3. Botのアクセストークン覚える

このままだと、ひたすら同じ応答のみを行うBotになります。

ここからは、設定を少しずつ変えていきます。

先ほどの「チャネル基本設定」で、各種設定を変更します。

LINE@機能の利用

自動応答メッセージ
友だち追加時あいさつ
を「編集」ボタンから「利用しない」に変更します。

メッセージ送受信設定

アクセストークン
「再発行」ボタンより再発行します。失効期間が質問されますが、気にしなくて大丈夫です。

ここで出てきた、

アクセストークン
Channel Secret は後ほど利用するので、メモしておいてください。

4. herokuのアカウント作成

下記サイトより、Herokuアカウントを作成します。
https://jp.heroku.com/

Herokuとは PaaSと呼ばれるクラウドサービスで、個人利用でもほとんどの機能が無料で使えるため、
手軽なアプリや個人開発でよく使われています。

右上の「新規登録」ボタンより新規登録を行います。名前などを入力しましょう。言語が聞かれた場合は、「Node.js」を選択してください。
アプリを作成するアカウントができたら、アプリを作ります。
右上より、「new」 → 「create new app」の順に進みます。

app name・・・アプリの名前を入れてください。
region・・・「アメリカ」か「イギリス」です。どちらでも大丈夫です。
pipe line・・・無視してください。

これでHerokuアプリの土台ができました。

5. アクセストークン記入(YOUR_CHANNEL_ACCESS_TOKEN, YOUR_CHANNEL_SECRET)

先ほど、覚えて置いた

アクセストークン
Channel Secret
を利用して、herokuアプリとLINE Botの接続ができるようにします。

Herokuの「Settings」タブを押し、「Config Vars」の欄の
「Reveal Config Vars」を押します。
KEYとVALUEが出るので、それぞれ以下のように記入します。

KEY：（YOUR_CHANNEL_ACCESS_TOKEN）、VALUE：(あなたのLINE BOTのアクセストークン)
KEY：(YOUR_CHANNEL_SECRET)、VALUE：(あなたのLINE BOTのChannel Secret)

では、最後にコードを実際にデプロイしていきます。

6. コードのデプロイ

下記サイトから、コードをcloneしてきます。
※今回はあらかじめ作成したサンプルコードを使います。コードの内容は後ほどご説明します。
ターミナル(コマンドプロンプト)を開き、以下を記載していきます。

cd ~
mkdir bot-handson
cd bot-handson
git clone https://github.com/daitasu/youthtech-chatbot.git

ローカルPCでコードの確認ができたら、Herokuへのデプロイを行います。
Herokuの「Settings」より、「Info」→「Heroku Git URL」を確認します。
ターミナル(コマンドプロンプト)で以下のように入力します。

git push <あなたのHerokuのGit URL>

これでコードのデプロイが完了しました。

Herokuの画面右上、「More」 → 「View logs」より Node app is running -> port: XXXXX
が出ていればOKです。

最後に、LINE BOTに設定を追加します。

7. Webhookの設定

LINEから届いたメッセージをHerokuアプリに飛ばす設定です。
「LINE Developers」(https://developers.line.me/console/channel/)を開き、
先ほどのBotの設定画面に移動します。

メッセージ送受信設定

Webhook送信
「編集」 → 「利用する」にします。
Webhook URL ※SSLのみ対応
Herokuの「Settings」 → 「Domains and certificates」にある
https://xxxxxxxxxxxx.herokuapp.com/
をコピーして、貼り付けます。

いま「接続確認」をすると、エラーになりますが気にしなくて大丈夫です。
先ほど同様に「More」→「View logs」をみます。

message: { id: '100002', type: 'sticker', packageId: '1', stickerId: '1' } }

のようなlogが出ていれば接続は成功しています。

これで、Botが完成です！！

実際に、LINEからBotにメッセージを送ってみてください。

※このコードですと、テキストメッセージ以外は反応しません

時間が余ったら

時間の余った方は、

    return client.replyMessage(event.replyToken, {
        type: 'text',
        text: event.message.text
    });

のjson部分をこちらを参考に色々と書き換えてみてください。テキストの他にも、

スタンプ
画像
音声
位置情報
動画
イメージマップなど様々なメッセージを返すことが可能です。 https://developers.line.me/ja/reference/messaging-api/#send-reply-message

参考Bot紹介

https://www.youtube.com/watch?v=GtoD5xeQ4ws

LINE Botは年々新しい機能が追加されています。

LIFF(2018/6/6)
Flex Message(2018/6/12)
Clova Extensions Kit(2018/7/12)
クイックリプライ(2018/7/31)

簡単にサービスが作れ、新しい機能も多いため、誰でも平等に挑戦できるのが
いいところです。ぜひぜひいろんなBotをつくってみてください。

daitasu / youthtech-chatbot Goto Github PK