Forum Stats

  • 3,714,720 Users
  • 2,242,611 Discussions
  • 7,845,026 Comments

Discussions

Howdy, Stranger!

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

Categories

React開発のためにOracle Content and ExperienceのStarter Site CLIを使ってみよう

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

この文書はOracle Content and Experience (OCE) のStarter Site CLI の使用方法をステップ・バイ・ステップで紹介するチュートリアルです。

なお、このチュートリアルは、下記に記載されたドキュメントを元に作成されています

前提条件:

  1. OCE のユーザー権限を有すること(最低限、以下のロールが付与されていること)
    • CECEnterpriseUser
    • CECDeveloperUser
    • CECRepositoryAdministrator
    • CECContentAdministrator
  2. クライアント環境に NodeJS v8 以降がインストールされていること。インストールされていない場合は、次の URL から NodeJS をダウンロードしてインストールできます。
    https://nodejs.org/en/download/
  3. 下記チュートリアルを通じて、OCE の「アセット管理」と「サイト機能」の概要および基本的な利用方法を習得していること

この文章の画面ショットは OCE 19.3.1 のバージョンで作成されています。そのため、現在の OCE のユーザーインタフェースと異なっている場合があります

image


0. 説明

Oracle Content and Experience(OCE)のStarter Site CLIは、React開発を始めるための簡単な方法です。このチュートリアルでは、Starter Site CLIを使用して、OCEからアセットとテンプレートを使用してReact.jsサイトを生成するための基本的な概要を説明します。

このチュートリアルの目的は次のとおりです。

  • Starter Site CLI のインストール方法を説明
  • Starter Site CLI を使用して OCE からアセットをダウンロードする方法を説明
  • Starter テンプレートとダウンロードしたアセットを使用して React サイトを作成する方法を説明

1. 事前準備

1.1. サイトのテンプレートのインポート

React サイトで利用するアセットを OCE にインポートします。ここでは、事前にエクスポートしたエンタープライズ・サイト(含むデジタル・アセットとコンテンツ・アイテム)のテンプレートをインポートします

  1. Webブラウザを起動し、OCE にログインします。
  2. 左側のナビゲーションの「開発者」をクリックし、開発者用の画面に切り替えます。

    image002.png

  3. 「すべてのテンプレートの表示」をクリックします。

    image003.png

  4. 右上の「作成」をクリックし、「テンプレート・パッケージのインポート」を選択します。

    image004.png

  5. 「アップロード」をクリックします。

    image005.png

  6. サイトのテンプレートファイル「MaximumHOLUser2_Template.zip」をローカルにダウンロードし、ドキュメントの任意のフォルダにアップロードします
  7. アップロードされたテンプレートファイルを選択し、「OK」をクリックします

    image007.png

  8. テンプレートが無事にインポートされたことを確認します。

    image008.png

1.2. ローカリゼーション・ポリシー及びリポジトリの作成

新しいローカリゼーション・ポリシー及びリポジトリを作成します。

  1. 左側のナビゲーションの一番下にある「アセット」をクリックします。

    image009.png

  2. 「アセット」をクリックし、表示されたメニューから「ローカリゼーション・ポリシー」をクリックします。

    image010.png

  3. 右上の「作成」をクリックします。

    image011.png

  4. 名前に”policy_maximum”を、必須言語に”en-US”を設定し、「保存」をクリックします。

    image012.png

  5. 作成したローカリゼーション・ポリシーを確認します。

    image013.png

  6. 次の図のように、「リポジトリ」画面に切り替えます。

    image014.png

  7. 右上の「作成」をクリックします。

    image015.png

  8. 名前に”repo_maximum”を、デフォルト言語に”en-US”を設定し、「保存」をクリックします。

    image016.png

  9. 作成したリポジトリを確認します。

    image017.png

1.3. サンプルサイトの作成

1.1 項でインポートしたサイトテンプレートを利用して、サイトを作成します。この際に、1.2 項で作成したリポジトリおよびローカリゼーションポリシーを指定します

なお、このサイトそのものは公開しません。サイトの公開チャネルに対してアセットを公開し、それらを React サイトから再利用します(下記の作成イメージ参照)

