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

• 演習問題 19a：オブジェクト定義の作成
• 演習問題 19b：フォームの構築
• 演習問題 19c：お問い合わせへの回答のためのダッシュボードの作成
• ボーナス演習問題：マルチステップフォームの作成
• 演習問題 20a：テーマクライアント拡張機能の変更
• 演習問題 20b：お気に入りアイコン用クライアント拡張機能のデプロイ
• 演習問題 20c：新しいCSSクライアント拡張機能の作成
• 演習問題 20d： Distributor Applicationのセットアップとデプロイ
• 演習問題 20e：Distributor Applicationのテスト
• 演習問題 20f：Distributor Applicationsオブジェクトへのフィールドの追加
• 演習問題 20g：候補リスト項目の追加
• 演習問題 20h：オブジェクト権限の割り当て
• 演習問題 20i：許可ワークフローの有効化
• 演習問題 20j：アカウント作成の自動化
• 演習問題 20k：通知の設定
• 演習問題 21：ユーザーグループとロールに応じたエクスペリエンスのカスタマイズ
• 演習問題 22a：JMeterによる負荷テストの実行
• 演習問題 22b：ページパフォーマンスの監査
• 演習問題 22c：パフォーマンス問題の修正
• 演習問題 22d：JMeterによるパフォーマンスの再評価

演習問題 19a：オブジェクト定義の作成

Clarityは、従業員以外のユーザーとのコミュニケーションを効率化するために、ユーザーフレンドリーな問い合わせフォームを作成したいと考えています。 Liferay Objectは、このフォームを構築し、お問い合わせページとシームレスに統合するためのツールを提供します。

ここでは、Contact Usオブジェクトを作成し、Clarity管理者ユーザーとして関連情報を保存するためのフィールドを設定します。

これを行うには、

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

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

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

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

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

   項目	値
   ラベル	Contact Us
   複数形のラベル	Contact Us
   オブジェクト名	お問い合わせ

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

   これにより、いくつかのデフォルトのシステム フィールドを含むドラフトオブジェクト定義が作成されます。 これで、定義を構成して、データの保存方法と有効にする機能を決定できるようになりました。

6. オブジェクトの概要ページから、［お問い合わせ］オブジェクト定義の編集を開始します。

7. 詳細タブで次の設定を行います。

   項目	値
   スコープ > スコープ	サイト
   スコープ > パネルリンク	コンテンツ & データ
   設定 > ページビルダーでウィジェットを表示	False
   設定 > 監査フレームワークでエントリ履歴を有効にする	True

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

   オブジェクト定義を構成したので、カスタム フィールドを追加して、フォームで収集する情報の種類を決定できます。

9. ［フィールド］タブに移動します。

10. 追加()をクリックし、次の詳細を入力し、［保存］をクリックします。

    項目	値
    ラベル	氏名
    項目名	fullName
    種類	テキストボックス
    必須	はい
    重複しない値のみを受け付けます	いいえ

11. 前のステップを繰り返して、残りのフィールドを作成します。

    ラベル	項目名	種類	必須	重複しない値のみ
    メールアドレス	emailAddress	テキストボックス	はい	いいえ
    電話番号	phone	テキストボックス	はい	いいえ
    State or Province	stateOrProvince	テキストボックス	いいえ	いいえ
    市区町村	city	テキストボックス	いいえ	いいえ
    コメント	comment	長いテキスト	いいえ	該当なし

12. ［詳細］タブに戻り、 ［公開］をクリックします。

    これにより、フォーム送信を保存するためのデータベーステーブルが作成されます。

次に、Clarityのお問い合わせページにフォームを追加します。

演習問題 19b：フォームの構築

Liferay オブジェクトは基本的なユーザー インターフェイスを自動的に生成しますが、Clarity のページにフォームを設計して追加することもできます。

前回、お問い合わせページを追加し、ワイヤーフレームを作成しました。 ここで、Clarity 管理者ユーザーとしてページにフォームを追加します。

これを行うには、

1. Clarity の公共企業 Web サイトにアクセスし、「お問い合わせ」ページの編集を開始します。

2. ［フォームコンテナ］のフラグメントをお問い合わせフォームコンテナにドラッグアンドドロップします。

3. ドロップダウンメニューをクリックし、［お問い合わせ］オブジェクトを選択します。

4. すべてのフィールドを選択し、［保存］をクリックします。

5. フォームコンテナを選択し、次の設定を行います。

   タブ	設定	値
   一般 > フレーム	幅	400px
   スタイル	パッディング	Spacer 4 (all sides)
   スタイル	背景	#FFFFFF
   スタイル	枠線の角丸	15ピクセル

6. 次の順序でフィールドフラグメントをドラッグアンドドロップします。

   • 氏名
   • メールアドレス
   • 電話番号
   • State or Province
   • 市区町村
   • コメント

7. これらのフィールドフラグメントをそれぞれ選択し、次の設定を行います。

   タブ	設定	値
   スタイル	パッディング	スペーサー3（下）

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

   

9. エントリーを送信してフォームをテストします。

10. サイト メニュー () に移動し、 コンテンツ & データを展開して、 お問い合わせをクリックします。 作成したエントリーがここに表示されます。

    

お問い合わせページが完全に設定され、Clarityのユーザーが利用できるようになりました。 次に、フロントエンドのデータセットを使用して、お問い合わせリクエストを追跡するための管理ダッシュボードを作成します。

演習問題 19c：お問い合わせへの回答のためのダッシュボードの作成

