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

• エクササイズ 1： Clarityの公開エンタープライズWebサイトの探求
• エクササイズ 2：Liferay Workspaceの確認と起動
• エクササイズ 3a：ユーザーの作成
• エクササイズ3b：ユーザーグループの作成と割り当て
• エクササイズ 3c：ユーザーロールの作成と割り当て
• エクササイズ 3d：ロール権限の定義
• ボーナス演習: マネージャー権限の微調整
• エクササイズ 4a：サイトの作成
• エクササイズ 4b: サイトへのユーザーの追加
• エクササイズ 4c：サイトの構成
• エクササイズ 5：Analytics Cloud
• エクササイズ 6a：コンテントページの追加
• エクササイズ 6b：表示ページテンプレートの追加
• エクササイズ 6c：Clarityのマスターページの設計
• エクササイズ 6d：許可されたフラグメントの設定
• エクササイズ 6e：セカンダリマスターページの作成
• エクササイズ6f：マスターページの適用
• エクササイズ 7a：ナビゲーションメニューの作成
• エクササイズ 7b：メニュー表示フラグメントの更新
• エクササイズ 8a：カスタムフラグメントの作成
• エクササイズ 8b：フラグメントのインポート
• エクササイズ 8c：マスターページへのカスタムフラグメントの追加
• エクササイズ 8d：ページへのフラグメント構成の追加
• ボーナス演習: ログインボタンフラグメントの URL を動的にする
• エクササイズ 8e：Clarityのデフォルトテーマ、お気に入りアイコン、ロゴの更新
• 演習8f: ClarityのグローバルCSSクライアント拡張機能の導入と適用
• エクササイズ 9a：アセットライブラリの作成
• 演習9b: マスターページにClarityのロゴを追加する
• エクササイズ 10a：Webコンテンツストラクチャーの作成
• エクササイズ 10b：Webコンテンツ記事の作成
• エクササイズ 10c：フラグメントへのコンテンツのマッピング

エクササイズ 1： Clarityの公開エンタープライズWebサイトの探求

このトレーニングでは、Clarity Vision SolutionsのエンタープライズマーケティングWebサイトの構築を支援します。 このサイトは、ブランドの認知度を高め、商品を紹介し、訪問者を顧客に変えることを目的としています。 ゼロから始めるのではなく、Clarityのサイトの一部完成版を含むLiferay Workspaceを用意し、このトレーニングを通じて完成させることができます。 その過程で、さまざまなClarityのペルソナを担当し、そのペルソナがClarityのソリューションにどのように貢献できるかを実証します。

次に進む前に以下を確認しましょう。

1. Clarity の Figma デザイン を確認して、構築しているサイトのアイデアをつかみましょう。

2. Liferay 上のサイトの完全な実装を確認するには、 https://clarityvisionsolutions.com にアクセスしてください。

エクササイズ 2：Liferay Workspaceの確認と起動

このトレーニングでは、ローカルの Liferay 環境を使用して Clarity のエンタープライズ Web サイトを構築します。 Liferay の Course Launcher ツールは、システムを自動的に準備し、トレーニング演習専用のワークスペースを設定します。 このツール:

• システムに Java 21 がインストールされているかどうかを確認します。 そうでない場合は、Azul から Zulu JRE 21 をインストールします。
• コースワークスペースをダウンロードして構成します。
• ローカルの Liferay DXP バンドルを初期化します。

ここでは、コース ランチャー ツールを実行して、 Liferay クラスルーム トレーニングの前提条件 を完了したことを確認し、トレーニング ワークスペースの設定を完了します。

注意: 進行状況がリセットされないようにするには、これらの手順を 1 回だけ実行してください。 既存の Liferay サーバーを起動するには、手順 4 ～ 11 のみを繰り返します。

1. ターミナルを開き、オペレーティング システムに応じて次のコマンドを実行します。

   Linux/Unix:

   /bin/bash -c "$(curl -fsSL https://raw.github.com/liferay/liferay-enablement-script-library/main/content-manager-course-setup.sh)" -- --building-enterprise-websites linux
   

   マック:

   /bin/bash -c "$(curl -fsSL https://raw.github.com/liferay/liferay-enablement-script-library/main/content-manager-course-setup.sh)" -- --building-enterprise-websites mac
   

   ウィンドウ:

   powershell Set-ExecutionPolicy Bypass -Scope Process -Force; iex "& { $(irm https://raw.githubusercontent.com/liferay/liferay-enablement-script-library/refs/heads/main/content-manager-course-setup.ps1); install-course --building-enterprise-websites }"
   

   これにより、コース ランチャー ツールが実行され、Java JDK 21 が自動的にチェックされてインストールされ、トレーニングのファイルがダウンロードされ、Liferay DXP バンドルが準備されます。 このプロセスが完了するまでに数分かかる場合があります。

2. “Liferay バンドルが初期化されました” メッセージが表示されたら、 liferay-course-building-enterprise-websites/ フォルダが作成されたことを確認します。

3. Liferay Blade CLI がインストールされていることを確認します。

   blade version
   

   Blade がインストールされていない場合は、OS (Linux/macOS | Windows) にインストールする方法については、 Blade CLI のドキュメントを参照してください。

   注: Blade CLI は多くの開発タスクを簡素化します。 これを使用して、新しいワークスペースを作成したり、サーバーバンドルを取得したり、Liferay インスタンスを起動したりすることができます。 このトレーニングには Blade が強く推奨されます。

4. ターミナルでワークスペースのルートフォルダに移動します。

   cd liferay-course-building-enterprise-websites/
   

5. Liferay サーバーを起動します。

   blade server run
   

   あるいは、

   • Unixベースの:

     ./bundles/tomcat/bin/catalina.sh run
     

   • ウィンドウ:

     .\bundles\tomcat\bin\catalina.bat run
     

   サーバーの起動が完了するまでに数分かかる場合があります。

   ヒント: 起動の完了を示す org.apache.catalina.startup.Catalina.start Server startup in X milliseconds が表示されるまで待機します。

6. ブラウザで localhost:8080 にアクセスして、Liferay DXP インスタンスにアクセスします。

7. 下記の認証情報を使ってサインインします。

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

8. グローバル メニュー () を開き、 コントロール パネル タブに移動して、 検索をクリックします。

9. 「インデックスアクション」 タブに移動し、「 「すべての検索インデックスの再インデックス」」をクリックします。

10. プロンプトが表示されたら、 実行 をクリックして確認します。

11. トレーニングワークスペースに含まれるサイトやリソースをじっくりと調べます。

注意: Liferay サーバーをシャットダウンするには、Liferay を起動したターミナル ウィンドウ内で CTRL + C を押すか、次のコマンドを実行します。

• Unixベースの:

  ./bundles/tomcat/bin/shutdown.sh
  

• ウィンドウ:

  .\bundles\tomcat\bin\shutdown.bat
  

ここまでで、 これで、Clarity の公共企業 Web サイトへの貢献を開始する準備が整いました。

手動設定（オプション）

あるいは、トレーニング環境を手動で設定することもできます。

注意: このプロセスには、より技術的な手順が含まれます。 サポートが必要な場合は、お気軽に教室のトレーナーにお問い合わせください。

1. システムが次の前提条件を満たしていることを確認してください。

   • Git (macOS | Windows | Linux/Unix)
   • Java JDK 21 (macOS | Windows | Linux)
   • Blade CLI (Linux/macOS | Windows)

2. ターミナルを開き、トレーニングワークスペースをコンピューターに複製します。

   git clone https://github.com/liferay/liferay-course-building-enterprise-websites
   

   これでプロジェクトのコピーが現在のターミナルディレクトリに保存されます。

   注意: 以前にリポジトリのクローンを作成している場合は、 git pull origin mainを実行して、ワークスペースが最新であることを確認してください。

3. ターミナルでワークスペースのルートフォルダに移動します。

   cd liferay-course-building-enterprise-websites
   

4. Liferay バンドルを初期化します。

   blade server run
   

   あるいは、

   • Unixベースの:

     ./gradlew initBundle
     

   • ウィンドウ:

     .\gradlew.bat initBundle
     

   これにより、Liferay Tomcat サーバーを含む、Liferay を実行するための依存関係がダウンロードされ、構築されます。

5. 前のセクションの手順 5 ～ 11 に従います。

エクササイズ 3a：ユーザーの作成

公共企業の Web サイトを構築する際には、最終的なサイトに貢献する次の Clarity ペルソナに従います。

