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

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

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

概要

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

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

前提条件 prereqs

次の通信方法を確保する必要があります。

  • アプリケーションは HTTPS で実行されている。
  • アプリケーションの URL は、IMS クライアントのリダイレクト URL の許可リストにある。
  • IMS ログインフローは、web ブラウザーのポップアップを使用して設定およびレンダリングされる。そのため、ターゲットブラウザーでポップアップを有効または許可する必要があります。

アセットセレクターの IMS 認証ワークフローが必要な場合は、上記の前提条件を使用します。または、IMS ワークフローで既に認証されている場合は、代わりに IMS 情報を追加できます。

IMPORTANT
このリポジトリは、アセットセレクターを統合するために使用可能な API と使用例について説明した補足ドキュメントとして機能することを目的としています。アセットセレクターをインストールまたは使用する前に、Experience Manager Assets as a Cloud Service プロファイルの一部としてアセットセレクターへのアクセスがプロビジョニングされていることを確認します。プロビジョニングされていない場合、これらのコンポーネントを統合または使用することはできません。プロビジョニングをリクエストするには、プログラム管理者が Admin Console から P2 としてマークされたサポートチケットを発行し、次の情報を含める必要があります。
  • 統合アプリケーションがホストされるドメイン名。
  • プロビジョニング後、アセットセレクターの設定に不可欠な、リクエストされた環境に対応する imsClientIdimsScope および redirectUrl が組織に提供されます。これらの有効なプロパティがないと、インストール手順を実行できません。

インストール installation

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

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 アプリケーションと統合する場合は、次の前提条件を使用しまず。

アセットセレクターと 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
<!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 Adobe application
        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>
accordion
ImsAuthProps

ImsAuthProps プロパティは、アセットセレクターが imsToken を取得するために使用する認証情報とフローを定義します。これらのプロパティを設定すると、認証フローの動作を制御し、様々な認証イベントのリスナーを登録できます。

table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2 6-row-2 7-row-2 8-row-2
プロパティ名 説明
imsClientId 認証目的で使用される IMS クライアント ID を表す文字列値。この値はアドビが指定し、アドビの AEM CS 組織に固有です。
imsScope 認証で使用されるスコープについて説明します。スコープは、組織のリソースに対するアプリケーションのアクセスレベルを決定します。複数のスコープは、コンマで区切ることができます。
redirectUrl 認証後にユーザーがリダイレクトされる URL を表します。この値は通常、アプリケーションの現在の URL に設定されます。redirectUrl を指定していない場合、ImsAuthServiceimsClientId の登録に使用した redirectUrl を使用します。
modalMode 認証フローをモーダル(ポップアップ)に表示するかどうかを示すブール値。true に設定すると、認証フローがポップアップで表示されます。false に設定すると、認証フローはページ全体をリロードして表示されます。メモ: UX を向上させるために、ユーザーがブラウザーのポップアップを無効にしている場合は、この値を動的に制御できます。
onImsServiceInitialized Adobe IMS 認証サービスを初期化する際に呼び出されるコールバック関数。この関数は、Adobe IMS サービスを表すオブジェクトである service という 1 つのパラメーターを受け取ります。詳しくは、ImsAuthService を参照してください。
onAccessTokenReceived Adobe IMS 認証サービスから imsToken を受信する際に呼び出されるコールバック関数。この関数は、アクセストークンを表す文字列である imsToken という 1 つのパラメーターを受け取ります。
onAccessTokenExpired アクセストークンの有効期限が切れる際に呼び出されるコールバック関数。この関数は通常、新しい認証フローをトリガーして新しいアクセストークンを取得するために使用されます。
onErrorReceived 認証中にエラーが発生する際に呼び出されるコールバック関数。この関数は、エラータイプとエラーメッセージという 2 つのパラメーターを受け取ります。エラータイプはエラータイプを表す文字列で、エラーメッセージはエラーメッセージを表す文字列です。
accordion
ImsAuthService

