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

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

/assetsディレクトリ内のrender.jsファイルに似た事前作成されたsettings.htmlファイルが、同じディレクトリにあります。 settings.htmlファイルによって、コンポーネントのカスタム設定データがレンダリングされます。デフォルトの実装では、カスタム設定データに単一のプロパティimageWidthがあります。

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

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登録エントリを新しいサイズに更新する必要もあります。

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

ステップ3の結果の確認

これで、「設定」パネルに追加した新しいプロパティを表示および入力できるようになりました。

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

settings.htmlファイル内にあるプロパティごとに、2つのフィールドが表示されます。

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