スクリーン名	メール	名	姓	役職
クリスチャン・カーター	[e-mail]	キリスト教徒	カーター	マーケティングコーディネーター
クララムーフィー	[e-mail]	クララ	マーフィー	マーケティングマネージャー
ハーパーロバーツ	[e-mail]	ハーパー	ロバーツ	人事スペシャリスト
イアンミラー	[e-mail]	イアン	ミラー	ITマネージャー
ウォルターダグラス	[e-mail]	ウォルター	ダグラス	Web開発者

トレーニングワークスペースには、 Christian Carter以外のすべてのユーザーがすでに含まれています。 ここで、彼を Clarity 管理者ユーザーとして手動で追加します。

注意: 実際のシナリオでは、Clarity のような大規模な組織では、アイデンティティおよびアクセス管理システム (Okta など) を使用して Liferay インスタンスにユーザーを追加するとメリットがあります。 トレーニングの目的で、不足しているユーザーを手動で作成します。

これを行うには、

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

   

   ここでは、現在のLiferayインスタンスのすべてのユーザーを表示および管理できます。 これには、Clarity Admin ユーザーに加えて、Walter Douglas、Ian Miller、Clara Murphy、Harper Roberts、およびその他の追加ユーザーも含まれます。

   

2. 新規をクリックします。

3. ユーザーのプロフィール画像を設定するには、 画像の変更 ボタン () をクリックし、 選択をクリックして、トレーニング ワークスペースの classroom-exercises/lesson-3/ フォルダーに移動し、 christian-carter.pngを選択して、 完了をクリックします。

   

4. Christian Carterの詳細を入力します。

   項目	値
   スクリーン名	christiancarter
   メールアドレス	[e-mail]
   役職	Marketing Coordinator
   名	Christian
   姓	Carter

   

5. [保存]をクリックします。

   これで、Christian Carterの追加設定オプションにアクセスできるようになりました。

6. 左側のメニューで、 パスワードをクリックします。

7. パスワードとして learn を入力してください。

   

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

ここまでで、 ClarityのLiferayインスタンスにChristian Carterが追加されました。 次に、Clarityのユーザーを整理および管理するユーザーグループを作成します。

エクササイズ3b：ユーザーグループの作成と割り当て

実際のシナリオでは、Clarityのような組織には何百人ものユーザーがおり、彼らを個別に管理することは不可能です。 ユーザー管理の負担を軽減するために、Liferayは、 ロールを関連ユーザーに簡単に割り当てるためのユーザーグループを提供します。 次のエクササイズでは、ロールをさらに詳しく見ていきます。

まず、Clarityには次のユーザーグループが必要です。

グループ名	説明
人的資源	Clarity の人事部のメンバー。
IT	Clarity の IT 部門のメンバー。
マーケティング	Clarity のマーケティング部門のメンバー。

トレーニングワークスペースには、ITと人事の両ユーザーグループが含まれます。 ここでは、Clarity の マーケティング ユーザー グループを作成し、Clarity 管理者ユーザーとして割り当てます。

これを行うには、

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

   

2. 新規をクリックします。

3. ユーザーグループの詳細を入力します。

   項目	値
   名前	Marketing
   説明	Members of the marketing department at Clarity.

   

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

   これにより、ユーザーグループが作成され、Clarityのマーケティングユーザーを追加できるようになります。

5. マーケティング ユーザー グループをクリックします。

6. 新規をクリックします。

7. Christian Carter と Clara Murphyを選択します。

   

8. 追加をクリックします。

ここまでで、 マーケティングユーザーグループに割り当てられたロールは、すべてのチームメンバーに自動的に割り当てられます。 次に、Clarityのカスタムロールを定義して割り当てる方法を説明します。

エクササイズ 3c：ユーザーロールの作成と割り当て

Clarityのペルソナは、それぞれ異なるチームに所属し、異なる責任を負っています。 この構造をモデル化するために、Liferayのロールを使うことができます。 ロールとは、Liferayインスタンス内で、ユーザーが特定のアクションを実行できるようにする権限の一覧です。

Clarity は Liferay の多くのすぐに使用できるロールを活用できますが、次のようなカスタム ロールも必要としています。

種類	タイトル	説明
標準	コンテンツマネージャー	Liferay でコンテンツを管理する人のための明確な役割。
標準	ITマネージャー	IT 部門内のマネージャーの明確な役割。
標準	Web開発者	IT 部門内のフロントエンド開発者の明確な役割。
標準	マーケティングコーディネーター	マーケティング チームの個々の貢献者の役割を明確にします。
サイト	サイトコンテンツ投稿者	Clarity サイトに貢献する人のためのサイトベースの役割。

トレーニングワークスペースには、 マーケティングコーディネーター以外のすべてのロールが含まれています。 ここでは、マーケティング コーディネーターの役割を作成し、Clarity 管理者ユーザーとして割り当てます。

まず、

1. グローバル メニュー () を開き、 コントロール パネル タブに移動して、 役割をクリックします。

2. 新規をクリックします。

3. ロールの詳細を入力します。

   項目	値
   種類	Regular
   タイトル	Marketing Coordinator
   説明	Clarity role for an individual contributor from the marketing team.
   キー	Marketing Coordinator

   

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

   これにより、ロールが作成されるので、権限を追加してユーザーに割り当てることができます。 このロールはすべてのマーケティングチームメンバーに適用する必要があるため、マーケティングユーザーグループに割り当てることができます。

5. 担当者 タブに移動し、 ユーザーグループをクリックします。

   

6. 新規をクリックします。

7. マーケティングを選択します。

   

8. 追加をクリックします。

Clarityのマーケティングユーザーにロールを作成し、割り当てました。 しかし、このロールにはまだ権限がありません。 そのため、次はロールに権限を追加します。 これにより、ClarityのWebサイトにおいて、そのロールを持つ誰もが責任を果たすことができます。

エクササイズ 3d：ロール権限の定義

権限により、Liferayインスタンスでデータにアクセスし、特定のアクションを実行することができます。 マーケティング コーディネーターの役割を作成したので、Clarity 管理者ユーザーとしての役割に関連付けられた特定の権限の追加を開始します。

このプロセス全体を通して、Christian Carter になりすまして、マーケティング コーディネーター ロールに追加の権限を付与した場合の実際の効果を確認します。

これを行うには、

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

2. Christian Carter の アクション () をクリックし、 ユーザーの偽装を選択します。

   

   新しいタブが開き、Christian Carterの権限でLiferayインスタンスを表示できるようになります。 マーケティングコーディネーターとして必要なアプリケーションやリソースにアクセスできないことに注目してください。

   

   Clarityでは、すべてのマーケティングコーディネーターがチームのアセットライブラリ内のアセットにアクセスできる必要があります。

3. Clarity Admin タブに戻り、 Roles アプリケーションに移動して、 Marketing Coordinator ロールをクリックして編集を開始します。

4. 「権限の定義」 タブに移動します。

5. 左側のメニューで、 アプリケーション メニュー → コンテンツ → アセット ライブラリに移動します。

   ヒント: このセクションをすばやく見つけるには、検索バーに「 “アセット ライブラリ” 」と入力します。

   

6. 次の権限を選択します。

   セクション	権限
   アプリケーションの権限	コントロールパネルのアクセス
   アプリケーションの権限	表示
   リソース権限 > アセットライブラリエントリ	サイトとアセットライブラリ管理者メニューを見る

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

   これにより、マーケティングコーディネーターロールの権限が更新されます。

   注意: Liferay は、 コントロールパネルでのアクセス 権限を付与すると、自動的に ポータル: コントロールパネル メニューの表示 権限を割り当てます。

8. Christian Carterで代理ログインするタブを更新します。

   これで、グローバル メニュー () のアセット ライブラリ アプリケーションにアクセスできるようになりました。

   

9. アセット ライブラリ アプリケーションに移動します。

   Christian Carter はアプリケーションにアクセスできますが、トレーニング ワークスペースに含まれるライブラリを表示したりアクセスしたりすることはできません。

   • エラーページ
   • 人事
   • リーダーシップ
   • 法律上の
   • マーケティング資産
   • 商品画像

   Christian Carter と他のマーケティング チーム メンバーはマーケティング アセット ライブラリにアクセスする必要があるため、マーケティング ユーザー グループを使用してメンバーシップを付与しましょう。

10. ［Clarity管理者］タブに戻ります。

