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. https://clarityvisionsolutions.com にアクセスして、Liferay 上でのサイトの完全な実装をご覧ください。

演習問題 2：Liferay Workspaceの確認と起動

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

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

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

注意: 進行状況がリセットされないように、これらの手順は一度だけ実行してください。 既存の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
   

   Mac:

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

   Windows:

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

   注： Blade CLIは、多くの開発タスクを簡素化します。 これにより、新しいワークスペースの作成、サーバーバンドルの取得、Liferayインスタンスの起動などが行えます。 本トレーニングでは、Bladeの使用を強く推奨します。

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

   cd liferay-course-building-enterprise-websites/
   

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

   blade server run
   

   あるいは、

   • Unixベース:

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

   • Windows:

     .\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
  

• Windows:

  .\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 init
   

   あるいは、

   • Unixベース:

     ./gradlew initBundle
     

   • Windows:

     .\gradlew.bat initBundle
     

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

5. 前のセクションの手順5～11に従ってください。

演習問題 3a：ユーザーの作成

公共事業ウェブサイトの構築にあたっては、最終的なサイト構築に貢献する以下のClarityペルソナを追跡していきます。

スクリーン名	メールアドレス	名	姓	役職
christiancarter	[e-mail]	Christian	Carter	Marketing Coordinator
claramurphy	[e-mail]	Clara	Murphy	マーケティング・マネージャー
harperroberts	[e-mail]	Harper	Roberts	人事スペシャリスト
ianmiller	[e-mail]	Ian	Miller	IT Manager
ウォルター・ダグラス	[e-mail]	ウォルター	ダグラス	Web Developer

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

注：実際のシナリオでは、Clarityのような大規模な組織の場合、IDおよびアクセス管理システム（Oktaなど）を使用してLiferayインスタンスにユーザーを追加すると便利です。 トレーニング目的のため、不足しているユーザーは手動で作成します。

これを行うには、

1. グローバルメニュー（）を開き、［コントロールパネル］タブに移動し、［Users and Organizations（ユーザーと組織）］をクリックします。

   

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

   

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

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

   

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

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

   

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

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

6. 左メニューで［Password（パスワード）］をクリックします。

7. パスワードにlearnと入力します。

   

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

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

演習問題 3b：ユーザーグループの作成と割り当て

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

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

グループ名	説明
Human Resources	Members of the human resources department at Clarity.
IT	Members of the IT department at Clarity.
Marketing	Clarity社のマーケティング部門のメンバー。

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

これを行うには、

1. グローバルメニュー（）を開き、［コントロールパネル］タブに移動し、［User Groups（ユーザーグループ）］をクリックします。

   

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

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

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

   

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

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

5. Marketingユーザーグループをクリックします。

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

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

   

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

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

演習問題 3c：ユーザーロールの作成と割り当て

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

ClarityはLiferayの標準搭載ロールの多くを活用できる一方で、以下のようなカスタムロールも必要としている。

種類	敬称	説明
標準	Content Manager	Clarity role for those managing content on Liferay.
標準	IT Manager	Clarity role for a manager within the IT department.
標準	Web Developer	Clarity role for a front end developer within the IT Department.
標準	Marketing Coordinator	Clarity role for an individual contributor from the marketing team.
グループ	サイトコンテンツ寄稿者	Clarityサイトに貢献する人向けの、サイトベースの役割。

トレーニングワークスペースには、 Marketing Coordinator以外のすべてのロールが含まれています。 ここでは、Clarity管理者としてMarketing Coordinatorのロールを作成し、割り当てます。

まず、

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

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

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

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

   

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

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

5. ［Assignees（担当者）］タブに移動し、［User Groups（ユーザーグループ）］をクリックします。

   

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

7. Marketingを選択します。

   

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

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

演習問題 3d：ロール権限の定義

権限により、Liferayインスタンスでデータにアクセスし、特定のアクションを実行することができます。 Marketing Coordinatorのロールを作成したので、Clarity管理者ユーザーとしてロールに関連する特定の権限を追加します。

このプロセスを通じて、Christian Carterで代理ログインし、Marketing Coordinatorロールに追加権限を与えた場合の実際の効果を確認します。

これを行うには、

1. グローバルメニュー（）を開き、［コントロールパネル］タブに移動し、［Users and Organizations（ユーザーと組織）］をクリックします。

2. Christian Carterのアクション（ ）をクリックし、［Impersonate User（代理ログイン）］を選択します。

   

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

   

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

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

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

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

   ヒント：検索バーに「Asset Libraries」と入力すると、このセクションがすぐに見つかります。

   

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

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

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

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

   注：Liferayは、Access in Control Panel権限を付与すると、Portal: View Control Panel Menu権限を自動的に割り当てます。

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

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

   

9. ［Asset Libraries（アセットライブラリ）］アプリケーションに移動します。

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

   • エラーページ
   • 人事
   • リーダーシップ
   • リーガル
   • マーケティングアセット
   • 商品画像

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

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

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

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

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

14. ［Marketing（マーケティング）］を選択し、［Done（完了）］をクリックします。

    

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

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

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

17. Marketingユーザーグループのアクション（ ）をクリックし、［Assign Roles（ロールの割り当て）］を選択します。

    

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

18. ［Asset Library Administrator］ロールを選択し、［完了］をクリックします。

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

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

    

    Christian Carterは、ライブラリのアプリケーションにアクセスできますが、自分の責任（ドキュメントのアップロードや記事の編集など）を果たすのに必要なアプリケーションの権限はありません。 これらの権限をMarketing Coordinatorロールに追加してみましょう。

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

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

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

    注：［ドキュメントとメディア］を検索すると、同じ名前で2つのオプションが表示されます。 コンテンツ & データ の下のオプションを選択してください。

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

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

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

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

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

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

    セクション	権限
    通常権限	サイトとアセットライブラリ管理にアクセス
    通常権限	参照
    リソースの権限 > 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

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

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

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

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

4. ブランクサイトテンプレートを選択します。

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

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

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

Clarityはこのサイトを使用して、販売代理店に商品を販売するチャネルを構築できます。 しかし、このコースでは、Clarityの公開エンタープライズWebサイトの最適化に焦点を当てます。

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

演習問題 4b: サイトへのユーザーの追加

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

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

これを行うには、

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

2. サイトメニュー() を開き、［メンバー］を展開し、［Memberships］を選択します。

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のデフォルトのアクセシビリティツールを有効にすること

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

これを行うには、

1. Clarityの公開エンタープライズWebサイトにアクセスしていることを確認します。

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

   

3. サイト設定 → 詳細 へ移動してください。

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

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

5. ［Membership Type（メンバーシップタイプ）］で、［Open（公開）］を選択します。

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

   

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

7. ［Site URL（サイトURL）］タブに移動します。

8. ［Friendly URL（フレンドリURL）を/clarityに設定します。

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

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

   バーチャルホストを設定すると、ドメイン名（例：www.helloworld.com）がサイトに接続されます。

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

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

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

    

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

12. ［Site Settings（サイト設定）］ページに戻り、［Localization（ローカライズ）］に進みます。

13. ［Define a custom default language（このサイトでのデフォルトの言語と指定可能な言語を定義してください）］をクリックし、右矢印ボタン（ ）を使用して、英語とスペイン語以外のすべての言語を削除します。

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

    ヒント：一度に複数の言語を選択するには、CTRLキーを押したままにします。

    

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

15. ［Site Settings（サイト設定）］ページに戻り、［Accessibility（アクセシビリティ）］に進みます。

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

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

    

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

これらの設定を組み合わせることで、Clarityの企業向けウェブサイトは、本来の目的である国際的な顧客層への製品プロモーションを実現するのに役立っています。 Liferayは、クッキー処理、セッションタイムアウト、SEOなど、他にも多くのサイト設定を提供します。 現時点で、これらの構成はClarityの基本的なニーズを満たしています。

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

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

現在、http://localhost:8080/にアクセスすると、Clarityの公開エンタープライズWebサイトではなく、Clarity Vision Solutionsのサイトに誘導されます。 ここでは、Clarity管理者ユーザーとしてインスタンスのデフォルトのホームページとランディングページを更新します。

これを行うには、

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

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

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

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

4. ［Home URL（ホームURL）］には、/web/clarityと入力してください。

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

5. ［ Default Landing Page（ログインページ）］には、/web/clarityと入力します。

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

6. ［Default Logout Page（ログアウトページ）］には、/web/clarityと入力します。

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

   

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

ここまでで、 現在、ユーザーが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メール：[e-mail]
   • パスワード：learn

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

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

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

4. ［Primary Master Page（プライマリマスターページ）］テンプレートを選択します。

   注：これはトレーニングワークスペースが提供する不完全なテンプレートを適用します。 このテンプレートは後の演習問題で完成させます。

   

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

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

6. 現時点では、ページは空白のまま、［公開］をクリックします。

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

7. ［Product Detail（商品詳細）］を［Product List（商品一覧）］にドラッグアンドドロップし、［Product List（商品一覧）］を［Products（商品）］にドラッグアンドドロップします。

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

   

