LINE Messaging API 使ってみた

「[ソニックガーデン 若手プログラマ - Qiita Advent Calendar 2024]」(https://qiita.com/advent-calendar/2024/sonicgarden-junior) 16日目の記事です。

# はじめに
以前、既存のRailsアプリにLINE Messaging APIを組み込んでLINE BOTを作成しました。
この記事ではMessaging APIを使って、LINE BOTからメッセージを受け取る、返す、LINE公式アカウントのトーク画面下部に表示されるメニュー（リッチメニュー）の使い方についても簡単に紹介します。

# 準備
LINE Messaging APIを利用するにはLINE Developersに新規のアカウントを登録する必要があります。登録したらアクセストークンとシークレットを取得しておいてください。これらはRails側で環境変数として設定します。
Railsの環境構築などは省略します。

### SDKの利用
LINE Messaging API SDKが用意されているので、今回はこれを利用します。

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

Gemfileファイルに以下を記述し、```bundle install```してください。
```ruby:Gemfile
gem 'line-bot-api'
```
### ルーティングの設定
LINEプラットフォームからリクエストを受け取る入口をRails側で作ります。
```ruby:Gemfile
Rails.application.routes.draw do
  resource :line_webhooks, only: %i[create]
end
```
```/line_webhooks```を設定のwebhookURLに設定します。

### LINEボットの友達追加
設定画面のQRコードからLINEボットを友だち追加しておきます。ここからメッセージを送信したり、受け取ったりします。
![スクリーンショット 2024-12-14 21.52.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3943890/8c672fa6-b1a6-39af-530c-af950d0072df.png)

# LINEからメッセージを受け取る・送信する
上で友達追加したトーク画面からメッセージを送信すると、JSON形式でデータが来ます。それを```line_bot_client```の```parse_events_from```メソッドでparseしてイベントを取得します。
また```reply_message```メソッドで逆にこちらからメッセージを送ることも可能です。
```ruby:line_webhooks_controller.rb
class LineWebhooksController < ApplicationController
  def create
    body = request.body.read
    events = line_bot_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"]
          }
          line_bot_client.reply_message(event['replyToken'], message)
        end
      end
    end
  end

  private

  def line_bot_client
    Line::Bot::Client.new do |config|
      config.channel_secret = Rails.application.credentials.LINE_CHANNEL_SECRET
      config.channel_token = Rails.application.credentials.LINE_CHANNEL_TOKEN
    end
  end
```
# リッチメニュー
リッチメニューとはLINEのトーク画面の下部に表示されるメニュー機能のことです。ここにいろいろなアクションを設定することができます。

https://developers.line.biz/ja/docs/messaging-api/rich-menus-overview/#choosing-tool-for-creating-rich-menus


リッチメニューの作り方は２種類あります。

１つ目はLINEのOfficial Account Manegerから作る方法です。こちらはGUI操作でメニューの分割方法や画像、さらにそこに設定するアクションなどを簡単に設定することができます。
![スクリーンショット 2024-12-15 10.14.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3943890/d1857898-fbb1-0465-3319-30b65e7cf2b1.png)
ある程度のメニューであればこちらで設定することができます。

２つ目はMessaging APIで作る方法です。テンプレートに設定したいものがなかったり、日時選択のようなアクションやタブによって切り替えられるメニューを設定する場合は現状ではこちらで設定するしかありません。

https://developers.line.biz/ja/docs/messaging-api/using-rich-menus/

やり方としては画像を準備して座標(x, y)でそれぞれの領域にアクションを当てていきます。その際、チャンネルアクセストークンが必要になるので準備しておきましょう。
```shell
curl -v -X POST https://api.line.me/v2/bot/richmenu \
-H 'Authorization: Bearer チャンネルアクセストークン' \
-H 'Content-Type: application/json' \
-d \
'{
    "size": {
        "width": 2500,
        "height": 1600
    },
    "selected": false,
    "name": "リッチメニュー",
    "chatBarText": "メニューはこちら",
    "areas": [
        {
            "bounds": {
                "x": 0,
                "y": 0,
                "width": 2500,
                "height": 800
            },
            "action": {
                "type": "message",
                "label": "あいさつ",
                "text": "こんにちは"
            }
        },
        {
            "bounds": {
                "x": 1250,
                "y": 0,
                "width": 2500,
                "height": 800
            },
            "action": {
                "type": "url",
                "label": "URL",
                "URL": "xxx.com"
            }
        }
    ]
}'

```

# おわりに
今回はLINE Messaging APIのほんの一部の機能を紹介しました。ドキュメントを見てもらえればわかるのですがまだまだいろんなことができそうです。
最後までありがとうございました。