ステップ16: アセット管理

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が適切ですが、リモート・コンポーネントには、Oracle Content Managementがかわりに管理するアセットに対する完全修飾URLが必要であるため、インライン・フレーム・コンテンツを完全なURLでレンダリングできます。

変化しないURLに頼ることはできないため、コードでアセットのIDへの参照のみを保持し、アセットをレンダリングする必要があるときにアセットのURLを取得する必要があります。

アセットの管理

次のSites SDK APIは、アセットの管理に使用できます。

SitesSDK.getProperty('componentAssets', callback);

これは、現在のアセットの配列を取得します。
各アセット・エントリは、次のもので構成されています。
- id: アセットの一意のIDです。
- title: Oracle Content Management titleメタデータ。
- description: Oracle Content Management説明メタデータ。
- fileName: 選択したファイルの元の名前です。どのファイルを選択したかをユーザーが把握できるよう、カスタム・コンポーネントの「設定」パネルで表示するために役立ちます。これは、contentフォルダにコピーされたファイルの名前ではありません。
- 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>

選択したアセットのIDを格納するためにオブザーバブルを追加するよう、viewModelを変更します。
```
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;
    });
});

最後に、save関数を更新してimageIDを保存し、参照されるアセットのリストで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で、customSetttingsDataからimageIDを取得し、格納されたアセットのリストから取得されたimageURLを格納する2つの監視可能オブジェクトを作成します。
```
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;
            }
        }
    });
});

viewModelを更新して、customSettingsDataからIDを取得します。

レンダリング・アセットの結果の確認

サイト・ビルダーがコンポーネントへの変更を選択できるように、サイト内のページをリフレッシュします。
ページを編集モードにします。
ページにコンポーネントをドラッグ・アンド・ドロップします。
「設定」パネルを開きます。
「イメージの選択」ボタンをクリックします。
イメージを参照(またはアップロード)して選択します。

選択したイメージが表示されてイメージの名前が格納されることに注目してください。
「設定」パネルを閉じます。

この時点で、コンポーネント内のレンダリングされた選択済イメージが表示されます。

チュートリアルの確認に進みます。