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


---

# UI ビルダーでのプレイブックのカスタマイズ

# UI ビルダーでのプレイブックのカスタマイズ {#ariaid-title1}

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

カスタムプレイブックレイアウトに UI ビルダー ページとモジュール式コンポーネントを使用して、構成可能なワークスペース、サービスポータルページ、またはモバイル Web ページでエンドユーザーの プレイブックエクスペリエンス をカスタマイズします。

## 始める前に

* カスタムレイアウトを適用する プレイブック がない場合は、プレイブックをビルドします。詳細については、「[プレイブックのビルド](https://servicenow-prod.fluidtopics.net/ONkxdmK4TEhkSOgikc1bWg "フロー、アクション、およびサブフローをプレイブックでリンクすることで、企業間のビジネスプロセスを完全に自動化します。")」を参照してください。
* ServiceNow Store から最新バージョンの プレイブックエクスペリエンス およびプレイブックエクスペリエンスコンポーネントアプリをインストールします。「[プレイブックエクスペリエンスアプリ](https://store.servicenow.com/sn_appstore_store.do#!/store/product/e4cecaf0db2be81079279ee4db9619f2)」を参照してください。
{#playbook-get-started-custom-layouts__ul_i11_zgw_gwb}

必要なロール：ui_builder_admin、admin

## このタスクについて

UI ビルダー ページを作成した後、必要に応じて プレイブックエクスペリエンス ページをカスタマイズできます。ページテンプレートには、コンポーネントプリセットで使用できるコントローラー (プレイブック テンプレートなど) が含まれています。詳細については、「[Bind data to UI Builder pages using controllers (advanced feature)](https://www.servicenow.com/docs/access?context=controllers&version=yokohama&pubname=yokohama-application-development&ft:locale=en-US)」を参照してください。

## 手順

1. 移動先 すべてNow Experience フレームワークUI ビルダー.
2. 作業する UI ビルダー エクスペリエンスを開くか、新しいエクスペリエンスを作成します。  
   プレイブックエクスペリエンスビルダーエクスペリエンスは、プレイブックエクスペリエンス をカスタマイズするために作られています。エクスペリエンスの作成方法の詳細については、「[Configure how users interact with your applications in UI Builder](https://www.servicenow.com/docs/access?context=work-experiences&version=yokohama&pubname=yokohama-application-development&ft:locale=en-US)」を参照してください。
3. \[UI ビルダー\] エクスペリエンスでは、次のことができます。  
   * [ページを最初から作成する](https://www.servicenow.com/docs/access?context=create-page&version=yokohama&pubname=yokohama-application-development&ft:locale=en-US)、
   * [\[標準レコード\] テンプレートからページを作成する](https://www.servicenow.com/docs/access?context=reuse-page-definitions&version=yokohama&pubname=yokohama-application-development&ft:locale=en-US)、
   * または、プレイブックエクスペリエンステンプレートからページを作成する。

   {#playbook-get-started-custom-layouts__ul_szr_dhf_p1c}  
   プレイブックエクスペリエンステンプレートを使用すると、バージョン 25.2 時点でのレコードジェネレータを含むプレイブックカスタムレイアウト UI コントローラーとコンポーネントが既にすべてのページに追加されているため、開発プロセスの速度が向上します。コントローラーは、提供されたすべてのコンポーネントにデータを自動的に入力します。  
   注:  
   テンプレートを使用する場合でも、カスタムコンポーネントを作成して追加することができます。

   <br />

4. プレイブックエクスペリエンス テンプレートを使用している場合は、ページを作成します。
   1. ページの詳細を設定します。  

      |-|-|
      | 名前 | ページの名前。 |
      | URL パス | ユーザーがページにアクセスするために移動する URL パス。 |
      [ ]

      {#playbook-get-started-custom-layouts__table_vlg_vc3_q1c}
   2. ページのテストパラメーターを確認します。  

      |-|-|
      | テーブル | プレイブックの親テーブルの名前。 |
      | sysID | レコードの Sys_id。存在しないレコードの場合、値は -1 です。 |
      | 向上 | ロードするエクスペリエンス。 |
      | selectedPlaybook | エージェントまたは履行者が含まれるプレイブック。 |
      | selectedStage | エージェントまたは履行者が含まれるステージ。 |
      | selectedActivity | エージェントまたは履行者が含まれるアクティビティ。 |
      [ ]

      {#playbook-get-started-custom-layouts__table_h3s_1d3_q1c}
   3. デフォルトのページバリアントをセットアップします。  

      |-|-|
      | 名前 | ページバリアントの名前。 |
      | 対象者 | ページバリアントを表示できるユーザー。次のように定義できます。 * ロール * グループ * ユーザー * 会社 * 部門 * 場所 * スクリプト {#playbook-get-started-custom-layouts__add-audiences_ul_ayn_3jx_snb} |
      | 条件 | ページのバリアントを表示するタイミングを決定する条件。 |
      [ ]

      {#playbook-get-started-custom-layouts__table_frz_wd3_q1c}
   4. 作成したばかりのデフォルトのページバリアントを開きます。

   {#playbook-get-started-custom-layouts__substeps_yfz_yb3_q1c}  
   新しい プレイブックエクスペリエンス レイアウトには、データが設定されたコントローラーとコンポーネントが既に含まれていますが、いくつか設定を行う必要があります。残りの設定を行うには、ステップ 6 に進みます。
5. \[標準レコード\] テンプレートを使用した場合、またはページを最初から作成した場合は、プレイブックカスタムレイアウト UI コントローラーをページに追加します。
   1. 新しいページの下隅から、データアイコン (![データアイコン。]()) を選択します。
   2. \[+ 追加\] を選択します。
   3. 「プレイブック」を検索します。
   4. \[データリソース\] で \[プレイブックカスタムレイアウト UI コントローラー (Playbook Custom Layout UI Controller)\] を選択し、\[追加\] をクリックします。
   5. \[データリソース\] パネルを終了します。
   {#playbook-get-started-custom-layouts__substeps_uhs_2mh_hwb}
6. 追加したプレイブックカスタムレイアウト UI コントローラーを構成します。
   1. ユーザーが標準の新しいレコードフォームではなく、このカスタマイズされたプレイブックエクスペリエンスで新しいレコードを作成できるようにするには、左上のテスト値ピルを選択します。  
      テスト値のポップオーバーが開きます。
   2. \[sysID\] テスト値が -1 に設定されていることを確認し、\[適用\] を選択します。  

      プレビューを開くと、レコードジェネレーターフォームを使用できます。レコードジェネレーターフォームをテストし、新しいレコードが作成されることを確認できます。
   3. テーブル名やオプションのパラメーターを更新することもできます。
   4. **オプション:** 代わりにテスト値をハードコーディングする場合は、次に戻ります データデータリソースパネルローカルデータリソースインスタンスをクリックし、\[ UI コントローラーレコードページ\] を選択します。
   5. コントローラーの \[構成\] タブで、\[親 SysID\] または \[親テーブル\] を追加します。テスト値のポップオーバーでは、これらは \[sysID\] フィールドと \[テーブル\] フィールドです。  
      \[親テーブル \] フィールドには「context.props.table」、\[親 SysID\] フィールドには「context.props.sysId」と入力できます。  
      注:  
      入力するテーブルまたはレコードに プレイブック が含まれていることを確認してください。
   6. 使用する プレイブックエクスペリエンス を追加します。
   7. **オプション:** 必要に応じて他のフィールドに値を入力します。  

      |-|-|
      | アクティビティビューモード | プレイブックアクティビティをスタックモードまたは集中モードでレンダリングするために使用される表示モード |
      | レコードジェネレータークエリ | レコードジェネレーターに指定されたクエリをオプションで上書きするエンコードされたクエリ文字列 |
      | 選択されたプレイブックコンテキスト ID | ディープリンク用に選択したプレイブックのオプションのコンテキスト ID |
      | 選択されたステージコンテキスト ID | ディープリンク用に選択したステージのオプションのコンテキスト ID |
      | 選択されたアクティビティコンテキスト ID | ディープリンク用に選択したアクティビティのオプションのコンテキスト ID |
      [ ]

      {#playbook-get-started-custom-layouts__table_xys_tlb_t1c}
   8. **オプション:** \[出力\] 列で、ハードコーディングする値を選択できます。

   {#playbook-get-started-custom-layouts__substeps_rl2_kph_hwb}  
   コントローラーが構成され、プレイブック コンポーネントを追加する準備ができました。
7. プレイブック のコンポーネントを追加します。
   1. コンポーネントツリーで、\[メインタブ\] を選択します。  
      \[メインタブ\] パネルが右側に開きます。
   2. \[メインタブ\] パネル で、\[+ 追加\] を選択します。  
      「このタブをどのようにビルドしますか？」と尋ねるモーダルが表示されます。
   3. \[空のコンテナーから開始\] を選択して \[次へ\] をクリックします。  
      \[タブの設定\] モーダルが表示されます。
   4. タブに名前とアイコンを付け、\[作成\] をクリックします。  
      タブがコンポーネントツリーに追加され、空白のキャンバスが表示されます。
   5. コンポーネントツリーの新しいタブで、\[+ コンポーネントを追加\] を選択して、「サイズ変更可能 (resizable)」を検索します。
   6. \[サイズ変更可能なペイン\] コンポーネントを選択して名前を付け、\[作成\] をクリックします。
   7. コンポーネントツリーで、新しく作成した \[サイズ変更可能なペイン\] コンポーネントを開きます。  
      新しい \[サイズ変更可能なペイン\] のパネルが右側に表示されます。
   8. 必要に応じて設定し、右上隅の \[保存\] をクリックします。
   9. ステージピッカーを追加するには、コンポーネントツリーで先ほどの新しい \[サイズ変更可能なペイン\] コンポーネントを見つけて、左側の下にある \[+ コンポーネントを追加\] を選択します。
   10. コンポーネントツリーで、新しいステージピッカーを選択します。  
       新しいステージピッカーのパネルが右側に表示されます。
   11. プレイブックカスタムレイアウト UI コントローラーからこのコンポーネントのプリセットを選択し、右上隅の \[保存\] をクリックします。  

       確認メッセージが表示され、ステージピッカーパネルの \[イベント\] タブにコンポーネント入力とイベントが自動的に入力されます。  

   12. プレイブックアクティビティビューアーを追加するには、コンポーネントツリーで \[サイズ変更可能なペイン\] コンポーネントを見つけて、右の下にある \[+ コンポーネントを追加\] を選択します。
   13. 手順 7j と 7k を繰り返します。
   14. プレイブックモーダルを追加するには、コンポーネントツリーのメインタブで作成したタブを見つけて、 \[+ コンポーネントを追加\] を選択します。
   15. \[プレイブックモーダル\] に対してステップ 7j と 7k を繰り返します。
   16. プレイブックステージピッカーに戻り、ステージピッカーの向きを決定します。
   17. 右上隅の \[開く\] をクリックして、プレイブック のレイアウトをプレビューします。
   18. UI ビルダー に戻ります。
   19. コンポーネントツリーのステージピッカーに戻り、右側に開いたパネルでステージピッカーの向きを決定します。
   {#playbook-get-started-custom-layouts__substeps_sjv_r1z_gwb}
**関連情報**   

* [UI Builder](https://www.servicenow.com/docs/access?context=ui-builder-overview&version=yokohama&pubname=yokohama-application-development&ft:locale=en-US)