ウィジェットとレイアウトによるページ作成

Liferayは長らく、「ウィジェット」を機能の１かたまりとして、いくつかのウィジェットをページに配置することでページを作成していました。
ファイルのアップロード、ダウンロード、バージョン管理などの機能を１かたまりとして「ドキュメント＆メディア」ウィジェットとし、画面にドキュメント＆メディア、カテゴリフィルター、タグフィルターなどのウィジェットを配置することで、カテゴリやタグで絞り込みが可能なファイル一覧の画面を作成する、といった具合に。

画面全体のレイアウトを選択し、画面に配置したいウィジェットを一覧から置きたい場所にドラッグ＆ドロップで配置する。
直感的な操作で、ソースコードの改変を必要としないため、専門知識などほぼなくてもページが作成できる非常に強力なものです。

「ウィジェット」の変遷
現在「ウィジェット」と呼ばれている機能群はその昔、「ドキュメント＆メディアポートレット」のように「ポートレット」と呼ばれていました。内部的なソースコードは依然としてPortletという名前がついてますし、実際の動作もPorlet3.0など、「ポートレット」として標準化されている規格に準拠しています。Liferayでいうウィジェットは一般でいうポートレットとほぼ粒度が等しいと考えてよいです。なんで名前変わったんでしょうね？

コンテントページの誕生

ところが時が流れるにつれて、これらの方式の短所が浮き彫りになっていきます。

「標準で用意されているいくつかのレイアウトから選択し、置きたいウィジェットをレイアウト通りに置くだけ」という謳い文句は
「用意されたレイアウト以外を使いたくなった時にカスタマイズが必須」という制約となってきました。

ウィジェットとして1まとめにされると、「タイトルだけ少し変えたい」「この隙間に更新日を表示したい」といった細かい要望に対応するのが難しくなります。

表示レイアウトの変更をするにも最終的にはHTMLやFreeMarkerの知識が必要であり、結局自力でコンテンツの表示を変更できている人は少ない状況でした。

これらの問題に対応するべく、DXP7.3以降では、新しいページ作成方法である「コンテントページ（Content Page）」が追加されました
コンテントページは、ウィジェットより更に細かい要素である「フラグメント」をドラッグ＆ドロップで配置し、時にはその場で固定の文言や画像を表示、時にはWebコンテンツに入力されたある項目を動的に表示する、従来のウィジェット配置の操作感を維持しながら、画面操作のみで視覚的にページを作成できる機能です。

・・・とはいえ、以前のページ作成方法を知っている人間からすると圧倒的に簡単で自由にページが作成できるようになっているのは確かというだけで、事前知識がなくても使えるかというとそうではありません。

基本的な使用方法をいくつか紹介します。

コンテントページの作成方法
左上の「Home」の左横のアイコンをクリックするとメニューが表示されます。
サイトビルダー ＞ サイトページ と押し、ページ管理の画面に移動します。

コンテントページの作成方法

左上の「Home」の左横のアイコンをクリックするとメニューが表示されます。
サイトビルダー ＞ サイトページ と押し、ページ管理の画面に移動します。

右上の「新規作成」を押すと

ページのテンプレート選択の画面になるので「空白」を選択します。
ちなみに、ここで「ウィジェットページ」を選択すると先述のウィジェットを配置するページを作成できます。
ページ名は自由に入力してください。

ページが作成されると、コンテントページの編集画面に移ります。
このページでフラグメントやウィジェットを配置していき、ページを作成していきます。

ウィジェットの配置
コンテントページを作成しましたが、左側のメニューに「ウィジェット」というタブが表示されていることからお分かりの通り、フラグメントと同じくコンテントページにウィジェットを配置することも可能です。（そうなってくるとウィジェットページの存在意義とは・・・？）

表示するコンテンツを配置してみます。
左側メニューから「見出し」を選択してドラッグ＆ドロップでページに配置します。

「Heading Example」と表示されました。

表示されている文字をダブルクリックすると文字の編集ができるようになります。
自由に書き換えてみましょう。

次に、「パラグラフ」を配置します。

見出しと同様に、ダブルクリックで文字の編集ができます。

