---
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) 所要時間：3分

すぐに利用可能なスタンドアロンおよびカスタムレイアウトのプレイブックエクスペリエンスコンポーネントにリフローを適用して、ズーム時にウィンドウのサイズを変更したときに UI が調整されるようにします。

リフローは、ブラウザー設定を使用してページとコンテンツを最大 400% 拡大できる構成可能ワークスペースの機能です。プレイブックでリフローが有効になっている場合、ブラウザーの 200% ズームに拡大するとプレイブックがコンパクトモードに変わり、縮小するとコンパクトモードを終了します。  

プレイブックエクスペリエンスコンポーネントでリフローを機能させるには、「[プレイブックコンポーネントにリフローを適用](https://servicenow-prod.fluidtopics.net/jH4ZkOCpQtNzqwx7Vkwgkw#apply-reflow-playbook-components "すぐに利用可能なスタンドアロンおよびカスタムレイアウトのプレイブックエクスペリエンスコンポーネントにリフローを適用して、ズーム時にウィンドウのサイズを変更したときに UI が調整されるようにします。")」を参照してください。

リフローの詳細については、「[Reflow for Configurable Workspace](https://www.servicenow.com/docs/access?context=auto-reflow&version=yokohama&pubname=yokohama-platform-user-interface&ft:locale=en-US)」を参照してください。

## プレイブックコンポーネントにリフローを適用 {#ariaid-title2}

すぐに利用可能なスタンドアロンおよびカスタムレイアウトのプレイブックエクスペリエンスコンポーネントにリフローを適用して、ズーム時にウィンドウのサイズを変更したときに UI が調整されるようにします。

### 始める前に

必要なロール：アドミン

### 手順

1. sys_ux_auto_reflow_rule レコードを作成します。
   1. \[すべて\] メニューを開きます。
   2. フィルターバーに、「sys_ux_auto_reflow_rule.list」と入力します。

   {#apply-reflow-playbook-components__substeps_q4c_1rn_zzb}  
   \[UX 自動リフロールール\] リストが作成され、表示されます。

   プレイブックスタンドアロンおよびカスタムレイアウトコンポーネントにはそれぞれルールがあります。特定のUI ビルダーページサイズ未満の場合、これらのルールはデフォルトのリフローエンジンを使用して、\[UX Macroponent 定義\] リスト (sys_ux_macroponent.list) の macroponent プロパティと特定の CSS 値を上書きします。プレイブックエクスペリエンスで提供されるルールでは、ストアアプリは 640px のページ幅を使用してコンポーネントの compactMode プロパティを切り替え、同様に 100vh の高さを使用してコンポーネントのサイズをスペースに合わせて変更します。

   スタンドアロンコンポーネントを使用している場合は、これで完了です。カスタムレイアウトコンポーネントで作業する場合は、次のステップに進みます。
2. 移動先 すべてUI ビルダー.
3. リフローを適用するレイアウトをプレイブックエクスペリエンスビルダーで開きます。
4. 左下隅にある \[データ\] アイコンを選択し、\[プレイブックカスタムレイアウト\] UI コントローラーを開きます。
5. \[アクティビティビューモード (Activity View Mode)\] フィールドで、stagePickerVisible 出力プロパティの値を true に更新します。
6. リフロールールを適用するコンポーネントを選択します。
7. \[イベント\] タブで、\[コンパクトモードの変更 (Compact Mode Changed)\] イベントハンドラーを追加します。  
   これにより、compactMode 出力プロパティの値を true または false に変更することで、リフロールールに従ってコンパクトモードのオンとオフが自動的に切り替わります。次に、これが他のプレイブックの他のコンポーネントに適用されるため、すべてが自動的にサイズ変更されます。
8. **オプション:** \[サイズ変更可能なペイン\] を選択します。
   1. ペインの位置を更新して、左右の向きで表示するか、上下のペインとして表示します。
   2. \[構成\] タブで、スクリプト化されたプロパティ値 \[デフォルトで表示されるペイン\] フィールドを開きます。
   3. if(!api.data.playbook_custom_layout.compactMode) return の値を更新し、コンパクトモードではないときに、「左」/「上」ペインのみ、「右」/「下」ぺインのみ、または「両方」のペインが表示されるようにします。
   4. コンパクトモードの場合は、ステージが選択されたときに、return (api.data.playbook_custom_layout. selectedItem \|\| ()).stageContextId ? の最初の値を「左」/「上」または「右」/「下」アクティビティペインを表示するように更新します。  
      2 番目の値は、ステージが選択されていないときに表示するペインを示します。
   {#apply-reflow-playbook-components__substeps_pnt_prc_f1c}