[WebCenter, Cloud] Oracle Sites Cloud Service: Getting Started with Custom Components

原文はこちら。
https://blogs.oracle.com/webcenter/entry/oracle_sites_cloud_service_getting

---

# 著者はIgor Polyakov (Senior Principal Product Manager, Oracle) です。

この9ステップのチュートリアルでは、シンプルなOracle Sites Cloud Service (SCS) コンポーネントを作成する方法を学びます。このコンポーネントは、要素<div> を属性"contenteditable"とともに使って、エンドユーザーがページ内に独自のテキストを入力し、コンポーネントに保存できるようにします。この中で、コンポーネント作成時に入手する事前定義済みファイルを変換し、自身の実装に入れる方法を紹介しています。この意図は、事前定義済みのファイルの中でどれが必須でどれが任意選択可能なものかを説明することにあります。コンポーネント作成時に、そのままで利用可能な事前定義済みのファイルを入手します。この事前構成済みのコードは、製品のほとんどのコンポーネントの機能をカバーしています。SCSのドキュメント「Tutorial: Developing Components with Knockout」では全てのコンポーネントを組み合わせる方法を説明しています。

Oracle® Cloud Developing for Oracle Sites Cloud Service
Tutorial: Developing Components with Knockout
http://docs.oracle.com/cloud/latest/sitescs_gs/SCSDV/GUID-D7A70996-FE39-4F8F-931B-28F459CC0F35.htm#SCSDV-GUID-D7A70996-FE39-4F8F-931B-28F459CC0F35

このチュートリアルでは、事前構成済みのコードを変更してカスタムコンポーネントを作成する方法、そして標準のチュートリアルでは取り上げていない別の特徴をも取り上げています。例えば…

• コンポーネントのViewModeを基にした異なるテンプレートを提供する方法
• 設定パネルからではなく、コンポーネントからのデータを保存する
• ページのUndo/Redoイベントとの統合

［注意］
このサンプルは、汎用SCSカスタムコンポーネントを構成する様々な要素を説明することを目的にしているため、このまま利用して本番環境で利用するコンポーネントとして使うことはご遠慮ください。 

Step 1: Create New Component

この手順を実施すると、すぐにページに配置可能なSites Cloud Serviceを使うコンポーネントを作成することができます。これは新しいコンポーネントを作成するスタート地点です。

ローカルコンポーネントを作成するには

1. ［サイト］＞［コンポーネント］へ移動
   （注意）16.4.1ではサイトをExperienceと読み替えてください。
2. ［作成］＞［ローカルコンポーネントの作成］
3. コンポーネント名を指定（例：BasicTextEditor）。コンポーネントの説明は任意。
4. ［作成］をクリックして新規コンポーネントを作成

Checkpoint 1
コンポーネントを無事に作成できると、コンポーネント・カタログおよび、作成した任意のサイトで［追加］＞［カスタム・コンポーネント・パレット］でこのコンポーネントを確認できるはずです。以下の手順を使ってコンポーネント作成の検証をしてください。

1. 任意の事前構成済みの新規サイトを作成する。今回は”StarterTemplate”というテンプレートを使って、”ComponentTest”というサイトを作成する。
2. ［編集］オプションを選択してSite Builderで開き、サイトのアップデートを作成する。
3. 作成したサイト内のページを編集する。
4. 左側の"+"ボタン（追加）をクリックして、カスタムコンポーネントのリストのために［カスタム］を選択する
   
   
5. "BasicTextEditor"をカスタム・コンポーネント・パレットから選択し、ページに配置する。作成したローカル・コンポーネントのデフォルト描画を確認できるはず。
6. 配置したコンポーネントのバナーで、コンテキスト・メニューを選択する。
7. ドロップダウン・メニューから［設定］を選択する。設定を変更すると、事前構成済みコンポーネントの描画が変わる様子を確認することができる。

Step 2から9までを確認したい方は、こちらからどうぞ。