Liferay 7.3で映画レビュー一覧を作る

はじめに

検索関連のウィジェットがLiferay7.3から大きく改良されました。ユーザーは一般的なデータリストを少ない開発労力で簡単に構築することができます。このドキュメントでは、Liferayが検索関連ウィジェットとWidgets and Web Content Templatesのスニペットを使って、映画レビューリストを構築する方法を紹介します。

とどのつまり、データリストの検索フィルター機能の使い方の紹介なので、同様の方法で、ナレッジベースなどにも応用可能です。

完成形

ファセット検索

キーワード検索

前提

• Liferayのセットアップができている

仕様

• ユーザーがWebコンテンツを使って映画のレビューデータを作成、更新、閲覧、削除することができます。
• ユーザーが映画のレビューをリストで検索したり、カテゴリーやキーワードでフィルタリングすることができます。
• ユーザーが映画レビューのリストをカードビューで閲覧できます。

[前提]　Freemarker Engineのサービスロケーターをオンにする

1. Control Panel -> System Settingsを選択。
2. PlatformセクションのTemplate Enginesに移動します。
3. FreeMarker Enginesセクションの中で、serviceLocatorを検索し、リストから削除して保存します。

これでテンプレートの中でServiceを利用するためのService Locatorが有効になりました。

構成イメージ

作成

検索用映画レビューリストの作成（構成イメージ②の部分）

• Site Admin -> Design -> Widget Templatesへ
• 右上の「＋」ボタンで、新しい検索結果テンプレート（Search Results Template）を作成する
• このコードスニペットをコピー＆ペーストしてWeb Content Search Results Templateとして保存します。

ウェブコンテンツストラクチャの新規作成（構成イメージ⑦の部分）

• Site Admin -> Content and Data -> Web Contentを選択します。
• Structuresタブに移動して、「＋」ボタンでWeb Content Structuresを新規に作成します。
• Sourceタブに移動し、このコードスニペットをコピー＆ペーストしてMovie Review Structureとして保存します。

検索リストのWebコンテンツを表示する為のテンプレート新規作成（構成イメージ⑤の部分）

• Site Admin -> Content and Data -> Web Contentを選択します。
• テンプレートタブに移動して、「＋」ボタンで新しいウェブコンテンツテンプレート(Web content template)を作成します。
• 右側のプロパティ→基本情報のパネル中で、先に作成したMovie Review Structureを選択します。
• 右側のプロパティ -> 基本情報パネルで、Cacheableのチェックを外します。
• このコードスニペットをコピー＆ペーストしてWeb Content Templateとして保存します。

DDMテンプレートキーをコピー

新しく作成したWebコンテンツテンプレートから検索結果ウィジェットテンプレートにDDMテンプレートキーをコピーする。

• Site Admin -> Content and Data -> Web Contentを選択します。

• テンプレートタブに移動し、新しく作成したWeb Content Templateの編集画面に入る

• 右側のプロパティ→基本情報パネルの中にあるDDMテンプレートキーをコピーする。

• Site Admin -> Design -> Widget Templatesを選択します。

• 作成された検索結果ウィジェットテンプレートに移動し、コピーしたキーをScriptの設定値（属性ddmTemplateKey）を置き換えます。

<@liferay_journal["journal-article"]
article=article
ddmTemplateKey="42021" # <--ここ　　（※25行目）
/>

- 保存をクリックする。

