プライマリ・コンテンツに移動
Oracle® Fusion Middleware Oracle WebCenter Sitesでの開発
12c (12.2.1)
E72540-01
目次へ移動
目次
前
前 		次
次

10 付属の属性エディタの構成

WebCenter Sitesでは、CKEditor、Clarkii Online Image Editorおよびイメージ・ピッカーを構成できます。

次の各項目では、WebCenter Sitesに付属している属性エディタのインスタンスを構成する方法について説明します。

10.1 CKEditorの構成

CKEditorは、CKSource社製のオープン・ソースWYSIWYGテキスト・エディタであり、クライアント側にインストールしておく必要はありません。CKEditorは、WebCenter Sitesに付属しています。FirstSiteIIサンプル・サイトでは、WYSIWYG対応のテキスト・フィールドが含まれた特定のアセット・タイプは、デフォルトでCKEditorを使用するように構成されています。

この項には次のトピックが含まれます:

10.1.1 始める前に

Internet ExplorerでCKEditorを使用している場合に、WebCenter Sitesがcp1252文字セットを使用するように構成されている場合は、次の手順に従い、CKEditorがInternet Explorerで正しく動作するようにしてください。

  1. Adminインタフェースで、プロパティ管理ツールを開いて、cs.contenttypeプロパティの値をメモします。
  2. Exploreにログインします。
  3. SiteCatalog\OpenMarket\xcelerate\Actions\CKEditorRendererエレメントにアクセスして、そのresargs1フィールドを次の値に設定します。

    cs.contenttype=[your content type]; charset=windows-1252

    ここで、[your content type]には、プロパティ管理ツールからメモした値を指定します。

10.1.2 CKEditorインスタンスの作成方法とフィールドに対して有効化する方法

この手順では、CKEditorのインスタンスを作成して、FirstSiteIIサンプルに基づいてこのインスタンスをフレックス・アセット属性に対して有効にする方法を説明します。

この例では、新しいCKEditorインスタンスをFSIIAbstractフィールドの入力方法(属性エディタ)として有効にします。(FSIIAbstractは、Contentというサンプル・アセット・タイプのフレックス属性です。)

CKEditorインスタンスを作成して有効にする手順:

  1. Adminインタフェースを開きます。

  2. CKEditorインスタンスを作成します。

    1. ボタン・バーで、「新規」をクリックします。

    2. アセット・タイプのリストで、「新規属性エディタ」をクリックします。

      WebCenter Sitesに、新規属性エディタ・フォームが表示されます。

    3. 「名前」フィールドに、このCKEditorインスタンスを一意に識別する名前を入力します。この例では、CK_FSIIAbstractと入力します。

      クライアントは、総称名を使用してCKEditorを作成して、そのCKEditorを複数の属性で使用できます。そのフィールド特有の要件がないかぎり、属性に対してCKEditorインスタンスを一意に識別する必要はありません。たとえば、そのフィールドが他のCKEditorフィールドと異なる場合、そのフィールド内のCKEditorの幅と長さといった要件です。

    4. 次のコードを「XML」フィールドに貼り付けます。

      <?XML VERSION="1.0"?>
