| Oracle® WebCenter Content Site Studio Designerユーザーズ・ガイド 11g Release 1 (11.1.1) B72416-01 |
|
 前 |
 次 |
この項の内容は次のとおりです。
コントリビュータが要素ですぐに使用可能な動作よりもさらに多くの操作を行うことができるようにするには、要素に適用するカスタム・フォームまたはスクリプトを使用できます。
たとえば、WYSIWYG要素でサポートされないオブジェクトの追加をコントリビュータに許可する場合や、コンテンツの要件や制限をコントリビュータに対して実施する場合にデザイナが使用するメカニズムとして、カスタム・フォームやスクリプトを使用します。
Site Studioは、すぐに使用できる複数のサンプル・フォームとスクリプトをコンテンツ・サーバーに備えています（前述のトピックを参照）。これらのファイルの編成、編集および管理に役立つように、サイトに各フォームやスクリプトをサイト・アセットとして追加できます。
この項の内容は次のとおりです。
スクリプトは、多くの場合、Webサイトでの情報表示やユーザー・インタラクションをより効果的に行うためにWebサイトで使用します。スクリプトの追加、スクリプトの編集、スクリプトのコピー、スクリプトのサイトへの追加およびサイトからの削除を行うことができます。
カスタム構成スクリプトは、コントリビュータの要素内の編集のインタフェースを変更する場合に使用します。各構成スクリプトを使用して、コマンド、ツールバー・ボタンおよびコンテキスト・メニュー・アイテムを追加または置換できます。エディタのどの部分も、特定の要件を満たすためにカスタマイズできます。
詳細は、11.1.2項「カスタム構成スクリプトについて」を参照してください。
カスタム要素フォームは、カスタム要素定義を操作するために設計されたもので、他の要素と同様にリージョン・テンプレートとリージョン定義に追加します。カスタム要素フォームは、コントリビュータがWebサイトに各種コンテンツを追加したり、それらを制御したりする場合に使用するカスタム・インタフェースを作成するために使用します。Site Studioには、複数の事前定義済のカスタム要素フォームが付属します([CS-Dir]\custom\SiteStudio\support内)。サンプル・フォームも、インストール時にOracle Content Serverにチェックインされます。
この項の内容は次のとおりです。
「サイト・アセット」ペインのメニューで、「スクリプト」を選択します。
「新規作成」アイコン(図11-1)クリックし、「新規」→「JavaScriptファイル」を選択します。
「情報の割当てフォーム」が開き、アイテムをコンテンツ・サーバーにチェックインできます。
「情報の割当てフォーム」に適切な値を入力します。
Site Studioアセットの名前指定のガイドラインは、4.2項「サイト・アセットの命名」を参照してください。
入力したら、「情報の割当て」をクリックします。
スクリプトが作成されます。
新規追加時のスクリプトには、コードが含まれていません。空白の状態です。
リストからスクリプトを選択してコピーするか、コンテンツ・サーバーからスクリプトを選択してコピーするか、ローカル・インスタンスからスクリプトを選択してコピーできます。
リストからのスクリプトのコピー
「サイト・アセット」ペインのメニューで、「スクリプト」を選択します。
リストからコピーするスクリプトを選択します。
「新規作成」アイコン(図11-2)をクリックし、「コピー」→「選択済」を選択します。
「情報の割当てフォーム」が開き、アイテムをコンテンツ・サーバーにチェックインできます。
「情報の割当てフォーム」に適切な値を入力します。
入力したら、「情報の割当て」をクリックします。
スクリプトがコピーされます。
サーバーからのスクリプトのコピー
「サイト・アセット」ペインのメニューで、「スクリプト」を選択します。
「新規作成」アイコン(図11-2)をクリックし、「コピー」→「サーバーから」を選択します。
検索結果ページが開きます。
コピーするカスタム構成スクリプトに対応する「選択」ボタンをクリックします。
「情報の割当てフォーム」が開き、アイテムをコンテンツ・サーバーにチェックインできます。
「情報の割当てフォーム」に適切な値を入力します。
入力したら、「情報の割当て」をクリックします。
スクリプトがコピーされます。
ローカル・インスタンスからのスクリプトのコピー
「サイト・アセット」ペインのメニューで、「スクリプト」を選択します。
「新規作成」アイコン(図11-2)をクリックし、「コピー」→「ローカルから」を選択します。
ナビゲーション・ウィンドウが開きます。
ローカル・インスタンスで、コピーするスクリプトに移動します。
スクリプトを選択して、「開く」をクリックします。
「情報の割当てフォーム」が開き、アイテムをコンテンツ・サーバーにチェックインできます。
「情報の割当てフォーム」に適切な値を入力します。
入力したら、「情報の割当て」をクリックします。
スクリプトがコピーされます。
スクリプトを編集するには、次の手順を実行します。
「サイト・アセット」ペインのメニューで、「スクリプト」を選択します。
編集するスクリプトをリストから選択し、「編集」アイコン(図11-3)をクリックします。
選択したスクリプトが開き、「ソース」ビューで編集できるようになります。
スクリプトのコンテンツ情報を表示するには、次の手順を実行します。
「サイト・アセット」ペインのメニューで、「スクリプト」を選択します。
リストからスクリプトを選択します。
「ドキュメント情報」アイコン(図11-4)をクリックします。
コンテンツ情報ページが開きます。
サイトにスクリプトを追加するには、次の手順を実行します。
「サイト・アセット」ペインのメニューで、「スクリプト」を選択します。
「サイトに追加」アイコン(図11-5)をクリックします。
検索結果ページが開きます。
追加するスクリプトを選択し、「Site Studio」→「印の付いたドキュメントを選択」をクリックします。
構成に応じて、既存のアセットをサイトに追加しようとしていることを示す警告が表示される場合があります。「OK」をクリックします。
スクリプトがWebサイトに関連付けられ、開いて編集できるようになります。
サイトからスクリプトを削除するには、次の手順を実行します。
「サイト・アセット」ペインのメニューで、「スクリプト」を選択します。
削除するスクリプトをリストから選択し、「サイトから削除」アイコン(図11-6)をクリックします。
スクリプトを削除すると、そのスクリプトはサイトからのみ削除され、コンテンツ・サーバーからは削除されません。
カスタム要素は、ユーザー定義の要素です。他の要素（WYSIWYG、テキスト専用、イメージ専用、静的リスト、動的リスト）に加え、カスタム要素により、個々のビジネス・ニーズにあわせてSite Studioを拡張する方法が提供されます。カスタム要素は、適した要素が他にないときに作成します。
カスタム要素は、コントリビュータ・フォームのIFRAME内に存在する完全なHTMLファイルです。カスタム要素がSite Studio要素として正しく機能するためには、カスタム要素でAPIを使用して複数のコールバックを実装する必要があります。
|
重要: Site Studioサイトを10gR3 (10.1.3.3.3)より前のバージョンからアップグレードする場合は、サイト内のすべてのカスタム要素を手動で更新する必要があります。詳細は、11.3.2項「下位互換性とアップグレード」を参照してください。 |
カスタム要素フォームは、カスタム要素を操作するために設計されたもので、他の要素と同様にコントリビューション・リージョンに追加します。このフォームの一意性は、コントリビュータがWebサイトに各種コンテンツを追加する際に使用するカスタム・インタフェースを作成できる点にあります。
たとえば、特定のファイル・タイプについてコンテンツ・サーバーに問合せを実行するカスタム・フォームを作成したり、その中のいずれかのファイルをユーザーが選択できるようにしたり、ユーザーをコントリビュータに戻したりできます。あるいは、コントリビュータがソース・コードや書式設定されたテキストをコピーしてWebページに貼り付けるためのテキスト・ボックスを表示するフォームを作成できます。
このフォームはユーザーから任意の情報を収集するブラウザベースの汎用フォームで、ホスト（この場合はコントリビュータ）に値を返します。
この項の内容は次のとおりです。
カスタム要素がコントリビュータ・フォームで正しく機能するためには、カスタム要素でAPIを使用していくつかのコールバックを実装する必要があります。次の項では、カスタム要素を作成する観点から、ElementAPIとそのメソッドを中心に説明します。
|
注意: カスタム要素のパス（URL）は、コントリビュータ・フォームと同じドメインである必要があります。これにより、コントリビュータ・フォームとカスタム要素が、クロスドメイン・スクリプト・ルールに違反することなく通信できるようにします。 |
ElementAPI
ElementAPIオブジェクトは、コントリビュータ・フォームとカスタム要素間の通信を支援するカスタム要素ページに明示的にロードされるJavaScriptオブジェクトです。ElementAPIにより、カスタム要素がコントリビュータ・フォームと通信するためのメソッドと、コントリビュータ・フォームがカスタム要素に通知を送信するためのコールバック・メカニズムが提供されます。
ElementAPI JavaScriptオブジェクトのロード
ElementAPIとそのサポート・ライブラリを使用する前に、ElementAPIをカスタム要素ページにロードする必要があります。ElementAPIのロード後、カスタム要素は、ページの初期化を継続し、カスタム要素がロードされて使用可能になったことをコントリビュータ・フォームに通知します。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Simple Custom Element</title>
<style type="text/css">
* { padding: 0; margin: 0; }
body { font-size: 10pt; }
#container { height: 150px; overflow: auto; width: 100%; text-align: center; align: center;}
#content { width: 99%; }
</style>
<script type="text/javascript">
var Custom = {};
Custom.originalData = null;
Custom.Initialize = function()
{
// Set callback methods for the Contributor Form to send notifications to this Element.
ElementAPI.SetCallback('GetElementContent', function(callback) {
callback(Custom.GetData());
});
ElementAPI.SetCallback('ActivateElement', function(callback){ $ID('content').focus(); callback(); });
ElementAPI.SetCallback('CanCloseElement', function(callback){ callback({canClose: true}); });
ElementAPI.SetCallback('Show', function(callback){ callback(); });
ElementAPI.SetCallback('Hide', function(callback){ callback(); });
ElementAPI.SetCallback('IsDirty', function()
{
return { isDirty: (Custom.originalData !== Custom.GetData()) };
});
// Set the height of the Custom Element form's host.
var height = ( ElementAPI.GetElementCount() == 1 ) ? '100%' : '150px';
var flags = ElementAPI.GetElementConfigProperty('flags') || {};
var config = ElementAPI.GetElementConfiguration() || {};
if( flags.canSetHeight && config.height && ( config.height.length > 0 ) )
{
height = config.height;
}
height = ElementAPI.SetHostHeight(height);
// Get the default content stored within the data file.
$ID('content').value = Custom.GetDefaultData();
// Add base styles
WCM.DHTML.AddStyleSheet({path: WCM.path + './base/wcm.base.css', context: window});
// Add a resize handler for when the window is resized.
var ResizeHandler = function()
{
WCM.DHTML.SetStyle('container', 'height', WCM.DHTML.GetViewportHeight() + 'px');
WCM.DHTML.SetStyle('container', 'width', WCM.DHTML.GetViewportWidth() + 'px'); };
ResizeHandler();
WCM.DHTML.AddWindowResizeEvent(window, ResizeHandler);
// Immediately store the original data as a baseline for the IsDirty comparison.
Custom.originalData = Custom.GetData();
// Let the Contributor Form know this Custom Element is ready. (required) ElementAPI.Ready();
};
Custom.GetDefaultData = function()
{
return ElementAPI.GetDefaultData()
.replace(/<pre>/g, '')
.replace(/<\/pre>/g, '')
.replace(/</g, "<")
.replace(/>/g, ">") || 'Some default content.';
};
Custom.GetData = function()
{
return '<pre>' + $ID('content').value.replace(/</g, "<").replace(/>/g, ">") + '</pre>';
};
try {
// Tell the Contributor Form to load the Custom Element dependent JavaScript libraries. (required)
// PARAMETERS
// 1st parameter: The context (window) in which the form loads the Custom Element dependent JavaScript libraries into.
// 2nd parameter: A user defined function pointer for the Contributor Form to call when initialization is complete.
window.top.WCM.InitializeCustomElement(window, Custom.Initialize);
catch(e) { }
</script>
</head>
<body>
<div id="container">
<div id="title">Simple Custom Element</div>
<div><textarea id="content" rows="5"></textarea></div>
</div>
</body>
</html>
|
注意: コード例では、ElementAPIをロードし、コントリビュータ・フォームに対してElementAPIがロードされて使用可能になったことを通知します。ただし、データの収集または保存は行いません。 |
コントリビュータ・フォームからカスタム要素への通信
コントリビュータ・フォームは、カスタム要素により実装された関数を実行することで、カスタム要素と通信します。初期化プロセスの一部として、カスタム要素では、コントリビュータ・フォームにこれらの関数のポインタを渡して各関数を登録する必要があります。
次の表に、コントリビュータ・フォームに登録できる関数を示します。これらの関数は、いずれもカスタム要素により実装する必要はありませんが、コントリビュータ・ユーザーからデータを収集して保存する場合は、いくつかの関数が必要になります。また、(IsDirty()関数以外の)すべての関数は、実行されると、タスク完了時の実行のためにコールバック関数のポインタを渡します。これにより、実行時にカスタム要素で非同期タスクを実行する必要がある場合に、非同期通信を実行できます。
| 関数シグネチャ | 説明 |
|---|---|
| CanCloseElement(callback); | コントリビュータ・フォームは、コントリビュータ・ユーザーが更新を実行したときにこのメソッドを実行します。関数の実装では、カスタム要素を安全に閉じることができるかどうかを評価する必要があります。たとえば、データが検証に合格しない場合、カスタム要素が閉じられないことを示す必要があります。 |
| GetElementContent(callback); | コントリビュータ・フォームは、コントリビュータ・ユーザーが更新を実行したときにこのメソッドを実行します。関数の実装では、保存される文字列コンテンツを戻す必要があります。 |
| Hide(callback); | コントリビュータ・フォームは、カスタム要素の上にHTML要素をオーバーレイ表示するDHTMLタスクをフォームで実行するときに常にこのメソッドを実行します。たとえば、このメソッドは「メタデータ」タブがアクティブ化され、コントリビュータ要素が隠蔽されたときに実行されます。
このメソッドは、特にEphoxベースの要素向けに導入されています（Javaアプレットには常にtop z-indexが含まれるため）。他のすべての要素（HTMLベースの要素）では、このメソッドを無視できます。 |
| Show(callback); | コントリビュータ・フォームは、カスタム要素を再表示する（オーバーレイを削除する）DHTMLタスクをフォームで実行するときに常にこのメソッドを実行します。
このメソッドは、特にEphoxベースの要素向けに導入されています（Javaアプレットには常にtop z-indexが含まれるため）。他のすべての要素（HTMLベースの要素）では、このメソッドを無視できます。 |
| IsDirty(); | コントリビュータ・フォームは、更新なしにフォーム・ポップアップが閉じられるときに常にこのメソッドを実行します。カスタム要素は、未保存の変更があるかどうかを評価して、保存していない変更がある場合はコントリビュータ・ユーザーに通知します。 |
次に、カスタム要素がコントリビュータ・フォームに関数を登録する方法を表すJavaScriptのコード・スニペットを示します。
function CanCloseElement(callback)
{
// No data validation in this sample - just pass back a true value.
callback({canClose: true});
// Here is an example of passing a false value
// callback({canClose: false, reason: 'Failed validation. Use only lowercase
// letters.'};
}
function GetElementContent(callback)
{
// Pass back some sample content for demo purposes.
callback('This is my Custom Element Content.');
}
function Show(callback)
{
// Just handle this notification by executing the callback.
callback();
}
function Hide(callback)
{
// Just handle this notification by executing the callback.
callback();
}
function IsDirty()
{
// This Custom Element is never dirty - so pass a false value.
return {isDirty: false};
}
// Set callback methods for the Contributor Form to send notifications to this
// Element.
ElementAPI.SetCallback('CanCloseElement', CanCloseElement);
ElementAPI.SetCallback('GetElementContent', GetElementContent);
ElementAPI.SetCallback('Show', Show);
ElementAPI.SetCallback('Hide', Hide);
ElementAPI.SetCallback('IsDirty', IsDirty);
カスタム要素からコントリビュータ・フォームへの通信
カスタム要素では、ElementAPI JavaScriptオブジェクトを使用して、コントリビュータ・フォームとの通信を開始します。次に、使用可能なElementAPIメソッドのリストを示します。
| 関数シグネチャ | 説明 |
|---|---|
| ElementAPI.GetDefaultData(); | データ・ファイルに格納されたデフォルト・コンテンツを取得します。 |
| ElementAPI.GetSearchResults(options); | Content Serverの検索結果の取得ページを開きます。 |
| ElementAPI.GetQueryText(options); | 問合せテキストの取得ユーザー・インタフェースを開きます。 |
| ElementAPI.CaptureQuery(options); | Oracle Content Serverの「問合せの取得」ページを開きます。 |
| ElementAPI.GetHyperlink(options); | ハイパーリンク・ウィザード・ユーザー・インタフェースを開きます。 |
| ElementAPI.FocusForm(options); | 親ウィンドウにフォーカスし、「要素」ウィンドウを隠蔽します。 |
| ElementAPI.SetHostHeight(height); | 要素を格納するIFRAMEの高さを設定します。 |
| ElementAPI.SetRequiredIndicator(isRequired); | 「コントリビュータ・フォーム」ユーザー・インタフェースで「必須」グラフィック・インジケータを切り替えます。 |
| ElementAPI.GetSite(options); | 「Webサイトの選択」選択ユーザー・インタフェースを開きます。 |
| ElementAPI.GetSection(options); | 「Webサイト・セクションの選択」選択ユーザー・インタフェースを開きます。 |
| ElementAPI.GetColor(options); | 「色」選択ユーザー・インタフェースを開きます。 |
| ElementAPI.GetFont(options); | フォントの取得選択ユーザー・インタフェースを開きます。 |
ElementAPIがカスタム要素ページにロードされる際に、ElementAPI依存スクリプトもロードされます。これらのスクリプトには、JavaScript WCMライブラリのほとんどが含まれており、カスタム要素の作成者が使用することもできます。次のスクリプト・ファイルがカスタム要素にロードされます。
wcm.js
./base/wcm.dhtml.js
./base/wcm.get.js
./base/wcm.http.js
./base/wcm.popup.js
./sitestudio/wcm.contentserver.popup.js
./form/elements/wcm.elementapi.js
./sitestudio/elements/wcm.sitestudio.elementapi.js
./sitestudio/wcm.idc.js
./form/elements/element/wcm.element.js
./form/elements/custom/wcm.custom.js
カスタム要素のソースモード・タイプの例
次の単純なカスタム要素の例では、コントリビュータ・ユーザーによりTEXTAREAに入力されたコンテンツを保存し、それをレイアウトに直接開きます。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Simple Custom Element</title>
<style type="text/css">
* { padding: 0; margin: 0; }
body { font-size: 10pt; }
#container
{
height: 150px;
overflow: auto;
width: 100%;
text-align: left;
align: left;
padding: 7px;
}
.controls
{
border: 1px solid #B9B9B4;
border-top-color: #DDDDD8;
border-bottom-color: #797975;
vertical-align: middle;
font-size: 100%; /* 11px @ Normal */
font-color: #000;
}
</style>
<script type="text/javascript">
var Custom = {};
Custom.originalData = null;
Custom.Initialize = function()
{
ElementAPI.SetCallback('GetElementContent', function(callback)
{
callback(Custom.GetData());
});
ElementAPI.SetCallback('ActivateElement', function(callback){ $ID('content').focus(); callback(); });
ElementAPI.SetCallback('CanCloseElement', function(callback){ callback({canClose: true}); });
ElementAPI.SetCallback('Show', function(callback){ callback(); });
ElementAPI.SetCallback('Hide', function(callback){ callback(); });
ElementAPI.SetCallback('IsDirty', function()
{
return { isDirty: (Custom.originalData !== Custom.GetData()) };
});
var height = ( ElementAPI.GetElementCount() == 1 ) ? '100%' : '150px';
var flags = ElementAPI.GetElementConfigProperty('flags') || {};
var config = ElementAPI.GetElementConfiguration() || {};
if( flags.canSetHeight && config.height && ( config.height.length > 0 ) )
{
height = config.height;
}
height = ElementAPI.SetHostHeight(height);
$ID('input-value').value = ElementAPI.GetDefaultData();
WCM.DHTML.AddStyleSheet({path: WCM.path + './base/wcm.base.css', context: window});
var ResizeHandler = function()
{
var viewPortWidth = WCM.DHTML.GetViewportWidth();
var viewPortHeight = WCM.DHTML.GetViewportHeight();
WCM.DHTML.SetStyle('container', 'height', viewPortHeight + 'px');
WCM.DHTML.SetStyle('container', 'width', viewPortWidth + 'px');
WCM.DHTML.SetStyle('input-value', 'height', (viewPortHeight - 15) + 'px');
WCM.DHTML.SetStyle('input-value', 'width', (viewPortWidth - (WCM.IS_IE ? 15 : 15)) + 'px');
};
ResizeHandler();
WCM.DHTML.AddWindowResizeEvent(window, ResizeHandler);
Custom.originalData = Custom.GetData();
ElementAPI.Ready();
};
Custom.GetData = function()
{
return $ID('input-value').value;
};
try {
window.top.WCM.InitializeCustomElement(window, Custom.Initialize);
} catch(e) { }
</script>
</head>
<body>
<div id="container" nowrap>
<textarea id="input-value" class="controls" type="text" title="URL"></textarea>
</div>
</body>
</html>
Site Studio 10gR3 (10.1.3.3.3)より前のSite Studioリリースと互換性があるすべてのカスタム要素フォームは、Site Studio 10gR4 (10.1.4)以降のリリースとは互換性がないため、手動でアップグレード(再作成)する必要があります。下位互換性が維持されていない主な理由は、以前のSite StudioがInternet Explorerの独自仕様のwindow.external機能に依存しているためです。このため、コントリビュータ・アプリケーションではActiveXが使用されています。window.external機能は、コード実行の時点でブロックされ、クロスブラウザ/プラットフォームのDHTMLソリューションでは簡単に複製できません。下位互換性をなくしたことによるメリットは、新規カスタム要素がより一層柔軟になり、（クロスブラウザ/プラットフォーム・ソリューションであることに加え）コントリビュータ・アプリケーション・アーキテクチャに緊密に統合されたことです。
レガシー・カスタム要素フォーム(10gR3、10.1.3.3.3より前)は、新しいコントリビュータ・アプリケーションにロードされると、(デフォルトで)検出されます。その際、コントリビュータ・フォーム内の検出された場所にエラー・メッセージが表示されます。コントリビュータ・アプリケーションはこの検出を行うために、まずカスタム要素フォームをダウンロードし、ソース・コードを解析して、カスタム要素フォームが新しいコントリビュータ・アプリケーションと互換性があるかどうかを確認します。
レガシー・カスタム要素フォームを検出する機能とオーバーヘッドは、本番インストールでは不要であり、デフォルトでオフになります。アップグレードするレガシー・カスタム要素フォームがある場合は、フラグをオンにする必要があります。レガシー・カスタム要素フォームの検出機能を有効にするには、次の行をOracle Content Serverのconfig.cfgファイルに追加して、サーバーを再起動してください。
SSValidateCustomElements=true
Site Studio 11gR1には、11のサンプル・カスタム・フォームまたは要素が付属しています。これらのサンプル・フォームは、コントリビュータ・フォームのフレームワーク内で動作するカスタム要素の実装例です。
これらのサンプルは、Site Studioコンポーネントのインストール時に、Custom Element FormというxWebsiteObjectTypeメタデータ値とともにコンテンツ・サーバーにチェックインされます。
ss_boolean_checkbox_form.htm
このサンプル・フォームは、チェック・ボックスを含む単純なカスタム要素の例です。
ss_boolean_radio_form.htm
このサンプル・フォームは、ラジオ・ボタンを含む単純なカスタム要素の例です。
ss_docname_form.htm
このサンプル・フォームは、コンテンツ・サーバーの検索でコンテンツIDを選択できるカスタム要素の例です。
ss_option_form.htm
このサンプル・フォームは、オプション・リストを作成できるカスタム要素の例です。この例は、非常に単純なものです。より複雑な例では、コンテンツ・サーバーのメタデータなど、他の多くのソースからリストにデータを入力できます。
ss_query_form.htm
このサンプル・フォームは、コンテンツ・サーバーの問合せを取得できるカスタム要素の例です。
ss_url_form.htm
このサンプル・フォームは、コンテンツ・サーバーの検索でweblayout URLを返すことができるカスタム要素の例です。
このサンプル・フォームは、最小限のコードを含む単純なカスタム要素の例です。この特定の例では、TEXTAREA HTML要素を使用してテキスト専用のカスタム要素を実装しています。TEXTAREA HTML要素は、テキスト専用エディタを提供する非常に簡易なメソッドです。
このサンプル・フォームは、整数値を取得するためのカスタム要素の例です。このカスタム要素は他の場所で使用するパラメータを取得する場合に有用です。
このサンプル・フォームは、最小限のコードを含む単純なカスタム要素の例です。この特定の例では、TEXTAREA HTML要素を使用してテキスト専用のカスタム要素を実装しています。TEXTAREA HTML要素は、テキスト専用エディタを提供する非常に簡易なメソッドです。
このサンプル・フォームは、コントリビュータ・ユーザーがコンテンツ・サーバーからFLASHオブジェクトを選択できるカスタム要素の例です。
このサンプル・フォームは、使用可能なすべてのElementAPIメソッドを使用するカスタム要素の例です。これらのメソッドの完全なリストは、11.3.1項「カスタム要素の実装」に記載されています。
カスタム構成スクリプトは、特に、個々の要素に対応するコントリビュータの編集領域を変更するために使用されるJavaScriptファイルです。構成スクリプトには、様々な要素を関連付けることができます。ただし、各要素では個別にスクリプトを呼び出す必要があります。
カスタマイズは、FCKeditorベースおよびEphoxベースの要素に影響します。これらの要素は、WYSIWYG、テキスト専用およびイメージ専用です。カスタム構成スクリプトを使用すると、コマンド、ツールバー・ボタンおよびコンテキスト・メニュー・アイテムを追加または置換できます。エディタのどの部分も、特定の要件を満たすためにカスタマイズできます。
Site Studioには、複数のサンプル・カスタム構成スクリプトが付属しています。これらのサンプルは、Site Studioコンポーネントをコンテンツ・サーバーにインストールするときに、Custom Configuration ScriptというxWebsiteObjectTypeメタデータ値とともにコンテンツ・サーバーにチェックインされます。
サンプルには次のスクリプトが含まれています。
ss_fck_simple_command.js: このサンプル・スクリプトは、単純なFCKeditorコマンドの例です。この例では、FCKeditorコマンド、ツールバー・ボタンおよびメニュー・アイテムを実装しています。
ss_fck_image_command.js: このサンプル・スクリプトは、既存のssImageコマンドとImageコマンドを上書きするFCKeditorコマンドの例です。この例では、コマンドを再定義し、既存の「イメージ」ツールバー・ボタンとコンテキスト・メニュー・アイテムを再利用しています。
ss_fck_load_multiple_commands.js: このサンプル・スクリプトは、複数のカスタム構成スクリプトをロードする方法を示しています。
ss_fck_template_command.js: このサンプル・スクリプトは、ユーザーが定義済のHTMLを挿入できるようにします。
「サイト・アセット」ペインの「カスタム構成スクリプト」の詳細は、第11章「スクリプトとフォームの操作」を参照してください。
要素の検証ダイアログのデフォルトの検証オプションは、操作する要素のタイプに応じて異なります（次を参照）。
