マイクロフロントエンドアセットセレクター Overview
マイクロフロントエンドアセットセレクターは、Experience Manager Assets リポジトリと簡単に統合できるユーザーインターフェイスを提供します。ユーザーはこれにより、リポジトリで使用可能なデジタルアセットを参照または検索し、アプリケーションのオーサリングエクスペリエンスで使用できるようになります。
アセットセレクターパッケージを使用すると、マイクロフロントエンドのユーザーインターフェイスをアプリケーションエクスペリエンスで利用できるようになります。パッケージのアップデートはすべて自動的に読み込まれ、デプロイされた最新のアセットセレクターがアプリケーション内に自動的に読み込まれます。
アセットセレクターには、次のような多くの利点があります。
- Vanilla JavaScript ライブラリを使用して、あらゆるアドビアプリケーションまたはアドビ以外のアプリケーションと簡単に統合できます。
- アセットセレクターパッケージのアップデートがアプリケーションで使用可能なアセットセレクターに自動的にデプロイされるため、管理が簡単です。最新の修正内容を読み込むために、アプリケーション内でアップデートを行う必要がありません。
- アプリケーション内のアセットセレクターの表示を制御するプロパティを利用できるため、カスタマイズが容易です。
- フルテキスト検索、標準のフィルターおよびカスタマイズされたフィルターを使用して、オーサリングエクスペリエンス内で使用するアセットにすばやく移動できます。
- IMS 組織内のリポジトリを切り替えて、アセットを選択できます。
- 名前、寸法、サイズでアセットを並べ替えたり、リスト、グリッド、ギャラリー、ウォーターフォールの各レイアウトでアセットを表示したりできます。
前提条件 prereqs
次の通信方法を確保する必要があります。
- アプリケーションは HTTPS で実行されている。
- IMS クライアントのリダイレクト URL の許可リスト内のアプリケーションの URL。
- IMS ログインフローは、web ブラウザーのポップアップを使用して設定およびレンダリングされる。そのため、ターゲットブラウザーでポップアップを有効または許可する必要があります。
アセットセレクターの IMS 認証ワークフローが必要な場合は、上記の前提条件を使用します。または、IMS ワークフローで既に認証されている場合は、代わりに IMS 情報を追加できます。
- 統合アプリケーションがホストされるドメイン名。
- プロビジョニング後、組織には次の情報が提供されます
imsClientId,imsScope、およびredirectUrlアセットセレクターの設定に不可欠な、ユーザーがリクエストする環境に対応します。 これらの有効なプロパティがないと、インストール手順を実行できません。
インストール installation
アセットセレクターは、ESM CDN 経由（例：esm.sh／skypack）および 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'
Vanilla JS を使用したアセットセレクターの統合 integration-using-vanilla-js
あらゆる Adobe アプリケーションまたはアドビ以外のアプリケーションを Experience Manager Assets リポジトリと統合し、アプリケーション内からアセットを選択できます。アセットセレクターと様々なアプリケーションの統合を参照してください。
統合は、アセットセレクターパッケージを読み込み、Vanilla JavaScript ライブラリを使用して Assets as a Cloud Service に接続することで行われます。アプリケーション内の index.html または適切なファイルを、次の目的で編集します。
- 認証の詳細を定義する
- Assets as a Cloud Service リポジトリにアクセスする
- アセットセレクターの表示プロパティを設定する
次の場合は、一部の IMS プロパティを定義せずに認証を実行できます。
- 統合シェルの Adobe アプリケーションを統合している場合。
- 認証用に既に IMS トークンが生成されている場合。
アセットセレクターと様々なアプリケーションの統合 asset-selector-integration-with-apps
アセットセレクターは、次のような様々なアプリケーションと統合できます。
前提条件 prereqs-adobe-app
アセットセレクターを Adobe アプリケーションと統合する場合は、次の前提条件を使用しまず。
- 通信方法
- imsOrg
- imsToken
- apikey
アセットセレクターと Adobe アプリケーションの統合 adobe-app-integration-vanilla
次の例では、統合シェルの下で Adobe アプリケーションを実行している場合、または認証用に生成された imsToken が既にある場合に、アセットセレクターの使用方法を示します。
以下の例の 6～15 行目 に示されているように、script タグを使用してアセットセレクターパッケージをコードに含めます。スクリプトが読み込まれると、PureJSSelectors グローバル変数を使用できるようになります。16～23 行目 に示されているように、アセットセレクターのプロパティを定義します。imsOrg プロパティと imsToken プロパティは、いずれもアドビアプリケーションでの認証に必要です。handleSelection プロパティは、選択したアセットを処理するために使用されます。17 行目 で示されているように、アセットセレクターをレンダリングするには renderAssetSelector 関数を呼び出します。21～22 行目 に示されているように、アセットセレクターが <div> コンテナ要素に表示されます。
これらの手順に従うことで、Adobe アプリケーションでアセットセレクターを使用できます。
| code language-html line-numbers |
|---|
|
| accordion | ||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ImsAuthProps | ||||||||||||||||||||
|
|
| accordion | ||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ImsAuthService | ||||||||||||||
|
|
| accordion | ||
|---|---|---|
| IMS トークンの検証 | ||
|
| accordion | ||
|---|---|---|
| IMS サービスへのコールバックの登録 | ||
|
前提条件 prereqs-non-adobe-app
アセットセレクターをアドビ以外のアプリケーションと統合する場合は、次の前提条件を使用します。
- 通信方法
- imsClientId
- imsScope
- redirectUrl
- imsOrg
- apikey
アセットセレクターは、アドビ以外のアプリケーションと統合する場合に、imsScope や imsClientID などの Identity Management System（IMS）プロパティを使用した Experience Manager Assets リポジトリへの認証をサポートします。
アセットセレクターとアドビ以外のアプリケーションの統合 adobe-non-app-integration
アセットセレクターをAdobe以外のアプリケーションと統合するには、サポートチケットの記録や統合など、様々な検証を実行する必要があります。
| accordion |
|---|
| アドビ以外のアプリケーションに対するアセットセレクターの設定 |
|
アドビ以外のアプリケーションに対してアセットセレクターを設定するには、まずプロビジョニングのサポートチケットを記録してから、統合手順を実行する必要があります。 サポートチケットの記録
|
| accordion | ||
|---|---|---|
| 統合手順 | ||
|
アセットセレクターをアドビ以外のアプリケーションと統合する際の認証には、この例の
この例の 14 行目 から 38 行目 では、
65 行目 に示している 74 行目 から 81 行目 に示すように、アセットセレクターは
|
| accordion | |||
|---|---|---|---|
| 配信リポジトリにアクセスできない | |||
|
前提条件 prereqs-polaris
アセットセレクターとDynamic Mediaを OpenAPI 機能と統合する場合は、次の前提条件を使用してください。
-
OpenAPI 機能を使用してDynamic Mediaにアクセスするには、次のライセンスが必要です。
- Assets リポジトリ（例：Experience Manager Assetsas a Cloud Service）。
- AEM Dynamic Media。
-
のみ 承認済みアセット ブランドの一貫性を確保するために使用できます。
Dynamic Mediaと OpenAPI の機能との統合 adobe-app-integration-polaris
アセットセレクターとDynamic Media OpenAPI プロセスの統合には、カスタマイズされた Dynamic Media URL の作成や Dynamic Media URL を選択する準備の完了など、様々な手順が含まれます。
| accordion | ||
|---|---|---|
| Dynamic Media用アセットセレクターと OpenAPI 機能の統合 | ||
|
この
この設定を使用すると、承認済みアセットをすべてフォルダーなしで表示したり、フラット構造として表示したりできます。 詳しくは、次を参照してください： |
| accordion | ||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 承認済みアセットからの動的配信 URL の作成 | ||||||||||||||||
|
アセットセレクターを設定すると、オブジェクトのスキーマを使用して、選択したアセットから動的配信 URL が作成されます。
選択したすべてのアセットは、次のユーザーによって実行されます
承認済みのアセット配信 API 仕様 URL 形式： ここで、
承認されたアセット配信 API 動的配信 URL の構文は次のとおりです。
|
| accordion | |||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 動的配信 URL を選択する準備ができました | |||||||||||||||||||
|
選択したすべてのアセットは、次のユーザーによって実行されます
JSON オブジェクトをトラバースする 2 つの方法を以下に示します。
上記のスクリーンショットでは、サムネールではなくレンディションが必要な場合、PDFのオリジナルPDFの配信 URL をターゲットエクスペリエンスに組み込む必要があります。 例えば、
|
| accordion |
|---|
| カスタムフィルターの設定 |
|
OpenAPI 機能を備えたDynamic Mediaのアセットセレクターを使用すると、カスタムプロパティとそれに基づくフィルターを設定できます。 この
設定の場合、で定義されるプロパティです。 例えば、OpenAPI 機能を備えたDynamic Mediaのアセットセレクターで、のプロパティを 名前を取得するには、1 回限りのアクティビティを行う必要があります。 アセットに対して検索 API 呼び出しを実行し、プロパティ名（バケット、基本的には）を取得します。 |
アセットセレクターのプロパティ asset-selector-properties
アセットセレクターのプロパティを使用して、アセットセレクターのレンダリング方法をカスタマイズできます。次の表に、アセットセレクターをカスタマイズして使用するために利用できるプロパティを示します。
true とマークされている場合、アセットセレクターは左側のパネルビューにレンダリングされます。false とマークされている場合、アセットセレクターはモーダルビューにレンダリングされます。imsOrg キーは、アクセスしようとしている組織が Adobe IMS 内にあるかどうかを認証するために必要です。imsToken は必須です。apiKey は必須です。<Object>[{id: 'urn:234}, {id: 'urn:555'}]）アセットは、現在のディレクトリで使用できる必要があります。別のディレクトリを使用する必要がある場合は、path プロパティの値も指定します。rail プロパティと共にに使用されます。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'
Array<string>{allowList?: Object}light または dark）を設定します。アセットが選択され、モーダルの Select ボタンがクリックされた場合に、アセットの項目の配列と一緒に呼び出されます。この関数は、モーダルビューでのみ呼び出されます。パネルビューの場合は、handleAssetSelection 関数または onDrop 関数を使用します。例：
handleSelection=(assets: Asset[])=> {…}
詳しくは、選択されたアセットタイプを参照してください。
アセットが選択または選択解除されたときに、項目の配列と一緒に呼び出されます。これは、ユーザーがアセットの選択時にアセットをリッスンする場合に役立ちます。例：
handleSelection=(assets: Asset[])=> {…}
詳しくは、選択されたアセットタイプを参照してください。
Close ボタンが押された際に呼び出されます。これは、modal ビューでのみ呼び出され、rail ビューでは無視されます。single 選択または multiple 選択するための設定です。構文：
aemTierType:[0: "author" 1: "delivery"例えば、次の両方の場合：
["author","delivery"] を使用すると、リポジトリスイッチャーに作成者と配信の両方のオプションが表示されます。さらに、を使用します
["delivery"] （OpenAPI 機能を備えたDynamic Mediaの配信関連アセット用）filterRepoList コールバック関数を使用できます。アセットセレクターのプロパティの使用例 usage-examples
index.html ファイルでアセットセレクターのプロパティを定義して、アプリケーション内のアセットセレクター表示をカスタマイズできます。
例 1：パネルビューのアセットセレクター
アセットセレクターの rail の値が false に設定されている、またはプロパティで示されていない場合、アセットセレクターはデフォルトでモーダルビューに表示されます。この acvConfig プロパティは、アセットビューアのパネルビューを有効にするために使用されます。 acvConfig プロパティの使用法については、ドラッグ＆ドロップを有効または無効にするを参照してください。
例 2：メタデータポップオーバー
様々なプロパティを使用して、情報アイコンを使用して表示するアセットのメタデータを定義します。情報ポップオーバーは、アセットまたはフォルダーに関する情報のコレクションを提供します。この情報には、アセットのタイトル、寸法、変更日、場所、説明などが含まれます。次の例では、様々なプロパティを使用してアセットのメタデータを表示します。例えば、repo:path プロパティは、アセットの場所を指定します。
例 3：パネルビューのカスタムフィルタープロパティ
ファセット検索に加えて、アセットセレクターを使用すると、様々な属性をカスタマイズし、Cloud Service アプリケーションとして Adobe Experience Manager からの検索を絞り込むことができます。カスタマイズした検索フィルターをアプリケーションに追加するには、次のコードを追加します。次の例では、画像、ドキュメント、ビデオの中からアセットタイプをフィルタリングする Type Filter 検索、または検索用に追加したフィルタータイプを使用します。
機能設定コードスニペット code-snippets
アプリケーション実装内の index.html ファイルまたは同様のファイルで前提条件を定義して、Experience Manager Assets リポジトリにアクセスするための認証の詳細を定義します。完了したら、要件に応じてコードスニペットを追加できます。
フィルターパネルのカスタマイズ customize-filter-panel
次のコードスニペットを assetSelectorProps オブジェクトに追加して、フィルターパネルをカスタマイズできます。
filterSchema: [
{
header: 'File Type',
groupKey: 'TopGroup',
fields: [
{
element: 'checkbox',
name: 'type',
options: [
{
label: 'Images',
value: '<comma separated mimetypes, without space, that denote all images, for e.g., image/>',
},
{
label: 'Videos',
value: '<comma separated mimetypes, without space, that denote all videos for e.g., video/,model/vnd.mts,application/mxf>'
}
]
}
]
},
{
fields: [
{
element: 'checkbox',
name: 'type',
options: [
{ label: 'JPG', value: 'image/jpeg' },
{ label: 'PNG', value: 'image/png' },
{ label: 'TIFF', value: 'image/tiff' },
{ label: 'GIF', value: 'image/gif' },
{ label: 'MP4', value: 'video/mp4' }
],
columns: 3,
},
],
header: 'Mime Types',
groupKey: 'MimeTypeGroup',
},
{
fields: [
{
element: 'checkbox',
name: 'property=metadata.application.xcm:keywords.value',
options: [
{ label: 'Fruits', value: 'fruits' },
{ label: 'Vegetables', value: 'vegetables'}
],
columns: 3,
},
],
header: 'Food Category',
groupKey: 'FoodCategoryGroup',
}
],
モーダルビューでの情報のカスタマイズ customize-info-in-modal-view
// Create an object infoPopoverMap and set the property `infoPopoverMap` with it in assetSelectorProps
const infoPopoverMap = (map) => {
// for example, to skip `path` from the info popover view
let defaultPopoverData = PureJSSelectors.getDefaultInfoPopoverData(map);
return defaultPopoverData.filter((i) => i.label !== 'Path'
};
assetSelectorProps.infoPopoverMap = infoPopoverMap;
ドラッグ＆ドロップモードを有効または無効にする enable-disable-drag-and-drop
次のプロパティを assetSelectorProp に追加して、ドラッグ＆ドロップモードを有効にします。ドラッグ＆ドロップを無効にするには、true パラメーターを false に置き換えます。
rail: true,
acvConfig: {
dragOptions: {
allowList: {
'*': true,
},
},
selectionType: 'multiple'
}
// the drop handler to be implemented
function drop(e) {
e.preventDefault();
// following helps you get the selected assets – an array of objects.
const data = JSON.parse(e.dataTransfer.getData('collectionviewdata'));
}
アセットの選択 selection-of-assets
選択されたアセットタイプは、handleSelection、handleAssetSelection、および onDrop 関数を使用している場合、アセット情報を含むオブジェクトの配列です。
次の手順を実行して、1 つまたは複数のアセットの選択を設定します。
acvConfig: {
selectionType: 'multiple' // 'single' for single selection
}
// the `handleSelection` callback, always gets you the array of selected assets
スキーマ構文
interface SelectedAsset {
'repo:id': string;
'repo:name': string;
'repo:path': string;
'repo:size': number;
'repo:createdBy': string;
'repo:createDate': string;
'repo:modifiedBy': string;
'repo:modifyDate': string;
'dc:format': string;
'tiff:imageWidth': number;
'tiff:imageLength': number;
'repo:state': string;
computedMetadata: Record<string, any>;
_links: {
'http://ns.adobe.com/adobecloud/rel/rendition': Array<{
href: string;
type: string;
'repo:size': number;
width: number;
height: number;
[others: string]: any;
}>;
};
}
次の表に、選択されたアセットのオブジェクトの重要なプロパティの一部を示します。
Array<string>Record<string, any>Record<string, any>プロパティの完全なリストと詳細な例については、アセットセレクターのコード例を参照してください。
オブジェクトスキーマを使用したアセット選択の処理 handling-selection
handleSelection プロパティを使用して、アセットセレクターでの 1 つまたは複数のアセットの選択を処理します。次の例に、handleSelection を使用した構文を示します。
アセットの選択を無効にする disable-selection
「選択を無効にする」は、アセットやフォルダーを非表示にしたり、選択できないようにしたりするために使用します。カードやアセットから選択チェックボックスを非表示にし、選択されないようにします。この機能を使用するには、配列内で無効にするアセットやフォルダーの位置を宣言します。例えば、最初の位置に表示されるフォルダーの選択を無効にする場合は、次のコードを追加できます。disableSelection: [0]:folder
無効にする MIME タイプ（画像、フォルダー、ファイル、image／jpeg などの他の MIME タイプ）のリストを配列に指定できます。宣言する MIME タイプは、アセットの data-card-type 属性と data-card-mimetype 属性にマッピングされます。
また、選択が無効なアセットもドラッグできます。特定のアセットタイプのドラッグ＆ドロップを無効にするには、dragOptions.allowList プロパティを使用します。
「選択を無効にする」の構文は次のとおりです。
(args)=> {
return(
<ASDialogWrapper
{...args}
disableSelection={args.disableSelection}
handleAssetSelection={action('handleAssetSelection')}
handleSelection={action('handleSelection')}
selectionType={args.selectionType}
/>
);
}
アセットセレクターの使用 using-asset-selector
アセットセレクターを設定し、Adobe Experience Manager as a Cloud Service アプリケーションでアセットセレクターの使用が認証されると、アセットを選択したり、その他の様々な操作を実行してリポジトリ内でアセットを検索したりできます。
- A：パネルの非表示／表示
- B：リポジトリスイッチャー
- C：アセット
- D：フィルター
- E：検索バー
- F：並べ替え
- G：昇順または降順での並べ替え
- H：表示
パネルの非表示／表示 hide-show-panel
左側のナビゲーションでフォルダーを非表示にするには、「フォルダーを非表示」アイコンをクリックします。変更を元に戻すには、「フォルダーを非表示」アイコンを再度クリックします。
リポジトリスイッチャー repository-switcher
アセットセレクターを使用すると、アセットを選択するためにリポジトリを切り替えることもできます。左側のパネルにあるドロップダウンから、目的のリポジトリを選択できます。ドロップダウンリストで使用できるリポジトリオプションは、index.html ファイルで定義されている repositoryId プロパティに基づいています。これは、ログインしているユーザーがアクセスする、選択された IMS 組織の環境に基づいています。消費者は優先する repositoryID を渡すことができ、その場合、アセットセレクターはリポジトリスイッチャーのレンダリングを停止し、指定されたリポジトリからのみアセットをレンダリングします。
アセットリポジトリ
操作の実行に使用できるアセットフォルダーのコレクションです。
標準のフィルター filters
アセットセレクターには、検索結果を絞り込むための標準のフィルターオプションも用意されています。次のフィルターを使用できます。
-
File type：フォルダー、ファイル、画像、ドキュメント、ビデオを含む -
MIME type：JPG、GIF、PPTX、PNG、MP4、DOCX、TIFF、PDF、XLSX を含む -
Image Size：画像の最小／/最大の幅、最小／最大の高さを含む
カスタム検索
フルテキスト検索の他に、アセットセレクターでは、カスタマイズされた検索を使用してファイル内のアセットを検索できます。カスタム検索フィルターは、モーダル表示モードとパネル表示モードの両方で使用できます。
また、デフォルトの検索フィルターを作成して、頻繁に検索するフィールドを保存し、後で使用することもできます。アセットのカスタム検索を作成するには、filterSchema プロパティを使用できます。
検索バー search-bar
アセットセレクターを使用すると、選択したリポジトリ内のアセットに対してフルテキスト検索を実行できます。例えば、検索バーにキーワード「wave」を入力すると、メタデータプロパティのいずれかでキーワード「wave」が記述されているアセットがすべて表示されます。
並べ替え sorting
アセットセレクター内のアセットを、アセットの名前、寸法、サイズで並べ替えることができます。アセットを昇順または降順で並べ替えることもできます。
表示の種類 types-of-view
アセットセレクターを使用すると、次の 4 つの異なるビューでアセットを表示できます。
-
-
-
-
