◆この記事の対象者
☆Rails on Railsを学び始めた初学者
☆ハンズオン形式でLINEBOTを作成してみたい方
☆WEBシステム開発に挫折してしまった方(※フロントエンド側の挫折)
◆はじめに
こんにちは!タイトルの通り、チャットボットを開発したので、その過程を記載しています。 この記事を投稿する経緯にもつながりますが、昔の僕はProgateを1周して、さっそくWEB開発を進めていこうとやる気に満ちていました。しかし、必然であったかのように挫折します。原因は、「フロントエンド側まで手が回らない」でした。 バックエンドのプログラミング言語を学ぶ目的で、Ruby、Railsの基礎を学び、理解度を深めるために何か作ってみようぐらいの気持ちなのに、そこに新たに「フロントエンド」という壁が生まれるのはしんどかったです。Bootstrapを利用して極力手抜きにしようと思いましたが、僕はそれにすら耐えられない、ゆとり世代なんです。 一度挫折して、心を入れ替えて再挑戦しましたが、2度目の挫折を味わいました、、、そんな時に目を付けたのがLINEBOTです。「LINEBOTの開発はフロントエンドを意識する必要がないし、LINEのアプリで成果をすぐに確認できる点も、何かやった気になりたい僕にはぴったりじゃん!!」と思いましたw
この記事は、「とりあえずこの記事と同じ環境で同じ作業をすると誰でも成果物の作成ができますよ!」という点に特化しています。
それなので技術的な内容の説明は薄いです。(そもそも僕も初学者なので、詳しい説明はできないです。)
フロントエンドがネックでWEB開発に挫折してしまった方にこの記事を読んでもらいたいです。一緒にチャットボットを作ってみませんか??
◆前提条件
以下に記載していることを前提に記事を作成しています。
・AWSに登録できること(クレジットカード情報の登録が必須になります。) ※僕がCloud9を使用していたので前提条件にしました。ローカルに開発環境を利用しても問題ありませんが、初学者に環境問題のエラーで苦しんでほしくないので、Cloud9を利用することをお勧めします。◆作業手順
◇LINE Developersに登録してLINE BOT用のチャネルを作成する
![pic008.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704750/82642576-aea9-086f-d0fb-d2110c231610.png)①LINE Developersに登録、チャネルを作成
ここの説明は省略させてもらいます。以下に載せているURLから公式サイトのページに飛べます。これ確認しながら作業してください。チャネルの名前は何でも問題ありませんが、友達登録したときに表示される名前です。こだわりがなければ「チャットボット君」でいいと思います。。 https://developers.line.biz/ja/docs/messaging-api/getting-started/#using-consoleここまででチャネルの作成が完了していると思うので、引き続きチャネルの設定を変更していきます。
②チャネルアクセストークン(長期)発行
赤枠内のボタン通してアクセストークンを発行してください。 ![pic001.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704750/5102b1cb-0391-776a-724e-ac2fc5e99bd1.png) チャネルアクセストークンとは??となっている方は以下のページで確認してください。 https://developers.line.biz/ja/docs/messaging-api/channel-access-tokens/ つまりまとめると、「アプリからAPIを呼び出すための情報」です。③応答設定の変更
次は応答設定を変更していきます。ひとまず何も考えず、画像の通り設定変更してください。 ![pic002.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704750/732bd168-ea71-69d6-4141-279c699135de.png) ![pic003.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704750/a6f3c8ec-4b72-5e37-1813-53409498297c.png) Webhookとは??という好奇心旺盛な方はこの記事を読んでみてください。「子供でも分かる」というのが大げさでないくらい、丁寧に教えてもらえます。 https://kintone-blog.cybozu.co.jp/developer/000283.html◇「Talk API」のAPIキーを取得する
タイトルにある通り、株式会社リクルートテクノロジーズさんが開発した「Talk API」というAPIを利用してチャットボットを開発しています。オウム返しやアンケートBOTでもよかったのですが、APIを利用してみたい!!という初学者である僕なりの目線でチャットボットにしました。①公式サイトにアクセスしてAPIキー発行
APIを使用するにはAPIキーというものが必要になります。今回はメールアドレスの登録のみでキーが取得できます。 以下の公式サイトから特に詰まることなく取得できると思うので、取得してみてください。 https://a3rt.recruit-tech.co.jp/product/talkAPI/ ![pic004.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704750/88c5d1e5-304b-36ab-d586-d04f3d8718ac.png)開発環境の構築
①AWSアカウントの作成
ここも公式サイトにまとめられているので、詳細はこちらで確認して作業をしてください。 https://aws.amazon.com/jp/register-flow/②Cloud9で開発環境を作成
基本的にはデフォルトのままで問題ありませんが、プラットフォームのみ「Ubuntu Server 18.04 LTS」に変更してください。 ![pic009.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704750/1d2dfcb1-3d3d-654d-1971-a2a85fdd3a6b.png)次からはチャットボットを実装するため、コードを修正していきます。ここで作成した開発環境を利用して進めていってください。
◇チャットボットの開発
①PostgreSQL用パッケージのインストール
今回は無料利用枠で利用できるHerokuにデプロイするため、データベースはPostgreSQLを利用します。以下コマンドを実行してください。sudo apt install libpq-dev
②新規Railsプロジェクトの作成
以下コマンドでインストールするデータベースを指定してプロジェクトを作成してください。rails new <プロジェクト名> -d postgresql
③LINEBOT用のコントローラを作成
"②"の手順で作成したプロジェクトの階層に移動して、以下コマンドを実行してください。rails generate controller linebot
④Gemfileの修正
以下をGemfileの末尾に追加して、「bundle install」を実行してください。gem 'line-bot-api'
gem 'dotenv-rails'
bundle install
⑤ルーティング設定
対象のファイルに以下内容をコピペしてください。Rails.application.routes.draw do
post '/callback' => 'linebot#callback'
end
⑥コントローラ設定
対象のファイルに以下内容をコピペしてください。
class LinebotController < ApplicationController
require 'line/bot'
protect_from_forgery except: [:callback]
def client
@client ||= Line::Bot::Client.new do |config|
config.channel_secret = ENV['LINE_CHANNEL_SECRET']
config.channel_token = ENV['LINE_CHANNEL_TOKEN']
end
end
def callback
body = request.body.read
signature = request.env['HTTP_X_LINE_SIGNATURE']
head :bad_request unless client.validate_signature(body, signature)
events = client.parse_events_from(body)
events.each do |event|
case event
when Line::Bot::Event::Message
case event.type
when Line::Bot::Event::MessageType::Text
require 'net/http'
require 'uri'
require 'json'
key = ENV['TALK_API_KEY']
uri = 'https://api.a3rt.recruit-tech.co.jp/talk/v1/smalltalk'
params = { apikey: key, query: event.message['text'] }
uri = URI.parse(uri)
response = Net::HTTP.post_form(uri, params)
data = JSON.parse(response.body)
message = {
type: 'text',
text: data['results'][0]['reply']
}
client.reply_message(event['replyToken'], message)
end
end
end
head :ok
end
end
◇Gitのセットアップをする
①インストール状態の確認
以下コマンドを実行して、Gitのインストール状態を確認します。インストールされていない場合はインストールしてください。git --version
②Gitの設定を追加
以下コマンドを実行して、Gitの設定を追加してください。git config --global user.name "ユーザ名"
git config --global user.email "メールアドレス"
git init
◇Herokuにアプリを作成する
⓪Herokuのアカウント作成
今回は作成したアプリをHerokuにデプロイします。まずは以下サイトからアカウントを作成してください。 https://id.heroku.com/login①Herokuのインストール
以下コマンドでインストール状態を確認してください。heroku --version
インストールされていない場合は以下コマンドを実行して、再度インストール状態を確認してください。
curl https://cli-assets.heroku.com/install-ubuntu.sh | sh
②Herokuにログイン
以下コマンドを実行して、ログインします。Herokuに登録した際のメールアドレスとパスワードを求められるので、入力してください。heroku login --interactive
③アプリ作成
以下コマンドを実行して、アプリを作成します。アプリケーション名は省略するとランダムな名前で作成されます。heroku create <アプリケーション名>
※ここでアプリのURLが作成されるので、控えておいてください。
◇チャネルの設定にアプリの情報を追加する
①先ほど控えたURLをチャネルの設定に追加
②callbackアクションを呼び出すため、URLの末尾に/callbackを追加
![pic005.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704750/da882031-a629-50ec-6b62-40be2ae79d35.png)◇Herokuにデプロイ
①環境変数の追加
以下コマンドを実行して環境変数を追加します。heroku config:set LINE_CHANNEL_SECRET=チャネル設定画面で確認できるChannel Secret
heroku config:set LINE_CHANNEL_TOKEN=チャネル設定画面で確認できるアクセストークン
heroku config:set TALK_API_KEY=Talk APIの利用申請で取得したキー
②Herokuにデプロイ
以下コマンドを実行してHerokuにデプロイしてください。git add .
git commit -m "linebot"
git push heroku master
◇動作確認してみよう
①友達追加 QRコードから作成したチャットボットを友達追加してください。 ![pic006.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704750/9bf9f5c7-dfce-d58e-4907-3ead2973cc81.png)②動作確認
以下のようにメッセージに応じて返信が帰ってきたら成功です!!
◆参考にした記事
僕がLINEBOTを作成していた時に、とても有益な情報となった記事や資料を紹介します。□【Rails】1時間ぐらいで簡単にLINEのBot開発をしよう-アンケート集計Bot基礎-【画像付き】
https://qiita.com/noriya1217/items/00d6461e9f54900377a3
□LINE Messaging API SDKリポジトリ(Ruby)
https://github.com/line/line-bot-sdk-ruby
□RubyのHTTPリクエストをできるだけシンプルに実装する
https://qiita.com/takano-h/items/dd10818eb7e09161bc29