Forum Stats

  • 3,714,736 Users
  • 2,242,615 Discussions
  • 7,845,036 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 Experience を Webコンテンツ管理(Web CMS) として利用しよう【初級編】

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

この文書は Oracle Content and Experience (OCE) のサイト作成機能を利用し、Web サイトを作成・公開する方法をステップ・バイ・ステップで紹介するチュートリアル【初級編】です。また、サイト上で公開するコンテンツは、アセット管理機能で管理されるコンテンツ・アイテムを利用します

前提条件：

  1. Oracle Content and Experience を Headless CMS として使ってみよう【初級編】が完了していること

image

概要

Oracle Content and Experience とは？

Oracle Content and Experience (以降OCE)は、API ファーストなアーキテクチャで、マルチチャネルでのコンテンツ配信を実現するインテリジェントなコンテンツ管理プラットフォームです。主な特徴は以下の通りです

【主な特徴】

  • 社内・社外とのファイル共有・コラボレーション
  • SaaS / PaaS / On-Premise と連携し、コンテンツを一元管理
  • ドラッグ&ドロップでマルチデバイス対応の Web サイトを簡単作成
  • AI ベースの画像認識技術を利用した画像の自動分類
  • API ファーストなマルチチャネルコンテンツ配信 (Headless CMS)
  • 企業内のコンテンツを一元的に管理するコンテンツ・ハブ

【製品情報はこちらから】

こんな課題に役立ちます

  1. 社内・社外とのファイル共有・コラボレーションをもっと便利にしたい
  2. Web, EMail, SNSで利用するマーケティングコンテンツの効率的な管理と配信を実現したい
  3. 商品の画像や文書などの各種コンテンツを管理し、効率的にマルチチャネルで提供したい
  4. 業務部門主導で Web サイトを活用した社内・社外向けの情報発信を、スピーディかつ低コストで実現したい

この文書で紹介すること

ここでは、上記 4.に示す利用方法、つまり OCE を Webコンテンツ管理(Web CMS) として利用する方法をStep by Stepで紹介するチュートリアルです。

この文書は、2020年1月時点での最新バージョン(20.1.1)を元に作成されてます

チュートリアル：Oracle Content and Experience を Webコンテンツ管理(Web CMS) として利用しよう【初級編】

説明

前提条件： Oracle Content and Experience を Headless CMS として使ってみよう【初級編】を完了していること

このチュートリアルでは、OCE のサイト機能を利用して Web サイトを作成・公開します。また、Web サイト上で公開するコンテンツは、以前のチュートリアルで作成したリポジトリ(Sample Content Repository) とコンテンツ・タイプ (sampleNewsType) を利用します。

作成するWebサイトは以下の通りです

  • サイト名：firstSite
  • 対応言語：日本語(ja)
  • サイトデザイン：OCE の事前定義済テンプレート(StarterTemplate)を利用

ocesite001.jpg

1. サイト作成の準備

1.1 ローカリゼーションポリシーの作成

このチュートリアルでは、日本語のWebサイトを作成します。そのため、Web サイト上で公開するコンテンツ・アイテムも日本語が必要です。このように、コンテンツ・アイテムを公開する際に「どの言語が必要なのか？」を定義するのがローカライゼーションポリシーです。

ここでは、日本語(ja)が必須、というポリシーを作成します

  1. OCE インスタンスにアクセスし、左ナビゲーションのADMINISTRATION の「コンテンツ」をクリックします
  2. 「コンテンツ」の右隣のメニューから「ローカライゼーション・ポリシー」を選択し、「作成」をクリックします
    ocewcm002.jpg
  3. ローカライゼーションポリシー作成します。ここでは以下の通りに入力し、「保存」をクリックします
    • プロパティ
      • 名前：firstSite Localization Policy
      • 説明：（任意）
    • 言語
      • 必須：日本語(ja)
      • デフォルト：日本語(ja)
      • オプション：（未選択）
        ocesite002.jpg
  4. firstSite Localization Policy が作成されます

1.2 コンテンツ・レイアウトの作成

