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

• 演習問題 11：ChatGPTによるコンテンツ生成
• ボーナス演習問題：コンテンツの自動タグ付け
• 演習問題 12a：ボキャブラリの作成
• 演習問題 12b：ボキャブラリへのカテゴリーの追加
• 演習問題 13a：手動コレクションの作成
• 演習問題 13b：動的コレクションの作成
• 演習問題 13c：FAQページへのコンテンツ表示
• 演習問題 13d：ヘッダーへのお知らせの追加
• 演習14a: Clarityの製品カタログの作成
• 演習問題 14b：商品仕様の定義
• 演習問題 4a：商品の作成
• 演習問題 14d：コマースチャンネルの作成
• 演習問題 14e：商品ページの設定
• 演習問題 15a：APIエクスプローラーを使ったHeadless APIへの接続
• 演習問題 15b：Headless APIを使用したWebコンテンツの一括インポート
• 演習問題 15c：Headless 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. グローバルメニュー（）を開き、［コントロールパネル］タブに移動し、［Instance Settings（インスタンス設定）］をクリックします。

3. ［AIクリエーター］ をクリックします。

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

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

5. 次のオプションがチェックされていることを確認します。

   • ChatGPT によるコンテンツ作成を有効にする
   • DALL-E による画像作成を有効にする

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

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

8. ［新規］ をクリックし、 ［基本Webコンテンツ」を選択します。

9. ［AIクリエイター］ボタン()をクリックすると、ChatGPTでコンテンツが生成されます。

   

10. 希望する説明、トーン、単語数を入力します。

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

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

12. ［追加］ をクリックして、応答をWebコンテンツにコピーします。

    または、［やり直す］をクリックして新しい応答を生成します。

ここまでで、 ChatGPTを使ってWebコンテンツを作成できました。 次に、AIによるコンテンツへのタグ付け方法やレッスン12ではLiferayの機能を使ってClarityのコンテンツ管理を改善する方法を学習します。

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

課題：

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

要件

• インスタンス内の新規および更新されたアセットの自動タグ付けを有効にします。
• Webコンテンツ用のOpenNLPプロバイダーを有効にします。
• TensorFlowによる画像の自動タグ付けを有効にします。

成功基準：

このインスタンスは、コンテンツに基づいて、新規または更新されたWeb記事にタグを自動的に追加します。

演習問題 12a：ボキャブラリの作成

Liferayはコンテンツを分類するためのボキャブラリーを提供し、必要なコンテンツの検索と表示を容易にします。

ここでは、Christian Carterとして、FAQ Webコンテンツのカテゴリーを持つボキャブラリを定義します。

これを行うには、

1. Christian Carterとしてサインインします。

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

2. グローバルメニュー（）を開き、［アプリケーション］タブに移動し、［アセットライブラリ］をクリックします。

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

4. 新しいボキャブラリを作成するには、ボキャブラリの横にある追加（ ）をクリックします。

5. 下記の内容を入力してください。

   項目	値
   名前	FAQ
   説明	Categories for FAQ articles.
   複数カテゴリの許可	はい
   表示形式	公開
   アセットタイプ	Webコンテンツ
   サブタイプ	FAQ
   必須	必須ではありません

   

6. ［保存］をクリックしてボキャブラリを作成します。

これで、FAQカテゴリーを含むボキャブラリができました。

演習問題 12b：ボキャブラリへのカテゴリーの追加

ボキャブラリを作成した後、カテゴリーとサブカテゴリーを追加して、コンテンツに必要な組織スキーマを確立することができます。

ここでは、Christian Carterとして、前の演習問題で作成したFAQボキャブラリにカテゴリーを追加します。

これを行うには、

1. ［カテゴリー（Categories）］アプリケーションで、［ボキャブラリ（Vocabularies）］ サイドバーの［FAQ］ボキャブラリーを選択します。

2. ［New（新規）］をクリックし、「Name」にRetail Partnersと入力します。

3. ［保存］をクリックしてカテゴリを追加します。

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

   • Products & Services
   • Pricing & Ordering
   • Returns & Exchanges

   

5. （チャレンジ）：各FAQ Webコンテンツの記事に正しいカテゴリーを割り当ててください。 FAQ は、カテゴリごとにフォルダーに分類されています。

   ヒント：各FAQのプロパティサイドバーを見てください。

これで、FAQ Webコンテンツにカテゴリーを定義し、割り当てました。 次に、コレクションを使用して Clarity のコンテンツを表示する方法を学習します。

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

Liferayコレクションは、サイトページに表示できるコンテンツ項目の一覧です。 異なるコンテンツの種類をグループ化し、関連する項目の検索や表示を容易にすることができます。 各一覧は手動でも動的にも定義できます。

ここでは、Webコンテンツの記事を手動コレクションに追加し、Walter DouglasとしてClarityのホームページにマッピングします。

これを行うには、

1. Walter Douglasとしてサインインします。

   • Eメール：[e-mail]
   • パスワード：learn

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

3. ［新規］ をクリックし、 ［手動コレクション」を選択します。

4. ［タイトル］にHelpful Articlesと入力し、［保存］をクリックします。

5. ［項目のタイプ］で、［Webコンテンツ記事］を選択します。

6. ［項目のサブタイプ］で［記事］を選択します。

7. ［Save（保存）］をクリックします。

