Oracle Content Managementを使用したコンテンツ・レイアウトの作成

サイト・ページ上に表示するときにコンテンツ・アイテム内のフィールドをレイアウトするためのコンテンツ・レイアウトを作成します。ページにコンテンツ・アイテムを追加すると、選択したコンテンツ・レイアウトが使用されます。

エンタープライズ・ユーザーは、開発者として提供するコンテンツ・タイプとレイアウトに基づいてコンテンツ・アイテムを作成および使用できます。デフォルトのレイアウトから新しいコンテンツ・レイアウトを作成できます。コンテンツ・タイプに関連付けられた複数のコンテンツ・レイアウトを使用すると、サイト・デザイナが、コンテンツを変更せずにコンテンツ・アイテムを様々なコンテキストで表示できるようになります。

コンテンツ・リストコンポーネント内でコンテンツ・レイアウトを使用する場合、コンテンツ・レイアウトはコンテンツ・アイテムごとに1回繰り返されます。これにより、コンテンツ・レイアウトはセクション・レイアウトによって配置されます。

コンテンツ・レイアウトをエクスポートしてオフラインで変更し、その後インポートして既存のコンテンツ・レイアウトを置き換えることができます。

コンテンツ・レイアウトを作成するには:

Oracle Oracle Content Managementのホーム・ページで、サイド・ナビゲーションの「開発者」をクリックします。
「開発者」ページが表示されます。
「すべてのコンポーネントの表示」をクリックします。
右側の「作成」ドロップダウン・メニューから、「コンテンツ・レイアウトの作成」を選択します。
「コンテンツ・レイアウトの作成」ダイアログ・ボックスで、レイアウトを使用するコンテンツ・タイプを選択し、表示するフィールドを選択します。また、コンテンツ・アイテムおよびコンテンツ・リスト・コンポーネントをページに追加する際にサイト作成者がカスタム設定およびスタイルを追加できるようにする場合は、サイトで使用される場合にカスタム設定のサポートを追加するを有効にします。
コンテンツ・レイアウト・コンポーネントの名前と説明を指定し、「作成」をクリックします。

コンポーネントにコンテンツ・レイアウトが追加されます。

注:
コンテンツ・レイアウト・タイトルでは英数字、ハイフンおよびアンダースコアのみが有効です。
編集のためにコンテンツ・レイアウトをエクスポートするには、これを選択し、右クリック・メニューの「エクスポート」をクリックするか、アクション・バーのをクリックします。
1. 既存のフォルダに移動するか、「作成」、「フォルダ」の順にクリックして新しいフォルダを作成し、名前、および必要に応じて説明を入力します。
2. フォルダの横にあるチェック・ボックスを選択し、「OK」をクリックします。
3. フォルダのアイコンまたは名前をクリックして開きます。
選択したフォルダ内に、レイアウト・パッケージ・ファイルがコンテンツ・レイアウト名および.zip拡張子を使用して作成されます。ファイルを開発環境にダウンロードして編集します。

これらのファイルは、従業員カード・コンテンツ・レイアウトを使用するコンテンツ・アイテムのフィールドのレイアウトを制御します。サイトで使用される場合にカスタム設定のサポートを追加するを有効にした場合は、単一のコンテンツ・アイテムのデフォルト・レンダリングを提供するsettings.htmlという名前の追加ファイルも作成されるため、それを表示できます。

図GUID-1B7C7C81-7057-4E9C-B98C-C982CC483961-default.pngの説明

design.css、layout.htmlおよびrender.jsファイルを編集して、必要なコンテンツ・レイアウトを取得します。

たとえば、次のファイルは従業員カード・コンテンツ・レイアウトを指定します:

design.cssファイルを編集します:

.scs-tile-layout {
    font-family: 'Helvetica Neue', 'Segoe UI', sans-serif-regular, Helvetica, Arial;
    font-size: 16px;
    margin: 0px;
    padding: 0px;
    font-style: normal;
    color: #333;
}

.scs-tile-layout li {
    list-style: none;
    font-size: 14px;
    font-style: normal;
    font-variant-caps: normal;
    font-weight: 200;
    margin: 0px;
}

