カスタム UI拡張機能:記事インデックス

Fusionのインターフェイス内に独自のweb UIを表示できます。 拡張機能と呼ばれる小さなweb アプリを作成し、それをAdobeに公開すると、Fusionのナビゲーションにボタンとして表示されます。 ユーザーがクリックすると、UIがFusionのメイン領域に読み込まれ、ログインしているユーザー、作業している組織やチームなどの情報が自動的に受け取られます。

この節では、Adobe App Builderまたはフロントエンドフレームワークの経験を前提とせずに、プロセス全体を順を追って説明します。 また、必要なコードと、そのコードの説明も含まれています。

このガイドを使用するタイミング

Fusionにカスタム画面またはツールを追加する場合は、このガイドを使用します。 エキスパートである必要はありません。 コマンドをターミナルにコピーし、いくつかのテキストファイルを編集することに慣れている必要があります。

カスタム UI拡張機能を作成するには、Adobe IDとAdobe組織へのアクセス(Fusionへのログインに使用するのと同じ種類のアクセス)が必要です。

構築するもの

このガイドの最後には、次のことが含まれます。

  1. 無料のAdobe App Builder プロジェクト。 ここに拡張機能が格納されています。
  2. カスタム UIをレンダリングする小さなweb アプリ。
  3. そのweb アプリがFusionの拡張ポイントのいずれかに接続され、Fusion ナビゲーションに表示されます。
  4. 現在のユーザー、組織、チームなどのライブコンテキストを読み取り、ユーザーが組織またはチームを切り替えたときに反応するUI。
  5. 拡張機能が公開され、組織内の他のユーザーが拡張機能を参照できるようになりました。

目次

最初にページを順番に読み上げます。 後で、必要なものに直接ジャンプできます。

#
ページ
内容
1
概要と主要な概念
語彙、アーキテクチャ、および各Fusion拡張ポイントの目的。
2
​ ツールとAdobe アカウントを設定
Node.js、Adobe I/O CLI、ログイン、Adobe Developer Consoleでのプロジェクトの作成。
3
​ プロジェクトを作成し、Fusion用に設定します
aio コマンドラインを使用して、汎用App Builder プロジェクトを生成します(製品固有のテンプレートではありません)。 次に、プロジェクトをFusion拡張機能ポイントに指定し、ウィジェットを登録します。
5
UIを作成
カスタム画面をレンダリングし、Fusionで接続(「ハンドシェイク」)を完了します。
6
Fusion コンテキスト参照
Adobe Workfront Fusionを使用すれば、それらのデータをもとに変更を加える必要がなくなります。
7
拡張機能を公開
拡張機能のビルド、デプロイ、Fusionでの表示。
8
トラブルシューティング
最も一般的なエラーの修正。
9
​ デモのチュートリアル ​
1つのリニアなコピーペースト スクリプト:汎用Experience Cloud Shell テンプレートのscaffold→Fusionにリターゲティング→、Fusionで実行され→ステージングにデプロイします。 ライブデモに最適です。
10
WorkfrontおよびFusion APIの呼び出し
ランタイムアクションプロキシを使用して、ブラウザーのCORSを押さずに拡張機能からバックエンド APIを呼び出します。 require-adobe-auth、Fusion v3 ヘッダー、および作業済みの例について説明します。

可用性に関するメモ

Fusionは現在、次の拡張ポイントを公開しています。

  • fusion/nav-organization/1 – 「組織」セクションに表示されます。
  • fusion/nav-team/1 – 「チーム」セクションに表示されます。

これらの1つに対して公開する前に、拡張機能ポイントをAdobeにオンボーディングする必要があります。 拡張機能ポイントが「存在しません」と表示され、公開手順が失敗した場合は、​ トラブルシューティング ​を参照してください。

Adobeの公式ドキュメント

このガイドはFusionに特化しています。 基礎となるプラットフォームの場合、規範的な参照は次のとおりです。

recommendation-more-help
workfront-fusion-help-workfront-fusion