1.プロジェクトを作成する
他のAdobe サービスへのアクセスを定義し、そのデプロイメントを管理するAdobe Developer Console プロジェクトを作成します。
Adobe Developerプロジェクトの作成AEMコンテンツフラグメントコンソール 拡張機能は、次の 2 つの拡張ポイントを使用して追加できます。ボタン コンテンツフラグメントコンソールの ヘッダーメニューまたはアクションバー。 拡張機能は、App Builder アプリとして実行される JavaScript で記述され、カスタム Web UI とサーバーレスのAdobe I/O Runtimeアクションを実装して、より集中的で長時間実行される作業を実行できます。
拡張機能のタイプ | 説明 | パラメーター |
---|---|---|
ヘッダーメニュー | 次の場合に表示されるヘッダーにボタンを追加します。 ゼロ コンテンツフラグメントが選択されている。 | なし。 |
アクションバー | アクションバーに、 1 つ以上 コンテンツフラグメントが選択されている。 | 選択したコンテンツフラグメントのパスの配列。 |
1 つのAEM Content Fragments Console 拡張機能に、0 または 1 つのヘッダーメニュー、0 または 1 つのアクションバー拡張タイプを含めることができます。 同じタイプの複数の拡張タイプが必要な場合は、複数のAEMコンテンツフラグメントコンソール拡張を作成する必要があります。
AEMコンテンツフラグメントコンソール拡張機能には、 Adobe Developer Console プロジェクト および App Builder アプリ の使用 @adobe/aem-cf-admin-ui-ext-tpl
テンプレート。Adobe Developer Console プロジェクトに関連付けられています。
拡張機能の動作に基づいて、App Builder アプリを生成する際に次の機能から選択します。 オプションの組み合わせは、拡張機能で使用できます。
次にボタンを追加 ヘッダーメニュー | 次にボタンを追加 アクションバー | 表示 モーダル | 追加 サーバーサイドハンドラー | |
---|---|---|---|---|
コンテンツフラグメントが選択されていない場合に使用できます | ✔ | |||
1 つ以上のコンテンツフラグメントが選択されている場合に使用できます | ✔ | |||
ユーザーからカスタム入力を収集します | ✔️ | |||
ユーザーに対してカスタムフィードバックを表示 | ✔️ | |||
AEMへの HTTP リクエストを呼び出します | ✔ | |||
Adobe/サードパーティのサービスへの HTTP リクエストを呼び出す | ✔ |
Adobe Developerには、AEMコンテンツフラグメントコンソールの拡張機能に関する開発者向けの詳細が含まれています。 次を確認してください: Adobe Developerの詳細な技術的詳細のコンテンツ.
AEM as a Cloud Service用のAEMコンテンツフラグメントコンソール拡張機能を生成、開発およびデプロイする方法については、以下の手順に従います。
1.プロジェクトを作成する
他のAdobe サービスへのアクセスを定義し、そのデプロイメントを管理するAdobe Developer Console プロジェクトを作成します。
Adobe Developerプロジェクトの作成2.拡張機能アプリを初期化する
拡張機能の表示場所と実行する作業を定義するAEM Content Fragment Console 拡張機能アプリビルダーアプリを初期化します。
拡張機能アプリの初期化5.モーダル
ユーザー向けのカスタムエクスペリエンスの作成に使用できる、拡張機能にカスタムモーダルを追加します。 モデルは、多くの場合、ユーザーからの入力を収集し、操作の結果を表示します。
モーダルの追加6.Adobe I/O Runtimeの行動
拡張機能が呼び出してコンテンツフラグメントとAEMとやり取りし、カスタムビジネス操作を実行するためのサーバーレスAdobe I/O Runtimeアクションを追加します。
Adobe I/O Runtimeアクションの追加AEMコンテンツフラグメントコンソール拡張の例。
OpenAI ベースの画像生成とAEM拡張機能へのアップロード
OpenAI を使用して画像を生成し、AEMにアップロードして、選択したコンテンツフラグメントの画像プロパティを更新するアクションバー拡張機能の例を見てみましょう。
拡張例を見る