11. グローバル メニュー () で、 アセット ライブラリ に移動し、 マーケティング アセットをクリックします。

12. メンバーシップ をクリックし、 ユーザー グループ タブに移動します。

13. 新規をクリックします。

14. マーケティング を選択し、 完了をクリックします。

    

15. Christian Carterで代理ログインするタブを更新します。

    現在、マーケティング アセット ライブラリにはアクセスできますが、ライブラリのアプリケーションやデータにはまだアクセスできません。 これを解決するには、デフォルトのアセット ライブラリ管理者ロールをマーケティング ユーザー グループに割り当てます。

16. ［Clarity管理者］タブに戻ります。

17. マーケティング ユーザー グループの アクション () をクリックし、 ロールの割り当てを選択します。

    

    ここで、利用可能なアセット ライブラリ ロールを選択できます。 これらのロールは、個々のライブラリに対する権限を付与します。

18. アセットライブラリ管理者 ロールを選択し、 完了をクリックします。

19. Christian Carterで代理ログインするタブを更新します。

    これで、彼は図書館のアプリケーションにアクセスできるようになりました。

    

    Christian Carter はライブラリのアプリケーションにアクセスできますが、責任を果たすために必要なアプリケーション権限がありません (例: ドキュメントのアップロード、記事の編集)。 これらの権限をマーケティング コーディネーターのロールに追加しましょう。

20. Clarity Admin タブに戻り、 Roles アプリケーションに移動して、 Marketing Coordinator ロールをクリックして編集を開始します。

21. 「権限の定義」 タブに移動します。

22. 左側のメニューで、 サイトとアセット ライブラリの管理 → コンテンツ & データ → ドキュメントとメディアに移動します。

    注意: “ドキュメントとメディアを検索すると、” 同じ名前のオプションが 2 つ表示されます。 コンテンツ & データの下のオプションを選択します。

23. 次の権限を選択します。

    セクション	権限
    通常権限	サイトとアセットライブラリ管理にアクセス
    通常権限	表示
    リソース権限 > ドキュメント	ドキュメントを追加する
    リソース権限 > ドキュメント	フォルダを追加する
    リソース権限 > ドキュメント	更新
    リソース権限 > ドキュメント	表示
    リソース権限 > ドキュメントフォルダ	表示

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

25. 左側のメニューで、 サイトとアセット ライブラリの管理 → コンテンツ & データ → Web コンテンツに移動します。

    注意: “Web コンテンツを検索すると、” 同じ名前のオプションが 2 つ表示されます。 コンテンツ & データの下のオプションを選択します。

26. 次の権限を選択します。

    セクション	権限
    通常権限	サイトとアセットライブラリ管理にアクセス
    通常権限	表示
    リソース権限 > Webコンテンツ	フォルダを追加する
    リソース権限 > Webコンテンツ	メタデータセットの追加
    リソース権限 > Webコンテンツ	テンプレートを追加する
    リソース権限 > Webコンテンツ	Webコンテンツを追加する
    リソース権限 > Webコンテンツ	更新
    リソース権限 > Webコンテンツ	表示
    リソース権限 > Webコンテンツ記事	更新
    リソース権限 > Webコンテンツ構造	表示
    リソース権限 > Webコンテンツテンプレート	表示

27. [保存]をクリックします。

28. 左側のメニューで、 サイトとアセット ライブラリの管理 → 分類 → カテゴリに移動します。

29. 次の権限を選択します。

    セクション	権限
    リソース権限 > 資産カテゴリ	カテゴリーを追加
    リソース権限 > 資産カテゴリ	ボキャブラリを追加する

30. Christian Carterで代理ログインするタブを更新します。

    彼は、自分の職務に必要なすべてのコンテンツ アクション (Web コンテンツの作成と編集など) を実行できるようになりました。 次に、マーケティングコーディネーターにはサイトページを更新する機能が必要です。

31. ［Clarity管理者］タブに戻ります。

32. 左側のメニューで、 サイトとアセット ライブラリの管理 → サイト ビルダー → ページに移動します。

    

33. この権限を選択します。

    セクション	権限
    リソース権限 > ページ	更新

34. [保存]をクリックします。

35. Christian Carterで代理ログインするタブを更新します。

    サイトページの編集ツールにアクセスできるようになったことに注目してください。

    

これで、 マーケティングユーザーグループの全メンバーに正しい基本権限が付与されました。 追加の役割を割り当てることで、Clarity はユーザーが必要とするアプリケーションとデータにアクセスできるようにすることができます。

次に、マネージャー ロールを作成して、ロールとユーザー権限について詳しく学習することができます。 それ以外の場合は、レッスン 4 に進み、サイトの作成および構成の方法を確認してください。

ボーナス演習: マネージャー権限の微調整

チャレンジ:

マーケティング チームのメンバーを表示および追加する権限を持つ管理グループを設定します。

要件:

• マーケティング マネージャー ユーザーのユーザー グループとロール。
• マネージャー ユーザーは、管理者またはサイト管理者の役割を保持することはできません。
• マネージャー ユーザーは、マーケティング ユーザー グループとのみ対話できます。

成功基準:

割り当てられたマネージャー ユーザーは、ユーザー グループのメンバーを表示し、新しいメンバーを追加できます。

エクササイズ 4a：サイトの作成

サイトを作成する際、ゼロから始めることも、利用可能なテンプレートやイニシャライザーから選択することもできます。 トレーニングワークスペースには、あらかじめ構築されたサイト、Clarityの公開エンタープライズWebサイトが含まれています。 ですが、サイト作成 プロセスがどのようなものかを見るために、Ian Millerとして新しいテストサイトを作成してみましょう。

これを行うには、

1. ClarityのITマネージャー、Ian Millerとしてサインインします。

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

   注意: これまで、Liferay インスタンスを完全に制御できる Clarity の管理者ユーザーを使用してきました。 実際には、最適なセキュリティを確保するために、このような高レベルのアカウントの使用を制限するのが最善です。

2. グローバル メニュー () を開き、 コントロール パネル タブに移動して、 サイトをクリックします。

3. 新規をクリックします。

   ここでは、利用可能なテンプレートとイニシャライザーから選択することができます。

4. 空白のサイト テンプレートを選択します。

5. 名前に Clarity Distributor Portal と入力します。

6. 追加をクリックします。

   これにより、新しい空のサイトが作成され、その設定ページにリダイレクトされます。

Clarity はこのサイトを使用して、販売代理店に製品を販売するためのチャネルを構築できます。 しかし、このコースでは、 Clarity Public Enterprise ウェブサイトの最適化に重点を置きます。

次に、サイト メンバーシップと、ユーザーにサイト固有のロールを付与する方法について学習します。

エクササイズ 4b: サイトへのユーザーの追加

デフォルトでは、公開サイトを作成すると、認証されていないすべての訪問者がその公開ページとコンテンツを閲覧できます。 認証されたサイトメンバーには、サイトスコープのロールを使用して追加の権限を付与できます。 トレーニングワークスペースのほとんどのユーザーはすでにエンタープライズWebサイトのメンバーですが、Christian CarterとHarper Robertはそうではありません。

ここでは、Ian Millerとしてサイトに追加します。

これを行うには、

1. グローバル メニュー () を開き、右側のパネルで Clarity Public Enterprise Website を選択します。

2. サイト メニュー () を開き、 ユーザーを展開して、 メンバーシップを選択します。

3. 新規をクリックします。

4. Christian Carter と Harper Robertsを選択します。

5. 完了をクリックします。

   ここまでで、 これで両方のユーザーがサイトのメンバーになり、サイトロールを割り当てることができます。

   

6. Christian Carter の アクション () をクリックし、 ロールの割り当てを選択します。

7. サイト コンテンツ投稿者 ロールを選択し、 完了をクリックします。

   これにより、Christian CarterはClarityのWebサイトのコンテンツに貢献できます。

8. 手順 6 ～ 7 を繰り返して、Harper Roberts にもサイト コンテンツ投稿者の役割を割り当てます。

次に、ClarityのエンタープライズWebサイトを設定し、公開され、ターゲットオーディエンスがアクセスできるようにします。

エクササイズ 4c：サイトの構成

前述したように、Clarityのサイトの目的は、ブランド認知度を高め、製品を紹介し、訪問者を顧客に変えることです。 この目的のために、Clarityは以下を要望しています。

