Go to Qiita Advent Calendar 2024 Top
LoginSignup
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

@nakasato310

[Oracle Cloud] Oracle Content and Experience を Headless CMS として利用する React サンプルを動かしてみた

Last updated at Posted at 2021-03-25

はじめに

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

OCEの製品ドキュメントページには、OCEをヘッドレスコンテンツ管理システム（CMS）として使用するための、さまざまな開発フレームワークのサンプルが公開されてます

ここでは、React の Build a blog のサンプルを動かすことで、OCEをヘッドレスCMSとして利用するイメージを理解します

image.png

ここで紹介するチュートリアルを最後まで実施すると、以下のようなReactベースのブログサイトが表示されます。

  • トップページ
    image.png

  • カテゴリページ
    image.png

  • 記事詳細ページ
    image.png

準備

このチュートリアルを実施するには、以下の準備作業が必要です

  • Windows or MacOS が稼働するローカルマシン（ここではMacを利用）
  • Oracle Cloud アカウントの取得
  • OCEインスタンスの作成
  • 以下のアプリケーションロールが付与されたOCEユーザー
    • CECEnterpriseUser
    • CECContentAdministrator
    • CECRepositoryAdministrator
    • CECServiceAdministrator

公開済みのOCEチュートリアルを参考に、準備を進めてください

また、以下のチュートリアルを事前に実施しておくと、OCEをヘッドレスCMSとして利用するための理解が、さらに深まります。時間がありましたら、こちらも実施いただければ幸いです

ステップ1: OCEインスタンスにデモコンテンツをインポートし、公開する

参考マニュアル: Step 1: Prepare Oracle Content and Experience

1-1: OCEインスタンスにコンテンツを登録するリポジトリと公開チャネルを定義する

コンテンツを登録するリポジトリと、その登録されたコンテンツを公開する公開チャネルを定義します

  1. OCEインスタンスにサインインします

  2. 公開チャネルを作成します。ADMINISTRATION:コンテンツ→チャネルのパブリッシュを選択し、作成をクリックします
    001.png

  3. 以下の通りに入力し、保存をクリックします

    • 名前: OCEGettingStartedChannel
    • 公開チャネルのポリシー
      • アクセス: パブリック
      • 公開中: すべて公開できます
        002.png

  4. 続けてリポジトリを作成します。ADMINISTRATION:コンテンツ→リポジトリを選択し、作成をクリックします
    003.png

  5. リポジトリを作成します。以下の通りに入力し、保存をクリックします

    • 名前: OCEGettingStartedRepository
    • 公開チャネル: OCEGettingStartedChannel
    • 言語
      • デフォルト言語: English (United States) (en-US)
        004.png

1-2: コンテンツ・タイプの定義とコンテンツのインポート

アセット・リポジトリで利用するコンテンツ・タイプを定義し、その定義したコンテンツ・タイプから作成されるコンテンツ・アイテムおよびデジタル・アセットを登録します。

ここでは、Oracleより提供されるOCE Samples Asset Packを利用し、上記2つの作業をまとめて実施します。

  1. こちらのURLをクリックし、**OCE Samples Asset Pack (OCESamplesAssetPack.zip)**をダウンロードします

  2. ダウンロードしたOCESamplesAssetPack.zipを、ローカル環境上で展開（解凍）します。展開したディレクトリに OCEGettingStarted_data.zip があることを確認します
    image.png

  3. OCEインスタンスにサインインし、ADMINISTRATION:コンテンツ→リポジトリを開きます

  4. OCEGettingStartedRepositoryを選択し、コンテンツのインポートをクリックします
    image.png

  5. ファイルの選択画面が開きます。任意のフォルダ（ここではサンプルアセットフォルダ）に先ほど確認したOCEGettingStarted_data.zipをアップロードします。

  6. アップロードしたOCEGettingStarted_data.zipを選択し、OKをクリックします
    image.png

  7. コンテンツのインポートダイアログが表示されます。新規バージョンを追加して既存のアセットを更新を選択し、インポートをクリックします
    image.png

  8. コンテンツのインポート処理が実行されます。

  9. コンテンツ・パッケージOCEGettingStarted_data.zipを正常にインポートしました。が表示されることを確認し、OCEGettingStartedRepositoryを開きます。アセット・タイプに5つのアセット・タイプが登録されていることを確認し、右上の取消をクリックします
    image.png

[Memo]

Imageは事前定義済のアセット・タイプ（シードされたアセット・タイプ）で、jpgやpngなどの画像ファイルを管理します。
OCEGettingStarted...で始まる残り4つのアセットタイプは、今回のReactサンプルで利用するコンテンツ・タイプの定義です。それぞれの定義については、こちらでご確認ください

  1. 左ナビゲーションメニューのアセットをクリックし、OCEGettingStartedRepositoryを選択します。アセットが登録されていることを確認します
    image.png

1-3:コンテンツの公開

リポジトリにインポートされたすべてのアセットを公開します

  1. OCEGettingStartedRepositoryで、すべて選択のチェックボックスを選択し、公開をクリックします
    image.png

  2. チャネルで選択済を選択し、公開用のチャネルの選択でOCEGettingStartedChannelを選択します。検証をクリックします
    image.png

  3. 検証が実行されます。合計問題数が0件であること確認し、右上の公開をクリックします
    image.png

  4. すべてのアセットが公開され、アセットのステータスが公開済になります
    image.png