8. ［Open Positions］を［Careers］にドラッグアンドドロップしてください。

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

演習問題 6b：表示ページテンプレートの追加

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

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

これを行うには、

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

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

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

4. ［空白］を選択します。

5. ［Name（名前）］にLeadership Profileと入力します。

6. ［Content Type（コンテンツの種類）］では、［Web Content Article（Webコンテンツ記事）］を選択します。

7. ［Subtype（サブタイプ）］では、Leadership Profileを選択します。

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

   

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

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

9. 現時点では、テンプレートは空白のまま、［公開］をクリックします。

10. リーダーシッププロフィールテンプレートのアクション（）をクリックし、［デフォルトにする］を選択します。

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

    

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

演習問題 6c：Clarityのマスターページの設計

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

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

これを行うには、

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

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

3. 左サイドパネルの［フラグメントとウィジェット］タブ（ ）を開きます。

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

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

5. サイドパネルの［ブラウザ］タブ（ ）に移動し、コンテナの名前をダブルクリックして、Page Headerという名前に変更します。

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

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

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

   • Header Navigation Bar：このコンテナは、Clarityのロゴ、メインナビゲーションメニュー、検索バー、ユーザーメニューなどの重要な要素のためのものです。

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

   

7. ［Header Announcement Bar］を選択し、構成サイドパネルで下記の設定を行います。

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

   

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

   これらの設定は、コンテナにページ要素を追加したときに有効になります。 今のところ、このコンテナは空のままにして、表示/非表示を切り替えてください（）。後ほど、このコンテナを再訪します。

8. Header Navigation Barを選択し、次の設定を行います。

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

   

9. Header Navigation BarコンテナにGrid要素を追加します。

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

    

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

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

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

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

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

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

    

13. Header Brandingコンテナを選択し、次の設定を行います。

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

14. Header Navigationを選択し、次の設定を行います。

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

15. Header User Actionsを選択し、次の設定を行います。

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

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

    コンテナ	フラグメント
    Header Branding	画像
    Header Navigation	メニュー表示
    ヘッダーのユーザーアクション	ログインとユーザーメニュー

    注：「Login and User Menu」フラグメントは、Clarityコンポーネントフラグメントセットで提供されるカスタムフラグメントです。 後ほど、ヘッダーの検索ボタン用のカスタムフラグメントを作成します。

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

演習問題 6d：許可されたフラグメントの設定

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

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

これを行うには、

1. プライマリマスターページテンプレートを編集中に、ページ本体コンテナの［許可されたフラグメントを設定］をクリックします。

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

   • アカウント（フラグメントセット）
   • カート（フラグメントセット）
   • フッター（フラグメントセット）
   • ナビゲーションバー（フラグメントセット）
   • 知識ベースナビゲーション（一部抜粋）
   • カートに追加（フラグメント）

   

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

4. ［Publish Master（マスターを公開）］をクリックします。

5. 以下のように表示されるポップアップで［OK］をクリックします。

   Changes made to this master are going to be propagated to all page templates, display page templates, and pages using it. Are you sure you want to proceed?

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

演習問題 6e：セカンダリマスターページの作成

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

これを行うには、

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

   

2. コピーのアクション（）をクリックし、［Rename（名前を変更する）］を選択します。

3. Secondary Master Pageを入力し、［保存］をクリックします。

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

   • Header Announcement Bar
   • Footer Branding
   • Footer Navigation

   

5. ［Publish Master（マスターを公開）］をクリックします。

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

演習問題 6f：マスターページの適用

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

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

これを行うには、

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

   • Home (Content Page)
   • Sign In (Content Page)
   • Leadership Profile (Display Page Template)

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

2. 左サイドパネルの［Page Design Options（ページデザインオプション）］タブ（ ）に移動します。

3. 適切なマスターページ を選択してください。

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

   

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

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

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

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

演習問題 7a：ナビゲーションメニューの作成

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

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

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

これを行うには、

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

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

3. ［Name（名前）］にHeader Page Menuと入力します。

   

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

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

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

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

6. ［Page（ページ）］項目のタイプを選択します。

   

7. 以下のページを確認します。

   • About Us
   • ブログ
   • Careers
   • Contact Us
   • FAQ
   • プロダクト

   

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

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

9. いずれかのメニュー項目のアクション（ ）をクリックし、［情報を表示］を選択します。

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

   

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

    • プロダクト
    • About Us
    • ブログ
    • FAQ
    • Careers
    • Contact Us

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

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

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

