LINE Botを作ってみた【LINE BOT API】【ngrok】

LINE Bot APIを使って、簡単なLINE Botを作ってみます。

# 環境

macOS Monterey 12.4
Rails 6.1.6
ruby 3.1
ngrok 3.0.6

# LINE API側の設定

[LINE Buisiness IDの登録](https://www.linebiz.com/jp/signup)が必要です。
Messaging API Channel（所謂、公式アカウント）を作成して、自分のLINEに友だち追加しておきます。
チャンネルの設定は「LINE Official Account Manager」から変更できます。

# Railsアプリ側の設定

アプリを作成します。

```ruby
$ rails new SampleLineBot
```

Gemfileに使用したいgemを追加して、bundleコマンドでインストールする。

```ruby:Gemfile
gem 'line-bot-api'
```

```ruby
$ bundle
```

ルーティングを設定する。

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

Linebotコントローラーを新規作成。

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

  skip_before_action :verify_authenticity_token

  def callback
    body = request.body.read
    signature = request.env['HTTP_X_LINE_SIGNATURE']
    unless client.validate_signature(body, signature)
      error 400 do 'Bad Request' end
    end
    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
          message = {
            type: 'text',
            text: event.message['text']
          }
        end
      end
      client.reply_message(event['replyToken'], message)
    end
    head :ok
  end

  private

  def client
    @client ||= Line::Bot::Client.new { |config|
      config.channel_secret = 'XXXX' # シークレットキー
      config.channel_token = 'XXXX' # チャンネルアクセストークン
    }
  end
end
```

シークレットキーは、LINE Developers > Basic Settings > **Channel secret**
チャンネルアクセストークンは、LINE Developers > Messaging API > **Channel access token**
から取得できます。

# ngrokで外部公開する

LINE APIのWebhookに、RailsサーバーのURLを登録するにはhttps接続である必要があります。
ngrokを使えば、ローカルホストを外部公開してhttpsのURLを取得できます。

[ngrokのインストール](https://ngrok.com/download)と、[ngrokアカウントの作成](https://dashboard.ngrok.com/signup)が必要です。

インストールとアカウントが作成できたら以下のコマンドを実行してください。

```ruby
$ ngrok http 3000
```

黒い画面が表示されます。

転送先のURLは、Forwardingの右にあるのでコピーしておきましょう。

「Messaging API」のWebhook設定項目で先程取得したURLを入力。
URLの後ろには`/callback`というパスを付けて下さい。
![Screenshot 2022-07-02 19.23.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2499119/4e4ccea2-5747-b53b-eebf-d5d243bae826.png)

Verifyを押すと、エラーになります。403エラーですので、アクセス権の問題でしょうか。
![Screenshot 2022-07-02 19.28.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2499119/c3ed4abe-db85-20d2-cb5f-d232fb6a6b1f.png)

ブラウザでも確認してみます。Blocked host エラーと表示されます。
![Screenshot 2022-07-02 20.20.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2499119/9a794b4c-12f3-07f3-ef9c-7a6f440533ea.png)


# エラー対処

エラーメッセージをよく見てみると、ホストが設定されていないことが原因のようです。ngrokで取得したURLを、ホワイトリストに追加しましょう。

URLが「`https://5d8h-2400-2411-a2c1-3000-6846-12f2-5691-5579.jp.ngrok.io`」なら、
ホスト名は「`5d8h-2400-2411-a2c1-3000-6846-12f2-5691-5579.jp.ngrok.io`」です。

```ruby
config.hosts << "[ngrokで取得したURL]"
```

再度、Verifyを押してみると…
![Screenshot 2022-07-02 19.29.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2499119/033ebb33-4750-a2ef-7c9c-497ead34f782.png)
うまくいきました！

# 完成

簡単なBotができました。
LINEでメッセージを送ると、Botがオウム返ししてくれます。
![Screenshot 2022-07-02 19.30.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2499119/2b86980e-4a49-bdaa-66b1-7798e3cf62cd.png)


# 参考

[LINE Messaging API SDK for Ruby](https://github.com/line/line-bot-sdk-ruby)
[RailsとDockerでLINE BOTを作ってみた](https://momozo.tech/2021/12/04/rails%E3%81%A8docker%E3%81%A7line-bot%E3%82%92%E4%BD%9C%E3%81%A3%E3%81%A6%E3%81%BF%E3%81%9F/)
[ngrokが便利すぎる](https://qiita.com/mininobu/items/b45dbc70faedf30f484e)