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

最終更新日: 2024-02-07
  • 作成対象:
  • Admin
    User
バージョン 記事リンク
AEM 6.5 ここをクリックしてください
AEM as a Cloud Service この記事

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

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

概要

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

  • Vanilla JavaScript ライブラリを使用して、あらゆるアドビアプリケーションまたはアドビ以外のアプリケーションと簡単に統合できます。

  • アセットセレクターパッケージのアップデートがアプリケーションで使用可能なアセットセレクターに自動的にデプロイされるため、管理が簡単です。最新の修正内容を読み込むために、アプリケーション内でアップデートを行う必要がありません。

  • アプリケーション内のアセットセレクターの表示を制御するプロパティを利用できるため、カスタマイズが容易です。

  • フルテキスト検索、標準のフィルターおよびカスタマイズされたフィルターを使用して、オーサリングエクスペリエンス内で使用するアセットにすばやく移動できます。

  • IMS 組織内のリポジトリを切り替えて、アセットを選択できます。

  • 名前、寸法、サイズでアセットを並べ替えたり、リスト、グリッド、ギャラリー、ウォーターフォールの各レイアウトでアセットを表示したりできます。

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

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

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.shskypack)および 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'

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

選択されたアセットタイプは、handleSelectionhandleAssetSelection、および 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;
        }>;
    };
}

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

Property タイプ 説明
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 フローと連携して使用する方法を示します。

以下の例の 6~15 行目​に示されているように、script タグを使用してアセットセレクターパッケージをコードに含めます。スクリプトが読み込まれると、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>

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

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

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

Property タイプ 必須 デフォルト 説明
rail ブーリアン いいえ false true とマークされている場合、アセットセレクターは左側のパネルビューにレンダリングされます。false とマークされている場合、アセットセレクターはモーダルビューにレンダリングされます。
imsOrg 文字列 はい Adobe Experience Manager as a Cloud Service を組織にプロビジョニングする場合に割り当てられる Adobe Identity Management System(IMS)の ID です。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:パネルビューのカスタムフィルタープロパティ

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

custom-filter-example-vanilla

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

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

handle-selection

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

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

using-asset-selector

パネルの非表示/表示

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

リポジトリスイッチャー

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

アセットリポジトリ

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

標準のフィルター

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

  • File type:フォルダー、ファイル、画像、ドキュメント、ビデオを含む

  • MIME type:JPG、GIF、PPTX、PNG、MP4、DOCX、TIFF、PDF、XLSX を含む

  • Image Size:画像の最小//最大の幅、最小/最大の高さを含む

    rail-view-example

カスタム検索

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

custom-search

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

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

並べ替え

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

表示の種類

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

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

このページ