oo

コレクションの表示

liferay Portal 7.4 GA6+、DXP 7.3 GA1+

コレクションを表示するには、コレクションページ、またはコレクション表示フラグメントを追加します。 これらの表示オプションの詳細については、 コレクションとコレクション・ページについて を参照してください。

デフォルトでは、どのユーザーもコレクションのコンテンツを見ることができます。 しかし、 セグメントを使用して、ユーザーがこのコンテンツをどのように見るかをパーソナライズすることができます

note

、ページに表示する前に 、コレクションを作成する必要があります。

ページにコレクションを表示する

コレクションを表示する最も簡単な2つの方法は、コレクションページを追加するか、既存のページにコレクション表示フラグメントを追加することです。

コレクションページでコレクションを表示する

コレクションページは、ページをコレクションにリンクします。 コレクションページには、 コレクション表示フラグメント がページの一部として含まれています。

コレクションページを追加するには、以下の手順に従ってください:

  1. サイトメニュー( サイトメニュー)を開き、 サイトビルダーページ に進みます。

  2. 新しいページ(新しいページ)をクリックし、 コレクションページ を選択します。

    Create a new collection page from the pages administration.

  3. [コレクション]タブで、コレクションの1つを選択するか、 追加( アイコンの追加)をクリックして、 新しいコレクションを作成する

  4. 使用する マスターページ を選択します。

  5. コレクションページの名前を入力し、 Add をクリックします。

  6. コレクションを表示するには、 そのコンテンツをページ要素にマッピングする

important

コレクションページの下に子ページを作成することはできません。

これで、コレクション表示フラグメント内に、選択したコレクションを表示するコレクションページができました。

コレクション表示フラグメントをページに追加する

コレクション表示フラグメントは、コンテンツページ内のコレクションを表示します。 コレクションを任意のスタイルやレイアウトで表示するように設定できます。

Use a collection display fragment to display a collection in the desired format.

コレクション表示フラグメントに既存のコレクションを追加するには

  1. 新規ページの作成 または コンテンツページの編集を開始 .

  2. Add( Add widget icon ) をクリックして、Fragments and Widgetsパネルを開きます。

  3. FragmentsタブのContent Displayカテゴリで、 Collection Display フラグメントをページ上の任意の場所にドラッグします。

  4. 選択パネルにコンフィギュレーションを表示するには、 Collection Display フラグメントをクリックします。

  5. General タブで、 Collection フィールドをクリックして、選択したコレクションをフラグメントにマップする:

    Select a collection and map it to the collection display fragment.

コレクション表示フラグメントがページに表示され、選択されたコレクションが表示されます。

important

コレクション表示フラグメントをページに追加する場合、編集可能なフラグメントにマッピングできるコレクションのみが使用可能です(ブログエントリー、ドキュメント、ナレッジベース記事、ウェブコンテンツ記事、カスタムオブジェクトエントリー)。

コレクション表示フラグメントの設定

コレクション表示フラグメントを手動で追加した場合でも、コレクションページ経由で追加した場合でも、 ページを編集して、 フラグメントを選択することで設定できます。

コレクション表示フラグメントを選択すると、コレクション内の各アセットのセクションに分割されます。 コレクションを選択した後、フラグメントの一般設定の下に新しいオプションが表示されます:

スタイル表示 :リスト内のアセットのフォーマットに使用するスタイルを選択します(グリッドまたは箇条書きリストスタイルなど)。 7.4 GA23またはU23より前のバージョンでは、この設定はリスト・スタイルと呼ばれます。

レイアウト :アセットを表示する列の数を選択します。

Show Gutter :列間のガター(間隔)を表示するには、チェックボックスをオンにします。 このオプションは、カラムレイアウトのグリッドスタイルを選択した場合にのみ表示されます(バージョン7.4 GA23+またはU23+の場合)。

Show Empty Collection Alert :適用されたフィルタに一致する結果がない場合、またはコレクションが空の場合にアラートメッセージを表示するには、このボックスにチェックを入れます。

空のコレクション警告 :Show Empty Collection Alert* が有効な場合、表示されるアラートメッセージを選択します。 このメッセージはローカライズ可能です。

Vertical Alignment :各行の上部、中央、または下部:項目を整列する方法を選択します。 このオプションは、 Grid スタイルを選択した場合にのみ表示されます(バージョン7.4のGA23+またはU23+)。

リスト項目のスタイル :各資産をフォーマットするスタイルを選択します。 このオプションは一部のリスト・スタイルにのみ適用されます。

最大アイテム数 :フラグメントが一度に表示できるアセットの最大数を選択します。