react1.jpg

  1. 左側のナビゲーションの「サイト」をクリックし、サイトの管理画面に切り替えます。
  2. 「作成」をクリックします。

    image019.png

  3. 「MaximumHOLUser2_Template」を選択し、「次」をクリックします。

    image020.png

  4. サイト名に”MaximumTireSite”を、アセット・リポジトリに前に作成した”repo_maximum”を指定します。ローカリゼーション・ポリシーに前に作成した”policy_maximum”を指定します。デフォルト言語に”en-US”を指定します。「作成」をクリックします。

    image021.png

    1つの OCE インスタンスで、サイトの名前はユニークする必要があります。名前が重複するサイトを作成すると、エラーとなり作成が失敗します。
  5. サイトが作成されたことを確認します。

    image022.png

1.4. アセットの公開

前の手順で作成したサイト (MaximumTireSite) で利用するコンテンツ・アイテムを公開します。

  1. 左側のナビゲーションから「アセット」をクリックします。
  2. リポジトリ”repo_maximum”を選択します。「フィルタ・パネルのトグル」をクリックし、表示されたフィルタ・パネルで「デジタル・アセット」の✔を外します。すべてのコンテンツ・アイテムが表示されます。

    image024.png

  3. 「すべて選択」をクリックします。

    image025.png

  4. 「公開」をクリックします。

    image026.png

  5. 検証結果がすべて問題なしを確認し、「公開」をクリックします。

    image027.png

  6. アセットが公開されたことを確認します。

    image028.png

以上の作業で、公開チャネル MaximumTireSite でアセットが公開されました

2. OCE Starter Site CLIのインストール

ここでは、OCE Starter Site CLIをインストールします。

2.1. Starter Site CLI ファイルの取得

  1. Starter Site CLI ファイルは下記githubサイトより取得します。

    https://github.com/oracle/content-and-experience-toolkit

    二つの方法があります。一つはgit cloneを利用します。

    git clone https://github.com/oracle/content-and-experience-toolkit.git

    image029.png

    もう一つの方法は、zipファイルをダウンロードします。ダウンロードした content-and-experience-toolkit-master.zip を、任意のフォルダに解凍します。

    image030.png

2.2. Starter Site CLI のインストール

  1. コマンドプロンプト(cmd)を起動し、取得したStarter Site CLIフォルダに移動します。
     cd content-and-experience-toolkit\react-starter-sites
  2. (オプション)会社のWebプロキシを使用している場合は、プロキシと連携するようにnpmを設定します。
    npm config set proxy http://proxy.company.example.com:8080npm config set https-proxy http://proxy.company.example.com:8080
  3. npm install -gを実行します。Mac の場合は、sudo npm install -g を実行します
    npm install -g

    image031.png

    再インストールする場合は、まずnpm uninstall -g cecss-cliでアンインストールする必要があります。(Macを利用している場合は、sudo npm uninstall -g cecss-cliでアンインストールします。)

2.3. 基本コマンドの理解

  1. Starter Site CLIのインストール完了後、”cecss –h”を実行し、コマンドの使い方を確認できます。
    cecss -h


    ”cecss <command> -h”を実行し、更に詳しい情報が表示されます

    cecss export-server-content -hcecss list-server-content-types –h
  2. 基本的なコマンドは以下です。

    コマンド

    説明

    cecss create-site <name>

    ローカルまたはOCEサーバーからのコンテンツのサイト<name>を作成します。

    cecss export-server-content <channel>

    チャンネル<channel>に基づいてコンテンツテンプレートを作成してから、OCEサーバーからアーカイブをエクスポートおよびダウンロードします。

    cecss list-server-content-types

    サーバーからすべてのコンテンツタイプを一覧表示します。

    cecss list-server-channels

    サーバーからすべてのチャンネルを一覧表示します。

    cecss develop

    開発サーバーを起動します。 何かが変更された場合、ファイルの監視、再構築、およびホットリロードを行います。

    cecss build

    OCEスターターサイトを構築します。

    cecss serve

    構築したOCEスターターサイトを実行します。

3. Reactサイトの作成

このチュートリアルでは、OCEで作成および公開されたアセットを使用してReactサイトを作成します。

3.1. .cec_propertiesファイルの作成