ステップ2: React でブログサイトを作成する

参考マニュアル: Step 2: Build the Blog in React

Reactでブログサイトを作成します。サイト内で利用するコンテンツは、ステップ1で公開したアセットを利用します

2-1: ReactブログサンプルのGitHubリポジトリをローカルにクローンする

ReactブログサンプルをGithubリポジトリよりクローンします

git clone https://github.com/oracle/oce-react-blog-sample.git
cd oce-react-blog-sample

インストールします

npm install

2-2: Reactアプリケーションの構成

Reactアプリケーションが利用するOCEインスタンスの情報は、クローンしたoce-react-blog-sampleディレクトリ配下の.envファイルに記述します。.envファイルの内容は以下の通りです

#
# Copyright (c) 2020, 2021 Oracle and/or its affiliates.
# Licensed under the Universal Permissive License v 1.0 as shown at https://oss.oracle.com/licenses/upl.
#

# The connection details for the OCE server to be used for this application
SERVER_URL=https://samples.mycontentdemo.com
API_VERSION=v1.1
CHANNEL_TOKEN=47c9fb78774d4485bc7090bf7b955632

# The port the Express Server is to run on
EXPRESS_SERVER_PORT=8080
  • 説明
    • SERVER_URL: OCEインスタンスのURL。URLの形式はhttps://<oceinstance>-<tenancy>.cec.ocp.oraclecloud.com
    • API_VERSION: バージョン名。現在はv1.1
    • CHANNEL_TOKEN: OCEGettingStartedChannelのチャネルトークン
    • EXPRESS_SERVER_PORT: Reactアプリケーションのポート番号

.envファイルをエディタ等で開き、SERVER_URLとCHANNEL_TOKENを、今回利用するOCEインスタンスのURLとチャネルトークンに書き換え、保存します

[Memo]
OCEGettingStartedChannelのチャネルトークンは、ADMINISTRATION:コンテンツ→チャネルのパブリッシュ→OCEGettingStartedChannelより確認します
image.png

2-3: Reactブログサンプルアプリケーションについて

Reactブログサンプルでは、OCEが提供するContent SDKを利用します。Content SDK の紹介、およびReactブログサンプルアプリケーションの解説は、以下のドキュメントをご確認ください

ステップ3:Reactアプリケーションを実行する

参考マニュアル: Step 3: Prepare Your Application for Deployment

3-1: Reactサンプルブログアプリケーションのビルドと実行

Reactサンプルブログアプリケーションをビルドし、実行します。

Development

npm run dev

Prodction

npm run build
npm start

実行時の Listening on port XXXX でポート番号を確認します（もしくは、.envファイルを開き、ポート番号を確認）

3-2: Reactブログサンプルサイトの確認

  1. ブラウザで http://localhost:<ポート番号>を開くと、以下のようなサイトが確認できます
    image.png

  2. How Toをクリックすると、How Toカテゴリの記事2件が表示されます
    image.png

  3. How Toカテゴリ内の**Create Beautiful Latte Art!**をクリックします。記事の詳細ページが表示されます
    image.png

3-3: アセットの更新

前の手順で確認した Create Beautiful Latte Art! の記事は、OCEの OCEGettingStartedRepositoryのアセット（コンテンツ・アイテム）として管理されています。ここではこの記事を編集・公開すると、Reactアプリケーション側も更新されることを確認します

  1. OCEにサインインし、アセット→OCEGettingStartedRepositoryを開きます

  2. 検索ボックスに**Create Beautiful Latte Art!**と入力し、検索を実行します

  3. Create Beautiful Latte Art!を選択し、編集をクリックします
    image.png

  4. コンテンツ編集画面が開きます。Content Item Data FieldsのArticle Contentを編集します。編集後は、右上の保存をクリックします

image.png

  1. バージョンがv1.1が作成され、ステータスがドラフトに設定されます。メニューより公開をクリックします
    image.png

  2. 検証結果が表示されます。問題件数が0件であることを確認し、公開をクリックします
    image.png

  3. Create Beautiful Latte Art!が公開され、バージョンv2となります。またステータスが公開中に更新されます
    image.png

  4. 別ブラウザでhttp://localhost:8080を開き**How To→Create Beautiful Latte Art!**をクリックします。先ほど編集した内容が表示されることを確認します

image.png

おわりに

最後までご確認いただきありがとうございました。

今回はReactのブログサンプルの使いかたを紹介しました。そのほかにもBuild an image galleryやBuild a minimal siteのチュートリアルも公開されています。また、React 以外にもOracle JETやJavaScriptのサンプルも公開されています。

興味がありましたら、お試しいただければ幸いです。サンプルが公開されているURLを再掲いたします

（2021年4月6日追記）
さらに、各種サンプルの使いかたに関するブログ記事（英語）が公開されています。よろしければご活用ください。

（追記ここまで）

以上でこのチュートリアルは終了です。引き続きOracle Content and Experience (OCE)をよろしくお願いいたします

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?