Help us understand the problem. What is going on with this article?

【Rails】1時間ぐらいで簡単にLINEのBot開発をしよう-アンケート集計Bot基礎-【画像付き】

概要

勉強会を開くにあたってLINEで動作するBot開発を題材にあげました。
今回はアンケート機能をもつLINEのBotを開発に挑戦しましたので、LINE側の設定、Bot本体の開発(Rails)、Herokuへのデプロイ方法を記します

所要時間

スムーズにいけば30分程です。
Railsはある程度知ってるけどLINEbotは初めてという方は、おおよそ1時間〜1時間半ぐらいかかると想定しています。

【追記】
大変ありがたいことに、この記事を参考にしながら作成してみたとの報告がありました。
Heroku上のエラー解決に悩み、2時間ほどかかってしまったとのことです。
Railsアプリが上手く動かない場合、下記Heroku動作ログの確認コマンドを叩いて、エラー内容を確認しましょう。

$ heroku logs --tail

必要事項

  • Rubyの知識 if文の記述方法が分かるぐらい。
  • Railsの知識 gemを使うことが出来るくらい。
  • Herokuのアカウントを作成済みでHeroku CLIが開発PCにインストール済み

 念の為、Heroku CLIのインストール方法も記載しました!

目次

  • Botアカウントを作成します。 LINE DevelopersコンソールというWebサイトで「Channel」を作成します。 「Channel」にはBotの設定が入ります
  • Bot本体のプログラムを開発します。 開発言語はRuby/Railsを使用します。
  • BotのChannelの設定でWebhookを設定し、Botに送信されたメッセージなどを含むイベントがBotのインスタンスに転送されるようにします。

※今回はここまで

次回からは、Bot本体のプログラムをカスタマイズし、デプロイする作業を繰り返し、Botを拡張していきます。

LINE DevelopersからChannelを作成する

LINE Developer にアクセスし、ログインボタンをクリックして自身のLINEアカウントでログインします。
スクリーンショット 2019-07-14 21.28.49.png

ログインにて「メールアドレス」と「パスワード」または「QRコード」を求められた際には必要事項を入力してログインして下さい。

初めてログインした際には開発者登録を求められますので、必要事項を入力して「確認画面へ進む」を押して下さい。

スクリーンショット 2019-07-14 21.29.32.png
スクリーンショット 2019-07-14 21.30.09.png

「この内容で作成する」を押してください。
スクリーンショット 2019-07-14 21.30.31.png

「新規プロバイダー作成」を押して下さい。
プロバイダーとはこれから作成するBotの情報です。
スクリーンショット 2019-07-14 21.30.42.png

プロバイダー名を入力して「確認する」を押して下さい。
プロバイダー名はBotの提供元の名前になります。
スクリーンショット 2019-07-14 21.31.15.png

プロバイダー名に間違えがなければ「作成する」を押して下さい。
スクリーンショット 2019-07-14 21.31.53.png

Messaging APIを選択してください。
スクリーンショット 2019-07-14 21.32.31.png

この画面に必要事項を入力します。

  • アプリ名: 任意のアプリ名
  • アプリ説明: 任意のアプリ説明
  • 大業種: 作成するBotに合わせて選択
  • 小業種: 〃
  • メールアドレス: 自分のメールアドレス

スクリーンショット 2019-07-14 21.34.44.png
スクリーンショット 2019-07-14 21.37.05.png
スクリーンショット 2019-07-14 21.37.28.png

先程作成したChannelを選択する。
スクリーンショット 2019-07-14 21.44.18.png

ページの中間ほどまでスクロールし、アクセストークンを再発行する。
スクリーンショット 2019-07-14 21.45.00.png

ここはそのまま再発行ボタンを押す。
スクリーンショット 2019-07-14 21.45.26.png

アクセストークンが発行されます。このトークンはMessaging APIの呼び出し時に必要になります。
メッセージ送受信設定の設定をします。
Webhook送信: 利用する
スクリーンショット 2019-07-14 21.49.21.png

応答の設定をします。

  • 応答メッセージ:オフ
  • Webhook:オン

(この応答メッセージとは、LINE側で設定する返答集みたいなもの。今回Webhookで応答させたいため、これをオフにする)

スクリーンショット 2019-07-14 23.25.13.png

Bot本体(Rails)を開発する

  • 今回作成するBotのアプリを作成します。app-nameには任意の名前を入れて下さい。
  • DBはPostgreSQLを使用します。
  • 【注意】rails newするときに-d postgresql を付けずに進めると、heroku上でsqlliteが使えないと出力され、やり直しの原因になります。
$ rails new app-name -d postgresql  

Gemfileに以下のgemを追加します。

gem 'line-bot-api'
gem 'dotenv-rails'
$ bundle install

Linebot用ルーティングを設定します。
(入力されたら/callbackで受け取って、linebotコントローラーのcallbackアクションを呼び出す)

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

Linebot用コントーラを作成します。

$ rails g controller linebot  

