UI拡張性用のプロジェクトの作成

ターミナルを開きます。

ターミナルで、プロジェクトを保存するフォルダーに移動します。

実行：

aio app init my-fusion-extension --standalone-app

• my-fusion-extensionはフォルダー/アプリ名です。 この名前は選択できますが、小文字、ハイフン、スペースは使用できません。
• --standalone-appは、製品テンプレートを選択するように求める代わりに、プレーンアプリケーションスケルトン​を作成するようにCLIに指示します。 これは、AEM（またはその他の）テンプレートを回避するための鍵です。

プロンプトが表示されたら、組織を選択します （複数に属している場合）。

プロンプトが表示されたら、「新しいプロジェクトを作成」を選択し、提案された名前を受け入れるか、既存の空のプロジェクトを選択します。

このコマンドは、ステージ​および​実稼動 ワークスペースを自動的に設定します。

このコマンドは、ファイルをmy-fusion-extension フォルダーに生成し、npm installを実行します。

​ プロジェクト作成の確認に進みます。

ターミナルで、作成したフォルダーに移動します。

cd my-fusion-extension

次のような構造が表示されます（一部のファイルは省略されています）。

my-fusion-extension/
|--- app.config.yaml   // main configuration (you will edit this)
|---  package.json   //dependencies and scripts
|---  src/    // your source code
|---  web-src/  or  src/.../web-src/  // front-end files (HTML/JS)

最も関心のある2つのファイルは次のとおりです。

• app.config.yaml：中央設定。 このプロセスの後半で、アプリをFusion拡張機能ポイントに接続するextensions: セクションをここに追加します。
• package.json: アプリで使用するライブラリを一覧表示します。 Adobe UI拡張性ゲストライブラリは、ここに追加します。

続行して必要なライブラリを追加します。

ターミナルで、以下を実行します。

npm install @adobe/uix-guest @adobe/react-spectrum

（条件付き）生成されたプロジェクトにReactが含まれていない場合は、次もインストールします。

npm install react react-dom react-router-dom

続行​ プロジェクトのビルドを確認します。

ターミナルで、以下を実行します。

aio app build

エラーなしで完了すると、ツールとプロジェクトは正しく設定されます。 プロジェクトをFusionに接続する準備が整いました。

引き続きFusion用にプロジェクトを設定します。

プロジェクトが次のように見えるように、ファイルを作成します。

my-fusion-extension/
|-- app.config.yaml
|-- src/
       |-- fusion-nav-organization-1/          // one folder per extension point
          |-- ext.config.yaml
          |-- web-src/
             |-- src/
                |-- components/
                   |-- App.js
                   |-- ExtensionRegistration.js
                   |-- DashboardWidget.js
                   |-- Constants.js

拡張ポイント （fusion-nav-organization-1）の後にフォルダーの名前を付けることをお勧めします。 正確な名前は自分で決めますが、app.config.yamlで参照する名前と一致する必要があります。

引き続きapp.config.yamlで拡張ポイントを宣言します。

app.config.yamlを開き、その内容を次のように更新します。

extensions:
  fusion/nav-organization/1:
    $include: src/fusion-nav-organization-1/ext.config.yaml

次の内容について説明します。

• extensions:：このアプリは1つ以上の拡張ポイントを実装しています。
• fusion/nav-organization/1：接続中のFusion スロット。 名前は、バージョン 1を含め、正確に​と一致する必要があります。
• $include:：この拡張機能の内容を説明する2番目の構成ファイル （次の手順で作成）を指します。 別のファイルに保存すると、app.config.yamlがクリーンになり、後で拡張ポイントを追加できます。

extensions:
        fusion/nav-organization/1:
            $include: src/fusion-nav-organization-1/ext.config.yaml
        fusion/nav-team/1:
            $include: src/fusion-nav-team-1/ext.config.yaml

1. に進み、ext.config.yamlで拡張機能を説明してください

src/fusion-nav-organization-1/ext.config.yamlの作成条件：

operations:
   view:
    - type: web
      impl: index.html
web: web-src
hooks:
  pre-app-build: node node_modules/@adobe/uix-guest/scripts/generate-metadata.js
   pre-app-run: node node_modules/@adobe/uix-guest/scripts/generate-metadata.js

次の内容について説明します。

• operations.view：拡張機能がindex.htmlから提供される​ビュー （表示されるUI）を提供することを宣言します。 これは、拡張機能がバックグラウンドでのみ実行するのではなく、画面を表示するようなものです。
• web: web-src: フロントエンドファイルを保持するフォルダー。 App Builderでは、これらのコンポーネントをすべてAdobe Content Delivery Network （CDN）上に構築し、ホストしています。
• hooks: ビルド/実行時に自動的に実行される小さなコマンド。 generate-metadata.js スクリプトは@adobe/uix-guestに付属しており、登録コードが必要とするapp-metadata.json ファイルを生成します（手順4を参照）。 このスクリプトを書くのではなく、単に参照するだけです。

安定した拡張機能IDの設定に進みます。

src/fusion-nav-organization-1/web-src/src/components/Constants.jsを作成：

module.exports = {
  extensionId: 'my-fusion-extension'
};

コードが拡張機能IDを参照するあらゆる場所で同じ値を使用します。

​ ウィジェットの登録に進みます。

src/fusion-nav-organization-1/web-src/src/components/ExtensionRegistration.jsを作成します。
重要な部分はregister(...)呼び出しです。

import { register } from "@adobe/uix-guest";
import metadata from "../../../../app-metadata.json";
import { extensionId } from "./Constants";

async function init() {
  await register({
    id: extensionId,
    metadata,
    methods: {
      dashboard: {
        getWidget() {
          return {
            id: extensionId,
            title: "My Fusion tool",        // shown on the Fusion nav button
            description: "What this tool does",
            url: "/index.html#/my-widget",  // route to your visible UI
            hideWidgetHeader: false          // false = Fusion shows the title
          };
        }
      }
    }
   });
}

init().catch(console.error);

重要なポイント：

• title​は、Fusionがナビゲーションボタンに付けるラベルです。 hideWidgetHeaderがfalseの場合、タイトルはUIの上のヘッダーとしても表示されます。
• url​は、同じアプリ内の​visible UIへのルートです。 これは、フロントエンドルーターが処理するハッシュルート（#/my-widget）です（次のページで設定します）。 画面をレンダリングするコンポーネントに解決する必要があります。
• metadata​はapp-metadata.jsonから取得され、generate-metadata フックがビルド時に作成します。 図のように読み込みます。
• dashboard.getWidget メソッド名は、ウィジェットを検出するためにFusionが呼び出す契約に同意した名前です。 dashboardの名前空間とgetWidgetの名前を保持します。