カセットレイアウト(β版)

カセットレイアウトはMGRe CMSからアプリの画面を作成できる機能です。

本機能のご利用には、対応したMGReバージョンへのアプリアップデートが必要な場合があります。

レイアウト一覧画面

公開できるレイアウトは250件までです。

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

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

レイアウト編集画面

1

カセット一覧パネル

画面を構成するカセットの一覧です。ドラッグ&ドロップで 2.エディターパネル への配置が可能です。

2

エディターパネル

レイアウトを作成するパネルです。ドラッグ&ドロップでカセットの配置と並び替えが可能です。

3

設定パネル

配置した各カセットの詳細設定を行うパネルです。

レイアウト基本設定

項目説明
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つまで設置可能。
他のデザインカセットとの併用は不可です。

基本設定

項目説明
1URL(必須)表示するWebページのURL

公開設定

項目説明
1状態カセットの公開/非公開を選択
2公開期間カセットをアプリで表示する期間

MGRe コアカセット

カスタムカセット

カスタム

ご利用のアプリ独自に開発した機能を配置するためのカセットです。(エンタープライズプランのみ)

詳細はメグリ担当者またはサポートチームまでお問い合わせください。

基本設定

項目説明
1コード開発機能専用のコード(編集不可)
2備考管理用の備考。アプリ画面には表示されません。

公開設定

項目説明
1状態カセットの公開/非公開を選択
2公開期間カセットをアプリで表示する期間

さらにサポートが必要な場合は、お問い合わせください

MGReに関するお問い合わせはBacklogより受け付けております。
サポートチームまたは担当者までご連絡ください。