Clarityは問い合わせを受け続けているため、チームは提出された問い合わせを追跡して対応する信頼性の高い方法を必要としています。 これをサポートするために、Clarityは［お問い合わせ］オブジェクトのワークフローを定義し、サイト訪問者からの未回答のリクエストを表示するためのダッシュボードを作成したいと考えています。 この演習では、Clarity Admin ユーザーとしてこれら両方の要素を実装します。

ワークフローの作成

ここでは、新しいリクエストについてディストリビューター担当者ロールに通知を送信する簡単なワークフローを作成します。

1. グローバルメニュー()を開き、［アプリケーション］タブの［ワークフロー］をクリックします。

2. 新しいワークフローを作成するには、［新規］をクリックします。

3. 名前にはContact Us Follow Upと入力します。

4. ノードパネルで［Task］ノードを見つけ、ワークフローエディタにドラッグします。

   

5. サイドパネルで、Taskノードに対して以下の設定を行います。

   項目	値
   ラベル	Follow Up
   ノード名	followUp
   説明	ディストリビューター担当者に新しいお問い合わせの送信を確認するよう依頼してください。

6. マウスをStartノードに合わせ、矢印をTaskノードにドラッグします。

   

7. サイドパネルで、移行ラベルに対して以下の設定を行います。

   項目	値
   ラベル	レビュー
   Transition Name	review_contact_us_entry
   デフォルト	はい

8. 同様に、TaskノードからEndノードへ矢印をドラッグします。

   

   これによってワークフローの進行が定義されます。

9. サイドパネルで、2つ目の移行ラベルに対して以下の設定を行います。

   項目	値
   ラベル	承認
   Transition Name	approve_contact_us_entry
   デフォルト	はい

   

10. Follow Upノードをクリックして設定を開始します。

11. ［Assignments（割り当て）］で［アセット作成者］をクリックします。

12. ［Assignment Type（割り当ての種別）」で［Role（ロール）］を選択します。

13. ［Role（ロール）］で［Distributor Representative］を選択します。

    

14. 戻る() をクリックして、Follow Upノードの編集を続行します。

15. 通知の下にある［新規］をクリックします。

16. ［Name］にFollow Up Taskと入力します。

17. ［Template］に次のテキストを入力します。

    There is a new ${entryType} request for you to follow up with.
    

18. ［Notification Types（通知タイプ）］で、［User Notification（ユーザー通知）］を選択します。

19. ［Recipient Type（受信者の種類）］で［Role（ロール）］を選択します。

20. ［Role Name（ロール名）］で［Distributor Representative］ロール名を選択します。

    

21. Endノードをクリックして設定を開始します。

22. アクションで、 ［新規］をクリックします。

23. 新しいアクションに以下の属性を設定します。

    項目	値
    名前	Approved Entry
    種類	Updated Status
    ステータス	承認済み
    実行の種類	処理開始時

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

    

Clarityに、エントリーをDistributor Representativesロールを持つユーザーにルーティングするワークフローが追加されました。 次に、これをお問い合わせオブジェクトで使用します。

オブジェクトへのワークフローの割り当て

ワークフローを作成したら、Liferayアプリケーションがそれを使用するように設定できます。 ここでは、新規ワークフローを使用するようにお問い合わせオブジェクトを設定します。

1. グローバルメニュー ( ) を開き、［Clarity Public Enterprise Website］に移動します。

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

3. ［Contact Us］アセットタイプの［Edit（編集）］をクリックします。

4. ［Contact Us Follow Up］ワークフローを選択し、［Save］をクリックします。

   

ここまでで、 ワークフローを使用するように お問い合わせ オブジェクトを正常に構成しました。 これにより、Distributor Representativesのロールを持つユーザーは、新しい提出書類の通知を受け取ることができ、提出書類を確認し、対処することができます。 次に、保留中のタスクを表示するための UI を作成します。

お問い合わせ回答データセットの作成

Clarityでは、担当者がリクエストの受信を監視できるように、保留中のお問い合わせ送信を分かりやすく構造化されたUIで表示する方法が必要です。 ここではLiferayデータセットを有効にし、それを使ってこのUIを実装します。

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

2. プラットフォームセクションで、［Feature Flags（機能フラグ）］をクリックします。

3. [リリース] タブで、次の機能を有効にします。

   • ルートオブジェクト定義 (LPD-34594)
   • データセットマネージャー (LPS-164563)

   

   これでデータセットを作成できます。

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

5. ［追加］ をクリックして新しいデータセットを作成し、次の詳細を入力します。

   項目	値
   名前	Contact Us Responses
   REST アプリケーション	/c/contactuses
   REST スキーマ	ContactUs
   REST エンドポイント	/scopes/{scopeKey}

   

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

7. ［Contact Us Responses］データセットをクリックして編集を開始します。

8. 次のパラメータをパラメータ入力ボックスに追加します。

   filter=(status/any(x:(x eq 1)))
   

   注：このフィルターは、ステータス値が 1に等しいかどうかをチェックします。これは、保留中のステータスのエントリーに相当します。

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

10. ［Visualization Modes（ビジュアル化モード）］タブに移動します。 ここでは、さまざまなビジュアル化（テーブル、リスト、カードなど）に対して、ユーザーが表示できるデータを決定できます。

11. ［List（リスト）］タブに移動します。

12. ［Title（タイトル）］行の追加（ ）をクリックし、［Assign from Data Source（データソースから割り当て）］を選択します。

    