<!DOCTYPE PRESENTATIONOBJECT SYSTEM "presentationobject.dtd">
<PRESENTATIONOBJECT NAME="CKEDITOR">
<CKEDITOR WIDTH="400" HEIGHT="200"></CKEDITOR>
</PRESENTATIONOBJECT>

    5. 「保存」をクリックします。

  3. このCKEditorインスタンスをFSIIAbstractフィールドの入力方法として有効にします。「編集」フォームで、FSIIAbstract属性アセットを探して開きます。

    1. ボタン・バーで、「検索」をクリックします。

    2. アセット・タイプのリストで、「コンテンツ属性の検索」をクリックします。

    3. 「検索」フィールドで、FSIIAbstractを入力して、「検索」をクリックします。

    4. 検索結果のリストで、FSIIAbstractアセットに移動し、その「編集」(鉛筆)アイコンをクリックします。

      WebCenter Sitesの「編集」フォームにアセットが表示されます。

    5. CKEditorをこの属性の属性エディタ(入力方法)として設定します。「属性エディタ」ドロップダウン・リストで、CK_FSIIAbstractを選択します。

    6. 「保存」をクリックします。

  4. 新しいCKEditorインスタンスをテストするには、Oracle WebCenter Sites: Contributorインタフェースに切り替え、任意の「コンテンツ」アセットを探して、そのアセットを「編集」ビューで開きます。

    1. 「検索」フィールドで、下矢印をクリックして「検索タイプ」メニューを開きます。「検索タイプ」メニューで、コンテンツの検索を選択します。次に、虫めがねアイコンをクリックします。

      「検索」タブが開き、検索結果が表示されます。

    2. アセット・タイプのリストで、目的のContentアセットに移動し(この例ではFSIIAbout)、そのアセットを右クリックして、コンテキスト・メニューから「編集」を選択します。

      タブが開いて、そのアセットが「編集」ビューに表示されます。

    3. 「概要」フィールドに移動して、フィールドをクリックします。

      CKEditorが表示されない場合は、属性エディタのXMLコードと、「属性エディタ」ドロップダウン・リストで選択した内容を確認してください。

    4. アセットのツールバーで、「調査」アイコンをクリックして、アセットの「調査」ビューを表示します。

10.1.3 CKEditorをWebモードで使用可能にする方法

ユーザーがWebモードでCKEditorを使用してアセットを編集できるようにするには、表10-1に示すように、パラメータeditorとparamsを適切なテンプレート内のinsite:editタグで設定します。編集するコードが含まれたテンプレートは、Webモードで使用するCKEditorが属するアセット用であるか、そのアセットと関連付けられたアセット・タイプ用である必要があります。

表10-1 CKEditorをWebモードで使用可能にするパラメータ

タグ パラメータ 値 説明

insite:edit

editor

ckeditor

使用するエディタの名前を指定します。

なし

params

editorId

Webモードで使用するCKEditorのIDを指定します。

なし

なし

enableEmbeddedLinks

CKEditorツールバーでリンク・アイコンを有効にします。

例10-1に、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 (Explorerを使用したコード編集の手順には、「Oracle WebCenter Sites Explorerの使用によるエレメント・ロジックの作成と編集」を参照してください)。

  • 任意のテキスト・エディタ。

10.1.4 選択したアセット・タイプをCKEditorで使用可能にする方法

ユーザーが使用できるアセット・タイプを限定するには、ALLOWEDASSETTYPESパラメータをCKEditorのXMLコードに追加します。このパラメータの値として、使用可能にするアセット・タイプの名前をカンマ区切りリストの形式で指定します。

アセット・タイプをCKEditorで使用可能にする手順:

  1. Adminインタフェースを開きます。

  2. 「編集」フォームで属性エディタ(名前はCKEditor)を探して開きます。

    1. ボタン・バーで、「検索」をクリックします。

    2. 「検索」フォームで、「属性エディタの検索」を選択します。

    3. 属性エディタの検索フォームで、検索条件(存在する場合)を入力して、「検索」をクリックします。

    4. 検索結果のリストで、CKEditorアセットに移動し、その「編集」(鉛筆)アイコンをクリックします。

  3. 「XML」フィールドに移動して、ALLOWEDASSETTYPESパラメータを<CKEDITOR>タグに追加します。次に、例10-2に示すように、使用可能にするアセット・タイプの名前をALLOWEDASSETTYPESパラメータの値として指定します。

    ALLOWEDASSETTYPESパラメータは、追加のパラメータとして<CKEDITOR>タグに追加されます。このパラメータの値は、ユーザーが新しいアセットを作成できるアセット・タイプを指定します。

  4. 「変更の保存」をクリックして、アセットを保存します。

  5. ALLOWEDASSETTYPESパラメータをテストします。

    1. Contributorインタフェースに切り替えます。

    2. CKEditor対応のフィールドを持つアセットを探してWebモードで開きます。

      • 「検索」フィールドで、検索条件を指定して、虫めがねアイコンをクリックします。

        「検索」タブが開き、検索結果が表示されます。

      • アセットの名前をクリックして、そのアセットの「調査」ビューを開きます。

      • そのアセットがフォーム・モードで開かれた場合は、アセットのツールバーで「モード」スイッチをクリックして、Webモードに切り替えます。

      • アセットのツールバーで、「編集」アイコンをクリックします。

    3. いずれかの許可されたアセット・タイプを指定して検索します。許可されたアセットが固定された検索結果リストに表示されたら、その許可されたアセットをCKEditorにドラッグします。

      ALLOWEDASSETTYPESパラメータで指定したタイプの許可されたアセットがまったくない場合は、「コンテンツ」→「新規」を選択して、新しいアセットを作成します。そのアセットを指定して検索して、そのアセットをドックからCKEditorにドラッグします。

