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

Last update: Tue Oct 08 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

作成対象：

管理者
ユーザー

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

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

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

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

前提条件 prereqs

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

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

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

詳細を表示

IMPORTANT

このリポジトリは、アセットセレクターを統合するために使用可能な API と使用例について説明した補足ドキュメントとして機能することを目的としています。アセットセレクターをインストールまたは使用する前に、Experience Manager Assets as a Cloud Service プロファイルの一部としてアセットセレクターへのアクセスがプロビジョニングされていることを確認します。プロビジョニングされていない場合、これらのコンポーネントを統合または使用することはできません。プロビジョニングをリクエストするには、プログラム管理者がAdmin Consoleから P2 とマークされたサポートチケットを発行し、次の情報を含める必要があります。

統合アプリケーションがホストされるドメイン名。
プロビジョニング後、アセットセレクターの設定に不可欠な、リクエストされた環境に対応する 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'

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

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

using-asset-selector

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

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

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

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

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

アセットリポジトリ

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

標準のフィルター filters

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

ステータス： アセットの現在の状態（all、approved、rejected、no status）が含まれます。
ファイルタイプ：folder、file、images、documents、video が含まれます。

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

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