13. fullNameフィールドを選択します。

    

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

15. ［Description（説明）］行の追加（ ）をクリックし、［Assign from Data Source（データソースから割り当て）］を選択します。

16. commentフィールドを選択します。

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

    

ユーザーがデータセットをリストとして表示すると、これらのデータポイントが表示されます。 リストには、ワークフロー ステータスが「保留中」のエントリのみを含める必要があります。 次に、データ セットをサイト ページに表示します。

データセットのページへの表示

Clarityは、新しいデータセットを専用ページに表示したいと考えています。 ここでは、「お問い合わせの回答」ページを作成し、そこにデータ セットを追加します。

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

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

3. 新規ページを作成するには、［新規］をクリックします。

4. ［プライマリマスターページ］テンプレートを選択し、名前をContact Us Responsesとします。

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

6. データ セット フラグメントをページのドロップ ゾーンにドラッグ アンド ドロップします。

7. ［General（一般）］ パネルで、追加() をクリックしてデータセットを選択します。

8. Contact Us Responsesデータセットを選択し、［保存］をクリックします。

   

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

   ワークフローの設定後、お問い合わせエントリーが送信されていないため、現在表示される保留エントリーはありません。

10. すべてが期待どおりに動作することを以下の手順で確認します。

    • ［ Contact Us ］フォームから、いくつかのサンプルエントリーを送信してください。
    • その後、［Contact Us Responses］ページに戻り、保留中のリクエストがデータセットに表示されるのを確認します。
    • 次に、Daniel Raymondとして（またはDaniel Raymondになりすまして）サインインし、Distributor Representativeがワークフロー通知を受け取ったことを確認します。
    • 最後に、Daniel Raymondにワークフロータスクを割り当てて承認し、データセットページに戻ってエントリーが削除されたことを確認します。

    

ここまでで、 データセットがページ上で公開され、ユーザーは保留中のお問い合わせエントリーをリアルタイムで閲覧できるようになりました。

次は、マルチステップフォームの作成方法を学習するか、演習問題 20に進んでLiferayクライアント拡張機能について学習し、それらを使用してLiferayインスタンスにスタイルと機能を追加する方法を学ぶことができます。

ボーナス演習問題：マルチステップフォームの作成

課題：

ユーザーエクスペリエンスを向上させるために、お問い合わせフォームをマルチステップフォームに変換します。

要件

• 既存のお問い合わせオブジェクトを使用します。
• オブジェクト定義のドラフトモードを有効にします。
• Stepperフラグメントを使用して2つのフォームステップを作成します。
• 最初のステップに「次へ」ボタンを追加し、2番目のステップに「前へ」ボタンと「送信」ボタンを追加します。

成功基準：

マルチステップフォームは、各ステップでユーザーから提供された情報を収集します。

演習問題 20a：テーマクライアント拡張機能の変更

クライアント拡張は、Liferayコアからカスタマイズを分離します。 これにより、アップデートが簡素化されるとともに、必要なテクノロジーやデプロイモデルを自由に使用できるようになります。 前に見たように、グローバルCSSクライアント拡張はLiferay DXPでスタイルを拡張する方法を提供します。 ここでは、トレーニングのワークスペースで提供されるクライアント拡張機能を更新し、Walter Douglasとして変更をデプロイします。

これを行うには、

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

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

2. Clarity Public Enterprise Webサイトで、ホームページにアクセスします。

   Clarityの「See the Difference」バナーはベージュの背景（つまり#FCFBF8）を使っていることにご注意ください。 ClarityのテーマCSSクライアント拡張を変更し、更新してみましょう。

   

3. トレーニングのワークスペースで、classroom-exercises/lesson-20/フォルダに移動し、layout-background-color.scssファイルを開き、その内容をコピーします。

   このファイルには、 .lfr-layout-structure-item-container CSS クラスの背景色を上書きするためのスタイルが含まれています。

4. client-extensions/clarity-global-css/フォルダに移動し、assets/global.cssファイルを開き、コピーしたCSSスタイルをファイルの最後に追加し、変更を保存します。

5. 新しいターミナル ウィンドウを開き、 client-extensions/clarity-global-css/ フォルダーに移動して、次のコマンドを実行し、クライアント拡張機能をビルドしてデプロイします。

   blade gw clean deploy
   

   または、Gradle Wrapperを使用します。

   ../../gradlew clean deploy
   

6. コマンドが正常に実行されたことを確認します。

7. 必要に応じて、Clarityポータルからログアウトします。 また、この変更が自動的に反映されない場合は、ブラウザのキャッシュをクリアする必要があるかもしれません。

8. コンテナの背景がグレーになっていることを確認します。

   

   ヒント：グローバルCSSの値を変更する場合、ブラウザのキャッシュをクリアしないと変更内容が表示されないことがあります。

9. グローバルCSSクライアント拡張機能を使用してCSSスタイルを変更する方法を見たので、先ほど変更したスタイルをglobal.cssファイルから削除してください。

次は、クライアント拡張を使ってサイトのお気に入りアイコンを更新する方法を学びます。

演習問題 20b：お気に入りアイコン用クライアント拡張機能のデプロイ

前回のエクササイズでは、Liferay UIから手動でサイトのお気に入りアイコンを設定しました。 クライアント拡張を使用すると、他のフロントエンドクライアント拡張と一緒にお気に入りアイコンを配置することで、サイトの更新を効率化できます。 ここでは、クライアント機能を使用して、Walter Douglasとして、Clarityのお気に入りアイコンを更新します。