例10-2 追加されたパラメータを示すXMLコード

<?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>

10.1.5 組み込まれたアセットの承認依存性を設定する方法

「アセットを含む」アイコンと「新規アセットの作成および包含」アイコンを使用すると、ユーザーは単一のアセットを別のアセットのCKEditor対応フィールドに組み込むことができます。組み込まれたアセットは、そのフィールドでプレビュー可能になり、最終的には、メイン・アセットの表示内容にオンラインで埋め込まれます。

メイン・アセットと組み込まれたアセットが初めてパブリッシュされた後に、これらのアセット間の依存性によって、後続の承認とパブリッシュがどのように機能するのかが決定されます。この依存性は、CKEditorのXMLコード内のDEPTYPEパラメータによって定義されます。

DEPTYPEパラメータは、EXISTSまたはEXACTに設定できます。DEPTYPEパラメータが明示的に設定されていない場合は、デフォルトでEXACTが使用されます。

  • EXISTS: メイン・アセットが編集、承認および再パブリッシュされたときに、いずれかのバージョンの組み込まれたアセットがパブリッシュ先に存在している場合は、組み込まれたアセットが承認および再パブリッシュされる必要はありません。

  • EXACT: メイン・アセットが編集、承認および再パブリッシュされたときに、組み込まれたアセットが編集されていた場合は、組み込まれたアセットも承認および再パブリッシュされる必要があります。

組み込まれたアセットの承認依存性を定義する手順:

  1. Adminインタフェースを開きます。

  2. 「編集」フォームで属性エディタ(名前はCKEditor)を探して開きます。

    1. ボタン・バーで、「検索」をクリックします。

    2. 「検索」フォームで、「属性エディタの検索」を選択します。

    3. 属性エディタの検索フォームで、検索条件(存在する場合)を入力して、「検索」をクリックします。

    4. 検索結果のリストで、CKEditorアセットに移動し、その「編集」(鉛筆)アイコンをクリックします。

  3. 「XML」フィールドに移動して、例10-3に示すように、DEPTYPEパラメータを<CKEDITOR>タグに追加して、DEPTYPEパラメータの値をEXISTSまたはEXACTに設定します。

    DEPTYPEパラメータは、追加のパラメータとして<CKEDITOR>タグに追加されます。

  4. 「変更の保存」をクリックして、アセットを保存します。

例10-3 追加された属性を含むXMLコード

<?XML VERSION="1.0"?>
<!DOCTYPE PRESENTATIONOBJECT
SYSTEM "presentationobject.dtd">
<PRESENTATIONOBJECT
NAME="CKEditorTest"><CKEDITOR
WIDTH="580" HEIGHT="200"
DEPTYPE="EXISTS"></CKEDITOR>
</PRESENTATIONOBJECT>

10.1.6 CKEditorツールバーをカスタマイズする方法

CKEditorのツールバーで使用できる機能と、それらの配置をカスタム構成ファイルでカスタマイズできます。

カスタムのconfig.jsファイルでCKEditorツールバーをカスタマイズする手順:

  1. テキスト・エディタで構成ファイルを開きます。

    <cs_app>/ckeditor/customconfig.js

    <cs_app>は、WebCenter SitesのWebアプリケーションがデプロイされたアプリケーション・サーバーのディレクトリを示します。

  2. Contributorインタフェース用にツールバーをカスタマイズする手順(フォーム・モード用とWebモード用):

    • ツールバーをContributorインタフェース用にカスタマイズするには、<cs_app>/ckeditor/customconfig.jsのconfig.toolbar_SITESを検索します。

    • ツールバーをWebモード用にカスタマイズするには、<cs_app>/ckeditor/customconfig.js fのconfig.toolbar_SITES_WEBを検索します。

  3. 変更を加えます。ツールバー定義の構文については、CKEditorのドキュメントを参照してください。

  4. 保存してファイルを閉じます。

  5. WebCenter Sitesのアプリケーションを再デプロイし、アプリケーション・サーバーを再起動して、変更内容を適用します。