右上の「公開」ボタンを押すことで、作成したページを公開できます。

作成したページの三点メニューから「参照」を押すと作成したページを確認できます。

編集画面で書いた通り表示され、、、なんか思ってたんと違う
なんか・・・寄ってる。左に。

こんな感じで左端がこう、、、こう揃うと思った

そんな時はすでに作成されているページを確認してみます。
かくいう「Liferayへようこそ」のページもコンテントページで作成されているのです。
右上の鉛筆（ペン？チョーク？）マークのアイコンをクリックします。

編集画面の左側のツリー表示のようなアイコンをクリックすると、このページで使用されているフラグメントやウィジェットがツリー上に表示される、「ブラウザ」表示に切り替わります。
ツリーの下にぶら下がっているものは、その親要素の内側に入れられているという意味です。

このページは一番外側に「コンテナ」、その中に「コンテナ」、更にその中に「グリッド」、というように配置されています。
「グリッド」の中に更に複数のパラグラフや画像が配置されています。
2番目の「コンテナ」を選択すると、そのコンテナの設定の詳細が右側に表示されます。
「コンテナの幅」が「固定幅」に設定されているのが確認できます。

早速試してみましょう。
作成したページの鉛筆マークから編集画面に移り、「コンテナ」を配置してみます。

配置して、先ほどのブラウザ表示に切り替えてみます。
「見出し」「パラグラフ」「コンテナ」と並んでいます。

「コンテナ」
└「見出し」
└「パラグラフ」
のようになってないとダメそうです。ブラウザ上でドラッグアンドドロップをすることで、要素をコンテナの内側に入れたり、逆に外側に出したりできます。
中央の大きな表示でもドラッグ＆ドロップで位置を変更することは可能ですが、今回のようにコンテナの中に入れる、コンテナから出す、などの操作はブラウザ上で操作したほうが簡単です。

コンテナの幅も「可変」となっています。コンテナを配置した直後のデフォルトは「可変」になりますので変更しましょう。

「見出し」「パラグラフ」の二つをコンテナの中に入れました。
コンテナの幅も「固定幅」に変更します。
再度「公開」ボタンを押して確認してみます。

お、それっぽい表示になりました！

このように、コンテントページでは画面操作のみで要素を配置したり、要素の設定を変更することでページを作成していくことが可能です。

コンテントページのフラグメント

コンテントページで使用できる主なフラグメントを紹介します。
使用できるフラグメント全般にいえることですが、それぞれの要素に対して個別に枠線や文字色、サイズや余白の設定などが可能です。
ちょっと狭いな、と思った時に、要素の上部や下部の余白を調整することで見やすい幅に変更できます。

コンテナ

上述の通り、コンテナは複数の要素をひとまとめにできます。

グリッド

コンテナに似ていて、複数の要素を1まとめにできますが、グリッドは横並びにいくつかのコンテナを持ちます。
画面のレイアウトを縦に分割したいときに重宝します。
モジュール数を変更すると縦の分割数が変わります。（上は3モジュール、その下は5モジュール）
青い●をドラッグして動かすことで、各コンテナの幅を調節できます。

タブ

グリッドのように複数のコンテナを持ちますが、横並びに表示ではなく選択したタブに対応したコンテナのみを表示します。

見出し

ページの見出しを表示します。

パラグラフ

文章を表示します。

HTML

文章を表示しますが、見出しやパラグラフなどの要素を使用せず、直接HTMLソースを書き込む場合に使用します。

画像

画像を表示します。表示する画像はLiferay上にアップロードされているものか、URL指定で外部の画像を表示することもできます。

最後に

コンテントページの基礎の基礎の紹介でした。

簡単な静的ページであればもう、これらのフラグメントを使用することで作成可能です。習うより慣れろ、の精神で簡単なページを作成してみましょう。どんなにいじってもシステムが壊れることは（滅多に）ありません。

触れば触るほど「コレクション表示」「マッピング」などの謎の単語が大量に現れるはずです。これらの謎単語が、「なにこの機能めっちゃ便利！」となる日が近いうちに来るかもしれません。

enjoy!

あっきーでした！

コンテントページの誕生