OCEに接続するためのプロパティファイルを作成します

  1. ユーザのホームフォルダ(たとえば、Mac/Linuxの場合は/Users/<userid>、Windowsの場合はC:\Users\<userid>)に移動します。
  2. “.cec_properties”という名前のファイルを作成します。
    Windowsのフォルダに、拡張子のみのファイルは直接に作成できないため、コマンドプロンプトcmdを起動し、echo > .cec_propertiesを実行し作成できます。
  3. ファイルに次のプロパティを追加します。
    cec_url=https://<instance>-<account>.cec.ocp.oraclecloud.comcec_username=<username>cec_password=<password>cec_env=pod_ec
    cec_urlはOCEサービスURLです。cec_usernameとcec_passwordはOCEログイン用のユーザー名とパスワードです。

3.2. コンテンツ・アイテムのエクスポート

OCE上で公開されているアセットを、React サイト作成時のコンテンツテンプレートとしてダウンロード(エクスポート)します。OCE上のコンテンツを取得するには3つの方法があります。

  1. OCEサイトテンプレート
    OCEサイトテンプレートにコンテンツタイプとコンテンツアイテムが含まれている場合は、OCEサーバーからサイトテンプレートをエクスポートし、結果の.zipファイルを使用してサイトを作成できます。
  2. チャンネルで公開されたコンテンツ
    "cecss export-server-content"コマンドを使用して、公開されているすべてのコンテンツアイテムをチャンネルからエクスポートできます。
    生成された.zipファイルを使ってサイトを作成します。このコマンドを実行するには、.cec_propertiesファイルにOCEサーバーを指定する必要があります。
  3. OCE サーバー上のライブデータ
    OCEサーバーからコンテンツ・タイプを使用してサイトを作成できます。(最初にOCEサーバーを構成する必要があります。)


このチュートリアルは (ii.) を実施します。詳しい手順は下記の通りです

  1. Starter Site CLIフォルダの下で下記のコマンドを実行し、チャネルの一覧を確認します。MaximumTireSite チャネルが表示されたことを確認します。
    cecss list-server-channels

    image032_1.png

  2. 下記のコマンドを実行し、OCE上の MaximumTireSite チャネルで公開されているコンテンツをエクスポートします
     cecss export-server-content MaximumTireSite

    image033.png

    出力フォルダパラメータ”-o”を指定しない場合は、エクスポートされた.zipファイルがStarter Site CLIフォルダに保存されます。エクスポートされたファイルが<NameOfTheChannel>_export.zipという形式になります。 今回の場合は MaximumTireSite_export.zip となります

3.3. Reactサイトの作成

  1. React サイトの作成時に利用するReact サイトテンプレートMaximumTemplate.zipをダウンロードします
  2. Starter Site CLIフォルダの下で下記のコマンドを実行します。
    cecss create-site MaximumTireBlog -f <path to React site template> -c <path to local content .zip file>

    image034.png

    -f <path to site template>を指定しない場合は、デフォルトのテンプレートを利用します。このチュートリアルでは提供されるテンプレートを指定します。
    <path to React site template>は、ダウンロードしたReact サイトのテンプレートMaximumTemplate.zipのパスです。フルパス指定が可能です。
    <path to local content .zip file>は、前の手順でエクスポートした MaximumTireSite_export.zip のパスです。フルパス指定が可能です。
  3. 開発モードで React サイトを実行します。
    cd MaximumTireBlog
    npm install
    image035.png

     cecss develop

    image036.png

  4. ブラウザーを起動し、http://localhost:9090にアクセスします。MaximumTireBlog の React サイトが表示されます

    image037.png

    開発モードでは、srcフォルダにあるJavaScript、html及びcssファイルを更新したら、ブラウザーが自動的にリロードされます。

4. React サイトの修正

作成した MaximumTireBlog の React サイトを修正します。

4.1. ロゴの変更