ImsAuthService クラスは、アセットセレクターの認証フローを処理します。これは、Adobe IMS 認証サービスから imsToken を取得する役割を果たします。imsToken は、ユーザーを認証し、Adobe Experience Manager as a Cloud Service アセットリポジトリへのアクセスを認証するために使用されます。ImsAuthService は、ImsAuthProps プロパティを使用して認証フローを制御し、様々な認証イベントのリスナーを登録します。便利な registerAssetsSelectorsAuthService 関数を使用して、ImsAuthService インスタンスをアセットセレクターに登録できます。ImsAuthService クラスでは、次の関数を使用できます。ただし、registerAssetsSelectorsAuthService 関数を使用している場合は、これらの関数を直接呼び出す必要はありません。

table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2
関数名 説明
isSignedInUser ユーザーが現在サービスにログインしているかどうかを判断し、それに応じてブール値を返します。
getImsToken 現在ログインしているユーザーの認証 imsToken を取得します。これは、asset _rendition の生成など、他のサービスへのリクエストを認証するために使用できます。
signIn ユーザーのログインプロセスを開始します。この関数は、ImsAuthProps を使用して、ポップアップまたはページ全体のリロードで認証を表示します。
signOut ユーザーをサービスからログアウトし、認証トークンを無効にし、保護されたリソースにアクセスするには再度ログインするようにリクエストします。この関数を呼び出すと、現在のページがリロードされます。
refreshToken 現在ログインしているユーザーの認証トークンを更新して、トークンの有効期限切れを防ぎ、保護されたリソースに中断なくアクセスできるようになります。後続のリクエストに使用できる新しい認証トークンを返します。
accordion
提供された IMS トークンによる検証
code language-none
<script>
    const apiToken="<valid IMS token>";
    function handleSelection(selection) {
    console.log("Selected asset: ", selection);
    };
    function renderAssetSelectorInline() {
    console.log("initializing Asset Selector");
    const props = {
    "repositoryId": "delivery-p64502-e544757.adobeaemcloud.com",
    "apiKey": "ngdm_test_client",
    "imsOrg": "<IMS org>",
    "imsToken": apiToken,
    handleSelection,
    hideTreeNav: true
    }
    const container = document.getElementById('asset-selector-container');
    PureJSSelectors.renderAssetSelector(container, props);
    }
    $(document).ready(function() {
    renderAssetSelectorInline();
    });
</script>
accordion
IMS サービスへのコールバックの登録
code language-none
// object `imsProps` to be defined as below
let imsProps = {
    imsClientId: <IMS Client Id>,
        imsScope: "openid",
        redirectUrl: window.location.href,
        modalMode: true,
        adobeImsOptions: {
            modalSettings: {
            allowOrigin: window.location.origin,
},
        useLocalStorage: true,
},
onImsServiceInitialized: (service) => {
            console.log("onImsServiceInitialized", service);
},
onAccessTokenReceived: (token) => {
            console.log("onAccessTokenReceived", token);
},
onAccessTokenExpired: () => {
            console.log("onAccessTokenError");
// re-trigger sign-in flow
},
onErrorReceived: (type, msg) => {
            console.log("onErrorReceived", type, msg);
},
}
アドビ以外のアプリケーションとの統合

前提条件 prereqs-non-adobe-app

アセットセレクターをアドビ以外のアプリケーションと統合する場合は、次の前提条件を使用します。

  • 通信方法
  • imsClientId
  • imsScope
  • redirectUrl
  • imsOrg
  • apikey

アセットセレクターは、アドビ以外のアプリケーションと統合する場合に、imsScopeimsClientID などの Identity Management System(IMS)プロパティを使用した Experience Manager Assets リポジトリへの認証をサポートします。

accordion
アドビ以外のアプリケーションに対するアセットセレクターの設定

アドビ以外のアプリケーションに対してアセットセレクターを設定するには、まずプロビジョニングのサポートチケットを記録してから、統合手順を実行する必要があります。