.scs-tile-layout-img-container {
    height: 150px;
    width: 100px;
    float: left;
    margin: 0em 0.5em 0em 0em;
    padding: 0px;
    border-radius: 3px;
    overflow: hidden;
    position: relative;
}

.scs-tile-layout-img {
    position: absolute;
    left: -100%;
    right: -100%;
    top: -100%;
    bottom: -100%;
    margin: auto;
    height: 100%;
    min-width: 100%;
}

.scs-tile-layout p {
    margin: 0px;
}

layout.htmlファイルを編集します:

{{#data.employee_profile_pictureURL}}
<div class="scs-tile-layout-img-container">
    <img class="scs-tile-layout-img" src="{{data.employee_profile_pictureURL}}" />
</div>
{{/data.employee_profile_pictureURL}}
<ul class="scs-tile-layout">
    <li>
        <p><b>{{name}}</b></p>
    </li>
    <li>&nbsp;</li>
    <li>
        <p>{{data.employee_job_title}}</p>
        <p>{{data.employee_location}}</p>
        <p><b>Phone: </b>{{data.employee_phone}}</p>
    </li>
    {{#scsData.detailPageLink}}
    <li>
        <a href="{{scsData.detailPageLink}}" title="Go to detail page"><span class="detail-page">Profile</span></a>
    </li>
    {{/scsData.detailPageLink}}
</ul>

render.jsファイルを編集します:

/* globals define */

define([
    'jquery',
    'mustache',
    'text!./layout.html',
    'css!./design.css'
], function($, Mustache, templateHtml, css) {
    'use strict';

    function ContentLayout(params) {
        this.contentItemData = params.contentItemData || {};
        this.scsData = params.scsData;
        this.contentClient = params.contentClient || (params.scsData ? params.scsData.contentClient : null);
        // retrieve the custom settings
        this.customSettiings = this.scsData.customSettingsData
        || {};
    }

    ContentLayout.prototype = {

        render: function(parentObj) {
            var template,
                content = $.extend({}, this.contentItemData),
                contentClient = this.contentClient,
                contentType,
                secureContent = false;

            if (this.scsData) {
                content = $.extend(content, { 'scsData': this.scsData });
                contentType = content.scsData.showPublishedContent === true ? 'published' : 'draft';
                secureContent = content.scsData.secureContent;
            }

            if (contentClient) {
                var params = {
                    'itemGUID': typeof content.data.employee_profile_picture === 'string' ?
                        content.data.employee_profile_picture : content.data.employee_profile_picture.id,
                    'contentType': contentType,
                    'secureContent': secureContent
                };
                content.data.employee_profile_pictureURL = contentClient.getRenditionURL(params);
            }

            console.log(content);

            try {
                // Mustache
                template = Mustache.render(templateHtml, content);

                if (template) {
                    $(parentObj).append(template);
                }
            } catch (e) {
                console.error(e.stack);
            }
        }
    };

    return ContentLayout;
});

render.jsファイルおよびその他のファイルの編集の詳細は、「コンポーネントの開発」を参照してください。

変更されたファイルをインポートして、既存のコンテンツ・レイアウトを置き換えます。
1. ホーム・ページで、「ドキュメント」をクリックします。
2. 変更されたコンテンツ・レイアウトを、.zip拡張子を持つファイルで、エクスポートした同じフォルダ名およびファイル名が含まれるフォルダにアップロードします。
  新しいコンテンツ・レイアウトとしてインポートする場合は、_folder.json内のコンテンツ・レイアウトのGUIDを変更する必要があります。
3. ホーム・ページで、「開発者」をクリックします。
  「開発者」ページが表示されます。
4. 「すべてのコンポーネントの表示」をクリックします。
5. 「作成」メニューから、「コンポーネントのインポート」を選択します。
6. 変更したコンポーネントが含まれるアップロード済zipファイルの横にあるチェック・ボックスを選択し、「OK」をクリックします。
変更されたコンテンツ・レイアウトは「コンポーネント」にインポートされます。

また、コンテンツ・レイアウトをエクスポートして別のOracle Content Managementインスタンスにコピーまたは移動し、そこでインポートすることもできます。