コンテンツ・レイアウトとは作成されたコンテンツ・アイテムの表示形式を定めたものです。具体的には、Webサイトのページにアイテムを配置した時のアイテムのレイアウト(=HTML)を定義したものになります。

ここでは、sampleNewsType から作成されたコンテンツ・アイテムを表示する2つのコンテンツ・レイアウトを作成します。なお、作成される2つのコンテンツ・レイアウトは同じレイアウトになります

  • sampleNewsType-overview：コンテンツ・アイテムを一覧表示（インデックス表示）するレイアウト
  • sampleNewsType-detail：コンテンツ・アイテムを詳細表示（コンテンツそのものを表示）するレイアウト

  1. 左ナビゲーションの「開発者」をクリックします。続けて、コンポーネントの「すべてのコンポーネントの表示」をクリックします
    ocewcm005.jpg

    「開発者」メニューを利用するには、ユーザーに CECDeveloperUser  ロールの付与が必要です
  2. 右上の「作成」→「コンテンツ・レイアウトの作成」をクリックします
    ocewcm006.jpg

  3. コンテンツ・レイアウトを作成します。ここでは以下の通りに入力し、「作成」をクリックしま
    • コンテンツ・タイプを選択します：sampleNewsType
    • 表示するフィールドの選択：概要
    • コンテンツ・レイアウトの名前の指定：sampleNewsType-overview (※自動生成されます。変更しません)
    • コンテンツ・レイアウトの説明の指定：（任意）
      ocewcm007.jpg

  4. 同じ手順を繰り返し、sampleNewsType-detail を作成します。この時、「表示するフィールドの選択」は「詳細」を選択します
    ocewcm008.jpg

  5. 以上で、コンテンツ・レイアウトの作成は完了です
    ocewcm009.jpg

1.3 コンテンツ・レイアウトとコンテンツ・タイプを関連付け

前の手順で作成したコンテンツ・レイアウトを、sampleNewsType から作成されたコンテンツ・アイテムを表示する際に利用できるようにします

  1. 左ナビゲーションのADMINISTRATION の「コンテンツ」→「コンテンツ・タイプ」を選択します
  2. sampleNewsType をクリックします（もしくは、sampleNewsType を選択し、「編集」をクリック）
    ocewcm010.jpg

  3. 「コンテンツ・レイアウト」タブをクリックします
    ocewcm012.jpg

  4. デスクトップ・コンテンツ・レイアウトを下記の通りに設定し、「保存」をクリックします。続けて「閉じる」をクリックしま
    • コンテンツ・アイテムのデフォルト：sampleNewsType-detail
    • コンテンツ・リストのデフォルト：sampleNewsType-overview
    • コンテンツ・リストのデフォルト：sampleNewsType-overview
    • コンテンツ・プレースホルダーのデフォルト：sampleNewsType-detail
      ocewcm011.jpg

2.  サイトの作成

リポジトリ Sample Content Repository のアセットを利用する Web サイトを作成します。Web サイトはエンタープライズ・サイトを作成します。エンタープライズ・サイトは、以下の操作が可能となります

  • リポジトリ及びリポジトリ内のコンテンツ・アイテムやデジタル・アセット、ローカリゼーションポリシーなどを Web サイトで利用可能
  • Webサイトを作成すると、このWebサイト向けの「公開チャネル」も同じ名前で自動的に作成

エンタープライズ・サイトを作成するには、ユーザーに CECEnterpriseUser ロールの付与が必要です。サイトガバナンスが有効化されている場合、管理者がテンプレートを公開しないなぎり、サイトメニューからエンタープライズサイトを作成できません。代替え手段として、開発者→テンプレートより、テンプレートを選択し「サイトの作成」を実行することができます
StarterTemplate が表示されない場合、OCE インスタンスの管理者に連絡し、テンプレートへのアクセス権設定をお願いしてください。なお、テンプレートのアクセス権は、「開発者」→「テンプレート」→「StarterTemplate」→「メンバー」より設定します