• ゲストユーザーが自由にサイトメンバーとして登録できるようにすること
• サイトのバーチャルホストを設定すること
• 言語設定を構成します。
• Liferay の OOTB アクセシビリティ ツールを有効にします。

ここでは、ClarityのITマネージャー、Ian Millerとしてこれらの設定を行います。

これを行うには、

1. Clarity Public Enterprise ウェブサイトにアクセスしていることを確認してください。

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

   

3. サイト設定 → 詳細に移動します。

4. 次の説明を追加します。

   Elevate Your Brand with Premium Eyewear: Discover premium craftsmanship, innovative lenses, and designs that help your brand stand out.
   

5. メンバーシップの種類として、 オープンを選択します。

   これにより、ゲストは自由にサイトのメンバーとなり、サイトの公開ページやコンテンツにアクセスできるようになります。

   

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

7. サイト URL タブに移動します。

8. フレンドリーURLを /clarityに設定します。

   この URL はサイト ページで使用され、 http://localhost:8080/webに追加されます。

9. サイトのデフォルト言語の仮想ホストを www.clarityvisionsolutions.comに設定します。

   仮想ホストを設定すると、ドメイン名 (例: www.helloworld.com) がサイトに接続されます。

   注意: Liferay で仮想ホストを設定する前に、プロバイダーに連絡して、Liferay DXP インスタンスの IP アドレスを指すように DNS 名を設定する必要があります。

10. 追加 () をクリックして、URL www.solucionesdeclaridad.comのスペイン語用仮想ホストを追加します。

    こうすることで、スペイン語圏のオーディエンスはローカライズされたドメイン名を使ってサイトにアクセスすることができます。

    

11. [保存]をクリックします。

12. サイト設定 ページに戻り、 ローカリゼーションに進みます。

13. カスタムのデフォルト言語を定義 をクリックし、 右矢印 ボタン () を使用して、英語とスペイン語以外のすべての言語を削除します。

    現時点では、Clarityは英語（米国）とスペイン語（スペイン）のコンテンツのローカライゼーションにのみ対応したいと考えています。

    ヒント: 一度に複数の言語を選択するには、Ctrl キーを押し続けます。

    

14. [保存]をクリックします。

15. サイト設定 ページに戻り、 アクセシビリティに進みます。

16. アクセシビリティメニューを有効にするには、チェックボックスをオンにします。

    つまり、ユーザーはTabキーを2回押してEnterキーを押すと、アクセシビリティ設定のメニューにアクセスできます。

    

17. [保存]をクリックします。

これらの構成を組み合わせることで、Clarity のエンタープライズ Web サイトは、その本来の目的である、世界中のユーザーに製品を宣伝する目的を達成できるようになります。 Liferayは、クッキー処理、セッションタイムアウト、SEOなど、他にも多くのサイト設定を提供します。 現時点で、これらの構成はClarityの基本的なニーズを満たしています。

次に進む前に、Clarityのインスタンスのデフォルトのホームページとランディングページを更新しましょう。

インスタンスのデフォルトホームページとランディングページの設定

現在、 http://localhost:8080/にアクセスすると、Clarity Public Enterprise Website ではなく、デフォルトの Clarity Vision Solutions サイトに移動します。 ここでは、Clarity管理者ユーザーとしてインスタンスのデフォルトのホームページとランディングページを更新します。

これを行うには、

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

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

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

3. プラットフォームの下で、 インスタンス構成 をクリックし、 全般 タブに移動します。

4. ホーム URL に /web/clarityと入力します。

   これは、 http://localhost:8080/にアクセスしたときに表示されるデフォルトのページを設定します。

5. デフォルトのランディングページには、 /web/clarityと入力します。

   これは、ログイン後にユーザーがリダイレクトされるデフォルトのページを指定します。

6. デフォルトのログアウトページには、 /web/clarityと入力します。

   これは、サインアウト後にユーザーがリダイレクトされるデフォルトのページを定義します。

   

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

ここまでで、 これで、ユーザーが http://localhost:8080/ にアクセスしてログアウトまたはログインすると、Clarity のパブリック エンタープライズ Web サイトのホームページに誘導されるようになりました。

次に、Analytics Cloud がClarityのような企業のデジタル戦略を強化し、データ主導のワークフローをサポートする方法について説明します。

エクササイズ 5：Analytics Cloud

Liferay Analytics Cloudは、Liferay DXPと統合し、デジタルエクスペリエンスを最適化するためのユーザー行動のインサイトを得るためのクラウドベースの分析サービスです。 これにより、Clarityのような企業はデジタル戦略を強化し、 データ主導のワークフローをサポートすることができます。

このトレーニングにはAnalytics Cloudのエクササイズは含まれていません。

次に、ClarityのエンタープライズWebサイトストラクチャーの実装を完了します。

エクササイズ 6a：コンテントページの追加

前述したように、Clarityはこのページ階層をエンタープライズWebサイトに導入したいと考えています。

このストラクチャーのある部分はコンテントページとして実装する必要があり、他の部分は表示ページやユーティリティページとして実装する必要があります。 トレーニング ワークスペースにはこれらのページのほとんどが含まれていますが、 FAQ コンテンツ ページと リーダーシップ プロファイル 表示ページは含まれていません。

ここでは、ClarityのWeb開発者であるWalter Douglasとして、不足しているコンテントページを追加します。

FAQコンテントページを追加するには、

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

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

   注: Web 開発者として、Walter Douglas はサイト管理者の役割を持ち、エンタープライズ Web サイト内のほとんどのアクションを実行します。

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

3. 静的ページタブで、 新規をクリックします。

4. プライマリマスターページ テンプレートを選択します。

   注意: これは、トレーニング ワークスペースによって提供される不完全なテンプレートを適用します。 このテンプレートは後のエクササイズで完成させます。

   

5. 名前に FAQ と入力し、 追加をクリックします。

   これにより、空白のコンテンツ ページが作成され、Liferay のページ エディター UI に移動します。 ここでは、すべてのページ構築ツールと設定オプションにアクセスできます。

6. 今のところ、ページを空白のままにして、 公開をクリックします。

   これは、Clarityのサイト構成に必要な最終的なコンテントページです。 しかし、希望する階層を作るためには、いくつかのページを再編成する必要があります。

7. 製品詳細 を 製品リスト にドラッグ アンド ドロップし、次に 製品リスト を 製品にドラッグ アンド ドロップします。

   これにより、これらのページ間に階層関係が作成されます。

   

8. 求人 を キャリアにドラッグ アンド ドロップします。

これらのページが完成したら、Clarityのサイトストラクチャーの最後の部分である、リーダーシッププロフィールの表示ページを作成しましょう。

エクササイズ 6b：表示ページテンプレートの追加

表示ページテンプレートは、専用URLにコンテンツを表示するための構造を定義します。 コンテンツアイテムを作成またはアップロードすると、Liferayはそれにアクセスするための一意のフレンドリURLを生成します。 ただし、このURLを使ってコンテンツを表示できるのは、コンテンツを表示するためのテンプレートを1つ作成した場合のみです。 表示ページは、コンテントページと同じUIと 機能を使用して構築されます。

トレーニング ワークスペースには、 リーダーシップ プロファイル テンプレートを除く、必要な表示ページがすべて含まれています。 ここで、この不足しているテンプレートをWalter Douglasとして追加します。

これを行うには、

1. サイト メニュー () を開き、 デザインを展開して、 ページ テンプレートをクリックします。

2. [ページ テンプレートの表示] タブに移動します。

3. 新規 をクリックし、 表示ページ テンプレートを選択します。

4. 空白を選択します。

5. 名前に「 リーダーシップ プロファイル」と入力します。

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

7. サブタイプには、 リーダーシップ プロファイルを選択します。

   注: リーダーシップ プロファイルのサブタイプは、トレーニング ワークスペースによって提供されました。 Webコンテンツタイプについては、後ほど詳しく学習します。

   

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

   これにより、選択したコンテンツ タイプにリンクされた空白の表示ページ テンプレートが作成されます。 各テンプレートには、コンテントページと同じページ構築ツールと設定オプションがあります。

9. 今のところ、テンプレートを空白のままにして、 公開をクリックします。

10. リーダーシップ プロファイル テンプレートの アクション () をクリックし、 デフォルトとしてマークを選択します。

    これにより、リーダーシッププロフィールの記事にはこのテンプレートが使用されるようになります。

    

現時点で、このテンプレートは空白のままにしておきますが、後ほど再度取り上げます。 Clarityのページ構成が完成したので、Clarityのページのヘッダーデザインを完了しましょう。