これを行うには、

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

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

   blade gw clean deploy
   

   または、Gradle Wrapperを使用します。

   ../../gradlew clean deploy
   

3. コマンドが正常に実行されたことを確認します。

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

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

6. ［デザイン］タブで、［お気に入りアイコンを選択］()をクリックします。

7. モーダル ウィンドウで、［クライアント拡張］ タブに移動し、［Clarity Theme Favicon］を選択します。

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

9. ホームページに移動し、ページのお気に入りアイコンが更新されたことを確認します。

   

演習問題 20c：新しいCSSクライアント拡張機能の作成

Liferayはサイトページに単一のCSSリソースを追加するためのCSSクライアント拡張機能を提供します。 ここでは、 Walter Douglasユーザーとして外部のcdnjs URLを使用して、これらのクライアント拡張機能の1つを作成します。

これを行うには、

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

2. 追加() をクリックし、［Add CSS］ を選択します。

3. 名前には、 Clarity Animationと入力します。

4. CSS URL には、 https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.cssと入力します。

   

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

6. Clarity Public Enterprise Websiteのホームページにアクセスします。

7. ページ設定() をクリックし、［デザイン］タブを選択します。

8. 下にスクロールして、［Add CSS Client Extensions（CSS クライアント拡張を追加）］をクリックします。

9. Clarity Animationを選択し、［追加］をクリックします。

   

10. 下にスクロールして、［保存］をクリックします。

    これにより、ページが下書きとして保存されます。 変更を有効にするには、ページを公開する必要があります。

11. ホームページに戻り、 編集 () をクリックし、 ［公開］をクリックします。

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

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

14. ［Clarity Gradient Container］フラグメントを選択して編集を開始します。

15. トレーニングのワークスペースで、classroom-exercises/lesson-20/フォルダに移動し、clarityanimation.htmlファイルを開き、その内容をフラグメントの HTML フィールドにコピーします。

    これにより、 animate.css ライブラリのフラグメントに、 cdnjs から 3 つの CSS アニメーション クラスが追加されます (つまり、 animate__animated、 animate__slower、および animate__fadeIn)。

    

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

    フラグメントを更新したので、サイトページ内のフラグメントの既存のインスタンスに変更をプロパゲートさせることができます。

17. ［Clarity Gradient Container］フラグメントのアクション() をクリックし、［利用数を表示］ を選択します。

18. すべてのボックスにチェックを入れ、［Propagate（プロパゲート）］をクリックします。

    

    現在、サイト全体で使用されているすべてのフラグメントは、新しいCSSクラスで更新されています。

19. ホームページに移動してアニメーションが動作することを確認します。

    これで、ホームページを更新したり、ホームページに移動するたびにアニメーションが再生されるようになりました。

    

次に、オブジェクトでクライアント拡張機能を使用して、複雑なビジネスロジックを持つカスタムソリューションを構築する方法について説明します。

演習問題 20d： Distributor Applicationのセットアップとデプロイ

トレーニングワークスペースには、2つのオブジェクト定義と関連する候補リストを素早く設定するためのバッチクライアント拡張機能が含まれています。 クライアント拡張機能をデプロイする具体的なプロセスは、Liferayのホスティングモデル（Self-Hosted、PaaS、SaaSなど）によって異なります。 ただし、どのような場合でも、コンパイルした.zipファイルをLiferayサーバーの[Liferay Home]/osgi/client-extensions/フォルダに追加する必要があります。 ここでは、バッチクライアント拡張機能をデプロイし、Clarity管理者ユーザーとしてその拡張機能に含まれる内容を確認します。

1. トレーニング ワークスペースで、 client-extensions/clarity-distributor-mgmt-batch/ フォルダーに移動します。

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

   blade gw clean deploy
   

   または、Gradle Wrapperを使用します。

   ../../gradlew clean deploy
   

3. コマンドが正常に実行されたことを確認します。

   2つの新しいオブジェクト定義とその候補リストがLiferayインスタンスに追加されました。 それらを調べてみましょう。

4. Clarity管理者ユーザーとしてログインした状態で、グローバルメニュー()を開き、［コントロールパネル］タブに移動し、［候補リスト］をクリックします。

   候補リストは、オブジェクト定義の単一選択フィールドや複数選択フィールドに使用できる、定義済みの項目リストです。 以下は、バッチクライアント拡張によってインポートされた候補リストです。

   • D4B8 Annual Purchase Volumes
   • D4B8 Application States
   • D4B8 Assessment Scores
   • D4B8 ビジネスタイプ
   • D4B8の決定
   • D4B8 流通チャネル
   • D4B8分布地域
   • D4B8 注文タイプ
   • D4B8 製品ラベル
   • D4B8 製品タイプ
   • D4B8の推奨事項

   

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

   ここでは、バッチクライアント拡張によってインポートされた2つの新しいオブジェクト定義が表示されます。

   • D4B8 Distributor Application
   • D4B8 Application Evaluation

   

   オブジェクト定義をさらに追加しているので、オブジェクトを整理するためのフォルダを追加し、その中にD4B8オブジェクトを配置しましょう。

6. オブジェクトフォルダの追加（ ）をクリックします。

7. ［Label］にはDistributor Management Appと入力します。

8. ［Create Folder（フォルダの作成）］をクリックします。

   

