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

• 演習19a：オブジェクト定義の作成
• 演習19b：フォームの構築
• 演習19c：お問い合わせへの回答を表示するダッシュボードの作成
• ボーナス演習：複数ステップのフォームを作成する
• 演習20a：テーマクライアント拡張機能の変更
• 演習20b：ファビコン用のクライアント拡張機能の展開
• 演習20c：新しいCSSクライアント拡張機能の作成
• 演習20d：ディストリビューターアプリケーションの設定と展開
• 演習20e：ディストリビューターアプリケーションのテスト
• 演習20f：ディストリビューターアプリケーションオブジェクトへのフィールドの追加
• 演習20g：選択リスト項目の追加
• 演習20h：オブジェクト権限の割り当て
• 演習20i：承認ワークフローの有効化
• 演習20j：アカウント作成の自動化
• 演習20k：通知の設定
• 演習21：ユーザーグループと役割に応じたエクスペリエンスのカスタマイズ
• 演習22a：JMeterを使用して負荷テストを実行する
• 演習22b：ページパフォーマンスの監査
• 演習22c：パフォーマンス問題の解決
• 演習22d：JMeterを使用したパフォーマンスの再評価

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

Clarity社は、社外ユーザーとのコミュニケーションを効率化するために、使いやすい問い合わせフォームを作成したいと考えています。 Liferay Objectsは、このフォームを作成し、お問い合わせページにシームレスに統合するためのツールを提供します。

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

そのためには、

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

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

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

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

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

   分野	価値
   ラベル	お問い合わせ
   複数形ラベル	お問い合わせ
   オブジェクト名	お問い合わせ

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

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

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

7. 「詳細」タブで、以下の設定を行います。

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

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

   オブジェクト定義の設定が完了したら、カスタムフィールドを追加して、フォームで収集したい情報の種類を指定できます。

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

10. [追加] () をクリックし、これらの詳細を入力して、 [保存] をクリックします。

    分野	価値
    ラベル	フルネーム
    フィールド名	フルネーム
    タイプ	文章
    必須	はい
    独自の値のみを受け入れる	いいえ

11. 残りのフィールドを作成するには、前の手順を繰り返してください。

    ラベル	フィールド名	タイプ	必須	独自の価値のみ
    電子メールアドレス	電子メールアドレス	文章	はい	いいえ
    電話	電話	文章	はい	いいえ
    州または地方	州または県	文章	いいえ	いいえ
    市	市	文章	いいえ	いいえ
    コメント	コメント	長文	いいえ	該当なし

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

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

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

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

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

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

そのためには、

1. Clarityの公開企業ウェブサイトにアクセスし、「お問い合わせ」ページの編集を開始してください。

2. フォームコンテナ フラグメントをコンタクトフォームコンテナにドラッグアンドドロップします。

3. ドロップダウンメニューをクリックし、「お問い合わせ」オブジェクトを選択してください。

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

5. フォームコンテナを選択し、以下の設定を構成してください。

   タブ	設定	価値
   一般 > フレーム	幅	400ピクセル
   スタイル	パッド	スペーサー4（全側面）
   スタイル	背景	#FFFFFF
   スタイル	境界半径	15ピクセル

6. フィールドフラグメントを以下の順序でドラッグアンドドロップしてください。

   • フルネーム
   • 電子メールアドレス
   • 電話
   • 州または地方
   • 市
   • コメント

7. これらのフィールドフラグメントをそれぞれ選択し、この設定を構成してください。

   タブ	設定	価値
   スタイル	パッド	スペーサー3（下側）

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

   

9. フォームに入力内容を送信してテストしてください。

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

    

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

演習19c：お問い合わせへの回答を表示するダッシュボードの作成

Clarityは問い合わせを継続的に受け取っているため、チームは寄せられた問い合わせを確実に追跡し、対応するための方法を必要としている。 これを実現するために、Clarityは「お問い合わせ」オブジェクトのワークフローを定義し、サイト訪問者からの未回答の問い合わせを表示するダッシュボードを作成したいと考えています。 この演習では、Clarity管理者ユーザーとして、これら2つの要素を実装します。

