レイアウトブロック

• レイアウトブロックとは

  複数のアイテムを持ち、ページ上に繰り返されるレイアウトを表示できるブロックです。

  レイアウトブロックには、コンテンツをグリッド状に並べられる「グリッドブロック」や、横にスライドできる「横スクロールブロック」「カルーセルブロック」などが存在します。

  

   

  選択できるアイテム・データソース

  データソースごとに対応しているアイテムが決まっているため、使用したいレイアウトブロックを選択した画面にてご確認ください。

  参考：『データ参照先に対応するアプリバージョン - レイアウトブロック』

  • 直接入力
  • データ参照
    ・通知履歴
    ・電子書籍
    ・ビデオ
    ・RSS
    ・ショップ
    ・ニュース
    ・フォト
  • API
    参考：『API設定とは-Block-UI』

   

  ご注意

  • ブロックを設定する前に、必ずストアにリリースされているバージョンが対応バージョンを満たしているかご確認ください。
    参考：『ブロックと対応するアプリバージョンについて』
  • 対応バージョンを満たしていない場合の挙動については、以下サポートページをご参考ください。
    参考：『「このコンテンツを表示するには最新のアプリにアップデートしてください」と表示が出ます』

   

  更新履歴

  • 2024年11月28日 最新の情報に更新

• グリッドブロックとは - レイアウトブロック

  グリッドブロックとは、ページ上にグリッドアイテムを表示できるブロックです。

   

  選択できるアイテムの種類

  • 画像＋テキスト
    
  • テキスト
    
  • 画像
    
  • 動画
    

   

   

  必要なアプリのバージョン

  • ブロックを設定する前に、必ずストアにリリースされているバージョンが対応バージョンを満たしているかご確認ください。
    参考：『ブロックと対応するアプリバージョンについて』
  • 対応バージョンを満たしていない場合の挙動については、以下サポートページをご参考ください。参考：『「このコンテンツを表示するには最新のアプリにアップデートしてください」と表示が出ます』

   

  更新履歴

  • 2024年11月28日 最新の情報に更新

• 横スクロールブロックとは - レイアウトブロック

  ページ上に横スクロールアイテムを表示できるブロックです。

  

   

  選択できるアイテムの種類

  • 画像＋テキスト
    
  • テキスト
    
  • 画像
    
  • 動画
    

   

  必要なアプリバージョン

  • ブロックを設定する前に、必ずストアにリリースされているバージョンが対応バージョンを満たしているかご確認ください。
    参考：『ブロックと対応するアプリバージョンについて』
  • 対応バージョンを満たしていない場合の挙動については、以下サポートページをご参考ください。
    参考：『「このコンテンツを表示するには最新のアプリにアップデートしてください」と表示が出ます』

   

  更新履歴

  • 2024年11月28日 最新の情報に更新

• カルーセルブロックとは - レイアウトブロック

  従来のフリーレイアウト機能などでご利用いただける、カルーセルの表現ができるブロックです。

  入稿したアイテムが中央に吸着し、左右コントロールやインジケータ、アニメーションの細かい表現ができるようになります。

  また、アイテムは1つのブロックで最大6個まで表示することができます。

  

   

  アイテム１つのみの設定は推奨していません。CMSプレビューとアプリで見え方が異なるので注意してください。

  アイテムが１つの時のCMSのプレビュー画面	アイテムが１つの時のアプリ
  ループ設定がONの場合、１つのアイテムが連続して表示されます 左右コントロールがONの場合、表示されます インジケータがONの場合、表示されます	ループ設定がONの場合、１つのアイテムが単独で表示されます 左右コントロールがONの場合、表示されません インジケータがONの場合、表示されません
  ※ループ設定・左右コントロール・インジケータ全てをONにした場合の見え方

   

  また、スケールONの設定はCMSプレビューでは反映されません

  CMSのプレビュー画面	アプリ

   

   

  必要なアプリのバージョン

  • ブロックを設定する前に、必ずストアにリリースされているバージョンが対応バージョンを満たしているかご確認ください。
    参考：『ブロックと対応するアプリバージョンについて』
    参考：『「このコンテンツを表示するには最新のアプリにアップデートしてください」と表示が出ます』

   

  更新履歴

  • 2023年3月3日 本ページ公開

   

   

• データ参照を行う - レイアウトブロック

  レイアウトブロックでは、アプリ内のデータをアイテムに自動で反映・表示することが可能です。

  

  1. 右側パネルのコンテンツより「データ参照」を選択します。
  2. データの種類から希望するデータを選択します。
  3. コンテンツ参照先を選択します。

   

  ヒント

  • データの種類で通知履歴を選択している場合は、コンテンツ参照先は選択できません。
  • 通知履歴、ニュース、ショップを選択した場合、それぞれ表示する対象を絞り込むことができます。
    参考：『プッシュの種類で絞り込む - レイアウトブロック』

   

  選択できるデータの種類

  • 通知履歴
  • 電子書籍
  • ビデオ
  • RSS
  • ショップ
  • ニュース
  • フォト

   

  必要なアプリバージョン

  • データ参照を設定する前に、必ずストアにリリースされているバージョンが対応バージョンを満たしているかご確認ください。
    参考：『データ参照先に対応するアプリバージョン - Block UI』

   

  更新履歴

  • 2024年11月28日 最新の情報に更新

   

