LoginSignup
2
2

More than 3 years have passed since last update.

<超初学者向け>「Talk API」を利用してチャットボットを作ってみませんか??【Ruby on Rails】

Posted at

◆この記事の対象者

☆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

①LINE Developersに登録、チャネルを作成


ここの説明は省略させてもらいます。以下に載せているURLから公式サイトのページに飛べます。これ確認しながら作業してください。チャネルの名前は何でも問題ありませんが、友達登録したときに表示される名前です。こだわりがなければ「チャットボット君」でいいと思います。。

ここまででチャネルの作成が完了していると思うので、引き続きチャネルの設定を変更していきます。

②チャネルアクセストークン(長期)発行

赤枠内のボタン通してアクセストークンを発行してください。
pic001.png
チャネルアクセストークンとは??となっている方は以下のページで確認してください。
https://developers.line.biz/ja/docs/messaging-api/channel-access-tokens/
つまりまとめると、「アプリからAPIを呼び出すための情報」です。

③応答設定の変更

次は応答設定を変更していきます。ひとまず何も考えず、画像の通り設定変更してください。
pic002.png
pic003.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

開発環境の構築

①AWSアカウントの作成

ここも公式サイトにまとめられているので、詳細はこちらで確認して作業をしてください。
https://aws.amazon.com/jp/register-flow/

②Cloud9で開発環境を作成


基本的にはデフォルトのままで問題ありませんが、プラットフォームのみ「Ubuntu Server 18.04 LTS」に変更してください。
pic009.png

次からはチャットボットを実装するため、コードを修正していきます。ここで作成した開発環境を利用して進めていってください。

◇チャットボットの開発

①PostgreSQL用パッケージのインストール

今回は無料利用枠で利用できるHerokuにデプロイするため、データベースはPostgreSQLを利用します。以下コマンドを実行してください。

bash
sudo apt install libpq-dev

②新規Railsプロジェクトの作成

以下コマンドでインストールするデータベースを指定してプロジェクトを作成してください。

bash
rails new <プロジェクト名> -d postgresql

③LINEBOT用のコントローラを作成

"②"の手順で作成したプロジェクトの階層に移動して、以下コマンドを実行してください。

bash
rails generate controller linebot

④Gemfileの修正

以下をGemfileの末尾に追加して、「bundle install」を実行してください。

Gemfile
gem 'line-bot-api'
gem 'dotenv-rails'
bash
bundle install

⑤ルーティング設定

対象のファイルに以下内容をコピペしてください。

config/routes.rb
Rails.application.routes.draw do
  post '/callback' => 'linebot#callback'
end

⑥コントローラ設定
対象のファイルに以下内容をコピペしてください。

app/controllers/linebot_controller.rb
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のインストール状態を確認します。インストールされていない場合はインストールしてください。

bash
git --version

②Gitの設定を追加

以下コマンドを実行して、Gitの設定を追加してください。

bash
git config --global user.name "ユーザ名"
git config --global user.email "メールアドレス"
git init

◇Herokuにアプリを作成する

⓪Herokuのアカウント作成

今回は作成したアプリをHerokuにデプロイします。まずは以下サイトからアカウントを作成してください。
https://id.heroku.com/login

①Herokuのインストール


以下コマンドでインストール状態を確認してください。
bash
heroku --version

インストールされていない場合は以下コマンドを実行して、再度インストール状態を確認してください。

bash
curl https://cli-assets.heroku.com/install-ubuntu.sh | sh

②Herokuにログイン

以下コマンドを実行して、ログインします。Herokuに登録した際のメールアドレスとパスワードを求められるので、入力してください。

bash
heroku login --interactive

③アプリ作成

以下コマンドを実行して、アプリを作成します。アプリケーション名は省略するとランダムな名前で作成されます。

bash
heroku create <アプリケーション名>

※ここでアプリのURLが作成されるので、控えておいてください。

◇チャネルの設定にアプリの情報を追加する

①先ほど控えたURLをチャネルの設定に追加

②callbackアクションを呼び出すため、URLの末尾に/callbackを追加

pic005.png

◇Herokuにデプロイ

①環境変数の追加

以下コマンドを実行して環境変数を追加します。

bash
heroku config:set LINE_CHANNEL_SECRET=チャネル設定画面で確認できるChannel Secret
heroku config:set LINE_CHANNEL_TOKEN=チャネル設定画面で確認できるアクセストークン
heroku config:set TALK_API_KEY=Talk APIの利用申請で取得したキー

②Herokuにデプロイ

以下コマンドを実行してHerokuにデプロイしてください。

bash
git add .  
git commit -m "linebot"
git push heroku master

◇動作確認してみよう

①友達追加
QRコードから作成したチャットボットを友達追加してください。
pic006.png

②動作確認
以下のようにメッセージに応じて返信が帰ってきたら成功です!!
pic007.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

最後に

最後まで見ていただき、ありがとうございます。気になる点などはコメントで指摘いただけるとありがたいです。

2
2
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
2
2