ワークフローの作成

ここでは、新規リクエストがあった場合に販売代理店担当者に通知を送信するシンプルなワークフローを作成します。

1. グローバルメニュー () を開き、 アプリケーション → プロセスビルダー に移動します。

2. 新しいワークフローを作成するには、 新規 をクリックしてください。

3. 名前には、 お問い合わせ フォローアップ を入力してください。

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

   

5. サイドパネルで、タスクノードのこれらの設定を構成します。

   分野	価値
   ラベル	フォローアップ
   ノード名	フォローアップ
   説明	販売代理店担当者に、新規のお問い合わせ内容の確認を依頼してください。

6. マウスカーソルをスタートノードの上に移動させ、矢印をタスクノードまでドラッグします。

   

7. サイドパネルで、トランジションラベルのこれらの設定を構成します。

   分野	価値
   ラベル	レビュー
   トランジション名	レビュー_お問い合わせ_エントリー
   デフォルト	はい

8. 同様に、タスクノードからエンドノードへ矢印をドラッグします。

   

   これはワークフローの進行状況を定義するものです。

9. サイドパネルで、2番目のトランジションラベルの設定を構成します。

   分野	価値
   ラベル	承認する
   トランジション名	承認_お問い合わせ_エントリー
   デフォルト	はい

   

10. フォローアップ ノードをクリックして設定を開始します。

11. 「割り当て」の下にある「アセット作成者」をクリックします。

12. 割り当てタイプには、 ロール を選択します。

13. 役割については、 販売代理店担当者 を選択してください。

    

14. 「フォローアップ」ノードの編集を続けるには、 戻る () をクリックしてください。

15. 通知の下で、 新規 をクリックします。

16. 名前には と入力し、フォローアップタスクには と入力します。

17. テンプレートには、次のテキストを入力してください。

    フォローアップが必要な新しい ${entryType} リクエストがあります。
    

18. 通知タイプについては、 ユーザー通知 を選択します。

19. 受信者タイプには、 役割 を選択します。

20. 役割名には、 販売代理店担当者 を選択します。

    

21. 設定を開始するには、終了ノードをクリックしてください。

22. 「アクション」の下にある「 新規」をクリックします。

23. 新しいアクションに以下の属性を設定してください。

    分野	価値
    名前	入場承認済み
    タイプ	更新されたステータス
    状態	承認された
    実行タイプ	入場時

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

    

Clarityには、エントリーを販売代理店担当者ロールを持つユーザーにルーティングするワークフローが追加されました。 次に、それを「お問い合わせ」オブジェクトで使用します。

ワークフローをオブジェクトに添付する

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

1. グローバルメニュー () を開き、 Clarity Public Enterprise Web サイト に移動します。

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

3. お問い合わせアセットタイプの場合は、 編集 をクリックしてください。

4. お問い合わせフォローアップ ワークフローを選択し、 保存をクリックします。

   

素晴らしい！ お問い合わせ オブジェクトがワークフローを使用するように正常に構成されました。 これにより、販売代理店担当者の役割を持つユーザーは、新規提出に関する通知を受け取り、それらを確認して対応できるようになります。 次に、保留中のタスクを表示するためのユーザーインターフェースを作成します。

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

担当者が受信したリクエストを監視できるように、Clarityは保留中の問い合わせ内容を明確で構造化されたユーザーインターフェースで表示する方法を必要としています。 ここでは、Liferayデータセットを有効にし、それを使用してこのUIを実装します。

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

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

3. 「リリース」タブで、以下の機能を有効にしてください。

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

   

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

4. グローバルメニュー () を開き、 コントロールパネル → データセット に移動します。

5. をクリックして を追加し、新しいデータセットを作成して、以下の詳細を入力してください。

   分野	価値
   名前	お問い合わせへの回答
   RESTアプリケーション	/c/連絡先
   RESTスキーマ	お問い合わせ
   RESTエンドポイント	/scopes/{scopeKey}

   

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