インスタンス単位でCKEditorツールバーをカスタマイズする手順:

  1. カスタム・ツールバー定義を作成します。

    1. カスタム構成ファイルをテキスト・エディタで開きます。

      <cs_app>/ckeditor/config.js

      <cs_app>は、WebCenter SitesのWebアプリケーションがデプロイされたアプリケーション・サーバーのディレクトリを示します。

    2. 新しいツールバー定義をファイルに追加します。カスタム・ツールバー定義の作成方法については、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インスタンスを変更する際に使用します。

  2. カスタム・ツールバー定義を使用するように、CKEditorインスタンスを変更します。

    1. Adminインタフェースを開きます。

    2. CKEditorインスタンスを検索します。

      • ボタン・バーで、「検索」をクリックします。

      • アセット・タイプのリストで、「属性エディタの検索」をクリックします。

      • 「検索」フィールドに、CKEditorインスタンスが保持されているアセットの名前を入力して、「検索」をクリックします。

      • 検索結果のリストで、アセットに移動して、その「編集」(鉛筆)アイコンをクリックします。

    3. 「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>">

    4. 「変更の保存」をクリックして、アセットを保存します。

  3. 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を含む)でサポートされています。

FirstSiteIIサンプル・サイトを使用してClarkii OIEインスタンスを作成する場合は、EDITORTYPE="clarkii"タグを追加することで、WebCenter Sitesに付属しているOnline Image Editor (OIE)のコードを変更できます。FirstSiteIIサンプル・サイト以外のサイトを使用する場合は、各アセット・タイプについてフィールドごとに別個のClarkii OIEインスタンスを構成することも、複数のアセット・タイプのフィールドと関連付ける単一のClarkii OIEインスタンスを構成することもできます。

図10-1は、Clarkii OIEの固有コントロールと、Clarkii OIEが有効化されている属性内のイメージを操作するためのWebCenter Sites側の機能を示しています。

図10-1 アセットのフォームのフィールド内にレンダリングされたClarkii Online Image Editor

図10-1の説明が続きます
「図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にアクセスしてください。

    http://www.online-image-editor-clarkii.com/

この項には次のトピックが含まれます:

10.2.1 Clarkii OIEインスタンスの作成方法とフィールドに対して有効化する方法

Clarkii OIEのインスタンスを作成して、このインスタンスをフレックス属性アセットに対して有効にします。この手順は、FirstSiteIIサンプル・サイトに基づいています。

この例では、新しいClarkii OIEインスタンスを、FSII_ImageFileフィールドの属性エディタとして有効にします。FSII_ImageFileは、サンプルのMediaアセット・タイプの属性です。

  1. Adminインタフェースを開きます。

  2. Clarkii OIEインスタンスを作成します。

    1. ボタン・バーで、「新規」をクリックします。

    2. アセット・タイプのリストで、「新規属性エディタ」をクリックします。

      WebCenter Sitesに、新規属性エディタ・フォームが表示されます。

    3. 「名前」フィールドに、このClarkii OIEインスタンスを一意に識別する名前を入力します(この例では、ClarkiiOIEと入力します)。

    4. 「XML」フィールドで、次のコードを貼り付けます。

      注意:

      各パラメータの詳細は、「Clarkii OIEのプロパティを構成する方法」の表を参照してください。

      <?XML VERSION="1.0"?>
<!DOCTYPE PRESENTATIONOBJECT SYSTEM "presentationobject.dtd"> 
<PRESENTATIONOBJECT NAME="editor">
<IMAGEEDITOR
    HEIGHT="600"
    WIDTH="800"
    EDITORTYPE="clarkii"
    FITIMAGE="false"
    ENABLEIMAGEPICKER="true"
    ASSETTYPE="Media_C"
    ATTRIBUTE="FSII_ImageFile"
    ATTRIBUTETYPE="Media_A" 
    CATEGORYATTRIBUTE=""
    RESTRICTEDCATEGORYLIST=""
    OIEENABLEIMAGEPICKER="true"
    OIEASSETTYPE="Media_C"
    OIEATTRIBUTE="FSII_ImageFile"
    OIEATTRIBUTETYPE="Media_A"
    OIECATEGORYATTRIBUTE=""
    OIERESTRICTEDCATEGORYLIST="">
