Go to Qiita Advent Calendar 2024 Top
LoginSignup
3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@CarBoss1996(natsumi kawashita)

[ Rails ] 個人アプリのユーザーに公式LINEを友達追加してもらい、LINEでメッセージを送信する

Posted at

はじめに

こんにちは！
個人開発アプリにLINE通知機能を実装する際の備忘録です。
通知機能の完了まで結構内容が重たいので、実装内容ごとにまとめていく予定です。
今回は個人アプリのユーザーに公式LINEを友達追加してもらい、LINEでメッセージを送信するところまでをまとめました。

個人アプリの詳細な説明についてはこちらの記事をご参照ください。

開発環境

・Ruby on Rails 7.1
・Ruby 3.2.3

完成目標

・ 作成したアプリのアカウントとLINEアカウントのIDを連携させる。
以下は私が作成したアプリのLINE画面ですが、通知設定をすることで連携ができるようにしています。

IMG_4673.jpg

手順

1. LINE Developerに登録し、プロバイダを作成
2. 公式LINEを作成
3. チャネルID、チャネルシークレットを登録
4. line-bot-apiをインストール
5. ルーティング、MVCを作成

1. LINE Developerに登録し、プロバイダを作成

1-1. LINE Business ID を登録

以下よりLINE Developer にアクセスして、アカウントを作成します。

アクセスしたら以下の画面が出てくるので、右上のコンソールにログインをクリックしてください。

068d7c0e113c6834e06e95e5d77625de.jpg

クリックすると以下の画面になるので、アカウントを作成をクリックしてください。

589e632ab194db9a424b5608d9fb030b.png

クリックすると以下の画面に遷移するので、お好きな方法でアカウントを作成してください。

ddd57bd49c8c87772ed448d193ac8d30.png

1-2. プロバイダーを作成

アカウントが作成できたら以下の画面に遷移するので、プロバイダーを作成をクリックします。

793a797c451cab6162c98087d912f611.png

クリックすると以下の画面が出てきます。
好きなプロバイダー名を入力して、作成をクリックします。

e8b08ec35c29404381627ec2ad16730c.png

以上でプロバイダーの作成が完了しました！

2. アプリの公式LINEを作成

2-1. アプリの公式LINEを作成する

line bot を使用するためのチャネルを作成していきます。
左から２番目の Messaging APIをクリックします。
8b9db9a3d472bbe7d3892bd543cda572.png

クリックすると以下の画面に遷移します。
赤丸の緑ボタンをクリックして、LINE公式アカウントを作成します。

3a876fc696e0dddf66e5ccc764bb2789.png

クリックするとログイン画面になるので、ログインをクリックします。

58b3897a3f88cb1b7b0a1c08110f02f5.png

ログインすると以下の入力画面に遷移するので、以下の必要事項を入力していきます。
・ アカウント名
・ メールアドレス
・ 会社・事業者の所在国・地域
・ 業種
・ 運用目的
・ 主な使い方
個人開発の趣味アプリやポートフォリオの場合の業種は、大業種を「個人」にして、小業種を「学生」でいいと思います。
運用目的や主な使い方はどれでもいいと思います！
私は「サイトに人を集めたい、登録してもらいたい」「未定」を選択しました。

29b16d9891c08fcc84ef665c15d4bde4.png

2a8784ed0a1fc07ba8a99c60dd9f5dd7.png

入力ができたら確認をクリックします。
その後確認画面に遷移するので、内容を確認して間違いがない場合は完了をクリックします。

f38c0bba59817dfe4966b9767d855c26.png

同意画面が２回表示されますが、両方とも同意してください。

f0d532c4e49ec79f03ff623f125bb84b (1).png

同意したら、LINE公式アカウントが作成されます。

0c16b12573206bfe8be4877eedfb29c6.png

画面中央の LINE Official Account Managerへ をクリックして、Messaging API の設定をしていきます。

2-2. あいさつメッセージの設定

LINE Official Account Managerへ遷移したら以下の画面が出てくるので、× で消してもらって大丈夫です。
7bddfabc39b95d8b1abe3ca7accd0a3b.png

サイドバーからあいさつメッセージを選択します。

694f03287942aa083ebcb3cf5f0ea763.png

以下赤枠の部分をクリックして編集していきます。

6288526035c0124ab37c4fb669b45616.png

今回はこんな感じのメッセージを作成しようと思います。
作成できたら変更を保存します。

81897b7019871baa29c288acf625c1c0.png