エクササイズ 6c：Clarityのマスターページの設計

Liferayでは、ページのヘッダーとフッターをデザインするには、マスターページテンプレートを作成します。 これらのテンプレートは、ページと同じツールと要素を使ってデザインされています。

トレーニング ワークスペースには、 プライマリ マスター ページ テンプレートが用意されています。 このテンプレートにはフッターが含まれていますが、ヘッダーは含まれていません。 ここで、Walter Douglas としてヘッダーを追加します。

これを行うには、

1. ページ テンプレート アプリケーションで、 マスター タブに移動します。

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

3. 左側のパネルで フラグメントとウィジェット タブ () を開きます。

4. コンテナ フラグメントをテンプレートの上部にドラッグ アンド ドロップします。 このコンテナはページヘッダー用です。

   注意: ページをデザインするときは、常に要素を独自のコンテナーに配置することをお勧めします。 これにより、スタイルをよりコントロールできるようになります。

5. サイドパネルの ブラウザ タブ () に移動し、コンテナーの名前をダブルクリックして、名前を ページ ヘッダーに変更します。

   注意: フラグメントに名前を付けると、JavaScript および CSS で使用できるカスタム data-name 属性が <div> に追加されます。 これにより、複雑なページ構造を明確にし、サイトをよりコントロールできるようになります。

6. ページ ヘッダー コンテナーに 2 つの個別のコンテナーを追加し、 ヘッダー アナウンスメント バー と ヘッダー ナビゲーション バーという名前を付けます。

   • ヘッダーアナウンスバー: このコンテナーは、Clarity のアナウンスを表示するためのものです。

   • ヘッダー ナビゲーション バー: このコンテナーには、Clarity のロゴ、メイン ナビゲーション メニュー、検索バー、ユーザー メニューなどの重要な要素が配置されます。

   ヒント: 編集中にページ要素を複製するには、CTRL + D を押します。

   

7. ヘッダーアナウンスバー を選択し、構成サイドパネルで次の設定を構成します。

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

   

   注意: 緑色のボックスを使用してパディングを追加します。 これにより、コンテナとコンテンツの間にスペースが追加されます。

   ページ要素をコンテナーに追加すると、これらの設定が有効になります。 今のところ、このコンテナーを空のままにして、表示を切り替えます ()。後の演習で再度これを確認します。

8. ヘッダー ナビゲーション バー コンテナーを選択し、次の設定を構成します。

   タブ	設定	値
   共通	コンテナの幅	固定幅
   スタイル	間隔 > パディング	スペーサー3（上下） スペーサー6（左右）

   

9. ヘッダー ナビゲーション バー コンテナーに グリッド 要素を追加します。

10. 仕切りを外側に1スペースずつドラッグして、中央のモジュールを広げます。

    

11. グリッドを選択し、下記の設定を行います。

    タブ	設定	値
    共通	垂直位置	中央
    共通	オーバーフロー	閲覧可能

12. 各グリッド領域にコンテナを追加し、Header Branding、Header Navigation、Header User Actionsという名前を付けます。

    • ヘッダー ブランディング: このコンテナーは Clarity のロゴ用です。

    • ヘッダーナビゲーション: このコンテナーはページナビゲーションメニュー用です。

    • ヘッダー ユーザー アクション: このコンテナーは検索バーとユーザー ログイン/メニュー用です。

    

13. ヘッダー ブランディング コンテナーを選択し、次の設定を構成します。

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

14. ヘッダーナビゲーション コンテナを選択し、次の設定を構成します。

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

15. ヘッダー ユーザー アクション コンテナーを選択し、次の設定を構成します。

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

16. 次のフラグメントをコンテナに追加します。

    コンテナ	フラグメント
    ヘッダーブランディング	画像
    ヘッダーナビゲーション	メニュー表示
    ヘッダーユーザーアクション	ログインとユーザーメニュー

    注意: “ログインとユーザー メニュー” フラグメントは、Clarity コンポーネント フラグメント セットで提供されるカスタム フラグメントです。 後ほど、ヘッダーの検索ボタン用のカスタムフラグメントを作成します。

現時点で、これでプライマリマスターページのワイヤーフレームは完了です。 後ほどもう一度このメニューを更新し、検索バーとログインボタンの両方を追加します。 次に、テンプレートの許可されたフラグメントを設定します。

エクササイズ 6d：許可されたフラグメントの設定

マスターページテンプレートを編集するとき、 テンプレートを使用するページで許可されるフラグメントを設定できます。 これにより、デザインの一貫性が確保され、ユーザーがテンプレートを使用するページに誤った要素を追加するのを防ぐことができます。

ユーザーがプライマリマスターページテンプレートを使用して、ページに適切なフラグメントのみを追加できるように、Clarity は利用可能なフラグメントを制限したいと考えています。 ここでは、Walter Douglasとして、プライマリマスターページテンプレートに許可されたフラグメントを設定します。

これを行うには、

1. プライマリ マスター ページ テンプレートの編集中に、ページ ボディ コンテナーの [許可されたフラグメントの構成] をクリックします。

2. これらのフラグメントのチェックを外して、ユーザーがテンプレートを使ってページにフラグメントを追加できないようにします。

   • アカウント（フラグメントセット）
   • カート（フラグメントセット）
   • フッター（フラグメントセット）
   • ナビゲーションバー（フラグメントセット）
   • ナレッジベースナビゲーション（フラグメント）
   • カートに追加 (フラグメント)

   

3. [保存]をクリックします。

4. マスターの公開をクリックします。

5. 次の内容が書かれたポップアップで OK をクリックします。

   このマスターに加えられた変更は、すべてのページ テンプレート、表示ページ テンプレート、およびそれを使用するページに伝播されます。 本当に続行しますか?

テンプレートがページに適用されると、ユーザーは許可されたフラグメントだけをページに追加できるようになります。 ただし、テンプレートをページに適用する前に、Clarity がサインイン ページとユーティリティ ページに使用するセカンダリ マスター ページを作成しましょう。

エクササイズ 6e：セカンダリマスターページの作成

Clarityには、お知らせバナーや詳細なフッターを含むべきではないページのための簡素化されたマスターページが必要です。 ここでは、Walter Douglasとしてそのテンプレートを作成します。

これを行うには、

1. ページ テンプレート アプリケーションの [マスター] タブで、プライマリ マスター ページの [アクション] () をクリックし、 [コピーの作成] → [マスター ページ]を選択します。

   

2. コピーの アクション () をクリックし、 名前の変更を選択します。

3. セカンダリマスターページ を入力し、 保存をクリックします。

4. テンプレートの編集を開始し、次のコンテナを削除します。

   • ヘッダーアナウンスバー
   • フッターのブランディング
   • Footer Navigation

   

5. マスターの公開をクリックします。

ここまでで、 Clarityには、現在プライマリとセカンダリのマスターページテンプレートがあります。 これで両方のマスターページをそれぞれのページに適用できるようになりました。

エクササイズ6f：マスターページの適用

コンテントページや表示ページテンプレートを作成する際には、マスターページを選択する必要があります。 トレーニングワークスペースのほとんどのページでは、すでに正しいマスターページが使用されていますが、そうでないページもあります。

ここでは、これらのページを構成し、Walter Douglasとして正しいマスターページを割り当てます。

これを行うには、

1. 下記ページのうちの1つの編集を開始します。

   • ホーム（コンテンツページ）
   • サインイン（コンテンツページ）
   • リーダーシップ プロファイル (表示ページ テンプレート)

   表示ページ テンプレートにアクセスするには、 サイト メニュー () を開き、 デザインを展開し、 ページ テンプレート をクリックして、 表示ページ テンプレート タブに移動します。

2. 左側のパネルの ページ デザイン オプション タブ () に移動します。

3. 適切な マスターページを選択します。

   • ホーム: プライマリマスターページ
   • サインイン: セカンダリマスターページ
   • リーダーシッププロフィール: セカンダリマスターページ

   

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

5. マスターページの適用が完了するまで、この作業を繰り返します。

完成したら、各ページは正しいマスターページテンプレートにリンクされているはずです。 これで、テンプレートに加えられた変更は、そのテンプレートを使用している各ページに自動的に適用されます。

次に、カスタム ナビゲーション メニューを作成し、これらのマスター ページ テンプレートに使用して、必要なページのみが含まれるようにします。