8. コレクション項目セクションで、［選択］をクリックし、［記事］を選択します。

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

   • Embracing Innovation: Key Trends Shaping Eyewear Manufacturing
   • 眼鏡業界に革命を起こす：革新的な素材がもたらす変化
   • 眼鏡製造における効率性の向上：包括的アプローチ

10. ［Add（追加）］をクリックします。

    

    手動コレクションにコンテンツが追加され、サイト ページで使用できるようになりました。

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

12. Helpful Articlesコンテナの［Collection Display（コレクション表示）］フラグメントを選択します。

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

    

    このフラグメントは、Helpful Articlesコレクションからそのコンテンツを取得するようになりました。 提供されたコンポジションでは、各アイテムをレンダリングするために、Clarity Cardフラグメントがコレクション表示にすでに適用されています。 コレクションから記事のコンテンツを表示するには、カードのサブ要素を記事のフィールドにマッピングする必要があります。 ただし、カードのサブ要素をコンテンツ項目にマッピングする前に、コレクション表示のページネーションを変更しましょう。

14. ［ページネーション］には、［なし］を選択します。

    次に、カードのサブ要素を記事内の対応するフィールドにマッピングします。

15. Clarity Cardフラグメントを選択し、含まれるサブ要素に注目してください。

    • カード画像
    • カテゴリ
    • カードタイトル
    • summary
    • card-link

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

    • カード画像: コンテンツ（記事）の下の画像
    • カテゴリ: カテゴリ別記事
    • card-title: 基本情報の下にあるタイトル
    • 概要: コンテンツ（記事）の見出し

17. card-linkのサブ要素を選択し、［リンク］タブに移動します。

18. ［リンク］で［マップ済み URL］を選択します。

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

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

    ホームページのHelpful Articlesセクションに、作成したコレクションのWebコンテンツが表示されるようになります。 ただし、categoryとcard-linkの2つの要素が期待どおりに動作しません。 これは、記事にカテゴリが割り当てられておらず、記事にデフォルト表示ページテンプレートがないためです。 これらの問題を修正しましょう。

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

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

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

ここまでで、 手動コレクションを作成し、Clarityのホームページに表示しました。 次に、動的コレクションの作成方法を学びます。

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

先ほどFAQ Webコンテンツ記事を分類しましたが、ここではその分類を利用して、Walter Douglasとして動的なFAQ コレクションを構築します。

これを行うには、

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

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

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

4. ［項目のタイプ］で、［Webコンテンツ記事］を選択します。

5. ［項目のサブタイプ］で［FAQ］を選択します。

   これにより、コレクションは FAQ Web コンテンツ記事に制限されます。 次に、コレクションの範囲とフィルターを定義して、コレクションに含めるFAQを制限します。

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

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

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

8. ［フィルター］の下にあるContains *All* of the following Categoriesにルールを設定します。

9. カテゴリーフィールドでRetail Partnersを検索し、選択します。

   

10. ［保存］をクリックしてコレクションを作成します。

11. 上記の手順を繰り返して、以下のコレクションを作成します。

    • FAQ - Products & Services
    • FAQ - Pricing & Ordering
    • FAQ - Returns & Exchanges

    

    各コレクションについて、対応するカテゴリーを使用して結果をフィルタリングします。

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

演習問題 13c：FAQページへのコンテンツ表示

これまでの演習で学んだことを活用して、Walter Douglas として FAQ ページにコンテンツをマッピングしてみましょう。

これを行うには、

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

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

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

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

   

5. ［ページネーション］には、［なし］を選択します。

6. ［すべてのコレクション項目を表示］をチェックします。

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

8. Promoted Articlesコンテナで、コレクション表示をHelpful Articlesコレクションにマッピングします。

9. ［FAQコンテンツ］と ［Promoted Articles］コンテナに対してこの設定を行います。

   タブ	設定	値
   共通	コンテナの幅	固定幅

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

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

演習問題 13d：ヘッダーへのお知らせの追加

ここでは、Webコンテンツ、コレクション、ページテンプレートについて学習した内容を適用して、Walter DouglasとしてClarityのヘッダーバーにお知らせを追加します。

これを行うには、

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

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

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

4. スコープについては、マーケティングアセットライブラリを選択します。

5. ［保存］をクリックしてコレクションを公開します。

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

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

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

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

8. ヘッダお知らせバーコンテナの表示() を切り替えます。

9. ［ヘッダお知らせバー］コンテナを選択し、次の設定を行います。

   タブ	項目	値
   スタイル	背景 > 色	ブランドの色 (プライマリ)

   

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

10. コレクション表示フラグメントをコンテナに追加して選択し、以下の設定を行います。

    タブ	項目	値
    共通	コレクション	お知らせ
    共通	ページネーション	なし
    共通	表示する最大項目数	1

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

    タブ	項目	値
    共通	コンテンツの表示	Flex 行
    共通	項目を揃える	中央揃え
    共通	コンテンツの配置	中央揃え

12. 説明文フラグメントをコンテナに追加して選択し、以下の設定を行います。

    タブ	項目	値
    スタイル	テキスト > 色	色 (ニュートラル 0)

    

13. 説明文のelement-textサブ要素を選択し、次の設定を行います。

    タブ	項目	値
    マッピング	項目	メッセージ