今回は、ユーザーアクションという言葉をBotに送ったら、二択のアンケートを返信するという形式で、callbackアクションの中身を作成します。
確認テンプレートというものを使用します。
確認テンプレートを使うと、ボタンが2つ含まれたメッセージを送ることが出来ます。
スクリーンショット 2019-07-15 13.34.15.png

確認テンプレートの実装方法は、公式のAPIリファレンスにあります。
スクリーンショット 2019-07-15 11.42.49.png

それでは、controllerに実装しましょう。

app/controllers/linebot_controller.rb
class LinebotController < ApplicationController
  require 'line/bot'

  protect_from_forgery :except => [:callback]

  def client
    @client ||= Line::Bot::Client.new { |config|
      config.channel_secret = ENV["LINE_CHANNEL_SECRET"]
      config.channel_token = ENV["LINE_CHANNEL_TOKEN"]
    }
  end

  def callback
    body = request.body.read

    signature = request.env['HTTP_X_LINE_SIGNATURE']
    unless client.validate_signature(body, signature)
      head :bad_request
    end

    events = client.parse_events_from(body)

    events.each { |event|
      case event
      when Line::Bot::Event::Message
        case event.type
        when Line::Bot::Event::MessageType::Text
          # LINEから送られてきたメッセージが「アンケート」と一致するかチェック
          if event.message['text'].eql?('アンケート')
            # private内のtemplateメソッドを呼び出します。
            client.reply_message(event['replyToken'], template)
          end
        end
      end
    }

    head :ok
  end

  private

  def template
    {
      "type": "template",
      "altText": "this is a confirm template",
      "template": {
          "type": "confirm",
          "text": "今日のもくもく会は楽しいですか?",
          "actions": [
              {
                "type": "message",
                # Botから送られてきたメッセージに表示される文字列です。
                "label": "楽しい",
                # ボタンを押した時にBotに送られる文字列です。
                "text": "楽しい"
              },
              {
                "type": "message",
                "label": "楽しくない",
                "text": "楽しくない"
              }
          ]
      }
    }
  end
end

Herokuにデプロイする

$ brew tap heroku/brew && brew install heroku
  • Herokuにログインします。(Botアプリを作成したディレクトリ内で行って下さい。)
$ heroku login  
  • Heroku上にアプリを作成します。
$ heroku create

Line DeveloperにWebhook URLを設定する

Line Developerにログインします。
既にログイン済みでしたら右上のアイコンをクリックして下さい。

スクリーンショット 2019-07-15 16.19.50.png

プロバイダーリストを選択して下さい

スクリーンショット 2019-07-15 16.20.00.png

右画面内のプロバイダーリストから、最初に作成したプロバイダー名を選択して下さい。

スクリーンショット 2019-07-15 16.20.15.png

先程作成したChannelを選択して下さい。

スクリーンショット 2019-07-15 16.20.32.png

画面の中間ほどまでスクロールして下さい。

スクリーンショット 2019-07-15 16.21.22.png

Channel Secretは後ほどHerokuの設定で使用するので、メモしておいて下さい。

スクリーンショット 2019-07-15 16.21.40.png

アクセストークンも同様に使用しますので、メモしておいて下さい。
Webhook URLを設定するため、編集ボタンを押して下さい。

スクリーンショット 2019-07-15 16.21.58.png

先程作成したHerokuアプリのURLを設定し、更新ボタンを押して下さい。
末尾に/callbackを入れます。(入力されたら/callbackで受け取って、linebotコントローラーのcallbackアクションを呼び出すためです)

スクリーンショット 2019-07-15 16.22.37.png

※ここまででWebhook URLの設定は完了ですが、こちらの画面でもWebhook URLを設定することが出来ます。
スクリーンショット 2019-07-15 11.30.37.png

Heroku側に環境変数を設定する

先程メモしておいたChannel Secretアクセストークンを設定します。

$ heroku config:set LINE_CHANNEL_SECRET=ここに先程メモしたChannel Secretを貼り付ける
$ heroku config:set LINE_CHANNEL_TOKEN=ここに先程メモしたアクセストークンを貼り付ける

デプロイ

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

動作チェック

  • 先程Webhook URLを設定したり、Channel Secretやアクセストークンをメモした、基本情報ページ内の下側へスクロールするとBotのQRコードLineIDがあります。
    そのQRコード読み取りるか、IDを検索して作成したLineBotを友達に追加します。

  • Botにアンケートとメッセージを送り、確認テンプレートが返ってくれば成功です。お疲れ様でした。
    fullsizeoutput_40.jpeg

  • Railsアプリが上手く動かない場合、下記Heroku動作ログの確認コマンドを叩いて、エラー内容を確認しましょう。

$ heroku logs --tail

最後に

今回はHerokuへデプロイしましたが、このままだと機能追加するたびにHerokuへデプロイしなくてはいけませんので、開発効率が良くありません。
ローカル環境で動かしたりデバッグする方法を紹介して下さっている記事がございますので、余裕があれば是非取り入れてみて下さい。
https://qiita.com/TakeshiFukushima/items/aec362407f1ee2f455a9

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away