Ruby, Sinatra, HerokuでLINE Botを動かしてみた

RubyでLINE Botを動かすための方法です
## 環境, ライブラリ
- Windows10
- Visual Studio Code
- Ruby(3.1.1)
- Sinatra
- Heroku
- LINE Message API

## ファイル構成
- Gemfile
- Gemfile.lock
- Procfile
- app.rb
- config.ru

## 前提
Ruby、Gitのインストールが完了していることが前提です。

## [手順1] ボット用のチャネルを作成する
LINE Developersコンソールでボット用のチャネルを作成します。

#### 1. LINE Developersコンソールにログインする
[**LINE Developersサイト**](https://developers.line.biz/ja/) の右上の[**ログイン**]をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2549439/4d813a47-4b14-6b52-a2f2-c6d805f2f741.png)

次の画面で、[**LINEアカウントでログイン**]または[**ビジネスアカウントでログイン**]をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2549439/c4c1bb38-2878-3df6-0042-3afe21e0e5bb.png)

https://developers.line.biz/ja/docs/line-developers-console/login-account/

LINE Developersコンソールに初めてログインしたときは、名前とメールアドレスを入力して開発者アカウントを作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2549439/afeec1df-4671-a05a-ca19-9ed41184383b.png)

#### 2. 新規プロバイダーを作成する
ホーム画面の[**新規プロバイダー作成**]をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2549439/8cd98254-2bdf-d7c9-f4b6-d25a1da136fb.png)

[**新規プロバイダー作成**]画面で任意の[**プロバイダー名**]を入力し、[**作成**]をクリックします。
自分の名前や企業名で大丈夫です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2549439/61ddbf60-c89e-0129-0c54-3b5ef1e75f4d.png)

#### 3. チャネルを作成する
作成したプロバイダーページで、[**チャネル設定**]タブの[**Message API**]をクリックします.
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2549439/92e51b13-9681-863e-b2de-442a06ce61ac.png)

チャネルに必要な情報を入力していきます。「LINE」またはそれに類する文字列をチャネル名に含めることはできません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2549439/ac4b5b02-2102-c069-31e0-4e107498b44c.png)

最後にチャネルが作成されたことを確認して、アカウントの作成は終了です。

https://developers.line.biz/ja/docs/messaging-api/getting-started/

