Zenn
📱

LINE NotifyからLINE Messaging APIへの移行手順

に公開

LINE NotifyからLINE Messaging APIへの移行手順

はじめに

こんにちは!個人アプリ開発者の のす です。

最近、LINE NotifyがLINE側の仕様変更により廃止されることになり、LINE Messaging APIへの移行が必要になりました。当初は「単純に認証方法が変わるだけでは?」と考えていましたが、実際に取り組んでみると予想以上に手間取る部分がありました。特にグループへの通知機能の実装には試行錯誤が必要でした。

本記事では、Next.jsとVercelを使用したウェブアプリケーションで、LINE Notifyから LINE Messaging APIへの移行手順を具体的な実装例とともに紹介します。特にグループIDの取得方法など、ドキュメントだけでは分かりにくい部分に焦点を当てています。

なぜLINE Messaging APIへの移行が必要なのか?

LINE Notifyは、シンプルな通知機能を提供する便利なAPIでしたが、LINE側の仕様変更により廃止されることになりました。これにより、以下の変更が必要になりました:

  • LINE Notify:シンプルな通知機能のみ、トークン認証方式
  • LINE Messaging API:より高度な機能を備えた通知システム、OAuth2.0認証方式
  • アーキテクチャの変更:認証方法やリクエスト形式の変更に対応

移行の実装手順

LINE Messaging APIへの移行を実装するための全体的なフローは以下の通りです:

1. LINE Developers Console での設定

  1. LINE Developers Consoleにアクセスしアカウントを作成
  2. 新しいプロバイダーを作成
  3. Messaging API用の新しいチャネルを作成
  4. チャネルアクセストークン(長期)を発行
  5. ボットを友だち追加し、必要に応じてグループに招待

2. APIエンドポイントの実装

  1. 既存のLINE Notify用コードをLINE Messaging API用に修正
  2. 環境変数の設定と管理
  3. リクエスト形式とレスポンス処理の変更

コード実装

1. 既存のLINE Notify実装

まず、既存のLINE Notify実装はシンプルなものでした:

// lib/linenotification.js
export async function sendLineNotification(message) {
  const response = await fetch('/api/sendLineNotification', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ message }),
  });
  
  const result = await response.json();
  if (!result.success) {
    throw new Error(`Failed to send LINE Notify: ${result.message}`);
  }
  
  return result;
}

このシンプルなクライアントサイドのコードは、APIエンドポイントを呼び出して通知を送信するだけでした。バックエンド側では、LINE Notify APIにリクエストを送信していました(この部分は省略)。

2. LINE Messaging APIへの移行実装

LINE Notify廃止に伴う移行では、クライアントサイドのコード(lib/linenotification.js)はそのままに、バックエンドのAPIハンドラだけを変更するアプローチを取りました。これにより、アプリケーション全体への影響を最小限に抑えることができます。

修正後のAPIハンドラは以下のようになります:

// pages/api/sendLineNotification.js
import axios from 'axios';

