かんたんLINE botをつくろう！【Rails編】

# はじめに

前回記事はこちら

https://qiita.com/kohki_takatama/items/e19960e479a712d63408

1. LINE botをつくろう！ノーコード編
2. LINE botをつくろう！Rails編 👈今ココ
3. あれって、何してたの？会（イベント内のみで、2次会的に開催）

[【個人開発】通勤時にQiitaのトレンド記事が届くLINE Botを開発した #Ruby - Qiita](https://qiita.com/KNR109/items/e1b5ebd94393441fff74)
こちらの記事を大きく参考にさせていただきました！ありがとうございます！
# 2. LINE botをつくろう！Rails編

ここからはアドバンスな内容です。

# 2-1. ngrok の設定

LINE botのテストに必要な、ngrokというサービスのアカウントを作成します。
簡単に言うと、ローカルな（自分の手元の）プログラミングコードに外部からアクセスできるようにするサービスです。

## 2-1-1. ngrokにアクセス

https://ngrok.com/

![スクリーンショット 2024-03-19 9.35.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/3c8ff916-1006-90be-ec8e-5e28f8842d9a.png)

初めての方は「Sign up」を、
すでにアカウントを持っている方は「Log in」を押し、アカウントを作成しましょう。

## 2-2-2. Authtokenをコピペ

Authtoken（アカウント認証用のトークン）をコピペします。

サイドバーの「Your Authtoken」をクリック

![スクリーンショット 2024-03-19 9.40.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/4b930656-0359-51cc-1841-04c917ac6c20.png)

一番上の「Copy」をクリック

![スクリーンショット 2024-03-19 9.44.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/d3194a2a-52a6-bc7e-e996-8cc309b79b53.png)

`.env`ファイルの`NGROK_AUTH`に貼り付け
**※記事のミスです！この後の`git clone`で持ってくる`.env`ファイルに記述してください。この時点では`.env`は存在しません。**

```env:.env
NGROK_AUTH=コピーしたAuthtoken
```
`"`で囲む書き方もあります。今回はどちらでも良いです。

# 2-2. GitとDockerでセットアップ

Git（Github）とDockerを使用し、コードを書く準備をしていきましょう。

## 2-2-1. `git clone`

まずは専用のディレクトリを用意しましょう。必須ではないですが、後々振り返りやすくなります。

Finder（mac）やFile Explorer（Windows）を使用し手動で作成しても良いですし、ターミナルで作成しても良いです。

```bash
# ターミナルで作成する場合
# 'linebot'という名称は変えても良い
mkdir linebot
# 該当のディレクトリに移動
cd linebot
```

それでは、コードをGithubから持ってきましょう。
以下のコマンドをターミナルで実行してください。

```bash
git clone https://github.com/Kohki-Takatama/kantan_linebot.git
```

持ってきたファイルは以下の6つです。
- .env
- docker-compose.yml
- Dockerfile
- Gemfile
- Gemfile.lock
- README.md

.envは共有したくない情報を書く場所です（本来はgitでやり取りしないが、今回は特別）。
Dockerfileとdocker-compose.ymlの中身の解説は、以下の記事を見てみてください。

https://qiita.com/kohki_takatama/items/3ffd45f31dbe8acd4749

https://qiita.com/kohki_takatama/items/dde30b65eb0d67e4829b

Gemfileは、railsのバージョンを指定しています。
また、Gemfile.lockの中身はありません。Dockerfileの指示上、必要なファイルです。
README.mdは今回不要なファイルです。後ほどRailsによって上書きされます。

## 2-2-2. Docker Desktopを起動

いつものやつですね。Dockerを使うので、Docker Desktopアプリを起動してください。アプリを開くだけで良いです。

## 2-2-3. 新規Railsプロジェクトを作成

以下のコマンドをターミナルで実行してください。

```bash
# kantan_linebotに移動していない場合
cd kantan_linebot
# railsの新規プロジェクトを作成
docker compose run rails rails new . --api --force
```

「<font color="LimeGreen">Docker</font>の<font color="LimeGreen">compose</font>の中の、<font color="LimeGreen">rails</font>サービスを起動（<font color="LimeGreen">run</font>）して、
Ruby on Railsの新しいプロジェクトを作成（<font color="LimeGreen">rails new</font>）してね。
今回はviewファイルがいらないから<font color="LimeGreen">api</font>モードで、Gemfileを強制的に上書き（<font color="LimeGreen">force</font>）してね」
です。

このコマンドにより、見なれたRailsディレクトリ・ファイルが作成されました。

## 2-2-4. ngrokを使用できるよう、Railsの設定を変更

ターミナルで以下のコマンドを実行してください。

```bash
echo "Rails.application.config.hosts.clear" >> config/environments/development.rb
```

Railsにはngrokと相性の悪いセキュリティ設定がありますので、それを無効化しました。

## 2-2-5. サーバーを起動

いつものコマンドで、サーバーを起動しましょう。

```bash
docker compose up
```

サーバーが起動されているか確認したい方は、以下の手順を試してください。
1. 任意のブラウザで`localhost:4040`と入力し、アクセス
2. ngrokのページが表示され、ngrokによって割り当てられたURL（`https://xxxx-xxx-xxx-xxx-xx.ngrok-free.app`）が表示されるので、クリック
3. 出てきたページから、`Visit Site`をクリック
4. `Yay! You’re on Rails!`が表示されたらOKです。

うまくいかない方は、「2-1-2. Authtokenをコピペ」もしくは「2-2-4. ngrokを使用できるよう、Railsの設定を変更 」の手順に間違いがないか確認してください。

## 2-2-6. gemを追加する。

Gemfileに以下の2行を追加してください。

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

gem 'dotenv-rails'
```

`line-bot-api`はLINE公式のRuby用Gemです。
`dotenv-rails`は`.env`ファイルから情報を読み取るために使います。

2行を追加した後、ターミナルで以下のコマンドを実行してください。

```bash
docker compose exec rails bundle install
```

これでGemがインストールできたはずです。
インストールができたか確認したい方は、`docker compose exec rails gem list`コマンドを実行し、2つのgemが表示されるか確認しましょう。A-Z順になっています。

# 2-3. 最初のコードを書こう！

お待たせしました！！いよいよコードを書いていきましょう！！
「どういうものなのか」は置いておいて、コピペでガンガン作っていきましょう！

## 2-3-1. コントローラーの準備

コードを書くためのコントローラーを作成しましょう。

```bash
docker compose exec rails rails g controller Linebot
```

## 2-3-2. オウム返しアクションを作成

以下のコードをコピペしましょう。

```app/controllers/linebot_controller.rb
class LinebotController < ApplicationController
  # LINEから呼び出されるアクション
  def callback
    # リクエストのbody（StringIOクラス）を文字列（Stringクラス）に変更
    body = request.body.read
    # parse_events_fromはline-bot-apiのオリジナルメソッド
    # clientは以下で定義したプライベートアクション（が返したインスタンス）
    events = client.parse_events_from(body)
    
    # eventsは配列に入っているので、eachでアクセス。events[0]でもだいたい同じ。
    events.each do |event|
      case event
      when Line::Bot::Event::Message # 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
  end

  private

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

詳しくはイベント2次会で解説します。
イベントに参加できない方は以下のドキュメントをご覧ください。

request.body.read
requestについて

https://railsguides.jp/action_controller_overview.html#request%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%81%A8response%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88:~:text=10%20request%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%81%A8response%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88

bodyメソッドについて（stringIOを返す）

https://api.rubyonrails.org/v7.1/classes/ActionDispatch/Request.html#method-i-body

readメソッドについて（stringIOのメソッド）

https://docs.ruby-lang.org/ja/latest/method/StringIO/i/read.html

parse_events_from()

https://www.rubydoc.info/gems/line-bot-api/Line%2FBot%2FClient:parse_events_from

また、Dockerが生成したファイルの保存権限がない場合があります（特にWSL？）。
その場合は
```bash
sudo chown -R user_name .
```
をターミナルで実行し、権限を変更してください（`user_name`は自身のユーザーネーム）。

## 2-3-3. ルート設定

`route.rb`にルート設定をしましょう。
以下のコードをコピペしてください。
```rb
Rails.application.routes.draw do
  post '/' => 'linebot#callback'
end
```

Railsユーザーならよく見る、いつものやつですね。
今回は「URLそのまま（`/`）」へのアクセス時、「`linebot`コントローラーの`callback`アクションを呼び出す」というルーティングをしています。
## 2-3-4. LINE botのアクセストークンを設定

コードが書けました！
ここから、最後の設定をしていきます。
やることは以下です。
- <font color="LimeGreen">プログラミングコード</font>に「チャネルシークレット」を登録
  「悪いサーバーじゃないよ！」という証明書のイメージ
  > アプリに対して、チャネルへのアクセスを許可したことを示す秘密鍵です。
- <font color="LimeGreen">プログラミングコード</font>に「チャネルアクセストークン」を登録
  「LINEアカウントでプログラムを実行していいよ！」という許可証のイメージ
- <font color="LimeGreen">LINE bot</font>に「webhook URL」の登録
  LINEアカウントにアクションがあったとき（メッセージを送信されたとき）、どのURLにその情報を送るかの設定。ngrokから割り当てられたURLを登録する。
- <font color="LimeGreen">LINE bot</font>の「応答設定」をオフにする
  プログラミングコードと衝突してしまい、コードがうまく動かないのでオフにする。

順番にやっていきましょう。

### チャネルシークレットの登録

LINE Developers（LINE botの登録画面）から、
![スクリーンショット 2024-03-19 17.14.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/8b328d79-831c-95ce-487b-5da4ec9d22c5.png)

「チャネル基本設定」に移動。
下の方にある、「チャネルシークレット」を発行し、コピーします。

![スクリーンショット 2024-03-19 16.55.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/5a957299-11e6-c16c-7241-49e2dbb37935.png)

`.env`ファイルに貼り付けしてください。

```env:.env
LINE_CHANNEL_SECRET=コピーしたチャネルシークレット
```

### チャネルアクセストークンの登録

LINE Developers（LINE botの登録画面）から、
![スクリーンショット 2024-03-19 18.07.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/bce69a22-db84-667c-b986-bdc4dc5bbf97.png)

「Messaging API設定」に移動。
下の方にある、「チャネルアクセストークン（長期）」を発行し、コピーします。

`.env`ファイルに貼り付けしてください。

```env:.env
LINE_CHANNEL_TOKEN=コピーしたチャネルアクセストークン
```

### Webhook URLの登録

任意のブラウザで、`localhost:4040`にアクセスします。
![スクリーンショット 2024-03-19 18.19.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/a8b7a860-8640-6b3f-9a57-6677083a2b3e.png)

ページ真ん中のURL（`https://xxxx-xxx-xxx-xxx-xx.ngrok-free.app`）をコピーします。

LINE Developersに移動します。

先程と同じく「Messaging API」のQRコードの下「Webhook URL」の「編集」を押します。

![スクリーンショット 2024-03-19 18.34.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/8491fbb0-114d-6624-6ee5-68bedc7abcc8.png)

先程のURLを貼り付け、「更新」を押します。
**その後、「Webhookの利用」をオンにします**。

<font color="LimeGreen">今後は、dockerを立ち上げるたびにこのURLだけ手動で更新します。</font>


### LINEの応答設定をオフにする

LINE Official Account Managerを開きます。

![スクリーンショット 2024-03-19 18.36.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/bd5a8b60-f825-2fa7-b830-517720b1805f.png)

「応答設定」を開きます。

![スクリーンショット 2024-03-19 18.53.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/f35df25d-a155-7397-5b64-d308eec9a8f5.png)

「応答メッセージ」をオフにします。

![スクリーンショット 2024-03-19 18.57.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/63378268-dc68-2b0d-c7e8-a3ef5b4f9bd4.png)


### メッセージを送ってみる！

どうでしょうか？オウム返しできましたか？

![スクリーンショット 2024-03-19 19.21.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/f91799d7-e401-be92-94b9-b19a245c9ddd.png)


# 3-3. いろんなコードを試そう！

おつかれさまでした！
ここからはボーナスタイムです！！

様々なサンプルを用意しました。
コピペして、改変して、楽しみましょう！

https://qiita.com/kohki_takatama/items/88927cf75ae1a5f683f2