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

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

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

# 完成形
### ファセット検索
<iframe width="560" height="315" src="https://www.youtube.com/embed/JlhrKXCajcE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>


### キーワード検索
<iframe width="560" height="315" src="https://www.youtube.com/embed/R10tXiqgzUA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>


# 前提
- [Liferayのセットアップ](https://zenn.dev/yasuflatland/books/1eb614b4a5aeec4c881d/viewer/013ec2)ができている


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

## [前提]　Freemarker Engineのサービスロケーターをオンにする
1. `Control Panel` -> `System Settings`を選択。
1. `Platform`セクションの`Template Engines`に移動します。
1. `FreeMarker Engines`セクションの中で、`serviceLocator`を検索し、リストから削除して保存します。

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

# 構成イメージ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1189220/2896f9fa-abfa-4ed1-bc69-4e9c74aa9177.png)

# 作成

## 検索用映画レビューリストの作成（構成イメージ②の部分）
- `Site Admin` -> `Design` -> `Widget Templates`へ
- 右上の`「＋」`ボタンで、新しい`検索結果テンプレート（Search Results Template）`を作成する
- [このコードスニペット](https://gist.github.com/yasuflatland-lf/209cd0242d654ba529f06f742dc77d4f#file-search_result_widget_template-ftl)をコピー＆ペーストして**Web Content Search Results Template**として保存します。

## ウェブコンテンツストラクチャの新規作成（構成イメージ⑦の部分）
- `Site Admin` -> `Content and Data` -> `Web Content`を選択します。
- `Structures`タブに移動して、`「＋」`ボタンで`Web Content Structures`を新規に作成します。
- `Source`タブに移動し、[このコードスニペット](https://gist.github.com/yasuflatland-lf/209cd0242d654ba529f06f742dc77d4f#file-movie_review_web_content_structure-json)をコピー＆ペーストして**Movie Review Structure**として保存します。

## 検索リストの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_web_content_template-ftl)をコピー＆ペーストして**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は、中大規模開発のプラットフォームとしてだけでなく、ローコード開発にも使えるプラットフォームだと思います。