9. ［モデルビルダーで表示］をクリックします。

   オブジェクトモデルビルダーは、各オブジェクト定義をカードとして表示し、オブジェクト間の関係を視覚化するグラフィカルインターフェースです。 これを使用すると、オブジェクトアプリケーションでデータモデルを作成、管理、拡張し、定義、フィールド、関連を迅速に構成できます。

10. 左側のパネルで、D4B8 Distributor Applicationのアクション（ ）をクリックし、［Move to Current Folder（現在のフォルダに移動）］を選択します。

    

11. D4B8 Application Evaluationに対してこの手順を繰り返します。

12. カードをドラッグアンドドロップして位置を変更し、カードの関係をよりわかりやすくします。

演習問題 20e：Distributor Applicationのテスト

以下の演習では、これらのオブジェクトとその設定方法について詳しく学びます。 ここでは、Clarity管理者ユーザーとしてDistributor Applicationエントリーを作成し、レビューします。

これを行うには、

1. グローバルメニュー（ ）を開き、［Control Panel（コントロールパネル）］タブに移動します。 D4B8 Application EvaluationsとD4B8 Distributor Applicationsの両方がオブジェクトカテゴリーに表示されます。

   

2. D4B8 Distributor Applicationsを開きます。

3. 追加()をクリックして、エントリーを作成します。

4. 必須フィールドに入力し、 「保存」をクリックします。

   注：Business Nameを入力する必要があります。 この値は、後の演習のクライアント拡張機能で使用します。

5. Distributor Applicationsの概要ページに戻り、エントリーがテーブルに表示されていることを確認します。

   

   これで、このエントリーの評価を作成できます。

6. グローバルメニュー()を開き、［コントロールパネル］タブに移動し、D4B8 Application Evaluationsをクリックします。

7. 追加()をクリックして、エントリーを作成します。

8. ［Application to Evaluations］フィールドで、作成したアプリケーションを選択します。 ［Business Name］フィールドで識別されます。

9. 評価フォームに入力し、［保存］をクリックします。

10. Application Evaluationsの概要ページに戻り、エントリーがテーブルに表示されていることを確認します。

    

    この評価は、選択したアプリケーションに自動的に関連付けられます。 Distributor Applicationsの概要ページに戻り、アプリケーションを選択し、［Evaluation Notes］タブを開くと、これらのエントリが関連していることを確認できます。

    

演習問題 20f：Distributor Applicationsオブジェクトへのフィールドの追加

Distributor Applicationsオブジェクトにはすでにいくつかのカスタムフィールドが含まれていますが、Clarityでは応募者が他のブランドをリストアップするためのフィールドが必要です。 ここでは、Clarity Admin ユーザーとして、ディストリビューター アプリケーション オブジェクトにフィールドを追加します。

これを行うには、

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

2. ［Distributor Management App］フォルダをクリックします。

3. ［モデルビルダーで表示］をクリックします。

4. D4B8 ディストリビューター アプリケーション オブジェクトを探し、 フィールドまたはリレーションシップの追加をクリックして、 フィールドの追加を選択します。

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

   項目	値
   ラベル	Business Other Brands Offered
   項目名	businessOtherBrandsOffered
   種類	長いテキスト
   エントリーの翻訳を有効にする	False
   必須	False

   

   保存された各フィールドはすぐにオブジェクトに追加され、エントリの作成時にデフォルトのレイアウトで自動的に表示されます。 ただし、 Distributor Applicationオブジェクトにはカスタム レイアウトがあり、新しいフィールドを含めるように変更する必要があります。

   次に、オブジェクトのレイアウトにフィールドを追加します。

6. D4B8 Distributor Applicationのアクション()をクリックし、［Edit in Page View］を選択します。

7. プロンプトが表示されたら、 ページビューを開くを選択します。

8. ［レイアウト］タブに移動し、［Application Layout］をクリックします。

9. ［レイアウト］タブに移動します。

10. ［Business Details］ブロックを見つけ、［Add Field（フィールドを追加）］をクリックします。

    

11. オプションとして［Business Other Brands Offered］を選択し、フィールドサイズに1列ボックスを選択し、［保存（Save）］をクリックします。

    

12. パネル下部の［Save（保存）］をクリックします。

これで、エントリーを作成する際に新しいフィールドがレイアウトに表示されるようになりました。

演習問題 20g：候補リスト項目の追加

Clarityでは、候補リストを使用して、応募者が選択できる定義済みのオプションを作成します。 現在、商品種類ピックリストは空で、オプションは含まれていません。 ここでは、Clarity管理者ユーザーとして候補リストに商品を追加します。

これを行うには、

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

2. D4B8 Product Typesを選択します。

3. 追加()をクリックして、次の項目を作成します。

   名前	キー
   Eyeglasses	eyeglasses
   Sunglasses	sunglasses
   Lenses	lenses
   連絡先	連絡先
   その他	その他

4. 各商品をクリックし、外部参照コードを下記の値に置き換えます。

   名前	外部参照コード
   Eyeglasses	PRODUCT_TYPE_EYEGLASSES
   Sunglasses	PRODUCT_TYPE_SUNGLASSES
   Lenses	PRODUCT_TYPE_LENSES
   連絡先	製品タイプ連絡先
   その他	製品タイプその他

   

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

保存すると、Distributor Applicationの［Products of Interest］カスタムフィールドが、選択した候補リストの値で更新されます。 これにより、応募者は更新されたリストから希望する製品を選ぶことができます。

演習問題 20h：オブジェクト権限の割り当て