</IMAGEEDITOR>
</PRESENTATIONOBJECT>

    5. 「保存」をクリックします。

  3. Clarkii OIEインスタンスを、特定のアセット・タイプの属性の属性エディタとして有効にします。この例では、Mediaアセット・タイプのFSII_ImageFile属性を使用します。

    1. 「編集」フォームで、属性アセットを探して開きます。この例では、FSII_ImageFile属性を探して開きます。

      • ボタン・バーで、「検索」をクリックします。

      • アセット・タイプのリストで、属性アセットのアセット・タイプをクリックします。この例では、「メディア属性の検索」をクリックします。

      • 「検索」フィールドで、変更する属性アセットの名前を入力します。この例では、FSII_ImageFileと入力します。

      • 「検索」をクリックします。

      • 検索結果のリストで、属性アセット(FSII_ImageFile)に移動し、その「編集」(鉛筆)アイコンをクリックします。

        WebCenter Sitesの「編集」フォームにアセットが表示されます。

    2. Clarkii OIEをこの属性アセットの属性エディタとして設定します。

      • 「値タイプ」フィールドで、blobが選択されていることを確認します。

        注意:

        Clarkii OIEには、blob型の属性値が必要です。属性アセットを保存すると、その後、「値タイプ」フィールドで選択した値は変更できません。

      • 「属性エディタ」ドロップダウン・リストで、手順2で作成したClarkii OIEインスタンスを選択します。

    3. 「変更の保存」をクリックします。

  4. 新しいClarkii OIEインスタンスをテストする手順:

    1. Contributorインタフェースを開きます。

    2. 手順3で変更した属性をフィールドとして指定している定義を含む任意のアセットを検索して、そのアセットを「編集」フォームで開きます。この例では、Mediaアセットを選択します。

      • 「検索」フィールドに、検索条件を入力します。

      • 検索範囲を特定のアセット・タイプに絞り込むには、「検索」フィールドの下矢印をクリックして、「検索タイプ」ドロップダウン・リストを開きます。Clarkii OIEインスタンスに対応したフィールドを使用しているアセット・タイプをクリックします。この例では、「メディアの検索」を選択します。

      • 虫めがねアイコンをクリックします。

        「検索」タブが開き、検索結果のリストが表示されます。

      • 検索結果のリストで、選択するアセットを右クリックします。この例では、FSII AudioCo_iAC-008.jpgメディア・アセットを選択し、「編集」を選択します。

        WebCenter Sitesの「編集」フォームにアセットが表示されます。

    3. Clarkii OIEで有効なフィールドに移動します。この例では、FSII_ImageFileフィールドになります。これは図10-2のようになります。

      図10-2 Clarkii Online Image Editor

      図10-2の説明が続きます
      「図10-2 Clarkii Online Image Editor」の説明

      Clarkii OIEをフィールドでレンダリングするには、次のいずれかを行います。

      • Flashがインストールされていることを確認します。

      • 作成したClarkii OIEインスタンスのXMLコードを確認します(手順2のdを参照)。

      • Clarkii OIEを属性エディタとして有効にした属性アセットで選択した内容を確認します(手順3のbを参照)。

    4. 「取消」をクリックして、このアセットの「調査」フォームに戻ります。

10.2.2 Clarkii OIEのプロパティを構成する方法

表10-2、表10-3および表10-4では、Clarkii OIE属性エディタ・アセットの作成時に指定できるすべてのプロパティを列挙して説明しています。これらの表は、サイトの設計に合せて独自のClarkii OIEインスタンスのプロパティを構成するためのリファレンスとして使用してください。

表10-2 Clarkii OIEの指定

プロパティ 定義

HEIGHT

特定アセットのフォームの属性フィールドに表示される際の、Clarkii OIE領域の高さを指定します。

推奨値: 600

WIDTH

特定アセットのフォームの属性フィールドに表示される際の、Clarkii OIE領域の幅を指定します。

推奨値: 800

EDITORTYPE

