Documentation

コレクションの表示

利用可能 Liferay Portal 7.4 GA6+、DXP 7.3 GA1+

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

デフォルトでは、どのユーザーもコレクションのコンテンツを表示できます。 ただし、セグメントを使用して、これらの項目の パーソナライズされたバリエーション を作成できます。 詳細は、 Customizing Collections Using Segments を参照してください。

注釈

コレクションを表示する前に、コレクションを作成する必要があります。 詳細は、 コレクションの作成 を参照してください。

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

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

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

コレクションページは、ページをコレクションにリンクします。 コレクションページには、ページの一部としてコレクション表示フラグメントが含まれます。 代わりに既存のページにコレクション表示フラグメントを追加するには、 このセクション を参照してください。

次の手順に従って、コレクションページを追加します。

  1. サイト管理] → [Site Builder] → [Pages] に移動します。

  2. 新しいページを追加したいレベルで 新規ページ ボタン (New Page) をクリックし、 [Add Collection Page] を選択します。

    ページ管理から新しいコレクションページを作成します。

  3. コレクション] タブから、コレクションの1つを選択します。

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

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

  6. コレクションを表示するには、そのコンテンツをページ要素にマップします。 詳細は、 Mapping Components のセクションを参照してください。

重要

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

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

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

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

コレクション表示フラグメントを使用して、コレクションを目的の形式で表示します。

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

  1. コンテンツページの編集アイコン (Edit icon) をクリックします。

  2. アイコン (Add widget icon) をクリックして、[フラグメントとウィジェット]パネルを開きます。

  3. フラグメントメニューの [コンテンツの表示] カテゴリの下で、 [コレクション表示] フラグメントをページ上の任意の場所にドラッグします。

  4. コレクション表示フラグメントをクリックして、 [Selection] パネルに構成を表示します。

  5. ボタンをクリックして、パネルの [General] セクションに表示するフラグメントのコレクションを選択します。

    ボタンをクリックして、コレクション表示フラグメントのコレクションを選択します。

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

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

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

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

  • スタイル表示 : リスト内のアセットをフォーマットするために使用するスタイル(例:グリッドや箇条書きのリストスタイル)です。 (7.4 GA23またはU23より前のバージョンでは、この構成は List Style と呼ばれています)。

  • レイアウト : アセットが表示される列の数

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

  • Vertical Alignment : コレクション内のアイテムを各行の上、中、下のいずれかに揃えるかどうか。 このオプションは、Gridスタイルを選択した場合のみ表示されます(バージョン7.4 GA23+またはU23+の場合)。

  • リストアイテムのスタイル : 個々のアセットのフォーマットに使用されるスタイル。 このオプションは、選択したリストのスタイルによっては表示されない場合があります。

  • 最大項目数 : フラグメントが一度に表示できるアセットの最大数

構成したコレクションを含むコレクション表示フラグメントをクリックすると、より多くの構成オプションが表示されます。

コレクション内のアセットを構成どおりに表示する準備ができたら、ページを公開します。

Tip

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

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

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

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

注釈

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

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

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

  3. Fragments and Widgets] サイドバーパネルから、コレクション項目の表示に使用するコンポーネントをドラッグアンドドロップします。

    フラグメントまたはウィジェットをコレクション表示に追加し、表示プロパティを構成します。

    注釈

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

  4. [コレクション表示]でフラグメントまたはウィジェットをクリックします。

  5. もう一度クリックして、マッピングオプションにアクセスします。

  6. Mapping] 列で、コレクションにマッピングする [Field] を選択します。

    フラグメントとウィジェットをコレクション項目にマップします

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

    フラグメントとウィジェットをコレクション表示に追加し、コンテンツフィールドをマッピングします。

  8. Publish] をクリックします。

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

7.4以降で利用可能

パジネーション設定により、コレクションアイテムのページ送りが可能です。 このオプションには、2つの重要な利点があります。

  • コレクションは、アイテム数が多いほど見せやすくなります。 コレクション内のすべてのアイテムを表示するのではなく、一度に表示するアイテムの数を決定し、ユーザーがコレクション内のアイテムのリストを前後に移動できるようにすることができます。

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

注釈

