Liferayの表示ページテンプレートを使ってみよう

こんにちは、かわべです。
最近は家の周りでやたらと工事が行われており、Web会議に参加すると騒音に驚かれることしばしばです。

この記事ではLiferay DXP 7.1から追加された表示ページテンプレート(Display Page Templates)の使い方を紹介します。表示ページテンプレートはコンポーネントやセクションなどのページフラグメントを使ってコンテンツページを作るのと同じ要領で、特定のコンテンツ種別の個々の表示ページを作ることができるという機能です。
これはDXP 7.0までのバージョンではFreeMarkerでWebコンテンツテンプレートを記述しなければ実現できなかったことです。FreeMarkerで思い通りの画面を作るにはコーディング知識が必要になってくるので、開発知識がなくても簡単にコンテンツを表示するためのページが作れるようになったのは画期的です！

それでは使い方を順を追って見てみましょう。Liferayを利用する旅行会社が旅行の目的地をWebコンテンツとして作成し、それを表示するための個別ページを作りたい、という単純なシナリオに沿ってやっていきたいと思います。
利用バージョンはLiferay DXP 7.2 SP2です(少し前のバージョンだと落とし穴がありました…それは最後に書きます)。

1. 表示させるコンテンツタイプ（エンティティ）の作成

表示ページテンプレートを適用可能なのは、デフォルトで

• Webコンテンツ
• ドキュメント
• ブログのエントリ

の3種類のコンテンツです。
今回は旅行の目的地を取り扱いやすいように、専用のWebコンテンツストラクチャーを新規で作成します。
管理者としてログインし、コントロールパネル→コンテンツ→Webコンテンツ→ストラクチャに移動し、追加ボタンから「旅行目的地」という名前で以下のストラクチャーを追加します。


さて、これまではWebコンテンツのストラクチャを作成したらもれなくペアとしてWebコンテンツテンプレートを作成していたのですが…今回はWebコンテンツテンプレートは作らずに、表示ページテンプレートの作成に進みます。
（Liferayを使っていると何種類かの〇〇テンプレートが出てくるので、混乱しないように気をつけてくださいね）

2. 表示ページテンプレートの作成

コントロールパネルからサイトビルダー→サイトページを開き、表示ページテンプレートタブを開きます。

[+]ボタンで新規追加画面を出して、名前を「旅行先表示」と入力し、コンテンツ種類としてWebコンテンツ、サブタイプに旅行目的地を選んで保存します。


すると、フラグメントを利用したコンテンツページ作成とほぼ同じ編集画面が開きます。
まずは、セクション配下の基本セクションからバナー（中央）を編集中のページに配置してみましょう。



コンテンツページ作成でお馴染みですが、セクションやコンポーネントで編集可能となっているエリアは自由にテキストなどの編集が可能です。

（バナータイトルの編集部分を「自由にタイトルを入力」に変えてみました）

しかしそれだけではなく、コンテンツ表示ページテンプレートでは表示対象のコンテンツが持つ要素を編集可能エリアにマッピングすることができるのです。

左の「編集」アイコンではなく右の「マッピング」（翻訳がおかしいですが…）アイコンを選ぶと、



表示対象のコンテンツ（今回の場合は先程作成した「旅行目的地」）が持つマッピング可能な要素が選択できます。


下の方にある「名前」と「説明」がWebコンテンツストラクチャに定義した要素ですね。今回は上部のタイトル部分に「名前」、その下の文章部分に「説明」をマッピングします。そして背景画像には同じ要領で「画像」をマッピングしてみます。

マッピングが設定された部分は薄紫色で囲われます。


（リンクボタン部分は、今回はストラクチャにリンクURLを要素として持たせるのを忘れたので、ひとまず表示文言だけ編集して「詳しく見る」に変えておきました。）

これでコンテンツのマッピングは完了です。その他はコンテンツページと同じ要領で、作りたいページやデザインに応じて適宜ウィジェットやコンポーネント、セクションなどを配置して編集・設定してください。

3. コンテンツの作成

それでは「旅行目的地」コンテンツを追加し、表示ページテンプレートを使って表示されるように設定してみましょう。
コントロールパネル→コンテンツ→Webコンテンツに移動し、[+]から「旅行目的地」を追加する画面を開きます。
タイトル、名前、説明に適当に入力し、画像をアップロードします。


そして右側の設定ペインの「表示ページテンプレート」で「特定の表示ページテンプレート」をプルダウンで選択し、選択をクリックすると開くポップアップ画面で先程作成した「旅行先表示」を選択します。


そしてフレンドリURLはデフォルトだとタイトルに引きずられるので、URLとしてわかりやすい英数字にしておきます。


このURLは全体をメモしておきましょう。
ここまで入力できたら保存（公開）します。

4. コンテンツ表示の確認

先ほどメモしたURLをアドレスバーに貼り付けて移動してみると、


設定通り、画像を背景にして名前と説明を載せたページとしてコンテンツが表示されました！
テンプレート言語を一切記述していないのにこのようにコンテンツをレンダーして表示することができるなんて、昔のバージョンから知っている者としては感慨深いものがありますね。

今はアドレス直打ちで移動しましたが、従来のようにアセットパブリッシャーで集約表示した一覧をクリックしてコンテンツを全表示するときにも利用できます。その場合、アセットパブリッシャーの設定でアセットリンクの振る舞いを「コンテキストの参照」にしてください。「全内容の表示」にするとこのように


Webコンテンツのテンプレートを使ってレンダーされたコンテンツが表示されます。今回はWebコンテンツテンプレートを作っていないので、項目が箇条書きで表示されています。

従来のようにデフォルトアセットパブリッシャーを配置したページをWebコンテンツの表示ページに指定する機能も残っているので、そちらがお好みの場合は引き続き利用可能です。アップグレードも問題なさそうですね。

5. まとめ

表示ページテンプレートにコンテンツをマッピングして表示ページをつくる方法について説明しました。テンプレート言語なしでも自由度の高いページ作成が可能なので、対応しているエンティティを利用する場合はぜひ利用を検討してみてください。

ちなみに古いバージョンだと…

DXP 7.2の少し古いバージョン(GA1かな？)だと、表示ページテンプレートを使う部分がすべて非公開ページ扱いとなり、Guestで見ようとすると以下のようにログインを求められるという悲しいことになりました…

SP2を触る限り修正されていたので、安心してくださいね。