使用するイメージ・エディタのタイプを指定します。Clarkii OIEを有効にするには、このプロパティを次のように指定する必要があります。

EDITORTYPE="clarkii"

FITIMAGE

このプロパティをtrueに設定した場合、Clarkii OIEを使用して編集されたイメージは、Clarkii OIEキャンバス内にちょうど収まるようにサイズ調整されます。このプロパティをfalseに設定した場合、Clarkii OIEを使用して編集されたイメージは、そのイメージの実サイズでキャンバス上に表示されます。

可能な値: true|false

表10-3 「イメージの参照」ボタンの指定

プロパティ 定義

ENABLEIMAGEPICKER

「イメージの参照」ボタンを有効にします。ユーザーはこのボタンを使用して、Clarkii OIEキャンバス上の既存のイメージを任意のイメージに置換できます。このボタンをクリックすると、イメージ・ピッカー・ウィンドウが開きます。

可能な値: true|false

注意: このプロパティをfalseに設定した場合は、「イメージの参照」ボタンに関する他のプロパティの値を設定しないでください。

ASSETTYPE

「イメージの参照」ボタンがクリックされたときに「イメージ・ピッカー」ウィンドウに表示されるイメージ・アセットのアセット・タイプを指定します。

可能な値: イメージを格納するためのblob型の属性を含む定義が存在するアセット・タイプ。

例: "Media_C"

ATTRIBUTE

「イメージの参照」ボタンがクリックされたときに「イメージ・ピッカー」ウィンドウに表示される、イメージ・アセットのイメージ・ファイル属性を指定します。

可能な値: イメージを格納するためのblob型属性。

例: "FSII_ImageFile"

ATTRIBUTETYPE

ATTRIBUTEプロパティで指定したイメージ・ファイル属性のアセット・タイプを指定します。「イメージ・ピッカー」ではこのアセット・タイプのみの属性を検索し、このアセット・タイプの属性があるイメージのみを表示します。

可能な値: ATTRIBUTEプロパティで指定したイメージ・ファイル属性のアセット・タイプ。

例: "Media_A"

CATEGORYATTRIBUTE

「イメージ・ピッカー」ウィンドウに表示されるイメージ・アセットを(理想的にはそれらの親アセットの名前に基づいて)分類する値が保持されているstring属性を指定します。このプロパティの値により、イメージ・ピッカーの「カテゴリ」ドロップダウン・リストに、指定された属性で見つかった値がすべて移入されます。フィールド・コピアー・フィルタを使用してアセットを分類する方法は、「アセットを分類するためにフィールド・コピアー・フィルタを実装する方法」を参照してください。

「イメージの参照」ボタンをクリックすると、ユーザーは「カテゴリ」ドロップダウン・リストを使用して、これらの属性値のいずれかを選択することで、イメージ・ピッカー・ウィンドウに表示されるイメージをフィルタリングできます。選択された属性値に一致するイメージのみが、「イメージ・ピッカー」ウィンドウにレンダリングされます。

注意: このプロパティの値を指定しない場合は、ASSETTYPEプロパティで指定されたアセット・タイプのすべてのイメージ・アセットがイメージ・ピッカー・ウィンドウに表示され、「カテゴリ」ドロップダウン・リストは表示されません。

RESTRICTEDCATEGORYLIST

カンマ区切りリストの形式で、CATEGORYATTRIBUTEプロパティで指定した属性の個別の値を入力します。ここで指定した値のみが、「イメージの参照」ボタンがクリックされたときにイメージ・ピッカー・ウィンドウの「カテゴリ」ドロップダウン・リストで使用できるようになります。

可能な値: CATEGORYATTRIBUTEプロパティの説明を参照してください。

注意: CATEGORYATTRIBUTEプロパティの値を指定しない場合、このプロパティは無視されます。

表10-4 「イメージの挿入」ボタンの指定

プロパティ 定義

OIEATTRIBUTE

「イメージの挿入」ボタンがクリックされたときに「イメージ・ピッカー」ウィンドウに表示される、イメージ・アセットのイメージ・ファイル属性を指定します。

可能な値: イメージを格納するためのblob型属性。

例: "FSII_ImageFile"

OIEATTRIBUTETYPE

