これは「関連記事表示 by Vector Search 2.0」のデモサイトです。記事コンテンツはソリューションブログから引用しています。
Craft SitesとCraft Functionsを使って、LINEリッチメニューの管理画面を作成する

Craft SitesとCraft Functionsを使って、LINEリッチメニューの管理画面を作成する

こんにちは、Customer Engineer の福山です！最近、ピアノを購入してたくさん練習しています。ずっと、駅のピアノでサラッと演奏することに憧れを持っていて、思い切って購入しちゃいました！腕を磨いていろんな駅を巡れるように頑張ろうと思っています。

さて、今回は Craft SitesとCraft Functions を使って、LINE Messaging API を活用したリッチメニューの管理画面を作成する方法を紹介します。リッチメニューとは、以下の画像のように、LINEのトーク画面下部に表示されるインターフェースのことです。ユーザーがタップすることで特定のアクション（メッセージ送信、リンク遷移など）を実行できます。

リッチメニューは LINE Official Account Manager でも作成することができますが、以下のような制約があります。

制約１：ユーザーごとの出し分けができない

例えば、ユーザーIDを指定して、個別にリッチメニューを表示する「ユーザー単位のリッチメニュー」は公式UIでは対応していません。

（詳細は、ユーザー単位のリッチメニューを使う - LINE Developers をご覧ください）

制約２：高度なアクションの設定ができない

ポストバック、日時選択、リッチメニュー切替などのWebhookを活用したインタラクティブなアクションは、Messaging APIを使用しないと実現できません。

（詳細は、アクション | LINE Developersをご覧ください）

そこで、今回LINE Messaging APIを活用することで、これらの制約にとらわれず、より柔軟にリッチメニューを作成することができます。

例えば、ユーザーIDを指定して個別にリッチメニューを配信することで、エンドユーザーを年齢や性別などの属性でセグメントし、それぞれに最適なメニューを表示することが可能になります。アパレルブランドでは、10代女性にはトレンド商品、30代男性にはビジネスウェアなど、ユーザー属性に応じたブランドページを表示するといった施策が考えられます。

また、ポストバックアクションを活用することで、「予約」「問い合わせ」「申し込み」など、ユーザーアクションをLINE内で完了させることができます。そのため、外部サイトへの遷移を減らし、エンドユーザーの離脱を防ぐことが期待できます。

このようにMessaging API を使うことで、リッチメニューでできることの幅が格段に広がります。しかし、ゼロから開発することに対して、ハードルが高く感じる方も多いでしょう。そこで今回は、Craft Sites と Craft Functions を使って、こうした高度な機能を誰でも簡単に扱える管理画面として構築する方法を紹介していきます。

アウトプットイメージ

今回の最終的な成果物は以下のようなものになります。これらは全てCraft Sitesで作成しています。

リッチメニュー作成フォーム

こちらはリッチメニューを作成するためのフォームとなっており、「デフォルトリッチメニュー」、「ユーザー単位のリッチメニュー」のどちらの作成にも対応しています。

デフォルトリッチメニューに関しては、リッチメニューを使う - LINE Developersをご覧ください。

まずテンプレートを選びます。その後、自分で用意した画像をアップロードし、各エリアに必要な項目を入力していきます。

ポストバック、日時選択アクションなどを使用する場合、通常は Messaging API に Webhook URL を設定し、ユーザーの操作に応じてデータをサーバー側で受け取る必要があります。ただし、今回のサンプルでは Webhook の受信処理は実装していませんので、ポストバックアクション等を設定しても、サーバー側でデータを受け取ることはできない点に注意してください。Webhook の設定方法については後述します。

リッチメニュー一覧表示画面

作成したリッチメニューが一覧表示されます。配信している場合は、「配信中」という文言に合わせて、そのメニューのタイプも合わせて表示されます。「ユーザー単位のリッチメニュー」の場合には、配信日時も表示されます。

リッチメニューが表示される優先順位について、以下の点に注意してください。

  1. 「ユーザー単位のリッチメニュー」は「デフォルトリッチメニュー」よりも優先して表示されます

  2. 「ユーザー単位のリッチメニュー」において、同じユーザーIDを対象にしているメニューが複数ある場合、配信日時が新しいものが優先されます

以下の例だと「テスト配信２」と「テスト配信３」は同じユーザーをターゲットにしているので、配信日時が新しい「テスト配信３」が優先して表示されています。（赤の下線は分かりやすいように表示しているだけで、実際の画面では表示されていません）

詳しくはユーザー単位のリッチメニューを使う - LINE Developers をご覧ください

リッチメニュー詳細画面

こちらは作成したリッチメニューの詳細画面です。デフォルトリッチメニューの場合は、デフォルトリッチメニューを解除することができます。

