マイクロフロントエンドアセットセレクター

マイクロフロントエンドアセットセレクターは、Experience Manager Assets as a Cloud Service リポジトリと簡単に統合できるユーザーインターフェイスを提供します。ユーザーはこれにより、リポジトリで使用可能なデジタルアセットを参照または検索し、アプリケーションのオーサリングエクスペリエンスで使用できるようになります。

アセットセレクターパッケージを使用すると、マイクロフロントエンドのユーザーインターフェイスをアプリケーションエクスペリエンスで利用できるようになります。パッケージのアップデートはすべて自動的に読み込まれ、デプロイされた最新のアセットセレクターがアプリケーション内に自動的に読み込まれます。

アセットセレクターには、次のような多くの利点があります。

Vanilla JavaScript ライブラリを使用して、あらゆるアドビアプリケーションまたはアドビ以外のアプリケーションと簡単に統合できます。
アセットセレクターパッケージのアップデートがアプリケーションで使用可能なアセットセレクターに自動的にデプロイされるため、管理が簡単です。最新の修正内容を読み込むために、アプリケーション内でアップデートを行う必要がありません。
アプリケーション内のアセットセレクターの表示を制御するプロパティを利用できるため、カスタマイズが容易です。
フルテキスト検索、標準のフィルターおよびカスタマイズされたフィルターを使用して、オーサリングエクスペリエンス内で使用するアセットにすばやく移動できます。
IMS 組織内のリポジトリを切り替えて、アセットを選択できます。
名前、寸法、サイズでアセットを並べ替えたり、リスト、グリッド、ギャラリー、ウォーターフォールの各レイアウトでアセットを表示したりできます。

この記事では、統合シェルの下で Adobe アプリケーションと連携してアセットセレクターを使用する方法、または認証用に生成された imsToken が既にある場合にアセットセレクターを使用する方法について説明します。この記事では、これらのワークフローを非 SUSI フローと呼びます。

次のタスクを実行してアセットセレクターを Experience Manager Assets as a Cloud Service リポジトリと統合し、連携して使用します。

Vanilla JS を使用したアセットセレクターの統合
アセットセレクターの表示プロパティの定義
アセットセレクターの使用

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 トークンが生成されている場合。

前提条件

アプリケーション実装内の index.html ファイルまたは同様のファイルで前提条件を定義して、Experience Manager Assets as a Cloud Service リポジトリにアクセスするための認証の詳細を定義します。前提条件は次のとおりです。

imsOrg
imsToken
apikey

インストール

アセットセレクターは、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'

選択されたアセットタイプ

選択されたアセットタイプは、handleSelection、handleAssetSelection、および onDrop 関数を使用している場合、アセット情報を含むオブジェクトの配列です。

スキーマ構文

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;
        }>;
    };
}

次の表に、選択されたアセットのオブジェクトの重要なプロパティの一部を示します。

