LINE Messaging APIのリッチメニュー機能を実装してみました

LINE DEVELOPER DAY 2017にて発表された、リッチメニューを制御するAPIが23日に公開されました。
ユーザーごとにメニューを出し分けたり、リッチメニューを解除(テキストフィールドを表示)したりすることが可能です。

検証用のアカウントにこの機能を実装してみましたので、ご紹介します。
【2017/11/02 15:30追記】
公開アカウントに実装しました! → @niftyアルバイト 公式アカウント

機能概要

リッチメニューはこれまで、LINE@Manager上でのみ作成することが可能でした。
LINE Messaging APIを使用したリッチメニュー機能では、以下のような機能を実装することが可能です(2017/10/27現在)。

  • ハーフサイズ(縦の長さが半分)のリッチメニューを作成する
  • 動的にリッチメニューを作成・削除することができる
  • ユーザーごとに、作成済みのリッチメニューのうちどのメニューを使うか(または使わないか)を設定できる

なお、APIによるリッチメニューは、LINEアプリのバージョン7.14.0以降(2017/10/23頃リリース)で対応しています。それ以前のバージョンでは、LINE@ Manager上で設定したメニューが表示されます。

実装方法

実装方法は リッチメニューを使う および 公式リファレンス に記載されている通りですが、おおまかな流れをご紹介します。

  1. リッチメニューを作成(幅と高さ、ボタンの位置とアクションなどを指定)し、生成されたIDを取得する
  2. 取得したIDを含むURLに、メニューで使用する画像をアップロード
  3. ユーザーごとに、表示するリッチメニューのIDを指定する

それぞれ、リファレンスにエンドポイントのURLが記載されています。また、サンプルが公開されています

SDKについて

LINE Messaging APIではSDKが提供されていますが、今回のリッチメニューAPIについてはまだ対応されていません(2017/10/27現在)。

対応を待ってもよかったのですが、せっかくオープンソースなのでPHP版を実装してみました

プルリクエストを出そうかと思ったのですが、ただし、画像のアップロード等が実装できていない、テストが書けていない、クラス名と役割に矛盾が生じてしまったなどの理由から、出していません。

混乱を生じないように実装例の掲載も控えておきますが、もし使ってみたい方は、RichMenuBuilderクラス、RichMenuBuilderディレクトリ、LINEBotクラスなどを参考の上で実装してみてください。
なお、LINE\LINEBot\RichMenuBuilder\AreaBuilder というクラスを使用しますが、ImagemapのAreaBuilderとはIFが異なりますのでご注意ください。

LINEアプリ上での表示

今回は、半分のサイズのリッチメニューを実装してみました(iPhone6Sで撮影)。

linebot-halfmenu

これまで、リッチメニューを表示しているとメッセージ領域が狭くなる問題がありましたが、このサイズだと十分表示することが可能です。

また、LINE@Managerからメニューを削除した状態で、APIのリッチメニューも解除すると、通常のテキストフィールドを表示することが可能です。

一時的にユーザーからの自由入力を受け付けたい場合、これまでは画面左下の切り替えボタンを押してもらう必要がありましたが、今後はAPIを使うことでスムーズに切り替えが可能です。@niftyアルバイト アカウントのバイト探し機能では、場所をテキストで入力してもらっているので、この機能を使うことでユーザー体験が向上できそうです。

まとめ

リッチメニューを使うではゲームコントローラーの例が紹介されていますが、ユーザーの行動によってメニューを出し分けたり、ABテストをしたりするなど、さまざまな活用方法が考えられる機能です。

APIをたたけばすぐに使える機能ですので、活用してみてはいかがでしょうか。