機械翻訳について

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の主要目的は、ユーザーがアプリケーションを構築および管理できるようにすることです。 次の複数の機能が用意されています。

次のように、スクリプトの既知のパスを提供することによって、サイト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
borderColorborderRadiusalignmentborderStylemarginなどのその他のスタイル属性
使用方法
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
                            
                });
    });
レンダリングURLからフェッチされるその他の関連プロパティ

getProperty()を使用してプロパティ値をフェッチする以外に、レンダリングURLからフェッチできる他の関連プロパティには次のものがあります:

プロパティ名 説明
id コンポーネントID
instance 暗号化されたトークン
width iframeの幅
height iframeの高さ
viewMode レンダリング・モードの値
locale サイトまたはブラウザで設定されている言語
settingsId 現在の設定ID
設定URLからフェッチされるその他のプロパティ

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
borderColorborderRadiusalignmentborderStylemarginなどのその他のスタイル属性
使用方法
// 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に設定できます。