## [手順2] Herokuアカウントを作成する
[Herokuアカウント](https://signup.heroku.com/) を作成します(作成は無料です)。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2549439/dc58e659-23d0-cc93-6f04-44d96818cd39.png)

次に、[Herokuをインストール](https://devcenter.heroku.com/ja/articles/heroku-cli) します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2549439/5be641a4-a518-ec50-1256-fb90d2334cb7.png)


## [手順3] ファイルを作成する
※手順3はVScode上で操作しています。

ファイル構成は次のとおりです。
- Gemfile
- Gemfile.lock
- Procfile
- app.rb
- config.ru

これらのファイルを入れておく適当なフォルダを用意してください。

**Gemfile**
```ruby:Gemfile
source "https://rubygems.org"
gem "sinatra"
gem 'puma'
```

次に**Gemfile.lock**を作ります。中身は空で大丈夫です。

ファイルを作成したら、`$ bundle install`でインストールします。(ターミナル上)

**Procfile**
```ruby:Procfile
web: bundle exec rackup config.ru -p $PORT
```

**config.ru**
```ruby:config.ru
require './app.rb'

run Sinatra::Application
```

**app.rb**
```ruby:app.rb
require 'bundler/setup'
require 'sinatra'

get '/' do
  'hello world!'
end
```

ここまでできたらデプロイしていきます。
この先はターミナル上に入力します。
Herokuにログインするために、`$ heroku login`を入力します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2549439/d63f12c6-c868-aee8-fd66-83a480dd751e.png)
上の画像のように出たら、指示通りキーを押します。ブラウザでHerokuが開き、ログイン画面になるのでログインします。

再びターミナル上に戻ってきて次を入力します。`{HEROKU_APP_NAME}`は好きなアプリ名を入力します。このアプリ名はどこかにメモしておきます。
```bash
$ heroku create {HEROKU_APP_NAME}
$ git init
$ heroku git:remote -a {HEROKU_APP_NAME}
$ git add .
$ git commit -m "first commit"
$ git push heroku master
$ heroku open
```

デプロイでエラーが出なければ、`https://アプリ名.herokuapp.com/`にアクセスしたときに「hello world!｣と出ています。(`heroku open`でこのURLがブラウザで開きます)

## [手順4] サンプルボットを動かしてみる
LINE Botの[LINE Message API SDK for Ruby](https://github.com/line/line-bot-sdk-ruby) の[echoボット](https://github.com/line/line-bot-sdk-ruby/blob/master/examples/echobot/app.rb) のサンプルコードをコピーします。

コピーしたものをapp.rbの下に貼り付けます。貼り付けて整えたコードがこちらです。
```ruby:app.rb
require 'bundler/setup'
require 'sinatra'
require 'line/bot'

get '/' do
  'hello world!'
end

def client
    @client ||= Line::Bot::Client.new { |config|
      config.channel_secret = ENV["LINE_CHANNEL_SECRET"]
      config.channel_token = ENV["LINE_CHANNEL_TOKEN"]
    }
end
  
post '/callback' do
    body = request.body.read
  
    signature = request.env['HTTP_X_LINE_SIGNATURE']
    unless client.validate_signature(body, signature)
      halt 400, {'Content-Type' => 'text/plain'}, 'Bad Request'
    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']
            }
            client.reply_message(event['replyToken'], message)
            end
        end
    end
  
    "OK"
end
```

**Gemfile**に`gem 'line-bot-api'`を加えます。

#### LINE Developersコンソール
LINE Developersコーンソールのチャネルページの[**チャネル基本設定**]の**チャネルシークレット**と[**Message API設定**]の**チャネルアクセストークン**を確認します。**チャネルアクセストークン**がない場合は[**発行**]をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2549439/b37f9bd2-4772-93c2-32c1-7f7b0c07fba6.png)

[**Message API設定**]の**Webhook設定**に`https://{HEROKU_APP_NAME}.herokuapp.com/callback`を入力し(アプリ名はHerokuで作ったアプリ名)、[有効]にします。応答メッセージとあいさつメッセージは[無効]にしておきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2549439/5987a342-721e-8196-e3a6-25aed7de4815.png)


#### Heroku
ブラウザでHerokuのダッシュボードを開いて、先ほど作ったHerokuのアプリをクリックします。
[**setting**] => Config Varsの[**Reveal Config Vars**]をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2549439/e74c64d2-18d2-e566-4d44-49d6d5ff4db6.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2549439/9774b72b-a848-2087-d150-99854ec2da97.png)

1. [**KEY**]に**app.rb**の`LINE_CHANNEL_SECRET`を、[**VALUE**]に**チャネルシークレット**を入力します
2. [**KEY**]に**app.rb**の`LINE_CHANNEL_TOKEN`を、[**VALUE**]に**チャネルアクセストークン**を入力します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2549439/430f96c2-cfc8-2a4e-fa0e-98164181bcc6.png)

ターミナルに戻り、Herokuにプッシュします。
```bash
$ git add .
$ git commit -m "Update"
$ git push heroku master
```

LINE DevelopersコンソールのMessage API設定のWebhookの[**検証**]をクリックして成功すれば、LINEチャンネルのQRコードをLINEアプリの友だち追加で読み取って友だち追加します。

実際に動かしてみます。

#### LINE画面
オウム返しするLINE Botです。

![20220324_172728.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2549439/5a31013e-929d-35bd-bde5-4c41d17b0215.png)

このあとは、サンプルコードを変えて自分の好きなLINE Botにしていきます！

### うまく動作しない場合
LINE Botがうまく動かない場合は、`$ heroku logs --tail --app {HEROKU_APP_NAME}`でHerokuのログを確認します。

## 参考サイト
https://developers.line.biz/ja/docs/messaging-api/getting-started/

https://developers.line.biz/ja/docs/messaging-api/building-sample-bot-with-heroku/#deploy-the-kitchensink-sample-bot-app

https://github.com/line/line-bot-sdk-ruby

https://www.codit.work/notes/c76ucb71hq864g6ysiz3/