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

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

前提条件

OCMインスタンスが作成済であること(以下の作成手順参照)
- OCI IAM Identity Domain環境でOracle Content Managementインスタンスを作成する
- Oracle Content Management インスタンスを作成する
OCM の利用ユーザーに、少なくとも下記4つのOCM インスタンスのアプリケーション・ロールが付与されていること
- CECContentAdministrator
- CECDeveloperUser
- CECEnterpriseUser
- CECRepositoryAdminisrrator
[Memo]
ユーザーの作成とアプリケーションロールの付与手順は、OCI IAM Identity Domain環境でOracle Content Managementインスタンスの利用ユーザーを作成するもしくはOracle Content Managementインスタンスの利用ユーザーを作成するをご確認ください。
以下2つのチュートリアルが完了していること
- Oracle Content Management を Headless CMS として使ってみよう【初級編】
- Oracle Content Management を WebCMS として使ってみよう【初級編】

1. 説明

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

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

Develop Content Layout

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

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

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

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

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

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

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

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

左ナビゲーションの 「サイト」 をクリックします
firstSite を選択し、「開く」アイコン をクリックします
サイト編集画面が表示されます。「ベース・サイト▼」 をクリックし、「新規更新の作成」 を選択します
「新規更新の名前の指定」に 「update」 と入力し、「OK」 をクリックします
「update」に切り替わっていることを確認します。表示側にあるスイッチを 「編集」 モードに切り替えます
左サイドバーの 「ページ」→「ホーム」 をクリックします
「段落」コンポーネントの下に 「コンテンツ・リスト」 コンポーネントが配置されていることを確認します
「コンテンツ・リスト」コンポーネントの 「設定」 をクリックします
右サイドバーに「コンテンツ・リスト設定」が表示されます。「アイテムの表示」メニューに 「コンテンツ・リストのデフォルト」 が設定されていることを確認します
[Memo]
「コンテンツ・リストのデフォルト」とは、コンテンツ・タイプの「コンテンツ・レイアウト」タブで設定した コンテンツ・リストのデフォルトレイアウト （ここでは sampleNewsType-overview）でコンテンツ・アイテムを表示する、という意味になります。詳細は下記ドキュメントを参考にしてください
- Content List
左サイドバーの 「ページ」→「ホーム」→「Detail」 をクリックします
Detailページの中央に 「コンテンツ・プレースホルダー」 が配置されていることを確認します
[Memo]
「コンテンツ・プレースホルダー」コンポーネントは、指定されたコンテンツ・アイテムを動的に表示するコンポーネントです。具体的には、ニュース一覧を表示するページで1件のニュースでクリックした時に、そのニュースの全文を詳細表示する際に利用します。詳細は、下記ドキュメントを参考にしてください
- Content Placeholder
「コンテンツ・プレースホルダー」コンポーネントの 「設定」 をクリックします
左サイドバーに「コンテンツ・プレースホルダ設定」が表示されます。「アイテムの表示」に 「コンテンツ・プレースホルダーのデフォルト」 が設定されていることを確認します
[Memo]
「コンテンツ・プレースホルダーのデフォルト」とは、コンテンツ・タイプの「コンテンツ・レイアウト」タブで設定した コンテンツ・プレースホルダーのデフォルト （ここでは sampleNewsType-detail）でコンテンツ・アイテムを表示する、という意味になります。詳細は下記ドキュメントを参考にしてください
- Content Placeholder
表示モードに切り替えます
以上で、配置されているコンポーネントと表示レイアウトの設定の確認は終了です。次項からそれぞれのコンポーネントが利用しているコンテンツレイアウトを編集し、表示形式を変更します

2. sampleNewsType-overviewの編集

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

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

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

sampleNewsType-overview コンテンツ・レイアウトを開きます。ここではWebブラウザを利用します
左ナビゲーションメニューの 「開発者」→「すべてのコンポーネントを開く」 をクリックします
sampleNewsType-overview をクリックします

[Memo]
フィルタで 「コンテンツ・レイアウト」 を選択すると、コンテンツ・レイアウトのみを表示させることができます
assets フォルダをクリックします
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
```
- コンテンツ・レイアウトの開発に関する情報は、下記マニュアルも参考にしてください
  - Develop Content Layouts

2.2 layout.html の編集

ローカルPCにダウンロードした layout.html をテキストエディタで開きます
layout.html に記述されるHTMLコードを すべて削除 します
以下のHTMLをコピー&ペーストし、テキストエディタを 「保存」 します
```
 {{#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}}
```
【Memo】
imgタグ内のdata-asset-operationは、アセット消費分析(Asset Consumption Analytics)で利用され、アセットの表示(view)やロード(load)などのアセット消費イベントを自動的に収集します。収集したイベントは、アセットのアナリティクスメニューより確認できます。詳細は、下記マニュアルを参考にしてください
- Prepare Content Layouts and Site Pages to Use Consumption Analytics

2.3 design.css の編集

ローカルPCにダウンロードしたdesign.cssをテキストエディタで開きます
design.cssに記述されるスタイルシートをすべて削除します

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

 .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 編集ファイルのアップロード

開発者 > コンポーネント > sampleNewsType-overview > assets を開きます
layout.html を選択し、「新規バージョンのアップロード」アイコン をクリックします
ローカルPCで編集した layout.html を指定します。この時、同じファイル名でアップロードします
新規バージョンとして、layout.html が登録されたことを確認します
同じ手順を繰り返し、ローカルPCで編集した design.css を新規バージョンとしてアップロードします

2.5 確認

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

左ナビゲーションから 「サイト」 をクリックします
firstSiteを選択し、「開く」アイコン をクリックします
画面下のコンテンツ・アイテムの表示形式が変更されていることを確認します
表示される 画像 or タイトル をクリックすると、コンテンツ・アイテムの詳細表示ページに遷移することを確認します。なお、sampleNewsType-detailコンテンツ・レイアウトを編集していないため、表示形式に変更はありません
サイト編集画面を閉じます

3. sampleNewsType-detailの編集

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

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

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

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

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

  {{#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}}

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;
  }