マイクロフロントエンドの宛先セレクター Overview
マイクロフロントエンドの宛先セレクターには、アプリケーション内に Experience Manager Assets as a Cloud Service リポジトリと簡単に統合できるユーザーインターフェイスがあります。Experience Manager Assets as a Cloud Service リポジトリ内の適切なフォルダーを検索または参照して、アプリケーションからアセットをアップロードできます。
宛先セレクターパッケージを使用すると、マイクロフロントエンドのユーザーインターフェイスをアプリケーションエクスペリエンスで利用できるようになります。パッケージのアップデートはすべて自動的に読み込まれ、アプリケーション内にデプロイされた最新の宛先セレクターが自動的に読み込まれます。
宛先セレクターには、次のような多くの利点があります。
- Vanilla JavaScript ライブラリを使用して、あらゆるアドビアプリケーションまたはアドビ以外のアプリケーションと簡単に統合できます。
- 宛先セレクターパッケージのアップデートがアプリケーションで使用可能な宛先セレクターに自動的にデプロイされるため、管理が簡単です。最新の修正内容を読み込むために、アプリケーション内でアップデートを行う必要がありません。
- アプリケーション内の宛先セレクターの表示を制御するプロパティを利用できるため、カスタマイズが容易です。
- 全文検索を使用して、フォルダーに素早く移動し、アプリケーションからアセットをアップロードできます。
- フォルダーの作成、フォルダーの昇順または降順で並べ替え、リスト、グリッド、ギャラリー、ウォーターフォール表示で表示する機能があります。
この記事では、統合シェルの下で Adobe アプリケーションと連携して宛先セレクターを使用する方法、または認証用に生成された imsToken が既にある場合に宛先セレクターを使用する方法について説明します。この記事では、これらのワークフローを非 SUSI フローと呼びます。
次のタスクを実行して宛先セレクターを Experience Manager Assets as a Cloud Service リポジトリと統合し、連携して使用します。
Vanilla JS を使用した宛先セレクターの統合 integration-with-vanilla-js
あらゆる Adobe アプリケーションまたはアドビ以外のアプリケーションを Experience Manager Assets as a Cloud Service リポジトリと統合し、アプリケーション内からアセットを選択できます。
統合は、宛先セレクターパッケージを読み込み、Vanilla JavaScript ライブラリを使用して Assets as a Cloud Service に接続することで行われます。アプリケーション内の index.html または適切なファイルを、次の目的で編集する必要があります。
- 認証の詳細を定義する
- Assets as a Cloud Service リポジトリにアクセスする
- 宛先セレクターの表示プロパティを設定する
次の場合は、一部の IMS プロパティを定義せずに認証を実行できます。
- 統合シェルの Adobe アプリケーションを統合している場合。
- 認証用に既に IMS トークンが生成されている場合。
前提条件 prerequisites
アプリケーション実装内の index.html ファイルまたは同様のファイルで前提条件を定義して、Experience Manager Assets as a Cloud Service リポジトリにアクセスするための認証の詳細を定義します。前提条件は次のとおりです。
- imsOrg
- imsToken
- apikey
インストール installation
宛先セレクターは、ESM CDN 経由（例：esm.sh／skypack）および UMD バージョン経由のいずれでも使用できます。
UMD バージョン を使用しているブラウザー（推奨）：
UMD バージョン を使用しているブラウザー（推奨）：
<script src="https://experience.adobe.com/solutions/CQ-assets-selectors/static-assets/resources/assets-selectors.js"></script>
<script>
const { renderAssetSelector } = PureJSSelectors;
</script>
ESM CDN バージョン を使用している import maps 対応ブラウザー：
<script type="module">
import { AssetSelector } from 'https://experience.adobe.com/solutions/CQ-assets-selectors/static-assets/resources/@assets/selectors/index.js'
</script>
ESM CDN バージョン を使用している Deno/Webpack Module Federation：
import { AssetSelector } from 'https://experience.adobe.com/solutions/CQ-assets-selectors/static-assets/resources/@assets/selectors/index.js'
選択した宛先 selected-destination
宛先セレクターは、onItemSelect、onTreeToggleItem または onTreeSelectionChange から、オブジェクト（ディレクトリ、画像など）を含む選択されたディレクトリを含むコールバックを受け取ります。
スキーマ構文
interface SelectedDestination {
id: string;
children: SelectedDestination[];
'repo:repositoryId': string;
'dc:format': string;
'repo:assetClass': string;
'storage:directoryType': string;
'storage:region': string;
'repo:name': string;
'repo:path': string;
'repo:ancestors': string[];
'repo:createDate': string;
'storage:assignee':
{ type: string; id: string; }
;
'repo:assetId': string;
'aem:published': boolean;
'repo:createdBy': string;
'repo:state': string;
'repo:id': string;
'repo:modifyDate': string;
_page:
{ orderBy: string; count: number; };
}
次の表に、選択された宛先の重要なプロパティの一部を示します。
Array<string>プロパティの完全なリストと詳細な例については、宛先セレクターのコード例を参照してください。
非 SUSI フローの例 non-ims-vanilla
この例では、統合シェルの下で Adobe アプリケーションを実行している場合、または認証用に生成された imsToken が既にある場合に、宛先セレクターを非 SUSI フローと連携して使用する方法を示します。
以下の例の 6～15 行目 に示されているように、script タグを使用して宛先セレクターパッケージをコードに含めます。スクリプトが読み込まれると、PureJSSelectors グローバル変数を使用できるようになります。16～23 行目 に示されているように、宛先セレクターのプロパティを定義します。imsOrg プロパティと imsToken プロパティは、いずれも非 SUSI フローでの認証に必要です。handleSelection プロパティは、選択したアセットを処理するために使用されます。17 行目 で示されているように、宛先セレクターをレンダリングするには renderDestinationSelector 関数を呼び出します。21～22 行目 に示されているように、宛先セレクターが <div> コンテナ要素に表示されます。
これらの手順に従うと、Adobe アプリケーションで宛先セレクターを非 SUSI フローと連携して使用できます。
<!DOCTYPE html>
<html>
<head>
<title>Destination Selector</title>
<script src="https://experience.adobe.com/solutions/CQ-assets-selectors/assets/resources/assets-selectors.js"></script>
<script>
// get the container element in which we want to render the DestinationSelector component
const container = document.getElementById('destination-selector-container');
// imsOrg and imsToken are required for authentication in non-SUSI flow
const destinationSelectorProps = {
imsOrg: 'example-ims@AdobeOrg',
imsToken: "example-imsToken",
apiKey: "example-apiKey-associated-with-imsOrg",
handleSelection: (assets: SelectedAssetType[]) => {},
};
// Call the `renderDestinationSelector` available in PureJSSelectors globals to render DestinationSelector
PureJSSelectors.renderDestinationSelector(container, destinationselectorprops);
</script>
</head>
<body>
<div id="destination-selector-container" style="height: calc(100vh - 80px); width: calc(100vw - 60px); margin: -20px;">
</div>
</body>
</html>
詳細な例は、宛先セレクターのコード例を参照してください。
宛先セレクターのプロパティを使用する destination-selector-properties
宛先セレクターのプロパティを使用して、宛先セレクターのレンダリング方法をカスタマイズできます。次の表に、宛先セレクターをカスタマイズして使用するために利用できるプロパティを示します。
imsOrg キーは、アクセスしようとしている組織が Adobe IMS 内にあるかどうかを認証するために必要です。imsToken は必須ではありません。ただし、非 SUSI フローを使用している場合は必須です。apiKey は必須ではありません。ただし、非 SUSI フローの場合は必須です。rootPath はカプセル化の形式でも使用できます。例えば、次のパス /content/dam/marketing/subfolder/ を指定すると、宛先セレクターでは親フォルダーをトラバースできず、子フォルダーのみが表示されます。onCreateFolder プロパティを使用すると、アプリケーションに新しいフォルダーを追加するアイコンを追加できます。viewType プロパティは、アセットの表示に使用するビューの指定に使用します。viewType プロパティに関連付けられています。アセットを表示する 1 つ以上のビューを指定できます。使用可能な viewTypeOptions は、リスト表示、グリッド表示、ギャラリー表示、ウォーターフォール表示、ツリー表示です。Object<{ id?: string, defaultMessage?: string, description?: string}>i18nSymbols プロップ経由で渡すことができるインターフェイスを表示できます。このインターフェイスを介して値を渡すと、提供されたデフォルトの翻訳が上書きされ、代わりに独自の翻訳が使用されます。上書きを実行するには、上書きしたい i18nSymbols のキーに有効なメッセージ記述子オブジェクトを渡す必要があります。intl.locale プロップを介して有効なロケール文字列を指定することで、翻訳言語を選択できます。（例：intl={{ locale: "es-es" }}）サポートされているロケール文字列は、言語名の標準規格を表す ISO 639 - コードに従います。
サポートされているロケールの一覧：英語 - 'en-us'（デフォルト）スペイン語 - 'es-es' ドイツ語 - 'de-de' フランス語 - 'fr-fr' イタリア語 - 'it-it' 日本語 - 'ja-jp' 韓国語 - 'ko-kr' ポルトガル語 - 'pt-br' 中国語（簡体字） - 'zh-cn' 中国語（繁体字） - 'zh-tw'
宛先セレクターのプロパティの使用例 usage-examples
index.html ファイルで宛先セレクターのプロパティを定義して、アプリケーション内の宛先セレクター表示をカスタマイズできます。
例 1：宛先セレクターでフォルダーを作成
宛先セレクターを使用すると、特定の場所にアセットのアップロード、移動またはコピー用のフォルダーを作成できます。
例 2：宛先セレクターの表示タイプを指定
宛先セレクターは、4 つの異なる表示（リスト表示、グリッド表示、ギャラリー表示、ウォーターフォール表示）で、様々なアセットの配列を表示します。デフォルトの表示タイプを指定するには、viewType プロパティを使用します。viewTypeOptions プロパティは viewType プロパティと併用して他の表示タイプを指定し、他の表示タイプオプションをドロップダウンに表示できるようにします。単一の引数を使用すると、オプションを 1 つだけ表示できます。
例 3：アセットフォルダーのパスを初期化
path プロパティを使用して、宛先セレクターがレンダリングされる際に自動的に表示されるフォルダー名を定義します。
宛先セレクターの使用 using-destination-selector
宛先セレクターを設定し、Adobe Experience Manager as a Cloud Service アプリケーションで宛先セレクターの使用が認証されると、アセットを選択したり、その他の様々な操作を実行してリポジトリ内でアセットを検索したりできます。
- A：検索バー
- B：並べ替え
- C：アセット
- D：接尾辞または接頭辞を追加
- E：新しいフォルダーを作成
- F：表示
- G：情報
- H：フォルダーを選択
検索バー search-bar
宛先セレクターを使用すると、選択したリポジトリ内のアセットに対してフルテキスト検索を実行できます。例えば、検索バーにキーワード「wave」を入力すると、メタデータプロパティのいずれかでキーワード「wave」が記述されているアセットがすべて表示されます。
並べ替え sorting
宛先セレクター内のアセットを、アセットの名前、寸法、サイズで並べ替えることができます。アセットを昇順または降順で並べ替えることもできます。
アセットリポジトリ assets-repo
宛先セレクターを使用すると、選択したリポジトリのデータを AEM アプリケーションで表示することもできます。repositoryID プロパティを使用して、宛先セレクターの最初のインスタンスに表示する宛先フォルダーのパスを初期化できます。
接尾辞または接頭辞を追加 add-suffix-or-prefix
optionsFormSetup プロパティの例です。選択を確認するのに使用でき、onConfirm イベントで渡されます。
フォルダーの作成 create-new-folder
Adobe Experience Manager as a Cloud Service の宛先フォルダーにフォルダーを作成できます。
表示の種類 types-of-view
宛先セレクターを使用すると、次の 4 つの異なるビューでアセットを表示できます。
-
-
-
-
情報 info
情報または情報アイコンを使用すると、選択したアセットのメタデータを表示できます。寸法、サイズ、説明、パス、変更日、作成日など、様々な詳細が含まれます。メタデータ情報は、アセットのアップロード時、コピー時、作成時に提供されます。
フォルダーの選択 select-folder
「フォルダーを選択」ボタンを使用すると、宛先セレクターのプロパティに関連付けられた様々な操作を実行するためのアセットを選択できます。