エクササイズ 7a：ナビゲーションメニューの作成

ナビゲーションは、明確で直感的なユーザー エクスペリエンスを設計する上で不可欠な要素です。 Liferayでは、ナビゲーションを設定するにはメニューを作成し、ウィジェットやフラグメントを使ってページに追加します。

Clarityが必要とするカスタム ナビゲーションメニューのほとんどは、トレーニングワークスペースに用意されています。 しかし、ページヘッダーには次のページだけを含むメニューが必要です：商品、会社概要、ブログ、FAQ、採用情報、お問い合わせ

ここでは、Walter Douglasとしてカスタムナビゲーションメニューを作成します。

これを行うには、

1. サイト メニュー () を開き、 サイト ビルダーを展開して、 ナビゲーション メニューをクリックします。

2. 新規をクリックします。

3. 名前に「 ヘッダーページメニュー」と入力します。

   

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

   これにより、空白のメニューが作成され、その編集ページが表示されます。 これでページを追加できるようになりました。

5. 追加をクリックします。

   メニューに追加できる利用可能な項目タイプの一覧が表示されます。

6. ページ アイテム タイプを選択します。

   

7. 以下のページを確認してください:

   • 私たちについて
   • ブログ
   • キャリア
   • お問い合わせ
   • FAQ
   • プロダクト

   

8. をクリックしてを選択します。

   これにより、メニューへの変更が保存されます。

9. メニュー項目の 1 つで アクション () をクリックし、 情報の表示を選択します。

   サイドパネルが開き、表示名を変更することができます。

   

10. 次の順序でページをドラッグアンドドロップします。

    • プロダクト
    • 私たちについて
    • ブログ
    • FAQ
    • キャリア
    • お問い合わせ

    これらの変更は自動的に保存されるので、メニューはすぐに使用できるようになります。

    ヘッダーページのメニューが定義されたので、各マスターページのヘッダーのメニュー表示フラグメントを更新して、それを使用できるようになります。 しかし、Clarityのマスターページに戻る前に、フッターのリソースメニューを更新して、最近作成されたFAQページを含めましょう。

11. ナビゲーション メニュー 概要ページに戻ります。

12. フッター リソース メニューを選択します。

13. 追加をクリックします。

14. ページ アイテム タイプを選択します。

15. FAQを確認してください。

16. をクリックしてを選択します。

Clarityのナビゲーションメニューが完成したので、Clarityのマスターページテンプレートに戻り、正しいナビゲーションメニューを使用するようにヘッダーメニュー表示を更新します。

エクササイズ 7b：メニュー表示フラグメントの更新

ページにメニュー表示フラグメントまたはウィジェットを追加すると、どのメニューを表示するか決定できます。 ここでは、Walter Douglasとして、Clarityのマスターページのヘッダーメニュー表示フラグメントを更新します。

これを行うには、

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

2. ヘッダーの メニュー表示 フラグメントを選択します。

3. 構成サイドパネルで、メニューのソースの ソースの変更 () をクリックします。

4. ヘッダー ページ メニュー をクリックし、 このレベルを選択をクリックします。

   

5. マスターの公開をクリックします。

6. このプロセスを繰り返して、セカンダリ マスター ページのメニュー表示フラグメントを更新します。

完了したら、ホームページに移動して、テンプレートへの変更が接続されたページに自動的に適用されたかを確認します。

Clarityのマスターページはほぼ完成しました。 ここで必要なのは、ヘッダーに追加するカスタム検索ボタンフラグメントだけです。

エクササイズ 8a：カスタムフラグメントの作成

ページフラグメントは、ページレイアウトのデザイン、コンテンツの表示、フォームの構築などに使用する、再利用可能なドラッグアンドドロップ要素です。 フラグメントはHTML、CSSおよびJavaScriptを使用して構築されており、ページに構造と機能の両方を提供できます。 Liferayはすぐに使える様々なフラグメントを提供しますが、独自のフラグメントを開発することもできます。

トレーニングワークスペースには、Clarityコンポーネントと呼ばれるカスタムフラグメントのセットが含まれています。 このフラグメントには Clarity に必要なもののほとんどが含まれていますが、カスタム検索ボタン フラグメントも必要です。 ここではWalter Douglasとして作成します。

これを行うには、

1. サイト メニュー () を開き、 デザインを展開して、 フラグメントをクリックします。

2. フラグメント セットの下で、 Clarity Componentsをクリックします。

3. 新規をクリックし、 基本フラグメントを選択して、 次へをクリックします。

4. 検索ボタン と入力し、 追加をクリックします。

5. 構成 タブに移動します。

6. トレーニング ワークスペースで、 classroom-exercises/lesson-8/search-button-configuration.json ファイルを開き、その内容をコピーします。

7. 検索ボタンフラグメントに戻り、コピーしたコンテンツをエディターに貼り付けます。

   

   これはフラグメントの 2 つの構成オプションを定義します: iconName と iconSize。 これらのオプションはフラグメントのコード内で参照できます。

8. トレーニング ワークスペースで、 classroom-exercises/lesson-8//search-button.ftl ファイルを開き、その内容をコピーします。

9. 検索ボタンフラグメントに戻り、 コード タブに移動して、HTML ウィンドウ コードを以前にコピーしたコンテンツに置き換えます。

   

   前の手順で定義した構成オプションへの参照が含まれていることに注意してください: configuration.iconSize および configuration.iconName。 この方法では、フラグメントをページに追加するときに、アイコンの名前とサイズを設定できます。

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

これで、このフラグメントをClarityのマスターページに追加できるようになりました。 ここで事前に、以下のエクササイズで使う追加フラグメントをインポートしておきましょう。

エクササイズ 8b：フラグメントのインポート

フラグメントを使ってページを作成する場合、任意のコンテナとその内容を構成として保存し、再利用することができます。 Clarityのチームは、ホームページ、FAQページ、リーダーシッププロフィール表示ページのワイヤーフレームを作成するためのフラグメントを提供してくれました。 これらのフラグメントを使用するには、まずWalter Douglasとしてサイトにインポートする必要があります。

フラグメントアプリケーションでは、

1. フラグメント セットの下で、 Clarity Page Compositionsをクリックします。

2. フラグメント セットの アクション () をクリックし、 インポートを選択します。

   

3. ファイルの選択をクリックし、トレーニング ワークスペースの classroom-exercises/lesson-8/ フォルダーに移動して、 page-composition-faq.zip ファイルを選択します。

4. インポートをクリックします。

5. 完了したら、 完了 をクリックします。

   これにより、現在のフラグメントセットにFAQページ構成が追加されます。 これで表示ページの構成をインポートできます。

6. 上記の手順を繰り返して、これらのコンポジションをインポートします。

   フラグメントセット	ファイル
   明瞭なページ構成	page-composition-home.zip
   明瞭な表示構成	display-composition-leadership-profile.zip

ここまでで、 Clarityのカスタムフラグメントを作成してインポートしたので、ページに追加できます。

エクササイズ 8c：マスターページへのカスタムフラグメントの追加

検索ボタンフラグメントを作成したら、Walter Douglasとしてプライマリとセカンダリのマスターページに追加します。

これを行うには、

1. ページ テンプレート アプリケーションを開き、 プライマリ マスター ページの編集を開始します。

2. 検索ボタン フラグメントをヘッダー ユーザー アクション コンテナーに追加します。

   

3. ブラウザのサイドパネル () で、検索ボタンフラグメントの リンク サブ要素を選択します。

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

   タブ	設定	値
   リンク	リンク	ページ
   リンク	ページ	検索

   現在、ユーザーがボタンをクリックすると、Clarityの検索ページに誘導されます。

5. マスターの公開をクリックします。

6. ポップアップで OK をクリックします。

7. これらの手順を繰り返して、 セカンダリ マスター ページを更新します。

ここまでで、 次に、インポートしたフラグメントの構成をClarityのページに追加しましょう。

エクササイズ 8d：ページへのフラグメント構成の追加

フラグメント構成は、フラグメントコンテナ内に保存されたページ要素の再利用可能な配置です。 サイトページ間でレイアウトをすばやく複製して、開発を加速し、より 一貫性のあるデザインを実現することができます。

ここでは、Walter Douglasとして、フラグメント構成を対応するページに追加します。

これを行うには、

1. 次のいずれかのページまたは表示ページの編集を開始します。

   • ホーム（コンテンツページ）
   • FAQ（コンテンツページ）
   • リーダーシップ プロファイル (表示ページ テンプレート)