OIEATTRIBUTEプロパティで指定したイメージ・ファイル属性のアセット・タイプを指定します。「イメージ・ピッカー」ではこのアセット・タイプのみの属性を検索し、このアセット・タイプの属性があるイメージのみを表示します。

可能な値: OIEATTRIBUTEプロパティで指定したイメージ・ファイル属性のアセット・タイプ。

例: "Media_A"

OIECATEGORYATTRIBUTE

「イメージ・ピッカー」ウィンドウに表示されるイメージ・アセットを(理想的にはそれらの親アセットの名前に基づいて)分類する値が保持されているstring属性を指定します。このプロパティの値により、イメージ・ピッカーの「カテゴリ」ドロップダウン・リストに、指定された属性で見つかった値がすべて移入されます。フィールド・コピアー・フィルタを使用してアセットを分類する方法は、「アセットを分類するためにフィールド・コピアー・フィルタを実装する方法」を参照してください。

「イメージの挿入」ボタンをクリックすると、ユーザーは「カテゴリ」ドロップダウン・リストを使用して、これらの属性値のいずれかを選択することで、イメージ・ピッカー・ウィンドウに表示されるイメージをフィルタリングできます。選択された属性値に一致するイメージのみが、「イメージ・ピッカー」ウィンドウにレンダリングされます。

注意: このプロパティの値を指定しない場合は、OIEASSETTYPEプロパティで指定されたアセット・タイプのすべてのイメージ・アセットがイメージ・ピッカー・ウィンドウに表示され、「カテゴリ」ドロップダウン・リストは表示されません。

OIERESTRICTEDCATEGORYLIST

カンマ区切りリストの形式で、OIECATEGORYATTRIBUTEプロパティで指定した属性の個別の値を入力します。ここで指定した値のみが、「イメージの挿入」ボタンがクリックされたときにイメージ・ピッカー・ウィンドウの「カテゴリ」ドロップダウン・リストで使用できるようになります。

可能な値: OIECATEGORYATTRIBUTEプロパティの説明を参照してください。

注意: OIECATEGORYATTRIBUTEプロパティの値を指定しない場合、このプロパティは無視されます。

OIEENABLEIMAGEPICKER

「イメージの挿入」ボタンを有効にします。ユーザーはこのボタンを使用して、Clarkii OIEキャンバス上の既存イメージの最上位層としてイメージを挿入できます。このボタンをクリックすると、イメージ・ピッカー・ウィンドウが開きます。

可能な値: true|false

注意: このプロパティをfalseに設定した場合は、「イメージの挿入」ボタンに関する他のプロパティの値を設定しないでください。

OIEASSETTYPE

「イメージの挿入」ボタンがクリックされたときに「イメージ・ピッカー」ウィンドウに表示される、イメージ・アセットのアセット・タイプを指定します。

可能な値: イメージを格納するためのblob型の属性を含む定義が存在するアセット・タイプ。

例: "Media_C"

10.2.3 アセットを分類するためにフィールド・コピアー・フィルタを実装する方法

イメージ・アセットをその親アセットの名前に基づいて分類するには、フィールド・コピアー・フィルタを使用します。図10-3は、FirstSiteIIサンプル・サイトのMediaフレックス・ファミリを使用して、フィールド・コピアー・フィルタを実装する方法を例示しています。この例のフィールド・コピアー・フィルタは、親アセットのシステム定義のName属性の値をユーザー定義のstring属性にコピーします。

既存の属性の値が上書きされることを防止するには、フィールド・コピアーによってコピーされるシステム定義属性の値を保持するための新しいstring属性(FSII_ImageParentName)を作成します。

注意:

フィールド・コピアー・フィルタの詳細は、「フレックス・フィルタ・クラス」を参照してください。

図10-3 フィールド・コピアー・フィルタのサンプルの概要

図10-3の説明が続きます
「図10-3 フィールド・コピアー・フィルタのサンプルの概要」の説明

