リッチメニューを試す

リッチメニュープレイグラウンドは、リッチメニューの機能を試すことができるLINE公式アカウントです。本アカウントは、日本語のみに対応しています。日時選択アクションによる日付選択、リッチメニューエイリアスによるリッチメニューの切り替えなど、リッチメニューのさまざまな機能を試すことができます。

リッチメニューを利用するメリットとは?

サービス提供者とエンドユーザー、それぞれの視点から見たリッチメニューのメリットをLINE API Use Caseサイトで確認できます。

リッチメニュープレイグラウンドメイン画面

リッチメニュープレイグラウンドを友だちとして追加する

リッチメニューの機能を試すために、LINEアカウントにリッチメニュープレイグラウンドを友だちとして追加します。リッチメニュープレイグラウンドの追加方法は、以下のとおりです。

リッチメニュープレイグラウンドはスマートフォンで試してください

リッチメニューは、デスクトップ版(macOS、Windows)のLINEでは表示されません。リッチメニュープレイグラウンドはスマートフォン版のLINEで試してください。

追加する経路追加する方法
URLスマートフォンのブラウザでhttps://lin.ee/7ALASDvAを開いて、友だち追加します。
QRコードリッチメニュープレイグラウンドのQRコードをLINEで読み込んで、友だち追加します。1

リッチメニュープレイグラウンドのQRコード
IDリッチメニュープレイグラウンドのLINE ID(@try_richmenu)をLINEで検索して、友だち追加します。2

リッチメニュープレイグラウンドの共通機能

リッチメニュープレイグラウンドを友だちに追加すると、リッチメニューに設定されているアクションを試せるようになります。リッチメニューのレイアウトや、アクションを試した後のアクションの詳細を確認する方法などを説明します。

リッチメニューのレイアウト

リッチメニュープレイグラウンドのメインとなるリッチメニューでは、4種類の機能を提供しています。

  1. タブ:さまざまな動作を試すためのメニュー。
  2. ナビゲーションボタン:タブグループ間を移動する。
  3. アクションボタン:ボタンに設定されたアクションを実行する。設定可能なパラメータがアクションにある場合は、パラメータごとのボタンが表示されます。
  4. ヘルプボタン:対象のアクションのドキュメントを開く。

メインメニュー

アクションの詳細

アクションを試すと、リッチメニュープレイグラウンドはそのアクションを実行し、実行されたアクションの詳細を表示します。これは、特にアクションが視覚的な結果を表示しない場合に、アクションが実行されたことを確認するのに役立ちます。アクションの詳細には、アクションの説明、アクションの設定(パラメータ)、LINEプラットフォームがボットサーバーに送信したWebhookイベントなどが含まれます。

アクション実行後のメッセージ

リッチメニュープレイグラウンドで試せるアクション

リッチメニュープレイグラウンドでは、以下のアクションを試せます。

メッセージアクションを試す

このタブでは、リッチメニューからメッセージを送信するためのメッセージアクションを実行することができます。

メッセージアクションを試す

メッセージアクション

LINE公式アカウントとのトークで、ユーザーがリッチメニューからメッセージを送信すると、LINEプラットフォームは対応するメッセージイベントをボットサーバーに送信します。ボットサーバーは、メッセージイベントで返された応答トークンを使って応答メッセージを送信することができます。

ボタン説明設定値(アクションオブジェクトの値)
メッセージ送信メッセージを送信します。{"type":"message","label":"メッセージを送信する","text":"message sent successfully!"}

ポストバックアクションを試す(1)

このタブでは、リッチメニューからポストバックアクションを実行することができます。このアクションを実行すると、LINEプラットフォームはポストバックアクションオブジェクトのdataプロパティに指定された文字列を含むポストバックイベントをボットサーバーに対して送信します。

ポストバックアクションを試す(1)

ポストバックアクション

ポストバックアクションを持つリッチメニューをユーザーがタップすると、LINEプラットフォームはボットサーバーにポストバックイベントを送信します。このポストバックイベントには、ポストバックアクションのdataプロパティに指定した文字列が含まれます。

dataプロパティに指定した内容は、ユーザーには表示されません。これにより、一意のパラメータや識別子などのデータがボットサーバーに安全に送信されることが保証されます。ポストバックイベントから取得した応答トークンを使って、応答メッセージを送信することができます。

ボタン説明設定値(アクションオブジェクトの値)
displayTextありdisplayTextを設定したポストバックアクションを実行します。{"type":"postback","label":"ディスプレイテキストあり","data":"actionId=21","displayText":"ディスプレイテキストです。トーク画面に表示されます。"}
displayTextなしdisplayTextを設定していないポストバックアクションを実行します。{"type":"postback","label":"ディスプレイテキストなし","data":"actionId=22"}
displayTextについて

displayTextプロパティにテキストを設定しておくと、ポストバックアクションが設定されたリッチメニューをユーザーがタップした場合に、そのテキストがユーザーからのメッセージとしてLINEのトーク画面に表示されます。displayTextプロパティに設定したテキストは、トーク画面に表示されるだけで、メッセージイベントとしてボットサーバーに送信されることはありません。

ポストバックアクションを試す(2)

このタブでは、リッチメニューを開く、および閉じるポストバックアクションを試せます。ポストバックアクションを実行すると、dataプロパティに指定された文字列を含むポストバックイベントがLINEプラットフォームからボットサーバーへ送信されます。

ポストバックアクションを試す(2)

ボタン説明設定値(アクションオブジェクトの値)
リッチメニューを開くinputOption:openRichMenuが設定されたポストバックアクションを実行します。{"type":"postback","label":"リッチメニューを開く","data":"actionId=","inputOption":"openRichMenu"}
リッチメニューを閉じるinputOption:closeRichMenuが設定されたポストバックアクションを実行します。{"type":"postback","label":"リッチメニューを閉じる","data":"actionId=","inputOption":"closeRichMenu"}

