LINE

LINE新API　リッチメニューを使ってみた

2017年10月23日(月)にLINEから、新APIが公開されました。
LINE@やLINE公式アカウントは、画面の下側に、リッチメニューと呼ばれるメニューを設置することが可能です。
公開されたAPIは、リッチメニューをAPI経由で設定できるようにしたものです。

1.はじめに
従来、リッチメニューは、LINE MANAGERからしか設定できませんでした。
また、設定できるメニューも、固定のものしか作ることができず、デザインも、ガイドラインに沿った形式のものしか受付ていませんでした。
(公開期間の設定項目があるため、時間によって、変動するメニューは作れました)

新APIリッチメニューは、デザインフリーでかつ、任意のタイミングで、特定のユーザーに対してのみ、メニューを変更することが可能です。

2.使い方
新APIは、下記内容で構成されています。

  1. リッチメニューを取得する
  2. リッチメニューを作成する
  3. リッチメニューを削除する
  4. ユーザーのリッチメニューのIDを取得する
  5. リッチメニューとユーザーをリンクする
  6. リッチメニューとユーザーのリンクを解除する
  7. リッチメニューの画像をダウンロードする
  8. リッチメニューの画像をアップロードする
  9. リッチメニューのリストを取得する

リッチメニューは、1BOTに対して、10個まで定義可能で、1つ1つのリッチメニューに、LINE上で発行された固有のIDが付与されている形で管理されています。
まず、2でリッチメニューの定義をLINE上に作成し、発行されたリッチメニューIDを取得します。8で、先ほど作成したリッチメニューIDを使って、メニュー画像をアップロードします。5と6で、リッチメニューを適用したり、隠したり、を実際に行います。

3.リッチメニューの定義を作成
リッチメニューを作成するに従って、下記のようなプログラムを作成します。
ちなみに、sizeのところを、width: 2500、height: 843とすると、縦幅が半分のリッチメニューを作成できます。
今回のAPIで作成できるリッチメニューのサイズは、この2パターンのみとなっています。

http_client = HTTPClient.new
endpoint_uri = 'https://api.line.me/v2/bot/richmenu'
response = http_client.post_content(endpoint_uri, {
	size'=> {
		'width'=> 2500,
		'height'=> 1686
	},
	'selected'=> true,
	'name'=> 'リッチメニューサンプル',
	'chatBarText'=> 'チェック',
	'areas'=> [
		{
			'bounds'=> {
			'x'=> 0,
			'y'=> 0,
			'width'=> 1250,
			'height'=> 843
		},
		'action'=> {
			'type'=> 'postback',
			'data'=> '新商品紹介'
		}
			・
			・
			・
		}
	]
}.to_json,
'Content-Type' => 'application/json; charser=UTF-8',
'Authorization' => 'Bearer #{self.bot.token3}'
)

作成に成功すると、下記のようなレスポンスが200番で返却されます。

{
  "richMenuId": "{richMenuId}"
}

このrichMenuIdが、LINE上で管理されているリッチメニューのIDとなります。
この後、このrichMenuIdに対して、画像をアップロードしていきます。

4.リッチメニューに画像をアップロード
リッチメニューの画像をアップロードするに従って、下記のようなプログラムを作成します。
エンドポイントに、3で取得したrichMenuIdを指定する仕様になっています。
また、実際にアップロードする画像は、URLでないため、Content-Type: image/jpegな、データを送る必要があります。

http_client = HTTPClient.new
endpoint_uri = "https://api.line.me/v2/bot/richmenu/{3で取得したrichMenuId}/content"
http_client.post_content(endpoint_uri, {画像データ},
	'Content-Type' => 'image/jpeg',
	'Authorization' => "Bearer {アクセストークン}"
)

もし、URLベースで画像をアップロードする場合は、下記のように指定してあげるとOKです。

open({画像のURL}) { |image|
	http_client = HTTPClient.new
	endpoint_uri = "https://api.line.me/v2/bot/richmenu/{3で取得したrichMenuId}/content"
	http_client.post_content(endpoint_uri, image.read,
		'Content-Type' => 'image/jpeg',
		'Authorization' => "Bearer {アクセストークン}"
	)
}

5.リッチメニューを実際に適用
リッチメニューとユーザーをリンクするに従って、下記のようなプログラムを作成します。

endpoint_uri = "https://api.line.me/v2/bot/user/{UserId}/richmenu/{richMenuId}"
res = http_client.post_content(endpoint_uri, nil,
	'Content-Type' => 'application/json; charser=UTF-8',
	'Content-Length' => 0,
	'Authorization' => "Bearer {アクセストークン}"
)

上のコールを呼んだタイミングでユーザー画面にリッチメニューが表示されます。

LINEのAPI、便利になりましたね。
リッチメニューを使うことで、ユーザーのステートごとに、メニューを変えられるため、会員/非会員でメニューを変えたりすることができます。
後は、ImageMapを送った時に、リッチメニューが表示されていると、ImageMapが見えない、というユーザー様の声は多数あるため、LINEさんには、リッチメニューの表示/非表示のAPI公開を頑張っていただきたいですね！

RECOMMENDこちらの記事も人気です。