ステップ2: ローカル・コンポーネントのレンダリングの構造の確認

このステップでは、ローカル・コンポーネント用にデフォルトで作成されるファイルの構造を確認します。

単純なHello Worldの例では、4つのJavaScriptオブジェクトとコード行の数が多すぎるように見えますが、これは、より複雑なコンポーネントを構築するための基礎と、Oracle Cloud「サイト・サービス」ページ・ライフサイクルとの相互作用に対処するための基礎を提供することです。

ローカル・コンポーネントの構造を確認するには:

Oracle Content Managementホームページで、「開発者」をクリックします。

「開発者」ページが表示されます。
「すべてのコンポーネントの表示」をクリックします。
メニューから「ローカル・コンポーネントの作成」を選択します。
コンポーネントの名前を入力します(例: A_Local_Component)。
オプションで説明を入力します。
「作成」をクリックします。

これを完了すると、コンポーネントのリストにA_Local_Componentという名前のコンポーネントが表示されます。

Oracle Content Managementデスクトップ同期クライアントを使用して、コンポーネントを特定し、ファイル・システムと同期します。

デスクトップ・クライアントがない場合は、すべてのコンポーネントを表示し、Oracle Content Managementインタフェースのコンポーネント・ページでコンポーネントを選択し、ドリルダウンしてファイルを表示できます。
コンポーネントの下のファイルをリストすると、次のようなファイルが表示されます。
```
assets
    render.js
    settings.html
appinfo.json
_folder_icon.jpg
```
/assetsディレクトリの下のrender.jsファイルを開きます。
render.jsファイルの要点を次に示します。
- ページに必須にできるよう、JavaScript AMDモジュールとして構造化されています。
- また、Oracle Content Managementページの一部としてロードされているKnockoutJSおよびJQueryへの参照も含まれます。

render.jsファイルの構造について考察します。

render.jsファイルの内容には、必要なOracle Content ManagementコンポーネントAPIを実装する2つのJavaScriptオブジェクトがあります: sampleComponentFactoryおよびSampleComponentImpl。これらのオブジェクトは、KnockoutJSベースのコンポーネントを作成するための実装の例となります。これらのオブジェクトの実装は、使用するテクノロジに基づいて変わります。

sampleComponentFactory
- このオブジェクトは、render.js AMDモジュールによって返されます。
- これは非常に単純なファクトリ・オブジェクトで、単一のcreateComponent()インタフェースを実装します。
- より複雑な実装では、viewModeパラメータに基づいてコンポーネントの様々な実装を返すために渡されたargs値を使用できます。これにより、実行時とサイト・ビルダーでコンポーネントを大幅に軽量に実装できます。
SampleComponentImpl
- このオブジェクト内の主な関数は、コンポーネントをページにレンダリングするために使用されるrender関数です。
  
  Knockoutコンポーネントをページにレンダリングするには、render関数によってテンプレートがページに動的に追加され、viewModelバインディングがテンプレートに適用されます。
- 残りの実装では、viewModelパラメータおよびテンプレートの初期化、およびページとコンポーネント間のメッセージングの処理を行います。

render.jsファイルの最後の2つのオブジェクトsampleComponentTemplateおよびSampleComponentViewModelは、コンポーネントのカスタム実装を提供します。これらの実装は、要件に応じて異なります。

sampleComponentTemplate
- このオブジェクトは、KnockoutJSテンプレート作成を提供します。これは、コンポーネントによってすべてのデータが初期化されるまで待機してから、表示を試みます。
SampleComponentViewModel
- viewModelは、コンポーネントのかわりにOracle Content Managementによって格納された情報を取得し、そのデータに基づいてコンポーネントを適切にレイアウトする方法を選択
- コンポーネントのかわりに格納されたメタデータへのアクセスを処理するために、テンプレートによって使用される一般的なKnockoutオブザーバブル:
```
self.imageWidth = ko.observable('200px');
self.alignImage = ko.observable();
self.layout = ko.observable();
self.showTopLayout = ko.observable();
self.showStoryLayout = ko.observable();
```
- トリガーとアクションの統合:
  
  トリガー: ページ上の他のコンポーネントのアクションにバインドできるコンポーネントからOracle Content Managementトリガーを生成する関数。
```
    self.imageClicked = function (data, event) {
      self.raiseTrigger("imageClicked"); // matches appinfo.json
    };
```
  アクション: 指定されたペイロードでアクションを実行するようコンポーネントが指示されたときに、コールバックを処理する機能。
```
    self.executeActionsListener = function (args) {
      // get action and payload
      var payload = args.payload,
      action = args.action;

      // handle 'setImageWidth' actions
      if (action && action.actionName === 'setImageWidth') {
        $.each(payload, function(index, data) {
          if (data.name === 'imageWidth') {
            self.imageWidth(data.value);
          }
        });
      }
    };
```
  要求に応じて、登録されているアクションを実行するためにコールバックします。
```
SitesSDK.subscribe(SitesSDK.MESSAGE_TYPES.EXECUTE_ACTION, 
$.proxy(self.executeActionsListener, self));
```
- コンポーネント・ライフサイクルのサブスクリプション:
  - コンポーネントの初期化: すべてのデータがフェッチされるまでコンポーネントがレンダリングしないようにします。これは、Knockoutのオブザーバブルによって処理されます。
```
self.componentLayoutInitialized = ko.observable(false);
self.customSettingsDataInitialized = ko.observable(false);
```
    必要な任意のプロパティの初期値を取得します。これは、データを取得するためにコールバックによって処理されます。
```
SitesSDK.getProperty('componentLayout', self.updateComponentLayout);
SitesSDK.getProperty('customSettingsData', self.updateCustomSettingsData);
```
  - メタデータの更新: コンポーネントのかわりに格納されたコンポーネント・メタデータが変更されるたびに、コールバックします。たとえば、ユーザーが「設定」パネルを呼び出してデータを更新するときです。
```
SitesSDK.subscribe(SitesSDK.MESSAGE_TYPES.SETTINGS_UPDATED, 
$.proxy(self.updateSettings, self));
```

ノート:

Oracle Content Managementサーバーは常に.htmlファイルのMIMEタイプを設定するため、.htmlファイルをアップロードして必要な"text!"プラグインを使用してロードすることはできません。したがって、テンプレートの場合は、"text!"プラグインを使用して別の拡張を使用してロードするか、シード済データに示すようにJavaScriptにインラインでロードする必要があります。

ステップ2の結果の確認

これで、カスタム・コンポーネント・レンダラの構造がどのように作成されるかの概要がわかりました。その動作を検証するには:

render.jsファイルのsampleComponentTemplateオブジェクトを更新して、次の行を変更します。このコードを変更します:
```
''+
```
かわりに、次のコードを使用します。
```
''+ 
'<div data-bind="text:\'image width is: \' + imageWidth()"></div>' +
```
Oracle Content Managementインスタンス・サーバーにコンポーネントを同期またはアップロードします。
サイト内のページを編集し、A_Local_Componentカスタム・コンポーネントをページにドロップします。

この時点で、コンポーネントにimage width is: 260pxが表示されます。
「設定」パネルを開き、「カスタム設定」ボタンをクリックします。
「画像の幅」フィールドを300pxに変更します。
この時点で、コンポーネントで次の2つのことが起こります。
1. デフォルト・イメージのサイズが260pxから300pxに拡大されます。
2. 追加したテキストは、image width is 300pxに更新されます。

「ステップ3: ローカル・コンポーネント設定の構造の確認」に進みます。