Clarityは、認証されたすべてのユーザーがdistributor applicationsを送信できるようにしたいと考えています。 ここでは、Distributor Applicationsにアクセスするデフォルトの［ユーザー］ロール権限を付与し、Clarity管理者ユーザーとしてエントリーを追加します。

これを行うには、

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

2. ［ユーザー］ロールを選択し、［権限の定義］タブに進みます。

3. 左側のメニューで、 コントロール パネル → オブジェクト → D4B8 ディストリビューター アプリケーションに移動します。

4. 次の権限を追加します。

   権限
   Application Permissions: Add to Page
   Application Permissions: View
   リソース権限 > D4B8 ディストリビューターアプリケーション: オブジェクトエントリの追加
   リソース権限 > D4B8 ディストリビューターアプリケーション: 削除
   リソース権限 > D4B8 ディストリビューター アプリケーション: 更新

   

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

6. ユーザー ロールに必要な権限があることを確認します。

   

   Clarityでは、事業開発チームのメンバーがすべての申請書を確認し、評価を記入できるようにしたいと考えています。 これを実現するために、事業開発マネージャーのロールに必要な権限を付与しましょう。

7. ［ロール］概要ページに戻り、［D4B8 Business Development Manager］を選択します。

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

9. 左側のメニューで、 コントロール パネル → オブジェクト → D4B8 ディストリビューター アプリケーションに移動します。

10. これらの権限を追加し、 ［保存］をクリックします。

    • D4B8 Distributor Applications

      権限
      Application Permissions: Access in Control Panel
      Application Permissions: View
      リソース権限 > D4B8 ディストリビューター アプリケーション: 更新
      リソース権限 > D4B8 ディストリビューター アプリケーション: 表示

    • D4B8 Application Evaluations

      権限
      Application Permissions: Access in Control Panel
      Application Permissions: View
      リソース権限 > D4B8 アプリケーション評価: オブジェクトエントリの追加
      リソース権限 > D4B8 アプリケーション評価: ディスカッションを追加
      リソース権限 > D4B8 アプリケーション評価: 削除
      リソース権限 > D4B8 アプリケーション評価: ディスカッションの削除
      リソース権限 > D4B8 アプリケーション評価: 更新
      リソース権限 > D4B8 アプリケーション評価: 更新に関する議論
      リソース権限 > D4B8 アプリケーション評価: 表示

    

11. テスト目的で、［担当者］タブに移動し、このロールをHarper Robertsに割り当てます。

ここまでで、 Clarityは、事業開発チームのマネージャーが提出された申請書を閲覧し、評価を作成し、申請書を承認または拒否できるようになりました。 次に、Clarityのワークフローの設定を完了させましょう。

演習問題 20i：許可ワークフローの有効化

Clarity では、アプリケーションに加えられた変更を確認して承認するためのワークフロー プロセスをすでに実装していますが、このワークフローが適切に機能するには マイクロサービス クライアント拡張 に依存しています。 現在、［Application State］フィールドの更新はすべて自動的に承認されています。 しかし、ワークフローでは、ユーザーが［Application State］フィールドをApprovedまたはDeniedに設定できるようにする前に、最終的なマネージャーのレビューが必要となることになっています。

ここでは、マイクロサービスのクライアント拡張をデプロイし、Clarity管理者ユーザーとしてLiferay UIでワークフロー定義の構成を完了します。

これを行うには、

1. ターミナルを開き、 [repository-root]/client-extensions/clarity-distributor-mgmt-action/ フォルダに移動します。

2. クライアント拡張プロジェクトをビルドし、Liferayインスタンスにデプロイします。 デプロイが成功したことを確認します。

   blade gw clean deploy
   

   または、Gradle Wrapperを使用します。

   ../../gradlew clean deploy
   

3. このコマンドをclarity-distributor-mgmt-action/フォルダから実行して、Spring Bootアプリケーションを起動します。

   blade gw bootRun
   

   または、Gradle Wrapperを使用します。

   ../../gradlew bootRun
   

4. アプリケーションが起動したら、http://localhost:58081/readyに移動します。 アプリケーションが使用可能になっている場合は、ページに「READY」と表示されます。

5. Liferayインスタンスで、グローバルメニュー（ ）を開き、［アプリケーション］タブに移動し、［ワークフロー］をクリックします。

   

   Distribution Manager Approvalワークフローは、すでに完全に設定されています。 Distributor Applicationオブジェクトに対してこの機能を有効にするだけです。

6. ［設定］ タブに移動します。

7. D4B8 Distributor Applicationの 編集 をクリックし、 ［D4B8 Distribution Manager Approval］を選択して、 ［Save（保存）］をクリックします。

   

これによりワークフローが有効になります。 オブジェクトのエントリーを編集し、そのステータスフィールドを［Under Review（レビュー中）］に設定することでテストできます。 この更新はワークフローアクションによって自動的に承認される必要があります。 次に、ステータスフィールドをApprovedに更新します。 エントリーのステータスはPendingとなります。 その後、Harper Robertsになりすましてワークフロー通知を確認できます。 その後、Robertsにタスクを割り当て、承認することができます。 完了すると、エントリーのステータスはApprovedとなります。

演習問題 20j：アカウント作成の自動化

オンボーディングフローを完了するために、Clarityは承認されたアプリケーションのアカウント作成を自動化したいと考えています。 前の演習でデプロイしたクライアント拡張機能は、このためのオブジェクトアクションのクライアント拡張が含まれています。 このアクションがトリガーされると、アプリケーションのビジネス名を使用してアカウントが作成され、申請者がそのアカウントに関連付けられ、申請者にアカウント管理者ロールが割り当てられます。 クライアント拡張機能はすでにデプロイされ、マイクロサービスは実行されているので、あとはオブジェクトアクションを作成してClarity管理者ユーザーとしての設定を完了するだけです。

