OCIチュートリアル
    トップページへ戻る
    1. Oracle Cloud Infrastructure チュートリアル
    2. /
    3. コンテンツ管理編
    4. /
    5. Oracle Content Managementのコンテンツ・レイアウトを編集しよう

    Oracle Content Managementのコンテンツ・レイアウトを編集しよう

    タグ： OCE OCM

    この文書はOracle Content Management(OCM)のコンテンツ・レイアウトの編集し、Web ページ上でのコンテンツ・アイテムの表示形式をカスタマイズする方法をステップ・バイ・ステップで紹介するチュートリアルです

    【お知らせ】
    この文書は、2023年8月時点での最新バージョン(23.7.2)を元に作成されてます。
    チュートリアル内の画面ショットについてはOracle Content Managementの現在のコンソール画面と異なっている場合があります。
    {: .notice–info}

    前提条件


    1. 説明

    1.1 コンテンツ・レイアウトとは？

    コンテンツ・レイアウトとは 作成されたコンテンツ・アイテムの表示形式 を定めたものです。具体的には、Webページにコンテンツ・アイテムを配置した時のレイアウト(=HTML)を定義したものになります。詳細は、下記ドキュメントをご参照ください

    1.2 作成済サイトとコンテンツ・タイプの確認

    前提条件にあるチュートリアルをすべて完了すると、firstSite というサイトが表示されます

    • firstSite: ホームページ

      画像

    • firstSite: コンテンツ・アイテムの詳細表示ページ

      画像

    前提条件のチュートリアルでは、2種類のコンテンツ・レイアウトを作成し、それぞれをコンテンツ・タイプ sampleNewsType のレイアウトとして設定しました。設定内容は以下の通りです

    [Memo]
    コンテンツ・レイアウトの設定は、ADMINISTRATION:コンテンツ > アセット・タイプ > sampleNewsType > コンテンツ・レイアウト より確認できます

    画像

    • 説明
      • コンテンツ・アイテムのデフォルト:「コンテンツ・アイテム」コンポーネントで利用するデフォルトのコンテンツ・レイアウト (=sampleNewsType-detail)
      • コンテンツ・リストのデフォルト:「コンテンツ・リスト」コンポーネントで利用するデフォルトのコンテンツ・レイアウト (=sampleNewsType-overview)
      • 空のコンテンツ・リストのデフォルト:「コンテンツ・リスト」コンポーネントで、表示するコンテンツ・アイテムが0件だった時に利用するコンテンツ・レイアウト (=sampleNewsType-overview)
      • コンテンツ・プレースホルダーのデフォルト:「コンテンツ・プレースホルダー」コンポーネントで利用するデフォルトのコンテンツ・レイアウト (=sampleNewsType-detail)

    1.3 サイト・ページ上に配置されているコンポーネントの確認

    firstSite をサイト編集画面で開き、ホームページと詳細表示ページに配置されているコンポーネントと、表示レイアウトの設定を確認します

    1. 左ナビゲーションの 「サイト」 をクリックします

    2. firstSite を選択し、「開く」アイコン をクリックします

      画像

    3. サイト編集画面が表示されます。「ベース・サイト▼」 をクリックし、「新規更新の作成」 を選択します

      画像

    4. 「新規更新の名前の指定」に 「update」 と入力し、「OK」 をクリックします

      画像

    5. 「update」に切り替わっていることを確認します。表示側にあるスイッチを 「編集」 モードに切り替えます

      画像

    6. 左サイドバーの 「ページ」→「ホーム」 をクリックします

    7. 「段落」コンポーネントの下に 「コンテンツ・リスト」 コンポーネントが配置されていることを確認します

      画像

    8. 「コンテンツ・リスト」コンポーネントの 「設定」 をクリックします

      画像

    9. 右サイドバーに「コンテンツ・リスト設定」が表示されます。「アイテムの表示」メニューに 「コンテンツ・リストのデフォルト」 が設定されていることを確認します

      画像

      [Memo]
      「コンテンツ・リストのデフォルト」とは、コンテンツ・タイプの「コンテンツ・レイアウト」タブで設定した コンテンツ・リストのデフォルトレイアウト （ここでは sampleNewsType-overview）でコンテンツ・アイテムを表示する、という意味になります。詳細は下記ドキュメントを参考にしてください

    10. 左サイドバーの 「ページ」→「ホーム」→「Detail」 をクリックします

    11. Detailページの中央に 「コンテンツ・プレースホルダー」 が配置されていることを確認します

      画像

      [Memo]
      「コンテンツ・プレースホルダー」コンポーネントは、指定されたコンテンツ・アイテムを動的に表示するコンポーネントです。具体的には、ニュース一覧を表示するページで1件のニュースでクリックした時に、そのニュースの全文を詳細表示する際に利用します。詳細は、下記ドキュメントを参考にしてください

    12. 「コンテンツ・プレースホルダー」コンポーネントの 「設定」 をクリックします

      画像

    13. 左サイドバーに「コンテンツ・プレースホルダ設定」が表示されます。「アイテムの表示」に 「コンテンツ・プレースホルダーのデフォルト」 が設定されていることを確認します

      画像

      [Memo]
      「コンテンツ・プレースホルダーのデフォルト」とは、コンテンツ・タイプの「コンテンツ・レイアウト」タブで設定した コンテンツ・プレースホルダーのデフォルト （ここでは sampleNewsType-detail）でコンテンツ・アイテムを表示する、という意味になります。詳細は下記ドキュメントを参考にしてください

    14. 表示モードに切り替えます

    15. 以上で、配置されているコンポーネントと表示レイアウトの設定の確認は終了です。次項からそれぞれのコンポーネントが利用しているコンテンツレイアウトを編集し、表示形式を変更します


    2. sampleNewsType-overviewの編集

    「コンテンツ・リスト」コンポーネントのデフォルトとして設定されている sampleNewsType-overview コンテンツ・レイアウトを編集します。

    ここでは、sampleNewsType から作成されたコンテンツ・アイテムの タイトル(title) と メイン画像(image) のみを一覧表示するコンテンツ・レイアウトを作成します。さらに、表示されたタイトル or メイン画像をクリックすると、「コンテンツ・プレースホルダー」が配置された詳細表示ページ（Detail Page）に遷移するリンクも設定します

    2.1 コンテンツ・レイアウトの確認

    1. sampleNewsType-overview コンテンツ・レイアウトを開きます。ここではWebブラウザを利用します

    2. 左ナビゲーションメニューの 「開発者」→「すべてのコンポーネントを開く」 をクリックします

    3. sampleNewsType-overview をクリックします

      画像

      [Memo]
      フィルタで 「コンテンツ・レイアウト」 を選択すると、コンテンツ・レイアウトのみを表示させることができます

    4. assets フォルダをクリックします

      画像

    5. design.css と layout.html をローカルPCにダウンロードします

      画像

    • [解説]コンテンツ・レイアウトの内容

      • コンテンツ・レイアウトは複数のフォルダおよびファイルで構成されます。コンテンツ・レイアウトのカスタマイズは、主に assetsフォルダ配下の3つのファイル を編集します。なお、publishフォルダ配下には、公開サイトで利用されているコンテンツ・レイアウトファイル一式が格納されます。

        sampleNewsType-overview
  assets
    common.mjs
    compile.mjs
    design.css   # コンテンツ・レイアウト専用のスタイルシート(CSS)
    layout.html  # Webページ上の表示形式を定義するHTMLファイル
    render.js    
    render.mjs   # layout.htmlで利用するデータを取得します。必要に応じて動的な動作を追加できます
    setting.html
  publish
  appinfo.json
  _folder_icon.png

      • コンテンツ・レイアウトの開発に関する情報は、下記マニュアルも参考にしてください

    2.2 layout.html の編集

    1. ローカルPCにダウンロードした layout.html をテキストエディタで開きます

    2. layout.html に記述されるHTMLコードを すべて削除 します

    3. 以下のHTMLをコピー&ペーストし、テキストエディタを 「保存」 します

      {% raw %}

      {{#fields}}
<div class="sampleNewsType">
    <a href="{{scsData.detailPageLink}}" title="{{title}}">
        <img src="{{image.url}}" data-asset-operation="view:{{image.id}}" alt="{{image.type}}">
        <p>{{title}}</p>
    </a>
</div>
{{/fields}}

      {% endraw %}

      【Memo】
      imgタグ内のdata-asset-operationは、アセット消費分析(Asset Consumption Analytics)で利用され、アセットの表示(view)やロード(load)などのアセット消費イベントを自動的に収集します。収集したイベントは、アセットのアナリティクスメニューより確認できます。詳細は、下記マニュアルを参考にしてください

    2.3 design.css の編集

    1. ローカルPCにダウンロードしたdesign.cssをテキストエディタで開きます

    2. design.cssに記述されるスタイルシートをすべて削除します

    3. 以下のスタイルシートをコピー＆ペーストし、テキストエディタを保存します

      .sampleNewsType {
  font-family: 'Helvetica Neue', 'Segoe UI', sans-serif-regular, Helvetica, Arial;
  font-size: 16px;
  margin:0px;
  padding:0px;
  font-style: normal;
  color: #333;
}
.sampleNewsType li {
  list-style: none;
  font-size: 14px;
  font-style: normal;
  font-variant-caps: normal;
  color: #333;
  font-weight: 200;
  margin: 0em 0em 1em 0em;
}
.sampleNewsType img {
  max-width: 190px;
  margin: 5px;
  border-radius: 3px;
  float: left;
  vertical-align: middle;
}
.sampleNewsType h1 {
  font-size: 24px;
  color: #333;
  margin:0px;
  font-weight:300;
}
.sampleNewsType h2 {
  font-size: 18px;
  color: #767676;
  margin:0px;
  font-weight:300;
}
.sampleNewsType p {
  margin: 5px;
  vertical-align: middle;
}

    2.4 編集ファイルのアップロード

    1. 開発者 > コンポーネント > sampleNewsType-overview > assets を開きます

    2. layout.html を選択し、「新規バージョンのアップロード」アイコン をクリックします

      画像

    3. ローカルPCで編集した layout.html を指定します。この時、同じファイル名でアップロードします

    4. 新規バージョンとして、layout.html が登録されたことを確認します

      画像

    5. 同じ手順を繰り返し、ローカルPCで編集した design.css を新規バージョンとしてアップロードします

      画像

    2.5 確認

    sampleNewsType-overview レイアウトが更新されたことを、サイト編集画面より確認します

    1. 左ナビゲーションから 「サイト」 をクリックします

    2. firstSiteを選択し、「開く」アイコン をクリックします

    3. 画面下のコンテンツ・アイテムの表示形式が変更されていることを確認します

      画像

    4. 表示される 画像 or タイトル をクリックすると、コンテンツ・アイテムの詳細表示ページに遷移することを確認します。なお、sampleNewsType-detailコンテンツ・レイアウトを編集していないため、表示形式に変更はありません

      画像

    5. サイト編集画面を閉じます


    3. sampleNewsType-detailの編集

    「コンテンツ・プレースホルダー」コンポーネントのデフォルトとして設定されている sampleNewsType-detail コンテンツ・レイアウトを編集します。

    編集手順は、前の手順と同じです。sampleNewsType-detail > assetsのlayout.htmlとdesign.cssをダウンロードし、編集します。最後に新規バージョンとしてアップロードします

    3.1 layout.html、design.cssの編集とアップロード

    ファイルを編集し、新規バージョンとしてアップロードします。変更後のコードはそれぞれ以下の通りです

    画像

    • layout.html（以下のHTMLコードにすべて差し替え）

      {% raw %}

      {{#fields}}
<div class="sampleNewsType">
    <h1>{{title}}</h1>
    {{#image}}
    {{#url}}
    <img src="{{url}}" data-asset-operation="view:{{id}}" alt="{{type}}">
    {{/url}}
    {{/image}}
    <p>{{{body}}}</p>
</div>
{{/fields}}

      {% endraw %}

    • design.css（以下のスタイルシートにすべて差し替え）

      .sampleNewsType {
  width: 100%;
  font-family: 'Helvetica Neue', 'Segoe UI', sans-serif-regular, Helvetica, Arial;
  font-size: 18px;
  margin:0;
  padding:0;
  font-style: normal;
  color: #333;
}
.sampleNewsType li {      
  list-style: none;
  font-size: 14px;
  font-style: normal;
  font-variant-caps: normal;
  color: #333;
  font-weight: 200;
  margin: 0em 0em 1em 0em;
}
.sampleNewsType img {
  width: 100%;
}
.sampleNewsType h1 {      
  font-size: 250%;
  width: 100%;
  margin:0;
  padding: 1em 0;
}
.sampleNewsType h2 {
  font-size: 200%;
  font-weight: bold;
  margin:0px;
  font-weight:300;
}
.sampleNewsType p {
  margin:5px;
}

    3.2 確認

    sampleNewsType-detailレイアウトが更新されたことを、サイト編集画面より確認します

    1. 左ナビゲーションから 「サイト」 をクリックします

    2. firstSiteを選択し、「開く」アイコン をクリックします

    3. ホームページ下部のコンテンツ・アイテムの タイトル or 画像 をクリックします

      画像

    4. コンテンツ・アイテムの詳細表示ページが変更されていることを確認します

      画像

    5. サイト編集ページを閉じます


    4. 変更内容を公開サイトに適用する

    コンテンツ・レイアウトの更新内容を、公開サイトに適用します。公開サイトに適用する際は、コンテンツ・レイアウトの再公開もしくはサイトの再公開を実施します。

    今回は、コンテンツ・レイアウトの再公開を実施し、コンテンツ・レイアウトのみを公開サイトに適用します

    4.1 コンテンツ・レイアウトの再公開

    1. 左ナビゲーションメニューの 「開発者」→「すべてのコンポーネントを開く」 をクリックします

    2. sampleNewsType-overview を選択し、「再公開」 をクリックします

      画像

    3. 確認のダイアログが表示されます。「確認して続行」 にチェックを入れ、「OK」 をクリックします

      画像

    4. コンポーネントの再公開が実行されます

    5. 同じ手順を繰り返し、sampleNewsType-detail を再公開します

      画像

    4.2 公開サイトの確認

    1. 左ナビゲーションから 「サイト」 をクリックします

    2. firstSite を選択し、「表示」 をクリックします

    3. 公開サイトのホームページおよび記事詳細ページのレイアウトが更新されていることを確認します

      • ホームページ

        画像

      • 記事詳細ページ

        画像


    5. 発展課題

    作業

    • sampleNewsType の新規コンテンツ・アイテムを1件作成します
    • firstSite の公開チャネルに対して、作成したコンテンツ・アイテムを公開します

    確認

    • firstSite のホームページに、2件のコンテンツ・アイテム が表示されること

      画像

    • 新規に作成・公開した2件目のコンテンツアイテムの画像（もしくはタイトル）をクリックすると、コンテンツ・アイテムの詳細表示ページ が表示されること

      画像


    以上でこのチュートリアルは終了です。


    ページトップへ戻る

    gdoc_arrow_left_alt Oracle Content Managementインスタンスを作成する Oracle Content ManagementをHeadless CMSとして使ってみよう【初級編】 gdoc_arrow_right_alt