非エンジニアがAPIを叩いてLINEのリッチメニューを作りました

エンジニアの隣の席に座ってる非エンジニアの岡田です。
ソーシャルPLUSのプロダクトマネージャーをやってます。

ソーシャルPLUSは WebAPI で提供するサービスなので、 API が叩けないと逐一エンジニアの手を止める事になってしまい、本来やるべき開発に少なからず影響が出るため、 curl から学び、今は postman を愛用しています。

個人的には有料プランにしても良いくらいお世話になってます。お世話になった恩返し（有料プラン移行）は未だできていません。

10月23日に LINE の Messaging API のリッチメニュー機能がリリースされました。

ソーシャルPLUSは LINE ログインにも対応しており、Messaging API をブラウザベースでメッセージが送信できるメッセージマネージャーのオプション機能もあります。リッチメニューは Messaging API だけでなく LINE ログインとも密接に関わる為、早速 API を叩いて新しいリッチメニューを作ってみました。

完成したリッチメニュー

今回は高さを半分にして、イベントを4分割にしました。 個人的には半分の高さのリッチメニューの方がより見やすく、使いやすく感じました。

参考までに古いリッチメニューです。

デカイですね。比較した画像も見てもわかる通りだいぶスッキリしています。

使った API は3つ

LINE developers のリッチメニューを使うを見ながら作りました。 リッチメニューを API で作るには3つの API を叩く必要があります。

1. 枠の大きさとイベントの座標指定
2. 画像アップロード
3. ユーザー指定

それぞれ postman のリクエストになります。 リッチメニューの画像は Pixelmator で作り、画像の作成も含めて1時間くらいかかってしまいました。

枠の大きさとイベントの座標指定

POST /v2/bot/richmenu HTTP/1.1
Host: api.line.me
Authorization: Bearer ********************
Content-Type: application/json

{
  "size": {
    "width": 2500,
    "height": 843
  },
  "selected": true,
  "name": "nice richmenu",
  "chatBarText": "touch me",
  "areas": [
    {
      "bounds": {
        "x": 0,
        "y": 0,
        "width": 1250,
        "height": 421
      },
      "action": {
        "type": "message",
        "text": "新しいリッチメニューです。"
      }
      
    },
        {
      "bounds": {
        "x": 1250,
        "y": 0,
        "width": 2500,
        "height": 421
      },
      "action": {
        "type": "datetimepicker",
        "data": "datetime=001",
        "mode": "datetime"
      }
      
    },
        {
      "bounds": {
        "x": 0,
        "y": 421,
        "width": 1250,
        "height": 843
      },
      "action": {
        "type": "uri",
        "uri": "https://www.feedforce.jp/"
      }
      
    },
        {
      "bounds": {
        "x": 1250,
        "y": 421,
        "width": 2500,
        "height": 843
      },
      "action": {
        "type": "uri",
        "uri": "https://socialplus.jp/"
      }
      
    }
  ]
}

3つ目の座標設定でxとyが混乱してきました。 ここで作成したリッチメニューの ID が発行されます。

画像アップロード

POST /v2/bot/richmenu/richmenu-****************/content HTTP/1.1
Host: api.line.me
Authorization: Bearer ********************
Content-Type: image/png

undefined

postman で画像のアップロードのやり方がわからず一番時間を費やしました。

Body>binary>ファイル選択でした。

ユーザー指定

POST /v2/bot/user/U********************
/richmenu/richmenu-******************** HTTP/1.1
Host: api.line.me
Authorization: Bearer ********************
Content-Type: multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW

リッチメニューの ID と userId をリンクするだけなので一番楽でした。
作業はこれで終わりです。

どんな事ができるようになったのか

今までは LINE@Manager 上から高さは固定で、メニューの枠をいくつかのパターンから選択することしか出来ませんでしたが、今回のリリースで高さが2パターンから選べるようになり、イベントが発生する箇所も特定のパターンから選択するのではなく、自由に決められるようになりました。

一番大きな変更点はユーザー毎にリッチメニューを出し分けする事が可能になった事です。最大で10件までリッチメニューを作成する事ができるので、ユーザーの属性に応じてユーザーの取りたいアクションをショートカット的に出し分けが可能になります。

ECサイトの LINE アカウントであればリッチメニューにレコメンド商品を出すことも可能になり、リピート購入された事がある商品がワンタッチで購入できるようなイベントを常駐させることも可できます。

既に会員登録済みで、LINEのID連携まで完了しているユーザーであればMyページへのショートカットや、ユーザー属性に応じたアンケートやクーポン、特定のコンテンツへのリンク等、いろいろとコミュニケーションの入り口して活用できます。

参考までに、LINE@Manager から作成したリッチメニューより API で作成したリッチメニューの方が優先して表示されます。

今後の展望

新しいリッチメニューは自由度が高い故に、企業のサービスに合わせた実用的な設計をするのは容易ではなく、普及するにはもう少し時間がかかりそうです。

LINEアカウントの担当者が管理画面ベースでリッチメニューのパターンを作成し、属性毎に設定できるような形で提供したいなと思ってます。