Oracle Content Management用SDKのサイト
イントロダクション
Sites SDK for Oracle Content Managementは、コンポーネントがOracle Content Managementとより統合されたエクスペリエンスを持つことを可能にする機能のセットを提供するJavaScriptライブラリです。
サイトSDKは、Oracle Content Managementサーバーからダウンロードできます:
http://{server}/_sitesclouddelivery/renderer/app/sdk/js/sites.min.js
Sites SDKの主要目的は、ユーザーがアプリケーションを構築および管理できるようにすることです。 次の複数の機能が用意されています。
インライン・フレームおよびドメインの境界をまたぐやり取り:
コンポーネントがホストされている場所に関係なく、コンポーネントがページとやり取りできるようにします
次のページ・モデル・ライフ・サイクルへの参加が含まれます
- コンポーネントを作成
- 格納されたプロパティによるコンポーネントのレンダリング
- コンポーネントの更新およびこれらの変更の保存
- ページからのコンポーネントの削除
ページ内での使用のために、コンポーネントの構成に使用されるカスタム設定を格納および取得します
コンポーネント間のやり取りを使用してトリガーとアクションに関与します
ページへのジオメトリ・ヒント(カスタム・コンポーネントには当てはまらない):
コンポーネントによって指示されたときにページで動的にインライン・フレームをサイズ変更できるようにします
コンポーネントがページに含まれるようになり、コンポーネントのサイズ変更イベントに応じてページが移動されるようになります(スクロール・バーなし)
Oracle Content Managementによって呼び出されるタイミングに関するコンポーネントの認識:
コンポーネントとページとの間のやり取りには、秘密キーによって署名されたトークンが含まれています。
Sites SDKにより、コンポーネントで、トークンをデコードすることや、呼出し元の確認を容易にすることができます。
次のように、スクリプトの既知のパスを提供することによって、サイトSDKの関数を含めます:
<script type="text/javascript"
src="<sdk_install_dir_path_prefix>/sites.min.js">
</script>サイトSDKには、2つのグローバル・オブジェクトがあります:
SitesSDK
SitesSDKグローバル・オブジェクトは、レンダリングおよび設定のエンドポイントで使用できます。 次のコマンドをサポートしています:
| コマンド | タスク |
|---|---|
| SitesSDK.getProperty(‘componentAssets’, callback) | サイト内のコンポーネントの代理として現在格納されているアセットのリストを返します。 |
| SitesSDK.getProperty(propertyName, callback) | ホスト・サイトから、指定したプロパティの値を取得します。 |
| SitesSDK.getSiteProperty(propertyName, callback) | ホスト・サイトから、指定したサイト・プロパティ値を取得します。 たとえば、ホスト・サイトで使用されている現在のテーマ・デザインをフェッチできます。 |
| SitesSDK.setProperty(‘componentAssets’, [assets]) | カスタム・コンポーネントのかわりに格納されるサイト・アセットのリストを更新します。 |
| SitesSDK.setProperty(propertyName, propertyValue) | 指定されたプロパティの値を指定された値に設定します。 |
| SitesSDK.filePicker({options}, callback) | 選択したファイルのリストを返します。 |
| SitesSDK.openDocumentPicker(options) | 選択者文書のリストを返します。 |
| SitesSDK.openAssetPicker(options) | 選択したアセットのリストを返します。 |
| SitesSDK.publish(messageType, payload) | メッセージをサーバーに送信し、メッセージ・タイプおよびJSONオブジェクトをペイロードとして受け入れます。 |
| SitesSDK.subscribe(messageType, callback) | ホスト・サイトからディスパッチされたメッセージ用のメッセージ・リスナーです。 このコールは非同期です。 これらはJavaScriptコールバックであるため、関数で、JavaScriptクロージャを使用するか適切に関数をバインドして、適切なコンテンツにアクセスできるようにする必要があります。 |
SitesSDK.getProperty(‘componentAssets’, callback)
この関数は、サイト内のコンポーネントのかわりに現在格納されているアセットのリストを返します。
| 名前 | タイプ | 説明 |
|---|---|---|
componentAssets |
文字列 | リスト・クリエータを呼び出します。 |
callback |
関数 | コールバック関数です。 |
// get/set list of assets
SitesSDK.getProperty('componentAssets', callback);
SitesSDK.setProperty('componentAssets', [assets]);
// invoking list creator
// after calling this, the developer needs to call setProperty against
// 'componentAssets' to persist all currently used assets
//
// args:
// fileTypes - list of supported file types
// multiSelect - single or multiple file select
//
// returns a list of selected assets. If user cancels out of the picker,
// the callback is never called
SitesSDK.filePicker({options}, callback);
//
// example 'componentAssets' JSON returned:
//
'componentAssets': [{
'name': <nameOfAssetInContentFolder>, // this is used to uniquely and persistently identify the asset. It is typically prefixed by the 'originalName' followed by a 16 digit string
'originalName': <originalName>, // name of the asset as selected from DOCS
'description': <description>, // description/other attributes that are available from DOCS
'url': <fully qualified url to the asset>
}]SitesSDK.getProperty(propertyName, callback)
この関数は、ホスト・サイトから、指定したプロパティの値を取得します。
| 名前 | タイプ | 説明 |
|---|---|---|
propertyName |
文字列 | プロパティの名前を指定します。 |
callback |
関数 | コールバック関数です。 |
| プロパティ名 | 説明 | 設定 | レンダリング |
|---|---|---|---|
height |
フレームの高さ | 該当なし | Yes |
width |
フレームの幅 | 該当なし | Yes |
customSettingsData |
設定データ | Yes | Yes |
styleClass |
選択したスタイル・クラス | Yes | Yes |
borderColor、borderRadius、alignment、borderStyle、marginなどのその他のスタイル属性 |
SitesSDK.getProperty('customSettingsData', function (propertyData) {
// store settings data
self.configuration(
{
'id': propertyData.id || self.id,
'url': propertyData.url || self.params.url,
'limit': propertyData.limit || self.params.limit
});
});getProperty()を使用してプロパティ値をフェッチする以外に、レンダリングURLからフェッチできる他の関連プロパティには次のものがあります:
| プロパティ名 | 説明 |
|---|---|
id |
コンポーネントID |
instance |
暗号化されたトークン |
width |
iframeの幅 |
height |
iframeの高さ |
viewMode |
レンダリング・モードの値 |
locale |
サイトまたはブラウザで設定されている言語 |
settingsId |
現在の設定ID |
getProperty()を使用してプロパティ値をフェッチする以外に、設定URLからフェッチできる他のプロパティには次のものがあります:
| プロパティ名 | 説明 |
|---|---|
currCompId |
編集対象のコンポーネントのID |
instance |
暗号化されたトークン |
width |
設定のiframeの幅 |
locale |
サイトまたはブラウザで設定されている言語 |
OrigSettingsId |
コンポーネントの元の設定ID |
settingsId |
新しい設定ID |
SitesSDK.getSiteProperty(propertyName, callback)
この関数は、ホスト・サイトから、指定したサイト・プロパティ値を取得します。 例では、ホスト・サイトによって使用されている、現在のテーマ・デザインをフェッチしています。
| 名前 | タイプ | 説明 |
|---|---|---|
propertyName |
文字列 | サイト・プロパティの名前 |
callback |
関数 | プロパティ値を読み取るコールバック関数 |
| プロパティ名 | 説明 | 設定 | レンダリング |
|---|---|---|---|
theme |
現在のテーマ・デザインのURL | 該当なし | Yes |
SitesSDK.getSiteProperty('theme',function(data){
console.log(Theme data ' + JSON.stringify(data));
// check if we got an url back
if ( data.url && typeof data.url === 'string' ) {
if ( data.url !== '') {
// theme is loaded so dynamically inject theme
SitesSDK.Utils.addSiteThemeDesign(data.url);
}
}
});SitesSDK.setProperty(‘componentAssets’, [assets])
この関数は、カスタム・コンポーネントのかわりに格納されているサイト・アセットのリストを更新します。
| 名前 | タイプ | 説明 |
|---|---|---|
componentAssets |
文字列 | コンポーネント・アセットのリストを作成します。 |
assets |
JSONオブジェクト | 選択したアセットのリストを返します。 |
| 名前 | 説明 |
|---|---|
filetypes |
サポートされているファイル・タイプのリストです。 |
multiSelect |
単一または複数のファイルを選択します。 |
// get/set list of assets
SitesSDK.getProperty('componentAssets', callback);
SitesSDK.setProperty('componentAssets', [assets]);
// invoking list creator
// after calling this, the developer needs to call setProperty against
// 'componentAssets' to persist all currently used assets
//
// args:
// fileTypes - list of supported file types
// multiSelect - single or multiple file select
//
// returns a list of selected assets. If user cancels out of the picker,
// the callback is never called
SitesSDK.filePicker({options}, callback);
//
// example 'componentAssets' JSON returned:
//
'componentAssets': [{
'name': <nameOfAssetInContentFolder>, // this is used to uniquely and persistently identify the asset. It is typically prefixed by the ¿originalName¿ followed by a 16 digit string
'originalName': <originalName>, // name of the asset as selected from DOCS
'description': <description>, // description/other attributes that are available from DOCS
'url': <fully qualified url to the asset>
}]SitesSDK.setProperty(propertyName, propertyValue)
この関数は、指定されたプロパティの値を指定された値に設定します。
| 名前 | タイプ | 説明 |
|---|---|---|
propertyName |
文字列 | プロパティの名前を指定します。 |
propertyValue |
JSONオブジェクト | プロパティの値 |
この表は、setProperty().を使用してフェッチできる一連の関連プロパティを示しています
| プロパティ名 | 説明 | 設定 | レンダリング |
|---|---|---|---|
height |
フレームの高さ | 該当なし | Yes |
width |
フレームの幅 | 該当なし | Yes |
customSettingsData |
設定データ | Yes | Yes |
styleClass |
選択したスタイル・クラス | Yes | Yes |
description |
ページ上のローカル・コンポーネントのインスタンスのためにバナーで使用されます。 | ||
layout |
ローカル・コンポーネントに対してのみ現在選択されているレイアウトを返します。 appinfo.jsonファイルの値に基づいて「設定」パネルから更新できます。 | ||
renderStatus |
カスタム・コンポーネントでレンダリングが完了したことをレポートできます。 | true | |
borderColor、borderRadius、alignment、borderStyle、marginなどのその他のスタイル属性 |
// configuration that can be saved
var saveconfig = {
//current settings id
'id': self.appSettingsProperties['settingsId'],
'url': self.url(),
'limit': self.limit()
};
// save property 'customSettingsData'
SitesSDK.setProperty('customSettingsData',saveconfig);SitesSDK.filePicker({options}, callback)
この関数は、選択したファイルのリストを返します。
| 名前 | タイプ | 説明 |
|---|---|---|
options |
文字列 | 返す選択済ファイルを指定するオプションです。 |
callback |
関数 | コールバック関数です。 ユーザーがピッカー外で取り消した場合、コールバックは呼び出されません。 |
// get/set list of assets
SitesSDK.getProperty('componentAssets', callback);
SitesSDK.setProperty('componentAssets', [assets]);
// invoking list creator
// after calling this, the developer needs to call setProperty against
// 'componentAssets' to persist all currently used assets
//
// args:
// fileTypes - list of supported file types
// multiSelect - single or multiple file select
//
// returns a list of selected assets. If user cancels out of the picker,
// the callback is never called
SitesSDK.filePicker({options}, callback);
//
// example 'componentAssets' JSON returned:
//
'componentAssets': [{
'name': <nameOfAssetInContentFolder>, // this is used to uniquely and persistently identify the asset. It is typically prefixed by the ¿originalName¿ followed by a 16 digit string
'originalName': <originalName>, // name of the asset as selected from DOCS
'description': <description>, // description/other attributes that are available from DOCS
'url': <fully qualified url to the asset>
}]SitesSDK.openDocumentPicker(options)
この関数は、選択したファイルのリストを返します。 単一の引数を取り、選択したdocument(s)に解決されるPromiseを返します。 使用可能なオプションは、「UI APIの埋込みV2」のdocumentsViewコンポーネントのオプションと一致します。
SitesSDK.openDocumentPicker({
selectable: "any",
layout: "grid"
}).then(function (selection) {
console.log(selection);
});ドキュメントが取得されたら、SitesSDK.getProperty(‘componentAssets’, callback)およびSitesSDK.setProperty(‘componentAssets’, [assets])プロパティを使用して、これらのドキュメントのIDをサイトに格納するようにOracle Content Managementに通知する必要があります。 そうしないと、サイトとともに公開されず、削除される可能性があります。
SitesSDK.openAssetPicker(options)
この関数は、選択したファイルのリストを返します。 単一の引数を取り、選択したasset(s)に解決されるPromiseを返します。 使用可能なオプションは、「UI APIの埋込みV2」のassetsViewコンポーネントのオプションと一致します。
SitesSDK.openAssetPicker({
select: "single"
}).then(function (selection) {
console.log(selection);
});アセットが取得されたら、SitesSDK.getProperty(‘componentAssets’, callback)およびSitesSDK.setProperty(‘componentAssets’, [assets])プロパティを使用して、これらのアセットのIDをサイトに格納するようにOracle Content Managementに指示する必要があります。 そうしないと、サイトとともに公開されず、削除される可能性があります。
SitesSDK.publish(messageType, payload)
この関数は、メッセージをサーバーに送信します。 メッセージ・タイプとJSONオブジェクトをペイロードとして受け入れます。 メッセージ・タイプは、ページで認識されて処理されます。 ハンドラがない場合、渡されたメッセージ・タイプは無視されます。
| 名前 | タイプ | 説明 |
|---|---|---|
messageType |
文字列 | メッセージのタイプ |
payload |
JSONオブジェクト | メッセージ・ペイロード |
この表は、ローカル・コンポーネント(インライン・フレームを使用)またはリモート・コンポーネントに認識され、SitesSDK.publish()関数を使用して送信できるメッセージのタイプを示しています。
| メッセージ・タイプ | 説明 |
|---|---|
SETTINGS_UPDATED |
「設定」の更新済メッセージをレンダリング・エンドポイントに送信するために、「設定」パネルで使用します。 |
TRIGGER_ACTIONS |
ホスト・サイトでのアクションをトリガーするために、コンポーネント・レンダリング・エンドポイントで使用します。 |
// raise trigger
SitesSDK.publish(SitesSDK.MESSAGE_TYPES.TRIGGER_ACTIONS,{
'triggerName': 'scsChangeSettings',
'triggerPayload': { 'url': this.configuration()['url'],'feedcount': this.configuration()['limit'] }
});SitesSDK.subscribe(messageType, callback)
この関数は、事実上、ホスト・サイトからディスパッチされたメッセージのメッセージ・リスナーです。 このコールは非同期です。
登録されているコールバックは、特定のタイプのメッセージがSDKによって受信されたときに呼び出されます。 コールバックで値が返された場合、その値はページに返されます。 この関数にコールバックが渡されない場合、その特定のメッセージ・タイプの登録済リスナーは削除されます。
これらはJavaScriptコールバックであるため、関数で、JavaScriptクロージャを使用するか適切に関数をバインドして、適切なコンテンツにアクセスできるようにする必要があります。
| 名前 | タイプ | 説明 |
|---|---|---|
messageType |
文字列 | メッセージのタイプ: - SETTINGS_UPDATED - TRIGGER_ACTIONS - EXECUTE_ACTION - GET_ACTIONS - GET_TRIGGERS - COPY_CUSTOM_DATA - PASTE_CUSTOM_DATA |
callback |
関数 | メッセージがホスト・サイトから受信された場合の関数です。 |
| メッセージ・タイプ | 説明 |
|---|---|
SETTINGS_UPDATED |
設定パネルで値が変更された場合に通知を受け取るように、このメッセージをサブスクライブします。 通常、コンポーネントはユーザー・インタフェースでレンディションを更新することで応答します。 |
TRIGGER_ACTIONS |
このメッセージを公開すると、トリガーが発生し、ペイロードが渡されます。 |
EXECUTE_ACTION |
カスタム・アクションを処理するには、このメッセージをサブスクライブします。 リスナーは、通常、指定されたアクションを実行することでこのメッセージを処理します。 |
GET_ACTIONS |
コンポーネントで実行できるアクションの配列を宣言するには、このメッセージをサブスクライブします。 アクションの配列を返します。 |
GET_TRIGGERS |
コンポーネントで発生させることができるトリガーの配列を宣言するには、このメッセージをサブスクライブします。 トリガーの配列を返します。 |
COPY_CUSTOM_DATA |
クリップボードへのカスタム設定データのコピーを処理するには、このメッセージをサブスクライブします。 クリップボードに配置するデータを表すオブジェクトを返します。 |
PASTE_CUSTOM_DATA |
クリップボードからのカスタム設定データの貼付けを処理するには、このメッセージをサブスクライブします。 |
一部のリスナーでは、データが渡されることが予期されています、また、データを返すことが予期されているものもあります。
例1:
メッセージ・タイプEXECUTE_ACTIONのメッセージ・リスナーを登録します:
SitesSDK.subscribe(SitesSDK.MESSAGE_TYPES.EXECUTE_ACTION, self.executeAction,self);
ここに示すように、登録されたcallback関数が引数を受け入れる必要があります:
// typical signature of a callback function registered with a message
// type
function (args) {
var payload = args.detail.message.payload,
action = args.detail.message.action,
actionName = action && action.actionName;
// do something here with the payload data
}
例2:
COPY_CUSTOM_DATAリスナーは通常、次のようなコードで実装されます:
// listen for COPY_CUSTOM_DATA request
SitesSDK.subscribe(SitesSDK.MESSAGE_TYPES.COPY_CUSTOM_DATA,
copyCustomDataListener()メソッドは、クリップボードにコピーされるデータを表すオブジェクトを返します。次に例を示します:
// Handle Copy Style (save customSettingsData to the clipboard)
self.copyCustomDataListener = function() {
return {
prop1: this.prop1(),
prop2: this.prop2()
};
};
例3:
PASTE_CUSTOM_DATAリクエストは、データを受け入れますが、何も返す必要はありません。
// listen for PASTE_CUSTOM_DATA request
SitesSDK.subscribe(SitesSDK.MESSAGE_TYPES.PASTE_CUSTOM_DATA, pasteCustomDataListener);
次とともに使用します。
// Handle Paste Style (apply customSettingsData from the clipboard)
self.pasteCustomDataListener = function(data) {
...
};
SitesSDK.Utils
SitesSDK.Utilsネームスペースには、Oracle Content Managementコンポーネントのすべてのエンドポイントでコールできるユーティリティ関数があります。 このネームスペースは、リモート・コンポーネントの「設定」パネルで使用できますが、インライン・ローカル・コンポーネントでは使用できません。
注意: これらの関数はOracleでは公式にサポートされていません。 これらはサンプル実装として意図されています。 それらは、自分の責任において使用してください。
| コマンド | タスク |
|---|---|
| SitesSDK.Utils.addSiteThemeDesign(cssUrl) | コンポーネントに現在のサイト・テーマ・デザインを追加します。 |
| SitesSDK.Utils.Logger | Sites SDKで使用されているログ出力オブジェクトが返されます。 ログ・レベルは次のいずれかに設定できます: - デバッグ - ログ - 情報 - エラー - 警告 |
| SitesSDK.Utils.getStyle(elem,styleProp) | インライン・フレームの高さを計算するユーティリティ・メソッドです。 |
SitesSDK.Utils.addSiteThemeDesign(cssUrl)
この関数は、現在のページのHTML <head>タグにリンク要素を作成します。 ソースは、cssUrlのパスに設定されます。
注意: Utilsネームスペースの関数は、Oracleでは公式にサポートされていません。 これらは、サンプル実装として役立つよう意図されています。 それらは、自分の責任において使用してください。
| 名前 | タイプ | 説明 |
|---|---|---|
cssUrl |
文字列 | 現在のテーマ・デザインのURLパスです。 リモート・コンポーネントでのみ使用します。 ローカル・コンポーネント(iframeで実現)は、URLではなくページからプロパティをフェッチする必要があります。 |
この関数は、通常は、次のサンプル・コードで示すように、ホスト・サイトからの現在のテーマ・デザインのフェッチと組み合せて使用されます。
// fetch current theme design from host site and then add it to the page
SitesSDK.getSiteProperty('theme',function(data){
// check if we got an url back
if ( data.url && typeof data.url === 'string' ) {
if ( data.url !== '') {
// theme is loaded so dynamically inject theme
SitesSDK.Utils.addSiteThemeDesign(data.url);
}
}
});
SitesSDK.Utils.Logger
この関数は、Sites SDKで使用されているロガー・オブジェクトを返します。
注意: Utilsネームスペースの関数は、Oracleでは公式にサポートされていません。 これらは、サンプル実装として役立つよう意図されています。 Utils関数は、自分の責任において使用してください。
ログ・レベルは、debug, log, info, errorまたはwarnに設定できます。
Oracle Content Management用SDKのサイト
F81863-01
2023年5月
Copyright © 2021, 2023, Oracle and/or its affiliates.
原本主著者: Oracle Corporation