14. 説明文の後のAnnouncementコンテナにClarity Buttonフラグメントを追加して選択し、以下の設定を行います。

    タブ	項目	値
    共通	種類	枠なし
    共通	スタイル	メインにする
    共通	サイズ	小さい
    共通	反転	はい

15. ボタンのlinkサブ要素を選択し、次の設定を行います。

    タブ	項目	値
    マッピング	項目	リンクテキスト
    リンク	リンク	マップ済み URL
    リンク	項目	ページへのリンク

16. お知らせバー要素のマージンとパディングを、納得がいくまで調整します。

    

17. ［マスターを公開］をクリックして変更を保存します。

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

演習14a: Clarityの製品カタログの作成

カタログとは、関連する商品のグループです。 Liferayカタログは、ビジネスにとって最も合理的な方法で商品の提供を整理するための非常に柔軟な方法を提供します。

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

これを行うには、

1. Clarity管理者としてサインインします。

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

2. グローバルメニュー（）を開き、［コマース］タブに移動し、［カタログ］をクリックします。

3. 追加 () をクリックします。

4. 次のように入力します。

   項目	値
   名前	Clarity Eyewear
   デフォルトのカタログ言語	English (United States)
   為替レート	US Dollar

   

5. ［Submit（送信）］をクリックして、カタログの作成を完了します。

ここまでで、 カタログの作成が完了したら、商品の追加を開始します。 しかし、まずは、Clarityの商品を作成するときに追加できる仕様書を追加しましょう。

演習問題 14b：商品仕様の定義

商品仕様には、サイズ、素材、色など、商品に関する情報が保存されます。 整理しやすくするために、仕様グループに保存することもできます。

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

これを行うには、

1. グローバルメニュー（）を開き、［コマース］タブに移動し、［仕様］をクリックします。

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

3. 新しい仕様グループを追加するには、［新規］をクリックします。

4. 次のように入力します。

   項目	値
   タイトル	Frame Description
   重要度	10.0
   キー	frame-description

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

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

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

7. 新しい仕様を追加するには、［新規］をクリックします。

8. 次のように入力します。

   項目	値
   ラベル	Frame Material
   説明	The material of the frame.
   ファセット・ナビゲーションで利用する	はい
   デフォルト仕様グループ	Frame Description
   キー	frame-material

9. ［保存］をクリックして、仕様ラベルの作成を完了します。

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

    • Frame Color

      項目	値
      ラベル	Frame Color
      説明	The color of the frame.
      ファセット・ナビゲーションで利用する	はい
      デフォルト仕様グループ	Frame Description
      キー	frame-color

    • Frame Size

      項目	値
      ラベル	Frame Size
      説明	The size of the frame (in default units).
      ファセット・ナビゲーションで利用する	いいえ
      デフォルト仕様グループ	Frame Description
      キー	frame-size

11. ［Specification Labels（仕様ラベル）］のページに戻ります。

仕様をいくつか追加したので、商品の作成時にそれを適用できます。

演習問題 4a：商品の作成

商品とは、企業が販売する品目を表します。 他のメーカーと同様に、Clarityはさまざまな目標を達成し、さまざまな顧客プロファイルをターゲットにするように設計された多種多様な商品を取り揃えています。

ここでは、Clarity管理者として、Clarityのカタログへの商品の追加や仕様の適用を行います。

これを行うには、

1. グローバルメニュー（）を開き、［コマース］タブに移動し、［商品］をクリックします。

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

   注：シンプル商品とは、在庫が追跡される物理的な商品です。

3. 次のように入力します。

   項目	値
   名前	Classic Aviator Sunglasses
   カタログ	Clarity Eyewear

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

   これで商品を設定することができます。 まず、ChatGPTを使って商品の説明を追加します。

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

6. 説明、トーン、単語数を入力します。

   例えば、

   項目	値
   説明	A product description for a pair of classic aviator sunglasses made for sunny days.
   トーン	フレンドリー
   単語数	200

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

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

8. ［追加］ をクリックして、応答を詳細な説明フィールドにコピーします。 または、［やり直す］をクリックして新しい応答を生成します。

   長い説明が追加されたので、商品を分類してみましょう。

9. カテゴリー設定セクションで、Clarity商品の［選択］をクリックします。

10. ［Sunglasses］を選択し、［完了］をクリックしてこの品目にカテゴリーを適用します。

    商品が分類されたので、仕様を追加します。

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

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

13. フィールドに次の値を入力します。

    項目	値
    仕様	Frame Material
    値	Metal

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

    仕様	値
    Frame Color	Gold
    Frame Size	54-20

    商品の仕様が決まりましたので、商品の画像を追加しましょう。

15. ［下書きとして保存］をクリックして変更を保存します。

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

17. 画像については、追加（ ）をクリックし、［ファイルの選択］をクリックします。

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

19. 画像の詳細を入力します。

    項目	値
    タイトル	Classic Aviator Sunglasses
    重要度	10.0

20. ［Publish（公開）］をクリックして商品画像を保存します。

    

21. ［Publish（公開）］をクリックして、商品の作成を完了します。

22. 上記の手順を繰り返して、さらに2つの商品（AquaComfort Plus DailiesおよびSingle Vision Lenses）を作成します。 タグは詳細画面のタグフィールドに直接入力してください。

    プロダクト	仕様	カテゴリ	タグ	画像
    AquaComfort Plus Dailies	該当なし	連絡先	daily	アクアコンフォートプラスデイリーズ
    Single Vision Lenses	該当なし	Lenses	daily	バイオフィニティトーリックレンズ

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

    