プロパティ	タイプ	説明
repo:repositoryId	文字列	アセットが保存されるリポジトリの一意の ID。
repo:id	文字列	アセットの一意の ID。
repo:assetClass	文字列	アセットの分類（例：画像、ビデオ、ドキュメント）。
repo:name	文字列	ファイル拡張子を含むアセットの名前。
repo:size	数値	アセットのサイズ（バイト単位）。
repo:path	文字列	リポジトリ内のアセットの場所。
repo:ancestors	`Array<string>`	リポジトリ内のアセットの上位項目の配列。
repo:state	文字列	リポジトリ内のアセットの現在の状態（アクティブ、削除など）。
repo:createdBy	文字列	アセットを作成したユーザーまたはシステム。
repo:createDate	文字列	アセットが作成された日時。
repo:modifiedBy	文字列	アセットを最後に変更したユーザーまたはシステム。
repo:modifyDate	文字列	アセットが最後に変更された日時。
dc:format	文字列	アセットの形式 ( ファイルタイプ ( 例：JPEG、PNG など )。
tiff:imageWidth	数値	アセットの幅。
tiff:imageLength	数値	アセットの高さ。
computedMetadata	`Record<string, any>`	あらゆる種類（リポジトリ、アプリケーション、埋め込みメタデータ）のすべてのアセットのメタデータのバケットを表すオブジェクト。
_links	`Record<string, any>`	関連付けられたアセットのハイパーメディアリンク。メタデータやレンディションなどのリソースへのリンクが含まれます。
_links.http://ns.adobe.com/adobecloud/rel/rendition	`Array<Object>`	アセットのレンディションに関する情報を含むオブジェクトの配列。
_links.http://ns.adobe.com/adobecloud/rel/rendition[].href	文字列	レンディションの URI。
_links.http://ns.adobe.com/adobecloud/rel/rendition[].type	文字列	レンディションの MIME タイプ。
_links.http://ns.adobe.com/adobecloud/rel/rendition[].'repo:size'	数値	レンディションのサイズ（バイト単位）。
_links.http://ns.adobe.com/adobecloud/rel/rendition[].width	数値	レンディションの幅。
_links.http://ns.adobe.com/adobecloud/rel/rendition[].height	数値	レンディションの高さ。

プロパティの完全なリストと詳細な例については、アセットセレクターのコード例を参照してください。

非 SUSI フローの例

この例では、統合シェルの下で Adobe アプリケーションを実行している場合、または認証用に生成された imsToken が既にある場合に、アセットセレクターを非 SUSI フローと連携して使用する方法を示します。

を使用して、コードにアセットセレクターパッケージを含めます。 script タグ、 6～15 行目 以下の例のを参照してください。スクリプトが読み込まれると、PureJSSelectors グローバル変数を使用できるようになります。アセットセレクターの定義プロパティに示すように、 16～23 行. imsOrg プロパティと imsToken プロパティは、いずれも非 SUSI フローでの認証に必要です。handleSelection プロパティは、選択したアセットを処理するために使用されます。17 行目で示されているように、アセットセレクターをレンダリングするには renderAssetSelector 関数を呼び出します。21～22 行目に示されているように、アセットセレクターが <div> コンテナ要素に表示されます。

これらの手順に従うと、Adobe アプリケーションでアセットセレクターを非 SUSI フローと連携して使用できます。

<!DOCTYPE html>
<html>
<head>
    <title>Asset 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 AssetSelector component
        const container = document.getElementById('asset-selector-container');
        // imsOrg and imsToken are required for authentication in non-SUSI flow
        const assetSelectorProps = {
            imsOrg: 'example-ims@AdobeOrg',
            imsToken: "example-imsToken",
            apiKey: "example-apiKey-associated-with-imsOrg",
            handleSelection: (assets: SelectedAssetType[]) => {},
        };
        // Call the `renderAssetSelector` available in PureJSSelectors globals to render AssetSelector
        PureJSSelectors.renderAssetSelector(container, assetSelectorProps);
    </script>
</head>

<body>
    <div id="asset-selector-container" style="height: calc(100vh - 80px); width: calc(100vw - 60px); margin: -20px;">
    </div>
</body>

</html>

詳細な例は、アセットセレクターのコード例を参照してください。

アセットセレクターのプロパティを使用する

アセットセレクターのプロパティを使用して、アセットセレクターのレンダリング方法をカスタマイズできます。次の表に、アセットセレクターをカスタマイズして使用するために利用できるプロパティを示します。

プロパティ	タイプ	必須	デフォルト	説明
rail	ブーリアン	いいえ	false	マークされている場合 `true`の場合、アセットセレクターが左側のパネル表示でレンダリングされます。マークが付いている場合 `false`の場合、アセットセレクターがモーダルビューでレンダリングされます。
imsOrg	文字列	はい		Adobe Experience Manager as a Cloud Service を組織にプロビジョニングする場合に割り当てられる Adobe Identity Management System（IMS）の ID です。The `imsOrg` キーは、アクセスする組織がAdobe IMS中かどうかを認証するために必要です。
imsToken	文字列	いいえ		認証に使用される IMS ベアラートークンです。非 SUSI フローを使用している場合、`imsToken` は必須です。
apiKey	文字列	いいえ		AEM Discovery サービスへのアクセスに使用する API キーです。非 SUSI フローを使用している場合、`apiKey` は必須です。
rootPath	文字列	いいえ	/content/dam/	アセットセレクターがアセットを表示する元のフォルダーパスです。`rootPath` はカプセル化の形式でも使用できます。例えば、次のパスの場合、 `/content/dam/marketing/subfolder/`の場合、アセットセレクターを使用すると、親フォルダーをトラバースできず、子フォルダーのみが表示されます。
path	文字列	いいえ		アセットセレクターがレンダリングされる際に、アセットの特定のディレクトリに移動するために使用されるパスです。
filterSchema	配列	いいえ		フィルタープロパティの設定に使用するモデルです。これは、アセットセレクターで特定のフィルターオプションを制限する場合に便利です。
filterFormProps	オブジェクト	いいえ		検索を絞り込むために使用する必要があるフィルタープロパティを指定します。（例：MIME タイプの JPG、PNG、GIF）
selectedAssets	配列 `<Object>`	いいえ		アセットセレクターがレンダリングされる際に、選択したアセットを指定します。アセットの ID プロパティを含むオブジェクトの配列が必要です。（例：`[{id: 'urn:234}, {id: 'urn:555'}]`）アセットは、現在のディレクトリで使用できる必要があります。別のディレクトリを使用する必要がある場合は、`path` プロパティの値も指定します。
acvConfig	オブジェクト	いいえ		デフォルトを上書きするカスタム設定が含まれているオブジェクトを含むアセットコレクション表示プロパティです。
i18nSymbols	`Object<{ id?: string, defaultMessage?: string, description?: string}>`	いいえ		OOTB 翻訳がアプリケーションのニーズを満たさない場合は、独自のローカライズされたカスタム値を `i18nSymbols` プロップ経由で渡すことができるインターフェイスを表示できます。このインターフェイスを介して値を渡すと、提供されたデフォルトの翻訳が上書きされ、代わりに独自の翻訳が使用されます。上書きを実行するには、上書きしたい `i18nSymbols` のキーに有効なメッセージ記述子オブジェクトを渡す必要があります。
intl	オブジェクト	いいえ		アセットセレクターはデフォルトの OOTB 翻訳を提供します。`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’
repositoryId	文字列	いいえ	''	アセットセレクターがコンテンツを読み込む元のリポジトリです。
additionalAemSolutions	`Array<string>`	いいえ	[ ]	追加のAEMリポジトリのリストを追加できます。このプロパティで情報が指定されない場合、メディアライブラリまたは AEM Assets リポジトリのみが考慮されます。
hideTreeNav	ブーリアン	いいえ		アセットツリーのナビゲーションサイドバーを表示するか非表示にするかを指定します。このプロパティはモーダルビューでのみ使用されるので、パネルビューではこのプロパティの影響はありません。
onDrop	関数	いいえ		このプロパティで、アセットのドロップ機能を許可することができます。
dropOptions	`{allowList?: Object}`	いいえ		「allowList」を使用してドロップオプションを設定します。
colorScheme	文字列	いいえ		アセットセレクターのテーマ（`light` または `dark`）を設定します。
handleSelection	関数	いいえ		アセットが選択され、モーダルの `Select` ボタンがクリックされた場合に、アセットの項目の配列と一緒に呼び出されます。この関数は、モーダルビューでのみ呼び出されます。パネルビューの場合は、`handleAssetSelection` 関数または `onDrop` 関数を使用します。例： handleSelection=(assets: Asset[])=> {…} 詳しくは、選択されたアセットタイプを参照してください。
handleAssetSelection	関数	いいえ		アセットが選択または選択解除されたときに、項目の配列と一緒に呼び出されます。これは、ユーザーがアセットの選択時にアセットをリッスンする場合に役立ちます。例： handleSelection=(assets: Asset[])=> {…} 詳しくは、選択されたアセットタイプを参照してください。
onClose	関数	いいえ		モーダルビューで `Close` ボタンが押された際に呼び出されます。これは、`modal` ビューでのみ呼び出され、`rail` ビューでは無視されます。
onFilterSubmit	関数	いいえ		ユーザーが別のフィルター条件を変更したときに、フィルター項目と一緒に呼び出されます。
selectionType	文字列	いいえ	single	一度にアセットを `single` 選択または `multiple` 選択するための設定です。

アセットセレクターのプロパティの使用例

index.html ファイルでアセットセレクターのプロパティを定義して、アプリケーション内のアセットセレクター表示をカスタマイズできます。

例 1：パネルビューのアセットセレクター

rail-view-example

アセットセレクターの rail の値が false に設定されている、またはプロパティで示されていない場合、アセットセレクターはデフォルトでモーダルビューに表示されます。

例 2：メタデータポップオーバー

様々なプロパティを使用して、情報アイコンを使用して表示するアセットのメタデータを定義します。情報ポップオーバーは、アセットまたはフォルダーに関する情報のコレクションを提供します。この情報には、アセットのタイトル、寸法、変更日、場所、説明などが含まれます。次の例では、様々なプロパティを使用してアセットのメタデータを表示します。例えば、repo:path プロパティは、アセットの場所を指定します。

metadata-popover-example

例 3：パネルビューのカスタムフィルタープロパティ

アセットセレクターを使用すると、ファセット検索に加えて、様々な属性をカスタマイズして、検索を絞り込むことができます。 Adobe Experience Manager as a Cloud Service アプリケーション。カスタマイズした検索フィルターをアプリケーションに追加するには、次のコードを追加する必要があります。次の例では、画像、ドキュメント、ビデオの中からアセットタイプをフィルタリングする Type Filter 検索、または検索用に追加したフィルタータイプを使用します。

custom-filter-example-vanilla

オブジェクトスキーマを使用したアセット選択の処理

handleSelection プロパティを使用して、アセットセレクターでの 1 つまたは複数のアセットの選択を処理します。次の例に、handleSelection を使用した構文を示します。

handle-selection

アセットセレクターの使用

アセットセレクターを設定し、Adobe Experience Manager as a Cloud Service アプリケーションでアセットセレクターの使用が認証されると、アセットを選択したり、その他の様々な操作を実行してリポジトリ内でアセットを検索したりできます。

using-asset-selector

A：パネルの非表示／表示
B：リポジトリスイッチャー
C：アセット
D：フィルター
E：検索バー
F：並べ替え
G：昇順または降順での並べ替え
H：表示

パネルの非表示／表示

左側のナビゲーションでフォルダーを非表示にするには、「フォルダーを非表示」アイコンをクリックします。変更を元に戻すには、「フォルダーを非表示」アイコンを再度クリックします。

リポジトリスイッチャー

また、アセットセレクターを使用して、アセット選択用のリポジトリーを切り替えることもできます。左側のパネルにあるドロップダウンから、目的のリポジトリを選択できます。ドロップダウンリストで使用できるリポジトリオプションは、index.html ファイルで定義されている repositoryId プロパティに基づいています。これは、ログインしているユーザーがアクセスする、選択された IMS 組織の環境に基づいています。消費者は優先する repositoryID を渡すことができ、その場合、アセットセレクターはリポジトリスイッチャーのレンダリングを停止し、指定されたリポジトリからのみアセットをレンダリングします。

アセットリポジトリ

操作の実行に使用できるアセットフォルダーのコレクションです。

標準のフィルター

アセットセレクターには、検索結果を絞り込むための標準のフィルターオプションも用意されています。次のフィルターを使用できます。

File type：フォルダー、ファイル、画像、ドキュメント、ビデオを含む
MIME type：JPG、GIF、PPTX、PNG、MP4、DOCX、TIFF、PDF、XLSX を含む
Image Size：画像の最小／/最大の幅、最小／最大の高さを含む

カスタム検索

アセットセレクターでは、全文検索に加えて、カスタマイズされた検索を使用してファイル内のアセットを検索することができます。カスタム検索フィルターは、モーダル表示モードとパネル表示モードの両方で使用できます。

また、デフォルトの検索フィルターを作成して、頻繁に検索するフィールドを保存し、後で使用することもできます。アセットのカスタム検索を作成するには、filterSchema プロパティを使用できます。

検索バー

アセットセレクターを使用すると、選択したリポジトリ内のアセットに対して、全文検索を実行できます。例えば、検索バーにキーワード「wave」を入力すると、メタデータプロパティのいずれかでキーワード「wave」が記述されているアセットがすべて表示されます。

並べ替え

アセットセレクター内のアセットを、アセットの名前、寸法、サイズで並べ替えることができます。アセットを昇順または降順で並べ替えることもできます。

表示の種類

アセットセレクターを使用すると、次の 4 つの異なるビューでアセットを表示できます。

リスト表示：リスト表示では、スクロール可能なファイルとフォルダーが 1 列に表示されます。
グリッド表示：グリッド表示では、スクロール可能なファイルとフォルダーが行と列のグリッドに表示されます。
ギャラリー表示：ギャラリー表示では、ファイルやフォルダーが中央に固定された水平リストに表示されます。
ウォーターフォール表示：ウォーターフォール表示では、ファイルやフォルダーが Bridge の形式で表示されます。