今まで、サンプルでは、ページにインラインでレンダリングされたローカル・コンポーネントを表示していました。インライン・フレームでコンポーネントをレンダリングすることを選択することもできます。
たとえば、コンポーネントでページに対して権限が不要の更新が行われる場合、インライン・フレームでコンポーネントをレンダリングするように選択できます。これを行うと、プロパティが変更されるたびに、ページを再作成する必要があります。さらに、リモート・コンポーネントは常にインライン・フレームでレンダリングされます。
この項のサンプルは、ローカル・コンポーネントの作成時に、「iframeにレンダリングするコンポーネントの作成」オプションを選択したときに作成されたファイルから取得したものです。ただし、リモート・コンポーネントに同様に適用されるように、これらのファイル・セットを選択してリモート・サーバー上にホストできます。
インライン・フレームのコンポーネントと非インライン・フレームのコンポーネントの類似点
「設定」パネル
「設定」パネルは常にインライン・フレームのページに配置されるため、コンポーネントがインライン・フレームを使用するかどうかに関係なく、「設定」パネルのコードは変更されません。両方のユースケースに同じ「設定」パネルのコードを作成します。
サイトSDK API
SDK APIは両方のユースケースで同じです。同じコードを使用して、トリガーを呼び出し、アクションをリスニングし、プロパティ値を取得および設定します。特定のプロパティは両方のケースに使用できず(たとえば、インライン・フレームを使用しないコンポーネントの"height"プロパティは設定できません)、APIは同じままです。したがって、これらのタイプのコンポーネントの両方のコードをコピーでき、このチュートリアルで説明したサンプル・コードは両方のケースで動作します。
インライン・フレームのコンポーネントと非インライン・フレームのコンポーネントの相違点
ファイル構造および依存関係
<component name>
assets
css
app-styles.css
js
jquery.mn.js
knockout.mn.js
sites.min.js
render.html
settings.html
appinfo.json
_folder_icon.jpgこれらのファイルが作成され、ページのインライン・フレームでコンポーネントを即座に実行できるようになります。この構造と標準ローカル・コンポーネントの構造の主な相違点は次のとおりです。
JavaScriptの依存関係:
これらのファイルの完全なコピーが取得され、コンポーネントが実行されます。これらのファイルは、サンプルのインライン・フレームのコンポーネントを実行するために必要です。要件に基づいてこのディレクトリのコンテンツを追加および削除できます。
コンポーネントが公開されるときに、コンポーネントのassetsディレクトリにあるすべてのものがパブリック・サイトにプッシュされるため、jsディレクトリのすべてのものをサイト・ビルダーでも実行時でも使用できます。
ノート: これらのファイルは、それぞれの使用のために作成されます。インライン・フレームのコンポーネントごとに別々のバージョンのファイルを作成するのではなく、テーマまたは他のパブリックな場所でこれらのファイルの統合を検討する必要があります。
render.html:
AMDモジュールである標準コンポーネントのrender.jsファイルと対照的に、これは完全なHTMLコンポーネントです。
コンポーネントの"高さ"の管理
インライン・フレームの使用時に起きる問題の1つは、インライン・フレーム自体の高さの管理です。この問題が発生した場合、必要かどうかに関係なく、ページのコンポーネントにスクロール・バーが表示されます。
インライン・フレームの高さを管理するために、コンポーネントはページにインライン・フレームにどのくらいの高さが必要かを指示する必要があります。リモート・コンポーネントでドメイン間の問題を処理する場合、コンポーネントがページ上にレンダリングされた後で、サイトSDKメッセージングを使用して必要な高さにインライン・フレームを設定するように要求する必要があります。これは、SitesSDK.setProperty('height', {value}) APIを使用して行われます。(「Oracle Content and Experience SDK」を参照してください。)
たとえば、setHeight関数およびカスタム・バインド・ハンドラを作成して、コンポーネントがページでレンダリングされるときにこれをコールします。
高さを更新する関数:
// set the height of the iFrame for this App
self.setHeight = function () {
// use the default calculation or supply your own height value as a second parameter
SitesSDK.setProperty('height');
};コンポーネントがページでレンダリングされるかプロパティが変更されるたびにsetHeightをコールするKnockoutカスタム・バインド・ハンドラ:
ko.bindingHandlers.sampleAppSetAppHeight = {
update: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
// create dependencies on any observables so this handler is called whenever it changes
var imageWidth = viewModel.imageWidth(),
imageUrl = viewModel.imageUrl(),
titleText = viewModel.titleText(),
userText = viewModel.userText();
// re-size the iFrame in the Sites page now the template has rendered
// Note: If you still see scrollbars in the iframe after this, it is likely that CSS styling in your app is the issue
viewModel.setHeight();
}
};バインド・ハンドラをコールするテンプレート更新:
<div data-bind="sampleAppSetAppHeight: true"></div>
トリガーおよびアクションの登録
インライン・フレームにないコンポーネントのトリガー/アクションの登録はappinfo.jsonファイルに配置されていますが、インライン・フレームのコンポーネントの場合、コンポーネント自体がこの情報を提供します。これは、2つのAPIを使用して行われます:
SitesSDK.subscribe('GET_ACTIONS', self.getAppActions);
SitesSDK.subscribe('GET_TRIGGERS', self.getAppTriggers);
次に、これらのAPIの使用例を示します。
// Register TRIGGERS meta-data
SampleAppViewModel.prototype.getAppTriggers = function (args) {
var triggers = [{
"triggerName": "imageClicked",
"triggerDescription": "Image clicked",
"triggerPayload": [{
"name": "payloadData",
"displayName": "Trigger Payload Data"
}]
}];
return triggers;
};
// Register ACTIONS meta-data
SampleAppViewModel.prototype.getAppActions = function (args) {
var actions = [{
"actionName": "setImageWidth",
"actionDescription": "Update the image width",
"actionPayload": [{
"name": "imageWidth",
"description": "Image Width in pixels",
"type": {
"ojComponent": {
"component": "ojInputText"
}
},
"value": ""
}]
}];
return actions;
};
テーマ・スタイルへのアクセス
コンポーネントはインライン・フレームでレンダリングされるため、テーマで使用可能なスタイルにアクセスできません。サイトSDKは、これらのスタイルをインライン・フレーム内の要素に適用できるように、これらを取得するためのAPIを提供しています。
このトピックは、「ステップ14: コンポーネントがインライン・フレームでレンダリングされる場合のカスタム・スタイルの使用」で詳細に説明されています。
HTTPSプロトコルとHTTPプロトコルの混在
Oracle Content ManagementではHTTPSプロトコルを使用しているため、ページ内で参照されているすべてのリソースはHTTPSも使用する必要があります。リソースにはベース.htmlファイルが含まれていて、参照されているすべてのファイルとともにインライン・フレームでレンダリングされます。
このリソースの要件は、通常、リモート・コンポーネントに適用され、この制約を認識している必要があります。インライン・フレームを使用しているローカル・コンポーネントのリソースはOracle Content Managementサーバーによって提供されているため、これらのコンポーネントはすでに一致するプロトコルを使用しています。