10 付属の属性エディタの構成
WebCenter Sitesには、Oracle Content and Experience属性エディタ、イメージ・ピッカー、CKEditorおよびClarkii Online Image Editorが同梱されています。コンテンツ・コントリビュータは、イメージ・ピッカーを使用して、作成または編集しているアセットに関連付けるイメージ・アセットを視覚的に選択します。CKEditorでは、MS Word形式の広範な書式設定をコンテンツに適用します。また、Clarkii Online Image Editor (Clarkii OIE)を使用して、フォーム・モードでアセットの「新規」ビューまたは「編集」ビューのイメージを直接編集します。
WebCenter Sitesに同梱されている属性エディタのインスタンスの構成については、次のトピックを参照してください。
10.1 CKEditorの構成
CKEditorは、CKSource社製のオープン・ソースWYSIWYGテキスト・エディタであり、クライアント側にインストールしておく必要はありません。CKEditorは、WebCenter Sitesに付属しています。アセット・タイプにWYSIWYG対応のテキスト・フィールドが含まれている場合には、デフォルトでCKEditorを使用するようにそのアセット・タイプを構成できます。
次のトピックを参照してください。
10.1.1 始める前に
Internet ExplorerでCKEditorを使用している場合に、WebCenter Sitesがcp1252文字セットを使用するように構成されている場合は、次のステップに従い、CKEditorがInternet Explorerで正しく動作するようにしてください。
10.1.2 CKEditorインスタンスの作成方法とフィールドに対して有効化する方法
この手順では、CKEditorのインスタンスを作成して、FirstSiteIIサンプルに基づいてこのインスタンスをフレックス・アセット属性に対して有効にする方法を説明します。
この例では、新しいCKEditorインスタンスをFSIIAbstractフィールドの入力方法(属性エディタ)として有効にします。(FSIIAbstractは、Content
というサンプル・アセット・タイプのフレックス属性です。)
CKEditorインスタンスを作成して有効にするには:
-
Adminインタフェースを開きます。
-
CKEditorインスタンスを作成します。
-
ボタン・バーで、「新規」をクリックします。
-
アセット・タイプのリストで、「新規属性エディタ」をクリックします。
WebCenter Sitesに、新規属性エディタ・フォームが表示されます。
-
「名前」フィールドに、このCKEditorインスタンスを一意に識別する名前を入力します。この例では、CK_FSIIAbstractと入力します。
クライアントは、総称名を使用してCKEditorを作成して、そのCKEditorを複数の属性で使用できます。そのフィールド特有の要件がないかぎり、属性に対してCKEditorインスタンスを一意に識別する必要はありません。たとえば、そのフィールドが他のCKEditorフィールドと異なる場合、そのフィールド内のCKEditorの幅と長さといった要件です。
-
次のコードを「XML」フィールドに貼り付けます。
<?XML VERSION="1.0"?> <!DOCTYPE PRESENTATIONOBJECT SYSTEM "presentationobject.dtd"> <PRESENTATIONOBJECT NAME="CKEDITOR"> <CKEDITOR WIDTH="400" HEIGHT="200"></CKEDITOR> </PRESENTATIONOBJECT>
-
「保存」をクリックします。
-
-
このCKEditorインスタンスをFSIIAbstractフィールドの入力方法として有効にします。「編集」フォームで、
FSIIAbstract
属性アセットを探して開きます。-
ボタン・バーで、「検索」をクリックします。
-
アセット・タイプのリストで、「コンテンツ属性の検索」をクリックします。
-
「検索」フィールドで、
FSIIAbstract
を入力して、「検索」をクリックします。 -
検索結果のリストで、FSIIAbstractアセットに移動し、その「編集」(鉛筆)アイコンをクリックします。
WebCenter Sitesの「編集」フォームにアセットが表示されます。
-
CKEditorをこの属性の属性エディタ(入力方法)として設定します。「属性エディタ」ドロップダウン・リストで、CK_FSIIAbstractを選択します。
-
「保存」をクリックします。
-
-
新しいCKEditorインスタンスをテストするには、Oracle WebCenter Sites: Contributorインタフェースに切り替え、任意の「コンテンツ」アセットを探して、そのアセットを「編集」ビューで開きます。
-
「検索」フィールドで、下矢印をクリックして「検索タイプ」メニューを開きます。「検索タイプ」メニューで、コンテンツの検索を選択します。次に、虫めがねアイコンをクリックします。
「検索」タブが開き、検索結果が表示されます。
-
アセット・タイプのリストで、目的の
Content
アセットに移動し(この例ではFSIIAbout)、そのアセットを右クリックして、コンテキスト・メニューから「編集」を選択します。タブが開いて、そのアセットが「編集」ビューに表示されます。
-
「概要」フィールドに移動して、フィールドをクリックします。
CKEditorが表示されない場合は、属性エディタのXMLコードと、「属性エディタ」ドロップダウン・リストで選択した内容を確認してください。
-
アセットのツールバーで、「調査」アイコンをクリックして、アセットの「調査」ビューを表示します。
-
10.1.3 CKEditorをWebモードで使用可能にする方法
ユーザーがWebモードでCKEditorを使用してアセットを編集できるようにするには、次の表に示すように、パラメータeditor
とparams
を適切なテンプレート内のinsite:edit
タグで設定します。編集するコードが含まれたテンプレートは、Webモードで使用するCKEditorが属するアセット用であるか、そのアセットと関連付けられたアセット・タイプ用である必要があります。
表10-1 CKEditorをWebモードで使用可能にするパラメータ
タグ | パラメータ | 値 | 説明 |
---|---|---|---|
|
|
|
使用するエディタの名前を指定します。 |
なし |
|
|
Webモードで使用するCKEditorのIDを指定します。 |
なし |
なし |
|
CKEditorツールバーでリンク・アイコンを有効にします。 |
この例は、CKEditorをWebモードで使用可能にするための必須のパラメータを示しています。
例10-1 CKEditorをWebモードで使用可能にするためのコード
<ics:listget listname='BodyList' fieldname="value" output="Body" /> <div id="body"> <insite:edit assetid='<%=ics.GetVar("cid")%>' assetfield='<%='Attribute_"+ics.GetVar("BodyAttrName")%>' assetfieldvalue='<%=ics.GetVar("Body")%>' assettype='<%=ics.GetVar("c")%>' editor='ckeditor' params="{enableEmbeddedLinks:'1'}"/> </div>
ノート:
insite:edit
タグでCKEditorの幅と高さが指定されていない場合は、CKEditorは、自身のXMLコードで設定されたXSIZE
とYSIZE
を使用します。『Oracle WebCenter Sitesリファレンス・タグ・リファレンス』を参照してください。
insite:edit
タグは、次のいずれかの方法で編集できます。
-
適切なテンプレート内の「エレメント・ロジック」フィールド。テンプレートの「エレメント・ロジック」フィールドで作業するには:
-
Adminインタフェースを開きます。
-
「検索」(ボタン・バー上)をクリックし、テンプレートの検索→「検索」を選択して、テンプレート名を選択します。
-
テンプレートの「編集」フォームで、「エレメント」タブを選択して、「エレメント・ロジック」フィールドに移動します。
-
-
Oracle WebCenter Sites Explorer。
-
任意のテキスト・エディタ。
10.1.4 選択したアセット・タイプをCKEditorで使用可能にする方法
ユーザーが使用できるアセット・タイプを限定するには、ALLOWEDASSETTYPES
パラメータをCKEditorのXMLコードに追加します。このパラメータの値として、使用可能にするアセット・タイプの名前をカンマ区切りリストの形式で指定します。
アセット・タイプをCKEditorで使用可能にするには:
-
Adminインタフェースを開きます。
-
「編集」フォームで属性エディタ(名前はCKEditor)を探して開きます。
-
ボタン・バーで、「検索」をクリックします。
-
「検索」フォームで、「属性エディタの検索」を選択します。
-
属性エディタの検索フォームで、検索条件(存在する場合)を入力して、「検索」をクリックします。
-
検索結果のリストで、CKEditorアセットに移動し、その「編集」(鉛筆)アイコンをクリックします。
-
-
「XML」フィールドに移動して、
ALLOWEDASSETTYPES
パラメータを<CKEDITOR>
タグに追加します。次に、次の例に示すように、使用可能にするアセット・タイプの名前をALLOWEDASSETTYPES
パラメータの値として指定します。<?XML VERSION="1.0"?> <!DOCTYPE PRESENTATIONOBJECT SYSTEM "presentationobject.dtd"> <PRESENTATIONOBJECT NAME="CKEDITORTEST"><CKEDITOR WIDGET="580" HEIGHT="200" IMAGEPICKERID="1112668339899" ALLOWEDASSETTYPES="MEDIA_C,CONTENT_C,PRODUCT_C,DOCUMENT_C"> </CKEDITOR></PRESENTATIONOBJECT>
ALLOWEDASSETTYPES
パラメータは、追加のパラメータとして<CKEDITOR>
タグに追加されます。このパラメータの値は、ユーザーが新しいアセットを作成できるアセット・タイプを指定します。 -
「変更の保存」をクリックして、アセットを保存します。
-
ALLOWEDASSETTYPES
パラメータをテストします。-
Contributorインタフェースに切り替えます。
-
CKEditor対応のフィールドを持つアセットを探してWebモードで開きます。
-
「検索」フィールドで、検索条件を指定して、虫めがねアイコンをクリックします。
「検索」タブが開き、検索結果が表示されます。
-
アセットの名前をクリックして、そのアセットの「調査」ビューを開きます。
-
そのアセットがフォーム・モードで開かれた場合は、アセットのツールバーで「モード」スイッチをクリックして、Webモードに切り替えます。
-
アセットのツールバーで、「編集」アイコンをクリックします。
-
-
いずれかの許可されたアセット・タイプを指定して検索します。許可されたアセットが固定された検索結果リストに表示されたら、その許可されたアセットをCKEditorにドラッグします。
ALLOWEDASSETTYPES
パラメータで指定したタイプの許可されたアセットがまったくない場合は、「コンテンツ」→「新規」を選択して、新しいアセットを作成します。そのアセットを指定して検索して、そのアセットをドックからCKEditorにドラッグします。
-
10.1.5 組み込まれたアセットの承認依存性を設定する方法
「アセットを含む」アイコンと「新規アセットの作成および包含」アイコンを使用すると、ユーザーは単一のアセットを別のアセットのCKEditor対応フィールドに組み込むことができます。組み込まれたアセットは、そのフィールドでプレビュー可能になり、最終的には、メイン・アセットの表示内容にオンラインで埋め込まれます。
メイン・アセットと組み込まれたアセットが初めてパブリッシュされた後に、これらのアセット間の依存性によって、後続の承認とパブリッシュがどのように機能するのかが決定されます。この依存性は、CKEditorのXMLコード内のDEPTYPE
パラメータによって定義されます。
DEPTYPE
パラメータは、EXISTS
またはEXACT
に設定できます。DEPTYPE
パラメータが明示的に設定されていない場合は、デフォルトでEXACT
が使用されます。
-
EXISTS
: メイン・アセットが編集、承認および再パブリッシュされたときに、いずれかのバージョンの組み込まれたアセットがパブリッシュ先に存在している場合は、組み込まれたアセットが承認および再パブリッシュされる必要はありません。 -
EXACT
: メイン・アセットが編集、承認および再パブリッシュされたときに、組み込まれたアセットが編集されていた場合は、組み込まれたアセットも承認および再パブリッシュされる必要があります。
組み込まれたアセットの承認依存性を定義するには:
-
Adminインタフェースを開きます。
-
「編集」フォームで属性エディタ(名前はCKEditor)を探して開きます。
-
ボタン・バーで、「検索」をクリックします。
-
「検索」フォームで、「属性エディタの検索」を選択します。
-
属性エディタの検索フォームで、検索条件(存在する場合)を入力して、「検索」をクリックします。
-
検索結果のリストで、CKEditorアセットに移動し、その「編集」(鉛筆)アイコンをクリックします。
-
-
「XML」フィールドに移動して、次の例に示すように、
DEPTYPE
パラメータを<CKEDITOR>
タグに追加して、DEPTYPE
パラメータの値をEXISTS
またはEXACT
に設定します。<?XML VERSION="1.0"?> <!DOCTYPE PRESENTATIONOBJECT SYSTEM "presentationobject.dtd"> <PRESENTATIONOBJECT NAME="CKEditorTest"><CKEDITOR WIDTH="580" HEIGHT="200" DEPTYPE="EXISTS"></CKEDITOR> </PRESENTATIONOBJECT>
DEPTYPE
パラメータは、追加のパラメータとして<CKEDITOR>
タグに追加されます。 -
「変更の保存」をクリックして、アセットを保存します。
10.1.6 CKEditorツールバーをカスタマイズする方法
CKEditorのツールバーで使用できる機能と、それらの配置をカスタム構成ファイルでカスタマイズできます。
カスタムのconfig.js
ファイルでCKEditorツールバーをカスタマイズするには:
-
CKEditorは次の2つの方法でカスタマイズできます。
-
オプション1: ドキュメント2168947.1の指示に従ってWebCenter Sites 12.2.1パッチ2以上にアップグレードする場合は、次のステップに従います。
-
WebLogic管理対象サーバーの「サーバーの起動」タブで、
-Dsites.config
JVMパラメータがWebCenter Sites configフォルダを指すように設定されていることを確認します。 -
<sites.config>
フォルダに、ckeditor
フォルダを作成します。 -
sites.war/ckeditor/config.js
を<sites.config>/ckeditor
フォルダにコピーします。 -
カスタマイズを
<sites.config>/ckeditor/config.js
ファイルに追加します。たとえば、次のカスタマイズを追加して外部プラグインにロードできます。//load external plugin (function() {CKEDITOR.plugins.addExternal('','<plugin is accessible>', 'plugin.js'); })();
外部プラグインの例:(function() {CKEDITOR.plugins.addExternal('myExternalPlugin','http://hostname:port/staticResources/ckeditor/myExternalPlugin', 'plugin.js'); })();
-
ckeditor/getConfig
ページをフラッシュします。 -
ブラウザ・キャッシュをクリアし、古い
config.js
ファイルのキャッシュを削除します。
-
-
オプション2: WebCenter Sites 12.2.1.1以上では、様々な名前の複数のカスタムCKEditor configファイルを
extend.sites.webapp-lib.war
のckeditor
フォルダに配置できます。複数のCKEditor XML定義を作成できます(各定義のCONFIG
パラメータは、それぞれ異なるCKEditor configファイルを参照します)。-
WebLogic管理対象サーバーをシャットダウンします。
-
sites-home/extend.sites.webapp-lib.war
ライブラリ・ファイルをバックアップします。 -
sites-home/extend.sites.webapp-lib.war
ファイルJARを一時フォルダに展開します。 -
ckeditor
フォルダで、様々な名前のカスタムCKEditor configファイルを追加します(カスタム構成が含まれるconfig1.js
など)。 -
一時フォルダJARを
sites-home/extend.sites.webapp-lib.war
として再作成します。 -
WebLogicコンソールの「デプロイメント」セクションで、更新された
sites-home/extend.sites.webapp-lib.war
ファイルでextend.sites.webapp-lib
ライブラリを更新します。 -
WebLogic管理対象サーバーを起動します。
-
WebCenter SitesのAdminインタフェースで、CKEditor xml定義について、
CONFIG
パラメータを使用してカスタムconfig1.js
ファイルを参照できます。次に例を示します。<?XML VERSION="1.0"?><!DOCTYPE PRESENTATIONOBJECT SYSTEM "presentationobject.dtd"> <PRESENTATIONOBJECT NAME="FCKEditorTest"><CKEDITOR WIDTH="580px" HEIGHT="200px" CONFIG="config1.js"></CKEDITOR> </PRESENTATIONOBJECT>
-
-
-
Contributorインタフェース用にツールバーをカスタマイズするには(フォーム・モード用とWebモード用):
-
ツールバーをContributorインタフェース用にカスタマイズするには、
<sites.config>/ckeditor/config.js
のconfig.toolbar_SITES
を検索します。 -
ツールバーをWebモード用にカスタマイズするには、
<sites.config>/ckeditor/config.js
のconfig.toolbar_SITES_WEB
を検索します。
-
-
変更を加えます。ツールバー定義の構文については、CKEditorのドキュメントを参照してください。
-
保存してファイルを閉じます。
-
WebCenter Sitesのアプリケーションを再デプロイし、アプリケーション・サーバーを再起動して、変更内容を適用します。
インスタンス単位でCKEditorツールバーをカスタマイズするには:
-
カスタム・ツールバー定義を作成します。
-
カスタム構成ファイルをテキスト・エディタで開きます。
<sites.config>/ckeditor/config.js
-
新しいツールバー定義をファイルに追加します。カスタム・ツールバー定義の作成方法については、CKEditorのドキュメントを参照してください。
config.toolbar_<toolbardef> = [ [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ], { name: 'links', items: [ 'Link', 'Unlink', 'Anchor' ] }, { name: 'basicstyles', items: [ 'Bold', 'Italic', 'Underline','Strike','-','Subscript','Superscript' ] }, { name: 'colors', items: [ 'TextColor', 'BGColor' ] }, { name: 'tools', items: [ 'Maximize', 'ShowBlocks' ] } ];
<toolbarDef>
の値は、カスタム・ツールバー定義の名前です。この名前は、このカスタム定義を使用するようにCKEditorインスタンスを変更する際に使用します。
-
-
カスタム・ツールバー定義を使用するように、CKEditorインスタンスを変更します。
-
Adminインタフェースを開きます。
-
CKEditorインスタンスを検索します。
-
ボタン・バーで、「検索」をクリックします。
-
アセット・タイプのリストで、「属性エディタの検索」をクリックします。
-
「検索」フィールドに、CKEditorインスタンスが保持されているアセットの名前を入力して、「検索」をクリックします。
-
検索結果のリストで、アセットに移動して、その「編集」(鉛筆)アイコンをクリックします。
-
-
「XML」フィールドで、属性エディタ・コードを次のように変更します。
-
次の太字で強調表示されている行を探します。
<?XML VERSION="1.0"?> <!DOCTYPE PRESENTATIONOBJECT SYSTEM "presentationobject.dtd"> <PRESENTATIONOBJECT NAME="CKEditorCustomized"> <CKEDITOR WIDTH="400" HEIGHT="200"> </CKEDITOR></PRESENTATIONOBJECT>
-
TOOLBAR
パラメータを<CKEDITOR>
タグに追加します。TOOLBAR="<toolbarDef>"
-
この
TOOLBAR
パラメータでは、ステップ1で作成したカスタム・ツールバー定義の名前を指定します。 -
変更後の行は次のようになります。
<CKEDITOR WIDTH="400" HEIGHT="200" TOOLBAR="<toolbarDef>">
-
-
「変更の保存」をクリックして、アセットを保存します。
-
-
WebCenter Sitesのアプリケーションを再デプロイし、アプリケーション・サーバーを再起動して、変更内容を適用します。
CKEditorの構成の詳細は、CKEditorのドキュメントを参照してください。
10.1.7 CKEditorでスペル・チェック・サポートを構成する方法
CKEditorスペル・チェッカの使用および構成の手順は、次のURL (http://docs.cksource.com/CKEditor_3.x/Users_Guide/Spell_Checking
)にアクセスしてください。
10.2 Clarkii Online Image Editorの構成
Clarkii Online Image Editor (Clarkii OIE)は、InDis Baltic社が提供しているサード・パーティのイメージ・エディタであり、WebCenter Sitesがサポートされているすべてのブラウザ(Safariを含む)でサポートされています。各アセット・タイプのフィールド単位でClarkii OIEの個別のインスタンスを構成したり、単一のインスタンスを複数のアセット・タイプのフィールドに関連付けることができます。
次の図は、Clarkii OIEの固有コントロールと、Clarkii OIEが有効化されている属性内のイメージを操作するためのWebCenter Sites側の機能を示しています。
図10-1 アセットのフォームのフィールド内にレンダリングされたClarkii Online Image Editor
![図10-1の説明が続きます 図10-1の説明が続きます](img/l_imageeditoroverview.gif)
「図10-1 アセットのフォームのフィールド内にレンダリングされたClarkii Online Image Editor」の説明
この機能を構成して有効にする前に、次のことに注意してください。
-
Clarkii OIEは、フレックス属性のみに対して有効にできます。この項の説明では、FirstSiteIIサンプル・サイトのMediaフレックス・ファミリを例として使用しています。
-
Clarkii OIEは、
blob
型の属性のみに対して有効にできます。 -
Clarkii OIEを有効にしたフィールドでClarkii OIEをレンダリングするためには、Flashがクライアント・ブラウザにインストールされている必要があります。
ノート:
Clarkii OIEのツールバーとメニューの機能をカスタマイズできます。これらの機能はClarkii OIEと深く関連しているため、これらの機能については説明していません。Clarkii OIE固有の機能の構成方法については、次のURLにアクセスしてください。
トピック:
10.2.1 Clarkii OIEインスタンスの作成方法とフィールドに対して有効化する方法
Clarkii OIEのインスタンスを作成して、このインスタンスをフレックス属性アセットに対して有効にします。この手順は、FirstSiteIIサンプル・サイトに基づいています。
この例では、新しいClarkii OIEインスタンスを、FSII_ImageFileフィールドの属性エディタとして有効にします。FSII_ImageFile
は、サンプルのMedia
アセット・タイプの属性です。
-
Adminインタフェースを開きます。
-
Clarkii OIEインスタンスを作成します。
-
ボタン・バーで、「新規」をクリックします。
-
アセット・タイプのリストで、「新規属性エディタ」をクリックします。
WebCenter Sitesに、新規属性エディタ・フォームが表示されます。
-
「名前」フィールドに、このClarkii OIEインスタンスを一意に識別する名前を入力します(この例では、
ClarkiiOIE
と入力します)。 -
「XML」フィールドで、次のコードを貼り付けます。
ノート:
-
各パラメータの詳細は、「Clarkii OIEのプロパティを構成する方法」の表を参照してください。
-
属性エディタには、次のXMLコードに含まれるようなボタンを含める必要があります。そうしないと、空白ページが「編集」フォームに表示されます。
<?XML VERSION="1.0"?> <!DOCTYPE PRESENTATIONOBJECT SYSTEM "presentationobject.dtd"> <PRESENTATIONOBJECT NAME="editor"> <IMAGEEDITOR EDITORTYPE="clarkii" HEIGHT="500" WIDTH="600" MAXHEIGHT="650" MAXWIDTH="900" FITIMAGE="true" ENABLEOIEFORMAT="true" DEFAULTTEXTFONT="Arial" DEFAULTTEXTSIZE="18" DEFAULTTEXTCOLOR="#000000" ENABLEIMAGEPICKER="true" ASSETTYPE="Media_C" ATTRIBUTE="FSII_ImageFile" ATTRIBUTETYPE="Media_A" CATEGORYATTRIBUTE="" RESTRICTEDCATEGORYLIST="" OIEASSETTYPE="Media_C" OIEATTRIBUTE="FSII_ImageFile" OIEATTRIBUTETYPE="Media_A" OIECATEGORYATTRIBUTE="" OIERESTRICTEDCATEGORYLIST="" OIEENABLEIMAGEPICKER="true" TAGEDIT="true"> <BUTTONS> <BUTTON NAME="New" VISIBLE="true"/> <BUTTON NAME="Open" VISIBLE="true"/> <BUTTON NAME="Scan" VISIBLE="false"/> <BUTTON NAME="Save" VISIBLE="true"/> <BUTTON NAME="Copy" VISIBLE="true"/> <BUTTON NAME="Paste" VISIBLE="true"/> <BUTTON NAME="Undo" VISIBLE="true"/> <BUTTON NAME="Redo" VISIBLE="true"/> <BUTTON NAME="Brush" VISIBLE="true"/> <BUTTON NAME="Eraser" VISIBLE="true"/> <BUTTON NAME="FixRedEye" VISIBLE="true"/> <BUTTON NAME="Open" VISIBLE="true"/> <BUTTON NAME="Grid" VISIBLE="true"/> <BUTTON NAME="FlattenLayers" VISIBLE="true"/> <BUTTON NAME="Help" VISIBLE="true"/> <BUTTON NAME="ImageMenu" VISIBLE="true"/> <BUTTON NAME="ImageRotateLeft" VISIBLE="true"/> <BUTTON NAME="ImageRotateRight" VISIBLE="true"/> <BUTTON NAME="ImageMirror" VISIBLE="true"/> <BUTTON NAME="ImageCrop" VISIBLE="true"/> <BUTTON NAME="ImageResample" VISIBLE="true"/> <BUTTON NAME="ImageResizeCanvas" VISIBLE="true"/> <BUTTON NAME="ColorMenu" VISIBLE="true"/> <BUTTON NAME="ColorGrayScale" VISIBLE="true"/> <BUTTON NAME="ColorBrightnessContrast" VISIBLE="true"/> <BUTTON NAME="SharpenBlurMenu" VISIBLE="true"/> <BUTTON NAME="InsertMenu" VISIBLE="true"/> <BUTTON NAME="InsertImage" VISIBLE="true"/> <BUTTON NAME="InsertRectangle" VISIBLE="true"/> <BUTTON NAME="InsertEllipse" VISIBLE="true"/> <BUTTON NAME="InsertLineArrow" VISIBLE="true"/> <BUTTON NAME="InsertRichText" VISIBLE="true"/> <BUTTON NAME="InsertTextAlongPath" VISIBLE="true"/> <BUTTON NAME="HSL" VISIBLE="true"/> <BUTTON NAME="EmbossLight" VISIBLE="true"/> <BUTTON NAME="EmbossMedium" VISIBLE="true"/> <BUTTON NAME="EmbossDark" VISIBLE="true"/> <BUTTON NAME="OilPaint" VISIBLE="true"/> <BUTTON NAME="WaterColor" VISIBLE="true"/> <BUTTON NAME="Mosaic" VISIBLE="true"/> <BUTTON NAME="Patchwork" VISIBLE="true"/> <BUTTON NAME="BrickTexture" VISIBLE="true"/> </BUTTONS> </IMAGEEDITOR> </PRESENTATIONOBJECT>
-
-
「保存」をクリックします。
-
-
Clarkii OIEインスタンスを、特定のアセット・タイプの属性の属性エディタとして有効にします。この例では、
Media
アセット・タイプのFSII_ImageFile
属性を使用します。-
「編集」フォームで、属性アセットを探して開きます。この例では、
FSII_ImageFile
属性を探して開きます。-
ボタン・バーで、「検索」をクリックします。
-
アセット・タイプのリストで、属性アセットのアセット・タイプをクリックします。この例では、「メディア属性の検索」をクリックします。
-
「検索」フィールドで、変更する属性アセットの名前を入力します。この例では、
FSII_ImageFile
と入力します。 -
「検索」をクリックします。
-
検索結果のリストで、属性アセット(
FSII_ImageFile
)に移動し、その「編集」(鉛筆)アイコンをクリックします。WebCenter Sitesの「編集」フォームにアセットが表示されます。
-
-
Clarkii OIEをこの属性アセットの属性エディタとして設定します。
-
「値タイプ」フィールドで、blobが選択されていることを確認します。
ノート:
Clarkii OIEには、
blob
型の属性値が必要です。属性アセットを保存すると、その後、「値タイプ」フィールドで選択した値は変更できません。 -
「属性エディタ」ドロップダウン・リストで、ステップ2で作成したClarkii OIEインスタンスを選択します。
-
-
「変更の保存」をクリックします。
-
-
新しいClarkii OIEインスタンスをテストするには:
-
Contributorインタフェースを開きます。
-
ステップ3で変更した属性をフィールドとして指定している定義を含む任意のアセットを検索して、そのアセットを「編集」フォームで開きます。この例では、
Media
アセットを選択します。-
「検索」フィールドに、検索条件を入力します。
-
検索範囲を特定のアセット・タイプに絞り込むには、「検索」フィールドの下矢印をクリックして、「検索タイプ」ドロップダウン・リストを開きます。Clarkii OIEインスタンスに対応したフィールドを使用しているアセット・タイプをクリックします。この例では、「メディアの検索」を選択します。
-
虫めがねアイコンをクリックします。
「検索」タブが開き、検索結果のリストが表示されます。
-
検索結果のリストで、選択するアセットを右クリックします。この例では、FSII AudioCo_iAC-008.jpgメディア・アセットを選択し、「編集」を選択します。
WebCenter Sitesの「編集」フォームにアセットが表示されます。
-
-
Clarkii OIEで有効なフィールドに移動します。この例では、FSII_ImageFileフィールドになります。これは次の図のようになります。
Clarkii OIEをフィールドでレンダリングするには、次のいずれかを行います。
-
Flashがインストールされていることを確認します。
-
作成したClarkii OIEインスタンスのXMLコードを確認します(ステップ2のdを参照)。
-
Clarkii OIEを属性エディタとして有効にした属性アセットで選択した内容を確認します(ステップ3のbを参照)。
-
-
「取消」をクリックして、このアセットの「調査」フォームに戻ります。
-
10.2.2 Clarkii OIEのプロパティを構成する方法
次の表では、Clarkii OIE属性エディタ・アセットの作成時に指定できるすべてのプロパティを列挙して説明しています。これらの表は、サイトの設計に合せて独自のClarkii OIEインスタンスのプロパティを構成するためのリファレンスとして使用してください。
表10-2 Clarkii OIEの指定
プロパティ | 定義 |
---|---|
|
特定アセットのフォームの属性フィールドに表示される際の、Clarkii OIE領域の高さを指定します。 推奨値: |
|
特定アセットのフォームの属性フィールドに表示される際の、Clarkii OIE領域の幅を指定します。 推奨値: |
|
使用するイメージ・エディタのタイプを指定します。Clarkii OIEを有効にするには、このプロパティを次のように指定する必要があります。
|
|
このプロパティを 可能な値: |
表10-3 「イメージの参照」ボタンの指定
プロパティ | 定義 |
---|---|
|
「イメージの参照」ボタンを有効にします。ユーザーはこのボタンを使用して、Clarkii OIEキャンバス上の既存のイメージを任意のイメージに置換できます。このボタンをクリックすると、イメージ・ピッカー・ウィンドウが開きます。 可能な値: ノート: このプロパティを |
|
「イメージの参照」ボタンがクリックされたときに「イメージ・ピッカー」ウィンドウに表示されるイメージ・アセットのアセット・タイプを指定します。 可能な値: イメージを格納するための 例: |
|
「イメージの参照」ボタンがクリックされたときに「イメージ・ピッカー」ウィンドウに表示される、イメージ・アセットのイメージ・ファイル属性を指定します。 可能な値: イメージを格納するための 例: |
|
可能な値: 例: |
|
「イメージ・ピッカー」ウィンドウに表示されるイメージ・アセットを(理想的にはそれらの親アセットの名前に基づいて)分類する値が保持されている 「イメージの参照」ボタンをクリックすると、ユーザーは「カテゴリ」ドロップダウン・リストを使用して、これらの属性値のいずれかを選択することで、イメージ・ピッカー・ウィンドウに表示されるイメージをフィルタリングできます。選択された属性値に一致するイメージのみが、「イメージ・ピッカー」ウィンドウにレンダリングされます。 ノート: このプロパティの値を指定しない場合は、 |
|
カンマ区切りリストの形式で、 可能な値: ノート: |
表10-4 「イメージの挿入」ボタンの指定
プロパティ | 定義 |
---|---|
|
「イメージの挿入」ボタンがクリックされたときに「イメージ・ピッカー」ウィンドウに表示される、イメージ・アセットのイメージ・ファイル属性を指定します。 可能な値: イメージを格納するための 例: |
|
可能な値: 例: |
|
「イメージ・ピッカー」ウィンドウに表示されるイメージ・アセットを(理想的にはそれらの親アセットの名前に基づいて)分類する値が保持されている 「イメージの挿入」ボタンをクリックすると、ユーザーは「カテゴリ」ドロップダウン・リストを使用して、これらの属性値のいずれかを選択することで、イメージ・ピッカー・ウィンドウに表示されるイメージをフィルタリングできます。選択された属性値に一致するイメージのみが、「イメージ・ピッカー」ウィンドウにレンダリングされます。 ノート: このプロパティの値を指定しない場合は、 |
|
カンマ区切りリストの形式で、 可能な値: ノート: |
|
「イメージの挿入」ボタンを有効にします。ユーザーはこのボタンを使用して、Clarkii OIEキャンバス上の既存イメージの最上位層としてイメージを挿入できます。このボタンをクリックすると、イメージ・ピッカー・ウィンドウが開きます。 可能な値: ノート: このプロパティを |
|
「イメージの挿入」ボタンがクリックされたときに「イメージ・ピッカー」ウィンドウに表示される、イメージ・アセットのアセット・タイプを指定します。 可能な値: イメージを格納するための 例: |
10.2.3 アセットを分類するためにフィールド・コピアー・フィルタを実装する方法
イメージ・アセットをその親アセットの名前に基づいて分類するには、フィールド・コピアー・フィルタを使用します。次の図は、FirstSiteIIサンプル・サイトのMedia
フレックス・ファミリを使用して、フィールド・コピアー・フィルタを実装する方法を例示しています。この例のフィールド・コピアー・フィルタは、親アセットのシステム定義のName
属性の値をユーザー定義のstring
属性にコピーします。
既存の属性の値が上書きされることを防止するには、フィールド・コピアーによってコピーされるシステム定義属性の値を保持するための新しいstring
属性(FSII_ImageParentName
)を作成します。フレックス・フィルタ・クラスを参照してください。
フィールド・コピアー・フィルタを使用するには:
-
Adminインタフェースを開きます。
-
フィールド・コピアー・フィルタの入力として使用する値を持つシステム定義属性を特定するとともに、フィールド・コピアーによってこのシステム定義属性の値がコピーされる先となるユーザー定義の
string
属性を特定します。既存の属性の値が上書きされないようにするには、string
型のフレックス属性を作成します(この例ではFSII_ImageParentName
)。 -
FieldCopier
型のフィルタを作成します(この例ではFSII_ImageParentNameCopier
)。-
ボタン・バーで、「新規」をクリックします。
-
アセット・タイプのリストで、「新規メディア・フィルタ」をクリックします。
「新規メディア・フィルタ」フォームが表示されます。
-
「名前」フィールドで、このフィルタの一意の名前を入力します(この例では、
FSII_ImageParentNameCopier
を使用)。 -
「フィルタ」フィールドで、ドロップダウン・リストからFieldCopierを選択します。次に「引数の取得」をクリックします。
-
「名前」ドロップダウン・リストで、フィールド・コピアー・フィルタの入力値として使用する値を持つシステム定義属性を選択します(この例では「名前」)。
-
「値」フィールドで、指定したシステム定義属性の値がフィールド・コピアー・フィルタによってコピーされる先となるユーザー定義属性の名前を入力します(この例では
FSII_ImageParentName
)。
-
-
「追加」をクリックして、フィルタに引数を追加します。
-
「保存」をクリックして、フィルタを保存します。
-
-
親(または子)定義を探して、新しいフィールド・コピアー・フィルタをその定義に追加します(この例では、フィールド・コピアー・フィルタを
FSII_ImageCategory
というMedia
親定義に追加します)。-
ボタン・バーで、「検索」をクリックします。
-
アセット・タイプのリストで、「メディア親定義の検索」を選択します。
-
「検索」フィールドで、フィールド・コピアー・フィルタを追加する先となる親定義の名前を入力します(
FSII_ImageCategory
)。 -
「検索」をクリックします。
-
検索結果のリストで、親(または子)定義に移動して、その「編集」(鉛筆)アイコンをクリックします。
-
親(または子)定義の「編集」フォームで「フィルタ」セクションに移動して、ステップ3で作成したフィールド・コピアー・フィルタを選択します。
-
「変更の保存」をクリックします。
-
-
フィールド・コピアー・フィルタ(
FSII_ImageParentNameCopier
)を追加した定義と関連付けられたすべての既存の親(または子)アセットを探して再保存します。これにより、このフィルタはユーザー定義属性(FSII_ImageParentName
)に、システム定義属性(「名前」
)の値を格納できるようになります。このフィルタを親定義に追加した場合、関連付けられた親アセットのすべての子は、フィールド・コピアー・フィルタによってユーザー定義属性(この例では
FSII_ImageParentName
)にコピーされた値を内部で継承します。
10.3 イメージ・ピッカーの構成
イメージ・ピッカー属性エディタのインスタンスを構成するときには、XML定義にいくつかのパラメータの値を指定する必要があります。
この表では、それらのパラメータについて説明します。
表10-5 イメージ・ピッカーのパラメータ
パラメータ | 説明 |
---|---|
|
このイメージ・ピッカー・インスタンスで表示されるイメージ・アセットのアセット・タイプ。 例: |
|
選択されたイメージ・アセット・タイプ内のイメージ・ファイル属性のアセット・タイプ。 例: |
|
選択されたイメージ・アセット・タイプ内のイメージ・ファイル属性の名前。 例: |
|
(オプション)選択されたイメージ・アセット・タイプ内のカテゴリ属性の名前。 例: |
|
選択されたイメージ・アセット・タイプ内のカテゴリ属性の値で構成されるカンマ区切りリストを指定します。このリストに含まれる値は、イメージ・ピッカー・ウィンドウの「カテゴリ」ドロップダウン・リストに表示されます。このパラメータを省略した場合、イメージ・ピッカーは選択されたイメージ・アセット・タイプに属するすべてのアセットを表示します。 例: |
イメージ・ピッカー定義のサンプルXMLコードは「イメージ・ピッカー属性エディタ定義のコードを作成する方法」に記載されています。新しい属性エディタ(イメージ・ピッカーの新規インスタンスなど)の作成手順は、「属性エディタの作成」を参照してください。アセット・フォーム内のフィールドの入力方法(イメージ・ピッカーなど)の選択手順は、「フレックス・アセット・ファミリの作成」の「フレックス属性の作成」を参照してください。
トピック:
10.3.1 イメージ・ピッカーに表示するイメージ・アセットを分類する方法
前の項で説明したCATEGORYATTRIBUTENAME
パラメータとRESTRICTEDCATEGORYLIST
パラメータを使用すると、選択されたイメージ・アセット・タイプに属する選択されたカテゴリのアセットのみがイメージ・ピッカーのインスタンスによって表示されるように制限できます。この作業を実行する前に、次の条件が満たされている必要があります。
-
string
型のカテゴリ属性を、選択されたアセット・タイプ内の各アセットのカテゴリ記述子を格納することになるフレックス定義または選択されたイメージ・アセット・タイプに追加する必要があります。イメージ・ピッカーはこの属性の値を使用して、自身が表示できるアセット・カテゴリのリストを生成します。属性の作成の手順は、「フレックス・アセット・ファミリの作成」の「フレックス属性の作成」を参照してください。 -
開発者またはコンテンツ・プロバイダは、選択されたイメージ・アセット・タイプの各アセットのカテゴリ・フィールドに適宜入力する必要があります。カテゴリが割り当てられていないアセットは、カテゴリ制限されたイメージ・ピッカー・インスタンスによって表示されません。
10.3.2 イメージ・ピッカー属性エディタ定義のコードを作成する方法
参考のために、イメージ・ピッカー属性エディタのサンプルXML定義を次に示しています。このサンプルを通じて、システム上でイメージ・ピッカーを構成する方法を理解してください。
<?XML VERSION="1.0"?> <!DOCTYPE PRESENTATIONOBJECT> <PRESENTATIONOBJECT NAME="ImagePicker"> <IMAGEPICKER> ASSETTYPENAME="Media_C" ATTRIBUTETYPENAME="Media_A" ATTRIBUTENAME="FSII_ImageFile" CATEGORYATTRIBUTENAME="FSII_ImageCategory" RESTRICTEDCATEGORYLIST="Audio,Video"> </IMAGEPICKER> </PRESENTATIONOBJECT>
属性エディタの作成を参照してください。
10.4 Oracle Content and Experienceアセット・ピッカーの構成
コンテンツ・コントリビュータがWebCenter SitesでOracle Content and Experience Webインタフェースを使用できるようにするには、少なくとも1つの属性エディタを作成し、少なくとも1つの属性をエディタに関連付ける必要があります。
10.4.1 Oracle Content and Experienceアセット・ピッカー属性エディタ定義コードの作成方法
アセットおよびデジタル・アセット・タイプを属性タイプとして使用して属性エディタを作成でき、検索パラメータを含めることもできます。
10.4.2 フィールドに対してOracle Content and Experienceアセット・ピッカーを有効にする方法
アセット・ピッカーを作成したら、Contributorインタフェースでアセットにアクセスできるように、必要なフィールドに対して有効にする必要があります。
- Adminインタフェースを開きます。
- アセット・ピッカーに関連付ける属性を見つけて開きます。
- その編集フォームのボタン・バーで、「検索」をクリックします。
- 検索フォームで、属性の検索を選択します。
- 属性の検索フォームで、検索条件(存在する場合)を入力して、「検索」をクリックします。
- 検索結果のリストで、アセット・ピッカーに関連付ける属性に移動し、その「編集」(鉛筆)アイコンをクリックします。
- 属性フォームで、「編集」(鉛筆)アイコンをクリックしてフォームを編集モードで開きます。
- 「属性エディタ」ドロップダウン・リストで、アセット・ピッカーを選択し、「保存」をクリックします。