これを行うには、

1. D4B8 Distributor Applicationオブジェクトの編集を開始します。

2. アクション タブに移動し、 追加 () をクリックします。

3. 基本情報タブに次の値を入力します。

   項目	値
   アクションのラベル	Set Up Account
   アクション名	setUpAccount
   説明	Standalone, create a business account for an approved application.
   有効	True

4. ［アクションビルダー］タブに進み、次の値を設定します。

   項目	値
   トリガー	単体
   操作	object-action-executor[function#clarity-distributor-mgmt-action-object-action-account]
   エラーメッセージ	Failed to create the business account.

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

   

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

7. D4B8 Business Development ManagerロールにSet Up Accountアクション権限を追加します。

8. 左側のメニューで、 コントロール パネル → オブジェクト → D4B8 ディストリビューター アプリケーションに移動します。

   権限
   リソース権限 > D4B8 ディストリビューターアプリケーション: action.setUpAccount

保存すると、Liferayは各オブジェクトエントリのアクションメニュー ( ) にオプションとして［Set Up Account］アクションを追加するので、手動でトリガーできるようになります。 今すぐ試してみましょう！

アクションをトリガーした後、グローバルメニュー（ ）を開き、［コントロールパネル］タブに移動し、［アカウント］をクリックします。 成功すると、新しいアカウントが表示されます。

演習問題 20k：通知の設定

現在、 ClarityのDistributor Management Appには、申請ステータスの変更を申請者に通知するための通知機能のみが含まれています。 しかし、新しい提出物を事業開発チームに知らせるための通知機能はありません。 チームメンバーが手動で新しい送信内容を確認することに頼ると、拡張性に欠け、人的エラーが発生する余地が生じ、機会損失やユーザーエクスペリエンスの低下につながります。

ここでは、通知テンプレートを追加し、Clarity管理者ユーザーとしてそれをトリガーするためのオブジェクトアクションを設定します。

これを行うには、

1. グローバルメニュー（）を開き、［コントロールパネル］タブに移動し、通知の下にある［Templates（テンプレート）］をクリックします。

   提供されるソリューションには、次のテンプレートが含まれています。

   • Application Approved
   • Application Denied
   • Application Received

   

2. 追加 をクリックし、 ユーザー通知を選択します。

   ここでテンプレートのデザインを開始できます。

   ヒント：オブジェクトフィールド参照にアクセスして、通知アクションをトリガーしたエントリーまたはユーザーのデータを動的に通知に入力することができます。 利用可能な変数を表示するには、項目の定義までスクロールダウンし、ドロップダウンメニューから［D4B8 Distributor Application」オブジェクトを選択します。

3. 基本情報に次の値を入力します。

   項目	値
   名前	D4B8 Application Submitted, Admin, User
   説明	Sends user notifications to an administrative role whenever a distributor application is submitted.

4. 設定に次の値を入力します。

   項目	値
   受信者	ロール
   ロール	D4B8 ビジネス開発マネージャー

5. コンテンツに次の値を入力します。

   項目	値
   件名	APP-[%D4B8DISTRIBUTORAPPLICATION_ID%]: [%D4B8DISTRIBUTORAPPLICATION_APPLICANTNAME%] submitted a distributor application for [%D4B8DISTRIBUTORAPPLICATION_BUSINESSNAME%].

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

   これで、このテンプレートを使用するDistributor Applicationsオブジェクトに通知アクションを追加することができます。

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

8. ［D4B8 Distributor Application］を選択し、［アクション］タブに移動します。

   提供されるソリューションには、次の3つの通知アクションが含まれます。

   • Application Received
   • Application Approved
   • Application Denied

   

9. ［追加］をクリックして、新しいオブジェクトアクションを作成します。

10. 基本情報タブに次の値を入力します。

    項目	値
    アクションのラベル	Application Submitted
    アクション名	applicationSubmitted
    説明	On After Add, send notifications to administrative users.
    有効	True

    

11. ［アクションビルダー］タブに進み、次の値を設定します。

    項目	値
    トリガー	追加後
    条件	該当なし
    操作	通知
    コマース通知テンプレート	D4B8 Application Submitted, Admin, User

    

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

これにより、ユーザーが申請書を提出するたびに、事業開発マネージャーのロールを持つ従業員に自動的に通知されるようになりました。 通知をテストするには、別のアプリケーションエントリを作成し、Harper Robertsで代理ログインします。 プラットフォーム通知が表示されます。

演習問題 21：ユーザーグループとロールに応じたエクスペリエンスのカスタマイズ

セグメンテーションでは、共通の特徴や行動に基づいて、Webサイトの訪問者やユーザーをカテゴリーにグループ化します。 オーディエンスをセグメント化することで、Webサイトのエクスペリエンスをカスタマイズし、より関連性の高いコンテンツを配信し、最終的にエンゲージメントを高めることができます。

ここでは、Clarity管理者ユーザーとして代理店ユーザー専用のセグメントを作成します。

これを行うには、

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

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

2. 次の属性を持つ新しいユーザーを追加します。

   項目	値
   画像	[repository-folder]/classroom-exercises/lesson-21/terrence-wheatley.png
   スクリーン名	terrencewheatley
   メールアドレス	[e-mail]
   役職	Distributor Representative
   名	Terrence
   姓	Wheatley
   パスワード	learn

3. Terrence Wheatleyを代理店ユーザーグループに追加します。

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

5. ［新規］をクリックしてセグメントを作成します。

6. タイトルには、Distributorsを入力します。

7. プロパティメニューから、ユーザーセクションを使用して、［標準ロール］を画面のメイン部分にドラッグします。

8. 条件をequalsのままにし、［選択］ボタンで［Distributor Representative］ロールを選択します。

9. プロパティメニューから、ユーザーセクションを使用して、［ユーザーグループ］を画面のメイン部分にドラッグします。

10. 条件をequalsのままにし、［選択］ボタンで［代理店］ユーザーグループを選択します。

11. 接続詞を Orに変更します。

    ここでは、ユーザーグループのユーザーと、直接割り当てられたDistributor Representativeロールを持つユーザーの両方のシナリオを取り上げます。

    

12. ［View Members（メンバーを表示）］をクリックし、Terrence WheatleyとDaniel Raymondがセグメント条件を満たしていることを確認します。

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

14. ホームページにアクセスし、編集（ ）をクリックします。

15. ページ上部の［エクスペリエンス］ドロップダウンをクリックし、［新しいエクスペリエンス］を選択します。

16. エクスペリエンス名にはDistributorと入力します。

17. オーディエンスには、Distributorsを選択します。

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

19. ［Distributor］の行でエクスペリエンスの優先度を上げる() をクリックし、セグメントをデフォルト項目の上に配置します。

    注：エクスペリエンス順で重要度が決まります。 内部的には、Liferayはユーザーが属するセグメントをチェックし、最も優先度の高いマッチを使用します。

    代理店のロールを再配置すると、レコードのラベルが「アクティブ」になります。

20. バナーのタイトルテキストをWelcome Back Elevate Your Inventory with Premium Eyewearに変更します。

21. 代理店は申請する必要がないため、［Distributor Promo］コンテナを非表示にします。

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

23. アプリケーションバーのシミュレーションメニュー()から、さまざまなエクスペリエンスを試すことができます。

24. ［Preview By Segments］を選択します。 次に、セグメント ドロップダウン メニューを使用して、 すべてのユーザー と ディストリビューター を切り替え、メイン ウィンドウで対応する変更を確認します。

25. Terrence WheatleyまたはDaniel Raymondになりすまして、変更点を見てみましょう。

演習問題 22a：JMeterによる負荷テストの実行

JMeterは、オープンソースのパフォーマンスおよび負荷テストツールです。 ここでは、これを使用してClarityのサイトのパフォーマンスを確認します。

注：テストシナリオによっては、より多くのリソース（RAMとCPU）を備えたPCが推奨されます。

これを行うには、

1. 自分のマシンでJMeterを実行します。

2. ［ファイル］メニューから［公開］をクリックします。

3. トレーニングワークスペースで、classroom-exercises/lesson-22/フォルダに移動し、Clarity.jmxファイルを選択します。

   

4. ［実行］メニューから［開始］をクリックします。

   設定によっては、テストの実行に数分かかる場合があります。 テストの実行中は、右上隅の時計に時間が表示されます。 時間が止まるとテストは完了です。

5. 左のメニューで［Thread Group］をクリックしてセクションを展開し、［Summary Report］をクリックします。

6. レポートを確認し、パフォーマンスの異常値を見つけます。

   

7. 左のメニューで、［Response Time Graph］をクリックします。

8. ［設定］タブで、［Display Graph］をクリックします。

   このグラフは、パフォーマンスの異常値を特定するためにも使用できます。

演習問題 22b：ページパフォーマンスの監査

ここでは、ページ監査ツールを使用して、Clarity管理者ユーザーとして問題のページを調査します。

1. Liferayインスタンスで、問題のページにアクセスしてパフォーマンスの問題を調査します。

2. アプリケーションバーのページ監査（ ）をクリックします。

   ［Page Audit（ページ監査）］のサイドパネルには、読み込み時間が最も長いものから最も短いものの順に並べられたすべてのページフラグメントのリストが表示されます。

   

3. ［Performance（パフォーマンス）］タブで、読み込み時間が最も長いフラグメントを特定します。

次に、このフラグメントを調べて修正します。

演習問題 22c：パフォーマンス問題の修正

ここでは、Clarity管理者ユーザーとして、パフォーマンスの問題を修正するために遅いフラグメントを編集します。

これを行うには、

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

2. 前の演習で特定した問題の部分の編集を開始します。

3. HTMLウィンドウで、[#assign x = sleeper.sleep(3) /]行を削除します。

   

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

5. フラグメントに加えられた変更を、Clarityのサイトでフラグメントが使用されているすべてのインスタンスにプロパゲートします。

問題のフラグメントが修正されたら、Clarityサイトを再テストできます。

演習問題 22d：JMeterによるパフォーマンスの再評価

JMeterで別のパフォーマンステストを実行し、修正を確認します。

1. JMeterに戻って、［実行］メニューから、［すべてクリア］をクリックします。

2. ［実行］メニューから［開始］をクリックし、負荷テストを再度実行します。

3. 終了したら、 Summary ReportとResponse Time Graphを再度確認します。 以前パフォーマンスの問題があったページには、もう問題がないことを確認してください。

   

4. Liferayインスタンスで、ページ監査ツールを使って問題のページをもう一度確認してください。

   フラグメントの読み込みが遅い問題が解決されたことを確認してください。

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