ドキュメントAEM as a Cloud Serviceユーザーガイド

ユニバーサルエディターのカスタマイズと拡張 customizing-extending

Last update: Wed Feb 05 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

作成対象：

  • 管理者
  • 開発者

コンテンツ作成者のニーズに合わせてユニバーサルエディターのオーサリングエクスペリエンスをカスタマイズできる様々な拡張ポイントとその他の機能について説明します。

概要 overview

ユニバーサルエディターでは、プロジェクトのニーズに合わせて 2 つのタイプの適応が可能です。

次の節では、両方のタイプについて説明します。

ユニバーサルエディターのカスタマイズ customizing

ユニバーサルエディターには、機能をカスタマイズするためのビルトインオプションがいくつか用意されています。

公開の無効化 disable-publish

特定のオーサリングワークフローでは、コンテンツを公開する前に確認する必要があります。 このような場合、どの作成者も公開オプションを使用できません。

次のメタデータを追加することで、「公開」ボタンを完全にアプリ内で抑制できます。

<meta name="urn:adobe:aue:config:disable" content="publish"/>

コンポーネントのフィルタリング filtering-components

コンポーネントフィルターを使用して、ユニバーサルエディターでコンテナごとに使用できるコンポーネントを制限できます。 詳しくは、コンポーネントのフィルタリングのドキュメントを参照してください。

プロパティパネルでのコンポーネントを条件付きで表示および非表示にする conditionally-hide

1 つまたは複数のコンポーネントを一般的に作成者が利用できる場合がありますが、意味をなさない状況が発生する場合もあります。 その場合、condition 属性を コンポーネントモデルのフィールドに追加することで、プロパティパネルでコンポーネントを非表示にできます。

条件は、JsonLogic スキーマを使用して定義できます。 条件が true の場合、フィールドが表示されます。 条件が false の場合、フィールドは非表示になります。

サンプルモデル
code language-json 
 {
    "id": "conditionally-revealed-component",
    "fields": [
      {
        "component": "boolean",
        "label": "Shall the text field be revealed?",
        "name": "reveal",
        "valueType": "boolean"
      },
      {
        "component": "text-input",
        "label": "Hidden text field",
        "name": "hidden-text",
        "valueType": "string",
        "condition": { "===": [{"var" : "reveal"}, true] }
      }
    ]
 }
条件 False
非表示のテキストフィールド
条件 True
表示されたテキストフィールド

カスタムプレビュー URL custom-preview-urls

カスタムプレビュー URL は、urn:adobe:aue:config:preview のメタ設定を使用して指定できます。この設定は、エディターの右上のツールバー 🔗 にある「 ページを開く ボタンをクリックすると開きます。

これは、WYSIWYG オーサリングでEdge Delivery Servicesを使用するなど、特定のプレビュー要件を持つアプリケーションで特に役立ちます。

これを行うには、次の例のように、実装されたアプリのメタタグに目的のプレビュー URL を含めるのみです。

<meta name="urn:adobe:aue:config:preview" content="https://wknd.site"/>

ユニバーサルエディター UI の拡張 extending

Adobe Experience Cloud サービスとして、ユニバーサルエディターの UI は、App Builder とExperience Manager を使用して拡張できます。

UI 拡張機能は、Adobe App Builder で作成された JavaScript アプリケーションで、ユニバーサルエディターなどの Adobe Experience Cloud 統合シェルで実行される UI アプリケーションに埋め込むことができます。 ヘッダーメニューとプロパティパネルに独自のボタンとアクションを追加したり、ユニバーサルエディター用に独自のイベントを作成したりできます。

これらの可能性を調べるには、次のリソースを参照してください。

  1. UI 拡張機能 - UI 拡張機能の開発者向けドキュメント。
  2. UI 拡張機能ガイド - 独自の拡張機能を開発する方法に関する手順説明
  3. ユニバーサルエディターの拡張ポイント - ユニバーサルエディター固有の拡張ポイントについてのドキュメント
TIP
例を挙げて学びたい場合は、AEM UI 拡張機能のチュートリアルを参照してください。 コンテンツフラグメントコンソールの拡張に重点を置いていますが、ユニバーサルエディターで UI 拡張機能を実装する場合の概念は同じです。

AEM SitesのExtension Managerを使用すると、インスタンスごとに拡張機能を有効または無効にしたり、ユニバーサルエディターを含むAdobeのファーストパーティ拡張機能にアクセスしたりできます。

recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab