UI拡張機能の概要

最終更新日： 2026年8月19日

トピック：
{"id":"f48b5020-b9cd-4d99-bc6e-42c35e90c1f8"}

UI拡張性を使用すると、カスタムロジックとUI （ユーザーインターフェイス）をAdobe Workfront Fusionに取り込むことができます。 Adobe App Builderを利用すれば、組織のWorkfront Fusion エクスペリエンスを変更して、組織のニーズにより的確に対応しながら、Fusionのコア機能にも依存させることができます。

この記事では、UI拡張機能の概要と、カスタム拡張機能とWorkfront Fusionとのコミュニケーション方法について説明します。

ホストとゲスト

Fusionでは、Workfront Fusion チームが作成しなかったUIを表示できます。これらのUIの変更がFusionのコア機能に影響を与えないようにするために、UIはFusionのコードとは完全に別の独立したブラウザーフレーム（<iframe>）で実行されます。

ホスト: に拡張機能が含まれているアプリケーション。これは Fusion です。ホストは、拡張機能を表示できる場所と、拡張機能と共有するデータを決定します。
ゲスト: あなたの拡張機能。ホストがiframeに読み込む小さなweb アプリケーションです。

UI拡張機能を作成する場合、Fusionは変更されません。ゲストを作成して公開し、ゲストが公開された後にFusionで使用できます。

基盤となるテクノロジー

お客様のゲストは、次の2つのAdobe テクノロジで構築されています。

Adobe App Builder：小さなweb アプリとサーバーレスアクション用の無料のホスティングおよびツールプラットフォームです。あなたの拡張機能はApp Builderアプリです。 App Builderでは、（Adobeの*.adobeio-static.net コンテンツ配信ネットワーク上で） UIをホストする場所と、aioというコマンドラインツールを使用して、作成、構築、公開できます。
Adobe UI Extensibility SDK （UIX）: ホストとゲストが話し合うライブラリ。 1つのパッケージ @adobe/uix-guestを使用します。 Fusionは、一致する@adobe/uix-host パッケージをサイドで使用します。

拡張ポイント

拡張ポイントは、ゲストを表示できるホスト内の「スロット」という名前です。 Fusionがそのスロットを定義し、ゲストがどのスロットを使用するかを選択します。

拡張ポイント名には3つの部分があります：service/name/version。

Fusionには、次の拡張ポイントがあります。

拡張ポイント

UIがFusionに表示される場所

利用するタイミング

fusion/nav-organization/1

左側のナビゲーションの組織セクションの下にあります。

ツールは組織全体を把握するためのものです。

fusion/nav-team/1

左側のナビゲーションの「チーム」セクション（チームが選択されている場合に表示）の下。

特定のチームを対象としたツールです。

fusionはサービス （製品、Fusion）です。
nav-organization / nav-teamはname （特定のスロット）です。
1は バージョン です。

1つの拡張機能は、1つまたは両方の拡張機能ポイントを実装できます。ほとんどの拡張機能は1 ポイントを使用しています。

選択した拡張機能ポイントに基づいて、Fusionは対応するナビゲーションセクションに拡張機能のタイトルを含むボタンを追加します。クリックすると、Fusionのメインコンテンツ領域に専用ページが開き、そこにUIが読み込まれます。

UI拡張機能に含まれるフレーム

IMPORTANT

この節では、混乱を引き起こす可能性のあるUI拡張機能の側面について説明します。注意深く読むことをお勧めします。

Fusionがゲストを読み込むと、拡張機能が2 フレームで実行されます。

登録枠（非表示）。 最初に、バックグラウンドで実行します。登録フレームは、拡張機能が提供するものをFusionに伝えます。例えば、ダッシュボードウィジェットがあることを示し、ウィジェットのタイトルとUIのURLを送信します。登録フレームは、register(...)を呼び出すことによってこれを行います。表示されるUIはレンダリングされません。
UI フレーム（表示）。 これは、Adobe Workfront Fusionでユーザーに表示されるページです。 attach(...)を呼び出して、ホストに通知する必要があります。 attachが呼び出されない場合、Fusionは待機し、最終的にエラーでタイムアウトします。

この例では、ユーザーが拡張機能ボタンをクリックした場合のフローを示します。

ボタンがクリックされます。

Fusionが登録フレーム（非表示）を読み込みます。

code language-none
`register({ methods: { dashboard: { getWidget() {...} } } })`

getWidget()は、表示されたUIのURLを返します

Fusionは、そのURLにUI フレーム（表示）を読み込みます。

code language-none
`attach({ id })`

これが必要です。または、Fusionがタイムアウトします

Fusionがコンテキストを送信し、UIがレンダリングされます。

style

shade-box

UIの構築時には、両方のフレームが書き込まれます。重要なことは、表示されるページはがattachを呼び出さなければならないことを覚えておくことです。

UIの構築について詳しくは、カスタム拡張機能UIの構築を参照してください。

Fusionからのコンテキスト

拡張機能を添付した後、Fusionはゲストとcontext オブジェクトを共有します。次が含まれます。

User：サインインしているユーザーのFusion プロファイルとAdobe IMSユーザーID。
組織: アクティブな組織の完全なFusion組織レコードとAdobe IMS組織ID。
チーム：アクティブなチーム（該当する場合）。
Adobe IMSアクセストークン：これにより、必要に応じて、ユーザーに代わってAdobeまたはFusion APIが呼び出されます。

Adobe Workfront Fusionはアップデートもプッシュします。たとえば、UIを開いているときにユーザーが組織やチームを切り替えた場合、UIが即座に反応できるように、Fusionは新しいコンテキストを送信します。

コンテキストフィールドの完全なリストについては、Fusion コンテキストリファレンスを参照してください。

UI拡張機能の作成

UI拡張機能を作成するには、次の手順に従います。

ツールをインストールして、Adobe プロジェクトを作成。
空のApp Builder プロジェクトを生成し、Fusion拡張機能ポイントに指定して、ウィジェットを登録します。
UIを作成し、Fusionに接続します。
Fusionが送信するコンテキストを使用。
Fusionが見つけられるように公開。
（オプション） CORSを使用せずに、Workfront/Fusion APIを呼び出して実際のデータを取得します。

プロセスを開始するには、ツールとAdobe アカウントの設定に移動します。

recommendation-more-help

workfront-fusion-help-workfront-fusion