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!

Log In Register

Categories

Oracle Cloud 公式ブログ

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.css と layout.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 > assets の layout.html と design.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

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

Tagged:
· Share on TwitterShare on Facebook
Sign In or Register to comment.