ポストバックアクションを試す(3)

このタブでは、キーボードおよびボイスメッセージ入力モードを開くポストバックアクションが設定されたリッチメニューを試せます。ポストバックアクションの実行と同時に、dataプロパティに指定された文字列を含むポストバックイベントがLINEプラットフォームからボットサーバーへ送信されます。

ポストバックアクションを試す(3)

ボタン説明設定値(アクションオブジェクトの値)
キーボードを開くinputOption:openKeyboardが設定されたポストバックアクションを実行します。{"type":"postback","label":"キーボードを開く","data":"actionId=","inputOption":"openKeyboard"}
キーボードを開く(fillinTextあり)inputOption:openKeyboardfillInTextが設定されたポストバックアクションを実行します。{"type":"postback","label":"キーボードを開くフィルインテキストあり","data":"actionId=","inputOption":"openKeyboard","fillInText":"---\予約番号: \予約メニュー番号: \n予約日時: \n---"}
ボイスメッセージ入力を開くinputOption:openVoiceが設定されたポストバックアクションを実行します。{"type":"postback","label":"ボイスメッセージ入力モードを開く","data":"actionId=","inputOption":"openVoice"}

URIアクションを試す

このタブでは、リッチメニューからURIアクションを実行することができます。このアクションを実行すると、アクションに設定されたURIがウェブブラウザで開かれます。

URIアクションを試す

ボタン説明設定値(アクションオブジェクトの値)
URLを開くURIアクションを実行します。{"type":"uri","label":"URLを開く","uri":"https://developers.line.biz/docs/messaging-api/actions/#uri-action"}
外部ブラウザで開くクエリパラメータにopenExternalBrowser=1を付与した状態でURIアクションを実行します。詳しくは、「URLを外部ブラウザで開く」を参照してください。{"type":"uri","label":"外部ブラウザで開く","uri":"https://developers.line.biz/docs/messaging-api/actions/?openExternalBrowser=1#uri-action"}
Chromeカスタムタブで開く(Androidのみ)クエリパラメータにopenInAppBrowser=0を付与した状態でURIアクションを実行します。詳しくは、「URLを外部ブラウザで開く」を参照してください。{"type":"uri","label":"Chromeカスタムタブで開く","uri":"https://developers.line.biz/docs/messaging-api/actions/?openInAppBrowser=0#uri-action"}
設定を確認するURIアクションを実行せず、URIアクションオブジェクトの設定値だけ確認します。-
openInAppBrowserについて

openInAppBrowserパラメータは、Android版LINEにおいてのみLINE内ブラウザを開くことができます。openInAppBrowserパラメータの仕様について詳しくは、「URLを外部ブラウザで開く」を参照してください。

日時選択アクションを試す

このタブでは、リッチメニューから日時選択アクションを実行することができます。このアクションを実行すると、日付と時刻の選択ダイアログが表示されます。日付を選択すると、LINEプラットフォームは選択した日付と時刻のポストバックイベントをボットサーバーに送信します。

日時選択アクションを試す

ボタン説明設定値(アクションオブジェクトの値)
日付と時刻を選択(datetimeモード)modeプロパティにdatetimeが設定された日時選択アクションを実行します。{"type":"datetimepicker","label":"datetimeモード","data":"actionId=31","mode":"datetime"}
初期値設定あり(initialプロパティあり)initialプロパティが設定された日時選択アクションを実行します。{"type":"datetimepicker","label":"初期値設定あり","data":"actionId=32","initial:"2021-11-01t00:00","mode":"datetime"}
最大・最小値設定あり(min、maxプロパティあり)minおよびmaxプロパティが設定された日時選択アクションを実行します。{"type":"datetimepicker","label":"最大・最小値設定あり","data":"actionId=33","mode":"datetime","max":"2021-12-31t23:59","min":"2021-11-01t00:00"}
日付を選択(dateモード)modeプロパティにdateが設定された日時選択アクションを実行します。{"type":"datetimepicker","label":"dateモード","data":"actionId=34","mode":"date"}
時刻を選択(timeモード)modeプロパティにtimeが設定された日時選択アクションを実行します。{"type":"datetimepicker","label":"timeモード","data":"actionId=35","mode":"time"}

リッチメニュー切替アクションを試す

このタブでは、リッチメニューからリッチメニュー切替アクションを実行することができます。このアクションを実行すると、リッチメニューはリッチメニューエイリアスで定義されたメニューに切り替わります。リッチメニューが切り替わると、LINEプラットフォームはボットサーバーにポストバックイベントを送信します。このイベントには、ポストバックアクションオブジェクトのdataプロパティとpostback.paramsオブジェクトに指定した値が含まれます。

リッチメニュー切替アクションを試す

ボタン説明設定値(アクションオブジェクトの値)
リッチメニューを切り替えるリッチメニュー切替アクションを実行します。{"type":"richmenuswitch","label":"リッチメニューを切り替える","richMenuAliasId":"richmenu-richmenuswitch_2","data":"actionId=42"}
小さいサイズのリッチメニューに切り替えるリッチメニュー切替アクションを実行します。リッチメニューオブジェクトのsizeプロパティのheightを低く設定したリッチメニューに切り替えます。{"type":"richmenuswitch","label":"小さいサイズのリッチメニューに切り替える","richMenuAliasId":"richmenu-richmenuswitch_3","data":"actionId=43"}

Footnotes

  1. 詳しくは、『LINEみんなの使い方ガイド』の「リンクやQRコードで友だち追加する」を参照してください。
  2. 詳しくは、『LINEみんなの使い方ガイド』の「ID検索から友だちを追加する」を参照してください。