export default async function handler(req, res) {
  if (req.method !== 'POST') {
    return res.status(405).json({ success: false, message: 'Method not allowed' });
  }

  const { message } = req.body;

  if (!message) {
    return res.status(400).json({ success: false, message: 'Message is required' });
  }

  // LINE Messaging API の設定
  const CHANNEL_ACCESS_TOKEN = process.env.LINE_CHANNEL_ACCESS_TOKEN;
  const GROUP_ID = process.env.LINE_GROUP_ID; // グループに送信する場合

  if (!CHANNEL_ACCESS_TOKEN || !GROUP_ID) {
    return res.status(500).json({
      success: false,
      message: 'LINE API configuration is missing',
    });
  }

  try {
    // LINE Messaging API へリクエスト
    const response = await axios.post(
      'https://api.line.me/v2/bot/message/push',
      {
        to: GROUP_ID, // グループIDを指定
        messages: [
          {
            type: 'text',
            text: message,
          },
        ],
      },
      {
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${CHANNEL_ACCESS_TOKEN}`,
        },
      }
    );

    return res.status(200).json({ success: true, data: response.data });
  } catch (error) {
    console.error('LINE Messaging API error:', error.response?.data || error.message);
    return res.status(500).json({
      success: false,
      message: error.response?.data?.message || error.message,
    });
  }
}

移行の最大のメリットは、フロントエンド側のコードを全く変更せずに、バックエンド側のAPIエンドポイントの実装だけを変更できる点です。これにより、既存のアプリケーションロジックや画面フローに影響を与えることなく、LINE Messaging APIへの移行が完了します。

環境変数の設定

プロジェクトのルートに .env.local ファイルを作成し、以下の環境変数を設定します:

# 以前の設定(廃止)
# LINE_NOTIFY_TOKEN=your_line_notify_token

# 新しい設定
LINE_CHANNEL_ACCESS_TOKEN=your_channel_access_token
LINE_GROUP_ID=your_group_id

Vercelにデプロイする場合は、Vercelダッシュボードで環境変数を追加する必要があります。

グループIDの取得方法

LINE Messaging APIでグループに通知を送信するには、グループIDが必要です。しかし、このグループIDの取得は意外と大変です。私はVercelのFunctionsを利用してこの問題を解決しました。

Vercel Functionsを活用したグループID取得方法

LINE公式のドキュメントには明確な取得方法が書かれておらず、試行錯誤の末にたどり着いた方法を紹介します:

  1. まず、Webhook受信用のエンドポイントを作成します:
// pages/api/linewebhook.js
export default async function handler(req, res) {
  if (req.method !== 'POST') {
    return res.status(405).end();
  }
  
  console.log('===== LINE WEBHOOK REQUEST =====');
  console.log('Request Headers:', JSON.stringify(req.headers));
  console.log('Request Body:', JSON.stringify(req.body));
  
  // Webhookからのイベントを取得
  const events = req.body.events;
  
  if (events && events.length > 0) {
    // イベントを処理
    for (const event of events) {
      // グループからのメッセージの場合
      if (event.source && event.source.type === 'group') {
        const groupId = event.source.groupId;
        
        // コンソールにグループIDを出力
        console.log('🔍 LINE Group ID を検出しました 🔍');
        console.log('===========================');
        console.log(groupId);
        console.log('===========================');
        console.log('この ID を LINE_GROUP_ID 環境変数として設定してください');
      }
    }
  }
  
  // 常に200 OKを返す(これが重要!)
  return res.status(200).end();
}
  1. Vercelにデプロイします(または開発中ならngrokなどでローカル環境を公開)。

  2. LINE Developers ConsoleでWebhook設定:

    • ボット設定ページで「Webhook設定」を開く
    • Webhook URLに https://あなたのアプリ.vercel.app/api/linewebhook を入力
    • 「検証」ボタンで疎通確認(成功すると「成功」と表示される)
    • 「Webhookの利用」をONに設定
    • 「保存」ボタンを押す
  3. ボットをLINEグループに招待します(事前にボットを友だち追加しておく必要があります)。

  4. グループ内でボットにメンションするか、何らかのメッセージを送信します。

  5. VercelのログでグループIDを確認:

    • Vercelダッシュボードの「Deployments」タブを開く
    • 最新のデプロイメントをクリック
    • 「Functions」タブを選択
    • /api/linewebhook 関数のログを確認

実際のログ例:

🔍 LINE Group ID を検出しました 🔍
===========================
C1a2b3c4d5e6f7g8h9i0j...  // この長い文字列がグループID
===========================
この ID を LINE_GROUP_ID 環境変数として設定してください

この方法を使うことで、開発者ツールを駆使して複雑な手順を踏むことなく、簡単にグループIDを取得できました。取得したグループIDは、Vercelの環境変数として設定し、LINE通知の送信先として利用しています。

LINE Messaging APIの主な違いと注意点

LINE NotifyからLINE Messaging APIへの移行において、いくつかの重要な違いがあります:

1. 認証方法

  • LINE Notify: 発行されたトークンをヘッダーに含める簡易認証
  • LINE Messaging API: OAuth2.0ベースのBearer認証を使用

2. リクエスト形式

  • LINE Notify: application/x-www-form-urlencoded 形式
  • LINE Messaging API: application/json 形式

3. 送信先の指定方法

  • LINE Notify: トークン発行時に紐づけられた送信先のみ
  • LINE Messaging API: ユーザーID、グループID、またはルームIDを明示的に指定

4. 認証要件

  • LINE Messaging API: ボットを友だち追加する必要があります
  • グループに通知を送信するには、ボットをそのグループに招待する必要があります

Vercelへのデプロイと実践的なトラブルシューティング

私の経験では、Vercelのようなサーバーレス環境へのデプロイ時には、いくつかの注意点があります。実際に遭遇した問題と解決策を含めて紹介します:

環境変数の設定

Vercelでは、ローカル開発環境とは異なり、環境変数を明示的に設定する必要があります:

  1. Vercelダッシュボードでの設定手順:

    • プロジェクトを選択
    • 「Settings」タブをクリック
    • 左側のメニューから「Environment Variables」を選択
    • 「Add New」ボタンをクリック
    • 以下の環境変数を追加:
      • LINE_CHANNEL_ACCESS_TOKEN (LINE Developers Consoleで取得したチャネルアクセストークン)
      • LINE_GROUP_ID (前述の方法で取得したグループID)
  2. 複数環境の管理:

    • 必要に応じて、Preview環境とProduction環境で異なる設定を行う
    • 「Environment」欄でどの環境に適用するかを選択(通常は「All」でOK)

依存パッケージと実行エラー

LINE Messaging APIを使用するには、axiosパッケージが必要です:

npm install axios
# または
yarn add axios

もし「Module not found: Can't resolve 'axios'」というエラーが出た場合は、package.jsonに依存関係が正しく記録されているか確認してください。

よくあるエラーと対処法

実際に私が遭遇したエラーとその解決策:

  1. 「LINE API configuration is missing」エラー:

    • 原因: 環境変数が正しく設定されていない
    • 解決策: Vercelダッシュボードで環境変数が正しく設定されているか確認
    • 修正後: 変更を反映するために再デプロイが必要
  2. 「401 Unauthorized」エラー:

    • 原因: チャネルアクセストークンが無効または期限切れ
    • 解決策: LINE Developers Consoleで新しいトークンを発行
  3. 「403 Forbidden」エラー:

    • 原因: ボットがグループに参加していない、またはメッセージ送信の権限がない
    • 解決策: ボットをグループに招待し直す、またはボットの設定を確認
  4. グループへのメッセージ送信失敗:

    • 原因: グループIDが正しくない
    • 解決策: Webhookログを再確認し、正確なグループIDを環境変数に設定

ログのリアルタイム確認が問題解決の鍵となります。Vercelのダッシュボードで「Functions」タブを開き、API関数のログを確認することで、多くの問題を素早く特定できました。

通知例の比較

以下は、LINE NotifyとLINE Messaging APIで送信した通知の主な違いを比較した表です:

機能・特徴 LINE Notify LINE Messaging API
送信元 LINE Notify(共通アカウント) カスタムボットアカウント
アイコン 灰色の固定アイコン カスタマイズ可能
メッセージ形式 テキストのみ(制限あり) 多様な形式(テキスト、画像、ボタンなど)
構造化データ 限定的 柔軟に対応可能
双方向性 なし あり(Webhookで応答可能)
グループへの通知 トークン発行時の設定のみ 動的に送信先を変更可能

この移行により、システムからの通知がより見やすく、情報量も豊かになりました。ユーザー登録や問診票登録などの重要なイベントが、カスタマイズされたフォーマットでリアルタイムに通知されるようになったことで、チーム内のコミュニケーション効率が大幅に向上しました。

移行結果:動作確認

LINE Messaging APIへの移行が完了したら、実際の動作を確認することが重要です。以下は実際にアプリケーションからLINEグループに送信されたメッセージのスクリーンショットです。

送信されたメッセージの実例

LINE Messaging APIによるグループ通知の例

▲ 実際にLINE Messaging APIを通じてグループに送信されたメッセージ例。ユーザー登録や問診票登録などのイベントがリアルタイムで通知されます。個人情報は黒塗りで保護しています。

実際の通知では、以下のような情報が含まれています:

  1. 新規ユーザー登録通知:

    • 📱 新しいユーザーが登録されました。
    • ユーザー名: [ユーザー名]
    • ユーザーID: [ID番号]
  2. 問診票登録通知:

    • 📋 新しい問診票が登録されました。
    • ユーザー名: [ユーザー名]
    • ユーザーID: [ID番号]
    • 登録日時: [日時]
    • 問診票ID: [ID番号]

LINE NotifyとLINE Messaging APIの比較

LINE NotifyからLINE Messaging APIへの移行により、通知の見た目と機能性に大きな違いが生まれました。

主な変更点

  • 送信元: LINE Notifyという共通アカウントからカスタマイズされたボットアカウントへ
  • メッセージ形式: よりカスタマイズ性が高く、構造化されたデータの送信が可能に
  • アイコンとプロフィール: アプリのブランドに合わせたアイコンとプロフィール設定が可能
  • 情報の詳細度: 必要に応じてユーザーIDや登録日時などの詳細情報を含められる

スクリーンショットからわかるように、LINE Messaging APIによる通知は、チームメンバーにとってより認識しやすく、必要な情報を的確に伝えられるようになりました。特に問診票のような重要なイベントの通知においては、登録日時やIDなどの情報を一目で確認できる形式で提供できることが大きなメリットです。

最後に:移行から得た学び

LINE NotifyからLINE Messaging APIへの移行は単なる技術的な作業ではなく、多くの学びを得る機会となりました。

移行の振り返り

この移行プロジェクトを通じて、特に印象に残ったことは以下の点です:

  1. サービス変更への対応力:

    • 外部APIの廃止は突然起こりうる
    • 代替手段の迅速な実装が重要
  2. ドキュメント探索の重要性:

    • 公式ドキュメントを隅々まで読み込む姿勢
    • 特にグループIDの取得方法は明示的に書かれていなかったため、様々な情報源から情報を集める必要があった
  3. Vercelのサーバーレス環境の利点:

    • ログ機能を活用したデバッグの容易さ
    • 環境変数の管理のシンプルさ
    • 再デプロイの迅速さ

今後の展望

LINE Messaging APIは単なる通知機能以上の可能性を秘めています:

  • リッチメッセージの活用: 画像や動画、ボタンなどを含む高度な通知
  • インタラクティブな機能: ユーザーからの返信に応じたボットの対応
  • Flex Message: 高度なレイアウトカスタマイズが可能なメッセージ形式

これらの機能は今回の移行では実装していませんが、今後のアップデートで取り入れていく予定です。

まとめ

LINE NotifyからLINE Messaging APIへの移行は、当初予想していたよりも複雑でしたが、結果的にはより柔軟で拡張性のある通知システムを構築することができました。

移行を成功させるための重要なポイント:

  • LINE Developers Consoleでの適切な設定
  • 正確なグループIDの取得(Vercel Functionsのログを活用)
  • 認証方法とリクエスト形式の変更への対応
  • 環境変数の適切な管理
  • エラーログの活用によるトラブルシューティング

この記事が、同様の移行を検討している開発者の参考になれば幸いです。予期せぬ変更は開発の世界では日常茶飯事ですが、それを乗り越える過程で技術力と問題解決能力は確実に向上します。

皆さんの開発ライフが実り多きものになりますように!

Discussion

ログインするとコメントできます