React サイトのロゴを修正します。ここでは、OCE のリポジトリ repo_maximum に保管されるロゴ画像を利用します。リポジトリに保管されるロゴ画像を利用するには、そのデジタルアセットを公開し、フルパスを取得します

  1. OCEの左ナビゲーションから「アセット」をクリックします。

  2. リポジトリ”repo_maximum”を選択します。
  3. 「フィルタ・パネルのトグル」をクリックし、表示されたフィルタ・パネルで「デジタル・アセット」をチェックオンにします。表示されたロゴイメージmaximum-logoを選択し、「公開」をクリックします。

    image038.png

  4. 検証結果がすべて問題なしを確認し、「公開」をクリックします。

    image039.png

  5. アセットが公開されたことを確認し、「表示」をクリックします。

    image040.png

  6. イメージのプレビュー画面が表示されます。右上の「サイドバーの切り替え」をクリックし、ドロップダウンメニューから「API情報」をクリックします。

    image041.png

  7. 「配信URL」を別のブラウザータブで開きます。表示されるJSONからイメージのURLを選択してコピーします。例えば、https://shenzhuoce-orasejapan.cec.ocp.oraclecloud.com/content/published/api/v1.1/assets/CONT3B57D36FD2F64E3D9A19ACC421F36AA3/native/maximum-logo.jpg?channelToken=70fcb318c31ea3c0f4e7eada0e2c8da8のようなURLになります

    image042.png

  8. MaximumTireBlog/src/appの配下に移動し、任意のテキストエディタでapp/App.jsを開きます。ロゴ画像を指定する <img src={logo} ...>を前の手順で取得したロゴのURLに変更します。
  9. 続けて、ラベル”Maximum_ Article”を”Home”に、ラベル”Maximum_Tire”を”Articles”に変更します。

    <変更前>

    const Header = (props) => {    var language = props.language;    var typePath = language ? rootPath + language + '/' : rootPath;    if (props.match.params.search) {        return (                        <nav className="navbar">                            <div className="navbar-header">                <a className="navbar-brand" href="index.html"><img src={logo} alt="" /></a>                <h1 className="navbar-brand">{SITE_NAME}</h1>            </div>            <div>                <ul className="nav justify-content-end">                    <li className="nav-item"><a className="nav-link" href={ rootPath + 'Maximum_Article' }>Maximum_Article</a> </li>                    <li className="nav-item"><a className="nav-link" href={ rootPath + 'Maximum_Tire' }>Maximum_Tire</a> </li>                </ul>                <LocaleSwitcher {...props}  />              </div>            </nav>          )    } else {        return (            <nav className="navbar">                            <div className="navbar-header">                <a className="navbar-brand" href="index.html"><img src={logo} alt="" /></a>                <h1 className="navbar-brand">{SITE_NAME}</h1>            </div>            <div>                <ul className="nav justify-content-end">                    <li className="nav-item"><a className="nav-link" href={ rootPath + 'Maximum_Article' }>Maximum_Article</a> </li>                    <li className="nav-item"><a className="nav-link" href={ rootPath + 'Maximum_Tire' }>Maximum_Tire</a> </li>                </ul>                <LocaleSwitcher {...props}  />                <Searchbar {...props}  />                   </div>            </nav>          )    }}

    <変更後>

    const Header = (props) => {    var language = props.language;    var typePath = language ? rootPath + language + '/' : rootPath;    if (props.match.params.search) {        return (                        <nav className="navbar">                            <div className="navbar-header">                <a className="navbar-brand" href="index.html"><img src="https://shenzhuoce-orasejapan.cec.ocp.oraclecloud.com/content/published/api/v1.1/assets/CONT3B57D36FD2F64E3D9A19ACC421F36AA3/native/maximum-logo.jpg?channelToken=70fcb318c31ea3c0f4e7eada0e2c8da8" alt="" /></a>                <h1 className="navbar-brand">{SITE_NAME}</h1>            </div>            <div>                <ul className="nav justify-content-end">                    <li className="nav-item"><a className="nav-link" href={ rootPath + 'Maximum_Article' }>Home</a> </li>                    <li className="nav-item"><a className="nav-link" href={ rootPath + 'Maximum_Tire' }>Articles</a> </li>                </ul>                <LocaleSwitcher {...props}  />              </div>            </nav>          )    } else {        return (            <nav className="navbar">                            <div className="navbar-header">                <a className="navbar-brand" href="index.html"><img src="https://shenzhuoce-orasejapan.cec.ocp.oraclecloud.com/content/published/api/v1.1/assets/CONT3B57D36FD2F64E3D9A19ACC421F36AA3/native/maximum-logo.jpg?channelToken=70fcb318c31ea3c0f4e7eada0e2c8da8" alt="" /></a>                <h1 className="navbar-brand">{SITE_NAME}</h1>            </div>            <div>                <ul className="nav justify-content-end">                    <li className="nav-item"><a className="nav-link" href={ rootPath + 'Maximum_Article' }>Home</a> </li>                    <li className="nav-item"><a className="nav-link" href={ rootPath + 'Maximum_Tire' }>Articles</a> </li>                </ul>                <LocaleSwitcher {...props}  />                <Searchbar {...props}  />                   </div>            </nav>          )    }}
  10. app/App.js を保存します。ブラウザが自動的に最新の変更をリロードし、React サイトは以下のように修正されます

    image044.png

