マイクロフロントエンドアセットセレクター Overview
マイクロフロントエンドアセットセレクターは、Experience Manager Assets リポジトリと簡単に統合できるユーザーインターフェイスを提供します。ユーザーはこれにより、リポジトリで使用可能なデジタルアセットを参照または検索し、アプリケーションのオーサリングエクスペリエンスで使用できるようになります。
アセットセレクターパッケージを使用すると、マイクロフロントエンドのユーザーインターフェイスをアプリケーションエクスペリエンスで利用できるようになります。パッケージのアップデートはすべて自動的に読み込まれ、デプロイされた最新のアセットセレクターがアプリケーション内に自動的に読み込まれます。
アセットセレクターには、次のような多くの利点があります。
- Vanilla JavaScript ライブラリを使用して、あらゆるアドビアプリケーションまたはアドビ以外のアプリケーションと簡単に統合できます。
- アセットセレクターパッケージのアップデートがアプリケーションで使用可能なアセットセレクターに自動的にデプロイされるため、管理が簡単です。最新の修正内容を読み込むために、アプリケーション内でアップデートを行う必要がありません。
- アプリケーション内のアセットセレクターの表示を制御するプロパティを利用できるため、カスタマイズが容易です。
- フルテキスト検索、標準のフィルターおよびカスタマイズされたフィルターを使用して、オーサリングエクスペリエンス内で使用するアセットにすばやく移動できます。
- IMS 組織内のリポジトリを切り替えて、アセットを選択できます。
- 名前、寸法、サイズでアセットを並べ替えたり、リスト、グリッド、ギャラリー、ウォーターフォールの各レイアウトでアセットを表示したりできます。
前提条件 prereqs
次の通信方法を確保する必要があります。
- アプリケーションは HTTPS で実行されている。
- アプリケーションの URL は、IMS クライアントのリダイレクト 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 リポジトリへの認証をサポートします。
accordion |
---|
アドビ以外のアプリケーションに対するアセットセレクターの設定 |
アドビ以外のアプリケーションに対してアセットセレクターを設定するには、まずプロビジョニングのサポートチケットを記録してから、統合手順を実行する必要があります。 サポートチケットの記録
|
accordion | ||
---|---|---|
統合手順 | ||
アセットセレクターをアドビ以外のアプリケーションと統合する際の認証には、この例の
この例の 14 行目 から 38 行目 では、
65 行目 に示している 74 行目 から 81 行目 に示すように、アセットセレクターは
|
accordion | |||
---|---|---|---|
配信リポジトリにアクセスできない | |||
|
前提条件 prereqs-polaris
アセットセレクターと、OpenAPI 機能を備えた Dynamic Media の統合には、次の前提条件を使用します。
-
OpenAPI 機能を備えた Dynamic Media にアクセスするには、次のライセンスが必要です。
- アセットリポジトリ(例:Experience Manager Assets as a Cloud Service)。
- AEM Dynamic Media。
-
ブランドの一貫性を確保するために、承認済みアセットのみを使用できます。
OpenAPI 機能を備えた Dynamic Media の統合 adobe-app-integration-polaris
アセットセレクターと Dynamic Media OpenAPI プロセスの統合には、カスタマイズされた Dynamic Media URL の作成や、Dynamic Media URL を選択する準備など、様々な手順が含まれます。
accordion | ||
---|---|---|
OpenAPI 機能を備えた Dynamic Media のアセットセレクターの統合 | ||
OpenAPI 機能を備えた Dynamic Media では、
この設定により、すべての承認済みアセットをフォルダーなしで表示したり、フラットな構造として表示したりできます。詳しくは、アセットセレクターのプロパティの |
accordion | ||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
承認済みアセットからの動的配信 URL の作成 | ||||||||||||||||
アセットセレクターを設定すると、オブジェクトのスキーマを使用して、選択したアセットから動的配信 URL が作成されます。
すべての選択済みアセットは、JSON オブジェクトとして機能する
承認済みアセット配信 API 仕様 URL 形式: ここで、
承認済みアセット配信 API 動的配信 URL の構文は次のとおりです。
|
accordion | |||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
動的配信 URL を選択する準備 | |||||||||||||||||||
すべての選択済みアセットは、JSON オブジェクトとして機能する
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"]
の両方を使用する場合、リポジトリスイッチャーにはオーサーと配信の両方のオプションが表示されます。filterRepoList
コールバック関数を使用できます。EXPIRED
、EXPIRING_SOON
または NOT_EXPIRED
を返します。 期限切れアセットのカスタマイズを参照してください。 さらに、allowSelectionAndDrag を使用できます。この場合、関数の値は true
または false
のいずれかになります。 値が false
に設定されている場合、有効期限切れのアセットはキャンバス上で選択またはドラッグできません。アセットセレクターのプロパティの使用例 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: {
'https://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>
有効期限切れのアセットのカスタマイズ 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
を使用した構文を示します。
アセットの選択を無効にする 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
アセットセレクターには、検索結果を絞り込むための標準のフィルターオプションも用意されています。次のフィルターを使用できます。
-
ステータス: アセットの現在の状態(
all
、approved
、rejected
、no status
)が含まれます。 -
ファイルタイプ:
folder
、file
、images
、documents
、video
が含まれます。 -
有効期限ステータス: 有効期限に基づいてアセットに言及します。
Expired
チェックボックスをオンにして有効期限切れのアセットをフィルタリングするか、アセットのExpiration Duration
を設定し、有効期限に基づいてアセットを表示できます。アセットの有効期限が既に切れている場合や、有効期限切れが近い場合は、その旨を示すバッジが表示されます。さらに、有効期限切れのアセットの使用状況(またはドラッグ&ドロップ)を許可するかどうかを制御できます。詳しくは、有効期限切れのアセットのカスタマイズを参照してください。デフォルトでは、今後 30 日以内に有効期限が切れるアセットに対して 間もなく期限切れ バッジが表示されます。ただし、expirationDate
プロパティを使用して有効期限を設定できます。note tip TIP 将来の有効期限に基づいてアセットを表示またはフィルタリングする場合は、「 Expiration Duration
」フィールドに将来の日付範囲を指定します。これにより、間もなく期限切れ バッジが付いたアセットが表示されます。 -
MIME タイプ:
JPG
、GIF
、PPTX
、PNG
、MP4
、DOCX
、TIFF
、PDF
、XLSX
が含まれます。 -
画像サイズ: 画像の最小//最大の幅、最小/最大の高さが含まれます。
カスタム検索
フルテキスト検索の他に、アセットセレクターでは、カスタマイズされた検索を使用してファイル内のアセットを検索できます。カスタム検索フィルターは、モーダル表示モードとパネル表示モードの両方で使用できます。
また、デフォルトの検索フィルターを作成して、頻繁に検索するフィールドを保存し、後で使用することもできます。アセットのカスタム検索を作成するには、filterSchema
プロパティを使用できます。
検索バー search-bar
アセットセレクターを使用すると、選択したリポジトリ内のアセットに対してフルテキスト検索を実行できます。例えば、検索バーにキーワード「wave
」を入力すると、メタデータプロパティのいずれかでキーワード「wave
」が記述されているアセットがすべて表示されます。
並べ替え sorting
アセットセレクター内のアセットを、アセットの名前、寸法、サイズで並べ替えることができます。アセットを昇順または降順で並べ替えることもできます。
表示の種類 types-of-view
アセットセレクターを使用すると、次の 4 つの異なるビューでアセットを表示できます。