2.1 サイトの作成

  1. 左ナビゲーションの「サイト」をクリックします
  2. 右上の「作成」をクリックします
    ocewcm013.jpg

  3. テンプレートを選択します。ここでは StarterTemplate を選択し、「次」をクリックします
    ocewcm014.jpg

  4. 以下の通りに入力し、「作成」をクリックします
    • 名前：firstSite
    • 説明：（任意）
    • エンタープライズ・サイトの作成：チェックを入れる
    • サイト接頭辞：firstsite（※自動設定されます。変更しない）
    • アセット・リポジトリ：Sample Content Repositry
    • ローカリゼーション・ポリシー：firstSite Localization Policy
    • デフォルト言語：日本語(ja) （※自動設定されます。変更不可）
      ocesite003.jpg

  5. firstSite が正常に作成されることを確認します
    ocesite004.jpg

2.2 作成された公開チャネルの確認

エンタープライズサイトを作成すると、同じ名前の公開チャネルが自動的に作成されます。ここでは、作成された公開チャネルを確認します

  1. 左ナビゲーションのADMINISTRATION の「コンテンツ」をクリックします
  2. 「コンテンツ」の右隣のメニューから「チャネルのパブリッシュ」を選択します
  3. サイト名と同じ firstSite をクリックします
    ocesite005.jpg

  4. 「公開チャネルのポリシー」が下記の通りであることを確認します。サイト作成時に指定したローカライゼーション・ポリシーが設定されていることを確認し、「閉じる」をクリックします
    • アクセス：パブリック
    • 公開中：すべてを公開できます
    • ローカリゼーション：firstSite Localization Policy
      ocesite006.jpg

3. サイト上で利用するアセットの作成

前の手順で作成した firstSite サイトで公開するアセットを作成します。ここでは、で登録したコンテンツ・アイテムをそのまま利用します。具体的には、既存のコンテンツ・アイテムに、公開チャネル (firstSite) を追加します

3.1 コンテンツ・アイテムにチャネルを追加

  1. 左ナビゲーションの「アセット」をクリックします
  2. リポジトリで Sample Content Repository が選択されていることを確認し、sample news content 001 を選択し、「チャネル」をクリックします
    ocesite007.jpg

  3. 右サイドパネルに「チャネル」が表示されます。「追加」をクリックします
    ocesite008.jpg

  4. 「firstSite」を選択し、「追加」クリックします
    ocesite009.jpg

  5. sample news content 001 のチャネルに firstSite が追加されます。あわせて、sample news content 001 のイメージ画像として設定されているデジタルアセット（ここではコーヒーカップの画像）のチャネルにも、firstSite が自動的に追加されます
    ocesite010.jpg

4. サイトの編集・公開

firstSite を編集し、公開します

4.1 サイトの編集

  1. 左ナビゲーションの「サイト」をクリックします
  2. firstSite を選択し、「開く」をクリックします
    ocesite011.jpg

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

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

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

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

  7. 今回のチュートリアルで利用しないページ（Developing TemplatesとPrivate Policy）を削除します
    1. Developing Template をクリックします
      ocewcm041.jpg

    2. 「ゴミ箱」アイコンをクリックします。続けて「OK」をクリックします
      ocewcm042.jpg

    3. 同じ手順で、Private Policy ページも削除します

    4. 最終的なページ階層は、Home と Detail Page の2つのみとなります
      ocesite013.jpg

  8. Home のページ構成を編集します
    1. Home をクリックします。続けて「ページ構成」アイコンをクリックします
      ocewcm043.jpg
    2. 「ページURL」の「オーバーライド」にチェックを入れます。続けて、「ページ名」を「Home」からカタカナの「ホーム」に変更します
    3. 「閉じる」をクリックします
      ocewcm044.jpg

  9. 右上の「保存」をクリックします
    ocewcm045.jpg

  10. ホームページを編集します。ホームページには「タイトル」と「段落」のコンポーネントが配置されており、それぞれ英語のダミーテキストが入力されています
    ocewcm046.jpg

  11. ホームページの「タイトル」と「段落」のテキストをそれぞれ日本語で編集します。ここでは以下の通りに編集します
    • タイトル：　ようこそ
    • 段落：　ここはファーストサイトのホームページです
      ocesite014.jpg


  12. コンテンツ・アイテムを表示（タイプ=sampleNewsType）を一覧表示するようにします
    1. 左メニューの「コンポーネント」を選択します。
    2. 「シード」を選択します
      ocewcm048.jpg

    3. 「コンテンツ・リスト」コンポーネントを、先ほど編集した「ここはサンプルサイトのホームページです」の直下にドラッグ&ドロップで配置します
      ocewcm049.jpg

    4. 配置した「コンテンツ・リスト」コンポーネントをクリックします
    5. 緑色の「コンテンツ・リスト」のメニューをクリックし、「設定」をクリックします
      ocewcm050.jpg

    6. 一般タブで、以下の通りに設定します
      • コンテンツ・タイプ：　sampleNewsType
      • 最大アイテム数：　2
      • 日付：　すべての日付
      • 並替え基準：　日付(新しいものから)
        ocewcm051.jpg

    7. 右上の「✖️」で、設定画面を閉じます

  13. コンテンツ・リストコンポーネント内には、前の手順で公開チャネル firstSite を追加した sample news content 001 が表示されます
    ocesite015.jpg

  14. スイッチを編集→表示に切り替え、「保存」をクリックします
    ocesite016.jpg

  15. 更新内容を適用します。「コミット」をクリックします。確認のダイアログが表示されるので「コミット」をクリックします
    ocesite017.jpg
    コミット操作により、更新内容がベース・サイトに反映され、更新（ここでは update）は削除されます