12. ［Footer Resources Menu（フッターリソースメニュー）］を選択します。

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

14. ［Page（ページ）］項目のタイプを選択します。

15. ［FAQ］をクリックします。

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

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

演習問題 7b：メニュー表示フラグメントの更新

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

これを行うには、

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

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

3. 設定サイドパネルで、メニューのソースのソースの変更（ ）をクリックします。

4. ［Header Page Menu（ヘッダーページメニュー）］をクリックし、［この階層を選択］をクリックします。

   

5. ［Publish Master（マスターを公開）］をクリックします。

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

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

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

演習問題 8a：カスタムフラグメントの作成

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

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

これを行うには、

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

2. ［フラグメントセット］の下のClarityのコンポーネントをクリックします。

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

4. Search Buttonと入力し、 ［追加］をクリックします。

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. ［Publish（公開）］をクリックします。

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

演習問題 8b：フラグメントのインポート

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

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

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

2. フラグメントセットのアクション（）をクリックし、［Import（インポート）］を選択します。

   

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

4. ［Import（インポート）］をクリックします。

5. 終了したら ［完了］をクリックします。

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

6. 上記の手順を繰り返して、以下の構成をインポートします。

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

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

演習問題 8c：マスターページへのカスタムフラグメントの追加

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

これを行うには、

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

2. ［Search Button（検索ボタン）］フラグメントを［Header User Actions］コンテナに追加します。

   

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

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

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

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

5. ［Publish Master（マスターを公開）］をクリックします。

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

7. ［セカンダリマスターページ］を更新するには、以下の手順を繰り返します。

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

演習問題 8d：ページへのフラグメント構成の追加

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

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

これを行うには、

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

   • Home (Content Page)
   • FAQ (Content Page)
   • Leadership Profile (Display Page Template)

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

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

   

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

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

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

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

課題：

編集者がログインボタンの値をハードコーディングする代わりに、ターゲットURLを設定できるよう、ログインとユーザーアクションのフラグメントを変更します。

要件

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

成功基準：

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

演習問題 8e：Clarityのデフォルトテーマ、お気に入りアイコン、ロゴの更新

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

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

これを行うには、

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

2. アプリケーションバーのアクション（ ）をクリックし、［設定］を選択します。

3. ［現在のテーマを変更する］をクリックし、［ダイアレクト］を選択します。

   

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

4. ［Basic Settings（基本設定）］で、［お気に入りアイコンを選択］()をクリックし、[repository-folder]/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:

   blade gw clean deploy
   

   Unix-based systems:

   ../../gradlew clean deploy
   

   Windows:

   ..\..\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 Global CSS］を選択します。

   

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

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

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

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

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

演習問題 9a：アセットライブラリの作成

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

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

これを行うには、

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

2. ［新規］をクリックし、Clarity Branding and Logoと入力します。

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

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

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

5. ［Add（追加）］をクリックし、［Clarity Public Enterprise Website］を選択します。

   

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

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

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

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

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

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

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

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

• Clarityのブランディングとロゴ
• エラーページ
• 人事
• リーダーシップ
• リーガル
• マーケティングアセット
• 商品画像

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

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

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

これを行うには、

1. Clarityの公開エンタープライズWebサイトに移動します。

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

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

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

   これは、フラグメントのimage-squareサブ要素を選択し、その設定オプションを開きます。

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

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

   

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

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

8. Clarityのブランディングとロゴを選択します。

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

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

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

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

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

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

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

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

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

    

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

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

演習問題 10a：Webコンテンツストラクチャーの作成

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

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

これを行うには、

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

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

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

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

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

5. タイトルに「Announcements」と入力します。

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 フォルダ → 小売パートナー サブフォルダに移動します。

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

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

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

演習問題 10c：フラグメントへのコンテンツのマッピング

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

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

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

これを行うには、

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

   • Eメール：[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を繰り返し、マーケティングアセットのアセットライブラリからsunglasses-on-shelves画像を選択します。

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

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

13. 設定サイドパネルで、［スタイル］タブに移動します。

14. ［背景］で、［画像ソース］を［マッピング］に設定し、マーケティングアセットのアセットライブラリからgradient-overlay画像を選択します。

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

    

16. Distributor Promoコンテナに対して手順12～14を繰り返し、マーケティングアセットのアセットライブラリからhome-promotion画像を選択します。

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

17. ［Banner Content］コンテナを選択し、次の設定を行います。

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

    

18. 次のコンテナに対して前のステップを繰り返します。

    • Clarity Solutions Promo
    • Content Container （See the Differenceの下）
    • Helpful Articles

    

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

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

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

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