7. お問い合わせへの回答 データセットをクリックして編集を開始します。

8. パラメータ入力ボックスにこのパラメータを追加してください。

   フィルター=(ステータス/任意の(x:(x eq 1)))
   

   注記: このフィルターは、ステータス値が 1と等しいかどうかを確認します。これは、保留中のステータスのエントリに対応します。

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

10. 表示モード タブに移動します。 ここでは、さまざまな視覚化形式（表、リスト、カードなど）において、ユーザーが閲覧できるデータを設定できます。

11. リスト タブに移動します。

12. タイトル行に 追加 () をクリックし、 データソースから割り当て を選択します。

    

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

    

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

15. 説明行に 追加 () をクリックし、 データソースから割り当て を選択します。

16. コメント フィールドを選択します。

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

    

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

データセットをページに表示する

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

1. Clarity Public Enterprise の Web サイト にアクセスしてください。

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

3. 新しいページを作成するには、 新規 をクリックしてください。

4. プライマリマスターページ テンプレートを選択し、 お問い合わせへの回答という名前を付けます。

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

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

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

8. お問い合わせへの回答 データセットを選択し、 保存をクリックします。

   

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

   ワークフローの設定後、お問い合わせフォームからの入力が一切行われていないため、現在表示可能な保留中のエントリはありません。

10. すべてが期待どおりに動作することを確認してください。

    • お問い合わせフォームを使用して、サンプル作品をいくつか送信してください。
    • その後、「お問い合わせへの回答」ページに戻ると、保留中のリクエストがデータセットに表示されます。
    • 次に、ダニエル・レイモンドとして（またはダニエル・レイモンドになりすまして）サインインし、販売代理店担当者がワークフロー通知を受け取ったことを確認してください。
    • 最後に、ワークフロータスクをダニエル・レイモンドに割り当て、承認し、データセットページに戻ってエントリが削除されたことを確認してください。

    

素晴らしい！ このデータセットは現在、ページ上に公開されており、ユーザーは保留中の「お問い合わせ」エントリをリアルタイムで閲覧できるようになっています。

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

ボーナス演習：複数ステップのフォームを作成する

チャレンジ:

ユーザーエクスペリエンスを向上させるため、「お問い合わせ」フォームを複数ステップのフォームに変換する。

要件:

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

成功基準:

複数ステップのフォームは、各ステップでユーザーが入力した情報を収集します。

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

クライアント拡張機能は、カスタマイズをLiferayコアから分離します。 これにより、アップデートが簡素化されるとともに、お客様が希望するテクノロジーや導入モデルを自由に利用できるようになります。 前述のとおり、グローバルCSSクライアント拡張機能は、Liferay DXPにおけるスタイリングを拡張する方法を提供します。 ここでは、トレーニングワークスペースに用意されているクライアント拡張機能を更新し、Walter Douglasとして変更内容をデプロイします。

そのためには、

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

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

2. Clarity Public Enterpriseのウェブサイトで、ホームページにアクセスしてください。

   Clarityの「違いを見てください」バナーはベージュの背景（つまり、 #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/ フォルダーに移動して、次のコマンドを実行してクライアント拡張機能をビルドおよびデプロイします。

   ブレードGWクリーンデプロイ
   

   またはGradle Wrapperを使用する：

   ../../gradlew clean deploy
   

6. コマンドが正常に実行されることを確認してください。

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

8. コンテナの背景が灰色になっていることを確認してください。

   

   ヒント: グローバル CSS 値を変更する場合、変更内容を確認するためにブラウザのキャッシュをクリアする必要がある場合があります。

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

次に、クライアント拡張機能を使用してサイトのファビコンを更新する方法を学びます。

演習20b：ファビコン用のクライアント拡張機能の展開

前回の演習では、Liferayのユーザーインターフェースを使ってサイトのファビコンを手動で設定しました。 クライアント拡張機能を使用すると、ファビコンを他のフロントエンドクライアント拡張機能と一緒にデプロイすることで、サイトの更新を効率化できます。 ここでは、クライアント拡張機能を使用して、Clarityのファビコンをウォルター・ダグラスに更新します。