4.2 サイトの公開

サイトを公開します。オンライン状態のサイトを「公開」すると、ベース・サイトの内容がサイトにアクセス可能なユーザーすべてに表示されます

  1. firstSite を選択し、「公開」をクリックします
    ocesite018.jpg

  2. 「サイトと、サイトの公開チャネルのターゲット対象になっているすべてのアセットの公開」を選択し、「OK」をクリックします
    ocesite019.jpg

  3. サイトの公開検証が行われます。検証チェックに合格したことを確認し、「公開」をクリックします
    ocesite020.jpg
    サイトだけではなく、firstSite 上に配置したアセット（sample news content 001 と SampleImage1.jpg）も検証され、公開準備が完了されています。これは、2つのアセットがサイトの公開チャネル（firstSiteチャネル）のターゲット対象となっているためです
  4. しばらくすると、サイトのステータスが「公開」に遷移します
    ocesite021.jpg

4.3 サイトのオンライン化

サイトを「オンラインにする」と、完全にレンダリングされたHTMLバージョンのサイトが作成され、Oracle Cloud のホスティング環境にコピーされます。さらに、オンライン・サイトの URL が払い出され、サイト訪問者は Web ブラウザでこの URL にアクセスし、サイトを表示できるようになります

オンライン・サイトの URL は、サイトの「プロパティ」より確認できます。デフォルトのURLの形式は次のとおりです。

https://<OCE instance>-<Cloud accont>.cec.ocp.oraclecloud.com/site/<Site name>

  1. firstSite を選択し、「オンラインにする」をクリックします
    ocesite022.jpg

  2. 「確認して続行」にチェックを入れ、「オンラインにする」をクリックします

  3. サイトがオンライン状態に遷移します
    ocesite024.jpg
    サイトを「オンラインに設定」すると、Oracle Cloud のホスティング環境にコピーされたすべてのファイルが削除され、サイト訪問者はサイトを表示できなくなります

5. 公開サイトの確認

公開されたオンライン状態のサイトを確認します

  1. firstSite を選択し、「プロパティ」を開きます
  2. 「サイトURL」をコピーし、別ブラウザで開きます
    ocesite025.jpg

  3. firstSite が表示されます。「サンプルニュース001の本文です」の下の Details をクリックします
    ocesite026.png
    1項で作成した2つのコンテンツ・レイアウト（sampleNewsType-overview と sampleNewsType-detail）は同じレイアウトになります。そのため、Web サイト上での表示イメーは、どちらも同じになります。それぞれのレイアウトを変更することで、Web サイト上での表示イメージを変えることができます
  4. sample news content 001 の詳細表示ページが表示されます。ナビゲーション上の「ホーム」をクリックします
    ocesite027.png

  5. firstSite の「ホーム」に戻ります

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

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