やりたいこと

今回のシナリオは、実際に私が運営する東京のレンタルドレスショップEmpty Dressyで本番運用しているものになります。

「実践#06」の続きとして、ShopifyでLINEと連携してアカウント登録後にリッチメニューを切り替えようと思います。

LIFFからアカウントを登録すると、リッチメニューが切り替わっていることが分かります。

リッチメニューを切り替えるには、Integromatでシナリオを実行する前に、

  • リッチメニューを作成する
  • リッチメニューの画像をアップロードする

ということをする必要があります。

詳しくは、公式ドキュメントの「リッチメニューを使う」に掲載されています。

リッチメニューを作成する

リッチメニューはAPIを経由して作成する必要があり、今回は直感的にAPIを操作可能なPostmanを使います。

Bodyには例えば下記のJSON形式の文字列を入れます。

{
    "size": {
      "width": 2500,
      "height": 1686
    },
    "selected": true,
    "name": "richmenu_after",
    "chatBarText": "メニュー",
    "areas": [
      {
        "bounds": {
          "x": 0,
          "y": 0,
          "width": 833,
          "height": 843
        },
        "action": {
          "type": "uri",
          "label": "① 予約",
          "uri": "https://liff.line.me/1654565100-npmwqRox"
        }
      },
     {
        "bounds": {
          "x": 833,
          "y": 0,
          "width": 833,
          "height": 843
        },
        "action": {
          "type": "message",
          "label": "② ID連絡",
          "text": "② ID連絡"
        }
      },
      {
        "bounds": {
          "x": 1666,
          "y": 0,
          "width": 833,
          "height": 843
        },
        "action": {
          "type": "message",
          "label": "③ 返却連絡",
          "text": "③ 返却連絡"
        }
      },
      {
        "bounds": {
          "x": 0,
          "y": 843,
          "width": 833,
          "height": 843
        },
        "action": {
          "type": "message",
          "label": "鍵変更",
          "text": "鍵変更"
        }
      },
      {
        "bounds": {
          "x": 833,
          "y": 843,
          "width": 833,
          "height": 843
        },
        "action": {
          "type": "uri",
          "label": "よくあるご質問",
          "uri": "https://liff.line.me/1654565100-RO5kZ4lM"
        }
      },
      {
        "bounds": {
          "x": 1666,
          "y": 843,
          "width": 833,
          "height": 843
        },
        "action": {
          "type": "message",
          "label": "オペレーターに切り替え",
          "text": "オペレーターに切り替え"
        }
      }
   ]
}

リクエストを実行すると「richMenuId」が返され、画像のアップロードに使うので、メモしておきます。

リッチメニューの画像をアップロードする

続いて、先程作成したリッチメニューに画像をアップロードします。

  • Method: POST
  • URL: https://api.line.me/v2/bot/richmenu/<richMenuId>/content
  • Authorization Type: Bearer Token
  • Token:  <ご自身のチャネルアクセストークン(長期)>
  • Body: binary

「Select File」で画像を選択して送信すると、先程のリッチメニューと画像が紐付きます。

アカウント登録後のリッチメニューを表示[11]

IntegromatとLINEは公式に連携しているものの、リッチメニューの切り替えは公式連携のスコープ外なので、HTTPの「make a request」モジュールを使います。

URLは、動的に取得するLINEのユーザーIDと先程作成したリッチメニューのIDを組み合わせ、ご自身のチャネルアクセストークン(長期)をヘッダーに含み、POSTリクエストを行います。

アカウント登録のお礼を送信[12]

リッチメニューの切り替え後は、LINEの「Send a Push Message」モジュールを用い、アカウント登録のお礼を送信しています。

もちろんプッシュメッセージの送信もHTTPの「make a request」モジュールから送れるのですが、より簡易に、かつ視覚的に分かりやすくするためにLINEのモジュールを使用しています。

[11]と[12]の組み合わせは、その他の条件分岐先でも同様に仕様しています。

以上、Shopifyのアカウント登録前後で、LINEのリッチメニューを切り替える方法についての説明でした。