これであいさつメッセージの変更は完了しました！
現状ブロックされてから再度友達追加された時もあいさつメッセージがいくようになっているので、やめたい場合はメッセージ設定上部の送信設定にチェックを入れてください。

2-3. 友達追加ボタンを設置

再度サイドバーから下の方にある「友達追加ガイド」をクリックします。

694f03287942aa083ebcb3cf5f0ea763.png

以下の画面になるので、赤枠のボタンボタンを作成をクリックします。

106e5b5b12f38e05f555e79325fd10e8.png

そして以下の画面が出てくるので、コピーをクリックして連携を実装したい画面に貼り付けます。

122471d8cf14589ed9d75afe6c542fb6.png

やり方だけ覚えておいて、とりあえず置いといて後で貼り付けてもOKです！
これでアプリの公式ラインの友達追加への動線が確保できました。

3. チャネルID、チャネルシークレットを登録

3-1. チャネルID、チャネルシークレットを登録

画面右上の設定をクリックします。

5a0f02c1dccbfee9743d69a4e3e32227.png

アカウント設定の画面に移動するので、赤丸の Messaging API をクリックします。
ちなみに黄色丸のプロフィール編集から画像の変更ができます。
ecf4b70fda0c0ea35a807bb4177e21cd.png

赤丸の Messaging API を利用するをクリックします。
1ef1e4b0a8dfe410be6ed17e6ddd9ca5.png

先程作成したプロバイダー名を選択して、同意するをクリックしてください。

152aa067205638678cab802e21cf1a68.png

プライバシーポリシー都利用規約を作成している場合はURLを記入していただいて、ない場合はそのまま「OK」をクリックしてください。

3744e087d14867f571b5e38fda9432ca.png

OKをクリックします。

fa20989593e3c7103268cc0337eb6552.png

これで登録が完了したので、チャネルIDとチャネルシークレットが発行されました！
8852f60a669ca84cdcf7e2e14700ba24.png

このIDとシークレットは .env ファイルに記述します。
デプロイ先の環境変数にも記述を忘れないでください。

.env
CHANNEL_ID=00000
CHANNEL_SECRET=0000000

このIDとシークレットは他人に知られないように注意してください！
ではここで LINE Developers の方に戻ります。

3-2. チャネルアクセストークンを発行

Messaging API を使用するために、チャネルアクセストークンが必要になります。
LINE Developers のサイドバーから、先程作成したプロバイダーを選択します。
プロバイダーを選択したら以下の画面になるので、Messaging API のチャネルをクリックします。

427606350c73823c8d9a48639c2f9da6.png

クリックしたらこの画面になるので、赤丸の「Messaging API設定」をクリックします。

2f208096ec9cd7c83494d89f376cf02a.png

Messaging API設定画面に遷移したら一番下までスクロールして、最下部にあるチャネルアクセストークンを発行します。

c646125c1495cff4910736d6d4d1f50f.png

そして発行されたチャネルアクセストークンも .env ファイルに記述します。
デプロイ先の環境変数にも記述を忘れないでください。

.env
CHANNEL_TOKEN=000000000000

これで一旦LINE側での設定は終了したので、アプリに戻って作業をします。

4. line-bot-apiをインストールする

Gemfile に line-bot-api を記述して bundle install します。
Gemfile.
gem 'line-bot-api'

bundle install したら再起動します。
今回、.env ファイルを使用するので、gem 'dotenv-rails' をインストールしていない方はここでインストールしてください。

5. Webhook URLの設定

5−1. テーブルレスモデルの作成

今回はアプリのユーザーIDとそのユーザーのLINEアカウントIDを連携したいだけなので、特にマイグレーションファイルの作成は必要ないです。
ただLINEのメッセージ送信などの記述をユーザーテーブルなどにまとめてしまうと、記述が多くなってゴチャついてしまうので、テーブルレスモデルを作成します。
RailsではActiveModelモジュールを使用してテーブルレスモデルを作成できます。
これはデータベーステーブルにバインドされず、バリデーション、コールバック、その他のActiveRecordが提供する機能を利用できます。
つまり、データベースに保存しない情報を扱いつつも、モデル、ビュー、コントローラー（MVC）のパターンを維持することができるので、コードの組織化と再利用性が向上します。

今回は通知機能のための連携なので、 notification.rb を作成します。
モデルを作成したら、編集をします。

notification.rb
class Notification < ApplicationRecord
 # 上記の記述を以下に修正、先頭にrequire 'line/bot'を記述
 
 require 'line/bot'

class Notification
  include ActiveModel::Model

こうすることで、line-botを使用することができ、テーブルレスモデルへの変更も完了しました。