## ドキュメントダウンロード用のWebコンテンツテンプレートの新規作成（構成イメージ⑥の部分）
- `Site Admin` -> `Content and Data` -> `Web Content`を選択します。
- `テンプレート`タブに移動して、`「＋」`ボタンで新しい`ウェブコンテンツテンプレート(Web content template)`を作成します。
- 右側の`プロパティ` -> `基本情報`パネルで、先に作成した**Movie Review Structure**を選択します。
- 右側の`プロパティ` -> `基本情報`パネルで、`Cacheable`のチェックを外します。
- [このコードスニペット](https://gist.github.com/yasuflatland-lf/209cd0242d654ba529f06f742dc77d4f#file-movie_review_image_web_content_template-ftl)をコピー＆ペーストし**Web Content Template For DownloadLink**として保存します。（ドキュメントのダウンロードURLとなります。）

## ムービートピックとカテゴリーの作成
- グローバルサイトに移動します。
- `Site Admin` -> `Categorization` -> `Categories`を選択します。
- 左側のセクションで`トピック`に移動し、新しいカテゴリーを追加して保存します（例：「Movie」）。
- `Movie`カテゴリーの下に、映画のタイトルを表す別のカテゴリーを追加し、保存します。（例：「Action」,「Story」,「Anime」）。

## ディスプレイ・ページ・コンテンツ用の表示ページテンプレートを作成する（構成イメージ④の部分）
- `Site Admin` -> `Design` -> `Page Templates`を選択します。
- `表示ページテンプレート`タブに移動して、`「＋」`ボタンで新しい表示ページテンプレートを作成します。
- ブランクを選択、名前を入力します。
- `コンテンツタイプ`として`Web Content Article`を選択します。
- サブタイプとして、以前に作成した**Movie Review Structure**を選択します。
- 右パネルを開き、`Widget`タブで`Display Page Content`を検索します。
- 表示ページテンプレートのドロップフィールド（ `Place fragment here`の部分）に表示ページテンプレートを配置します。

#### ドキュメントをダウンロードするためのボタンも追加する場合
ウェブコンテンツに添付されたドキュメントをダウンロードするためのボタンを追加するには、ページにボタンフラグメントを追加します。
- ボタンの表示名をクリックして、`Download the doc`に変更します。
- ボタンフラグメントをクリックして、右パネルの`リンク構成`に移動します。
- リンク `From Content Field`
- ソース`Movie Review Structure(Default)`
- `Field`下で、アップロードされたドキュメントを処理するために作成した**Web Content Template For DownloadLink**を選択します。

- 公開をクリックします
- 作成された表示ページテンプレートの「：」メニューをクリックして、「Mark As Default」をチェックしてください。（後作成したWeb Contentがこのページテンプレートを自動的に適用）

## 検索ページの作成（構成イメージ①の部分）
カスタム検索ページを新しいコンテンツページで作成します。このページに、以下のウィジェットを追加します。

- 検索系ウィジェット
  - `Search Results` (Search Resultsには、CommerceとLiferayの2つがある場合、Commerceではなく、検索でSearch Resultを選択してください)。
  - `Search Bar`
  - `Search Option`
  - `Type Facet`
  - `Category Facet`
- `Search Option`の設定に移動し、`Allow Empty Searches`にチェックを入れて保存します。
- `Search Results`の設定で、**Web Content Search Results Template**を使用するように設定します。
- `Type Facet`の設定で、すべてのアセットタイプを`Available`に移動し、`current`には`Web Content Article`のみを残します。

### 対象WebContentのみを表示する場合
- 検索ページに`Customer Filter`を追加
- `Customer Filter`の設定で、`Filter Field`には`ddmStructureKey`を入れて、`Filter Value`には`Movie Review Structure`のStructureKeyを入れて、`Invisible`をチェックして保存します。（そのほかの部分はデフォルトのまま）
  - StructureKeyの確認方法（確認の為、下記を設定しますが、確認完了後、設定をもどしてください。）：
      - `Search Results`の設定で、**List Layout**を使用するように設定して、**Display Results in Document Form**をチェックして保存します。
      - 保存後、`Publish`して、表示一覧の対象アイテムの[Details..]をクリックして、`ddmStructureKey`のValueをメモして、`Customer Filter`の設定の`Filter Value`に設定します。


## Movie Reviewデータを追加
- `Site Admin` -> `Content and Data` -> `Web Content`を選択します。
- `「＋」`ボタンをクリックして、`Movie Review Structure`を選択して、テスト用の`Movie Review Web Content`を作成します。
- 右パネルを開き、`Categorization`に適切なカテゴリ、トピックを選択します。
- 右パネル　→ `Default Template`に`Web Content Template`を選択します。

# まとめ
ちょっと長めのポストになってしまいましたが、Liferay7.3からの検索機能の強化により、コーディング量を最小限に抑えて、柔軟なデータ構造(Webコンテンツ）とアセット管理(ドキュメントとメディア）機能を最大限に生かした、`ローコード`開発も容易に可能になったLiferay。JavaといえばSpring Bootなどがフレームワークとしてよく使われますが、柔軟な認証機構を持ち、カスタム開発部分でも容易に統合できるLiferayは、中大規模開発のプラットフォームとしてだけでなく、ローコード開発にも使えるプラットフォームだと思います。