フラグメントの閲覧の構成
対応可能：Liferay DXP/Portal 7.4以降
フラグメントを使用して、さまざまなレイアウトと情報でコンテントページを組み立てることができます。 Liferay DXP 7.4 からは、ユーザーの画面サイズに応じたフラグメントの表示設定を行うことができます。 例えば、パソコンで閲覧するページではフラグメントを非表示にし、スマートフォンで閲覧するページではフラグメントを表示することができます。
各画面サイズでのフラグメントの見え方は、 コンテントページエディタのページ上部にあるビューポートコントロールで設定することができます。
フラグメントの閲覧とスタイルの継承の理解
フラグメントの見え方と、左側のビューポートに適用したスタイルは、右側のビューポートの1つに異なるスタイルを指定しない限り、右側のすべてのビューポートに適用されます。 例えば、デスクトップビューポートでフラグメントを隠すと、他のすべてのビューポートでもフラグメントが隠されます。 次の表は、この構成をまとめたものです。
| ビューポート | 閲覧可能? | フラグメントの閲覧設定 |
|---|---|---|
| デスクトップ（A） | いいえ | 非表示 |
| タブレット（B） | いいえ | デフォルト / 継承 |
| スマホ（横）(C) | いいえ | デフォルト / 継承 |
| スマホ（縦）(D) | いいえ | デフォルト / 継承 |
この設定により、例えばスマホ（横）でフラグメントを表示させると、そのビューポートとスマホ（縦）のビューポートでフラグメントが表示されたままとなります。 次の表は、新しい構成をまとめたものです。
| ビューポート | 閲覧可能? | フラグメントの閲覧設定 |
|---|---|---|
| デスクトップ（A） | いいえ | 非表示 |
| タブレット（B） | いいえ | デフォルト / 継承 |
| スマホ（横）(C) | はい | 閲覧可能 |
| スマホ（縦）(D) | はい | デフォルト / 継承 |
この例では、パソコンではフラグメントは非表示で、スマートフォンでは見えるようにしています。
コンテントページエディタのビューポートの動作
次の表は、各ビューポートの動作をまとめたものです。
| ビューポート | 説明 |
|---|---|
| デスクトップ | デフォルトのビューポート。 ここで定義したフラグメントのスタイルと閲覧性は、他のビューポートで別のスタイルや閲覧性を指定しない限り、他のすべてのビューポートに適用されます。 |
| タブレット | タブレットサイズの画面に対応したビューポートです。 ここで定義したフラグメントのスタイルと閲覧性は、スマホ（横）またはスマホ（縦）のビューポートでスタイルまたは閲覧性を指定しない限り、スマホのビューポートに適用されます。 |
| スマホ（横） | このビューポートで定義したフラグメントのスタイルと閲覧性は、スマホ（縦）ビューポートで別のスタイルまたは閲覧性を指定しない限り、スマホ（縦）ビューポートにも適用されます。 |
| スマホ（縦） | このビューポートは、ここで別のスタイルや閲覧性を指定しない限り、他のビューポートで行ったスタイルや閲覧性の変更を引き継ぎます。 |
フラグメントの閲覧の変更
コンテンツページのフラグメントの閲覧性は、次の3つの方法で変更できます。
-
コンテントページエディタのサイドバーから、 ブラウザ(
) → ［Page Elements］ エリアに移動します。ページ フラグメントの横にある Hide(
) または Unhide(
) のコントロールをクリックします。
-
コンテントページエディタのサイドバーから、 ブラウザ(
) → ［Styles］ エリアの ［Hide Fragment］ ボックスをオンまたはオフにします。
-
フラグメントのアクションメニュー(
)から、 ［Hide Fragment］()オプションを選択します。
非表示にしたフラグメントを元に戻すには、ブラウザの［Page Elements］エリアから、ページフラグメントの横にあるUnhide ()コントロールをクリックします。
例：フラグメントの閲覧性の使用
次の例を考えてみましょう。 あなたの保険会社は、顧客が保険契約を管理するための新しいモバイルアプリを宣伝したいと考えています。 ユーザーがスマートフォンからページにアクセスする際に、このアプリを宣伝したいのです。 この場合、新しいスマートフォンアプリのプロモーションバナーを作成し、このバナーをスマートフォンのビューポートでのみ表示できるようにすることができます。
- デフォルトのデスクトップビューポートから、スマートフォンアプリのプロモーションテキストを含む新規フラグメントを追加します。
- プロモーションテキストでフラグメントを非表示にします。 これでフラグメントがすべてのビューポートで非表示になります。
- ［スマホ（横）］ ビューポートをクリックします。 このビューポートでの変更は、スマホ（縦）ビューポートにも影響します。
- フラグメントの閲覧性を変更 して、スマートフォンのビューポートでプロモーションテキストを再表示します。
- 異なるビューポートをクリックすると、その効果を確認することができます。 プロモーションテキストは、スマホ（横）およびスマホ（縦）のビューポートでのみ利用可能になりました。
次のビデオは、この例を示しています。
ビューポートの閲覧性をデフォルトに戻すには、ビューポートをクリックし、［フラグメントのスタイル］エリアの下にある［Restore Default］ (
)をクリックします。
