ステップ3: ローカル・コンポーネント設定の構造のレビュー

このステップでは、ローカル・コンポーネント用に指定された設定の構造をレビューします。

/assetsディレクトリのrender.jsファイルと同様に、同じディレクトリに事前作成済のsettings.htmlファイルがあります。settings.htmlファイルは、コンポーネントのカスタム設定データをレンダリングします。デフォルトの実装では、カスタム設定データにプロパティimageWidthが1つあります。

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

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

デスクトップ同期クライアントがない場合は、Oracle Content Management Webインタフェースの「コンポーネント」タブでコンポーネントを選択し、ドリルダウンしてファイルを表示できます。
コンポーネントの下にあるファイルをリストする場合は、次のようなファイルが表示されます。
```
assets
    render.js
    settings.html
appinfo.json
_folder_icon.jpg
```

/assetsディレクトリにあるsettings.htmlファイルを開き、コンテンツをレビューします。render.jsファイルと異なり、settings.htmlファイルはサイト・ビルダーの「設定」パネルのインライン・フレームを使用します。そのため、インライン・フレームで正しくレンダリングするために、サポートしているファイルへのアクセス権も必要になります。サイト・ビルダーは、サイトを管理するために必要です。これにより、JavaScriptコードのエラーをサイト・ビルダーから分離できるようになります。そのため、settings.htmlファイルはインライン・フレームを使用します。

次に、settings.htmlファイルの主な領域を示します。

「設定」パネルをレンダリングするKnockoutテンプレート。

<!-- ko if: initialized() -->
<div class="scs-component-settings">
  <div>
    <!-- Width -->
    <label id="widthLabel" for="width" class="settings-heading" data-bind="text: 'Image Width'"></label>
    <input id="width" data-bind="value: width" placeholder="example: 200px or 33%" class="settings-text-box">
  </div>
</div>
<div data-bind="setSettingsHeight: true"></div>
<!-- /ko -->

「設定」パネルがレンダリングされた後にインライン・フレームの高さを調整するためのカスタム・バインド・ハンドラ。
```
ko.bindingHandlers.scsCompComponentImpl
```
Knockoutテンプレートに適用するKnockout ViewModel。
```
SettingsViewModel
```

次に、SettingsViewModelの主な要素を示します。

コンポーネント・ライフサイクルへのサブスクリプション:。
コンポーネントの初期化:
- すべてのデータがフェッチされるまでコンポーネントがレンダリングされないようにします。これはKnockoutオブザーバブルによって処理されます。
```
self.initialized = ko.observable(false);
```
- 準備が完了するまでデータの更新を試行しないようにします。
```
self.saveData = false;
```
- 必要なプロパティの初期値を取得します。これはコールバックによって処理され、データを取得します。
```
    SitesSDK.getProperty('customSettingsData', function (data) {
      //update observable
      self.width(data.width);

      // note that viewModel is initialized and can start saving data
      self.initialized(true);
      self.saveData = true;
    });
```

プロパティの変更をカスタム設定データに保存します。

    self.save = ko.computed(function () {
      var saveconfig = {
        'width': isNaN(self.width()) ? self.width() : self.width() + 'px'
      };

      // save data in page
      if (self.saveData) {
        SitesSDK.setProperty('customSettingsData', saveconfig);
      }
    }, self);

取得する必要がある別のプロパティを追加するには、いくつかのステップが必要です。

ユーザー・インタフェースを更新して新しい値を表示します。
コンポーネントに対して格納された現在値に値を初期化します。
値の変更内容をコンポーネントに保存します。

別のプロパティをカスタム・コンポーネントに追加するには、これらの変更内容をsettings.htmlファイルに加えます。

別のオブザーバブルを追加して新規プロパティを処理します。次のコードを変更します:
```
self.width = ko.observable();
```
かわりに次のコードを使用します:
```
self.width = ko.observable();
self.imageBannerText = ko.observable();
```
「設定」パネルが最初に表示されたときに、新規プロパティの現在値を取得します。次のコードを変更します:
```
self.width(data.width);
```
かわりに次のコードを使用します:
```
self.width(data.width);
self.imageBannerText(data.imageBannerText);
```

この新規プロパティの変更内容を保存します。次のコードを変更します:

    'width': isNaN(self.width()) ? self.width() : self.width() + 'px'

かわりに次のコードを使用します:

'width': isNaN(self.width()) ? self.width() : self.width() + 'px',
'imageBannerText': self.imageBannerText()

ユーザー・インタフェースを追加して新しいフィールドを表示します。次のコードを変更します:

<label id="widthLabel" for="width" class="settings-heading" data-bind="text: 'Image Width'"></label>
<input id="width" data-bind="value: width" placeholder="example: 200px or 33%" class="settings-text-box">

かわりに次のコードを使用します:

<label id="widthLabel" for="width" class="settings-heading" data-bind="text: 'Image Width'"></label>
<input id="width" data-bind="value: width" placeholder="example: 200px or 33%" class="settings-text-box">

<label id="imageBannerTextLabel" for="imageBannerText" class="settings-heading" data-bind="text: 'Image Banner'"></label>
<input id="imageBannerText" data-bind="value: imageBannerText" placeholder="Text to display above an image" class="settings-text-box">

settings.htmlファイルを同期またはアップロードします。

これを実行する場合、フィールドが表示されます。ただし、「設定」パネルは自動的に変更されません。パネルのサイズを増やしたため、components.json登録エントリを新しいサイズに更新する必要もあります。

コンポーネントのassets/ディレクトリと同じレベルであるappinfo.jsonファイルをダウンロードして、「設定」パネルのサイズを更新します。次のコードを変更します:
```
"settingsHeight": 90,
```
かわりに次のコードを使用します:
```
"settingsHeight": 160,
```
appinfo.jsonファイルを同期またはアップロードします。

ステップ3の結果の確認

「設定」パネルに追加した新規プロパティを表示および入力できる必要があります。

サイト・ビルダーでコンポーネントへの変更内容を反映できるように、サイトでページをリフレッシュします。
ページを編集モードで取り込みます。
コンポーネントをページにドラッグ・アンド・ドロップします。
「設定」パネルをコンポーネントに対して開きます。
「カスタム設定」ボタンをクリックします。

settings.htmlファイルにあるそれぞれのプロパティに対して表示される2つのフィールドを確認します。

「ステップ4: コンポーネントでの新規プロパティの表示」に進みます。