サポートチケットの記録
Admin Console を使用してサポートチケットを記録する手順は次のとおりです。

  1. チケットのタイトルに AEM Assets を含むアセットセレクター ​を追加します。

  2. 説明には、次の詳細を入力します。

    • Experience Manager Assets as a Cloud Service URL(プログラム ID および環境 ID)。
    • アドビ以外の web アプリケーションがホストされるドメイン名。
accordion
統合手順

アセットセレクターをアドビ以外のアプリケーションと統合する際の認証には、この例の index.html ファイルを使用します。

index.html ファイルの例の 9 行目 ​から 11 行目 ​に示すように、Script タグを使用してアセットセレクターパッケージにアクセスします。

この例の 14 行目 ​から 38 行目 ​では、imsClientIdimsScoperedirectURL などの IMS フロープロパティが記載されています。この関数では、imsClientId プロパティと imsScope プロパティの少なくとも 1 つを定義する必要があります。redirectURL の値を定義しない場合は、クライアント ID に登録されているリダイレクト URL が使用されます。

imsToken が生成されていないので、index.html ファイルの例の 40 行目から 50 行目に示すように、registerAssetsSelectorsAuthService 関数と renderAssetSelectorWithAuthFlow 関数を使用します。renderAssetSelectorWithAuthFlow の前に registerAssetsSelectorsAuthService 関数を使用して、imsToken をアセットセレクターに登録します。Adobe では、コンポーネントをインスタンス化する際に registerAssetsSelectorsAuthService を呼び出すことをお勧めします。

index.html ファイルの例の 54 行目 ​から 60 行目 ​に示すように、const props セクションで認証およびその他の Assets as a Cloud Service アクセス関連のプロパティを定義します。

65 行目 ​に示している PureJSSelectors グローバル変数は、web ブラウザーでアセットセレクターをレンダリングするために使用されます。

74 行目 ​から 81 行目 ​に示すように、アセットセレクターは <div> コンテナ要素にレンダリングされます。例では、ダイアログを使用してアセットセレクターを表示します。

code language-html line-numbers
<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">
    <title>Asset Selectors</title>
    <link rel="stylesheet" href="index.css">
    <script id="asset-selector"
        src="https://experience.adobe.com/solutions/CQ-assets-selectors/assets/resources/asset-selectors.js"></script>
    <script>

        const imsProps = {
            imsClientId: "<obtained from IMS team>",
            imsScope: "openid, <other scopes>",
            redirectUrl: window.location.href,
            modalMode: true, // false to open in a full page reload flow
            onImsServiceInitialized: (service) => {
                // invoked when the ims service is initialized and is ready
                console.log("onImsServiceInitialized", service);
            },
            onAccessTokenReceived: (token) => {
                console.log("onAccessTokenReceived", token);
            },
            onAccessTokenExpired: () => {
                console.log("onAccessTokenError");
                // re-trigger sign-in flow
            },
            onErrorReceived: (type, msg) => {
                console.log("onErrorReceived", type, msg);
            },
        }

        function load() {
            const registeredTokenService = PureJSSelectors.registerAssetsSelectorsAuthService(imsProps);
            imsInstance = registeredTokenService;
        };

        // initialize the IMS flow before attempting to render the asset selector
        load();


        //function that will render the asset selector
            const otherProps = {
            // any other props supported by asset selector
            }
            const assetSelectorProps = {
                "imsOrg": "imsorg",
                ...otherProps
            }
             // container element on which you want to render the AssetSelector/DestinationSelector component
            const container = document.getElementById('asset-selector');

            /// Use the PureJSSelectors in globals to render the AssetSelector/DestinationSelector component
            PureJSSelectors.renderAssetSelectorWithAuthFlow(container, assetSelectorProps, () => {
                const assetSelectorDialog = document.getElementById('asset-selector-dialog');
                assetSelectorDialog.showModal();
            });
        }
    </script>

</head>
<body class="asset-selectors">
    <div>
        <button onclick="renderAssetSelectorWithAuthFlowFlow()">Asset Selector - Select Assets with Ims Flow</button>
    </div>
        <dialog id="asset-selector-dialog">
            <div id="asset-selector" style="height: calc(100vh - 80px); width: calc(100vw - 60px); margin: -20px;">
            </div>
        </dialog>
    </div>
