null Liferay 7のコンテンツページを使ったページの作成

こんにちは。おおたにです。

 

今回はLiferay 7.1で追加されたコンテンツページ機能の概要と、コンテンツページを使ったWebページの作成方法を紹介します。コンテンツページ機能は登場以来機能拡充が続いていますが、本記事ではLiferay DXP 7.3 SP1時点での機能を紹介しています。

 

コンテンツページとは

コンテンツページはLiferay 7.1で初めて登場したページタイプです。ページタイプとは文字通りLiferay上で作成するWebページの種類のことです。ページを自由に構成できる主要なページタイプにはウィジェットページとコンテンツページの2つがあり、それぞれの特徴は以下のとおりです。

  • ウィジェットページ : ウィジェット(ポートレット)と呼ばれるアプリケーション部品をページ上に配置し、ウィジェットを通じてコンテンツを表示する。予め決められたレイアウトの中にアプリケーションを配置していくイメージ。
  • コンテンツページ : フラグメントと呼ばれるページ構成用の部品やウィジェット、インラインのコンテンツをページ上に配置する。HTMLに近いレベルの要素をページ上に配置し、画像やテキスト等のコンテンツを直接ページ上に挿入して編集するイメージ。

Liferay 7.2まではページ作成時にウィジェットページとコンテンツページを選択する形でしたが、Liferay 7.3からはデフォルトがコンテンツページとなっています(ウィジェットページも利用可能)。ウィジェットページに比べてコンテンツページの方が一般的なWebオーサリングツールのイメージに近いかと思います。

 

コンテンツページ作成に関する要素

コンテンツページを作成するにあたり、コンテンツページを構成する要素や機能のうち主要なものを紹介します。

フラグメント

コンテンツページを構成するための基本部品です。画像や見出し、テキストといった基本コンポーネント、レイアウト用の部品、ナビゲーションやフッタ、バナーといった一般的なWebページに必要な部品セットなどが標準で用意されており、これらをページ上に配置していきます。カスタムのフラグメントを追加することも可能です。

ウィジェット

特定の機能を提供するアプリケーション部品です。標準で多数の有用なウィジェットが用意されており、ページ上に配置することで各ウィジェットが提供する機能をエンドユーザに提供します。

ポートレットという形で独自のビジネスロジックとUIを実装したカスタムウィジェットを作成することができ、ページ上でお客様固有の機能を提供する際に利用されます。これはLiferayにおける主要なカスタマイズの1つです。

コンテンツ

コンテンツページ上で利用されているWebコンテンツの一覧です。コンテンツ表示フラグメントやWebコンテンツの表示ウィジェットを使ってページ上に表示しているWebコンテンツの一覧を確認し、そのWebコンテンツの編集や権限設定を行うことができます。

ページデザインオプション

Liferay 7.3の新機能マスターページテンプレートやスタイルブック等、ページのデザインに関する設定を確認・変更することができます。詳細リンクからテーマの変更を行うこともできます。

コメント

ページ上のフラグメントやウィジェットにコメントを追加することができます。フラグメントやウィジェット上部のコメントアイコンからコメントを追加し、ページ作成に関してディスカッションするなどのコラボレーションが可能です。コメントには解決済みフラグがあり、未解決のコメントだけ表示するといったことができます。

 

コンテンツページの作成

では実際にコンテンツページを作成してみましょう。

1. 画面右上の「メニュー」アイコン -> 「サイトビルダー」 -> 「サイトページ」をクリック

2. 画面右上の「新規作成」アイコン -> 「公開ページ」もしくは「非公開ページ」をクリック

3. 基本テンプレートとして「空白」もしくは作成済みのマスターページテンプレートを選択(基本テンプレートからマスターページテンプレートを選択するとコンテンツページが作成される。その他の「ウィジェットページ」を選択すると、これまでどおりのウィジェットページが作成される)

4. ページの名前を適当に入力して「追加」をクリック

以上で空のコンテンツページが作成されます。

画面上部のアイコンやボタンの説明は以下のとおりです。

  •  アイコン : Undo/Redo
  •  アイコン : 編集履歴の表示
  • ページデザイン/コンテンツ編集 : 画面右側のアイコンのうち、各作業に不要なアイコンが非表示になる
  •  アイコン : ページのプレビュー
  • 公開 : ページの公開
  • エクスペリエンス : 特定のオーディエンス向けにページの内容を変えたい場合の設定
  • 言語アイコン : 言語の切り替え
  •  アイコン : レスポンシブ表示確認のための端末エミュレーション切替

続いて、レイアウト用部品を配置します。画面右側の「フラグメントとウィジェット」アイコンをクリックし、「グリッド」をドラッグ&ドロップします。

部品が配置されました。なお、ページ編集は操作ごとに自動的に下書き保存されるので、明示的に保存を行う必要がありません。

次に、実際に表示するコンテンツを配置します。画面右側の「フラグメントとウィジェット」アイコンをクリックし、「画像」をグリッドの各列にドラッグ&ドロップします。

配置した画像フラグメントをクリックすると、画面右側がページ内のフラグメント/要素の構成を管理するビューに切り替わります。この画面で各フラグメントや要素を選択し、そのレイアウトやスタイルを変更することができます。

今回は画像フラグメントのimage-square要素をクリックし、画像欄の「選択」ボタンをクリックして各画像フラグメントに画像をセットしましょう。

続いて、各画像の下に「見出し」をドラッグ&ドロップしてテキストを編集します。

このように、コンテンツページではウィジェットを利用せずWebページを直接編集して作成することができます。なお、大事なことなので2回言いますが、ページ編集は操作毎に自動的に下書き保存されます。

 

その他の便利な機能

UndoとRedo

画面上部のUndo/Redoアイコン  もしくはショートカットキー(ctrl+z / ctrl+shift+z)で、操作の取り消し/やり直しをすることができます。

コンテンツのマッピング

フラグメントのテキストや画像に、既存コンテンツ(Webコンテンツ/ドキュメントライブラリのドキュメント/ブログ)のコンテンツ本体や属性情報をマッピングして表示させることができます。フラグメントのテキストや画像要素を選択して「マッピング」タブに移動し、マッピングしたいコンテンツとその項目を選択します。なお、リンクを設定可能な要素では、リンクURLにも既存コンテンツの属性情報をマッピングすることが可能です。

フラグメントのコピー

フラグメントのオプションメニューの「コピーする」をクリックすると、そのフラグメントの下にフラグメントのコピーが挿入されます。レイアウト要素をコピーすると、その中身も含めたコピーが作成/挿入されます。

フラグメント構成の再利用

レイアウトフラグメントのオプションメニューの「構成を保存」をクリックすると、そのフラグメントの設定内容を保存して再利用することができます。

リンクURLや画像などフラグメントのインラインで指定した内容や、コンテンツマッピング設定の保存の要否などを指定することができます。また、保存したフラグメント構成は「保存されたフラグメント」から利用することができます。

 

なお、Webコンテンツの下書きや公開についてはウィジェットページと同様に行うことができますので、説明は割愛します。

今回の紹介は以上となります。Liferay 7.3でさらに便利になったコンテンツページ、是非皆さんもご活用ください。

関連記事
feature

RANKING
2021.1.08
2020.12.28
2020.12.01
2020.10.30
2020.12.18