ここまでで、 商品を追加したら、Clarityのサイトに商品を表示するチャンネルを設定します。

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

チャンネルは、商品を陳列して顧客に販売する店頭を決定します。

ここでチャンネルを作成し、Clarity管理者としてチャンネルをClarityの公開エンタープライズWebサイトにリンクします。

これを行うには、

1. グローバルメニュー（）を開き、［コマース］タブに移動し、［チャンネル］をクリックします。

2. 追加 () をクリックします。

3. 次のように入力します。

   項目	値
   名前	Clarity Public
   為替レート	US Dollar
   種類	サイト

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

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

5. ［Type（タイプ）］タブに移動し、［Select Site］をクリックします。

6. Clarity Public Enterprise Websiteを選択します。

7. ［Save（保存）］をクリックします。

8. ［General（一般）］タブの［Commerce Site Type（コマースサイトの種類）］ドロップダウンで［B2B］を選択します。

   

9. ［Save（保存）］をクリックします。

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

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

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

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

商品ページの更新

商品ページは、Clarity商品のボキャブラリで定義された商品カテゴリを紹介するためのマーケティングページです。 カテゴリーを選択すると、ユーザーは商品リストページに移動し、選択したカテゴリーの商品のみが表示されます。

これを実行するには、

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

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

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

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

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. ［Save（保存）］をクリックします。

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

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

18. 表示テンプレートとして、［Clarity Category Cards］を選択します。

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

20. ページを表示するには、［公開］をクリックします。

ここまでで、 Clarityが要求した最終デザインにかなり近づいていることがわかります。 商品ページが完成したので、次は商品リストページを完成させましょう。

商品リストページ（PLP）の作成

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

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

これを修正するには、

1. 商品リスト ページに移動します。

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

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

4. ［Publish（公開）］をクリックします。

5. 商品ページに戻り、カテゴリーカードを1つクリックして、正しく機能していることを確認します。

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

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

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

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

   重要：「検索結果テンプレート」には2つのオプションがあります。 ひとつは一般的な検索結果用で、もうひとつはコマース商品用です。 まず2番目のオプションを選択してみてください。 正しい場合は、［要素］メニューにコマース固有の変数が表示されます（つまり、 ［コマース製品検索結果ディスプレイコンテクスト］および［コマース製品カタログエントリー］）。 これらの変数が表示されない場合は、別のテンプレートを使用してみてください。

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

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

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

12. ［Save（保存）］をクリックします。

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

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

    注：検索結果ウィジェットは、レイアウトの右下に空白で表示されます。

    

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

16. ［表示テンプレート］として、［Clarity Search Results Cards］を選択します。

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

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

18. ［Publish（公開）］をクリックします。

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

    

商品表示ページの作成

最後に、商品リストページで商品をクリックすると、期待通りに動作しません。 これは、Liferayが商品の詳細を表示するためにどのページを使うべきかを知らないためです。

これを修正するには、

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

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

3. 次の値を入力して［保存］をクリックします。

   項目	値
   名前	Product Details
   コンテンツの種類	プロダクト

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

4. 商品詳細ページのフラグメント構成をドロップエリアにドラッグアンドドロップします。

   

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

   フラグメント	フラグメントサブ要素	マッピング
   製品名	element-text	Name (Basic Information)
   SKU	element-text	SKU (Basic Information)
   説明	要素-HTML	説明 (基本情報)

6. ボタンのlinkサブ要素を選択し、次の設定を行います。

   タブ	項目	値
   リンク	リンク	ページ
   リンク	ページ	Contact Us

7. ［ボタン］フラグメントをダブルクリックし、テキストをContact Sales に変更します。

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

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

   フラグメント	フラグメントサブ要素	マッピング
   仕様名	element-text	Name (Basic Information)
   仕様値	element-text	値 (基本情報)

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

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

    フラグメント	フラグメントサブ要素	マッピング
    添付ファイル名	element-text	タイトル (基本情報)

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

    タブ	項目	値
    共通	スタイル	リンク
    共通	サイズ	小さい

13. ［ダウンロード］ボタンのリンクサブ要素を選択し、下記の設定を行います。

    タブ	項目	値
    リンク	リンク	マップ済み URL
    リンク	項目	ダウンロード URL

14. ［ダウンロード］ボタンをダブルクリックし、テキストをDownload に変更します。

15. ［Publish（公開）］をクリックします。

16. 商品詳細テンプレートのアクション（）をクリックし、［デフォルトにする］を選択します。

17. ［カテゴリー表示］ページに戻り、商品を1つ選択して動作していることを確認します。

これで、 Clarityの商品ページを設定できました。 次に、LiferayのHeadless API の使用方法について説明します。

演習問題 15a：APIエクスプローラーを使ったHeadless APIへの接続

LiferayのAPIエクスプローラーを介してHeadless APIを操作して、Headless APIがどのように使用されるかを見てみましょう。 ここではWalter Douglasとして新規のブログ投稿を追加します。

これを行うには、