</body>

</html>
accordion
配信リポジトリにアクセスできない
note tip
TIP
新規登録ログインワークフローを使用してアセットセレクターを統合したにもかかわらず配信リポジトリにアクセスできない場合は、ブラウザーの Cookie をクリーンアップする必要があります。そうしないと、コンソールに invalid_credentials All session cookies are empty エラーが表示されます。

アセットセレクターのプロパティ asset-selector-properties

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

Property
タイプ
必須
デフォルト
説明
rail
ブーリアン
いいえ
False
true とマークされている場合、アセットセレクターは左側のパネルビューにレンダリングされます。false とマークされている場合、アセットセレクターはモーダルビューにレンダリングされます。
imsOrg
文字列
はい
Adobe Experience Manager as a Cloud Service を組織にプロビジョニングする場合に割り当てられる Adobe Identity Management System(IMS)の ID です。imsOrg キーは、アクセスしようとしている組織が Adobe IMS 内にあるかどうかを認証するために必要です。
imsToken
文字列
いいえ
認証に使用される IMS ベアラートークンです。統合に Adobe アプリケーションを使用している場合、imsToken は必須です。
apiKey
文字列
いいえ
AEM Discovery サービスへのアクセスに使用する API キーです。Adobe アプリケーション統合を使用している場合、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
オブジェクト
いいえ
デフォルトを上書きするカスタム設定が含まれているオブジェクトを含む、アセットコレクション表示プロパティです。また、このプロパティは、アセットビューアのパネルビューを有効にするために rail プロパティと共にに使用されます。
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 選択または multiple 選択するための設定です。
dragOptions.allowList
ブール値
いいえ
プロパティは、選択できないアセットのドラッグを許可または拒否するために使用されます。
aemTierType
文字列
いいえ
配信層、オーサー層またはその両方のアセットを表示するかを選択できます。

構文:aemTierType:[0]: "author" 1: "delivery"

例えば、["author","delivery"] の両方を使用する場合、リポジトリスイッチャーにはオーサーと配信の両方のオプションが表示されます。
handleNavigateToAsset
関数
いいえ
アセットの選択を処理するコールバック関数です。
noWrap
ブーリアン
いいえ
noWrap プロパティは、サイドパネルでのアセットセレクターのレンダリングに役立ちます。このプロパティを指定しない場合、デフォルトで​ ダイアログビュー ​がレンダリングされます。
dialogSize
小、中、大、フルスクリーン、またはフルスクリーンのテイクオーバー
文字列
オプション
指定されたオプションを使用してサイズを指定することで、レイアウトを制御できます。
colorScheme
明るい、または暗い
いいえ
このプロパティは、アセットセレクターアプリケーションのテーマを設定するために使用されます。テーマは、ライトテーマとダークテーマから選択できます。
filterRepoList
関数
いいえ
Experience Manager リポジトリを呼び出し、フィルタリングされたリポジトリのリストを返す filterRepoList コールバック関数を使用できます。
getExpiryStatus
関数
いいえ
有効期限切れのアセットのステータスが表示されます。 この関数は、指定したアセットの有効期限に基づいて EXPIREDEXPIRING_SOON または NOT_EXPIRED を返します。 期限切れアセットのカスタマイズを参照してください。
allowSelectionAndDrag
ブーリアン
いいえ
False
関数の値は、true または false のいずれかです。 値が false に設定されている場合、期限切れのアセットを選択したりキャンバスにドラッグしたりすることはできません。
showToast
いいえ
これにより、アセットセレクターで、有効期限切れのアセットに関するカスタマイズされたトーストメッセージを表示できます。

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

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

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

rail-view-example

アセットセレクターの rail の値が false に設定されている、またはプロパティで示されていない場合、アセットセレクターはデフォルトでモーダルビューに表示されます。acvConfig プロパティを使用すると、ドラッグ&ドロップなどの詳細な設定が可能になります。acvConfig プロパティの使用法については、ドラッグ&ドロップを有効または無効にするを参照してください。

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

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