• 参照先と指定できるアイテム - レイアウトブロック

  Block UIのレイアウトブロック（グリッド・横スクロール・カルーセル）でデータ参照を選択した場合、設定する機能によって対応しているアイテムが異なります。

  ブロック追加後にデータを変更した場合、対応可能アイテムに自動的に切り替わりますのでご留意ください。

  通知履歴
  ビデオ	※カルーセルブロックの場合、動画アイテムは非対応
  電子書籍
  フォト
  ニュース
  RSS
  ショップ
  API

   

  更新履歴

  • 2024年3月6日 一部対象アイテムの画像を変更

   

   

• プッシュの種類で絞り込む - レイアウトブロック

  データ参照で「通知履歴」を選択した場合、プッシュ通知の種類に応じて絞り込むことができます。

  プッシュ通知の種類はもちろん、クーポンをリンクしているプッシュのみを絞り込んで表示することができるので、スタンプ特典のクーポンのみを絞り込んだり、オートプッシュの特典クーポンのみを絞り込んだりと、希望にあわせた設定が可能となります。

   

  設定方法

  1. 「データ参照」で通知履歴を選択します
  2. 「カテゴリー」から、表示させたいプッシュ通知を選択します
     
  3. クーポンがリンクされているプッシュのみを絞り込みたい場合は、「リンク設定している機能」からクーポンを設定します

   

  絞り込めるプッシュの種類

  • すべて
  • 全体配信
  • セグメント配信
  • オートプッシュ
  • APIプッシュ
  • スタンプ特典

   

  絞り込めるリンク設定先

  • すべて
  • クーポン

   

  更新履歴

  • 2024年11月28日 最新の情報に更新

   

• ショップ機能で現在地からの距離を表示する - レイアウトブロック

  レイアウトブロックでショップ機能を選択した場合、テキストに「現在地からの距離」を表示できます。

  「現在地からの距離」は、CMSとアプリ上とで見え方に違いがございます。

  参考：『データのマッピングを変更する - ブロック』

   

  CMS上での見え方

  「現在地からの距離」を設定した場合、CMSのプレビューでは全て「10.0km」で表示されます。
  また、「並び順」はアプリのみで反映されます。

  

   

  アプリ上での見え方

  「並び順」を「近い順」で設定している場合、もしくは「現在地からの距離」を表示している場合、アプリ画面を表示した際に位置情報のパーミッションダイアログが表示されます。

  ユーザーがアプリに対して位置情報を許可しているか / していないかによって、アプリ上での見え方が異なります。

  アプリに対して位置情報を許可している場合	アプリに対して位置情報を許可していない場合
  並び順：現在地から近い順で表示される 現在地からの距離：表示される	並び順：登録したコンテンツ順で表示される 現在地からの距離：表示されない（-km 表示になる）

   

  更新履歴

  • 2024年11月28日 最新の情報に更新

   

• データのマッピングを変更する - レイアウトブロック

  「データのマッピング」を設定することで、テキスト1 〜 3のどの箇所にデータを紐づけるか選択することができます。

   

  1. データのマッピングをクリックします。
     
     
     

  2. 表示させたいデータを選択します。
     
     
     
  3. 日付のフォーマットを選択します。
     ※日付のフォーマットについて、コンテンツ参照先が通知履歴・RSSの時のみご利用いただけます。
     

   

  ご注意

  • 日付の表示フォーマットに表示されている時間や日付は表示例となります。
    選択した後にそれぞれ正しい時間や日付が表示されますのでご安心ください。

• 表示設定を変更する - レイアウトブロック

  表示設定では、データ参照時に参照先のデータ状況に応じて見え方を設定することができます。

   

  表示設定で設定できる項目

  

   

  ①代替画像	参照先データに画像がない場合、代替画像に登録した画像が画像エリアに表示されます。
  ②エンプティステート	表示するコンテンツがない場合、その旨を表示するか選択できます。 ONにするとアプリ内に「表示するコンテンツがありません」のメッセージが表示されます。

   

   

  エンプティステートON/OFF時の見え方

  OFF	ON

   

  ヒント

  • エンプティステートの表示内容は一律となります。変更することはできません。
  • エンプティステートがOFFの場合も、グループのスタイルは表示されます。グループにスタイルを設定している場合はご注意ください。

   

  必要なアプリバージョン

  エンプティステートのON/OFF切り替えをご利用いただくには、アプリが以下のバージョンとなっている必要がございます。

  アプリの種類	必要なアプリのバージョン
  iOS用アプリ	11.7.0以降
  Android用アプリ	11.7.0以降

  設定を行う前に、必ず公開済みのアプリが上記バージョン以上であるかをご確認ください。

  参考：『アプリのバージョンを確認する方法』

  対応しているバージョン未満の場合、管理画面の「アプリ登録」より『再申請』をいただくと、弊社にてバージョンアップの対応をさせていただきます。

  参考：『アプリを再申請する』

  非対応のバージョンで開いた場合、予期せぬ不具合が発生することがございますので、本機能をご利用いただく際には必ず最新のバージョンへのアップデートをお願いいたします。

  参考：『特定のバージョン以上でないと使えない機能を、非対応のバージョンで開くとどうなりますか？』