1. Walter Douglasとしてサインインします。

   • Eメール：[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エクスプローラーにアクセスします。

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

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

    

11. siteIdフィールドには、Clarityの公開エンタープライズWebサイトのサイトIDを入力します。

12. ドキュメントフィールドでは、デフォルトのJSONコンテンツを削除し、［Send empty value］のチェックを外します。

13. ファイル フィールドで、 [ファイルを選択] をクリックし、 [repository-folder]/classroom-exercises/lesson-15/ フォルダーから Glasses-book.png を選択します。

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

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

15. 応答本文で、画像のIDを探します。 以下に例を示します。

    (...)
    "fileExtension" : "png",
    "fileName" : "glasses-book.png",
    "id" : [image-id],
    "keywords" : [ ],
    (...)
    

    次のステップで使用する画像IDをコピーします。

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

17. siteIdには、Clarityの公開エンタープライズ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. Things I Find Interesting in Eyewearのブログ投稿が表示されていることを確認します。

    

演習問題 15b：Headless APIを使用したWebコンテンツの一括インポート

Clarityは、古いポータルから3つのレガシーWeb記事を新しいエンタープライズWebサイトにインポートしたいと考えています。 ここでは、Walter DouglasとしてLiferayのHeadless APIを使用して追加します。

これを行うには、

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

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

3. siteIdには、Clarityの公開エンタープライズ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：Headless APIを使用した商品の一括インポート

REST APIを使用して、Clarityの商品を外部システムからLiferay DXPにインポートし、商品管理を合理化できます。 ここでは、APIを使用してIan Millerとして商品を作成します。

これを行うには、

1. Ian Millerとしてサインインします。

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

2. グローバルメニュー（）を開き、［コマース］タブに移動し、［商品］をクリックします。

   既存商品の数（例：3）をメモしておきます。

3. グローバルメニュー（）を開き、［コマース］タブに移動し、［カタログ］をクリックします。

4. ［Clarity Eyewear］をクリックします。

   カタログのIDをコピーします。 後の手順で使用します。

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

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

7. ［商品］セクションまでスクロールダウンし、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の公開エンタープライズWebサイトウィンドウに戻り、グローバルメニュー()を開き、［コマース］タブから［商品］をクリックします。

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

    

演習問題 15d：ヘッドレスを使ったタクソノミーカテゴリーのインポート

多国籍企業であるClarityは、世界中に多くの事業拠点を持っています。 採用活動をより効果的にサポートするために、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エクスプローラーにアクセスします。

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

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

9. taxonomyVocabularyIdには、場所のボキャブラリIDを入力します。

10. リクエスト本文では、デフォルトのJSONコンテンツを削除します。

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

12. import-taxonomy-categories-batch.jsonのコンテンツを［リクエスト本文］フィールドにコピーします。

    

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

14. HRアセットライブラリウィンドウに戻り、ページを更新します。

    新しい場所が表示されます。

15. パンくずリストメニューの［HR］をクリックすると、ライブラリーの概要ページに戻ります。

16. ［Webコンテンツ］をクリックし、［Job Listings］フォルダを開きます。

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

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

ここまでで、 LiferayのHeadless APIを活用して、Clarityのレガシーデータを移行できました。 次に、Liferayの公開ツールとワークフローについて学びます。

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

ワークフローを備えた公開を活用して、サイトやコンテンツの変更のための堅牢な公開設定プロセスを実装できます。 ここでは、公開を有効にし、Ian Miller として Clarity の Web サイトに公開されるすべての新しい記事に対して単一の承認者ワークフローを構成します。

これを行うには、

1. Ian Millerとしてサインインします。

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

2. グローバルメニュー（）を開き、［アプリケーション］タブに移動し、［公開］をクリックします。

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

4. 公開アプリケーションページに戻るには、 戻る () をクリックします。

5. 追加()をクリックして、新規公開を作成します。

   または、ページ上部の［公開］ドロップダウンメニューをクリックし、［新規公開を作成］を選択することもできます。

6. ［Name］にArticle Publicationと入力します。

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

8. Clarityの公開エンタープライズWebサイトに戻ります。

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

10. ［Webコンテンツ］タブで記事フォルダのアクション（ ）をクリックし、［編集］を選択します。

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

12. ドロップダウンメニューから［Single Approver（唯一の承認者）］を選択します。

13. ［Save（保存）］をクリックします。

    

Clarityの記事Webコンテンツの変更を追跡するための公開と、新しい記事を本番環境サイトに公開する前に承認するためのワークフローが設定されました。

次に、作成した公開で他のユーザーを招待して作業してもらう方法を学習しましょう。

公開でのユーザーの招待とロールの割り当て

公開アプリケーションには、公開での共同作業にユーザーを招待するオプションがあります。 これらのユーザーには、公開権限が割り当てられていなくても招待することができます。

ここでは、Christian CarterとClara MurphyをIan Millerとして記事公開プロセスに参加してもらうよう招待します。

これを行うには、

1. ［Publications（公開）］アプリケーションにアクセスし、記事公開のためのアクション() をクリックし、［Invite Users（ユーザーを招待）］を選択します。

   または、ページ上部の［公開］ドロップダウンメニューをクリックし、［変更の確認］を選択し、Invite Users（ユーザーを招待）］（ ）をクリックすることもできます。

2. ロールドロップダウンメニューをクリックし、［Editor（編集者）］を選択します。

3. ［People（メンバー）］に、Christian Carterと入力します。

4. ステップ2～3を繰り返し、次の値を使用してClara Murphyを招待します。

   名前	ロール
   クララ・マーフィー	発行者

   

5. ［Send（送信）］をクリックし、［OK］をクリックして確定します。

ここまでで、 現在、Christian CarterとClara Murphyが公開に貢献することができます。 次に、公開ワークフローを実行します。

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

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

この演習では、Christian Carterとして新しい記事を追加し、唯一の承認者ワークフローでレビューし、Clara Murphyとして本番環境に変更をプッシュします。 これらの変更は、記事公開プロセスで行われます。

ワークフローへの新しい記事の作成と提出

ここで、新しい記事を作成し、Christian Carterとして承認を得るために送信します。

これを行うには、

1. Christian Carterとしてサインインします。

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

   注：公開メニューがページの上部に表示され、公開の招待に関する新しい通知が受信されました。

   

2. ユーザープロフィールのアイコンをクリックし、［Notifications（通知）］から公開の招待を選択します。

   

   記事公開の詳細ページが開きます。

3. ページ上部の［公開］ドロップダウンメニューをクリックし、［公開を選択］をクリックし、［記事公開］を選択します。

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

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

6. 次の値を入力します。

   項目	値
   タイトル	Clarity x Warby Parker
   画像	revolutionizing_industry (from the Marketing Assets library)
   Headline	Summer 2024 Collaboration
   コンテント	Eyewear enthusiasts rejoice! ファンに人気のClarityとWarby Parkerが協力して、コラボコレクションを制作しました。

7. ［ワークフロー用に送信］ドロップダウンを展開し、［権限を指定してワークフロー用に送信］を選択します。

8. ［ワークフロー用に送信］をクリックします。

ここまでで、 新しい記事を作成し、記事の公開でレビューのために送信できました。 次に、変更を承認して公開する方法を学びます。

ワークフロー内のコンテンツのレビューと公開の設定

ここで、Christian CarterのマネージャーであるClara Murphyとして、記事の確認とすべての変更の本番環境へのプッシュを完了します。

これを行うには、

1. Clara Murphyとしてサインインします。

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

   公開メニューがページの上部に表示され、公開の招待とレビューリクエストに関する2つの新しい通知が受信されました。

   

2. ページ上部の［公開］ドロップダウンメニューをクリックし、［公開を選択］をクリックし、［記事公開］を選択します。

3. もう一度［公開］ドロップダウンメニューをクリックし、［変更の確認］を選択します。

   変更点のリストを含む公開の詳細ページに移動します。

4. ［Publish（公開）］をクリックします。

   公開には未承認の変更が含まれているため、このアクションは失敗します。

   

5. ユーザープロフィールのアイコンをクリックし、［マイワークフロータスク］に進みます。

6. ［自分のロールに割り当て済み］タブに移動し、保留中のワークフロー タスクを確認します。

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

8. コメントを入力し、［完了］をクリックします。

   これで Clara Murphyにタスクが割り当てられ、［自分に割り当て済み］タブにリダイレクトされます。 ここでClaraはChristian Carterの記事をレビューし、承認または拒否することができます。

9. タスクのアクション（ ）をクリックし、［承認］を選択します。

10. コメントを入力し、［完了］をクリックします。

11. もう一度［公開］ドロップダウンメニューをクリックし、［変更の確認］を選択します。

    変更のステータスは［承認済み］となりました。

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

    

ここまでで、 公開によるワークフローを使用して、Webコンテンツ記事をレビューして公開することができました。 次に、Liferayの検索機能を活用してユーザーエクスペリエンスを向上させる方法を学びます。

演習問題 17a：求人情報ページへの検索機能の追加

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

ここではWalter Douglasとしてこれらのウィジェットを追加し設定します。

これを行うには、

1. Walter Douglasとしてサインインします。

   • Eメール：[e-mail]
   • パスワード：learn

2. サイトメニュー()を開き、［ページツリー］をクリックし、［キャリア］を展開し、［Open Positions］をクリックします。

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

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

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

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

7. ウィジェットを選択し、下記の設定を行います。

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

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

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

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

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

    

    これにより、検索結果にはWebコンテンツの記事のみが表示されます。

11. ［保存］をクリックして、構成ウィンドウを閉じます。

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

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

14. ［Display Template（表示テンプレート）］では、［Clarity Search Category］のテンプレートを選択します。

    

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

    注：各カテゴリーファセットウィジェットが期待通りに機能するには、一意のパラメーター名が必要です。

16. 下にスクロールし、［Select Vocabularies（ボキャブラリの選択）］を選択します。

17. Clarity Public Enterprise Websiteのボキャブラリを展開し、［Region（地域）］のボキャブラリを選択します。

    

18. ［保存］をクリックして、構成ウィンドウを閉じます。

19. 他のカテゴリーファセットウィジェットについても、ステップ12～18を繰り返します。

    ウィジェット	表示テンプレート	カテゴリーパラメータ名	ボキャブラリ
    秒	Clarity Search Category	category-location	ロケーション
    ３番目	Clarity Search Category	category-job-positions	職種

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

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

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

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

23. ［空の検索を許可する］にチェックを入れます。

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

25. ［Publish（公開）］をクリックします。

    

    最後に、［キャリア］ページの［Explore Open Positions］ボタンを更新して、［Open Positions］ページにリンクするようにします。

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

27. バナーの［Explore Open Positions］ボタンをダブルクリックして、ボタンのリンク要素の設定サイドパネルを開きます。

28. 設定サイドパネルで、［リンク］タブを開き、下記の設定を行います。

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

29. ［Publish（公開）］をクリックします。

Clarityの求人ページに検索機能が追加されたので、サイト訪問者はさまざまなカテゴリーで求人を検索およびフィルタリングできるようになりました。 後の演習でこのページに再度アクセスし、検索結果に表示されるWebコンテンツ記事をさらに制限します。

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

演習問題 17b：商品ページへの検索機能の追加

ここでは、商品リストページを詳しく見て、さまざまなLiferay検索ウィジェットと、それらをWalter Douglasとして設定する方法を学習します。

これを行うには、

1. Clarityの［商品リスト］ ページに移動します。 ページの大部分はすでにさまざまな検索ウィジェットを使用して構築されています。

   

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

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

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

   このページには、訪問者がClarityのさまざまなタイプの商品でフィルタリングできるようにするカテゴリーファセットウィジェットがまだありません。 ウィジェットを追加してみましょう。

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

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

5. ［Display Template（表示テンプレート）］では、［Clarity Search Category］のテンプレートを選択します。

6. ［保存］をクリックして、構成ウィンドウを閉じます。

7. ［Publish（公開）］をクリックします。

   

ここまでで、 商品リストページにカテゴリーファセットウィジェットを追加し、顧客が商品カテゴリで検索結果をフィルタリングできるようになりました。

次に、［Open Positions］のページで、検索結果に求人情報のみを表示するように設定を完了しましょう。

演習問題 17c：カスタムフィルターによる結果のフィルタリング

これまで、コンテンツの種類（ブログ、Webコンテンツなど）、カテゴリー、仕様で検索結果をフィルタリングする方法を学んできました。 また、Webコンテンツストラクチャーなど、コンテンツ内のほぼすべてのインデックス付き属性を使用してカスタムフィルターを適用することもできます。

前回の演習では、［Open Positions］ページの検索結果をWebコンテンツ記事のみが表示されるよう制限しました。 ただし、検索結果には求人情報ではないタイプの記事も引き続き含まれます。

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

これを行うには、

1. Clarity管理者ユーザーとしてサインインします。

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

2. グローバルメニュー（）を開き、［アプリケーション］タブに移動し、［アセットライブラリ］をクリックします。

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

4. ［ストラクチャー］タブに行き、ストラクチャーのIDをコピーします。

   これは、カスタムフィルターウィジェットと一緒に使用して、[ Open Positions］ページで検索結果を制限します。

5. ［Open Positions］ページに移動し、編集() をクリックします。

6. ［フラグメントとウィジェット］パネルから、［カスタムフィルター］ウィジェットを［Search Results and Options］コンテナのグリッドフラグメントの下にドラッグアンドドロップします。

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

8. フィルタフィールドには、以下の値を入力します。

   設定	値
   フィルタフィールド	classTypeId
   フィルタ値	The Structure's ID
   非表示	はい

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

10. ［Publish（公開）］をクリックします。

    検索結果には求人情報のみが表示されます。

    

ここまでで、 検索結果を制限して、［Open Positions］ページに求人情報のWebコンテンツのみを表示するカスタムフィルターウィジェットを設定しました。

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

演習問題 18a：検索ブループリントによる検索結果のカスタマイズ

オーガニック成長戦略の一環として、Clarityは事業のさらなる拡大に向け、従業員の育成と訓練を行いたいと考えています。 この取り組みをサポートするために、同社は［Open Positions］結果ページでアソシエイトレベルのポジションを優先したいと考えています。

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

これを行うには、

1. Clarity管理者ユーザーとしてサインインします。

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

2. グローバルメニュー（）を開き、［アプリケーション］タブに移動し、［アセットライブラリ］をクリックします。

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

4. ［ストラクチャー］タブに移動し、［求人情報］の編集を開始します。

5. プロパティ()をクリックし、ストラクチャーキーの値をコピーします。

6. グローバルメニュー（）を開き、［アプリケーション］タブに移動し、［ブループリント］をクリックします。

7. 追加 () をクリックします。

8. タイトルにはBoost Associate Job Listingsと入力します。

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

10. 右側のサイドメニューでFilter by Exact Terms Matchを検索し、［追加］をクリックしてクエリに含めます。

11. ［Field（フィールド）］に、ddmStructureKeyと入力します。

12. ［Values（値）］には、求人情報のストラクチャーキーを入力します。

    

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

14. ［Selected Types］をクリックし、［アセットタイプを選択］をクリックします。

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

16. 上部メニューで［プレビュー］をクリックし、求人情報の検索条件を入力します（例：Developer）。

17. 左のナビゲーションで、［Query Elements］をクリックします。

18. 追加() をクリックして、最初のクエリ要素の上に別のクエリ要素を追加します。

19. 右サイドメニューでBoost All Keywords Matchを検索し、要素の［追加］」をクリックします。

20. ［Text to Match］フィールドにAssociateと入力します。

    

21. ［プレビュー］をクリックし、［更新］をクリックすると、適用されたフィルターを確認できます。

22. ［Boost All Keywords Match］要素で、Associateを VPに変更し、検索プレビューで［更新］をクリックすると、適用されたフィルターを確認できます。

23. 値をAssociateに戻します。

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

    次に、［Open Positions］ページを更新して、検索ブループリントを使用します。

25. ［Open Positions］ページに移動し、編集() をクリックします。

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

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

28. ブループリントの場合は、 ［選択］ をクリックし、 ［Boost Associate Job Listings］ ブループリントを選択します。

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

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

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

31. ［Publish（公開）］をクリックします。

    検索結果では、関連する求人情報が優先的に表示されるようになりました。

ここまでで、 検索ブループリントを作成し、タイプファセットやカスタムフィルターウィジェットの代わりとして、［ Open Positions］ページに適用しました。

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

演習問題 18b：検索ブループリントによる動的コレクション

検索ブループリントを活用する簡単な方法の 1 つは、コレクションプロバイダーを使用することです。 検索ブループリントを作成するたびに、コレクションプロバイダーが自動的に生成されます。 次に、検索ブループリントの結果を表示するのは、サイトページにコレクション表示フラグメントを追加するのと同じくらい簡単です。

たとえば、Clarityでは、直近の予定のリストを自動的に表示するサイトページを作成したいと考えています。 検索ブループリントは、カレンダー上の直近の予定を照会して、これらの直近の予定を自動的に取得できます。

ここではClarity管理者として実装します。

カレンダーページの作成

1. サイトメニュー() を開き、［サイトビルダー］を展開し、［ページ］を選択します。

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

3. 名前にCalendarと入力します。

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

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

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

7. ［Publish（公開）］をクリックします。

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

8. サイトページのリストで、カレンダーページのアクション（ ）をクリックし、［表示］を選択します。

9. ［Month］ビューを選択し、現在の日付より前の日付をクリックして、名前にPast Event 1と入力し、［保存］をクリックします。

10. 現在の日付より後の日付をクリックし、名前としてFuture Event 1と入力し、［保存］をクリックします。

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

    

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

ブループリントとコレクションの統合の有効化

1. グローバルメニュー（）を開き、［コントロールパネル］タブに移動し、［インスタンス設定］をクリックします。

2. ［機能フラグ］をクリックし、［Beta］タブを開きます。

3. 検索ブループリントのコレクション (LPS-129412)を有効にします。

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

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

今後の予定検索ブループリント要素の作成

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

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

3. タイトルにFuture Eventsと入力します。

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

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

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

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

8. ［Save（保存）］をクリックします。

これで、この要素を使用して今後の予定を照会するブループリントを作成できます。

今後の予定検索ブループリントの作成

1. ブループリントアプリケーションで、［ブループリント］タブに移動します。

2. 追加 () をクリックします。

3. タイトルにFuture Eventsと入力します。

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

5. 右側のサイドメニューでFuture Eventsを検索し、［追加］をクリックしてクエリに含めます。

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

7. ［Selected Types］をクリックし、［アセットタイプを選択］をクリックします。

   

8. ［Calendar Event（カレンダーの予定）］を選択します。

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

10. ［Save（保存）］をクリックします。

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

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

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

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

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

   タブ	設定	値
   共通	コンテンツの表示	Flex 列
   共通	項目を揃える	中央揃え
   共通	コンテンツの配置	中央揃え
   スタイル	間隔 > パディング	スペーサー 6 (上と下)

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

5. ［見出し］フラグメントのテキストをUpcoming Events に設定します。

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

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

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

9. ［コレクションプロバイダー］タブに移動し、［今後の予定］を選択します。

10. 次の設定を行います。

    タブ	設定	値
    共通	スタイル表示	記号付きリスト
    共通	ページネーション	なし

11. ［Publish（公開）］をクリックします。

    

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

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

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

演習問題 18c：カスタムフィールドによるブループリントの検索

時には、他のWebサービスとの統合が必要になることもあります。 例えば、Clarityは、従業員の福利厚生システムがサービスの登録ID番号に基づいて従業員を参照したいと考えています。 Liferayでは、この値のためにユーザーアカウントにカスタムフィールドを追加することができます。 そして、LiferayのHeadless APIを使ってカスタムフィールドをクエリできます。

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

これを行うには、

1. グローバルメニュー()を開き、［コントロールパネル］タブに移動し、［カスタムフィールド］をクリックします。

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

3. 入力フィールド を選択し、これらの詳細を入力します。

   項目	値
   項目名	RegistrationId
   データ型	整数

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

5. グローバル メニュー () を開き、 コントロール パネル タブに移動して、 ユーザー & 組織をクリックします。

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

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

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

9. 追加 () をクリックします。

10. タイトルには、Registration IDを入力します。

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

12. 右側のサイドメニューでFilter by Exact Terms Matchを検索し、［追加］をクリックしてクエリに含めます。

13. Fieldには、expando__keyword__custom_fields__RegistrationId_longと入力します。

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

    

15. ［保存］をクリックし、ブループリントのIDをコピーします。

16. グローバルメニュー ()を開き、［コントロールパネル］タブに移動し、［インスタンス設定］をクリックします。

17. ［機能フラグ］をクリックし、［リリース］タブを開きます。

18. 検索Headless API (LPS-179669)を有効にします。

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

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. {blueprint ID}をブループリントのIDに置き換えます。

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

29. Ian Millerのーザー情報が返されることを確認します。

    

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

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

これで、 「LiferayでエンタープライズWebサイトを構築する」の2日目の演習問題をすべて完了しました。