Liferay 7.4 の U18 と GA18 より前のバージョンでは、利用可能なページネーションのオプションが少なくなっています。 これらのバージョンでは、ページ送りを有効にし、一度に表示する項目の最大数を選択することはできますが、ページ送りメニューに表示されるページ数を変更することはできません。

コレクション表示の表示アイテムをページ分割するには、

  1. コレクション表示のあるコンテントページの編集アイコン(Edit icon)をクリックします。

  2. ブラウザアイコン (Add widget icon) をクリックして、[フラグメントとウィジェット]パネルを開きます。

  3. Page Elementsで、ページ分割したいCollection Display Fragmentを選択します。 (選択されたフラグメントは、既存のコレクションを表示するように設定されている必要があります)。

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

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

    • Display All Pages : ページネーションメニューで、ページごとに番号やコントロールを表示するかどうかを設定します。 pagination type が選択されていない場合、このオプションは Display All Collection Items になります。

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

    • Maximum Number of Items per Page : ページネーションが有効な場合に、1ページに表示するコレクションからのアイテムの最大数です。 ページネーションタイプを選択しない場合、このオプションは代わりに Maximum Number of Items to Display になります。

    コレクション表示項目のページネーションオプションを選択します。

ページ分割を有効にすると、利用可能なページの総数は、コレクション内のアイテムの総数と、「1ページあたりのアイテムの最大数」の設定の両方によって異なります。

注釈

コレクション表示フラグメントは、デフォルトでは編集モードで一度に最大20件まで表示されます。 この制限を変更するには、コントロールパネル → インスタンス設定 → ページ → ページエディタに移動し、Maximum Number of Items in Edit mode 欄の数値を変更します。 編集モードで20以上の項目を一度に表示すると、パフォーマンスに影響が出る場合があります。 この設定は、ユーザーが表示モードのページで見るものに影響を与えません。

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

サイトのコレクションの使用統計を確認することができます。

  1. サイト管理] → [Site Builder] → [Collections] に移動します。

  2. Collections] タブで、確認するコレクションの横にあるアクション(Actions Menu)メニューをクリックし、 [View Usages] を選択します。

 [利用数を表示] を選択して、サイト全体でコレクションがどのように使用されているかを把握します

Liferay DXP 7.2

コンテンツセットの表示

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

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

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

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

  2. 追加] メニューを開き、 [コンテンツ管理] → [アセットパブリッシャー] を縦に重ねてページに追加してください。

  3. 一番上のアセットパブリッシャーのOptions → [設定] をクリックします。

  4. データ選択方法] の下で、 [コンテンツセット] を選択します。

    アセットパブリッシャーには、コンテンツのソースを選択するためのオプションがいくつかあります。

  5. Select Content Set] を開き、 [選択] をクリックします。

  6. Space Program Images] コンテンツセットをクリックします。

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

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

次に、一番下のアセットパブリッシャーを他のコンテンツセットで構成します。

  1. 一番下のアセットパブリッシャーのOptions → [設定] をクリックします。

  2. データ選択方法] の下で、 [コンテンツセット] を選択します。

  3. Select Content Set] を開き、 [選択] をクリックします。

  4. Trending] コンテンツセットをクリックします。

    使用するコンテンツセットを選択します。

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

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

結果は、標準のアセットパブリッシャーの出力として表示されます。 ここでは、ウィジェットテンプレートを作成して、よりスタイリッシュで魅力的なものにすることができます。

既存のコンテンツセットへの項目の追加

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

  1. 新しい画像をアップロードし、 [カテゴリ設定] の下で、 trending というタグを付けます。

  2. 何もしなくても、画像が Trending コンテンツリストの先頭に追加されます。

    結果は、表示されるコンテンツリストに動的に追加されます。

  3. 手動セットに追加するには、 [サイト管理] → [Content & Data] → [サイトビルダー] に戻ります。

  4. Space Program Images] をクリックし、 [Space Program Images] の横にあるOptions → [編集] を選択します。

  5. アセットエントリー] の隣にある、 [選択] → [基本ドキュメント] をクリックします。

  6. 新しい画像を選択して、 [Add] をクリックします。

  7. ホーム ページに戻って、一覧に追加された画像を確認します。

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

関連情報