---
sourceDocument: Yokohama ビルドのワークフロー
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/ja-JP/yokohama/build-workflows

 Release :

    - yokohama

ft:locale :

    - ja-JP

ft:publication_title :

    - Yokohama ビルドのワークフロー

ft:clusterId :

    - crworkflow

bundleId :

    - crworkflow

workflow :

    - Creator


---

# プレイブックエクスペリエンスのカスタマイズ

# プレイブックエクスペリエンスのカスタマイズ {#ariaid-title1}

* リリースバージョン: Yokohama
* 
* 更新日 2025年01月30日
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 所要時間：4分

統合された UI ビルダー 機能からベースシステムのモジュール式コンポーネントやテンプレートなどを使用して プレイブックエクスペリエンス のレイアウトをカスタマイズします。
プレイブックエクスペリエンスアプリのモジュール式コンポーネントを使用して、エージェントと履行者向けのカスタムエクスペリエンスをビルドします。開発プロセスの迅速化のため、提供されたコンポーネントにプリセットで自動入力したいページに、カスタムレイアウト UI コントローラーを追加します。  
注:  
UI ビルダーを使用して独自のカスタムコンポーネントを作成することもできますが、プリセットではカスタムコンポーネントにデータを自動入力できません。

## コンポーネント {#playbook-customize-playbook__section_jph_4dh_l1c}

プレイブックエクスペリエンスで次のモジュール式コンポーネントを表示する方法を決定します。