ユーザー単位のリッチメニューの場合は、配信しているユーザーのIDと配信日時が表示されます。そして、先程とは反対に、デフォルトリッチメニューに設定することができます。また、どちらの場合にも、リッチメニューの削除を行うことができます。

こちらが構成図です。

まず、上側の「リッチメニュー作成フォーム」の処理の流れは以下のようになります。

  • ユーザーがCraft Sitesで作成されたフォームに必要事項を入力する
  • Craft Sitesがフォームに対応したCraft Functionsにリクエストを送信する
  • Craft FunctionsがLINE Messaging APIにリッチメニュー作成のリクエストを送信する
  • リクエストが成功すると公式LINEにメニューが反映される
  • 「ユーザー単位のリッチメニュー」を作成する場合はCraft KVSにユーザーIDを保存する

次に、下側の「リッチメニュー一覧、詳細画面」の処理の流れは以下の通りです。

  • Craft SitesからCraft Functionsへデータの取得や削除のリクエストを送信する
  • Craft FunctionsがLINE Messaging APIに処理のリクエストを送信する
  • 一覧や詳細画面を表示する際にCraft KVSからユーザーIDと配信日時を取得する
    • ユーザーIDの有無に応じて、Craft Sitesが「ユーザー単位のリッチメニュー」と「デフォルトリッチメニュー」の表示を出し分ける
    • 配信日時の有無によって、現在反映されているメニューを判断することが可能になる

以上が今回のソリューションの処理の流れになります。

注意点

このソリューションを活用するためには、以下の前提条件を満たしている必要があります。

  • Craft Functions、Craft Sites、Craft KVSを利用できるKARTEプロジェクトが必要です
    • 本ソリューションの実現にあたっては、KARTE CraftのGrowthプランへのお申し込みが必須です
  • 公式LINEアカウントは作成済みの前提で進めます

設定手順

設定の手順は次の通りです。

  1. LINE チャネルアクセストークンを Craft Secret Manager に登録する
  2. [フォーム画面用] Craft Functionsのファンクションを作成する
  3. [一覧、詳細画面用] Craft Functionsのファンクションを作成する
  4. Craft SitesでWebページを作成する

順番に見てみましょう。

1. LINE チャネルアクセストークンを Craft Secret Manager に登録する

LINE Developersコンソールで運用中のLINE Messaging APIチャネルを開いて、「Messaging API設定」のタブを押すと「チャネルアクセストークン」を確認することができます。

チャネルアクセストークンは Messaging APIを使う際に必要になります。

トークンをコピーしたら、安全に使用するためにCraft Secret Managerに登録します。

  • [Craft > シークレット]でシークレットを新規作成し、わかりやすい名前で保存します

  • メモしておいたアクセストークンを入力し、シークレットを作成します

  • シークレット名は、Craft Functions作成時に必要なのでメモしておきましょう

2. [フォーム画面用]Craft Functionsのファンクションを作成する

リッチメニュー作成フォームに対応したCraft Functionsを作成します。

  • 「 [フォーム画面用]Craft SitesとCraft Functionsを使って、LINEリッチメニューの管理画面を作成する 」というテンプレートを検索し[取得]ボタンをクリックします

  • [反映] ボタンをクリックします

  • [設定 > ファンクションのタイプ] で「HTTPタイプ」を選択します

  • [変数] タブで次の変数の値を設定してください

    • LOG_LEVEL

      • 出力するログのレベルを、ERROR/WARN/INFO/DEBUGから指定します

    • KEY_PREFIX

      • KVSのキーを一意に設定するための接頭辞です
      • 今回であれば以下のような名前が考えられます
      • management_line_rich_menus

    • KVS_DATA_VALIDITY_MINUTE

      • KVSのデータの有効期間を表し、分単位で指定します
      • KVSのデータの有効期間は、最長1ヶ月であることに注意してください
      • 詳しくはCraft Key-Value Store にデータを保存するをご覧ください

    • LINE_CHANNEL_ACCESS_TOKEN_SECRET

      • LINEチャネルアクセストークンを登録したシークレットの名前です

  • 適当なファンクション名をつけて [デプロイ] します

  • 保存完了後にページをリロードすると、[設定] タブでエンドポイントURLが生成されているので、それをメモしておいてください

    • エンドポイントURLは、この後の手順で説明するCraft Sitesの中で使用します

なお、テンプレートのソースコードはGitHubで公開しています。

craft-codes/craft-functions/create-line-rich-menu at main · plaidev/craft-codes

3. [一覧、詳細画面用]Craft Functionsのファンクションを作成する

