【Rails/Ruby/Docker/LINE messagingAPI/Heroku】単語帳bot

## 1.はじめに

当記事は、**LINE messagingAPI**を活用したアプリケーションの開発の流れをまとめた記事になります。

LINE messagingAPIを活用して、開発したい方の参考になればと思います。

## 2.開発アプリ

まず私が開発したアプリについて紹介します。

- アプリ名　「単語帳bot」
- 公式LINEなので下記QRコードから友達登録できます。

![スクリーンショット 2021-07-26 12.00.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1536072/8eaaac60-60b7-ceaf-238b-eb320d7cd92d.png)

LINEでのトーク画面で、**問題、答えの登録**を可能にし、自作の**単語帳や問題集**として使用できます。

- **デモプレイ動画**


<iframe width="560" height="315" src="https://www.youtube.com/embed/wCnZWuD3pms" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

### 使用言語等

- Ruby, Ruby on Rails
- LINE messagingAPI
- Heroku(PostgreSQL)


## 3.開発の流れ

※ railsアプリ作成の流れは省略します。

### LINE Developersの登録とチャネル作成

- [LINE Developers](https://account.line.biz/login?redirectUri=https%3A%2F%2Fdevelopers.line.biz%2Fconsole%2F)に登録（支障がなければ、自身のLINEアカウントで問題ありません）

- プロバイダーの新規登録をします。

![スクリーンショット 2021-08-03 8.56.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1536072/1c6c8fcb-98d9-4c37-9c17-562f21a1a2e9.png)

- チャネル設定で新規チャネルの登録をします。この時、チャネルの種類は**MessagingAPI**を選択してください。

![スクリーンショット 2021-08-03 9.00.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1536072/3ff30c0b-5c2c-c040-4ca9-4e580e2dd98e.png)


これで**チャネル登録**は終わりました。

### gemの追加

- 作成したrailsアプリのGemfileに`gem line-bot-api`を追加して、bundle installしてください
- `app/controller/linebotcontroller.rb`を作成してください。
- linebotcontrollerの中身は公式ドキュメント内のexamplesを参考にしてください。

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

```app/controller/linebotcontroller.rb
class LineBotController < ApplicationController

  require 'line/bot'  # gem 'line-bot-api'

  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
end
```

このコントローラーの中身をいじると、自動で返ってくるメッセージの中身を変えることができます。

このコントローラーの中身を簡単に説明しますと、
まず、`post /callback`が実行（メッセージを受信）されて、今回の場合だと

```rb
  case event.type
  when Line::Bot::Event::MessageType::Text

```
にジャンルされるので、変数messageに`text: event.message[text]`が入ります。
この場合の`text: event.message[text]`は受信したメッセージになります。

そして`reply_message`メソッドの第１引数に`replyToken`,第２引数に先ほどの`message`を渡して、メッセージを送信します。

いわゆる**オウム返し**になるわけです。（「あ」て送ったら「あ」って返ってくる。）

### コントローラーの編集

先ほど作成したコントローラーを色々と編集することで、色々な機能をつけたりすることができます。

### 本アプリの場合

まずは、問題の登録、削除ができるように、dockerを使用してDBを構築しました。

ちなみに**ER図**は簡単なもので、
![スクリーンショット 2021-08-03 11.36.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1536072/115734b0-ecf5-0b2d-b33a-ab4dc1c997e9.png)

となっています。
Userのuidは、メッセージを受信した時のLINEのuidを`User[:uid]`としてアプリのDB登録に登録されるのでユーザー毎に問題は管理されます。


**コントローラーの編集内容**は以下のとおりです。
※「」は受信したメッセージを表す。

- メッセージを送信したLINE userをuidでfind_byして見つからなければ、そのuidを元にcreate!する。

- 「説明」・・・本アプリの説明文章を送り返す。

- 「問題」・・・登録済みの問題をindex番号を付して送り返す。

- 「問題を作る」・・・問題の作り方についての説明文を送り返す。

- 「問題＝」・・・＝以下の文章を`Question[:body]`に登録し、続けて答えの登録方法についての説明文を送る。


- 「数字：答え＝」・・・問題のindex番号と送られてきた数字の合致するレコードを取得し、＝以下の文章をQuestion[:answer]に登録する。

- 「削除」・・・index番号を付して問題一覧を出力する

- 「削除１」・・・問題一覧のindex番号と送られてきた数字の合致するレコードをdestroyする

コードについてはGitHubで公開しているので、参考にしてみてください。

https://github.com/kobayashiryou/flashcard

### Herokuへのデプロイ

※herokuアカウント登録済みの上で話進めますので承知願います。

```
$ heroku login
```

すると

```
heroku: Press any key to open up the browser to login or q to exit: 
```

と出ますので、エンターキー押してもらえれば、ブラウザ画面にherokuのログイン画面が表示されますので、ログインしてください

#### デプロイ準備

- もし、アプリの開発環境で`MySQL`を使用している場合は、`PostgreSQL`に切り替えてください、herokuではMySQLは基本使えません。

```rb:Gemfile.
group :production do
  gem "pg"
end

```
こんな感じでGemfileに`gem pg`を追加してください。テスト環境や開発環境でMySQLを使う場合は、`group :development, :test do`に移動させてください。

追加終わったら、`bundle install`してください。

- Procfileの作成

Gemfileとかと同じ階層に`Procfile`を作成してください。
作成したファイルには、以下のコードを追加してください。

```Procfile.
web: bundle exec rails server -p $PORT
```

このコードにより、Heroku反映時にrails sが起動されます。

#### heroku上に公開場所を作成

```
$ heroku create [アプリケーション名]
```
とするとherokuに公開場所が作成されます、アプリケーション名を指定しない場合は、`heroku create`のみで大丈夫です。

#### アドオンの追加

```
$ heroku buildpacks:add --index 1 heroku/nodejs
$ heroku buildpacks:add --index 2 heroku/ruby
```
でRubyとnodeのアドオンを追加

#### 環境変数の追加

```
$heroku config:set LINE_CHANNEL_SECRET=秘密鍵
$heroku config:set LINE_CHANNEL_TOKEN=チャンネルトークン
```
を追加します。

LINE Developersの以下の画面で確認できます。
![スクリーンショット 2021-08-03 12.32.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1536072/78e823b6-78d7-77a0-d41d-6c3b14e8e489.png)

- チャネル基本設定の部分に**秘密鍵**
- MessagingAPI設定の部分に**チャンネルトークン**
が記載されています。

#### デプロイ

```
$ git push heroku main
$ heroku run rails db:migrate
```

で、herokuへのデプロイは完了！


#### もしうまくいかなかったら

herokuへのデプロイはエラーがつきものなので、別の方法も書いておきます。
まずはherokuをブラウザで開いてください。
ブラウザ画面の`Deployment method`の部分に注目してください。

![スクリーンショット 2021-08-03 12.45.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1536072/e2787784-7de6-1e7e-5564-a0ace05410a4.png)

通常は`Heroku Git`でデプロイしますが、`GitHub`と連携させてデプロイする方法もあります。
今回はこのデプロイ方法について説明します。
`Deployment method`の`GitHub`を選択してください。
repository名を入力してください。
連携がうまくいけば、`Deployment method`の`GitHub`の下に`Connected`の文字が表示されます。

![スクリーンショット 2021-08-03 12.52.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1536072/490ada2a-9e23-b8b3-4618-9909fddff0a2.png)

`Connected`になったら、画面をスクロールして一番下まで移動します。
`Manual deploy`にある`Deploy Blanch`ボタンを押すと、デプロイが始まります。
デプロイの最中エラーになることもありますが、エラーコードが表示されますので、エラーコードに従って、ファイルを訂正等すれば、うまくデプロイできると思います。

### MessagingAPI設定

![スクリーンショット 2021-08-03 12.32.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1536072/78e823b6-78d7-77a0-d41d-6c3b14e8e489.png)

LINE Developersの、`MessagingAPI設定`を開いてください。

![スクリーンショット 2021-08-03 13.07.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1536072/f00ccc65-fc12-ba74-3ac9-87503219e4bf.png)

- まず**Webhookの利用**を有効にしてください。
- `Webhook URL`のアプリ名のところにデプロイしたherokuのアプリ名を入れてください。
- 更新ボタンを押した後、検証ボタンを押してください。成功と表示されれば、連携完了です。

QRコードから友達登録して、実際に動くか試してましょう！

## 4.開発の背景

- 社会人になってからも意外と勉強する機会は多い。
- 分厚い参考書を見ると、余計にやる気がそがれ、なかなか勉強する気になれない。
- ついつい現実逃避で、スマートフォンをいじってしまう。

前職で私が経験したことになります。
この経験から、
**もっと気軽に勉強できるようにしたい！**
と思い、開発しました。
LINEはついついいじってしまうアプリの一つです。いじったついでに一問だけやるとか、気軽にできればと思います。

## 5.まとめ

今回は**LINE messagingAPIを活用したアプリ開発の流れやデプロイ方法**について記事を書きました。
同じく、エンジニア転職を目指す方やプログラミング初学者の方のお役に立てればと思い、執筆しました。
もし、参考になった場合は**LGTM**してもらえると大変嬉しいです。