2. 対応するフラグメント構成をページの中央のコンテンツ領域にドラッグアンドドロップします。

   注意: ホーム ページの場合、フラグメント構成を追加する前に、デフォルトのコンテンツを削除します。

   

3. 公開をクリックします。

4. 他のページへのページ構成の追加が完了するまで、このプロセスを繰り返します。

これで、 Clarityのページのワイヤーフレームが完成しました。 次に、Clarityのブランディングをサイトに適用します。

ボーナス演習: ログインボタンフラグメントの URL を動的にする

チャレンジ:

ログインとユーザー アクションのフラグメントを変更して、エディターがログイン ボタンの値をハードコーディングするのではなく、ログイン ボタンのターゲット URL を構成できるようにします。

要件:

• URL フラグメント構成 を使用して、ログイン ボタンの href 属性を設定します。

成功基準:

フラグメントを含むページを編集するときに、構成サイド パネルからフラグメントのログイン URL を設定できます。

エクササイズ 8e：Clarityのデフォルトテーマ、お気に入りアイコン、ロゴの更新

Liferayは、テクニカルユーザーと非テクニカルユーザーの両方に強力なスタイリングツールを提供し、ウェブサイト全体の一貫したビジュアルアイデンティティとユーザーエクスペリエンスを保証します。 ここまでは、クラシックテーマのデフォルトの スタイリングオプションを使用してきました。

ここでは、Global CSS クライアント拡張機能を使用して、これらのオプションを Walter Douglas として上書きします。 また、サイトのお気に入りアイコンとロゴを更新し、プラットフォームがClarityのブランディングとより一致するようにします。

これを行うには、

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

2. アプリケーション バーで アクション () をクリックし、 構成を選択します。

3. 現在のテーマの変更 をクリックし、 方言を選択します。

   

   注: テーマは、配色、書体、間隔、その他のスタイル オプションなど、Web サイトの基本的な外観と雰囲気を決定します。 これらは、 、スタイルブックやフロントエンドのクライアント拡張を使った追加設定の出発点となります。

4. [基本設定] で、 [ファビコンを選択] () をクリックし、 [リポジトリ フォルダ]/classroom-exercises/lesson-8/ フォルダにある clarity-favicon.svg ファイルを追加します。

   注: ファビコンはブラウザのタブでサイトを識別するために使用される画像です。

5. ロゴの変更 () をクリックし、 clarity-logo-c.png ファイルを選択します。

   注: ロゴは、Liferay UI でサイトを識別するために使用される画像を決定します。

   

6. 一番下までスクロールして、 保存をクリックします。

サイトのページを探索し、これらの設定がサイトにどのような影響を与えたかを確認できるようになりました。 次に、ダイアレクトテーマの上にClarityのスタイルを適用するクライアント拡張をデプロイします。

演習8f: ClarityのグローバルCSSクライアント拡張機能の導入と適用

Liferayは、Webサイトの外観をカスタマイズするための柔軟で安全な方法を提供するフロントエンドクライアント拡張を提供しています。 これらを使用すると、デザインアセットをサイトページに直接挿入できるため、Liferay のコアコードを変更することなく、希望する外観と操作性を実現できます。

トレーニング ワークスペースには、現在のテーマのスタイルを拡張するためのグローバル CSS クライアント拡張機能が含まれています。 ここではWalter Douglasとしてデプロイします。

Clarity のグローバル CSS クライアント拡張機能を展開するには:

1. 新しいターミナル ウィンドウを開き、トレーニング ワークスペースの client-extensions/clarity-global-css/ フォルダーに移動します。

2. 以下のコマンドを実行して、クライアント拡張をビルドし、デプロイします。

   ブレード:

   blade gw clean deploy
   

   Unixベースのシステム:

   ../../gradlew clean deploy
   

   ウィンドウ:

   ..\..\gradlew.bat clean deploy
   

3. インスタンスのログでコマンドが正常に実行されていることを確認します。

   2024-05-09 16:17:41.233 INFO  [fileinstall-directory-watcher][BundleStartStopLogger:68] STARTED clarityglobalcss_7.4.13 [1449]
   

   クライアント拡張をデプロイしたら、それをページに適用することができます。

4. Clarity のサイトで、 サイト メニュー () を開き、 サイト ビルダーを展開して、 ページをクリックします。

5. アプリケーション バーで アクション () をクリックし、 構成を選択します。

6. 「カスタマイズ」の下で、「CSS クライアント拡張機能」の プラス () をクリックし、「 Clarity グローバル CSS」を選択します。

   

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

   これにより、CSS スタイルが Clarity のすべてのページに適用されます。

   注意: クライアント拡張機能を適用した後、ページが意図したとおりに表示されるようにブラウザのキャッシュをクリアする必要がある場合があります。

Clarity のサイトを調べて、CSS クライアント拡張機能を適用するとページ要素のスタイルがどのように更新されるかを確認できます。

これで、 Clarity のサイトアーキテクチャとスタイルの設定が完了しました。 次に、コンテンツの追加を開始します。

エクササイズ 9a：アセットライブラリの作成

アセットライブラリは、ドキュメント、メディア、Webコンテンツの記事を保存するためのスペースです。 各ライブラリを複数のサイトに接続し、複数のコンテキストでリソースを共有することができます。

トレーニングワークスペースには、すでにClarityのアセット用の複数のライブラリが含まれています。 ここでは、Walter Douglasとしてブランディングアセットのライブラリを作成します。

これを行うには、

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

2. 新規 をクリックし、名前 Clarity Branding and Logoを入力します。

3. [保存]をクリックします。

   これにより、ライブラリが作成され、その設定ページにリダイレクトされます。 これで、ライブラリをClarityのサイトにリンクできるようになりました。

4. サイドバー メニューの サイト タブに移動します。

5. 追加 をクリックし、 Clarity Public Enterprise Websiteを選択します。

   

   これにより、サイト内のユーザーはアセットライブラリ内のコンテンツにアクセスできるようになります。 次に、ライブラリにコンテンツを追加します。

6. アセット ライブラリ 概要ページに戻ります。

7. Clarity Branding and Logo をクリックして、そのアプリケーションにアクセスし、コンテンツの追加を開始します。

8. ドキュメントとメディアを選択します。

9. 新規 をクリックし、 複数ファイルのアップロードを選択します。

10. [repository-folder]/classroom-exercises/lesson-9/ resources フォルダからすべての画像を選択します。

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

この演習を完了すると、Clarity の Web サイトで使用できる画像とコンテンツを含む 7 つのアセット ライブラリが作成されます。

• 明確なブランディングとロゴ
• エラーページ
• 人事
• リーダーシップ
• 法律上の
• マーケティング資産
• 商品画像

次に、Clarityのマスターページに戻り、インポートしたブランディング画像を使用します。

演習9b: マスターページにClarityのロゴを追加する

Clarityのマスターページ テンプレートはほぼ完成しています。 しかし、ヘッダーとフッターにClarityのロゴを追加する必要があります。 ここではWalter Douglasとして画像を追加します。

これを行うには、

1. Clarity Public Enterprise の Web サイトにアクセスします。

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

3. [マスター] タブで、 プライマリ マスター ページ をクリックして編集を開始します。

4. ヘッダーの 画像 フラグメントをダブルクリックします。

   これにより、フラグメントの image-square サブ要素が選択され、その構成オプションが開きます。

5. 設定サイドパネルで、 画像の選択 () をクリックします。

6. パンくずメニューで サイトとライブラリ をクリックします。

   

7. アセットライブラリ タブに移動します。

   これで、このサイトに接続されているすべてのアセットライブラリが表示されるはずです。

8. Clarity Branding and Logoを選択します。

9. ヘッダーに画像を追加するには、 logo-name-vector を選択します。

   ヒント: 画像を見つけるのが難しい場合は、検索バーを使用してください。

10. 設定サイドパネルで、 リンク タブに移動し、image-square 要素に対して次の設定を構成します。

    タブ	設定	値
    リンク	リンク	ページ
    リンク	ページ	ホーム

    現在、ユーザーがヘッダー画像をクリックすると、Clarityのホームページに誘導されます。

11. フッター画像フラグメントに対してこれらの手順を繰り返し、代わりに logo-full-name-vector を選択します。

