メニュー切り替え機能でタブ切替え風のリッチメニューを作る
リッチメニューの「メニュー切り替え」機能を使ったタブ切り替えの方法をご案内します。
リッチメニューのタブ切り替えが動かない場合はこちらをご確認下さい。
リッチメニューのタブ切り替えが動作しません今回の例で作成するメニュー切替動作
作成時の ポイント
- デフォルトにするメニューと、切替え用のリッチメニューを作成する（今回は合計3枚）
- タップしてリッチメニューを切替えるエリアに「メニュー切替」アクションを指定する
- それぞれの切替先を指定する
動画でも作成方法を公開しています
【動画内 目次】
【1】デフォルトにするリッチメニューを作成
最初に表示されるリッチメニュー（デフォルトに設定するメニュー）を作成します。
1.リッチメニュー作成画面へ移動
「リッチメニュー管理 > リッチメニュー一覧」を選択して移動します。
移動したら、一覧の右上にある 新規作成ボタンを選択します。
2.必要情報を入力
メニュー名、表示ラベル名を入力します。
メニューの初期設定もチェックしておきます。メニューサイズは、今回は「大」のサイズを用意したので「大」を選択します。
3.画像をアップロード
規定のサイズに合わせた画像をアップロードします。
画像の規定サイズは管理画面上に記載されています。
各レイアウトのテンプレートファイル
各サイズのテンプレートは以下よりダウンロードいただけます。画像をアップロードしたら、 アクション領域を追加するボタンを選択して、領域を追加します。
4.タップ領域を指定
タップ領域をマウスでドラッグして囲い、指定します。
今回は右のタブをタップした時に、別のメニューに切り替えたいので、右タブを囲いました。
5.アクションを指定
指定した座標に対して、アクションを設定します。
メニューを切り替えるためのアクション「メニュー切替え」を選択します。
6.さらにタップ領域を追加
中央のバナーをタップした時にも別のメニューに切り替えたいので、さらに「＋アクション領域の追加」を行い、「メニュー切替え」アクションを設定し、保存します。
7.デフォルトに設定
作成が完了したら、メニューを「デフォルトメニューに設定」します。
デフォルトメニューに設定する（即時）ボタンを選択します。
8.設定を実行
確認ウィンドウが表示されるので、「設定を実行する」を選択します。
【2】2枚目のリッチメニューを作成
切り替え用のリッチメニューを作成します。
1.2枚目のリッチメニューを作成
続いて、切り替え用のリッチメニューを作成します。
新規作成ボタンを選択して作成していきます。
2.必要情報を入力
メニュー名、表示ラベル名を入力します。
メニューの初期設定もチェックしておきます。メニューサイズは、今回は「大」のサイズを用意したので「大」を選択します。
3.画像をアップロード
規定のサイズに合わせた画像をアップロードします。
画像の規定サイズは管理画面上に記載されています。
各レイアウトのテンプレートファイル
各サイズのテンプレートは以下よりダウンロードいただけます。画像をアップロードしたら、 アクション領域を追加するボタンを選択して、領域を追加します。
4.タップ領域を指定
タップ領域をマウスでドラッグして囲い、指定します。
今回は左のタブをタップした時に、デフォルトメニューに切り替えたいので、左タブを囲いました。
5.アクションを指定
指定した座標に対して、アクションを設定します。
メニューを切り替えるためのアクション「メニュー切替え」を選択します。
残りのアクションの設定もできたら、保存します。
6.切替先を確認
作成完了後の詳細画面で、設定したアクションを確認できます。
「メニュー切替え」を設定した箇所を確認します。「メニュー切替え」アクションを指定すると、初期値は「個別指定を解除（＝デフォルトメニューに戻る）」設定になります。
2枚目のリッチメニューからの切り替えは「デフォルトメニューに戻る」だけで良いので、変更せずにこのままにします。
【3】3枚目のリッチメニューを作成
3枚目の切り替え用リッチメニューを作成します。
1.3枚目のリッチメニューを作成
3枚目の切り替え用のリッチメニューを作成します。
新規作成ボタンを選択して作成していきます。
2.必要情報を入力
メニュー名、表示ラベル名を入力します。
メニューの初期設定もチェックしておきます。メニューサイズは、今回は「大」のサイズを用意したので「大」を選択します。
3.画像をアップロード
規定のサイズに合わせた画像をアップロードします。
画像の規定サイズは管理画面上に記載されています。
各レイアウトのテンプレートファイル
各サイズのテンプレートは以下よりダウンロードいただけます。画像をアップロードしたら、 アクション領域を追加するボタンを選択して、領域を追加します。
4.タップ領域を指定
タップ領域をマウスでドラッグして囲い、指定します。
左のタブをタップした時に、デフォルトメニューに切り替えたいので、左タブを囲いました。
5.アクションを指定
指定した座標に対して、アクションを設定します。
メニューを切り替えるためのアクション「メニュー切替え」を選択します。
6.さらにタップ領域を追加
右のタブをタップした時にもメニューを切り替えたいので、さらに「＋アクション領域の追加」を行い、領域を指定します。
7.アクションを指定
ここにもメニューを切り替えるためのアクション「メニュー切替え」を選択し、設定ます。
残りのアクションの設定もできたら、保存します。
8.1つ目の切替先を確認
作成完了後の詳細画面で、設定したアクションを確認できます。
「メニュー切替え」を設定した箇所を確認します。「メニュー切替え」アクションを指定すると、初期値は「個別指定を解除（＝デフォルトメニューに戻る）」設定になります。
左のタブをタップしたら「デフォルトメニューに戻る」だけでいいので、変更せずにこのままにします。
9.2つ目の切替先を確認
右のタブをタップしたら、「2枚目のリッチメニュー」に切り替わって欲しいので、「個別指定を解除」と表示されている箇所を選択して変更します。
10.切替先を変更
リッチメニューの一覧が表示されるので、切り替えたいリッチメニューを選択して、決定ボタンを選択します。
11.切替先の変更を確認
切り替え先が変更されました。切り替え先のリッチメニューは上段のプレビューで確認できます。
【4】デフォルトに設定したリッチメニューの切り替え設定をする
最初に作成したデフォルト用のリッチメニューから、他のリッチメニューへの切り替え設定を行います。
1.デフォルトのリッチメニューを選択
リッチメニュー一覧から、デフォルト用に作成したリッチメニューを選択します。
2.バナーエリアを選択
「メニュー切替え」アクションを設定したアクションのうち、バナーに対して設定した方の「個別指定を解除」を選択します。
3.切替先を変更
リッチメニューの一覧が表示されるので、切り替えたいリッチメニューを選択して、決定ボタンを選択します。
4.切替先の変更を確認
切り替え先が変更されました。切り替え先のリッチメニューは上段のプレビューで確認できます。
5.タブ部分を選択
「メニュー切替え」アクションを設定したアクションのうち、タブに対して設定した方の「個別指定を解除」を選択します。
6.切替先を変更
リッチメニューの一覧が表示されるので、切り替えたいリッチメニューを選択して、決定ボタンを選択します。
7.切替先の変更を確認
切り替え先が変更されました。切り替え先のリッチメニューは上段のプレビューで確認できます。