プレイブックステージピッカー
:   プレイブック のステージは、水平にも垂直にも表示できます。

    * 垂直方向では以下のものが表示されます。
      * 親レコードのすべてのプレイブック
      * 各プレイブックのステージ
      * 各ステージで完了する必要がある残りのアクティビティ数
      * ステージごとの進行中のアクティビティ数
      {#playbook-customize-playbook__ul_ets_pr5_gwb}  
      この例では、プレイブックエクスペリエンスデモ という名前のプレイブックと、\[アサイン\]、 \[作成\]、 \[レビューおよび更新\] という名前のステージが表示されています。\[アサイン\] ステージには完了すべきアクティビティが 2 つあり、1 つが進行中です。\[作成\] と \[レビューおよび更新\] ステージには、横に青色の番号がないため、進行中のアクティビティはありません。図 : 1. 垂直ステージピッカー   

    * 水平方向では、選択した プレイブック のステージのみが表示されます。ステージのアクティビティを表示するには、ステージを選択します。図 : 2. 水平ステージピッカー   

      ステージ数が 5 を超えるプレイブックはページネーションされます。  
      注:  
      水平ステージピッカーには作業中のプレイブックとそのステージのみが表示されるため、次の場合を除き、プレイブック間の移動はできません。
      * プレイブック テンプレートを使用する
      * UI ビルダー を使用して独自のドロップダウンコンポーネントを作成する

      {#playbook-customize-playbook__ul_l2q_4w5_gwb}

      すべての プレイブック テンプレートにはプレイブック間を移動するためのドロップダウンコンポーネントが含まれており、\[プレイブックピッカー\] プリセットを選択すると自動的に設定されます。
    {#playbook-customize-playbook__ul_ekv_rkt_gwb}

プレイブックアクティビティピッカー

:   アクティビティピッカーで、アクティビティ間を移動できます。

    垂直ステージピッカーを使用している場合、アクティビティピッカーをオンにすると、各ステージを展開してそのステージのアクティビティを表示できます。図 : 3. ステージが垂直に表示されているときのアクティビティピッカー   

    水平ステージピッカーを使用している場合、アクティビティピッカーをオンにすると、現在のステージのアクティビティのリスト全体を展開したり折りたたんだりできます。図 : 4. ステージが水平に表示されているときのアクティビティピッカー   

    \[ステージフラグを表示\] フラグのオンとオフを切り替えます。

プレイブックアクティビティビューアー
:   アクティビティビューアーでは、ステージのアクティビティを管理します。このスペースでのアクティビティの表示方法は次のように変更できます。

    * スタックビューには、積み重ねられたステージ内のすべてのアクティビティが表示されます。図 : 5. プレイブックスタックビュー   

    * 集中ビューには、選択された 1 つのアクティビティが表示されます。図 : 6. プレイブックの集中ビュー   

    {#playbook-customize-playbook__ul_rg1_dcw_gwb}

プレイブックモーダル
:   プレイブックをキャンセルしてオプションのアクティビティを追加する場合は、\[プレイブックモーダル\] コンポーネントをページに追加する必要があります。テンプレートを使用する場合、コンポーネントは既に含まれています。図 : 7. \[プレイブック をキャンセル\] モーダル   


    図 : 8. \[オプションアクティビティを追加\] モーダル   

カスタマイズされたプレイブックエクスペリエンスのコンポーネントの設定を開始するには、「[UI ビルダーでのプレイブックのカスタマイズ](https://servicenow-prod.fluidtopics.net/fmWoFDld15Jlel1f40fI4w "カスタムプレイブックレイアウトに UI ビルダー ページとモジュール式コンポーネントを使用して、構成可能なワークスペース、サービスポータルページ、またはモバイル Web ページでエンドユーザーの プレイブックエクスペリエンス をカスタマイズします。")」を参照してください。

## 提供された UI ビルダー バンドル {#playbook-customize-playbook__section_ls4_bfh_l1c}

各コンポーネントを個別に追加することが最適でない場合は、レイアウト全体を新規または既存のUI ビルダー テンプレートに追加することもできます。

* 垂直フォーカス
* 水平フォーカス
* 垂直スタック
* 垂直スタック
{#playbook-customize-playbook__ul_t5w_f2h_l1c}  
各レイアウトには、次のコンポーネントが含まれています。

* UI コントローラー
* プリセット
* アクティビティビューアー
* アクティビティピッカー
* モーダル
* プレイブックピッカー
* ステージピッカー
* クライアントスクリプト
{#playbook-customize-playbook__ul_dqt_m2h_l1c}

既存または新規の UI ビルダー ページにバンドルを追加するには、「[UI ビルダー ページへのカスタムレイアウトバンドルの追加](https://servicenow-prod.fluidtopics.net/ppVEvlgDsn8mo39Tg4SZwQ "プレイブックカスタムレイアウトバンドルを、最初から作成した新規または既存の UI ビルダー ページに追加します。")」を参照してください。新しいエクスペリエンスを作成していて、標準レコードページにバンドルを追加する場合は、「[UI ビルダー 標準レコードページへのカスタムレイアウトバンドルの追加](https://servicenow-prod.fluidtopics.net/YJ0JxUgGK7vVZIxfKWEb_g "プレイブックカスタムレイアウトバンドルを新規または既存の UI ビルダー 標準レコードページに追加します。")」を参照してください。
* **[UI ビルダーでのプレイブックのカスタマイズ](https://servicenow-prod.fluidtopics.net/fmWoFDld15Jlel1f40fI4w)**   
  カスタムプレイブックレイアウトに UI ビルダー ページとモジュール式コンポーネントを使用して、構成可能なワークスペース、サービスポータルページ、またはモバイル Web ページでエンドユーザーの プレイブックエクスペリエンス をカスタマイズします。
* **[UI ビルダー ページへのカスタムレイアウトバンドルの追加](https://servicenow-prod.fluidtopics.net/ppVEvlgDsn8mo39Tg4SZwQ)**   
  プレイブックカスタムレイアウトバンドルを、最初から作成した新規または既存の UI ビルダー ページに追加します。
* **[UI ビルダー 標準レコードページへのカスタムレイアウトバンドルの追加](https://servicenow-prod.fluidtopics.net/YJ0JxUgGK7vVZIxfKWEb_g)**   
  プレイブックカスタムレイアウトバンドルを新規または既存の UI ビルダー 標準レコードページに追加します。
* **[ガイド付きアクティビティビューの有効化](https://servicenow-prod.fluidtopics.net/iqeYpof29Fl7j8qK9l8hwQ)**   
  プレイブックを通じてエンドユーザーをステップバイステップでガイドします。