Click a collection display fragment with a configured collection to reveal more configuration options.

コレクション内のアセットを設定どおりに表示する準備ができたら、ページをパブリッシュします。

tip

Liferay 7.4 GA23+またはU23+では、コレクション表示フラグメントにGridスタイルを選択した場合、デバイスの種類ごとに個別にレイアウト設定を行うことができます。 画面上部のデバイスビューポートボタンをクリックして、各デバイスにこの設定を行います。 タブレットの設定のデフォルトはデスクトップの設定と同じで、縦長と横長の電話の設定のデフォルトは1列です。

コレクションのアセットを表示するためのコンポーネントのマッピング

表示コンポーネントをフラグメントにマッピングすることで、フラグメント内の項目のスタイル (各アセットを個別に表示する方法) を構成することもできます。

これらの要素をフラグメントのセルにドラッグして、コレクション表示フラグメントのアセットにマッピングします。

note

コレクション表示フラグメントのリストスタイルで選択したオプションによっては、コンポーネントをフラグメントにドラッグできない場合があります。 コンポーネントをフラグメントにドラッグできない場合は、別のリストスタイルを選択するか、「リストアイテムのスタイル」で別のオプションを選択します。

  1. ページエディタで、コレクションを表す コレクション表示 をクリックします。

  2. ツールのサイドバーで、 フラグメントとウィジェット(フラグメントとウィジェット)をクリックします。

  3. フラグメントとウィジェットのサイドバーパネルから、コレクションアイテムの表示に使用したいコンポーネントをドラッグ&ドロップします。

    Add fragments or widgets to the collection display and configure the display properties.

    note

    コレクション表示に複数のアイテムが含まれている場合、フラグメントまたはウィジェットをそれらのいずれかにドラッグできます。 コレクション内の残りのアイテムは、自動的に同じレイアウト設定を使用します。

  4. コレクションディスプレイ上の フラグメント または ウィジェット をダブルクリックすると、そのマッピングオプションにアクセスできます。

  5. Mapping 列で、コレクションにマップしたい フィールド を選択します。

    Map the fragments and widgets to the collection items

  6. 必要に応じてフラグメントやウィジェットを追加し、コンテンツをコンテンツフィールドにマッピングする。

    Add fragments and widgets to the collection display and map the content fields.

  7. 公開] をクリックします。

表示項目のページネーション

7.4+

ページネーション設定を使用して、コレクション項目をページ分割できます。 このオプションには、2つの重要な利点があります。

  • アイテム数の多いコレクションの方が見せやすい。 コレクション内のすべてのアイテムを表示する代わりに、一度に表示するアイテムの数を決めることができ、同時にユーザーはコレクション内のアイテムのリストを戻ったり進んだりすることができます。

  • 閲覧可能なアイテムのリストを小さなグループに分割すると、サーバーのオーバーヘッドが削減され、サーバーの応答時間とユーザーエクスペリエンスが向上します。

note

Liferay7.4のU18とGA18より前のバージョンでは、利用可能なページネーションオプションが少なくなっています。 これらのバージョンでも、ページ分割を有効にしたり、一度に表示するアイテムの最大数を選択したりすることはできますが、ページ分割メニューに表示されるページ数を変更することはできません。

コレクション表示の表示項目をページ分割する、

  1. コレクションが表示されているコンテンツページで 編集( 編集アイコン ) をクリックします。

  2. Browser( Browser icon ) をクリックして、Browser パネルを開きます。

  3. 要素ブラウザで、ページ分割したいコレクション表示フラグメントを選択します。 選択したフラグメントは、既存のコレクションを表示するように設定する必要があります。

  4. 一般設定で、ページネーションオプションを選択します。

    ページネーション :None(ページネーションなし)、Numeric(数値)、Simple(Previous/Nextコントロール)。

    すべてのページを表示する :ページネーションメニューにすべてのページの数字またはコントロールを表示するには、このボックスにチェックを入れます。 ページ分割タイプが選択されていない場合、このオプションは代わりに [すべてのコレクション アイテムを表示] になります。

    最大表示ページ数 :ページネーションメニューに表示される最大ページ数。 このオプションは、「すべてのページを表示」チェックボックスが選択されていない場合にのみ表示されます。

    ページあたりの最大アイテム数 :ページネーションが有効な場合、コレクションからページごとに表示するアイテムの最大数。 ページネーションタイプが選択されていない場合、このオプションは代わりに最大表示アイテム数になります。

    Choose the pagination options for the collection display items.

