aegif Labo Blog: Liferay WEBコンテンツのストラクチャーとテンプレートの紹介

こんにちは、かわべです。本格的な夏ですが、近年は夏になると夕立を通り越したゲリラ豪雨があったりしますよね。天気が怪しいときはアメッシュを定期的にチェックして帰るタイミングを逃さないようにしているのですが、ときどき失敗してしばらく帰れなくなります。今回は雨が止むのを待つ間にブログを書くことにしました。

以前にWEBコンテンツについて紹介した際にはスルーしてしまったWEBコンテンツのストラクチャーとテンプレートについて簡単に紹介したいと思います。

WEBコンテンツのストラクチャーとテンプレートとは？

WEBコンテンツを作成する際にはストラクチャーを選択します。インストールした直後のLiferayには、タイトルとHTMLコンテンツを要素として備えたデフォルトのストラクチャーのみ存在しています。HTMLエディタで編集できるので自由度は高いですが、決まった構造のコンテンツを繰り返し作成するには手間がかかることもありますし、作成者によって違う見た目になってしまうかもしれません。同じ種類のWEBコンテンツを何度も作成する場合は、入力する要素の構造（ストラクチャー）と各要素の表示方法（テンプレート）を事前に定義しておけば、どのユーザでも簡単に同じ見栄えのコンテンツが作成できるようになります。

今回はデモ目的で作成した「社長あいさつ」というWEBコンテンツのストラクチャーとテンプレートを例として見ていきます。
とてもシンプルな例なのですが、使用するとこのようなWEBコンテンツが作成できるようになります。

では、まずはストラクチャーから追加していきます。以下の手順はすべて管理者権限のあるユーザで実行しています。

ストラクチャーの追加

「システム管理→コンテンツ→WEBコンテンツ」と移動してWEBコンテンツの管理画面へと移動し、そこから「管理→ストラクチャー」を選択すると、ストラクチャーの管理画面が表示されます。ここからストラクチャーの新規追加や、既存のストラクチャーの編集ができます。

左側にWEBコンテンツに定義できる様々な項目が用意されています。ドラッグ＆ドロップで項目を追加後、設定タブで表示値などを変更してストラクチャーを作成していきます。
先ほどの「社長あいさつ」のストラクチャーは以下のような定義にしました。

「内容」はHTML、「感想をお聞かせください」はページヘのリンクとなっています（これはサイト内のページへのリンクになります）。

テンプレートの追加

次に、作成したストラクチャーに対応するテンプレートを作成します。ストラクチャーの管理画面から「テンプレートの管理→追加」をクリックすると、テンプレートの作成／編集画面に遷移します。

テンプレートの記述方法としてFreeMarker、拡張可能スタイルシート言語、Velocityが選択できるようになっています。今回はFreeMarkerで作成してみましょう。といっても、Liferay 6.2でのテンプレートエディタは高機能なので、ストラクチャーの要素を表示させるのは非常に簡単です。
ストラクチャーで定義した要素は左ペインに用意されているので、必要な場所でクリックするだけで表示可能な状態でテンプレートに追加されます。

テンプレートエディタ上部のコメントにもあるように、変数やメソッドの自動補完機能も備わっています。

ストラクチャーで定義した要素以外でWEBコンテンツが持っている値（例：タイトル）を表示させたい場合は以下のように記述します。

${.vars['reserved-article-title'].data}

FreeMarkerで記述する場合、変数名にダッシュ等が含まれる場合のFreeMarkerの記述方法とVelocityの変数一覧が参考になるかと思います。

さて、今回の「社長あいさつ」はhtmlのタグなども含めて、最終的に以下の内容でテンプレートを記述しました。

デフォルト値の設定

ストラクチャーを利用したWEBコンテンツの各要素にはデフォルト値を設定することができます。この機能も試してみましょう。ストラクチャーの管理画面から、今度は「デフォルト値の編集」を選択します。

表示される画面から、先ほど作成した感想リンク付きのテンプレートをデフォルトのテンプレートとして設定します。そして、「感想をお聞かせください」のリンクからは感想メールフォームのページへ遷移したいので、リンクのデフォルト値を「感想フォーム」として保存します。これは同じサイトに予め作成してあるページです。

これで準備は完了です。あとはこのストラクチャーを利用して好きなだけWEBコンテンツを作成しましょう。

ストラクチャーを利用したWEBコンテンツの作成

WEBコンテンツを作成するときに「社長あいさつ」ストラクチャーを選ぶと、デフォルト値の設定が反映された状態でコンテンツ作成画面が表示されます。

内容を適当に入力して保存し、どのように表示されるか見てみると…

こんな感じに表示されました。タイトル、内容、リンクが存在します。タイトルは<h3>要素として強調されています。また、リンク部分はテンプレートで指定したクラスに合わせてcssを適用しているので、ボタン風に表示されています。
感想リンクをクリックすると、感想フォームのページに飛ぶことができます。

ストラクチャーとテンプレートのいいところ

今回のはかなり単純な例ですが、ストラクチャー・テンプレートを適切に定義するとコンテンツ作成の手間が大幅に省けることがおわかりいただけるかと思います。もちろんストラクチャーやテンプレートを準備するユーザとコンテンツの作成者を別のユーザにすることも可能なので、コンテンツ作成者には難しい知識は必要ありません。

また、ストラクチャーは作成時に親を指定することで既存のものを拡張して作成することができます。例えば今回の「社長あいさつ」を拡張し、アイキャッチ用の写真を追加するのも簡単です。