フィールド・コピアー・フィルタを使用する手順:

  1. Adminインタフェースを開きます。

  2. フィールド・コピアー・フィルタの入力として使用する値を持つシステム定義属性を特定するとともに、フィールド・コピアーによってこのシステム定義属性の値がコピーされる先となるユーザー定義のstring属性を特定します。

    注意:

    既存の属性の値が上書きされないようにするには、string型のフレックス属性を作成します(この例ではFSII_ImageParentName)。新しいフレックス属性の作成の手順は、「フレックス・アセット・ファミリの作成」の「フレックス属性の作成」を参照してください。

  3. FieldCopier型のフィルタを作成します(この例ではFSII_ImageParentNameCopier)。

    1. ボタン・バーで、「新規」をクリックします。

    2. アセット・タイプのリストで、「新規メディア・フィルタ」をクリックします。

      「新規メディア・フィルタ」フォームが表示されます。

    3. 「名前」フィールドで、このフィルタの一意の名前を入力します(この例では、FSII_ImageParentNameCopierを使用)。

    4. 「フィルタ」フィールドで、ドロップダウン・リストからFieldCopierを選択します。次に「引数の取得」をクリックします。

      • 「名前」ドロップダウン・リストで、フィールド・コピアー・フィルタの入力値として使用する値を持つシステム定義属性を選択します(この例では「名前」)。

      • 「値」フィールドで、指定したシステム定義属性の値がフィールド・コピアー・フィルタによってコピーされる先となるユーザー定義属性の名前を入力します(この例ではFSII_ImageParentName)。

    5. 「追加」をクリックして、フィルタに引数を追加します。

    6. 「保存」をクリックして、フィルタを保存します。

  4. 親(または子)定義を探して、新しいフィールド・コピアー・フィルタをその定義に追加します(この例では、フィールド・コピアー・フィルタをFSII_ImageCategoryというMedia親定義に追加します)。

    1. ボタン・バーで、「検索」をクリックします。

    2. アセット・タイプのリストで、「メディア親定義の検索」を選択します。

    3. 「検索」フィールドで、フィールド・コピアー・フィルタを追加する先となる親定義の名前を入力します(FSII_ImageCategory)。

    4. 「検索」をクリックします。

    5. 検索結果のリストで、親(または子)定義に移動して、その「編集」(鉛筆)アイコンをクリックします。

    6. 親(または子)定義の「編集」フォームで「フィルタ」セクションに移動して、手順3で作成したフィールド・コピアー・フィルタを選択します。

    7. 「変更の保存」をクリックします。

  5. フィールド・コピアー・フィルタ(FSII_ImageParentNameCopier)を追加した定義と関連付けられたすべての既存の親(または子)アセットを探して再保存します。これにより、このフィルタはユーザー定義属性(FSII_ImageParentName)に、システム定義属性(「名前」)の値を格納できるようになります。

    このフィルタを親定義に追加した場合、関連付けられた親アセットのすべての子は、フィールド・コピアー・フィルタによってユーザー定義属性(この例ではFSII_ImageParentName)にコピーされた値を内部で継承します。

10.3 イメージ・ピッカーの構成

表10-5では、イメージ・ピッカー属性エディタのインスタンスを構成する際にXML定義で値を指定する必要があるパラメータを紹介しています。

表10-5 イメージ・ピッカーのパラメータ

パラメータ 説明

ASSETTYPENAME

このイメージ・ピッカー・インスタンスで表示されるイメージ・アセットのアセット・タイプ。

例: Media_C

ATTRIBUTETYPENAME

選択されたイメージ・アセット・タイプ内のイメージ・ファイル属性のアセット・タイプ。

例: Media_A

ATTRIBUTENAME

選択されたイメージ・アセット・タイプ内のイメージ・ファイル属性の名前。

例: FSII_ImageFile

CATEGORYATTRIBUTENAME

(オプション)選択されたイメージ・アセット・タイプ内のカテゴリ属性の名前。

例: FSII_ImageCategory

RESTRICTEDCATEGORYLIST

選択されたイメージ・アセット・タイプ内のカテゴリ属性の値で構成されるカンマ区切りリストを指定します。このリストに含まれる値は、イメージ・ピッカー・ウィンドウの「カテゴリ」ドロップダウン・リストに表示されます。このパラメータを省略した場合、イメージ・ピッカーは選択されたイメージ・アセット・タイプに属するすべてのアセットを表示します。

例: Audio、Video、Photo

イメージ・ピッカー定義のサンプル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>

属性エディタの作成の詳細は、「属性エディタの作成」を参照してください。

前
前 		次
次
目次へ移動
目次