5-2. notification.rb の作成

line-botの作成をしていきます。
notification.rb
require 'line/bot'

class Notification
  include ActiveModel::Model
  def self.send_line_notification(line_user_id, message)
    # LINE bot APIのクライアントを初期化
    client = Line::Bot::Client.new do |config|
      config.channel_secret = ENV["LINE_CHANNEL_SECRET"]
      config.channel_token = ENV["LINE_CHANNEL_TOKEN"]
    end

    # メッセージを作成
    message = {
      type: 'text',
      text: message
    }

    # メッセージを送信
    response = client.push_message(line_user_id, message)

    # エラーハンドリング
    unless Net::HTTPSuccess == response
      Rails.logger.error("Error sending LINE message: #{response.message}")
    end
  end
end

5-3. notifications_controllerを作成

次にコントローラを作成します。

notifications_controller.rb
require 'net/http'
require 'uri'
require 'json'

class NotificationsController < ApplicationController
  protect_from_forgery except: :callback
  before_action :authenticate_user!, only: [:link_line_account]

  def callback
    body = request.body.read
    signature = request.env['HTTP_X_LINE_SIGNATURE']
    unless client.validate_signature(body, signature)
      return head :bad_request
    end

    events = client.parse_events_from(body)
    events.each do |event|
      case event
      when Line::Bot::Event::Message
        handle_message_event(event)
      end
    end

    head :ok
  end

  private

  def handle_message_event(event)
    received_text = event['message']['text']
    line_user_id = event['source']['userId']

    unless received_text == '連携'
      message = {
        type: 'text',
        text: "アカウント連携をしたい場合は、「連携」とメッセージを送ってください。"
      }
      return client.reply_message(event['replyToken'], message)
    end

      messages = {
        type: 'text',
        text: "認証を完了するには、次のリンクをクリックしてください。"
      }
  end

  def client
    @client ||= Line::Bot::Client.new { |config|
      config.channel_secret = ENV["CHANNEL_SECRET"]
      config.channel_token = ENV["CHANNEL_TOKEN"]
    }
  end
end

5-4. ルーティングを作成

次にルーティングを作成します。
routes.rb
Rails.application.routes.draw do
  post '/callback', to: 'notifications#callback'
end

これで LINE からのコールバックを受けられるようになったので、アプリのURLに /callback を追記したURLを Webhook に記述します。

Webhook URLを設定

LINE Developers と LINE Official Account Manager を行ったり来たりするので、少し複雑に感じるかもしれませんが、順を追って進めれば問題ありません。

まずはLINE Official Account Manager に戻ります。
設定から Messaging API の設定を開きます。
Webhook URL の欄にアプリのURLを入力して、最後に　/callback を追記します。
記述できたら保存をクリックします。

ab112f270ccdd90a1746865be8ea8d00.png

そして LINE Developers を開きます。
Messaging API設定の画面を開いて下にスクロールすると、Webhook設定という項目が出てきます。
その Webhook URL の編集ボタンをクリックして、先程記述した /callback の記述を入れたURLをもう一度記述します。
e238bdf63f394ad64a60a1f3d23a4f3a.png

入力が完了したら下記のような画面に変化します。
検証を押すと実際にcallbackができているかをテストすることができます。
成功という文字が出ればOKです。

50eafe07982b926c2c46ffa573b540c5.png

Image from Gyazo

この表示が出ない場合は、URLの記述ミスやLINE Developersの設定漏れを確認してください。

そして Webhook の利用をクリックして緑色にして有効にします。

8d7b628a236fc56efb0119283e5f3b95.png

これで公式LINEからユーザーにメッセージを送信できるようになりました！
お疲れ様でした！

公式LINEに「連携」とそれ以外の文字を送って確認してみてください^^

最後に

最後までお読みいただきありがとうございます！
この続きとしてアプリのユーザーIDとLINEアカウントIDの連携をしていきたいのですが、長くなったのでこれはまた別記事にまとめたいと思います。
備忘録ですが、参考になれば幸いです。
初学者ゆえ、誤解や説明不足があるかもしれませんが、ご指摘いただければ幸いです。

参考文献

以下同じスクールの先輩の記事、大変参考にさせていただきました！感謝です！！
https://qiita.com/kohki_takatama/items/e19960e479a712d63408
こちらの記事はngrokの設定も細かく解説されているので、デプロイ環境で何回もテストするの嫌って方はぜひngrok使ってみてください！
https://qiita.com/kohki_takatama/items/278b1f47e355e08df43a

3
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?