4.2. 記事詳細ページの変更

記事の詳細ページ(Maximum_Article / Maximum_Article.js)のレイアウトを修正します

  1. Article Detail(Maximum_Article / Maximum_Article.js)の不要な画像を削除し、テキストの配置を変更します。
    <変更前>

    class Maximum_ArticleDetail extends React.Component {    render() {        var item = this.props.item;        if (!item || !item.id) {            return (                <div />            );        }        return (            <div className="col">            <div className="animated slideInUp">                 {item.fields['maximum_article_image_1000x562'] ? <img src={ '/api/content/published/api/v1.1/assets/' + item.fields['maximum_article_image_1000x562']['id'] + '/native' } /> : <span />}            </div>            <div className="animated slideInUp">                 {item.fields['maximum_article_image_280x210'] ? <img src={ '/api/content/published/api/v1.1/assets/' + item.fields['maximum_article_image_280x210']['id'] + '/native' } /> : <span />}            </div>            <div className="text-justify animated fadeInDown">                 <span>{item.fields['maximum_article_category']}</span>            </div>            <div className="text-justify animated fadeInDown">                 <div>{renderHTML(item.fields['maximum_article_content'])}</div>            </div>            <div className="text-justify animated fadeInDown">                 {item.fields['maximum_article_date'] ? <span>{item.fields['maximum_article_date']['value']}</span> : <span />}            </div>            </div>        );    }}

    <変更後>

    以下にコードをコピーして貼り付けます。

    class Maximum_ArticleDetail extends React.Component {    render() {        var item = this.props.item;        if (!item || !item.id) {            return (                <div />            );        }        return (            <div className="col">            <div className="text-sm-center text-uppercase font-weight-bold animated fadeInDown"> <h1>{item['name']}</h1> </div>            <div className="animated slideInUp topImage">                 {item.fields['maximum_article_image_1000x562'] ? <img src={ '/api/content/published/api/v1.1/assets/' + item.fields['maximum_article_image_1000x562']['id'] + '/native' } /> : <span />}            </div>            <div className="text-justify animated fadeInDown">                 <div>{renderHTML(item.fields['maximum_article_content'])}</div>            </div>            <div className="text-justify animated fadeInDown">                 {item.fields['maximum_article_date'] ? <span>{item.fields['maximum_article_date']['value']}</span> : <span />}            </div>            </div>        );    }}

  2. assets/app.css に以下の内容を追加します。

    @media screen and (min-width:1000px) {     /* 画面サイズが1000pxからはここを読み込む */    .topImage {        float: left;        max-width: 700px;        padding: 0 30px 20px 0;    }}

  3. ファイルを保存すると、ブラウザが自動的に最新の変更をリロードします。


    <変更前>

    image045.png

    <変更後>

    image046.png

4.3. QueryItems の修正