そのためには、

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

2. クライアント拡張機能をビルドしてデプロイするには、次のコマンドを実行してください。

   ブレードGWクリーンデプロイ
   

   またはGradle Wrapperを使用する：

   ../../gradlew clean deploy
   

3. コマンドが正常に実行されることを確認してください。

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

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

6. デザイン タブで、 をクリックし、ファビコン ( を選択します。

7. モーダルウィンドウで、 クライアント拡張機能 タブに移動し、 Clarityテーマファビコンを選択します。

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

9. ホームページにアクセスして、ページのファビコンが更新されていることを確認してください。

   

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

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

そのためには、

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

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

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

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

   

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

6. Clarity Public Enterprise Web サイトの ホーム ページに移動します。

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

8. 下にスクロールして、 CSSクライアント拡張機能を追加 をクリックします。

9. Clarity Animation を選択し、 Add をクリックします。

   

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

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

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

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

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

14. 編集を開始するには、 Clarity Gradient Container フラグメントを選択します。

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

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

    

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

    フラグメントを更新したので、これらの変更をサイトページの既存のフラグメントインスタンスに反映させることができます。

17. Clarity Gradient Container フラグメントの Actions () をクリックし、 View Usages を選択します。

18. すべてのチェックボックスをオンにして、 伝播 をクリックします。

    

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

19. ホームページにアクセスして、アニメーションが正しく動作することを確認してください。

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

    

次に、オブジェクトとクライアント拡張機能を組み合わせて、複雑なビジネスロジックを持つカスタムソリューションを構築する方法を見ていきましょう。

演習20d：ディストリビューターアプリケーションの設定と展開

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

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

2. クライアント拡張機能をビルドしてデプロイするには、次のコマンドを実行してください。

   ブレードGWクリーンデプロイ
   

   またはGradle Wrapperを使用する：

   ../../gradlew clean deploy
   

3. コマンドが正常に実行されることを確認してください。

   お客様のLiferayインスタンスに、2つの新しいオブジェクト定義とその選択リストが追加されました。 それでは、それらを詳しく見ていきましょう。

4. Clarity Admin ユーザーとしてログインした状態で、 グローバル メニュー () を開き、 コントロール パネル → ピック リスト に移動します。

   選択リストとは、オブジェクト定義における単一選択フィールドおよび複数選択フィールドで使用できる、あらかじめ定義された項目のリストです。 バッチクライアント拡張機能によってインポートされた選択リストは以下のとおりです。

   • D4B8 年間購入量
   • D4B8 アプリケーションの状態
   • D4B8評価スコア
   • D4B8 ビジネスタイプ
   • D4B8の決定
   • D4B8配信チャネル
   • D4B8 分布地域
   • D4B8 注文タイプ
   • D4B8製品ラベル
   • D4B8製品タイプ
   • D4B8推奨事項

   

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

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

   • D4B8 ディストリビューターアプリケーション
   • D4B8アプリケーション評価

   

   オブジェクト定義を追加していくにあたり、オブジェクトを整理するためのフォルダを作成し、そこにD4B8オブジェクトを配置しましょう。

6. オブジェクトフォルダを追加するには、 をクリックして () を追加します。

7. ラベルには、 ディストリビューター管理アプリ と入力します。

8. をクリックしてフォルダー を作成します。

   

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

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

10. 左側のパネルで、D4B8 ディストリビューター アプリケーションの アクション () をクリックし、 現在のフォルダーに移動 を選択します。

    

11. D4B8アプリケーション評価についても、この手順を繰り返してください。

12. カードをドラッグ＆ドロップして位置を変え、カード同士の関係性をよりよく把握しましょう。

演習20e：ディストリビューターアプリケーションのテスト

以下の演習では、これらのオブジェクトとその構成方法についてさらに詳しく学びます。 ここでは、Clarity管理者ユーザーとして、販売代理店申請のエントリを作成および確認します。

そのためには、

1. グローバルメニュー () を開き、 コントロールパネル に移動します。 D4B8アプリケーション評価とD4B8ディストリビューターアプリケーションはどちらも「オブジェクト」カテゴリに表示されるはずです。

   

2. D4B8 ディストリビューター アプリケーション を開きます。

3. をクリックして （）を追加し、エントリを作成します。

4. 必要な項目を入力し、 保存 をクリックしてください。

   注記: 会社名を入力する必要があります。 この値は、後の演習でクライアント拡張機能とともに使用します。

5. 販売代理店申請の概要ページに戻り、ご自身の情報が表に表示されていることを確認してください。

   

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

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

7. をクリックして （）を追加し、エントリを作成します。

8. 「評価対象アプリケーション」欄で、作成したアプリケーションを選択してください。 それは「会社名」フィールドによって識別されます。

9. 評価フォームに記入し、 保存 をクリックしてください。

10. アプリケーション評価の概要ページに戻り、該当する項目が表に表示されていることを確認してください。

    

    この評価は、選択されたアプリケーションに自動的に関連付けられます。 これらのエントリが関連していることは、 ディストリビューター アプリケーション 概要ページに戻り、アプリケーションを選択して、 評価ノート タブに移動することで確認できます。

    

演習20f：ディストリビューターアプリケーションオブジェクトへのフィールドの追加

販売代理店申請オブジェクトには既にいくつかのカスタムフィールドが含まれていますが、Clarityでは申請者が取り扱う他のブランドをリストアップするためのフィールドが1つ必要です。 ここでは、Clarity管理者ユーザーとして、ディストリビューターアプリケーションオブジェクトにフィールドを追加します。

そのためには、

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

2. ディストリビューター管理アプリ フォルダーをクリックします。

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

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

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

   分野	価値
   ラベル	ビジネス向けその他のブランドも取り扱っています
   フィールド名	ビジネスその他の提供ブランド
   タイプ	長文
   エントリ翻訳を有効にする	間違い
   必須	間違い

   

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

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

6. D4B8 ディストリビューター アプリケーションに対して アクション () をクリックし、 ページ ビューで編集 を選択します。

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

8. レイアウト タブに移動し、 アプリケーションレイアウト をクリックします。

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

10. ビジネス詳細ブロックを見つけて、 フィールドの追加 をクリックします。

    

11. オプションとして「 ビジネス その他のブランド提供 」を選択し、フィールドサイズに単一列ボックスを選択して、「 保存」をクリックします。

    

12. パネル下部の をクリックして を保存してください。

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

演習20g：選択リスト項目の追加

Clarityは選択リストを使用して、応募者が選択できる事前定義されたオプションを作成します。 現在、「製品タイプ」の選択リストは空で、オプションは何も含まれていません。 ここでは、Clarity管理者ユーザーとして選択リストにアイテムを追加します。

そのためには、

1. グローバルメニュー () を開き、 コントロールパネル → ピックリスト に移動します。

2. D4B8 製品タイプ を選択します。

3. をクリックして （）を追加し、以下のアイテムを作成します。

   名前	鍵
   眼鏡	眼鏡
   サングラス	サングラス
   レンズ	レンズ
   連絡先	連絡先
   他の	他の

4. 各項目をクリックし、外部参照コードを以下の値に置き換えてください。

   名前	外部参照コード
   眼鏡	製品タイプ：眼鏡
   サングラス	製品タイプ：サングラス
   レンズ	製品タイプ：レンズ
   連絡先	製品タイプ_連絡先
   他の	製品タイプ_その他

   

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

保存されると、ディストリビューターアプリケーションの 関心のある製品 カスタムフィールドが、選択されたピックリストの値で更新されます。 これにより、応募者は更新されたリストから希望の製品を選択できるようになります。

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

Clarityは、認証済みのすべてのユーザーが販売代理店申請を提出できるようにしたいと考えています。 ここでは、デフォルトの ユーザー ロールに、ディストリビューターアプリケーションにアクセスし、Clarity管理者ユーザーとしてエントリを追加する権限を付与します。

そのためには、

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

2. ユーザー ロールを選択し、 権限の定義 タブに移動します。

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

4. 以下の権限を追加してください。

   許可
   アプリケーションの権限: ページに追加
   アプリケーションの権限: 表示
   リソース権限 > D4B8 ディストリビューターアプリケーション: オブジェクトエントリの追加
   リソース権限 > D4B8 ディストリビューターアプリケーション: 削除
   リソース権限 > D4B8 ディストリビューターアプリケーション: 更新

   

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

6. ユーザーロールに必要な権限が付与されていることを確認してください。

   

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

7. 役割 概要ページに戻り、 D4B8 ビジネス開発マネージャー を選択します。

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

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

10. これらの権限を追加し、 保存 をクリックしてください。

    • D4B8ディストリビューターアプリケーション

      許可
      アプリケーションの権限: コントロールパネルでのアクセス
      アプリケーションの権限: 表示
      リソース権限 > D4B8 ディストリビューターアプリケーション: 更新
      リソース権限 > D4B8 ディストリビューターアプリケーション: 表示

    • D4B8アプリケーション評価

      許可
      アプリケーションの権限: コントロールパネルでのアクセス
      アプリケーションの権限: 表示
      リソース権限 > D4B8 アプリケーション評価: オブジェクトエントリの追加
      リソース権限 > D4B8 アプリケーション評価: ディスカッションを追加
      リソース権限 > D4B8 アプリケーション評価: 削除
      リソース権限 > D4B8 アプリケーション評価: ディスカッションを削除
      リソース権限 > D4B8 アプリケーション評価: 更新
      リソース権限 > D4B8 アプリケーション評価: 更新に関する議論
      リソース権限 > D4B8 アプリケーション評価: 表示

    

11. テスト目的で、 担当者 タブに移動し、この役割を Harper Roberts に割り当ててください。

素晴らしい！ Clarityを使えば、事業開発チームのマネージャーは提出された申請書を閲覧したり、評価を作成したり、申請を承認または却下したりできるようになります。 次に、Clarityのワークフローの設定を完了させましょう。

演習20i：承認ワークフローの有効化

Clarity は既にアプリケーションへの変更をレビューおよび承認するためのワークフロー プロセスを実装していますが、このワークフローが正しく機能するには マイクロサービス クライアント拡張機能 が必要です。 現在、 アプリケーション状態 フィールドへのすべての更新は自動的に承認されます。 ただし、ワークフローでは、ユーザーが アプリケーション状態 フィールドを 承認 または 拒否 に設定することを許可する前に、最終的なマネージャーのレビューが必要になるはずです。

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

そのためには、

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

2. クライアント拡張プロジェクトをビルドして、Liferayインスタンスにデプロイします。 デプロイが正常に完了したことを確認してください。

   ブレードGWクリーンデプロイ
   

   またはGradle Wrapperを使用する：

   ../../gradlew clean deploy
   

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

   blade GW bootRun
   

   またはGradle Wrapperを使用する：

   ../../gradlew bootRun
   

4. アプリケーションが起動したら、http://localhost:58081/ready にアクセスしてください。 アプリケーションが使用可能になると、ページに「準備完了」と表示されます。

5. Liferay インスタンスで、 グローバル メニュー () を開き、 アプリケーション → プロセス ビルダー に移動します。

   

   配布マネージャーの承認ワークフローは既に完全に設定済みです。 ディストリビューターアプリケーションオブジェクトでそれを有効にするだけで済みます。

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

7. D4B8 ディストリビューター アプリケーションに対して 編集 をクリックし、 D4B8 ディストリビューション マネージャー承認を選択して、 保存 をクリックします。

   

これによりワークフローが実現します。 これで、オブジェクトエントリを編集して、その状態フィールドを 審査中 に設定することでテストできます。 この更新はワークフローアクションによって自動的に承認されるはずです。 次に、状態フィールドを 承認済み に更新します。 エントリのステータスは 保留中 である必要があります。 その後、ハーパー・ロバーツになりすまして、ワークフロー通知を確認できます。 その後、そのタスクをロバーツに割り当てて承認することができます。 完了すると、エントリのステータスは 承認済み になります。

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

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

そのためには、

1. D4B8 ディストリビューター アプリケーション オブジェクトの編集を開始します。

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

3. 基本情報タブに以下の値を入力してください。

   分野	価値
   アクションラベル	アカウントの設定
   アクション名	アカウント設定
   説明	単独で、承認されたアプリケーション用のビジネスアカウントを作成します。
   アクティブ	真実

4. アクションビルダー タブに移動して、以下の値を設定します。

   分野	価値
   トリガー	スタンドアロン
   アクション	オブジェクトアクション実行者[function#clarity-distributor-mgmt-action-object-action-account]
   エラーメッセージ	ビジネスアカウントの作成に失敗しました。

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

   

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

7. D4B8のビジネス開発マネージャーの役割に、「アカウント設定」アクションの権限を追加します。

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

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

保存すると、Liferay は各オブジェクトエントリの アクション メニュー () にオプションとして「アカウントの設定」アクションを追加するので、手動でトリガーできます。 さあ、試してみましょう！

アクションをトリガーした後、 グローバルメニュー () を開き、 コントロールパネル → アカウント に移動します。 成功すれば、新しいアカウントが表示されます。

演習20k：通知の設定

現在、Clarityの販売代理店管理アプリには、応募者の申請状況の変更を通知する機能のみが含まれています。 しかし、彼らには新規応募があった際に事業開発チームに通知する機能がない。 チームメンバーが手動で新規提出物を確認する方式は拡張性に欠け、人為的ミスが発生する余地が残るため、機会損失やユーザーエクスペリエンスの低下につながる。

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

そのためには、

1. グローバルメニュー () を開き、通知の下にある コントロールパネル → テンプレート に移動します。

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

   • 申請が承認されました
   • 申請は却下されました
   • 申請受付済み

   

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

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

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

3. 基本情報として以下の値を入力してください。

   分野	価値
   名前	D4B8 アプリケーションが送信されました、管理者、ユーザー
   説明	販売代理店申請が送信されるたびに、管理者ロールにユーザー通知を送信します。

4. 設定には以下の値を入力してください。

   分野	価値
   受信者	役割
   役割	D4B8 ビジネス開発マネージャー

5. コンテンツにこの値を入力してください。

   分野	価値
   主題	APP-[%D4B8DISTRIBUTORAPPLICATION_ID%]: [%D4B8DISTRIBUTORAPPLICATION_APPLICANTNAME%] が [%D4B8DISTRIBUTORAPPLICATION_BUSINESSNAME% ] の販売代理店申請を提出しました。

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

   これで、このテンプレートを使用する通知アクションをディストリビューターアプリケーションオブジェクトに追加できるようになりました。

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

8. D4B8 ディストリビューター アプリケーション を選択し、 アクション タブに移動します。

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

   • 申請受付済み
   • 申請が承認されました
   • 申請は却下されました

   

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

10. 基本情報タブに以下の値を入力してください。

    分野	価値
    アクションラベル	申請書が提出されました
    アクション名	申請が提出されました
    説明	追加後、管理者ユーザーに通知を送信する。
    アクティブ	真実

    

11. アクションビルダー タブに移動して、以下の値を設定します。

    分野	価値
    トリガー	追加後
    状態	該当なし
    アクション	通知
    通知テンプレート	D4B8 アプリケーションが送信されました、管理者、ユーザー

    

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

ユーザーが応募書類を提出すると、ビジネス開発マネージャーの役割を持つ従業員に自動的に通知されるようになりました。 通知をテストするには、別のアプリケーションエントリを作成し、ハーパー・ロバーツになりすましてください。 プラットフォームからの通知が表示されるはずです。

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

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

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

そのためには、

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

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

2. 以下の属性を持つ新規ユーザーを追加してください。

   分野	価値
   画像	[リポジトリフォルダ]/classroom-exercises/lesson-21/terrence-wheatley.png
   ハンドルネーム	テレンス・ウィートリー
   電子メールアドレス	[e-mail]
   役職	販売代理店担当者
   ファーストネーム	テレンス
   苗字	ウィートリー
   パスワード	学ぶ

3. Terrence Wheatley氏を販売代理店ユーザーグループに追加してください。

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

5. セグメントを作成するには、 新規 をクリックします。

6. タイトルには、 ディストリビューター と入力してください。

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

8. 条件を と のままにして、[選択] ボタンを使用して販売代理店担当者の役割を選択します。

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

10. 条件を と のままにして、[選択] ボタンを使用してディストリビューターのユーザー グループを選択します。

11. 接続詞を または に変更してください。

    ここでは、ユーザーグループに属するユーザーと、販売代理店担当者の役割が直接割り当てられているユーザーの両方のシナリオについて説明します。

    

12. メンバーを表示 をクリックして、Terrence Wheatley と Daniel Raymond がセグメント条件を満たしていることを確認してください。

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

14. ホームページに移動して、 編集 （）をクリックします。

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

16. エクスペリエンス名には、 ディストリビューター と入力してください。

17. 視聴者については、 ディストリビューター を選択してください。

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

19. ディストリビューター行の 優先エクスペリエンス () をクリックすると、セグメントがデフォルト項目の上に配置されます。

    注: 経験値の順序によって優先順位が決まります。 Liferayは内部的に、ユーザーが属するセグメントをチェックし、最も優先順位の高い一致を使用します。

    ディストリビューターの役割が再配置されると、レコードのラベルは「アクティブ」と表示されるようになります。

20. バナーのタイトルテキストを おかえりなさい! に変更してください。 プレミアムアイウェアで在庫をグレードアップしましょう。

21. 販売代理店は申請する必要がないため、販売代理店向けプロモーションのコンテナを非表示にします。

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

23. アプリケーションバーのシミュレーションメニュー（）から、さまざまな体験を試すことができます。

24. セグメント別にプレビューするオプションを選択してください。 次に、セグメントのドロップダウンメニューを使用して、 誰でも と 販売業者 を切り替え、メインウィンドウで対応する変更を確認します。

25. テレンス・ウィートリーまたはダニエル・レイモンドになりきって、変化を確認してみてください。

演習22a：JMeterを使用して負荷テストを実行する

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

注記: テストシナリオによっては、より多くのリソース (RAM と CPU) を備えたノートパソコンが望ましいです。

そのためには、

1. お使いのマシンでJMeterを実行してください。

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

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

   

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

   テストの実行には、お使いの環境によって数分かかります。 右上隅の時計は、テスト実行中の時刻を表示します。 タイマーが停止したら、テストは完了です。

5. 左側のメニューで、 スレッドグループ をクリックしてセクションを展開し、 サマリーレポート をクリックします。

6. レポートを確認して、パフォーマンスの異常値がないか調べてください。

   

7. 左側のメニューで、 応答時間グラフ をクリックします。

8. 設定タブで、 グラフの表示をクリックします。

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

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

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

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

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

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

   

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

次に、この断片を調べて修正します。

演習22c：パフォーマンス問題の解決

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

そのためには、

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

2. 前の演習で特定した問題のある部分の編集を開始してください。

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

   

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

5. フラグメントに加えられた変更を、Clarityのサイト内でそのフラグメントが使用されているすべてのインスタンスに反映させる。

問題のある部分が修正されたので、Clarityサイトを再テストできます。

演習22d：JMeterを使用したパフォーマンスの再評価

修正が成功したことを確認するために、JMeterを使用して別のパフォーマンス テストを実行してください。

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

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

3. 完了したら、概要レポートと応答時間グラフを再度確認してください。 以前パフォーマンスの問題があったページに、もはや問題がないことに注目してください。

   

4. Liferayインスタンスで、ページ監査ツールを使用して問題のあるページを再度確認してください。

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

おめでとう！ Liferayを使ったエンタープライズWebサイト構築講座の3日目の演習をすべて完了しました。 次に、学んだことをテストします。