Liferayを使ったエンタープライズWebサイト構築のための2日目の演習

• 演習11：ChatGPTでコンテンツを生成する
• ボーナス演習：コンテンツの自動タグ付け
• 練習問題12a：語彙の作成
• 練習問題12b：語彙にカテゴリーを追加する
• 演習13a：手動コレクションの作成
• 演習13b：動的なコレクションの作成
• 演習13c：FAQページにコンテンツを表示する
• 演習13d：ヘッダーにアナウンスを追加する
• 演習14a：Clarityの製品カタログを作成する
• 演習14b：製品仕様の定義
• 演習14c：製品の作成
• 演習14d：コマースチャネルの作成
• 演習14e：商品ページの設定
• 演習15a：APIエクスプローラーを使用してヘッドレスAPIに接続する
• 演習15b：ヘッドレスAPIを使用してWebコンテンツを一括インポートする
• 演習15c：ヘッドレスAPIを使用して製品を一括インポートする
• 演習15d：ヘッドレスを使用して分類カテゴリをインポートする
• 演習16a：コンテンツの公開とワークフローの設定
• 演習16b：コンテンツ公開ワークフローによる変更管理
• 演習17a：求人一覧ページに検索機能を追加する
• 演習17b：商品ページに検索機能を追加する
• 演習17c：カスタムフィルターを使用した結果のフィルタリング
• 演習18a：検索ブループリントを使用した検索結果のカスタマイズ
• 演習18b：検索ブループリントを使用した動的コレクション
• 演習18c：カスタムフィールドを使用して設計図を検索する

演習11：ChatGPTでコンテンツを生成する

Liferayは、ChatGPTを使用してWebコンテンツを生成するAIクリエーター機能を提供しています。 ここでは、インスタンスにAPIキーを追加し、この機能を使用してClarity管理者ユーザーとしてWebコンテンツ記事を作成します。

そのためには、

1. Clarity管理者ユーザーとしてサインインしてください。

   • ユーザー名: [e-mail]
   • パスワード: learn

2. グローバルメニュー () を開き、 コントロールパネル → インスタンス設定 に移動します。

3. AI Creator をクリックしてください。

4. このトレーニング用に提供されたChatGPT APIキーを入力してください。

   注記: このキーは一時的なものです。

5. 以下のオプションがチェックされていることを確認してください。

   • ChatGPTでコンテンツを作成できるようにする
   • DALL-Eでイメージを作成できるようにする

6. をクリックして保存します。

7. マーケティングアセット ライブラリに移動し、 Web コンテンツ を選択します。

8. 新規 をクリックし、 基本ウェブコンテンツ を選択します。

9. ChatGPT を使用してコンテンツを生成するには、 AI クリエイター ボタン () をクリックしてください。

   

10. 希望する説明文、トーン、文字数を入力してください。

11. をクリックしてを作成します。

    これによりテキスト形式の応答が生成されます。

12. をクリックして を追加し、レスポンスをWebコンテンツにコピーします。

    または、 もう一度試す をクリックして、新しい応答を生成してください。

素晴らしい！ あなたはChatGPTを使ってウェブコンテンツを生成しました。 次に、AI を使ってコンテンツにタグ付けする方法を学ぶか、レッスン 12 に進み、Liferay の機能が Clarity のコンテンツ管理をどのように改善できるかを学ぶことができます。

ボーナス演習：コンテンツの自動タグ付け

チャレンジ:

OpenNLPを使用して、新規または更新されたWebコンテンツの自動タグ付けを有効にします。

要件:

• インスタンス内の新規および更新されたアセットに対して、自動タグ付けを有効にしてください。
• ウェブコンテンツ向けにOpenNLPプロバイダを有効にする。
• TensorFlowの画像自動タグ付けを有効にします。

成功基準:

このインスタンスは、新規または更新されたウェブ記事の内容に基づいて、自動的にタグを追加します。

練習問題12a：語彙の作成

Liferayはコンテンツを分類するための語彙を提供しており、必要なコンテンツを簡単に見つけて表示することができます。

ここでは、クリスチャン・カーターとして、FAQウェブコンテンツのカテゴリを含む語彙を定義します。

そのためには、

1. クリスチャン・カーターとしてログインしてください。

   • ユーザー名: [e-mail]
   • パスワード: learn

2. グローバルメニュー () を開き、 アプリケーション → アセットライブラリ に移動します。

3. マーケティングアセット ライブラリを選択し、 カテゴリ をクリックします。

4. 新しい語彙を作成するには、 追加 （）を 語彙 の横でクリックします。

5. 以下の詳細を入力してください：

   分野	価値
   名前	よくある質問
   説明	FAQ記事のカテゴリ。
   複数のカテゴリを許可する	はい
   可視性	公共
   資産の種類	ウェブコンテンツ記事
   サブタイプ	よくある質問
   必須	必須ではありません

   

6. 語彙を作成するには、 をクリックして保存 をクリックしてください。

これで、FAQのカテゴリをまとめるための語彙が揃いました。

練習問題12b：語彙にカテゴリーを追加する

語彙を作成した後、カテゴリとサブカテゴリを追加して、コンテンツに必要な組織構造を確立できます。

ここでは、前回の演習でクリスチャン・カーターとして作成したFAQ語彙にカテゴリを追加します。

そのためには、

1. カテゴリ アプリケーションで、語彙サイドバーから FAQ 語彙を選択します。

2. 新規 をクリックし、名前として 小売パートナー と入力します。

3. カテゴリを追加するには、 をクリックして保存 をクリックしてください。

4. 上記の手順を繰り返して、FAQの語彙にさらに3つのカテゴリを追加します。

   • 製品 & サービス
   • 価格設定 & 注文
   • リターン & 交換

   

5. (チャレンジ) 各 FAQ ウェブコンテンツ記事に正しいカテゴリを割り当ててください。 よくある質問（FAQ）は、それぞれのカテゴリに対応するフォルダに分類されています。

   ヒント: 各 FAQ については、プロパティのサイドバーをご覧ください。

これで、FAQウェブコンテンツのカテゴリを定義し、割り当てることができました。 次に、Clarityのコンテンツをコレクションを使って表示する方法を学びます。

演習13a：手動コレクションの作成

Liferayコレクションは、サイトページに表示できるコンテンツアイテムのリストです。 異なる種類のコンテンツをグループ化することで、関連するアイテムを見つけやすく、表示しやすくなります。 各リストは、手動で定義することも、動的に定義することもできます。

ここでは、Webコンテンツの記事を手動コレクションに追加し、ウォルター・ダグラスとしてClarityのホームページにマッピングします。

そのためには、

1. ウォルター・ダグラスとしてログインしてください。

   • メールアドレス： [e-mail]
   • パスワード: learn