12. マスターの公開 をクリックして、マスター ページ テンプレートへの変更を保存します。

    マスターページを使用しているすべてのページが自動的に更新されるようになりました。

    重要: イメージが更新されない場合は、Liferay サーバーのキャッシュをクリアする必要があります。 これを行うには、Clarity Admin ユーザーとしてサインインし、 グローバル メニュー () を開き、 コントロール パネル タブに移動して、 サーバー管理をクリックします。 次に、 「実行 」をクリックして、 “「クラスター全体にキャッシュされたコンテンツをクリア” 」操作を実行します。

    

13. 手順 4 ～ 10 を繰り返して、 セカンダリ マスター ページ テンプレートのヘッダー イメージを更新し、 logo-name-vectorを使用します。

ここまでで、 アセットライブラリを作成し、コンテンツをインポートしてページに表示する方法を学習しました。 次に、一意のWebコンテンツストラクチャーを作成します。

エクササイズ 10a：Webコンテンツストラクチャーの作成

Web コンテンツ記事は、Liferay の組み込みコンテンツ管理システム (CMS) を使用して作成、編集、管理できるコンテンツ項目です。 また、Webコンテンツのストラクチャーを定義して、異なるフィールドを持つ異なるタイプのコンテンツを作成することもできます。

トレーニングワークスペースには、Clarity に必要なカスタムWebコンテンツストラクチャーのほとんどが含まれています。 ここでは、Christian CarterとしてAnnouncementストラクチャーを追加します。

これを行うには、

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

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

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

3. マーケティングアセット ライブラリと Webコンテンツを選択します。

4. 構造 タブに移動し、 新規をクリックします。

5. タイトルに「 お知らせ 」と入力します。

6. ビルダー サイドバーから、 テキスト フィールドを構造にドラッグ アンド ドロップします。

7. テキスト フィールドを選択し、次のオプションを設定します。

   タブ	項目	値
   基本	ラベル	Message
   基本	必須項目	はい
   詳細設定	フィールド参照	message

8. 戻る矢印 () をクリックして、ビルダー サイドバー メニューに戻ります。

9. 最初のフィールドのすぐ下に、別の テキスト フィールドをドラッグ アンド ドロップします。

10. テキスト フィールドを選択し、次のオプションを設定します。

    タブ	項目	値
    基本	ラベル	Link Text
    基本	必須項目	はい
    詳細設定	フィールド参照	linkText

11. ビルダーサイドバーメニューに戻ります。

12. ページへのリンク フィールドを リンク テキスト フィールドの上にドラッグ アンド ドロップします。

    これにより、 リンク テキスト と ページへのリンクの両方を含む フィールド グループ が作成されます。

13. ページへのリンク フィールドを選択し、次のオプションを設定します。

    タブ	項目	値
    詳細設定	フィールド参照	linkPage

14. [保存]をクリックします。

ユーザーは、Announcementsストラクチャーを使用してWebコンテンツ記事を作成できるようになりました。 次に、Webコンテンツ記事をいくつか作成します。

エクササイズ 10b：Webコンテンツ記事の作成

トレーニングワークスペースには、Webコンテンツの記事も含まれています。 しかし、ClarityにはFAQやお知らせ記事も必要です。 ここでは、Christian Carterとして作成します。

これを行うには、

1. マーケティング アセット ライブラリの Web コンテンツ アプリケーションで、 Web コンテンツ タブに移動します。

2. 新規をクリックし、 フォルダーを選択します。

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

   項目	値
   名前	Announcements
   説明	Stores announcement articles for the page header.

   ヒント: Web コンテンツをホーム フォルダーに追加するのではなく、フォルダーに整理することをお勧めします。

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

5. アナウンス フォルダをクリックします。

6. 新規 をクリックし、 お知らせを選択します。

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

   項目	値
   タイトル	Product Innovations
   メッセージ	See Clarity's latest eyewear innovations!
   リンクテキスト	Learn more
   ページへのリンク	プロダクト

   注意: ページを選択するときは、パンくずメニューの サイトとライブラリ をクリックし、 Clarity Public Enterprise Websiteを選択します。

   

8. 公開 をクリックし、 権限付きで公開を選択します。

9. デフォルトの権限を使用し、 公開 をクリックして確認します。

   次に、不足している Web コンテンツ記事をいくつか追加します。

10. パンくずメニューの Web コンテンツ をクリックします。

11. FAQ フォルダ → Retail Partners サブフォルダに移動します。

12. 次のFAQ記事を作成します。

    タイトル（質問）	回答
    小売パートナーになることはできますか。	はい、私たちは常に小売パートナーのネットワークを広げたいと考えています。 アイウェアの在庫にご興味のある方は、営業チームまでお問い合わせください。
    アイウェアを試着できる小売パートナーはありますか?	はい、様々な眼鏡店と提携しており、試着が可能です。 最寄りの店舗については、Webサイトをご覧ください。
    どのようなアイウェアを扱っていますか？	処方メガネ、サングラス、コンタクトレンズなど、幅広いアイウェアを取り揃えています。 さまざまなスタイルや好みに合わせたデザイナーフレームのコレクションも取り揃えています。

ここまでで、 Clarityのページに必要なすべてのWebコンテンツが揃うはずです。 次に、Clarity のページのフラグメントにコンテンツをマッピングします。

エクササイズ 10c：フラグメントへのコンテンツのマッピング

多くのフラグメントには、サブ要素のタイプに応じて独自の構成オプションを持つサブ要素が含まれています。 利用可能なタイプには以下が含まれます。

• シンプルなテキスト要素
• リッチテキスト要素
• リンク要素
• HTML要素
• 画像要素

各サブ要素のコンテンツを直接設定することも、既存のコンテンツ項目にマッピングして動的に更新することもできます。 ここでは、ホームページの一部の画像要素を Walter Douglasとしてアセットライブラリの画像にマッピングします。

これを行うには、

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

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

2. Clarity の ホーム ページの編集を開始します。

3. ブラウザのサイドパネル () で、 バナー コンテナを選択します。

4. バナー コンテナ内の 画像 フラグメントを選択します。

   フラグメントに image-square サブ要素が含まれていることに注意してください。

5. マッピング オプションにアクセスするには、フラグメントの image-square サブ要素を選択します。

   

6. ソース選択では、 マッピングを選択します。

7. アイテムの場合は、 アイテムを選択 () をクリックします。

8. [ドキュメントとメディア] タブに移動し、パンくずメニューで [サイトとライブラリ] をクリックします。

   

9. アセット ライブラリ タブに移動し、 マーケティング アセットを選択して、 home-banner-narrow-no-backgroundという名前の画像を選択します。

10. フィールドには、 ファイル URLを選択します。 画像はホームページのバナーに表示されるはずです。

    

11. Clarity Solutions Promo コンテナーの 画像 フラグメントに対して手順 4 ～ 9 を繰り返し、マーケティング アセット アセット ライブラリから 棚の上のサングラス 画像を選択します。

12. ブラウザのサイドパネル () で、Clarity Solutions Promo コンテナ内の コンテンツ ラッパー コンテナを選択します。

    ここでは、画像サブ要素の代わりに背景画像を使用します。

13. 構成サイドパネルで、 スタイル タブに移動します。

14. 「背景」の下で、「画像ソース」を マッピング に設定し、「マーケティング アセット」アセット ライブラリから グラデーション オーバーレイ 画像を選択します。

15. フィールドには、 ファイル URLを選択します。 テクスチャはグラデーションのプロモーションに重なるはずです。

    

16. ディストリビューター プロモーション コンテナーに対して手順 12 ～ 14 を繰り返し、マーケティング アセット ライブラリから ホーム プロモーション 画像を選択します。

    完了すると、画像のサイズが Clarity のホームページのデザインと一致していないことに気付くかもしれません。 これを修正しましょう。

17. バナーコンテンツ コンテナを選択し、次の設定を構成します。

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

    

18. 次のコンテナーに対して前の手順を繰り返します。

    • クラリティソリューションズプロモーション
    • コンテンツコンテナ (違いを見るの下)
    • 役立つ記事

    

    これで、これらのコンテナの内容が固定され、寸法がClarityのデザインにより近くなるはずです。

19. 公開をクリックします。

これで、Clarityのアセットライブラリのコンテンツがホームページの画像フラグメントにマッピングされました。 後のレッスンでは、コンテンツフィールドをフラグメントのサブ要素の追加タイプにマッピングします。

これで、 Liferay を使用したエンタープライズ Web サイトの構築の 1 日目の演習をすべて完了しました。