Liferay 7.4でSearchを使って映画レビュー一覧を作る

はじめに

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

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

• Site Admin -> Content and Data -> Web Contentを選択します。
• Structuresタブに移動して、「＋」ボタンでWeb Content Structuresを新規に作成します。
• Builder内のFieldsタブから、Text -> Image -> Text -> Upload の順にドラッグアンドドロップします。
• ラベルをそれぞれTitle Image Description Documents and MediaとしてMovie Review Structureとして保存します。

（このコードスニペットをコピーしてインポートするのも可能です）

検索ページにWebコンテンツ（画像とタイトル）を表示する為のテンプレート新規作成（構成イメージ⑤の部分）

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

Webコンテンツテンプレートと検索結果ウィジェットテンプレートを紐付ける

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

• Site Admin -> Content and Data -> Web Contentを選択します。
• Templateタブに移動し、新しく作成したWeb Content Templateの編集画面に入る
• 右側のProperties→BASIC INFORMATIONパネルの中にあるDDM Template Keyをコピーする。
• Site Admin -> Design -> Template から Widget Templates タブに移動し、先ほど作成した Web Content Search Results Template を開きます。
• コピーした DDM Template Key をScriptの設定値（属性ddmTemplateKey）を置き換えます。

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

• 保存をクリックする。

各コンテンツ閲覧用のWebコンテンツテンプレートの新規作成（構成イメージ⑥の部分）

• Site Admin -> Content and Data -> Web Contentを選択します。
• Templateタブに移動して、「＋」ボタンで新しいウェブコンテンツテンプレート(Web content template)を作成します。
• 右側のProperties -> BASIC INFORMATIONパネルで、先に作成したMovie Review Structureを選択します。
• 右側のProperties -> BASIC INFORMATIONパネルで、Cacheableのチェックを外します。
• このコードスニペットをコピー＆ペーストしWeb Content Template For DownloadLinkとして保存します。（ドキュメントの閲覧用となります。）

メディアダウンロード用のWebコンテンツテンプレートの新規作成（構成イメージ⑦の部分）

• Site Admin -> Content and Data -> Web Contentを選択します。
• Templateタブに移動して、「＋」ボタンで新しいウェブコンテンツテンプレート(Web content template)を作成します。
• 右側のProperties -> BASIC INFORMATIONパネルで、先に作成したMovie Review Structureを選択します。
• 右側のProperties -> BASIC INFORMATIONパネルで、Cacheableのチェックを外します。
• このコードスニペットをコピー＆ペーストしJust for Downloadとして保存します。（ドキュメントのダウンロード用となります。）

ムービートピックとカテゴリーの作成

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

ディスプレイ・ページ・コンテンツ用の表示ページテンプレートを作成する（構成イメージ④の部分）

• Site Admin -> Design -> Page Templatesを選択します。
• Display Page Templatesタブに移動して、「＋」ボタンで新しい表示ページテンプレートを作成します。
• Blankを選択、名前を入力します。
• Content TypeとしてWeb Content Articleを選択します。
• Subtypeとして、以前に作成したMovie Review Structureを選択します。
• パネルを開き、WidgetタブでDisplay Page Contentを検索します。
• 表示ページテンプレートのドロップフィールド（ Place fragment hereの部分）に表示ページテンプレートを配置します。

ドキュメントダウンロード用のボタンを追加する

ウェブコンテンツに添付されたドキュメントをダウンロードするためのボタンを追加するには、ページにHTMLフラグメントを追加します。

• HTMLフラグメントを選択し、Mappingを変更します。
• SourceでMovie Review Structure (Default)を選択し、FieldではJust for Downloadを選択します。
• 公開をクリックします
• 作成された表示ページテンプレートの「：」メニューをクリックして、「Mark As Default」をチェックしてください。（後作成したWeb Contentがこのページテンプレートを自動的に適用）

検索ページの作成（構成イメージ①の部分）

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

• 検索系ウィジェット
  • Search Results (Search Resultsには、COMMERCEとSEARCHの2つがある場合、SEARCHのSearch Resultsを選択してください)。
  • Search Bar
  • Search Option
  • Category Facet
  • Type Facet
• Search Resultsの構成（Configuration）で、Web Content Search Results Templateを使用するように設定します。
• Search Optionの構成に移動し、Allow Empty Searchesにチェックを入れて保存します。
• Category Facetの構成で、Select Vocabulariesで先ほど作成したボキャブラリMovieを選択する
• Type Facetの構成に移動し、すべてのアセットタイプをAvailableに移動し、currentにはWeb Content Articleのみを残します。

対象Web Contentのみを表示する場合

Movie Review Structureを使って作られたWebコンテンツのみを表示します。

• 検索ページにCustom Filterを追加
• Customer Filterの構成で、Filter FieldにMovie Review StructureのStructureKeyを入れて、Invisibleをチェックして保存します。（そのほかの部分はデフォルトのまま）

Movie Reviewデータを追加（構成イメージ⑨の部分）

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

まとめ

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