React サイト上で表示する記事一覧を最新の記事から表示するように、修正します。具体的には、OCE のコンテンツ・アイテムの一覧を取得する REST API をコールする際のクエリパラメータの offset のデフォルト値を 1 → 0 に修正します

  1. MaximumTireBlog/src/common/queryitems.js を開き、queryItems() のコードを以下の通りに修正します。具体的にはquery.offset のデフォルト値を 1 → 0 に変更します
    <変更前>
    export function queryItems(siteName, language, query) {    var typeName = query.type;    var searchString = query.searchString;    var q = language ? '((type eq "' + typeName + '") and (language eq "' + language + '"))' : '((type eq "' + typeName + '"))';    var queryString = '?fields=ALL&q=' + q;    queryString = queryString + '&orderBy=' + (query.orderBy ? query.orderBy : 'updatedDate:des');    queryString = queryString + '&limit=' + (query.limit ? query.limit : '10');    queryString = queryString + '&offset=' + (query.offset ? query.offset : '1');    if (searchString) {        queryString = queryString + '&default=' + searchString + '*';}

    <変更後>

    export function queryItems(siteName, language, query) {
        var typeName = query.type;
        var searchString = query.searchString;
        var q = language ? '((type eq "' + typeName + '") and (language eq "' + language + '"))' : '((type eq "' + typeName + '"))';
        var queryString = '?fields=ALL&q=' + q;
        queryString = queryString + '&orderBy=' + (query.orderBy ? query.orderBy : 'updatedDate:des');
        queryString = queryString + '&limit=' + (query.limit ? query.limit : '10');
        queryString = queryString + '&offset=' + (query.offset ? query.offset : '0');
        if (searchString) {
            queryString = queryString + '&default=' + searchString + '*';
    }
  2. queryItems.js を保存します。これにより、最新記事から更新日時からの降順(最大10件まで)が取得できるようになります

4.4. Tire Bannerの追加

各ページで複数のコンポーネントを含めるように修正します。具体的には、React サイトの各ページのバナーとして Tire Banner を表示するようにします

  1. “app/App.js”ファイルを開き、次のContentSwitcherクラスのコードを置き換えます。
    <変更前>
    class ContentSwitcher extends React.Component {    render() {        if (this.props.match.params.search) {            return (                <div className="SearchResult">                <Header {...this.props}/>                <Searchbar {...this.props}  />                <this.props.ContentComp {...this.props}/>                </div>            );        } else {            return (                <div>                <Header {...this.props}/>                <this.props.ContentComp {...this.props}/>                </div>            );        }    }}

    <変更後>

    以下にコードをコピーして貼り付けます。

    class ContentSwitcher extends React.Component {    render() {        var bannerProps = {match: {params: {limit: 1,orderBy: "updatedDate:des"}}}        if (this.props.match.params.search) {            return (                <div className="SearchResult">                <Header {...this.props}/>                <Maximum_Tire {...bannerProps}/>                <Searchbar {...this.props}  />                <this.props.ContentComp {...this.props}/>                </div>            );        } else {            return (                <div>                <Header {...this.props}/>                <Maximum_Tire {...bannerProps}/>                <this.props.ContentComp {...this.props}/>                </div>            );        }    }}

    【解説】すべての画面のヘッダー以下に、Maximum_Tireというコンテンツタイプのコンテンツを表示します。制限条件は、更新日の逆順でソートした後の一件目のコンテンツを表示します。
  2. Maximum_Tireコンポーネントを修正します。Maximum_Tire/Maximum_Tire.jsファイルを開き、Tire bannerの表示方法を変更します。

    <変更前>

    class Maximum_TireSummary extends React.Component {    render() {        var item = this.props.item;        if (!item || !item.id) {            return (                <div />            );        }        var detailUrl = (this.props.language ? '/' + this.props.language  : '') + '/Maximum_Tire/' + item.id;        return (            <div className="col-sm-1 col-md-4 col-lg-4">                <div className="animated bounceInUp">                <a className="noUnderline" href={ detailUrl }>                        <img className="img-rounded" src={ '/api/content/published/api/v1.1/assets/' + item.fields['maximum_tire_image_1440x700']['id'] + '/native' }/>                    <div className="text-center text-body">                        <div className="text-sm-center text-uppercase font-weight-bold">{item['name']}</div>                        <div className="text-sm-center">{item['description']}</div>                    </div>                </a>                </div>             </div>        );    }}

    <変更後>

    以下にコードをコピーして貼り付けます。

    class Maximum_TireSummary extends React.Component {    render() {        var item = this.props.item;        if (!item || !item.id) {            return (                <div />            );        }        var detailUrl = (this.props.language ? '/' + this.props.language  : '') + '/Maximum_Tire/' + item.id;        return (            <div className="col-sm-12 col-md-12 col-lg-12">                <div className="animated bounceInUp">                <a className="noUnderline" href={ detailUrl }>                        <img className="img-rounded" src={ '/api/content/published/api/v1.1/assets/' + item.fields['maximum_tire_image_1440x700']['id'] + '/native' }/>                    <div className="text-center text-body">                        <div className="text-lg-center text-uppercase font-weight-bold"><h2>{item['name']}</h2></div>                        <div className="text-sm-center"><h3>{item['description']}</h3></div>                    </div>                    <div className="Overlay"> <img className="img-fluid img-rounded" src={ '/api/content/published/api/v1.1/assets/' + item.fields['maximum_tire_image_725x700']['id'] + '/native' }/></div>                </a>                </div>             </div>        );    }}

  3. React サイトは以下のよう修正されます

    image047.png

  4. 右上のArticlesリンクをクリックすると、bannerアイテムがページに二回表示されます。これは、bannerとTireコンポーネントの一件目が同じのためです。重複したアイテムを削除するには、タイヤページのアイテムを取得するときにオフセットを設定する必要があります。appフォルダーにあるApp.jsを開き、以下のように変更します。

    <変更前>

    const App = ({ history }) => {    return (        <ConnectedRouter history={history}>        <div>        <Switch>        <Route exact path={rootPath} render={props =><ContentSwitcher {...props} ContentComp={ Maximum_Article } site={SITE_NAME} contentType='Maximum_Article'/>} />        <Route exact path={rootPath + 'Maximum_Article'} render={props =><ContentSwitcher {...props} ContentComp={ Maximum_Article } site={SITE_NAME} contentType='Maximum_Article'/>} />        <Route path={rootPath + 'Maximum_Article/search/:search'} render={props =><ContentSwitcher {...props} ContentComp={ Maximum_Article } site={SITE_NAME} contentType='Maximum_Article'/>} />        <Route path={rootPath + 'Maximum_Article/:id'} render={props =><ContentSwitcher {...props} ContentComp={ Maximum_Article } site={SITE_NAME} contentType='Maximum_Article'/>} />        <Route exact path={rootPath + 'Maximum_Tire'} render={props =><ContentSwitcher {...props} ContentComp={ Maximum_Tire } site={SITE_NAME} contentType='Maximum_Tire'/>} />        <Route path={rootPath + 'Maximum_Tire/search/:search'} render={props =><ContentSwitcher {...props} ContentComp={ Maximum_Tire } site={SITE_NAME} contentType='Maximum_Tire'/>} />        <Route path={rootPath + 'Maximum_Tire/:id'} render={props =><ContentSwitcher {...props} ContentComp={ Maximum_Tire } site={SITE_NAME} contentType='Maximum_Tire'/>} />        <Route component={NotFound} />        </Switch>        </div>        </ConnectedRouter>     )}

    <変更後>

    以下にコードをコピーして貼り付けます。

    const App = ({ history }) => {    var tireProps = {match: {params: {offset: 1,orderBy: "updatedDate:des"}}}    return (        <ConnectedRouter history={history}>        <div>        <Switch>        <Route exact path={rootPath} render={props =><ContentSwitcher {...props} ContentComp={ Maximum_Article } site={SITE_NAME} contentType='Maximum_Article'/>} />        <Route exact path={rootPath + 'Maximum_Article'} render={props =><ContentSwitcher {...props} ContentComp={ Maximum_Article } site={SITE_NAME} contentType='Maximum_Article'/>} />        <Route path={rootPath + 'Maximum_Article/search/:search'} render={props =><ContentSwitcher {...props} ContentComp={ Maximum_Article } site={SITE_NAME} contentType='Maximum_Article'/>} />        <Route path={rootPath + 'Maximum_Article/:id'} render={props =><ContentSwitcher {...props} ContentComp={ Maximum_Article } site={SITE_NAME} contentType='Maximum_Article'/>} />        <Route exact path={rootPath + 'Maximum_Tire'} render={props =><ContentSwitcher {...tireProps} ContentComp={ Maximum_Tire } site={SITE_NAME} contentType='Maximum_Tire'/>} />        <Route path={rootPath + 'Maximum_Tire/search/:search'} render={props =><ContentSwitcher {...props} ContentComp={ Maximum_Tire } site={SITE_NAME} contentType='Maximum_Tire'/>} />        <Route path={rootPath + 'Maximum_Tire/:id'} render={props =><ContentSwitcher {...props} ContentComp={ Maximum_Tire } site={SITE_NAME} contentType='Maximum_Tire'/>} />        <Route component={NotFound} />        </Switch>        </div>        </ConnectedRouter>     )}

    <変更前>

    image048.png

    <変更後>

    image049.png

    このチュートリアル用の修正後のファイルは、GITHUBに置いてあります(Solution.zip)。ファイルを解凍して、新しく作成したサイトの各コンポーネントファイルを置き換えることが可能です。

5. OCEコンテンツでサイトの実行

ここまでは、OCE よりエクスポートしたローカル環境のアセットで React サイトをデザインしていましたが、OCE 上で公開されているアセットを使用して React サイトを実行するように変更します。

5.1. .cec_propertiesファイルの設定

  1. React サイトが作成されると、このサイト用の空の.cec_propertiesファイルがサイトディレクトリ (react-starter-site/MaximumTireBlog) に生成されます。 作成した React サイトのMaximumTireBlog フォルダに移動し、そのサイトのフォルダにある .cec_properties ファイルを変更します。 OCE 上の公開済アセットを利用する場合は、以下のように修正します
    ## To show the content on CEC server, cec_url must be set.# When the site is run using "cecss serve", only the published content will be displayed and cec_channel_token must be set.# When the site is run using "cecss develop", by default the draft content will be displayed, # if you want to show only the published content, set cec_content_status to published and also set cec_channel_token.# If the channel is secure or to show draft content, cec_username and cec_password are required.# If the CEC instance is a development env, set cec_env to dev_ec.# cec_url=<https>://<instance>-<account>.cec.ocp.oraclecloud.comcec_username=cec_password=cec_env=pod_eccec_content=servercec_content_status=publishedcec_channel_token=<channel token>
    • cec_url: oce インスタンスのURL。OCE 上の公開済みアセットを参照する場合は必須
    • cec_username: 公開チャネルがセキュアである場合、もしくはドラフト状態のアセットを取得する場合は、oce にアクセス可能なユーザー名を入力します(今回は未設定)
    • cec_password: oceユーザーのパスワードを入力します(今回は未設定)
    • cec_env: 開発環境であれば dev_ec に変更します(今回は pod_ec のまま)
    • cec_content_status: published を設定
    • cec_channel_token: MaximumTireSite の公開チャネルのチャネルトークンを設定

cec_channel_tokenを取得するには、「cecss list-server-channels」コマンドを使用します。

5.2. React サイトの実行

  1. キーボードでCtrl + Cを2回押して「cecss develop」コマンドを終了します
  2. cecss build コマンドを実行してサイトをビルドします。 このコマンドは、サイトの最適化された本番ビルドを生成します。
    cecss build

    image050.png

  3. サイトを本番モードで実行したい場合は、次のコマンドを実行します。
    cecss serve

    image051.png

    このコマンドはローカルの Node.js サーバーを起動し、デフォルトでhttp://localhost:8080のサイトにアクセスできます。” -p”パラメータを指定して別のポートも使用できます。cecss serve -p <ポート>

5.3. 新しい記事の作成と公開

以上の作業により、React サイトは OCE 上で公開されたアセットを再利用するようになりました。確認のため、新しい Maximum_Article の記事を1件作成し、MaximumTireSite チャネルに公開します

  1. OCE にサインし、左ナビゲーションの「アセット」をクリックします
  2. repo_maximum を選択し、「作成」→「新規コンテンツ・アイテムの作成」をクリックします
  3. 以下の通りに入力し、「OK」をクリックします
    • コンテンツ・タイプ:Maximum_Article
    • 名前:(任意の記事のタイトルを入力) ※日本語可
    • 説明:(任意の記事の説明文を入力)※日本語可
    • コレクション:(未選択)
    • 言語:英語 (en-US)
    • 翻訳不可:チェックしない
    • ターゲット対象チャネル:MaximumTireSite を選択
  4. コンテンツ・アイテム・データ・フィールドを入力し、「保存」をクリックします
    • Image 1000x562:(リポジトリ内の "...1000x562.jpg" の名前の任意の画像を選択 )</l
Sign In or Register to comment.