ページ分割を有効にした場合、利用可能なページの総数は、コレクション内のアイテムの総数と、ページあたりのアイテムの最大数の設定の両方に依存します。

note

デフォルトでは、コレクション表示フラグメントは、編集モードで一度に20項目まで表示します。 この制限を変更するには、コントロールパネルインスタンス設定ページページエディタ に移動し、編集モードの最大アイテム数 フィールドの数値を変更します。 編集モードで一度に20以上の項目を表示すると、パフォーマンスに悪影響を及ぼす可能性があります。 この設定は、ユーザーが表示モードでページに表示される内容には影響しません。

サイト全体でのコレクションの使用状況の表示

あなたのサイトのコレクションの利用統計を見ることができます。

  1. サイトメニュー (**サイトメニュー)を開き、サイトビルダー→*コレクション に移動します。

  2. コレクションタブで、 アクション( アクションメニュー )をクリックします。 → レビューしたいコレクションの横にある View Usages をクリックします。

Select View Usages to understand how your collections are being used through the site

Liferay DXP 7.2

コンテンツセットの表示

コンテンツ・セットは主にアセット・パブリッシャーで表示されます。 現在のところ、コンテンツ・セットをそのまま表示する唯一の方法だが、コンテンツ・セットを利用するための外部アプリケーションやウィジェットを独自に開発することもできる。 コンテンツセットの作成 では、2つのコンテンツセットを作成しました。 それらをページに表示してみましょう。

コンテンツセット用のアセットパブリッシャーの構成

コンテンツセットを表示するには、空白のページから始め、必要なアセットパブリッシャーを追加し、コンテンツセットを表示するように設定します。

  1. サイトの新しいホームページを1カラムレイアウトのウィジェットページとして作成します。 新しいLiferay DXPバンドルを使っている場合は、サンプルのHomeページからHello Worldウィジェットを削除するだけです。

  2. Add "メニューを開き、“Content Management” → "Asset Publishers "を2つ、縦に重ねてページに追加する。

  3. クリックオプション ( オプション ) → トップアセットパブリッシャーの 設定 です。

  4. Asset Selectionで Content Set を選択する。

    The asset publisher has a number of options available for selecting its source for content.

  5. コンテンツセットの選択 を開き、 選択 をクリックします。

  6. 宇宙番組画像 コンテンツセットを選択する。

  7. 保存]をクリックします。

これで画像はページ上部に表示されるようになった。 どのようなメタデータが表示されるかなど、コンテンツの表示方法を管理したり、ウィジェットテンプレートを作成してコンテンツをスタイリングすることもできるが、表示されるアイテムや表示順序はコンテンツセットによって決定される。

次に、一番下のアセットパブリッシャーにもう一つのコンテンツセットを設定します。

  1. オプション(オプション)をクリックします。 → 一番下のアセットパブリッシャーの 設定 をクリックします。

  2. Asset Selectionで Content Set を選択する。

  3. Select Content Set を開き、 Select をクリックする。

  4. トレンド*コンテンツセットをクリックする。

    Select the content set you want to use.

  5. 保存]をクリックします。

ここでも、さまざまな表示設定を管理することができるが、表示される項目とその順序は、コンテンツ・セットの基準によって決定される。

アセットパブリッシャーの標準出力として結果を見ることができます。 ウィジェットテンプレートを作成し、スタイルと華やかさを追加できます。

既存のコンテンツセットにアイテムを追加する

静的コンテンツ・セットと動的コンテンツ・セットの両方の管理を実演するために、新しい画像をアップロードし、タグ付けして、静的コンテンツ・セットに手動で追加します。

  1. 新しい画像をアップロードし、「分類」で「トレンド*」というタグを付けます。

  2. 画像はトレンドコンテンツリストのトップに追加されます。

    The result is added dynamically to the content list wherever it is displayed.

  3. マニュアルセットに追加するには、 サイトメニュー に戻り、 コンテンツ&データサイトビルダー に移動します。

  4. Space Program Images をクリックするか、Options → Space Program Imagesの隣にある Edit を選択する。

  5. Asset Entriesの横にある、 SelectBasic Document をクリックします。

  6. 新しい画像を選択し、 追加 をクリックします。

  7. ホームページに戻ると、リストに追加された画像が表示されます。

コンテンツセットは、サイト全体に表示されるコンテンツやその他のアセットを定義するための1つの場所を提供します。 また、再利用が可能なので、ユーザーに優れたコンテンツを届けるための繰り返しの作業が少なくて済みます。

関連トピック

コレクションの作成 コレクションとコレクションページについて コレクションのパーソナライズ

Capability: