Forum Stats

  • 3,714,741 Users
  • 2,242,616 Discussions
  • 7,845,043 Comments

Discussions

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Categories

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

Satoshi Nakane-Oracle
Satoshi Nakane-Oracle Posts: 32 Employee
edited February 2020 in Social Groups

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

前提条件:

image


チュートリアル:Oracle Content and Experience のコンテンツ・レイアウトをカスタマイズしよう

1. 説明

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

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

Develop Content Layout
https://docs.oracle.com/en/cloud/paas/content-cloud/creating-experiences/develop-content-layouts.html

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

前提条件の のチュートリアルを完了すると、以下のWebサイト (サイト名 : firstSite) が表示されます

  • firstSite : ホームページ
    ocesite026.png
  • firstSite : コンテンツ・アイテムの詳細表示ページ
    ocesite027.png

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

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

ocewcm011.jpg

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

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

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

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

  2. firstSite を選択し、「開く」をクリックします
    ocesite011.jpg

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

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

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

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

  7. ホーム」と「…Detail Page」の2ページのみが存在します。「ホーム」をクリックします
    cl017.jpg

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

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

  10. 「アイテムの表示」に「コンテンツ・リストのデフォルト」が設定されていることを確認します。
    cl019.jpg
    「コンテンツ・リストのデフォルト」とは、コンテンツ・タイプの「コンテンツ・レイアウト」タブで設定したコンテンツ・リストのデフォルトレイアウト(ここでは sampleNewsType-overview)でコンテンツ・アイテムを表示する、という意味になります
  11. …Detail Page」をクリックします

  12. Detail Page の中央に「コンテンツ・プレースホルダー」が配置されていることを確認します
    cl021.jpg
    「コンテンツ・プレースホルダー」コンポーネントは、指定されたコンテンツ・アイテムを動的に表示するコンポーネントです。具体的には、ニュース一覧を表示するページで1件のニュースでクリックした時に、そのニュースの全文を詳細表示する際に利用します。詳細は、下記ドキュメントを参考にしてください
    Content Placeholder
    https://docs.oracle.com/en/cloud/paas/content-cloud/creating-experiences/content-placeholder.html
  13. 「コンテンツ・プレースホルダー」コンポーネントの「設定」をクリックします
    cl020.jpg

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

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

以上で、配置されているコンポーネントと表示レイアウトの設定の確認は終了です。

次項からそれぞれのコンポーネントが利用しているコンテンツレイアウトを編集し、表示形式を変更します

2. sampleNewsType-overviewの編集

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

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

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

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

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

  2. sampleNewsType-overview をクリックします
    cl001.jpg

  3. assets フォルダをクリックします
    cl002.jpg

  4. design.csslayout.html をローカルPCにダウンロードします
    cl003.jpg

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

コンテンツ・レイアウトの開発に関する情報は、下記マニュアルも参考にしてくださいDevelop Content Layouts
https://docs.oracle.com/en/cloud/paas/content-cloud/creating-experiences/develop-content-layouts.html sampleNewsType-overviewassets
design.css   # コンテンツ・レイアウト専用のスタイルシート (CSS)
layout.html  # HTML の表示形式を定義するHTMLファイルrender.js      # layout.html で利用するデータを取得・変更します。必要に応じて動的な動作を追加できます
publish                 # 公開中のサイトで利用されているコンテンツ・レイアウトの構成ファイル一式 assetsappinfo.json_folder_icon.png

2.2 layout.html の編集

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

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

  3. 以下のHTMLコードをコピー&ペーストし、テキストエディタを保存します
{{#fields}}<div class="sampleNewsType">  <a href="{{scsData.detailPageLink}}" title="{{title}}">    <img src="{{image.url}}"></img>    <p>{{title}}</p>  </a></div>{{/fields}}

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 {      width: 100%;      max-width: 190px;      margin:0 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:0px;      vertical-align: middle;}

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

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

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

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

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

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

2.5 確認

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

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

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

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

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

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

3. sampleNewsType-detailの編集

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

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

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

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

  • layout.html

{{#fields}}<div class="sampleNewsType">  <h1>{{title}}</h1>  <img src="{{image.url}}"></img>  <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, 0px;}

3.2 確認

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

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

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

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

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

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

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

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

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

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

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

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

  3. 確認のダイアログが表示されます。「確認して続行」にチェックを入れ、「OK」をクリックします
    cl012.jpg
  4. コンポーネントの再公開が実行されます

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

4.2 公開サイトの確認

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

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

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

5. 発展課題

作業

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

確認

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

以上でこのチュートリアルは終了です。お疲れさまでした

Sign In or Register to comment.