表示ページテンプレートの作成
前回の記事では、コンテントページは何者なのかについての概要を説明しました。
コンテントページで簡単な静的ページであれば作成可能ですとご紹介し、「Hello World！」と表示されるだけのページを作成しています。
同じように画像や文章の要素を置いていって、ページを量産することで、製品の紹介ページ等も作成可能ですが、同じようなページを作成するならもう少し上手いやり方はないでしょうか。
ということで今回はLiferayの標準機能である「Webコンテンツ」で作成したものを表示ページテンプレート上に表示させる方法をご紹介します。
最終的には以下のようなページを作ることを目標とします。
ボードゲームが好きなのでボードゲームのページにしましたが、社内ニュースでも、製品ページでも、好きなトピックを想定していただいて構いません。
それでは初めて行きましょう。
Webコンテンツの作成
Webコンテンツは「ストラクチャー」と「テンプレート」の2つの要素で構成されます。
簡単に説明すると、「ストラクチャー」は項目の定義のようなもので、
「テンプレート」はストラクチャーにより定義された項目をどこにどう表示するかを決めるものです。
項目の整理
まずはページに表示したい内容をそれぞれの要素に分解して考えます。
サンプルのページでは以下の様に分解できそうです。
- タイトル
- 概要
- 製品画像
- プレイ人数
- プレイ時間
- 対象年齢
- ルール
社内ニュースであれば「発行部門」「更新日時」なども表示したくなるかもしれません。
ここで分解した1つ1つがストラクチャーの入力項目となります。
ストラクチャーの作成
次にストラクチャーを作成します。ストラクチャーの作成はサイト管理メニューのコンテンツ→Webコンテンツ画面の「ストラクチャー」のタブから行います。「新規作成」のボタンでストラクチャーを追加します。
ストラクチャーの編集画面では右側の要素一覧からドラッグ＆ドロップで項目を追加し、名前やプロパティを変更して定義していきます。
タイトルや本文などは「テキストフィールド」、更新日や作成日等は「日付」等、対応した項目を使用するとよいでしょう。
上で整理した項目を追加していきます。ラベルを変更するとわかりやすいです。
ストラクチャーを作成すると、Webコンテンツの画面で新規作成ボタンを押した際に、入力できるストラクチャーとして先ほど追加したものが表示されるはずです。
それを押すと先ほどストラクチャーで定義した項目が入力できる画面が表示されます。
ひとまずストラクチャーの作成は完了です。
表示ページテンプレートの作成
Webコンテンツを表示する方法にはWebコンテンツのテンプレートを使用する方法と表示ページテンプレートを使用する方法がありますが、今回は表示ページテンプレートの方を使用します。
表示ページテンプレート自体は以前のバージョンからありましたが、近年のバージョンではコンテントページの編集と同じような操作感に統一されていて、より使いやすくなっています。
サイト管理メニューのデザイン→ページテンプレートの「新規作成」で表示ページテンプレートを作成します。
コンテンツタイプに「Webコンテンツ」、サブタイプに作成したストラクチャーを選択します。
保存を押すとコンテントページの編集画面のような画面に遷移します。
あとは以前解説した通り、ドラッグアンドドロップで要素を配置してみましょう。
「見出し」を配置してみて、配置後に見出しの中の「element-text」を選択すると、
右のペインの内容が変わり「マッピング」というタグが表示されます。
「Content（[作成したストラクチャー名]）」のカテゴリの中に、ストラクチャーの作成で追加した項目がここで選択できるようになっているはずです。
つまり、表示ページテンプレートのマッピングの設定でストラクチャーの項目を選択すると、
Webコンテンツの作成時に入力した値が「見出し」や「画像」の要素として配置した場所に表示されるということです。
余談ですが、FreeMarkerでテンプレートを作ったことがあると、ここまでの一連の作業が画面操作のみのコーディングなしでできてることが革命に感じます。
画像や概要説明など他の項目も、要素を配置してマッピングの設定をしていきます。
マッピングせずにそのまま書き換えることで、固定の文言を配置することも可能です。
要素同士の余白や文字色、太さやサイズなども画面上で調整できるようになっているので、色々調整してみましょう。
色々配置してみました。
Webコンテンツの入力
諸々準備ができましたので、Webコンテンツの編集画面から実際に値を入力してみましょう。
画像の項目はすでにアップロードされているものから選択するか、アップロードすることが可能です。
右側の「詳細設定」のタブの「表示ページ」で先ほど作成した表示ページテンプレートを選択します。
プレビューしてみると、作成したテンプレート通りに表示されてそうですね。
別のコンテンツを作成して別の値や画像を入力してみると
表示も新しく入力したものに変わります。
最後に
表示ページテンプレートの作成方法を紹介してきました。
前回の記事では静的な文言や画像を表示する方法の紹介でしたが、
実際にそれらのものがどう紐づけられるのかのイメージと、
具体的にどのように表示されるのかが伝わっていましたら幸いです。
マッピング、想像より便利じゃなかったです？