2. サイトメニュー (を開き、 サイトビルダーを展開し、 コレクション を選択します。

3. 新規 をクリックし、 手動収集 を選択します。

4. タイトルには、 役立つ記事 と入力し、 保存 をクリックします。

5. アイテムタイプとして、 Webコンテンツ記事 を選択します。

6. アイテムサブタイプには、 記事を選択します。

7. をクリックして保存します。

8. コレクションアイテムのセクションで、 をクリックし、 を選択して、 記事を選択します。

9. Articles フォルダに移動し、次の3つの記事を選択します。

   • イノベーションの導入：眼鏡製造を形作る主要トレンド
   • 眼鏡業界に革命を起こす：革新的な素材がもたらす変化
   • 眼鏡製造における効率性の向上：包括的なアプローチ

10. をクリックしてを追加します。

    

    マニュアル集にはコンテンツが追加され、サイトページで使用できる状態になりました。

11. ホーム ページに移動し、 編集 ( をクリックします。

12. 「役立つ記事」コンテナで、 コレクション表示 フラグメントを選択します。

13. 設定サイドパネルで、コレクションの プラス （）をクリックし、 役立つ記事 コレクションを選択します。

    

    この断片は現在、「役立つ記事」コレクションからコンテンツを取得しています。 提供されている構成では、各アイテムを表示するために、既にClarity Cardフラグメントがコレクション表示に適用されています。 コレクション内の記事コンテンツを表示するには、カードのサブ要素を記事内のフィールドにマッピングする必要があります。 しかし、カードのサブ要素をコンテンツフィールドにマッピングする前に、コレクション表示のページネーションを変更しましょう。

14. ページネーションについては、 なし を選択してください。

    それでは、カードのサブ要素を記事内の対応するフィールドにマッピングしてみましょう。

15. クラリティカード フラグメントを選択し、含まれているサブ要素をメモしてください。

    • カード画像
    • カテゴリ
    • カードタイトル
    • まとめ
    • カードリンク

16. 以下の各要素を選択し、ソース選択を マッピングに設定し、対応するフィールドを選択します。

    • カード画像: コンテンツ (記事) の下の画像
    • カテゴリ: カテゴリ内の記事
    • カードタイトル: 基本情報下のタイトル
    • 概要: 見出し コンテンツ (記事)

17. カードリンク サブ要素を選択し、 リンク タブに移動します。

18. リンクには、 マップされた URL を選択します。

19. フィールドには、 デフォルト を選択します。

20. 公開 をクリックして、ホームページへの変更を保存します。

    ホームページの 役立つ記事 セクションには、作成したコレクションのウェブコンテンツが表示されるはずです。 しかし、カテゴリとカードリンクの2つの要素が期待どおりに機能していません。 これは、記事にカテゴリが割り当てられていないこと、および記事にデフォルトの表示ページテンプレートが設定されていないことが原因です。 これらの問題を解決しましょう。

21. Webコンテンツ アプリケーションに移動し、各記事にカテゴリを1つ割り当てます。

22. ページテンプレート アプリケーションに移動し、 表示ページテンプレート タブに移動して、 記事 表示ページテンプレートをそのタイプのデフォルトとして設定します。

23. ホームページに戻り、すべてのマッピングが正しく機能していることを確認してください。

素晴らしい！ あなたは手動でコレクションを作成し、それをClarityのホームページに表示しました。 次に、動的なコレクションを作成する方法を学びます。

演習13b：動的なコレクションの作成

以前にFAQウェブコンテンツ記事を分類したので、ここではウォルター・ダグラスのように、それらのカテゴリを使用して動的なFAQコレクションを作成します。

そのためには、

1. サイトメニュー (を開き、 サイトビルダーを展開し、 コレクション を選択します。

2. 新規 をクリックし、 動的コレクション を選択します。

3. タイトルには、 FAQ - Retail Partners と入力し、 保存 をクリックします。

4. アイテムタイプとして、 Webコンテンツ記事 を選択します。

5. アイテムのサブタイプについては、 FAQ を選択してください。

   これにより、収集対象はFAQウェブコンテンツ記事に限定されます。 次に、コレクションの範囲を定義し、フィルターを使用して、コレクションに含める FAQ を制限します。

6. スコープの下で、 をクリックし、 を選択して、 その他のサイトまたはアセットライブラリ を選択します。

7. アセットライブラリ タブに移動し、 マーケティングアセットをクリックします。

   これにより、コレクションがマーケティングアセットライブラリのFAQ記事を使用することが保証されます。

8. フィルターの下で、ルールを 次のカテゴリの *すべて* を含む に設定します。

9. カテゴリ欄で、 小売パートナー を検索して選択します。

   

10. コレクションを作成するには、 をクリックして保存 をクリックしてください。

11. 上記の手順を繰り返して、これらのコレクションを作成してください。

    • よくある質問 - 製品 & サービス
    • よくある質問 - 価格 & 注文
    • よくある質問 - 返品 & 交換

    

    各コレクションについて、対応するカテゴリを使用して結果を絞り込みます。

これでFAQコレクションが4つになりました。 次に、それらを使用してClarityのFAQページにコンテンツを表示します。

演習13c：FAQページにコンテンツを表示する

これまでの演習で学んだことを活かして、ウォルター・ダグラスとしてFAQページにコンテンツをマッピングしてみましょう。

そのためには、

1. FAQ ページの編集を開始します。

2. Image フラグメントをダブルクリックして、その image-square サブ要素を設定します。

3. マーケティングアセットライブラリから画像を glasses-vertical-banner-with-text-lg に設定します。

4. 右側のブロックには、ページタイトルと4つのFAQセクションの構成が含まれています。 各FAQセクションには、見出しとコレクション表示フラグメントが含まれています。 各コレクション表示には、「FAQ質問と回答ペア」と呼ばれるカスタムフラグメントが含まれています。 まず、コレクションの表示を、以前作成した FAQ コレクションにマッピングします。 各コレクションが、そのセクションの見出しに対応していることを確認してください。

   

5. ページネーションについては、 なし を選択してください。

6. チェック すべてのコレクションアイテムを表示。

7. FAQの各質問と回答のペアに対して適切なフィールドをマッピングし、コレクション表示でコンテンツが正しく表示されるようにします。

8. 「おすすめ記事」コンテナで、コレクションの表示を「役立つ記事」コレクションにマッピングします。

9. FAQコンテンツ および おすすめ記事 コンテナに対して、この設定を構成します。

   タブ	設定	価値
   一般的な	コンテナ幅	固定幅

10. 公開 をクリックして、FAQ ページへの変更を保存します。

コレクション表示とカスタムフラグメントを使用して、FAQウェブコンテンツをClarityのFAQページにレンダリングしました。 次に、ヘッダーのお知らせバーにコンテンツを追加しましょう。

演習13d：ヘッダーにアナウンスを追加する

ここでは、Webコンテンツ、コレクション、ページテンプレートについて学んだことを活かして、ウォルター・ダグラスとしてClarityのヘッダーバーにアナウンスを追加します。

そのためには、

1. サイトメニュー (を開き、 サイトビルダーを展開し、 コレクション を選択します。

2. Announcements というタイトルの新しい動的コレクションを作成します。

3. コレクション設定メニューで、アイテムタイプを Webコンテンツ記事 に、アイテムサブタイプを お知らせ に設定します。

4. 範囲を指定するには、 マーケティングアセット ライブラリを選択します。

5. コレクションを公開するには、 をクリックして保存 をクリックしてください。

   コレクションを作成したので、それをプライマリマスターページテンプレートに追加しましょう。

6. サイトメニュー (を開き、 デザインを展開し、 ページテンプレート を選択します。

7. プライマリマスターページ テンプレートの編集を開始します。

   注記: マスターページに適用されているスタイルは、サイトページに適用されているスタイルとは異なることに気づくかもしれません。 これは、テーマとグローバルCSSクライアント拡張機能をマスターページではなくサイトページに適用したためです。 必要に応じて、テーマとクライアント拡張機能をマスターページに直接適用することもできます。 テーマのすべてのプロパティ（例：フッターを表示、ヘッダーを表示など）のチェックを外してください。

8. ヘッダーアナウンスバー コンテナの 表示 () を切り替えます。

9. ヘッダーアナウンスバー コンテナを選択し、この設定を構成します。

   タブ	分野	価値
   スタイル	背景色 >	カラーブランドプライマリー

   

   注記: 色のオプションはテーマのスタイルブックで定義されています。 マスターページテンプレートにテーマCSSクライアント拡張機能を適用しない限り、「カラーブランドプライマリ」オプションは紫色で表示されます。 この値は、サイトページ内でテーマCSSクライアント拡張機能によって上書きされます。

10. コンテナに コレクション表示 フラグメントを追加し、それを選択して、次の設定を構成します。

    タブ	分野	価値
    一般的な	コレクション	お知らせ
    一般的な	ページネーション	なし
    一般的な	表示するアイテムの最大数	1

11. コレクション表示に コンテナ フラグメントを追加し、名前を アナウンスに変更し、以下の設定を構成します。

    タブ	分野	価値
    一般的な	コンテンツ表示	フレックスロウ
    一般的な	アイテムを整列する	中心
    一般的な	コンテンツを均等配置する	中心

12. コンテナに 段落 フラグメントを追加し、それを選択して、次の設定を構成します。

    タブ	分野	価値
    スタイル	テキスト > 色	カラーニュートラル 0

    

13. 段落の 要素テキスト サブ要素を選択し、この設定を構成します。

    タブ	分野	価値
    マッピング	分野	メッセージ

14. 段落の後に 明瞭度ボタン フラグメントをお知らせコンテナに追加し、それを選択して、次の設定を構成します。

    タブ	分野	価値
    一般的な	タイプ	ボーダーレス
    一般的な	スタイル	主要な
    一般的な	サイズ	小さい
    一般的な	反転	はい

15. ボタンの リンク サブ要素を選択し、以下の設定を構成します。

    タブ	分野	価値
    マッピング	分野	リンクテキスト
    リンク	リンク	マッピングされたURL
    リンク	分野	ページへのリンク

16. お知らせバーの要素の余白とパディングを、満足のいく状態になるまで調整してください。

    

17. 変更を保存するには、 マスターを公開 をクリックしてください。

ヘッダーのお知らせバーが、プライマリマスターページテンプレートを使用するすべてのページに表示されるようになりました。 次に、Liferayのコマース機能を使って、Clarityの製品カタログを作成してみましょう。

演習14a：Clarityの製品カタログを作成する

カタログとは、関連する製品の集まりのことです。 Liferayのカタログは、ビジネスにとって最も合理的な方法で製品ラインナップを整理するための、非常に柔軟な手段を提供します。

ここでは、Clarity管理者としてClarity製品のカタログを作成します。

そのためには、

1. Clarity管理者としてサインインしてください。

   • ユーザー名: [e-mail]
   • パスワード: 学習

2. グローバルメニュー () を開き、 コマース → カタログ に移動します。

3. をクリックして （を追加）します。

4. 以下を入力してください。

   分野	価値
   名前	クラリティ・アイウェア
   デフォルトのカタログ言語	英語（アメリカ合衆国）
   通貨	米ドル

   

5. カタログの作成を完了するには、 をクリックして を送信してください。

素晴らしい！ カタログを作成したので、商品を追加し始めることができます。 まず最初に、Clarityの製品を作成する際に追加できる仕様について説明しましょう。

演習14b：製品仕様の定義

製品仕様には、サイズ、素材、色など、製品に関する情報が格納されています。 整理整頓のために、仕様グループごとに保存することもできます。

ここでは、Clarity管理者として製品仕様を追加します。

そのためには、

1. グローバルメニュー () を開き、 コマース → 仕様 に移動します。

2. 仕様グループ タブをクリックします。

3. 新規 をクリックして、新しい仕様グループを追加します。

4. 以下を入力してください。

   分野	価値
   タイトル	フレームの説明
   優先度	10.0
   鍵	フレームの説明

5. をクリックして 保存して、製品仕様グループの作成を完了します。

   製品仕様を追加できるようになりました。

6. 仕様グループ の概要に戻り、 仕様ラベル タブに移動します。

7. 新しい仕様を追加するには、 新規 をクリックしてください。

8. 以下を入力してください。

   分野	価値
   ラベル	フレーム素材
   説明	フレームの材質。
   ファセットナビゲーションでの使用	はい
   デフォルト仕様グループ	フレームの説明
   鍵	フレーム材

9. 仕様ラベルの作成を完了するには、 をクリックして保存 をクリックしてください。

10. これらの値を使用して、さらに2つの仕様を作成します。

    • フレームカラー

      分野	価値
      ラベル	フレームカラー
      説明	フレームの色。
      ファセットナビゲーションでの使用	はい
      デフォルト仕様グループ	フレームの説明
      鍵	フレームカラー

    • フレームサイズ

      分野	価値
      ラベル	フレームサイズ
      説明	フレームのサイズ（デフォルト単位）。
      ファセットナビゲーションでの使用	いいえ
      デフォルト仕様グループ	フレームの説明
      鍵	フレームサイズ

11. 仕様ラベル ページに戻ります。

仕様を追加したので、製品を作成する際にそれらの仕様を適用できます。

演習14c：製品の作成

製品とは、企業が販売する商品のことを指します。 他のメーカーと同様に、Clarity社もさまざまな目標を達成し、多様な顧客層をターゲットにした幅広い製品群を取り揃えています。

ここでは、Clarity 管理者として、Clarity のカタログに製品を追加したり、仕様を適用したりするなどの操作を行うことができます。

そのためには、

1. グローバルメニュー () を開き、 コマース → 製品 に移動します。

2. 追加 () をクリックし、 シンプル を選択します。

   注記: 単純製品とは、在庫が追跡される物理的な製品のことです。

3. 以下を入力してください。

   分野	価値
   名前	クラシックなアビエーターサングラス
   カタログ	クラリティ・アイウェア

4. をクリックして を送信し、製品の作成を完了します。

   これで製品の設定ができます。 まず、ChatGPTを使用して製品説明を追加します。

5. 詳細説明フィールドエディタで、 AI Creator ボタン ( ) をクリックします。

6. 説明、トーン、文字数を入力してください。

   例えば、

   分野	価値
   説明	晴れた日にぴったりの、クラシックなアビエーターサングラスの商品説明です。
   トーン	フレンドリー
   単語数	200

7. をクリックしてを作成します。

   これによりコンテンツが生成されます。

8. をクリックして を追加し、応答を「完全な説明」フィールドにコピーします。 または、 もう一度試す をクリックして、新しい応答を生成してください。

   長い説明文を追加したので、次は商品を分類しましょう。

9. 分類セクションで、 をクリックし、Clarity Products の を選択します。

10. サングラス を選択し、 完了 をクリックして、このアイテムにカテゴリを適用します。

    製品の分類が完了したので、仕様を追加しましょう。

11. 仕様のセクションまでスクロールしてください。

12. 新規 () をクリックし、 既存の仕様を追加 を選択します。

13. 各フィールドに以下の値を入力してください。

    分野	価値
    仕様	フレーム素材
    価値	金属

14. 他の仕様についても手順12～13を繰り返してください。

    仕様	価値
    フレームカラー	金
    フレームサイズ	54-20

    製品の仕様が揃ったので、次は製品の画像を追加しましょう。

15. 変更を保存するには、 下書きとして保存 をクリックしてください。

16. メディア タブに移動します。

17. 画像の場合は、 追加 （）をクリックし、 ファイル選択をクリックします。

18. 商品画像アセットライブラリから、 classic-aviator-sunglasses 画像を選択します。

19. 画像に関する以下の詳細を入力してください。

    分野	価値
    タイトル	クラシックなアビエーターサングラス
    優先度	10.0

20. をクリックして 公開して商品画像を保存します。

    

21. 公開 をクリックして、製品の作成を完了します。

22. 上記の手順を繰り返して、さらに 2 つの製品を作成します: AquaComfort Plus Dailies および 単焦点レンズ。 タグは、詳細画面の「タグ」フィールドに直接入力してください。

    製品	仕様	カテゴリー	タグ	画像
    アクアコンフォートプラスデイリー	該当なし	連絡先	毎日	アクアコンフォートプラスデイリー
    単焦点レンズ	該当なし	レンズ	毎日	バイオフィニティトーリックレンズ

    注記: タグを追加するには、タグフィールドに daily と入力します。

    

素晴らしい！ 商品を追加したので、Clarityのサイトに商品を表示するためのチャネルを設定できます。

演習14d：コマースチャネルの作成

販売チャネルは、商品が顧客に陳列・販売される店舗の場所を決定する。

ここでは、Clarity Admin としてチャネルを作成し、それを Clarity の公開エンタープライズ Web サイトに接続します。

そのためには、

1. グローバルメニュー () を開き、 コマース → チャネル に移動します。

2. をクリックして （を追加）します。

3. 以下を入力してください。

   分野	価値
   名前	クラリティ・パブリック
   通貨	米ドル
   タイプ	サイト

4. をクリックして を追加し、チャンネルの作成を完了します。

   注記: サイトに商品を表示するには、チャネルにリンクする必要があります。

5. タイプ タブに移動し、 サイトの選択 をクリックします。

6. Clarity Public Enterprise Web サイト を選択してください。

7. をクリックして保存します。

8. 「一般」タブで、「コマースサイトの種類」ドロップダウンメニューから「B2B」を選択します。

   

9. 「保存」をクリックしてください。

チャンネルが作成されたので、Clarityのサイトに戻り、製品ページの設定を完了させましょう。

演習14e：商品ページの設定

トレーニングワークスペースには、Clarityの製品を表示するための3つのページ（製品、製品一覧、製品詳細）が含まれています。 各ページは既にワイヤーフレーム化されています。

ここでは、Clarity管理者として各ページの設定を完了します。

製品ページを更新する

製品ページは、 Clarity Products 語彙で定義されている製品カテゴリを紹介することを目的としたマーケティングページです。 カテゴリを選択すると、ユーザーは 商品リスト ページに移動し、選択したカテゴリの商品のみが表示されます。

これを実現するために、

1. 製品 ページに移動して編集を開始します（）。

2. フラグメントとウィジェット パネル（）を開きます。

3. ウィジェット タブに移動します。

4. コマースカテゴリナビゲーション ウィジェットをコマースカテゴリコンテナにドラッグアンドドロップします。

5. ウィジェットを選択し、ウィジェットのツールチップで アクション () をクリックし、 設定 を選択します。

6. 語彙については、 Clarity Products を選択してください。

   注記: [ルートカテゴリを使用する] オプションを有効にしないでください。

7. をクリックして を保存し、モーダルウィンドウを閉じます。

   

8. 更新されたページを表示するには、 公開 をクリックしてください。

   現状ではカテゴリ一覧が表示されていますが、これはClarityのデザインとはかけ離れています。 このウィジェットの内容は動的に更新されるため、新しいカテゴリが追加されたり、古いカテゴリが更新または廃止されたりしても、メンテナンスが容易です。 それでは、デザインについて考えてみましょう。

9. サイトメニュー (を開き、 デザインを展開し、 テンプレート を選択します。

10. ウィジェットテンプレート タブに移動します。

11. 新規 をクリックし、 コマースカテゴリナビゲーションテンプレート を選択します。

12. テンプレート名として「 Clarity Category Cards 」と入力してください。

13. トレーニングワークスペースで、 classroom-exercises/lesson-14/ フォルダーに移動し、 commerce-category-navigation-cards.ftl ファイルを開きます。

14. このファイルの内容をコピーしてエディタに貼り付けてください。

15. をクリックして保存します。

16. 製品 ページに戻り、編集を開始します（）。

17. ウィジェットを選択し、ウィジェットのツールチップで アクション () をクリックし、 設定 を選択します。

18. 表示テンプレートには、 Clarity カテゴリ カード を選択します。

19. をクリックして保存 し、ウィンドウを閉じます。

20. をクリックして 公開してページを表示します。

素晴らしい！ ご覧のとおり、Clarity社が要求する最終デザインにかなり近づいています。 商品ページが完成したので、次は商品一覧ページを完成させましょう。

商品一覧ページ（PLP）の作成

既にお気づきかもしれませんが、コマースカテゴリナビゲーションウィジェットは見た目は良くなり、各カテゴリへのリンクも表示されるようになりましたが、リンクが機能していません。 それは、Liferayが各カテゴリに対してどのページを表示すればよいかを知らないためです。 Liferayがページをカテゴリ表示ページとして認識するには、チャネル設定で割り当てるか、カテゴリコンテンツウィジェットをページに追加する必要があります。

現在、商品一覧ページには商品一覧を表示するために必要なウィジェットのほとんどが含まれていますが、Liferayのカテゴリ表示機能とは連携していません。

これを修正するには、

1. 商品リスト ページへ移動してください。

2. 編集 （）をクリックして、ページの編集を開始します。

3. フラグメントとウィジェット パネル () から、 カテゴリコンテンツ ウィジェットを検索結果コンテナのすぐ上にドラッグアンドドロップします。

4. をクリックして公開 します。

5. 製品 ページに戻り、カテゴリカードのいずれかをクリックして、正しく動作していることを確認してください。

   カテゴリーナビゲーションは正常に機能するはずです。 しかし、検索結果ウィジェットには表示テンプレートが設定されていないため、空白になっています。 この問題を解決するために、そのウィジェット用の新しいテンプレートを作成しましょう。

6. サイトメニュー (を開き、 デザインを展開し、 テンプレート を選択します。

7. ウィジェットテンプレート タブに移動します。

8. 新規 をクリックし、 検索結果テンプレート を選択します。

   重要: 「検索結果テンプレート」には 2 つのオプションがあります。 一つは一般的な検索結果用で、もう一つはECサイト向け商品用です。 まずは2番目のオプションを選択してみてください。 正しいものであれば、[要素] メニューにいくつかの商取引固有の変数が表示されます (例: 商取引商品検索結果表示コンテキスト および 商取引商品カタログエントリ)。 これらの変数が表示されない場合は、別のテンプレートを使用してみてください。

9. テンプレート名として「 Clarity Search Results Cards 」と入力します。

10. トレーニングワークスペースで、 classroom-exercises/lesson-14/ フォルダーに移動し、 commerce-search-results-cards.ftl ファイルを開きます。

11. このファイルの内容をコピーしてエディタに貼り付けてください。

12. をクリックして保存します。

13. 商品リストページに移動して編集を開始します（）。

14. 検索結果ウィジェットを選択し、ウィジェットのツールチップで アクション () をクリックし、 設定 を選択します。

    注記: 検索結果ウィジェットは、レイアウトの右下隅付近で空白になっているはずです。

    

15. レンダリング選択では、 アプリケーション表示テンプレートを使用 を選択します。

16. 表示テンプレートの場合は、 Clarity 検索結果カード を選択します。

    注記: ここにテンプレートが表示されない場合は、手順 8 に戻って、別の検索結果テンプレートを試してください。

17. をクリックして保存 し、ウィンドウを閉じます。

18. をクリックして公開 します。

19. 製品 ページに戻り、カテゴリカードのいずれかをクリックして、正しく動作していること、および新しいテンプレートが表示されていることを確認します。

    

商品表示ページの作成

最後に、商品一覧ページで商品をクリックしても、期待どおりに動作しません。 これは、Liferayが製品の詳細を表示するためにどのページを使用すればよいか分からないためです。

これを修正するには、

1. ページ テンプレート アプリケーションで、 表示ページ テンプレート タブに移動し、 新規をクリックして、 表示ページ テンプレート を選択します。

2. プライマリマスターページを選択します。

3. これらの値を入力して、 保存 をクリックしてください。

   分野	価値
   名前	製品詳細
   コンテンツタイプ	製品

   これにより、製品用の新しい表示ページテンプレートが作成されます。

4. 製品詳細ページ フラグメント構成をドロップ領域にドラッグアンドドロップします。

   

5. 商品詳細コンテナ内で、これらのフラグメントを対応する商品フィールドにマッピングします。

   断片	フラグメントサブ要素	マッピング
   製品名	要素テキスト	名前 (基本情報)
   SKU	要素テキスト	SKU (基本情報)
   説明	要素-html	説明 (基本情報)

6. ボタンの リンク サブ要素を選択し、以下の設定を構成します。

   タブ	分野	価値
   リンク	リンク	ページ
   リンク	ページ	お問い合わせ

7. ボタン フラグメントをダブルクリックし、そのテキストを 営業担当者に連絡 に変更します。

8. 仕様コンテナで、 見出し フラグメントをダブルクリックし、そのテキストを 仕様 に変更します。

9. 仕様コンテナ内のフラグメントを、それぞれのフィールドにマッピングします。

   断片	フラグメントサブ要素	マッピング
   仕様名	要素テキスト	名前 (基本情報)
   仕様値	要素テキスト	値 (基本情報)

10. 添付ファイルコンテナで、 見出し フラグメントをダブルクリックし、そのテキストを 添付ファイル に変更します。

11. 添付ファイルコンテナ内のフラグメントをそれぞれのフィールドにマッピングします。

    断片	フラグメントサブ要素	マッピング
    添付ファイル名	要素テキスト	タイトル (基本情報)

12. ダウンロード ボタンを選択し、設定サイドパネルで以下の設定を行います。

    タブ	分野	価値
    一般的な	スタイル	リンク
    一般的な	サイズ	小さい

13. ダウンロード ボタンのリンクサブ要素を選択し、以下の設定を構成します。

    タブ	分野	価値
    リンク	リンク	マッピングされたURL
    リンク	分野	ダウンロードURL

14. Download ボタンをダブルクリックして、テキストを Download に変更します。

15. をクリックして公開 します。

16. 商品詳細テンプレートの アクション () をクリックし、 デフォルトとしてマーク を選択します。

17. カテゴリ表示 ページに戻り、いずれかの製品を選択して、動作を確認してください。

おめでとう！ Clarityの製品ページを設定しました。 次に、LiferayのヘッドレスAPIの使い方について説明します。

演習15a：APIエクスプローラーを使用してヘッドレスAPIに接続する

LiferayのAPIエクスプローラーを通して、ヘッドレスAPIがどのように利用できるかを見ていきましょう。 ここでは、ウォルター・ダグラスとして新しいブログ記事を追加します。

そのためには、

1. ウォルター・ダグラスとしてログインしてください。

   • メールアドレス： [e-mail]
   • パスワード: learn

2. サイトメニュー (を開き、 設定を展開し、 サイト設定 を選択します。

3. プラットフォームの下にある サイト構成 を選択します。

4. サイト ID をコピーして、後続の手順のために保存してください。

5. サイトメニュー (を開き、 カテゴリ分類を展開し、 カテゴリ を選択します。

6. Clarity語彙の下にある ブログ投稿 をクリックしてください。

7. リストからカテゴリを1つ選択してください。

8. ブラウザのアドレスバーに、ページURLに表示されているカテゴリIDをコピーしてください。 例えば、 ...categories_admin/vocabulary/37819/category/[category-id]。

   このIDは後の手順で使用します。

9. 新しいブラウザウィンドウを開き、http://localhost:8080/o/api にアクセスして Liferay の API Explorer を開きます。

10. Document セクションまでスクロールダウンし、 postSiteDocument エンドポイントを展開します。

    ヒント: エンドポイントをすばやく見つけるには、ブラウザのページで postSiteDocument を検索します。

    

11. siteIdフィールドには、Clarity Public Enterprise WebサイトのサイトIDを入力してください。

12. ドキュメントフィールドについては、デフォルトの JSON コンテンツを削除し、 空の値を 送信する のチェックを外します。

13. ファイルフィールドでは、「ファイルを選択」をクリックし、[リポジトリフォルダ]/classroom-exercises/lesson-15/フォルダからglasses-book.pngを選択してください。

14. をクリックしてを実行します。

    これにより、新しい画像ファイルがClarityのドキュメントとメディアにアップロードされます。

15. レスポンス本文で、画像のIDを探してください。 例えば：

    (...)
    "ファイル拡張子" : "png"、
    "ファイル名" : "glasses-book.png"、
    "id" : [image-id]、
    "キーワード" : [ ],
    (...)
    

    次のステップで使用するため、画像IDをメモしておいてください。

16. BlogPosting セクションまでスクロールし、 postSiteBlogPosting エンドポイントを展開します。

17. siteIdには、Clarity Public Enterprise WebサイトのサイトIDを入力してください。

18. リクエストボディについては、デフォルトのJSONコンテンツを削除してください。

19. トレーニングワークスペースで、 classroom-exercises/lesson-15/ フォルダー内の blog-entry.json ファイルを開きます。

    このファイルには、カスタムの見出しと本文を含むブログ記事のエントリが含まれています。

20. blog-entry.json の内容を リクエストボディ フィールドにコピーします。

21. {image-id} および {category-id} をそれぞれ画像 ID とブログカテゴリ ID に置き換えてください。

22. をクリックしてを実行します。 応答コードが 200 であることを確認してください。

23. Clarity Public Enterprise Web サイト ウィンドウに戻り、 サイト メニュー (を開き、 コンテンツ & データを展開し、 ブログ をクリックします。

24. アイウェアで面白いと思うこと というブログ記事が表示されることを確認してください。

    

演習15b：ヘッドレスAPIを使用してWebコンテンツを一括インポートする

Clarity社は、旧ポータルサイトから3つの既存ウェブ記事を新しい企業向けウェブサイトにインポートしたいと考えています。 ここでは、Walter Douglas のように Liferay の Headless API を使用してそれらを追加します。

そのためには、

1. LiferayのAPIエクスプローラー（http://localhost:8080/o/api）のブラウザウィンドウに戻ります。

2. StructuredContent セクションまでスクロールダウンし、 postSiteStructuredContentBatch エンドポイントを展開します。

3. siteIdには、Clarity Public Enterprise WebサイトのサイトIDを入力してください。

4. リクエストボディについては、デフォルトのJSONコンテンツを削除してください。

5. トレーニングワークスペースで、 classroom-exercises/lesson-15/ フォルダー内の import-web-content-articles-batch.json ファイルを開きます。

6. import-web-content-articles-batch.json の内容を リクエストボディ フィールドにコピーします。

7. をクリックしてを実行します。

8. Clarity Public Enterprise Web サイト ウィンドウに戻り、 サイト メニュー (を開き、 コンテンツ & データを展開し、 Web コンテンツ をクリックします。

9. Articles フォルダを開き、3 つの記事がすべて表示されていることを確認します。

   

演習15c：ヘッドレスAPIを使用して製品を一括インポートする

REST API を使用すると、Clarity の製品を外部システムから Liferay DXP にインポートできるため、製品管理を効率化できます。 ここでは、イアン・ミラーのようにAPIを使って製品を作成します。

そのためには、

1. イアン・ミラーとしてログインしてください。

   • ユーザー名: [e-mail]
   • パスワード: learn

2. グローバルメニュー () を開き、 コマース → 製品 に移動します。

   既存製品の数（つまり3）に注目してください。

3. グローバルメニュー () を開き、 コマース → カタログ に移動します。

4. Clarity Eyewear をクリックしてください。

   カタログのIDを書き留めてください。 後の手順で使用します。

5. 新しいブラウザウィンドウを開き、http://localhost:8080/o/api にアクセスして Liferay の API Explorer を開きます。

6. RESTアプリケーション ドロップダウンメニューをクリックし、 headless-commerce-admin-catalog/v1.0 を選択します。

7. Product セクションまでスクロールダウンし、 postProductBatch エンドポイントを展開します。

8. リクエストボディについては、デフォルトのJSONコンテンツを削除してください。

9. トレーニングワークスペースで、 classroom-exercises/lesson-15/ フォルダー内の import-products-batch.json ファイルを開きます。

10. import-products-batch.json の内容を リクエストボディ フィールドにコピーし、Clarity Eyewear カタログ ID を持つすべての製品について {catalog-id} を置き換えます。

11. をクリックしてを実行します。

12. Clarity Public Enterprise Web サイトウィンドウに戻り、 グローバル メニュー () を開き、 コマース → 製品 に移動します。

13. 新製品が8つ登場したことを確認しました。

    

演習15d：ヘッドレスを使用して分類カテゴリをインポートする

多国籍企業であるクラリティは、世界中に多くの事業拠点を有しています。 採用活動をより効果的に支援するために、Clarityは各オフィス拠点における求人情報に適用できるカテゴリーを定義する必要がある。 既に存在するカテゴリーもあるが、まだ存在しないカテゴリーもある。

ここでは、Clarity管理者として不足している場所カテゴリを追加します。

そのためには、

1. Clarity管理者ユーザーとしてサインインしてください。

   • ユーザー名: [e-mail]
   • パスワード: learn

2. グローバルメニュー () を開き、 アプリケーション → アセットライブラリ に移動します。

3. HR ライブラリを選択し、 カテゴリ をクリックします。

4. 左側のメニューで、 ロケーション 語彙に移動してください。

   既存の場所カテゴリの数（14）に注意してください。

5. ブラウザのアドレスバーに、ページURLに表示されている語彙のIDをコピーしてください。 例えば、 (...)categories_admin/vocabulary/[vocabulary-id]。

   このIDは後の手順で使用します。

6. 新しいブラウザウィンドウを開き、http://localhost:8080/o/api にアクセスして Liferay の API Explorer を開きます。

7. REST アプリケーション ドロップダウン メニューをクリックし、 headless-admin-taxonomy/v1.0 を選択します。

8. TaxonomyCategory セクションまでスクロールダウンし、 postTaxonomyVocabularyTaxonomyCategoryBatch エンドポイントを展開します。

9. taxonomyVocabularyIdには、Locationの語彙IDを入力してください。

10. リクエストボディについては、デフォルトのJSONコンテンツを削除してください。

11. トレーニングワークスペースで、 classroom-exercises/lesson-15/ フォルダーにある import-taxonomy-categories-batch.json ファイルを開きます。

12. import-taxonomy-categories-batch.json の内容を リクエストボディ フィールドにコピーします。

    

13. をクリックしてを実行します。

14. 人事資産ライブラリのウィンドウに戻り、ページを更新してください。

    新しい場所が表示されるはずです。

15. ライブラリの概要ページに戻るには、パンくずリストメニューの HR をクリックしてください。

16. Webコンテンツ をクリックし、 求人情報 フォルダーを開きます。

17. 記事の編集を開始し、新しく追加された場所のいずれかを割り当てます（例： モロッコ、カサブランカ）。

18. をクリックして公開 します。 新しい場所カテゴリを使用してコンテンツを検索できるようになりました。

素晴らしい！ あなたはLiferayのヘッドレスAPIを活用して、Clarityの既存データを移行しました。 次に、Liferayのパブリッシングツールとワークフローについて学びます。

演習16a：コンテンツの公開とワークフローの設定

ワークフローと連携したパブリケーション機能を利用することで、サイトやコンテンツの変更に関する堅牢な公開プロセスを実装できます。 ここでは、Ian MillerとしてClarityのウェブサイトに公開されるすべての新規記事について、公開機能を有効にし、単一承認者ワークフローを設定します。

そのためには、

1. イアン・ミラーとしてログインしてください。

   • ユーザー名: [e-mail]
   • パスワード: learn

2. グローバルメニュー () を開き、 アプリケーション → 出版物 に移動します。

3. 切り替え 公開を有効にする。

4. 戻る () をクリックして、出版物アプリケーションページに戻ります。

5. をクリックして () を追加し、新しい出版物を作成します。

   または、ページ上部の Publications ドロップダウンメニューをクリックして、 Create New Publication を選択することもできます。

6. 名前には、 記事掲載 と入力してください。

7. をクリックしてを作成します。

8. Clarity Public Enterprise Web サイト に戻る。

9. サイトメニュー (を開き、 コンテンツ & データを展開し、 Web コンテンツ をクリックします。

10. [Web コンテンツ] タブで、[Articles] フォルダの[アクション]() をクリックし、[編集] を選択します。

11. 構造制限とワークフロー セクションを展開し、 フォルダーの内容（記事）の既定のワークフローを設定するを選択します。

12. ドロップダウンメニューから「 単独承認者 」を選択してください。

13. をクリックして保存します。

    

Clarityの記事ウェブコンテンツの変更を追跡するための公開設定と、新規記事を本番サイトに公開する前に承認するためのワークフローを設定しました。

次に、作成した出版物に他のユーザーを招待して共同作業を行う方法を学びましょう。

出版物へのユーザーの招待と役割の割り当て

出版物アプリケーションには、ユーザーを招待して出版物の共同編集に参加させるオプションがあります。 これらのユーザーは、出版物へのアクセス権限が割り当てられていなくても招待できます。

ここでは、イアン・ミラーとして、クリスチャン・カーターとクララ・マーフィーを記事出版プロセスに招き入れます。

そのためには、

1. 出版物 アプリケーションに移動し、記事の公開に対して アクション () をクリックし、 ユーザーを招待 を選択します。

   または、ページ上部の 出版物 ドロップダウン メニューをクリックし、 変更の確認を選択して、 ユーザーを招待 ( をクリックすることもできます。

2. 役割ドロップダウンメニューをクリックして、 エディター を選択します。

3. 「人物」には、 Christian Carter と入力します。

4. 手順2～3を繰り返して、以下の値を使用してクララ・マーフィーを招待してください。

   名前	役割
   クララ・マーフィー	出版社

   

5. 送信 をクリックし、 OK をクリックして確定します。

素晴らしい！ クリスチャン・カーターとクララ・マーフィーも、この出版物に寄稿できるようになった。 次に、出版ワークフローについて説明します。

演習16b：コンテンツ公開ワークフローによる変更管理

パブリケーション機能は、Liferayインスタンスへの変更を管理するための便利な方法を提供します。 これを使うと、あなたとあなたのチームは「パブリケーション」と呼ばれる変更のまとまりを作成し、共同作業を行うことができます。 準備ができたら、それらの変更を本番環境に公開できます。

この演習では、クリスチャン・カーターとして新しい記事を追加し、単一承認者ワークフローでレビューを行い、クララ・マーフィーとして変更内容を本番環境に反映させます。 これらの変更は、論文掲載プロセスの中で行われます。

ワークフローに新しい記事を作成して送信する

ここでは、クリスチャン・カーターとして新しい記事を作成し、承認のために提出します。

そのためには、

1. クリスチャン・カーターとしてログインしてください。

   • ユーザー名: [e-mail]
   • パスワード: learn

   注記: 出版物メニューがページ上部に表示されるようになり、出版物招待に関する新しい通知が届きました。

   

2. ユーザープロフィールアイコンをクリックし、 通知に移動して、出版物の招待を選択します。

   

   これにより、記事公開の詳細ページが開きます。

3. ページ上部の 出版物 ドロップダウン メニューをクリックし、 出版物を選択をクリックして、 記事出版物 を選択します。

4. Clarity Public Enterprise Web サイトに戻り、 サイト メニュー (を開き、 コンテンツ & データを展開し、 Web コンテンツ をクリックします。

5. 記事 フォルダに移動し、 新規をクリックして、 記事を選択します。

6. 以下の値を入力してください。

   分野	価値
   タイトル	クラリティ×ワービーパーカー
   画像	業界を革新する ( マーケティングアセット ライブラリより)
   見出し	2024年夏 コラボレーション
   コンテンツ	眼鏡愛好家の皆様、朗報です！ ファンに人気のClarityとWarby Parkerがタッグを組み、コラボレーションコレクションを発表した。

7. ワークフローに送信 ドロップダウンを展開し、 権限付きワークフローに送信 を選択します。

8. をクリックしてワークフローを送信 します。

素晴らしい！ 新しい記事を作成し、記事公開ページに審査のために送信しました。 次に、変更を承認して公開する方法を学びます。

ワークフローにおけるコンテンツのレビューと出版物の公開

ここでは、クリスチャン・カーターのマネージャーであるクララ・マーフィーとして、記事のレビューを完了し、すべての変更を本番環境に反映させます。

そのためには、

1. クララ・マーフィーとしてログインしてください。

   • ユーザー名: [e-mail]
   • パスワード: learn

   出版物メニューがページ上部に表示されるようになり、出版物の招待と査読依頼に関する2件の新しい通知が届きました。

   

2. ページ上部の 出版物 ドロップダウン メニューをクリックし、 出版物を選択をクリックして、 記事出版物 を選択します。

3. 出版物 ドロップダウン メニューをもう一度クリックし、 変更内容の確認 を選択します。

   これにより、変更点の一覧が記載された出版物の詳細ページに移動します。

4. をクリックして公開 します。

   この措置は、出版物に承認されていない変更が含まれているため失敗に終わります。

   

5. ユーザープロファイルアイコンをクリックして、 マイワークフロータスク に移動します。

6. 保留中のワークフロー タスクを確認するには、 マイ ロールに割り当てられている タブに移動します。

7. ワークフロー タスクの アクション () をクリックし、 自分に割り当て を選択します。

8. コメントを入力して、 完了 をクリックしてください。

   これにより、タスクがクララ・マーフィーに割り当てられ、 自分に割り当てられた タブにリダイレクトされます。 彼女はここでクリスチャン・カーターの記事を審査し、承認または却下することができる。

9. タスクの アクション () をクリックし、 承認 を選択します。

10. コメントを入力して、 完了 をクリックしてください。

11. 出版物 ドロップダウン メニューをもう一度クリックし、 変更内容の確認 を選択します。

    変更のステータスは現在 承認済み です。

12. 公開をクリックし、競合がないことを確認してから、 公開 を再度クリックして、変更を本番環境に追加します。

    

素晴らしい！ 出版物に関するワークフローを正常に使用して、Webコンテンツ記事のレビューと公開を行いました。 次に、Liferayの検索機能を活用してユーザーエクスペリエンスを向上させる方法を学びます。

演習17a：求人一覧ページに検索機能を追加する

Clarityは採用活動の改善の一環として、求人情報を検索できるページを導入したいと考えている。 現在、Clarityのウェブサイトにはこの目的のためのワイヤーフレームページが含まれていますが、機能させるために必要な検索ウィジェットが欠けています。

ここでは、ウォルター・ダグラスとしてこれらのウィジェットを追加および設定します。

そのためには、

1. ウォルター・ダグラスとしてログインしてください。

   • メールアドレス： [e-mail]
   • パスワード: learn

2. サイトメニュー (を開き、 ページツリーをクリックし、 キャリアを展開し、 募集職種 をクリックします。

3. をクリックして を編集 ( ) します。

4. フラグメントとウィジェット パネル（）を開きます。

5. ウィジェット タブに移動します。

6. 検索バー ウィジェットをバナーコンテナにドラッグアンドドロップし、見出しフラグメントの下に配置します。

7. ウィジェットを選択し、この設定を構成してください。

   タブ	設定	価値
   一般 > フレーム	最小幅	500ピクセル

   次に、検索結果の表示とフィルタリングを行うためのウィジェットを追加し、さらに追加の検索オプションを定義します。

8. フラグメントとウィジェット パネルから、 タイプ ファセット ウィジェットをグリッドの左側のドロップゾーンにドラッグ アンド ドロップします。

9. ウィジェットを選択し、ウィジェットのツールチップで アクション () をクリックし、 設定 を選択します。

10. 右矢印ボタン（）を使用して、Webコンテンツ記事以外のすべてのアセットタイプを削除します。

    

    これにより、検索結果にはウェブコンテンツの記事のみが表示されるようになります。

11. をクリックして保存 し、設定ウィンドウを閉じます。

12. フラグメントとウィジェット パネルから、 カテゴリ ファセット ウィジェットを 3 つ、グリッド フラグメントの左側のドロップ ゾーンのタイプ ファセット ウィジェットの下にドラッグ アンド ドロップします。

13. 最初のカテゴリ ファセット ウィジェットを選択し、ウィジェットのツールチップで アクション () をクリックし、 設定 を選択します。

14. 表示テンプレートには、 Clarity Search Category テンプレートを選択してください。

    

15. カテゴリパラメータ名には、 category-region と入力します。

    注記: 各カテゴリ ファセット ウィジェットは、期待どおりに機能するために一意のパラメータ名を持つ必要があります。

16. 下にスクロールして、 語彙の選択を選択します。

17. Clarity Enterprise Web サイト の語彙を展開し、 地域 の語彙を選択します。

    

18. をクリックして保存 し、設定ウィンドウを閉じます。

19. 他のカテゴリファセットウィジェットについても、手順12～18を繰り返してください。

    ウィジェット	表示テンプレート	カテゴリパラメータ名	語彙
    2番	明瞭性検索カテゴリ	カテゴリ-場所	位置
    三番目	明瞭性検索カテゴリ	カテゴリ：職種	求人情報

20. フラグメントとウィジェット パネルから、 検索結果 ウィジェットをグリッドフラグメントの右側のドロップゾーンにドラッグアンドドロップします。

    重要: 検索ウィジェットセクションのウィジェットを使用していることを確認してください。 コマース検索結果ウィジェットは使用しないでください。

21. フラグメントとウィジェット パネルから、 検索オプション ウィジェットを、検索結果とオプション コンテナ内のグリッド フラグメントの下にドラッグ アンド ドロップします。

22. 検索オプションウィジェットを選択し、ウィジェットのツールチップで アクション () をクリックし、 構成 を選択します。

23. 空の検索を許可する をチェックしてください。

24. をクリックして保存 し、ウィンドウを閉じます。

25. をクリックして公開 します。

    

    最後に、キャリアページの 求人情報を見る ボタンを更新して、求人情報ページにリンクするようにしましょう。

26. キャリア ページに移動して編集を開始します（）。

27. バナーの 求人情報を見る ボタンをダブルクリックして、ボタンのリンク要素の設定サイドパネルを開きます。

28. 設定サイドパネルで、 リンク タブに移動し、以下の設定を構成します。

    設定	価値
    リンク	ページ
    ページ	募集中の職種

29. をクリックして公開 します。

Clarityの求人情報ページに検索機能を追加したことで、サイト訪問者はさまざまなカテゴリで求人情報を検索・絞り込むことができるようになりました。 後日、検索結果に表示されるウェブコンテンツ記事をさらに絞り込むために、このページを再度使用します。

次に、これらの検索コンセプトをClarityの製品ページに適用します。

演習17b：商品ページに検索機能を追加する

ここでは、Walter Douglas が解説するように、製品リストページを詳しく見て、さまざまな Liferay 検索ウィジェットとその設定方法を理解します。

そのためには、

1. Clarityの 製品リスト ページにアクセスしてください。 ページの大部分は、すでに様々な検索ウィジェットで構築されています。

   

   左側のモジュールは、検索バーウィジェット、仕様ファセットウィジェット、およびオプションファセットウィジェットで構成されています。 右側のモジュールは、並べ替えウィジェットと検索結果ウィジェットで構成されています。 ウィジェットの「コマース」カテゴリにある検索結果ウィジェットは、「検索」カテゴリにある検索結果ウィジェットとは異なることに注意してください。 商品を返すのは、商取引関連のウィジェットのみです。

   これら2つのモジュールの下には、検索オプションウィジェットがあります。 このウィジェットの設定を調べると、 空の検索を許可する が有効になっていることがわかります。 この設定を有効にすると、検索クエリなしで利用可能なすべてのアセットが表示されます。

2. アプリケーションバーの 編集 () をクリックします。

   このページには、訪問者がClarity製品のさまざまな種類で絞り込み検索できるカテゴリファセットウィジェットがまだありません。 それでは、そのウィジェットを追加しましょう。

3. フラグメントとウィジェット パネルから、 カテゴリ ファセット ウィジェットを、グリッド フラグメントの左側のドロップ ゾーンにある検索バーの下にドラッグ アンド ドロップします。

4. 新しいカテゴリ ファセット ウィジェットを選択し、ウィジェットのツールチップで アクション () をクリックし、 設定 を選択します。

5. 表示テンプレートには、 Clarity Search Category テンプレートを選択してください。

6. をクリックして保存 し、設定ウィンドウを閉じます。

7. をクリックして公開 します。

   

素晴らしい！ 商品一覧ページにカテゴリファセットウィジェットを追加したことで、顧客は商品カテゴリで検索結果を絞り込むことができるようになりました。

次に、求人情報ページの設定を完了させ、検索結果に求人リストのみが表示されるようにしましょう。

演習17c：カスタムフィルターを使用した結果のフィルタリング

ここまで、コンテンツの種類（ブログ、ウェブコンテンツなど）、カテゴリ、および仕様に基づいて検索結果を絞り込む方法を見てきました。 また、Webコンテンツ構造など、コンテンツ内のほぼすべてのインデックス付き属性を使用してカスタムフィルターを適用することもできます。

以前の演習では、求人情報ページの検索結果をウェブコンテンツ記事のみに限定しました。 しかし、検索結果には求人情報以外の記事も含まれてしまう。

ここでは、カスタムフィルターを使用して、Clarity Admin としての求人情報を検索します。

そのためには、

1. Clarity管理者ユーザーとしてサインインしてください。

   • ユーザー名: [e-mail]
   • パスワード: learn

2. グローバルメニュー () を開き、 アプリケーション → アセットライブラリ に移動します。

3. HR ライブラリを選択し、 Web コンテンツ をクリックします。

4. 構造 タブに移動して、構造の ID をコピーします。

   これはカスタムフィルターウィジェットと組み合わせて使用することで、求人情報ページでの検索結果を絞り込むことができます。

5. オープンポジション ページに移動し、 編集 ( をクリックします。

6. フラグメントとウィジェット パネルから、 カスタムフィルター ウィジェットを、検索結果とオプション コンテナ内のグリッド フラグメントの下にドラッグ アンド ドロップします。

7. カスタムフィルターウィジェットを選択し、ウィジェットのツールチップで アクション () をクリックし、 設定 を選択します。

8. フィルターフィールドには、以下の値を入力してください。

   設定	価値
   フィルターフィールド	クラスタイプID
   フィルター値	構造物のID
   見えない	はい

9. をクリックして保存 し、ウィンドウを閉じます。

10. をクリックして公開 します。

    検索結果には求人情報のみが表示されるべきです。

    

素晴らしい！ 検索結果を「求人情報」ページの求人リストのウェブコンテンツのみに制限するカスタムフィルタウィジェットを設定しました。

次に、検索結果をカスタマイズするもう1つの方法として、検索ブループリントの使い方を学びます。

演習18a：検索ブループリントを使用した検索結果のカスタマイズ

Clarityは、自社のオーガニック成長戦略の一環として、従業員の育成と研修を通じて事業のさらなる拡大を目指しています。 この取り組みを支援するため、求人情報ページではアソシエイトレベルのポジションを優先的に表示したいと考えています。

ここでは、Clarity管理者ユーザーとして、アソシエイトレベルの求人情報を増やすための検索ブループリントを作成します。

そのためには、

1. Clarity管理者ユーザーとしてサインインしてください。

   • ユーザー名: [e-mail]
   • パスワード: learn

2. グローバルメニュー () を開き、 アプリケーション → アセットライブラリ に移動します。

3. HR ライブラリを選択し、 Web コンテンツ をクリックします。

4. 構造 タブに移動して、 求人リストの編集を開始します。

5. プロパティ () をクリックし、構造キーの値を下にコピーします。

6. グローバルメニュー () を開き、 アプリケーション → ブループリント に移動します。

7. をクリックして （を追加）します。

8. タイトルには、 ブーストアソシエイト求人リスト と入力します。

9. をクリックしてを作成します。

10. 右側のメニューで、 完全一致でフィルタリング を検索し、 追加 をクリックしてクエリに含めます。

11. フィールドには、 ddmStructureKey と入力します。

12. 「値」には、求人情報の構造キーを入力してください。

    

13. 左側のナビゲーションで、 クエリ設定 をクリックします。

14. 選択されたタイプ をクリックし、 資産タイプの選択 をクリックします。

15. Webコンテンツ記事 を選択し、 完了 をクリックします。

16. 上部メニューで、 プレビュー をクリックし、求人検索を入力します（例： 開発者）。

17. 左側のナビゲーションで、 クエリ要素 をクリックします。

18. をクリックして （）を追加すると、最初のクエリ要素の上に別のクエリ要素が追加されます。

19. 右側のメニューで、 Boost All Keywords Match を検索し、 Add をクリックして要素を追加します。

20. 「一致させるテキスト」フィールドには、 関連付け と入力します。

    

21. フィルターが適用された状態を確認するには、 プレビュー をクリックし、 更新 をクリックしてください。

22. 「すべてのキーワードを一致させる」要素で、 関連付け を VP に変更し、検索プレビューで 更新 をクリックすると、フィルターが適用されます。

23. 値を に戻し、を関連付けます。

24. をクリックして保存します。

    次に、検索ブループリントを使用するように「求人情報」ページを更新します。

25. オープンポジション ページに移動し、 編集 ( をクリックします。

26. フラグメントとウィジェット パネルから、 ブループリントオプション ウィジェットを、検索結果とオプション コンテナの検索オプション ウィジェットの下にドラッグ アンド ドロップします。

27. アクション メニュー（）をクリックし、 設定を選択します。

28. ブループリントについては、 をクリックし、 を選択して、 Boost Associate Job Listings ブループリントを選択します。

29. をクリックして保存 し、ウィンドウを閉じます。

    ブループリントを適用すると、ページ上で結果をフィルタリングするためにタイプファセットウィジェットとカスタムフィルタウィジェットは不要になります。

30. タイプファセットウィジェットとカスタムフィルターウィジェットを削除します。

31. をクリックして公開 します。

    検索結果では、アソシエイトの求人情報が優先的に表示されるようになりました。

素晴らしい！ 検索ブループリントを作成し、それを「求人情報」ページに適用して、タイプファセットウィジェットとカスタムフィルターウィジェットの代替として使用できるようにしました。

次に、検索ブループリントをコレクションプロバイダーで使用する方法を学びます。

演習18b：検索ブループリントを使用した動的コレクション

検索設計図を活用する簡単な方法の一つは、コレクションプロバイダーを利用することです。 検索ブループリントを作成するたびに、コレクションプロバイダーが自動的に生成されます。 そして、検索結果の表示は、サイトページにコレクション表示フラグメントを追加するだけで簡単に行えます。

例えば、Clarityは、今後開催されるイベントの一覧を自動的に表示するサイトページを作成したいと考えています。 検索ブループリントは、カレンダー上の今後のイベントを照会して、これらの今後のイベントを自動的に取得できます。

ここでは、Clarity Admin としてこれを実装します。

カレンダーページの作成

1. サイトメニュー (を開き、 サイトビルダーを展開し、 ページ をクリックします。

2. 新規 をクリックし、 プライマリ マスター ページ を選択します。

3. 名前には カレンダー と入力します。

4. をクリックしてを追加します。

5. フラグメントとウィジェット サイドパネルで、 ウィジェット タブに移動します。

6. カレンダー ウィジェットをページにドラッグアンドドロップします。

7. をクリックして公開 します。

   ページを作成したら、カレンダーにイベントを追加しましょう。

8. サイトページの一覧で、カレンダーページの アクション () をクリックし、 表示 を選択します。

9. 月 ビューを選択し、現在の日付より前の任意の日付をクリックして、名前として 過去のイベント 1 と入力し、 保存 をクリックします。

10. 現在の日付以降の任意の日付をクリックし、名前として「 未来イベント 1 」と入力し、「 保存」をクリックします。

11. Future Event 1 の後に、 Future Event 2 という名前のイベントをもう 1 つ追加します。

    

ページとイベントの設定が完了したら、検索ブループリントを設定できます。 しかし、その前に、今後のイベントのために、ブループリントとコレクション要素の統合に関する機能フラグを有効にしてください。

ブループリントとコレクションの統合を有効にする

1. グローバルメニュー () を開き、 コントロールパネル → インスタンス設定 に移動します。

2. 機能フラグ をクリックし、 ベータ タブに移動します。

3. 「検索ブループリントによるコレクションの有効化」（LPS-129412）。

   重要: ベータ版の機能は本番環境で使用しないでください。

この機能を有効にすると、今後のカレンダーイベントの検索ブループリント要素を作成できます。

将来のイベント検索ブループリント要素の作成

1. グローバルメニュー (を開き、 アプリケーションに移動して、 ブループリント をクリックします。

2. 要素 タブに移動し、 追加 をクリックします。

3. タイトルには、 今後のイベント と入力してください。

4. をクリックしてを作成します。

5. デフォルトのJSONコンテンツを削除します。

6. トレーニングワークスペースで、 classroom-exercises/lesson-18/ フォルダー内の filter-future-events.json ファイルを開きます。

7. filter-future-events.json の内容を JSON フィールドにコピーします。

8. をクリックして保存します。

これで、この要素を使用して将来のイベントを照会するブループリントを作成できます。

未来イベント検索ブループリントの作成

1. Blueprints アプリケーションを開いた状態で、 Blueprints タブに移動します。

2. をクリックして （を追加）します。

3. タイトルには、 今後のイベント と入力してください。

4. をクリックしてを作成します。

5. 右側のメニューで、 将来のイベント を検索し、 追加 をクリックしてクエリに含めます。

6. 左側のナビゲーションで、 クエリ設定 をクリックします。

7. 選択されたタイプ をクリックし、 資産タイプの選択 をクリックします。

   

8. カレンダーイベント を選択します。

9. をクリックして完了 します。

10. をクリックして保存します。

ブループリントが定義されたので、サイトページでそのコレクションプロバイダーを使用して、今後のイベントを表示できるようになります。

ブループリントコレクションプロバイダーの使用

1. カレンダー ページに移動して編集を開始します。

2. フラグメントとウィジェット パネルから、 コンテナ フラグメントをカレンダー ウィジェットの上にドラッグ アンド ドロップします。

3. コンテナ を選択し、設定サイドパネルで以下の設定を行います。

   タブ	設定	価値
   一般的な	コンテンツ表示	フレキシブルコラム
   一般的な	アイテムを整列する	中心
   一般的な	コンテンツを均等配置する	中心
   スタイル	間隔 > パディング	スペーサー 6 (上と下)

4. フラグメントとウィジェット パネルから、 見出し フラグメントをコンテナにドラッグアンドドロップします。

5. 見出しフラグメントのテキストを 今後のイベント に設定します。

6. フラグメントとウィジェット パネルから、 コレクション表示 フラグメントを見出しの下のコンテナにドラッグアンドドロップします。

7. コレクション表示 を選択します。

8. 設定サイドパネルで、 コレクション ( を選択 をクリックします。

9. コレクションプロバイダー タブに移動し、 将来のイベントを選択します。

10. 以下の設定を構成してください。

    タブ	設定	価値
    一般的な	スタイル表示	箇条書き
    一般的な	ページネーション	なし

11. をクリックして公開 します。

    

    検索ブループリントは、コレクション表示によってレンダリングされる将来のイベントのコレクションを自動的に提供します。

これで、コレクションプロバイダーを使用して今後のカレンダーイベントを表示する検索ブループリントを作成し、設定しました。

次に、カスタムフィールドで検索ブループリントを活用する方法、そしてヘッドレスAPIを使用してそれらのフィールドをクエリする方法を学びます。

演習18c：カスタムフィールドを使用して設計図を検索する

企業は時として、他のウェブサービスとの連携を必要とする。 例えば、Clarity社は、従業員福利厚生システムにおいて、サービスの登録ID番号に基づいて従業員を参照できるようにしたいと考えています。 Liferayでは、この値に対応するカスタムフィールドをユーザーアカウントに追加できます。 その後、LiferayのヘッドレスAPIを使用してカスタムフィールドを照会できます。

ユーザーアカウントAPIではカスタムフィールドを直接フィルタリングすることはできませんが、検索ブループリントを使用すれば可能です。 ここでは、Clarity Admin としてこれを実装します。

そのためには、

1. グローバルメニュー（）を開き、 コントロールパネル → カスタムフィールドに移動します。

2. ユーザー を選択し、 新規 をクリックします。

3. 入力フィールド を選択し、これらの詳細を入力してください。

   分野	価値
   フィールド名	登録ID
   データ型	整数

4. をクリックして保存します。

5. グローバルメニュー（）を開き、 コントロールパネル → ユーザーと組織に移動します。

6. Ian Millerを選択し、一番下までスクロールして、登録 ID に 555777 と入力します。

7. をクリックして保存します。

8. グローバルメニュー（）を開き、 アプリケーション → ブループリントに移動します。

9. をクリックして （を追加）します。

10. タイトルには 登録ID を入力してください。

11. をクリックしてを作成します。

12. 右側のメニューで、 完全一致でフィルタリング を検索し、 追加 をクリックしてクエリに含めます。

13. フィールドには、 expando__keyword__custom_fields__RegistrationId_long と入力します。

14. 値には、 ${keywords} と入力します。

    

15. をクリックして保存 し、設計図のIDをコピーします。

16. グローバルメニュー（）を開き、 コントロールパネル → インスタンス設定に移動します。

17. 機能フラグ をクリックし、 リリース タブに移動します。

18. 検索ヘッドレス API (LPS-179669) を有効にします。

19. 新しいブラウザウィンドウを開き、http://localhost:8080/o/api にアクセスして Liferay の API Explorer を開きます。

20. RESTアプリケーション ドロップダウンメニューをクリックし、 search/v1.0 を選択します。

21. postSearchPage エンドポイントを展開します。

22. nestedFields の場合は、 embedded と入力します。

23. 検索するには、 555777 と入力してください。

24. リクエストボディについては、デフォルトのJSONコンテンツを削除してください。

25. トレーニングワークスペースで、 classroom-exercises/lesson-18/ フォルダー内の api-post-search.json ファイルを開きます。

26. api-post-search.json の内容を リクエストボディ フィールドにコピーします。

27. {ブループリントID} をブループリントのIDに置き換えてください。

28. をクリックしてを実行します。

29. これがイアン・ミラーのユーザー情報を返すことを確認してください。

    

    これは、Liferayをサードパーティサービスによって利用されるヘッドレスシステムとして使用する方法の1つです。

ユーザー情報を取得するために、検索ブループリントでカスタム登録IDフィールドを使用しました。

おめでとう！ Liferayを使ったエンタープライズWebサイト構築講座の2日目の演習をすべて完了しました。