コンポーネントビルダーを使用して、ページ間で再利用するカスタムコンポーネントを作成します

  • リリースバージョン: Zurich
  • 更新日 2025年07月31日
  • 所要時間：17分

    • UI ビルダー のエクスペリエンスとページ全体でカスタムコンポーネントを再利用します。

    UI ビルダー のコンポーネント構築 UI でカスタムコンポーネントを作成します。コンポーネントビルド UI にはページビルドと多くの類似点があり、 UI ビルダー でページを構成するときと同じ方法でコンポーネントを構成できます。

    カスタムコンポーネントの力

    カスタムコンポーネントを構築すると、エクスペリエンス全体の効率、一貫性、保守性が向上します。再利用可能な UI 要素を作成することで、構成の重複を回避し、統一されたルックアンドフィールを確保し、更新やデザイン変更の管理を容易にします。また、カスタムコンポーネントは複雑なレイアウトを簡素化し、柔軟な構成をサポートし、テストとデバッグを容易にします。また、共有コンポーネントがコラボレーションを簡素化し、大規模なユーザーエクスペリエンスの一貫性を維持するチーム環境でも役立ちます。

    カスタムコンポーネントは、エクスペリエンス内でさまざまなユーザータイプのページをデザインする場合に特に有用です。たとえば、リストとデータの可視化の両方を含む再利用可能なコンポーネントを作成し、ユーザーグループに基づいてそのコンテンツや動作を調整することで、ロール固有の情報を配信しながら一貫したレイアウトを維持できます。

    コンポーネントビルダーで編集されたコンポーネントは、それらが使用されているすべてのページで自動的に更新されます。

    重要:
    インスタンスで作成されたカスタムコンポーネントは、更新セットまたはアプリケーションインストールを使用して他のインスタンスに移行されるまで、そのインスタンス内でのみ使用できます。

    カスタムコンポーネントまたはページコレクション

    効率的でスケーラブルなデジタルエクスペリエンスを構築するには、可能な限り要素を再利用することが重要です。これを行う 2 つの方法は、カスタムコンポーネントとページコレクションを使用することです。それぞれ、必要な再利用の範囲に応じて異なる目的を果たします。

    カスタムコンポーネント
    見出し、リスト、フォーム、ボタンなど、ページの特定の部分を複数のページにまたがって複製する場合は、カスタムコンポーネントを使用します。
    一貫したテーマまたは構成をコンポーネントまたはコンポーネントのグループに適用する場合。
    ページの一部は変更しても共有コンポーネントの一貫性を保つモジュール式または柔軟なページを設計しています。
    変更を 1 か所で管理し、コンポーネントが使用されるすべての場所で変更を更新したいと考えています。
    複数のチームが同じページの異なるセクションで同時に作業しています。
    ページコレクション
    複数のページまたはエクスペリエンスにわたってページレイアウトと構成全体を再利用する場合。
    さまざまなユーザーまたはワークフローに合わせて、フルページのバリエーションを作成する必要があります。

    複数のページまたはエクスペリエンスにわたって一連のタブを使用する場合。

    カスタムコンポーネント UI

    UI ビルダー のコンポーネントビルダーにアクセスするには、ヘッダーの [作成] を選択するか、UI ビルダー ホームページの [コンポーネント] タイルを選択します。

    図 : 1. UI ビルダーのホームページ
    コンポーネントの作成ボタンを指す矢印が表示された UI ビルダーホームページ。
    図 : 2. コンポーネントビルダー UI
    コンポーネントビルダーホームページ。

    UI ビルダーでビルドされたコンポーネントは、コンポーネントをページに追加するときのツールボックスと、UI ビルダー のホームページのコンポーネントリストにあります。UI ビルダー のホームページにあるコンポーネントリストにあるカスタムコンポーネントを見つけて、カスタムコンポーネントを更新または変更できます。

    図 : 3. コンポーネントビルダーで値をテストする
    テスト値が選択されている場合は、代替テキストモーダルが表示されます。

    コンポーネントビルダーでテスト値を使用して、カスタムコンポーネントをビルドするときに必須およびオプションの URL パラメーターのシミュレート値を指定します。テスト値は、バインディングとデータリソースが正しく機能していることを確認することで、コンポーネントがページに追加されたときにどのように動作するかを検証するのに役立ちます。テスト値の詳細については、「 ページ内の値をテスト」を参照してください。

    図 : 4. コンポーネントリスト
    [コンポーネント] タブを表示する UI ビルダーホームページ。

    コンポーネント設定画面から [複製] を選択すると、カスタムコンポーネントをすばやく複製できます。これにより、再利用または変更のためにコンポーネントの正確なコピーが作成されます。

    図 : 5. カスタムコンポーネント設定
    [複製] オプションが表示されている矢印が付いたコンポーネント設定画面。

    コンポーネントビルダーと Now CLI コンポーネント開発の比較

    UI ビルダー のコンポーネントをビルドするには、2 つの方法があります。1 つ目は、カスタムコンポーネントを作成するためのドラッグアンドドロップインターフェイスを提供する UI ビルダー 内のローコードコンポーネントを使用することです。2 つ目は、 NOW CLI 開発者ツール を使用して、コードを通じてコンポーネントを構築することです。どちらの方法でも、UIB ツールボックスに追加してエクスペリエンス全体で再利用できるコンポーネントが生成されます。含まれているコンポーネントへの変更は、両方のタイプに影響を与える可能性があることに注意してください。

    どちらのツールも UI ビルダー用のコンポーネントを作成しますが、考慮すべき重要な違いがあります。

    UI ビルダーのコンポーネントビルダー:
    • UI ビルダー内にビルドされたコンポーネントは、コントローラーとデータリソースを参照できます。
    • 「Macroponent コンポーネント」を作成し、sys_ux_macroponentテーブルに格納します。
    • コンポーネントビルダーは、コンポーネントを構築するために視覚的なドラッグアンドドロップインターフェイスを使用するユーザーに最適です。
    • 単純なコンポーネントから中程度に複雑なコンポーネントまですばやく作成するのに最適です。
    NOW CLI コンポーネント:
    • カスタム HTML、CSS、および JavaScript を記述する必要がある開発者を対象としています。
    • 複雑でカスタマイズ可能なコンポーネントの構築に適しています。
    • Now CLI で作成されたコンポーネントは、sys_uib_toolbox_component テーブルに保存されます。

    ベストプラクティス

    UI ビルダーカスタムコンポーネントビルダーにはガバナンス機能がないため、エクスペリエンスの重複や不整合につながる可能性があります。チームがわずかなバリエーションを加えた類似のコンポーネントを作成すると、UI が断片化され、ユーザーエクスペリエンスが混乱する可能性があります。チームは定期的な監査とチーム間のコミュニケーションを完了して、エクスペリエンスの成長に合わせて調整を維持し、断片化を避けることをお勧めします。

    すべてのコンポーネントは、セキュリティポリシーが read_only に設定されている限り、安全にアップグレードできるように設計されています。これにより、バンドルやページテンプレートなどの他の展開可能単位と比較して、より大きなコンポーネントまたはページ部分のアップグレード保護が強化されます。ただし、これは、すぐに利用可能な (OOTB) コンポーネントが編集できない可能性があることも意味します。

    ページ間で再利用するコンポーネントの作成

    UI ビルダー のエクスペリエンスとページ全体で使用する再利用可能なカスタムコンポーネントを構築します。

    始める前に

    必要なロール：ui_builder_admin

    このタスクについて

    このコンポーネントビルダーの例では、経過時間を追跡するストップウォッチコンポーネントを作成します。これは任意のページに追加できます。コンポーネントにはカスタマイズ可能なプロパティが含まれており、ページに配置すると変更できます。

    手順

    1. 移動先 すべて > Now Experience フレームワーク > UI ビルダー.
    2. UI ビルダーホームページから [作成] を選択します。
      [コンポーネントの作成] ボタンがある UI ビルダーのホームページ。
    3. コンポーネントを選択します。
    4. フォームのフィールドに入力します。
      図 : 6. [コンポーネントを作成] ダイアログボックス
      コンポーネントフォームを作成します。
      表 : 1. コンポーネントフォームの作成
      フィールド 説明
      名前 コンポーネントを内部で追跡するための名前を追加します。コンポーネント名がツールボックスに表示されます。この例では、 ストップウォッチです。
      カテゴリ コンポーネントにカテゴリを追加すると、ツールボックスで簡単に見つけられるようになります。カテゴリは後で [設定] で更新できます。この例では 、[コンテンツ] を選択します。
      説明 コンポーネントをいつどのように使用するかを説明する説明を追加します。
      アイコン ツールボックス内のコンポーネントを表すアイコンを選択します。
    5. [Create (作成)] を選択します。
      ページがコンポーネントビルダービューで開きます。

      コンテンツと構成のサイドバーを表示するカスタムコンポーネントビルド UI。

    6. [プロパティとポリシー] セクションで [+ プロパティを追加] を選択して、カスタムコンポーネントプロパティを追加します。
      [プロパティを追加] を選択してコンテンツを追加します
      1. リストから [文字列] を選択します。
      2. 構成パネルに次の値を入力します。
        表 : 2. コンポーネントプロパティ
        フィールド 値
        プロパティラベル SVG イメージソース
        プロパティ ID svgイメージソース
        デフォルト値 animateddino.svg

        構成パネルの [プロパティラベル]、[プロパティ ID]、および [SVG イメージソース] フィールドを指す矢印が表示されたカスタムコンポーネントビルド UI。

      3. [Save (保存)] を選択します。
    7. [ + コンテンツを追加 ] ボタンを選択して、カスタムコンポーネントのレイアウトを構成します。
      1. [ 単一列] を選択し、[ 追加] を選択します。
      2. コンテンツツリーの 列 1 で、[ + コンテンツを追加] を選択します。
      3. [ Card Base Container] を選択し、[ Add (追加)] を選択します。
      4. コンテンツツリーの [ カードベースコンテナ 1] で、[ + コンテンツを追加] を選択します。
      5. [ レイアウト] を選択します。
      6. [ Flexbox]、[ 追加]の順に選択します。
      7. [Save (保存)] を選択します。
        コンテナへのコンテンツの追加
    8. [コンテナ 1] で [+ コンテンツを追加] を選択して、Flexbox コンテナに定型テキストコンポーネントを追加します。
      1. 定 型テキスト コンポーネントを選択し、[ 追加] を選択します。
      2. [ キャンセル ] を選択してプリセットウィンドウを閉じます。
      3. [Save (保存)] を選択します。
        定型テキストをコンテナに追加する
    9. 定型テキストコンポーネントを構成するために、いくつかのクライアントステータスパラメーターを追加します。
      1. [データとスクリプト] セクションで [クライアントステータスパラメーター] を選択します。
      2. [ クライアントステータスパラメーターの編集 (Edit client state parameters )] ダイアログで、次の値を入力します。
        表 : 3. クライアントステータスパラメーター
        名前 タイプ 初期値
        startTime 番号
        経過時間 文字列 00:00:00
        時間間隔 JSON
        ストップウォッチ実行中 ブール
        間隔 ID 文字列
      3. [Apply (適用)] を選択します。
        カスタムコンポーネントに追加されたクライアントステータスパラメーターのリスト。
      4. [Save (保存)] を選択します。
    10. 定型テキストコンポーネントを構成するには、 elapsedTime クライアントステータスパラメーターをバインドします。
      1. コンテンツツリーで定 型テキスト 1 コンポーネントを選択します。
      2. 定型テキストコンポーネントの [テキスト ] フィールドをポイントするときに、バインドアイコンを選択します。
        コンポーネント内の定型テキストのバインド
      3. [ クライアントステータス] を選択します。
      4. elapsedTime ピルをダブルクリックします。
        経過時間パラメーターをテキストにバインド
      5. [Apply (適用)] を選択します。
      6. [Save (保存)] を選択します。
    11. ボタンを保持する Flexbox コンテナを追加します。
      1. 定型テキストコンポーネントの下にある [+ ] アイコンを選択します。
        テキストコンポーネントの下にあるプラス記号を選択します
      2. [ レイアウト] を選択します。
      3. [ Flexbox] を選択します。
      4. [Add (追加)] を選択します。
    12. ストップウォッチ、実行中のレンダラー、およびスタートボタンを追加して構成します。
      1. 前の手順で追加したコンテナに [+ コンテンツを追加 ] を選択し、 条件付きレンダラーを追加します。
      2. コンテンツツリーで [+ 条件を追加 ] を選択します。
      3. [ Single component (単一コンポーネント)] を選択し、[ Next (次へ)] を選択します。
      4. アイコン ボタンを選択し、[ 次へ] を選択します。
      5. [ 設定を編集 ] ダイアログで、次の値を入力します。
        • コンポーネントラベル: 開始
        • コンポーネント ID: start_button
        • コンテンツを表示: 常時
      6. [Apply (適用)] を選択します。
      7. コンテンツツリーで [ 開始 ] ボタンを選択します。
      8. 構成パネルで次のプロパティを設定します。
        表 : 4. コンポーネントプロパティ
        フィールド 値
        アイコン ストップウォッチ入力
        バリアント Primary (プライマリ)
        サイズ Large (大)
        ツールヒントのテキスト 開始
      9. [Save (保存)] を選択します。
        構成パネルのコンポーネントラベル、および [アイコン]、[バリアント]、[サイズ]、および [ツールヒント] テキストフィールドを指す矢印が表示されたカスタムコンポーネントビルド UI。
    13. ストップウォッチの実行中に表示されるように停止ボタンを設定します。
      1. コンテンツツリーで [+ 条件を追加 ] を選択します。
      2. [ コンテナーを空にする] を選択し、[ 次へ] を選択します。
      3. [ 設定を編集 ] ダイアログで、次の値を入力します。
        • コンポーネントラベル: 実行中
        • コンポーネント ID: running_container
        • コンテンツを表示: 以下の条件が true の場合
      4. [ 条件 ] フィールドをポイントしながらバインドアイコンを選択します。
        バインドするために選択する設定モーダルを編集
      5. [クライアントステータス] を選択し、[stopwatchRunning] ピルをダブルクリックします。
      6. [Apply (適用)] を選択します。
      7. [Apply (適用)] を選択します。
      8. 実行中のコンテナで [+ コンテンツを追加] を選択し、アイコン型のボタンを追加します。
      9. 構成パネルで [ 象徴的なボタン 1 ] を選択し、次の値を入力します。
        • コンポーネントラベル: 停止
        • コンポーネント ID: stop_button
      10. [Apply (適用)] を選択します。
      11. 構成パネルで次のプロパティを設定します。
        表 : 5. コンポーネントプロパティ
        フィールド 値
        アイコン ストップウォッチ入力
        バリアント セカンダリ
        サイズ Large (大)
        ツールヒントのテキスト 停止
      12. [Save (保存)] を選択します。
        構成パネルのコンポーネントラベル、および [アイコン]、[バリアント]、[サイズ]、および [ツールヒント] テキストフィールドを指す矢印が表示されたカスタムコンポーネントビルド UI。
    14. [ 実行中 ] が [開始] の上に表示されるように条件を並べ替えます。
      1. コンテンツツリーで [条件付きレンダラー 1 ] を選択します。
      2. 構成パネルで、ドラッグハンドルアイコン を選択してドラッグし、条件を所定の位置に移動します。
        構成パネルの条件付きレンダラーコンポーネントで、[開始] 条件の近くに [実行中] 条件が配置されています。

        条件は上から下の順に評価されるため、ボタンが正しく表示されるには、[実行 中 ] が [ スタート] の上に表示される必要があります。

    15. [データとスクリプト (Data and scripts)] セクションの [クライアントスクリプト] の横にある [+] を選択して、コンポーネントのロジックを追加します。
      1. [スクリプト名] フィールドに「開始」と入力します。
      2. 次のスクリプトをスクリプトフィールドに貼り付けます。 
        function handler({ api, helpers }) {
  console.log('Start script running');
 
  if (api.state.stopwatchRunning === undefined) {
    api.setState('stopwatchRunning', false);
    api.setState('elapsedTime', '00:00:00');
    api.setState('startTime', null);
    api.setState('intervalId', null);
  }
 
  let running = api.state.stopwatchRunning;
 
  function pad(n) {
    return n < 10 ? '0' + n : n.toString();
  }
 
  function updateElapsedTime(startTime) {
    if (!running) {
      if (api.state.intervalId) {
        helpers.timing.clearInterval(api.state.intervalId);
        api.setState('intervalId', null);
        console.log('Interval cleared');
      }
      return;
    }
 
    if (!startTime) {
      console.log('No startTime passed to updateElapsedTime, cannot update');
      return;
    }
 
    const now = Date.now();
    const elapsedMs = now - startTime;
 
    const totalSeconds = Math.floor(elapsedMs / 1000);
    const hours = pad(Math.floor(totalSeconds / 3600));
    const minutes = pad(Math.floor((totalSeconds % 3600) / 60));
    const seconds = pad(totalSeconds % 60);
 
    const formattedTime = `${hours}:${minutes}:${seconds}`;
 
    console.log('Setting elapsedTime:', formattedTime);
    api.setState('elapsedTime', formattedTime);
  }
 
  if (!running) {
    const now = Date.now();
 
    api.setState('startTime', now);
    api.setState('elapsedTime', '00:00:00');
    api.setState('stopwatchRunning', true);
    running = true;
 
    if (api.state.intervalId) {
      helpers.timing.clearInterval(api.state.intervalId);
      api.setState('intervalId', null);
      console.log('Existing interval cleared before starting new one');
    }
 
    // Pass startTime directly here
    updateElapsedTime(now);
 
    const id = helpers.timing.setInterval(() => {
      updateElapsedTime(now);
    }, 1000);
    api.setState('intervalId', id);
    console.log('Interval started with id:', id);
  } else {
    if (!api.state.intervalId) {
      // Use existing startTime from state, but be mindful it might still lag
      const storedStartTime = api.state.startTime || Date.now();
      const id = helpers.timing.setInterval(() => {
        updateElapsedTime(storedStartTime);
      }, 1000);
      api.setState('intervalId', id);
      console.log('Interval restarted with id:', id);
    }
  }
}
      3. [Apply (適用)] を選択します。
        UI ビルダーエディターをオーバーレイするクライアントスクリプトモーダルを編集します。
      4. [クライアントスクリプト] の横にある [+] を選択して、2 番目のスクリプトを追加します。
      5. [スクリプト名] フィールドに「Stop」と入力します。
      6. 次のスクリプトをスクリプトフィールドに貼り付けます。 
        function handler({ api, helpers }) {
  console.log('Stop script running');
 
  if (api.state.stopwatchRunning === undefined) {
    // If state is not initialized yet, initialize it to avoid errors
    api.setState('stopwatchRunning', false);
    api.setState('elapsedTime', '00:00:00');
    api.setState('startTime', 0);
    api.setState('intervalId', null);
  }
 
  if (api.state.stopwatchRunning) {
    api.setState('stopwatchRunning', false);
    if (api.state.intervalId) {
      helpers.timing.clearInterval(api.state.intervalId);
      api.setState('intervalId', null);
    }
  }
}
      7. [Apply (適用)] を選択します。
      8. [Save (保存)] を選択します。
    16. 前の手順で作成したボタンにイベントハンドラーを追加します。
      1. コンテンツツリーで [ 開始 ] ボタンを選択し、構成パネルの [イベント ] タブを開きます。
      2. [アイコンボタン] がクリックされた下の [ハンドラーの追加] を選択し、前の手順で作成した [クライアントスクリプトの開始] を選択します。
        「開始」というラベルの付いたクライアントスクリプトを指す矢印が付いた [イベントハンドラーを追加] モーダル。
      3. [ 続行] を選択し、[ 追加] を選択します。
      4. コンテンツツリーで [停止 ] ボタンを選択し、構成パネルで [イベント ] タブを開きます。
      5. [ ハンドラーを追加] を選択し、前の手順で作成した [クライアントスクリプト を停止 ] を選択します。
      6. [ 続行] を選択し、[ 追加] を選択します。
      7. [Save (保存)] を選択します。
    17. [ プレビュー ] を選択して、構成されたコンポーネントをテストします。
      実行中のストップウォッチコンポーネントを含むページの UI ビルダープレビュー。

    タスクの結果

    これで、カスタムコンポーネントが UI ビルダー ツールボックスで使用できるようになりました。