metadata-popover-example

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

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

custom-filter-example-vanilla

機能設定コードスニペット 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

選択されたアセットタイプは、handleSelectionhandleAssetSelection、および 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: {
        'https://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.https://ns.adobe.com/adobecloud/rel/rendition
Array<Object>
アセットのレンディションに関する情報を含むオブジェクトの配列。
_links.https://ns.adobe.com/adobecloud/rel/rendition[].href
文字列
レンディションの URI。
_links.https://ns.adobe.com/adobecloud/rel/rendition[].type
文字列
レンディションの MIME タイプ。
_links.https://ns.adobe.com/adobecloud/rel/rendition[].repo:size'
数値
レンディションのサイズ(バイト単位)。
_links.https://ns.adobe.com/adobecloud/rel/rendition[].width
数値
レンディションの幅。
_links.https://ns.adobe.com/adobecloud/rel/rendition[].height
数値
レンディションの高さ。

期限切れアセットのカスタマイズ customize-expired-assets

アセットセレクターを使用すると、有効期限切れのアセットの使用を制御できます。 有効期限切れのアセットを まもなく期限切れになる バッジでカスタマイズできます。このバッジを使用すると、現在の日付から 30 日以内に期限切れになるアセットについて事前に知ることができます。 さらに、要件に応じてカスタマイズできます。 また、キャンバス上で期限切れのアセットの選択を許可することも、その逆も可能です。 期限切れアセットのカスタマイズは、コードスニペットを使用して様々な方法で実行できます。

expiryOptions: {
    getExpiryStatus: getExpiryStatus;
}

期限切れアセットの選択 selection-of-expired-asset

期限切れのアセットの使用状況をカスタマイズして、選択可能または選択不可にすることができます。 アセットセレクターキャンバス上で期限切れのアセットをドラッグ&ドロップできるようにするかどうかをカスタマイズできます。 これを行うには、以下のパラメーターを使用して、キャンバス上でアセットを選択不可にします。

expiryOptions:{
    allowSelectionAndDrop: false;
}

有効期限切れアセットの期間の設定 set-duration-of-expired-asset

次のコードスニペットは、今後 5 日以内に有効期限が切れるアセットの まもなく有効期限切れ バッジを設定するのに役立ちます。

/**
  const getExpiryStatus = async (asset) => {
  if (!asset.expirationDate) {
    return null;
  }
  const currentDate = new Date();
  const millisecondsInDay = 1000 * 60 * 60 * 24;
  const fiveDaysFromNow = new Date(value: currentDate.getTime() + 5 * millisecondsInDay);
  const expirationDate = new Date(asset.expirationDate);
  if (expirationDate.getTime() < currentDate.getTime()) {
    return 'EXPIRED';
  } else if (expirationDate.getTime() < fiveDaysFromNow.getTime()) {
    return 'EXPIRING_SOON';
  } else {
    return 'NOT_EXPIRED';
  }
};

プロパティが現在の日時を取得するためにどのように機能するかを理解するには、次の例を参照してください。

const currentData = new Date();
currentData.getTime(),

は、日付形式 2024-06-19T06:36:53.959Z に従った 1718779013959 を返します。

期限切れアセットのトーストメッセージのカスタマイズ customize-toast-message

showToast プロパティは、期限切れのアセットで表示するトーストメッセージをカスタマイズするために使用します。

構文:

{
    type: 'ERROR', 'NEUTRAL', 'INFO', 'SUCCESS',
    message: '<message to be shown>',
    timeout: optional,
}

デフォルトタイムアウトは 500 ミリ秒です。 一方、要件に応じて変更することもできます。 さらに、値 timeout: 0 を渡すと、クロスボタンをクリックするまでトーストが開いたままになります。

フォルダーの選択を許可せず、対応するメッセージを表示する必要がある場合に、トーストメッセージを表示する例を次に示します。

const showToast = {
    type: 'ERROR',
    message: 'Folder cannot be selected',
    timeout: 5000,
}

次のコードスニペットを使用して、期限切れのアセットを使用するためのトーストメッセージを表示します。

トーストメッセージ

コンテキスト呼び出しフィルター contextual-invocation-filter

アセットセレクターを使用すると、タグピッカーフィルターを追加できます。 特定のタグ付けグループに関連するすべてのタグを組み合わせるタググループをサポートします。 さらに、検索するアセットに対応する追加のタグを選択できます。 さらに、コンテキスト呼び出しフィルターの下で、主にによって使用されるデフォルトのタググループを設定して、外出先でもアクセスできるようにすることもできます。

  • 検索でタグ付けフィルターを有効にするには、コンテキスト呼び出しコードスニペットを追加する必要があります。
  • タググループタイプ (property=xcm:keywords.id=) に対応する名前プロパティを使用する必要があります。

構文:

const filterSchema=useMemo(() => {
    return: [
        {
            element: 'taggroup',
            name: 'property=xcm:keywords.id='
        },
    ];
}, []);

フィルターパネルにタググループを追加するには、少なくとも 1 つのタググループをデフォルトとして追加する必要があります。 さらに、以下のコードスニペットを使用して、タググループから事前に選択されたデフォルトのタグを追加します。

export const WithAssetTags = (props) = {
const [selectedTags, setSelectedTags] = useState (
new Set(['orientation', 'color', 'facebook', 'experience-fragments:', 'dam', 'monochrome'])
const handleSelectTags = (selected) => {
setSelectedTags (new Set (selected)) ;
};
const filterSchema = useMemo ((); => {
    return {
        schema: [
            {
                fields: [
                    {
                    element: 'checkbox',
                    name: 'property=xcm:keywords=',
                    defaultValue: Array. from(selectedTags),
                    options: assetTags,
                    orientation: 'vertical',
                    },
                ],
    header: 'Asset Tags',
    groupkey: 'AssetTagsGroup',
        ],
    },
};
}, [selectedTags]);

タググループフィルター

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

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

handle-selection

アセットの選択を無効にする 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}
        />
    );
}
NOTE
アセットの場合、選択チェックボックスは非表示になりますが、フォルダーの場合、フォルダーは選択できませんが、指定したフォルダーのナビゲーションは表示されます。

アセットセレクターの使用 using-asset-selector

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

using-asset-selector

パネルの非表示/表示 hide-show-panel

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

リポジトリスイッチャー repository-switcher

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

アセットリポジトリ

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

標準のフィルター filters

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

  • ステータス ​: アセットの現在の状態(allapprovedrejectedno status など)が含まれます。

  • ファイルタイプ ​: には、folderfileimagesdocuments または video が含まれます。

  • 有効期限ステータス ​: 有効期限に基づいてアセットに言及します。 「Expired」チェックボックスをオンにして期限切れのアセットをフィルタリングするか、アセットの Expiration Duration を設定して有効期限に基づいてアセットを表示します。 アセットの有効期限が既に切れているか、まもなく切れる場合、その旨を示すバッジが表示されます。 さらに、期限切れのアセットの使用(またはドラッグ&ドロップ)を許可するかどうかを制御できます。 詳しくは、 期限切れアセットのカスタマイズを参照してください。 デフォルトでは、今後 30 日以内に有効期限が切れるアセットに まもなく有効期限が切れる バッジが表示されます。 ただし、プロパティを使用して有効期限 expirationDate 設定できます。

    note tip
    TIP
    将来の有効期限に基づいてアセットを表示またはフィルタリングする場合は、「Expiration Duration」フィールドに将来の日付範囲を指定します。 アセットに まもなく期限切れ バッジが付いて表示されます。
  • MIME タイプ ​: には、JPGGIFPPTXPNGMP4DOCXTIFFPDFXLSX が含まれます。

  • 画像サイズ ​: 画像の最小//最大の幅、最小/最大の高さが含まれます。

    rail-view-example

カスタム検索

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

custom-search

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

検索バー search-bar

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

並べ替え sorting

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

表示の種類 types-of-view

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

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