一覧、詳細画面に対応したCraft Functionsのファンクションを作成します。

  • 再び[ファンクション > 新規作成 > テンプレートから作成]を選び、必要な設定を行います。

  • 「 [一覧、詳細画面用]Craft SitesとCraft Functionsを使って、LINEリッチメニューの管理画面を作成する 」というテンプレートを検索し[取得]ボタンをクリックします

  • [反映] ボタンをクリックします

  • [設定 > ファンクションのタイプ] で「HTTPタイプ」を選択します

  • [変数] タブで次の変数の値を設定してください

    • LOG_LEVEL

      • 出力するログのレベルを、ERROR/WARN/INFO/DEBUGから指定します

    • KEY_PREFIX

      • KVSのキーを一意に設定するための接頭辞です
      • 先ほど設定したprefixと同じ名称にしてください

    • LINE_CHANNEL_ACCESS_TOKEN_SECRET

      • LINEチャネルアクセストークンを登録したシークレットの名前です

  • 適当なファンクション名をつけて [デプロイ] します

  • 保存完了後にページをリロードすると、[設定] タブでエンドポイントURLが生成されているので、それをメモしておいてください

    • エンドポイントURLは、この後の手順で説明するCraft Sitesの中で使用します

なお、テンプレートのソースコードはGitHubで公開しています。

craft-codes/craft-functions/manage-line-rich-menus at main · plaidev/craft-codes

4. Craft SitesでWebページを作成する

Craft Sitesを使用して、リッチメニューの管理画面を作成します。

  • [Craft > サイト]に移動し、ページを追加したいサイトを選択します

    • サイトが無い場合は新規作成します

  • [Copilot > テンプレート] を開きます

  • 「 Craft SitesとCraft Functionsを使って、LINEリッチメニューの管理画面を作成する 」というテンプレートを検索し[コピー]ボタンをクリックします

  • ディレクトリ毎の用途は以下の通りです

    • /create-rich-menu-page配下は、「リッチメニュー作成フォーム用」です
    • /rich-menu-list-page配下は、「リッチメニュー一覧表示用」です
      • /rich-menu-detail配下は、「リッチメニュー詳細表示用」です
    • /assets配下は、リッチメニューを作成する際のテンプレート画像を保管しています

  • /create-rich-menu-page/index.jsファイル内の定数の値を設定します

    • CREATE_RICH_MENU_ENDPOINTは、手順２で作成した[フォーム画面用]ファンクションのエンドポイントのURLを指定します
    • PUBLIC_SITES_DOMAINは、今回のリッチメニュー管理画面を公開するドメインを指定します
      • 今回の例だと、example.comがそれに該当します

  • /rich-menu-list-page/index.jsファイル内の定数の値を設定します

    • MANAGE_LINE_RICH_MENUS_ENDPOINTは、手順３で作成した[一覧、詳細画面用]ファンクションのエンドポイントのURLを指定します
    • PUBLIC_SITES_DOMAIN は、今回のリッチメニュー管理画面を公開するドメインを指定します
      • 今回の例だと、example.comがそれに該当します

  • /rich-menu-detail/detail.js/ファイル内の定数の値は、/rich-menu-list-page/index.jsと同じになります

    • MANAGE_LINE_RICH_MENUS_ENDPOINT
    • PUBLIC_SITES_DOMAIN

  • 変更を保存し、対象の全ファイルを公開します

  • /create-rich-menu-page/index.htmlの[サイトで見る] から表示用のサイトURLを開いておきます

実際に動かしてみる

全ての設定が完了したら、実際にリッチメニューを作成し、作成したものが一覧、詳細画面で表示されるか確認してみましょう。

  • フォーム画面でリッチメニューを作成します

  • 一覧画面に遷移して、作成したものが表示されているか確認します

  • ぜひLINE上でも実際に配信できているか確認してみてください

  • 表示されているメニューをクリックして、詳細画面に移動することを確認します

全ての設定が正しければ、作成したリッチメニューの情報が表示され、「デフォルトリッチメニュー」の設定、解除やメニューの削除ができると思います。

Webhookを活用して、ポストバックアクションや日時選択アクションなどを使用したい場合

ポストバックアクション等のサーバーが必要なアクションを使用したい場合は、「Messaging API 設定」のタブの中にある「Webhook URL」という箇所に、サーバーのエンドポイントのURLを設定します。これにより、ユーザーがリッチメニューをタップしたときの操作内容（たとえば「予約する」「問い合わせる」など）をサーバー側で受け取り、対応する処理を自動で行えるようになります。

今回のソリューションでは Webhook の受信処理は実装していませんが、必要に応じて各自でサーバーを実装することで、こうした連携も可能です。

おわりに

今回は Craft SitesとCraft Functions を使って、LINE Messaging API を活用したリッチメニューの管理画面を作成する方法を紹介しました。このソリューションを導入することで、複雑な実装の手間がかかることなく、 高度なリッチメニューの設定を簡単にできると思います。ぜひ試してみてください！

プレイドでは、新しいソリューションを共に創り出す仲間を募集しています。興味がある方は気軽にお問い合わせください。

Tags: