このステップでは、コンポーネントで使用されるアセットを管理する方法について説明します。
アセットには、アセットのライフサイクルを管理するために、Oracle Content Managementが認識する必要があるコンポーネントおよびカスタム・コンポーネントが含まれています。
Oracle Content Managementコンテンツ・フォルダ
Oracle Content Managementで作成した各サイトには専用のcontentフォルダがあります。これは非表示のフォルダで、通常は表示されません。サイトが公開されると、contentフォルダ内のすべてのファイルもファイル・システムに公開されます。
たとえば、イメージ・コンポーネントを使用してイメージを選択した場合、Oracle Content Managementでは選択したイメージのコピーを作成し、これをコンテンツ・フォルダに配置します。元のイメージを削除した場合にサイトが破損しないように、URLは常にこのコピーしたバージョンのイメージを指します。これは、Oracle Content Managementで提供されている他のコンポーネント(ギャラリ、ギャラリ・グリッド、ドキュメント、ソーシャル・バー、ファイル・ダウンロード、およびスロットとcomponentGroupsの背景イメージ)にも適用されます。
このアセットのライフサイクルに関与するカスタム・コンポーネントの場合、カスタム・コンポーネントは、サービスがかわりに管理するアセットをOracle Content Managementに認識させる必要があります。これにはアセットのコピーの作成が含まれているため、管理方法を認識するように、カスタム・コンポーネントはOracle Content Management APIを使用してアセットを選択する必要もあります。
URLの管理
アセットのURLは基準の数によって変化します。
コンポーネントのランタイムURLはコンポーネントのサイト・ビルダーのURLと異なります
ページをコピーすると、Oracle Content Managementではコンテンツ・フォルダ内の参照されたすべてのアセットのコピーを作成するため、2つのコンポーネントがコンテンツ・フォルダ内の同じアセットを指すことはありません
componentGroupをページにドロップすると、componentGroupのコンポーネントで参照されているアセットの新しいコピーが作成されます
さらに、相対URLがローカル・コンポーネントには問題ない可能性がありますが、完全修飾URLでインライン・フレーム・コンテンツをレンダリングできるように、リモート・コンポーネントでは、Oracle Content Managementでかわりに管理するアセットの完全修飾URLが必要になります。
静的なままのURLに依存できないため、アセットをレンダリングする場合、コード内でアセットに対してIDへの参照のみを維持し、アセットのURLを取得する必要があります。
アセットの管理
これらのサイトSDK APIはアセットの管理に使用できます。
SitesSDK.getProperty('componentAssets', callback);
これにより、現在のアセットの配列が取得されます
各アセットのエントリは次から構成されます。
id: アセットの一意のID。
title: Oracle Content Managementのタイトル・メタデータ。
description: Oracle Content Managementの説明メタデータ。
fileName: 選択したファイルの元の名前。カスタム・コンポーネントの「設定」パネルで表示する際に便利です。これにより、ユーザーは自分が選択したファイルを認識します。これは、コンテンツ・フォルダにコピーしたファイルの名前ではありません。
source: アセットのURLを有効にしたマクロ。この値は時間が経つと変化するので、コンポーネントで参照しないでください。アセットの一部として保存する必要があります。
url: getPropert()がコールされたコンテキストに基づいたアセットの完全修飾URL。
SitesSDK.setProperty('componentAssets', [assets]);
これをコールして、Oracle Content Managementがかわりに管理するすべてのアセットを保存します。
これをコールしない場合、アセットは保存されません。
この配列にないアセットは、サイトが公開されると削除されます。
assetsパラメータは、getPropertyによって返されたものおよびfilePickerで返されたものと同じ形式のアセットの配列です。
注:
url値は格納されません。アセットを要求したときに、この値は動的に作成されます。SitesSDK.filePicker(options, callback);
アセットのリストを選択するためのファイル・ピッカーを表示するAPI。
選択したアセットの配列を渡してアセットを正常に選択すると、コールバックがコールされます。
この時点では何も保存されません。setProperty('componentAssets', [assets]);をコールして、保存する他のすべてのアセットと組み合せた選択内容のアイテムを保存するかどうかは、コンポーネント次第です。
アセットの選択例
この項では、アセットを選択し、そのIDを格納し、格納されたアセットから実際の値を再度フェッチする方法を示します。
settings.htmlファイルを編集します。
Image selectionを含めるようにテンプレート・オブジェクトを変更します。
<div>
<!-- Image selection -->
<label id="imageLabel" for="imageAsset" class="settings-heading" data-bind="text: 'Image'"></label>
<input id="imageAsset" data-bind="value: imageName" readonly class="settings-text-box">
<button id="imageSelect" type="button" class="selectbutton" data-bind="click: showFilePicker">Select Image</button>
</div>オブザーバブルを追加するようにviewModelを変更して、選択したアセットのIDを格納します。
self.imageID = ko.observable();
ファイル・ピッカーを表示して選択したアセットの名前を表示することで、アセットの選択内容を管理するようにviewModelを変更します。
//
// handle component assets
//
self.assets = []
// bring up a file picker to select the assets
self.showFilePicker = function () {
// select an image
SitesSDK.filePicker({
'multiSelect': false,
'supportedFileExtensions': ['jpg', 'png']
}, function (result) {
if (result.length === 1) {
// update the array of assets
self.assets = result;
// update the image in customSettingsData
self.imageID(result[0].id);
}
});
};
// update the display name based on the assets
self.imageName = ko.computed(function () {
var imageName = '',
imageID = self.imageID();
for (var i = 0; i < self.assets.length; i++) {
if (self.assets[i].id === imageID) {
imageName = self.assets[i].fileName;
break;
}
}
return imageName
}, self); customSettingsDataを取得する前に先にアセットを取得するように、viewModelを更新します。self.ImageID()オブザーバブルが変更されたときに、このコードにより、self.imageNameも起動されます。
SitesSDK.getProperty('componentAssets', function (assets) {
self.assets = assets;
SitesSDK.getProperty('customSettingsData', function (data) {
//update observable
self.imageWidth(data.imageWidth);
self.imageID(data.imageID);
self.titleText(data.titleText);
self.userText(data.userText);
// note that viewModel is initialized and can start saving data
self.initialized(true);
self.saveData = true;
});
});最後に、imageIDを保存するようにsave関数を更新し、参照したアセットのリストでcomponentAssetsを更新します。
self.save = ko.computed(function () {
var saveconfig = {
'imageWidth': isNaN(self.imageWidth()) ? self.imageWidth() : self.imageWidth() + 'px',
'imageID': self.imageID(),
'titleText': self.titleText(),
'userText': self.userText()
};
// store the selected asset and update custom settings
if (self.saveData) {
SitesSDK.setProperty('componentAssets', self.assets);
SitesSDK.setProperty('customSettingsData', saveconfig);
}
}, self);アセットの選択の結果の確認
サイト・ビルダーでコンポーネントへの変更内容を反映できるように、サイトでページをリフレッシュします。
ページを編集モードで取り込みます。
コンポーネントをページにドラッグ・アンド・ドロップします。
「設定」パネルを開きます。
「イメージを選択」ボタンをクリックします。
参照(またはアップロード)してイメージを選択します。
選択したイメージを示すイメージの名前が格納されていることに注意してください。
「設定」パネルを閉じます。
「設定」パネルを再度開きます。
イメージの名前が再度反映されていることに注意してください。
アセットのレンダリング例
この項では、アセットを取得してこれらをコンポーネントにレンダリングし、「設定」パネルで値が変更されるときは常にコンポーネントを動的に更新する方法を示します。
注:
これはページのインライン・フレームに存在するローカル・コンポーネントの例を示していますが、同様のコードがページ内でインラインでレンダリングされているコンポーネントに対して機能します。render.htmlファイルを編集します。
アセットを含めるようにテンプレートを更新します。
<!-- ko if: imageURL -->
<div style="flex-shrink:0;">
<img data-bind="attr: {style: imageStyle, id: 'imageId', src: imageURL, alt: '', title: ''}, click: imageClicked" />
</div>
<!-- /ko -->viewModelでは、2つのオブザーバブルを作成してcustomSetttingsDataからimageIDを取得し、アセットの格納済リストから取得されるimageURLを格納します。
self.imageID = ko.observable(); self.imageURL = ko.observable();
imageIDが変更されるときは常に対応するイメージのアセットURLを取得するように、viewModelを更新します。
self.imageID.subscribe(function (imageID) {
// whenever the image changes get the updated referenced asset
SitesSDK.getProperty('componentAssets', function (assets) {
for (var i = 0; i < assets.length; i++) {
if (assets[i].id === imageID) {
self.imageURL(assets[i].url);
break;
}
}
});
});customSettingsDataからIDを取得するように、viewModelを更新します。
アセットのレンダリングの結果の確認
サイト・ビルダーでコンポーネントへの変更内容を反映できるように、サイトでページをリフレッシュします。
ページを編集モードで取り込みます。
コンポーネントをページにドラッグ・アンド・ドロップします。
「設定」パネルを開きます。
「イメージを選択」ボタンをクリックします。
参照(またはアップロード)してイメージを選択します。
選択したイメージを示すイメージの名前が格納されていることに注意してください。
「設定」パネルを閉じます。
この時点で、コンポーネントでレンダリングされる選択済イメージが表示されます。
「チュートリアル・レビュー」に進みます。