カセットレイアウト(β版)
カセットレイアウトはMGRe CMSからアプリの画面を作成できる機能です。
本機能のご利用には、対応したMGReバージョンへのアプリアップデートが必要な場合があります。
目次
レイアウト一覧画面
公開できるレイアウトは250件までです。

「…」から各レイアウトのプレビュー、複製、エクスポートが可能です。

レイアウトのインポート中は「レイアウトの登録・更新」「レイアウトの複製」「追加のインポート」操作が制限されます。
レイアウト編集画面

カセット一覧パネル
画面を構成するカセットの一覧です。ドラッグ&ドロップで 2.エディターパネル への配置が可能です。
エディターパネル
レイアウトを作成するパネルです。ドラッグ&ドロップでカセットの配置と並び替えが可能です。
設定パネル
配置した各カセットの詳細設定を行うパネルです。
レイアウト基本設定
| 項目 | 説明 | |
| 1 | レイアウト名称(必須) | レイアウト一覧に表示される管理用の名称。アプリには表示されません。 |
| 2 | 備考 | 管理用のレイアウト一覧に表示される管理用の備考。アプリには表示されません。 |
| 3 | 公開期間 | レイアウトをアプリで表示する期間 |
カセット一覧から選択したカセットはドラッグ&ドロップでエディターパネルへ配置します。
配置したカセットは「≡」のドラッグ&ドロップで上下に並び替えが可能です。
「検索窓」「レイアウトタブ」は最上部固定配置となり、並び替え不可です。
カセットの機能
ナビゲーションカセット
レイアウトタブ
タブ切替で一つのアプリ画面に複数のレイアウトを表示できるカセットです。タブ毎にレイアウトの配置が可能です。
「+」ボタンからタブの追加が可能です。タブが1つの場合、アプリ画面には上部のタブは表示されません。
追加できるタブの数は、1レイアウトにつき最大30件までです。
基本設定
| 項目 | 説明 | |
| 1 | タブ名称(必須) | 上部タブに表示するタブ名を設定。画面が小さい端末の場合は、1行全角6文字程度で2行の表示になる場合があります。 |
| 2 | タブ表示画像 | ロゴなどの画像をアップロードします。 未設定の場合はタブ名称がテキスト表示されます。 |
セグメント設定
タブを表示する対象ユーザーを様々な条件で指定することができます。
| セグメントタイプ | 説明 | |
| 1 | 全ユーザー | 全てのアプリ利用者を対象に表示します。 |
| 2 | ユーザー属性 | ※ご契約のMGRe プランによって抽出対象の情報が異なります。 ランク、誕生月、年齢、性別、都道府県、店舗フォローが指定可能 |
| 3 | ユーザーID指定 | 事前に作成したユーザーIDリストのCSVファイルアップロードが可能 |
| 4 | 会員種別 | アプリ利用者のアカウント連携状況(本会員/本会員以外)によって、表示対象が指定可能 |
公開設定
| 項目 | 説明 | |
| 1 | 状態 | タブの公開/非公開を選択 |
| 2 | 公開期間 | タブをアプリで表示する期間 |
検索窓
画面上部にフリーワード検索窓とバーコードリーダー起動ボタンを表示するカセットです。表示イメージ
ECサイトの検索結果ページやスキャンしたバーコード、QRコードの該当ページへ遷移させることが可能です。
1レイアウトにつき1つまで、画面最上部にのみ設置可能です。
基本設定
| 項目 | 説明 | |
| 1 | プレースホルダーテキスト(必須) | フリーワード検索窓に初期表示する文言 |
| 2 | 遷移先URL | 検索時に遷移する画面のURLとパラメーターを指定 「__SEARCH_TEXT__」部分が入力キーワードで置換され、遷移先URLとしてアクセスします。 |
リーダー設定
| 項目 | 説明 | |
| 1 | リーダー種別 | 起動するバーコードリーダーの種類を指定 バーコードリーダーを使用しない場合は「なし」を選択することで起動ボタンを非表示にできます。 |
| 2 | 遷移先URL | コードスキャン時に遷移する画面のURLとパラメーターを指定 「__SCAN_CODE__」部分が読み取り結果に置換され、遷移先URLとしてアクセスします。 URL全文を仕込んだQRコードを読み取る想定の場合、「__SCAN_CODE__」のみ入力してください。 |
アプリスキャン画面設定
| 項目 | 説明 | |
| 1 | スキャン画面タイトル | バーコードリーダー画面のヘッダー文言 |
| 2 | スキャン画面メッセージ | バーコードスキャン画面に表示される説明文言 全角18文字×3行程度の端末表示 |
公開設定
| 項目 | 説明 | |
| 1 | 状態 | カセットの公開/非公開を選択 |
| 2 | 公開期間 | カセットをアプリで表示する期間 |
動的カセット
ニュース
エントリー管理「ニュース」機能で登録したニュースを表示できるカセットです。
ニュースの設定
配信内容:カセットに表示するニュースの内容を選択します。
| 項目 | 説明 | |
| 1 | 全てのニュース | 配信設定に関わらず、すべてのニュースが表示対象です。 |
| 2 | ニュースカテゴリー | ニュース作成時に設定した「カテゴリー」を利用して限定します。 カテゴリーは複数選択することができます。 |
| 3 | フォロー店舗のニュース | アプリユーザーがフォロー(お気に入り)登録している店舗に関連付けられたニュースのみを表示します。 「ユーザー属性:対象店舗」で「店舗ID」が指定されたニュースが抽出対象となります。 |
| 4 | ブランド | オプション:マルチブランド機能をご利用の場合のみ アプリユーザーがフォロー(お気に入り)登録しているブランドに関連付けられたニュースのみを表示します。 「ユーザー属性:ブランド」で「ブランド」が指定されたニュースが抽出対象となります。 |
読み込むニュースの上限数
配信内容の設定に該当するニュースのうち、カセット内に表示するニュースの最大件数を指定します。(1~12件まで)
表示の設定
レイアウト ニュースのレイアウトパターンを選択します。
横スクロール:複数のニュース画像、タイトル、詳細をスライドショーのように表示
| 項目 | 説明 | |
| 1 | アプリ画面内に表示される画像の数 | 1画面内に表示するサムネイル画像の数(最大4件) |
| 2 | 画像の形状 | サムネイル画像の形状を選択 |
縦型リスト:ニュース画像、タイトル、詳細を縦にリスト表示
| 項目 | 説明 | |
| 1 | カラム数 | 横1列に表示するニュースの数(最大4件) |
| 2 | 画像の形状 | サムネイル画像の形状を選択 |
横型リスト:ニュース画像、タイトル、詳細を横にリスト表示
| 項目 | 説明 | |
| 1 | カラム数 | 横1列に表示するニュースの数(最大2件) |
| 2 | 画像の形状 | サムネイル画像の形状を選択 |
個別ニュースに表示する項目:個別のニュースのタイトル、詳細の表示有無を選択
- 横スクロール:タイトル / 詳細 (それぞれの表示有無を選択可能)
- 縦型リスト:タイトル / 詳細 (タイトル非表示の場合、詳細も非表示)
- 横型リスト:タイトル / 詳細 (タイトル非表示の場合、詳細も非表示)
公開設定
| 項目 | 説明 | |
| 1 | 状態 | カセットの公開/非公開を選択 |
| 2 | 公開期間 | カセットをアプリで表示する期間 |
静的カセットとの関連付け
ニュースカセットの上下に配置することで、ニュースカセットのグループラベルや関連ニュース一覧へ遷移するキャプションとして紐付けることができます。
静的カセット
セクションラベル
画面内に見出しをつけるためのカセットです。画像またはテキストの設定が可能。表示イメージ
基本設定
| 項目 | 説明 | |
| 1 | セクションスタイル設定(必須) | テキスト / 画像 (テキスト表示の場合のみ以降の設定が必要です) |
| 2 | セクション名 | 表示する見出し文言 |
| 3 | 文字サイズ / 太さ / 揃え | 表示する文字のサイズ / 太さ / 揃え を選択 |
| 4 | 下のニュースカセットと関連付け | ※ニュースカセットの上部に配置した場合のみ設定可能 チェックを入れると下部のニュースカセットのラベルとしてセット表示します |
公開設定
| 項目 | 説明 | |
| 1 | 状態 | カセットの公開/非公開を選択 |
| 2 | 公開期間 | カセットをアプリで表示する期間 |
横スクロール
複数のリスト・画像をスライドショーのように表示できるカセットです。自動スクロールまたはスワイプで表示切替が可能です。表示イメージ
追加できるリストの数は、1カセットにつき50件までです。リスト・タグアイテムの総数は1つのレイアウトに対して合計500件まで登録できます。
基本設定
| 項目 | 説明 | |
| 1 | アプリ画面内に表示される画像の数 | 1画面内に表示するリスト画像の数(最大4件) |
| 2 | 画像の形状 | リストに設定された画像の形状を選択 |
| 3 | ランダム表示機能 | 有効の場合、リストの並び順がランダムになります |
| 4 | 自動スクロール機能 | 有効の場合、指定した秒数ごとに自動でリストがスクロールします |
リスト設定
| 項目 | 説明 | |
| 1 | タイトル | リスト画像下に表示されるタイトルテキスト |
| 2 | キャプション | タイトル下に表示されるキャプションテキスト |
| 3 | 画像 | リスト表示する画像 |
| 4 | 遷移先設定 | リストタップ時の遷移先を選択(遷移なし/ウェブ/ディープリンク/レイアウト) |
公開設定
| 項目 | 説明 | |
| 1 | 状態 | カセットの公開/非公開を選択 |
| 2 | 公開期間 | カセットをアプリで表示する期間 |
縦型リスト
画像、タイトル、キャプションを縦にリスト表示するカセットです。表示イメージ
追加できるリストの数は、1カセットにつき50件までです。リスト・タグアイテムの総数は1つのレイアウトに対して合計500件まで登録できます。
基本設定
| 項目 | 説明 | |
| 1 | カラム数 | 横1列に表示するリストの数(最大4件) |
| 2 | リストの表示形式 | リストの表示要素を選択 |
| 3 | 画像の形状 | リストに設定された画像の形状を選択 |
| 4 | 文字の揃え | リストに設定されたタイトル、キャプションの表示位置を選択 |
リスト設定
| 項目 | 説明 | |
| 1 | タイトル(必須) | リスト画像下に表示されるタイトルテキスト |
| 2 | キャプション | タイトル下に表示されるキャプションテキスト |
| 3 | 画像 | リスト表示する画像 |
| 4 | 遷移先設定 | リストタップ時の遷移先を選択(遷移なし/ウェブ/ディープリンク/レイアウト) |
公開設定
| 項目 | 説明 | |
| 1 | 状態 | カセットの公開/非公開を選択 |
| 2 | 公開期間 | カセットをアプリで表示する期間 |
横型リスト
画像、タイトル、キャプションを横にリスト表示するカセットです。表示イメージ
追加できるリストの数は、1カセットにつき50件までです。リスト・タグアイテムの総数は1つのレイアウトに対して合計500件まで登録できます。
基本設定
| 項目 | 説明 | |
| 1 | カラム数 | 横1列に表示するリストの数(最大2件) |
| 2 | 画像の形状 | リストに設定された画像の形状を選択 |
リスト設定
| 項目 | 説明 | |
| 1 | タイトル | リスト画像右に表示されるタイトルテキスト |
| 2 | キャプション | タイトル下に表示されるキャプションテキスト |
| 3 | 画像 | リスト表示する画像 |
| 4 | 遷移先設定 | リストタップ時の遷移先を選択(遷移なし/ウェブ/ディープリンク/レイアウト) |
公開設定
| 項目 | 説明 | |
| 1 | 状態 | カセットの公開/非公開を選択 |
| 2 | 公開期間 | カセットをアプリで表示する期間 |
タグ
枠線とテキストで構成されたタグ型のカセットです。表示イメージ
追加できるタグの数は、1カセットにつき50件までです。リスト・タグアイテムの総数は1つのレイアウトに対して合計500件まで登録できます。
タグ設定
| 項目 | 説明 | |
| 1 | タグ名 | タグ名称 |
| 2 | 遷移先設定 | タグタップ時の遷移先を選択(遷移なし/ウェブ/ディープリンク/レイアウト) |
公開設定
| 項目 | 説明 | |
| 1 | 状態 | カセットの公開/非公開を選択 |
| 2 | 公開期間 | カセットをアプリで表示する期間 |
フリーサイズボタン
サイズや余白を自由に設定したボタンを配置できるカセットです。表示イメージ
基本設定
ボタン種別:標準の場合
| 項目 | 説明 | |
| 1 | ボタンスタイル | 枠線 / べた塗りからボタンの表示スタイルを選択 |
| 2 | 枠線 / 塗りの色 | カラーピッカーボタンをクリックすることで、カラーパレット・RBG・カラーコードから枠線 / べた塗りの色を指定可能 |
| 3 | ボタンラベル | ボタンに表示するラベルテキスト |
| 4 | ボタンラベルの色 | カラーピッカーボタンをクリックすることで、カラーパレット・RBG・カラーコードからラベルテキストの色を指定可能 |
| 5 | 余白設定 | ボタン上下左右の余白を指定 |
| 6 | 遷移先設定 | ボタンタップ時の遷移先を選択(遷移なし/ウェブ/ディープリンク/レイアウト) |
ボタン種別:画像の場合
| 項目 | 説明 | |
| 1 | 画像 | ボタン画像をアップロード |
| 2 | 余白設定 | ボタン上下左右の余白を指定 |
| 3 | 遷移先設定 | ボタンタップ時の遷移先を選択(遷移なし/ウェブ/ディープリンク/レイアウト) |
公開設定
| 項目 | 説明 | |
| 1 | 状態 | カセットの公開/非公開を選択 |
| 2 | 公開期間 | カセットをアプリで表示する期間 |
キャプションラベル
補足のテキスト表記やテキストリンクを配置できるカセットです。表示イメージ
基本設定
| 項目 | 説明 | |
| 1 | キャプション(必須) | 表示テキスト |
| 2 | 文字の揃え(必須) | テキストの揃え位置を選択 |
| 3 | 遷移先設定 | テキストタップ時の遷移先を選択(遷移なし/ウェブ/ディープリンク/レイアウト) ※キャプションテキスト内にURLや電話番号が含まれる場合は自動的にリンク変換されるため「遷移なし」を選択してください。 |
| 3* | 上のニュースカセットと関連付け | ※ニュースカセットの下部に配置した場合のみ設定可能 チェックを入れると上部のニュースカセットのキャプションとしてセット表示され、遷移先設定で「関連ニュース一覧」紐づいたニュースの一覧画面(1カラム表示)が選択可能になります。 |
公開設定
| 項目 | 説明 | |
| 1 | 状態 | カセットの公開/非公開を選択 |
| 2 | 公開期間 | カセットをアプリで表示する期間 |
動画
動画を表示するカセットです。表示イメージ
追加できる動画カセットは、1レイアウトにつき最大6件までです。
基本設定
| 項目 | 説明 | |
| 1 | 余白設定 | 画面の横幅いっぱいに表示 ※チェックを入れない場合は、動画の左右に他のカセットと同様の余白が自動で入ります。 |
| 2 | 音声のON、OFF機能 | 有効の場合、動画上に音声のON/OFF切り替えボタンが表示されます。 |
| 3 | 動画(必須) | ファイル形式 [.mp4 .webm] ファイルサイズ 500MB 程度まで |
| 4 | 遷移先設定(必須) | 動画タップ時の遷移先を選択(遷移なし/ウェブ/ディープリンク/レイアウト) |
公開設定
| 項目 | 説明 | |
| 1 | 状態 | カセットの公開/非公開を選択 |
| 2 | 公開期間 | カセットをアプリで表示する期間 |
WebView表示
Webサイトを表示するカセットです。
1レイアウトにつき1つまで設置可能です。
レイアウトタブカセットをご利用の場合は、タブ毎に1つまで設置可能。
他のデザインカセットとの併用は不可です。
基本設定
| 項目 | 説明 | |
| 1 | URL(必須) | 表示するWebページのURL |
公開設定
| 項目 | 説明 | |
| 1 | 状態 | カセットの公開/非公開を選択 |
| 2 | 公開期間 | カセットをアプリで表示する期間 |
MGRe コアカセット
カスタムカセット
カスタム
ご利用のアプリ独自に開発した機能を配置するためのカセットです。(エンタープライズプランのみ)
詳細はメグリ担当者またはサポートチームまでお問い合わせください。
基本設定
| 項目 | 説明 | |
| 1 | コード | 開発機能専用のコード(編集不可) |
| 2 | 備考 | 管理用の備考。アプリ画面には表示されません。 |
公開設定
| 項目 | 説明 | |
| 1 | 状態 | カセットの公開/非公開を選択 |
| 2 | 公開期間 | カセットをアプリで表示する期間 |