ヘッドレスのOracle Content Managementで最小のサイトを角度で構築

イントロダクション

Angularは、モバイルおよびデスクトップWebアプリケーションを構築するためのプラットフォームです。

AngularアプリケーションでOracle Content Managementのコンテンツを使用するには、GitHubでオープンソース・リポジトリとして使用可能なAngular Minimumサンプルを使用できます。

このチュートリアルでは、Oracle Content ManagementをヘッドレスのCMSとJavaScriptでのコンテンツ配信用のソフトウェア開発キット(SDK)を利用して、Angularにシンプルな最小サイトを構築します。このAngularサンプルは、GitHubで入手できます。

チュートリアルは、次の3つのステップで構成されています。

Oracle Content Managementの準備
最小限のサイトを角度で構築
アプリケーションのデプロイメントの準備

前提条件

このチュートリアルを進める前に、まず次の情報を確認することをお勧めします。

このチュートリアルに従うには、次のものが必要です。

Oracle Content Managementサブスクリプション
コンテンツ管理者ロールを持つOracle Content Managementアカウント
ノード・バージョン10以上のWindowsまたはMacコンピュータ

オラクルが構築しているもの

Angularは最小限で、Oracle Content Managementリポジトリからイメージやその他のコンテンツを簡単に取得できます。

オラクルが構築している内容を確認するには、チュートリアルの終了状態(Oracle Content Managementのコンテンツを使用する基本的なアンギュラー最小サイト)を次に示します。

https://headless.mycontentdemo.com/samples/oce-angular-minimal-sample

このチュートリアルの最後にあるホーム・ページは次のようになります:

この図は、Angularの最小サイトのランディング・ページを示しています。

このチュートリアルの最後にある「お問合せ」ページは次のようになります:

この図は、Angularの最小サイトの「お問合せ」ページを示しています。

続行するには、Oracle Content Managementへのアクティブなサブスクリプションを持ち、コンテンツ管理者ロールでログインしている必要があります。

タスク1: Oracle Content Managementの準備

まだOracle Content Managementインスタンスがない場合は、クイック・スタートを参照して、Oracle Cloudへの登録方法、Oracle Content Managementインスタンスのプロビジョニング方法、およびヘッドレスCMSとしてのOracle Content Managementの構成方法を学習します。

このチュートリアルでは、コンテンツ・モデルを作成する必要があります。空のリポジトリには、コンテンツ・タイプおよび関連コンテンツが含まれるダウンロード可能なアセット・パックを使用できます。

Oracle Content Managementを準備するには:

チャネルおよびアセット・リポジトリを作成します。
次の2つの方法のいずれかを使用して、コンテンツ・モデルを作成します。
- 方法1: Oracle Content Managementサンプル・アセット・パックのインポート
- 方法2: 独自のコンテンツ・モデルの作成

チャネルおよびアセット・リポジトリの作成

コンテンツを公開できるように、Oracle Content Managementでチャネルおよびアセット・リポジトリを最初に作成する必要があります。

Oracle Content Managementでチャネルおよびアセット・リポジトリを作成するには:

Oracle Content Management Webインタフェースに管理者としてログインします。
左側のナビゲーション・メニューで「コンテンツ」を選択し、ページ・ヘッダーの選択リストから「チャネルの公開」を選択します。
右上隅にある「Create」をクリックして、新しいチャネルを作成します。このチュートリアルの目的でチャネルにOCEMinimalChannelという名前を付け、アクセスをパブリックのままにします。チャネルを作成するには、「保存」をクリックします。
左側のナビゲーション・メニューで「コンテンツ」を選択し、ページ・ヘッダーの選択リストから「リポジトリ」を選択します。
右上隅にある「Create」をクリックして、新しいアセット・リポジトリを作成します。このチュートリアルの目的で、アセット・リポジトリに'OCEMinimalRepository'という名前を付けます。
「チャネルの公開」フィールドで、OCEMinimalChannelチャネルを選択して、OCEMinimalRepositoryリポジトリのコンテンツをOCEMinimalChannelチャネルに公開できることをOracle Content Managementに指示します。終了したら、「Save」をクリックします。

コンテンツ・モデルの作成

次のステップでは、コンテンツ・モデルを作成します。次の2つの方法のいずれかを使用できます。

方法1: Oracle Content Managementサンプル・アセット・パックのインポート
方法2: 独自のコンテンツ・モデルの作成

Oracle Content Managementサンプル資産パックのインポート

このチュートリアルに必要なすべてのコンテンツ・タイプおよびアセットを含む事前構成済のOracle Content Managementサンプル・アセット・パックをダウンロードできます。必要に応じて、サンプル・アセット・パックをダウンロードするのではなく、独自のコンテンツ・モデルを作成することもできます。

このチュートリアルで使用しているコンテンツのコピーをOracle Content Management Samples Asset Packからアップロードできます。これにより、コンテンツ・タイプを試してコンテンツを変更できます。Oracle Content Management Samples Asset Packをインポートする場合は、アセット・パック・アーカイブOCESamplesAssetPack.zipをダウンロードし、選択したディレクトリに抽出できます。

Oracle Content Managementのダウンロード・ページから、Oracle Content Managementサンプル・アセット・パック(OCESamplesAssetPack.zip)をダウンロードします。ダウンロードしたzipファイルをコンピュータ上の場所に抽出します。抽出後、この場所にはOCEMinimal_data.zipというファイルが含まれます。
Oracle Content Management Webインタフェースに管理者としてログインします。
左側のナビゲーション・メニューで「コンテンツ」を選択し、ページ・ヘッダーの選択リストから「リポジトリ」を選択します。ここで、OCEMinimalRepositoryを選択し、上部のアクション・バーの「コンテンツのインポート」ボタンをクリックします。
ローカル・コンピュータから「ドキュメント」フォルダにOCEMinimal_data.zipをアップロードします。
アップロード後、OCEMinimal_data.zipを選択し、「OK」をクリックしてコンテンツをアセット・リポジトリにインポートします。
コンテンツが正常にインポートされたら、「アセット」ページに移動し、OCEMinimalRepositoryリポジトリを開きます。関連するすべてのイメージおよびコンテンツ・アイテムがアセット・リポジトリに追加されています。
左上の「すべて選択」、「公開」の順にクリックして、インポートされたすべてのアセットを、前に作成した公開チャネルOCEGettingStartedChannelに追加します。
公開する前に、すべてのアセットを検証する必要があります。最初にOCEMinimalChannelを選択したチャネルとして追加し、「検証」ボタンをクリックします。
アセットの検証が完了したら、右上隅にある「公開」ボタンをクリックして、選択したチャネルにすべてのアセットを公開できます。

これが完了すると、すべてのアセットが公開されている「アセット」ページに表示されます。(アセット名の上にあるアイコンでわかります。)

このイメージは、「アセット」ページを示しており、すべてのアセットが公開されています。

Oracle Content Management Samples Asset Packをインポートした後、Reactでの最小サイトの作成を開始できます。

独自のコンテンツ・モデルの作成

Oracle Content Management Samples Asset Packのインポートのかわりに、独自のコンテンツ・モデルを作成することもできます。

このチュートリアルでは、このサンプルのメイン・コンテンツ・タイプとしてMinimalMainというコンテンツ・タイプを使用しています。このコンテンツ・タイプは、ヘッダーとフッターのロゴ、およびナビゲーションに含める必要があるページのリストで構成されます。

この画像は、最小サンプルのホーム・ページを示しています。

コンテンツ・モデルのコンテンツ・タイプを作成する手順は、次のとおりです。

Oracle Content Management Webインタフェースに管理者としてログインします。
左側のナビゲーション・メニューで「コンテンツ」を選択し、ページ・ヘッダーの選択リストから「アセット・タイプ」を選択します。
右上隅の「作成」をクリックします。
(デジタル・アセット・タイプではなく)コンテンツ・タイプを作成する場合に選択します。必要なすべてのコンテンツ・タイプについて、これを繰り返します。

この図は、Oracle Content Management Webインタフェースの「アセット・タイプの作成」ダイアログを示しています。

3つのコンテンツ・タイプを作成し、それぞれに独自のフィールド・セットを作成します。

MinimalMain
MinimalPage
MinimalSection

最初のコンテンツ・タイプMinimalMainには、次のフィールドが必要です。

表示名	フィールド・タイプ	マシン名
headerLogo	単一価値メディア・フィールド	headerLogo
footerLogo	単一価値メディア・フィールド	footerLogo
ページ	複数値参照フィールド	ページ

MinimalMainコンテンツ・タイプ定義は次のようになります。

このイメージは、コンテンツ・タイプMinimalMainの定義を示しています。これには、headerLogo、footerLogo、ページのデータ・フィールドが含まれます。

2番目のコンテンツ・タイプMinimalPageには次のフィールドが必要です。

表示名	フィールド・タイプ	必須	マシン名
セクション	複数値参照フィールド		セクション

MinimalPageコンテンツ・タイプは次のようになります。

このイメージは、コンテンツ・タイプMinimalPageの定義を示しています。このデータ・フィールド「セクション」が含まれています。

3番目と最後のコンテンツ・タイプMinimalSectionには、次のフィールドが必要です。

表示名	フィールド・タイプ	必須	マシン名
タイプで打つ	単一値テキスト・フィールド	X	タイプで打つ
ヘディング	単一値テキスト・フィールド		ヘディング
死体	単一値大型テキスト・フィールド		死体
画像	単一値イメージ・フィールド		イメージ
アクション	単一値の埋込みコンテンツ・フィールド		アクション

MinimalSectionコンテンツ・タイプは次のようになります。

このイメージは、コンテンツ・タイプMinimalSectionの定義を示しています。これには、タイプ、見出し、本文、イメージ、アクションのデータ・フィールドが含まれます。

コンテンツ・タイプを作成したら、前に作成したリポジトリOCEMinimalRepositoryに次のコンテンツ・タイプを追加できます。

Oracle Content Management Webインタフェースに管理者としてログインします。
OCEMinimalRepositoryに移動します。
リポジトリを編集し、「アセット・タイプ」で新しく作成された3つのコンテンツ・タイプすべてを指定します。「保存」ボタンをクリックして変更を保存します。

このイメージは、Oracle Content Managementの「リポジトリの編集」ページを示しており、新しく作成された3つのコンテンツ・タイプがOCEMinimalRepositoryリポジトリに関連付けられています。

コンテンツ・タイプをリポジトリに追加した後、「アセット」ページでOCEMinimalRepositoryリポジトリを開き、すべてのコンテンツ・タイプのコンテンツ・アイテムの作成を開始できます。

このイメージは、Oracle Content Management Webインタフェースの「アセット」ページのコンテンツ・アイテムを示しています。左側には、コレクション、チャネル、言語、タイプ、コンテンツ・アイテムの選択およびステータスのオプションがあります。

タスク2:角度での最小サイトの作成

サーバー側のレンダリングされたAngularアプリケーションでOracle Content Managementコンテンツを消費するために、GitHubでオープンソース・リポジトリとして使用可能なAngular Minularサイト・サンプルを使用できます。

ノート: Angularサンプルの使用はオプションであり、このチュートリアルで使用して、簡単に開始できます。独自のAngularアプリケーションを構築することもできます。

角度に最小のサイトを作成するには:

サンプル・リポジトリのクローニングおよび依存性のインストール
Angularアプリケーションの構成
Oracle Content Management Content SDKの操作
コンテンツSDKを使用したコンテンツのフェッチ

サンプル・リポジトリのクローニングおよび依存性のインストール

Angularの最小サイト・サンプルは、GitHubでオープンソース・リポジトリとして使用できます。

最初に、サンプルをGitHubからローカル・コンピュータにクローニングし、ディレクトリをリポジトリ・ルートに変更する必要があります:

git clone https://github.com/oracle/oce-angular-minimal-sample.git
    cd oce-angular-minimal-sample

コード・ベースができたので、アプリケーションの依存性をダウンロードする必要があります。ルート・ディレクトリから次のコマンドを実行します。

npm install

Angularアプリケーションの構成

このAngularの最小サイト・サンプルでは、Oracle Content Management Content SDK (および他のリクエスト)が、正しいチャネル・トークンを使用して正しいインスタンスURLおよびAPIバージョンをターゲットにできるように、いくつかの情報を構成する必要があります。これらの値は、新しい配信クライアントをインスタンス化するためにsrc/scripts/server-config-utils.jsで使用されます。

このアプリケーションは、クライアント・アプリケーションとサーバー・アプリケーションをバンドルするときにWebpackによって読み取られる.envファイルを使用します。webpack.DefinePluginを使用すると、.envファイルから読み取られた値を、アプリケーション内の任意の場所で使用可能にできます。

テキスト・エディタで.envファイルを開きます。次のようなものが表示されます。

# The connection details for the Oracle Content Management server to be used for this application
    SERVER_URL=https://samples.mycontentdemo.com
    API_VERSION=v1.1
    CHANNEL_TOKEN=ba0efff9c021422cb134c2fd5daf6015

各キーと値のペアを、インスタンスURL、ターゲットにするAPIバージョン、および公開チャネルに関連付けられたチャネル・トークンを反映するように変更します。このチュートリアルのチャネルはOCEMinimalChannelです。

Oracle Content Management Content SDKの操作

Oracle Content Managementは、アプリケーションのコンテンツを検出して使用するためのSDKを提供します。SDKはNPMモジュールとして公開され、プロジェクトはGitHubでホストされています。

SDKの詳細は、ここを参照してください。

SDKは、package.jsonファイルでこのプロジェクトのランタイム依存性として登録されました。

コンテンツSDKを使用したコンテンツのフェッチ

コンテンツSDKを利用して、Angularアプリケーションでレンダリングできるように、コンテンツをフェッチできるようになりました。

Content SDKでは、DeliveryClientオブジェクトを使用してエンドポイントを指定します。そのクライアント・オブジェクトを使用してすべてのリクエストを行うことができます。

src/scriptsフォルダには、Content SDKを使用してOracle Content Managementからデータを取得するためのコードが含まれます。

src/scripts/server-config-utils.jsファイルは、コンテンツSDKをインポートし、.envで指定された構成を使用して配信クライアントを作成します。

次のコマンドはSDKをインポートします。

import { createDeliveryClient, createPreviewClient } from '@oracle/content-management-sdk';

次のコマンドは、配信クライアントを作成します。

return createDeliveryClient(serverconfig);

src/scripts/services.jsファイルには、このReact最小アプリケーションのデータを取得するための関数が含まれています。

fetchOceMinimalMain()メソッドは、minimummainのslugを使用してコンテンツ・タイプMinimalMainを取得します。

export async function fetchOceMinimalMain() {
      const data = await getItem('minimalmain', 'fields.headerlogo,fields.footerlogo,fields.pages');
      if (!data.hasError) {
        const { fields } = data;
        const { headerlogo, footerlogo } = fields;
        // Extract the sourceset for the headerImage and footerImage and put it back in the data
        data.headerRenditionURLs = getSourceSet(headerlogo);
        data.footerRenditionURLs = getSourceSet(footerlogo);
      }
      return data;
    }

イメージをレンダリングするために、service.jsには、アセットのレンディションから構築されるアセットのソース・セットを取得するためのヘルパー・メソッドが用意されています。

function getSourceSet(asset) {
      const urls = {};
      urls.srcset = '';
      urls.jpgSrcset = '';
      if (asset.fields && asset.fields.renditions) {
        asset.fields.renditions.forEach((rendition) => {
          addRendition(urls, rendition, 'jpg');
          addRendition(urls, rendition, 'webp');
        });
      }
      // add the native rendition to the srcset as well
      urls.srcset += `${asset.fields.native.links[0].href} ${asset.fields.metadata.width}w`;
      urls.native = asset.fields.native.links[0].href;
      urls.width = asset.fields.metadata.width;
      urls.height = asset.fields.metadata.height;
      return urls;
    }

fetchPage()メソッドは、前の問合せから取得したページのスラグ値を使用して、コンテンツ・タイプMinimalPageを取得します。

export async function fetchPage(pageslug) {
      // Get the page details
      const page = await getItem(pageslug, 'fields.sections');
      return page;
    }

getRenditionURLs()メソッドは、そのイメージのIDを使用してセクションに定義できるすべてのイメージのレンディションURLを取得します。このコールはクライアント側で実行されます。

export function getRenditionURLs(identifier) {
      const client = getClient();
      return client.getItem({
        id: identifier,
        expand: 'fields.renditions',
      }).then((asset) => getSourceSet(asset))
        .catch((error) => logError('Fetching Rendition URLs failed', error));
    }

データ問合せが完了したので、Angularコンポーネントでレスポンスをレンダリングできます。

クライアント側とサーバー側レンダリング

クライアント側レンダリング(CSR)では、クライアントはJavaScriptを使用してWebページのコンテンツを構築およびレンダリングします。サーバー・サイド・レンダリング(SSR)では、ページ全体がサーバー上に構築され、完全なWebページがクライアントに返されます。

クライアント側のレンダリングでサーバーからWebページがリクエストされると、返されるHTMLドキュメントにはスケルトンHTMLが含まれ、実際のコンテンツは含まれません。これには、クライアントがサーバーからリクエストするJavaScriptバンドルへの参照が含まれています。このバンドルを受信すると、クライアントはJavaScriptを実行し、Webページに移入します。クライアントがJavaScriptの実行を終了するまで、すべてのユーザーに表示されるWebページは空白です。クライアント側のレンダリングされたアプリケーションのダウンサイドの1つは、一部のWebクローラがサイトに索引付けする場合、索引付けする実際のコンテンツがないことです。

サーバー・サイド・レンダリング(SSR)では、ページ全体がサーバー上に構築され、完全なWebページがクライアントに返されます。この利点は、WebクローラがWebページのコンテンツ全体を索引付けできることです。

サーバー側の角度レンダリング

Angular Image Galleryアプリケーションのフローは次のとおりです。

クライアントは、特定のルートについてサーバーにリクエストを行います。
Expressサーバーはリクエストを受信します。
Expressサーバーは、ページのすべてのクライアント・リクエストをAngular UniveralのExpress Engineに渡します。
Angular UniveralのExpress EngineはテンプレートHTMLファイルを取得し、次のファイルを移入します。
1. 指定されたルートのマークアップ
2. ルート・データがシリアライズされました
3. スタイルシートへの参照
4. クライアントで実行するJavaScriptバンドルへの参照
Expressサーバーは、Angular UniveralのExpress Engineによって作成されたHTMLドキュメントをクライアントに返します。
クライアントはHTMLを受信してレンダリングします。完全に構成されたWebページが表示されます。
クライアントはサーバーからJavaScriptバンドルをリクエストします。受信後、クライアントはバンドルでJavaScriptを実行します。
1. HTMLをハイドレートして、イベント・リスナーなどのクライアント側JavaScriptに追加します。
2. Angularは、ページからシリアル化されたデータを自動的に取得し、それをJavaScriptコードに注入してコンポーネントで使用できるようにします。
HTMLドキュメントにスタイル・シートが含まれている場合、クライアントはスタイル・シートをリクエストします。

Angular CLIでは、既存のAngularアプリケーションへのサーバー側レンダリングのサポートの追加がサポートされています。詳細は、https://angular.io/guide/universalを参照してください。

サーバー側のエクスプレス・サーバー

サーバー・アプリケーションでは、Expressサーバーを使用してリクエストを受信し、Angular UniveralのExpress Engineに転送します。

Expressサーバー・ファイルはserver.jsにあります。このファイルは、サーバー側レンダリングのサポートを追加するときに、Angular CLIによって作成されます。

角度コンポーネント

角度コンポーネントはTypeScriptで記述され、ビューを定義するテンプレートを定義します。これらのテンプレートには、通常のHTML、Angularディレクティブおよびバインディング・マークアップが含まれており、レンダリング前にAngularがHTMLを調整できるようにします。

次のいくつかのセクションでは、各コンポーネントでAngularがアプリケーションをレンダリングする方法の概要を示します。

アプリケーション・モジュール
サーバー側レンダリングのルート・モジュール
ページ・データ・リゾルバ
アプリケーション・コンポーネント
ヘッダーおよびフッターのコンポーネント
セクション・コンポーネント
PageComponent

アプリケーション・モジュール

src/app/app.module.tsにあるアプリケーション・モジュール。アプリケーション・コンポーネントを使用してアプリケーションをブートストラップします。

このファイルは、アプリケーションの様々なルートを定義します。このサイトでは、ルート・パス(/)とページ・パス(/page/:slug)の2つのルートを指定します。

ルート・ルートは、ページ・スラグが指定されていないページ・ルートにリダイレクトされます。ページ・ルートは、ルートのコンポーネントが作成される前にルートに必要なすべてのデータを取得するために使用されるリゾルバPageDataResolverを定義します。

src/app/app.module.tsにあるルート・コンポーネントを開き、定義されたルートを確認します:

const appRoutes: Routes = [
      // no path specified, go to home
      {
        path: '',
        redirectTo: '/page/',
        pathMatch: 'full',
        runGuardsAndResolvers: 'always',
      },
      {
        path: 'page/:slug',
        component: PageComponent,
        resolve: { routeData: PageDataResolver },
        runGuardsAndResolvers: 'always',
      },
    ];

このアプリケーション・モジュールは、クライアント側でアプリケーションをレンダリングするときのエントリ・ポイントです。

サーバー側レンダリングのルート・モジュール

サーバー上でアプリケーションをレンダリングするときに、このAngularアプリケーションのメイン・エントリ・ポイントは、src/app/app.server.moduletsにあるアプリケーション・サーバー・モジュールです。

このモジュールは、src/app/app.server.module.tsにあるappモジュールを、AngularのServerModuleとともにインポートします。サーバー側アプリケーションは、クライアントと同じアプリケーション・コンポーネントをブートストラップし、同じすべてのコンポーネントを使用します。

Angular CLIは、サーバー側レンダリングのサポートを追加するときにサーバーモジュールファイルを作成します。

ページ・データ・リゾルバ

src/resolvers/page-data.resolver.tsにあるページ・データ・リゾルバは、ページでレンダリングするデータの取得を処理します。

クライアントをハイドレーションすると、このデータは、サーバー側のレンダリング中に移入され、クライアントに返されるHTMLドキュメントにシリアライズされたtransferStateから取得されます。

サーバー側のレンダリング中、またはクライアント側のナビゲーションが発生したときのクライアント側のレンダリング中、transferStateにデータが含まれていません。データは、コンテンツSDKを使用してOracle Content Managementサーバーから取得されます。

return fetchOceMinimalMain()
      .then((appData) => {
        if (pageSlug === null || pageSlug === '') {
          pageSlug = appData.fields.pages[0].slug;
        }
        return fetchPage(pageSlug).then((pageData) => {
          if (isPlatformServer(this.platformId)) {
            // add the two pieces of data to the transfer state separately
            this.transferState.set(APP_KEY, appData);
            this.transferState.set(PAGE_KEY, pageData);
          }
    
          // return the two pieces of data in a single object
          const fullData = { appData, pageData };
          return fullData;
        });
      });

アプリケーション・コンポーネント

アプリケーション・コンポーネントは、src/app/app.component.tsにあり、ルート・ビューを定義します。

このコンポーネントには、ルータリンクタグが含まれています。Angularは、現在のルートに基づいて、これらのタグ内のページのオンとオフを切り替えます。

ヘッダーおよびフッターのコンポーネント

ヘッダー・コンポーネントとフッター・コンポーネントは、ページ・コンポーネントを使用して、それぞれヘッダーとフッターを表示します。

ヘッダー・データは、src/app/header/header.component.tsにあるヘッダー・コンポーネントに渡され、フッター・データはsrc/app/footer/footer.component.tsにあるフッター・コンポーネントに渡されます。ヘッダーおよびフッター・コンポーネントは、渡されたデータのみを使用します。サーバーから追加データは取得しません。src/app/header/header.component.htmlおよびsrc/app/footer/footer.component.htmlのバインディングを参照してください。

セクション・コンポーネント

セクション・コンポーネントは、src/app/section/section.component.tsにあり、ページ・コンポーネントによって使用され、MinimalSectionタイプのコンテンツ・アイテムのレンダリングに使用されます。

このコンポーネントには、ページ・コンポーネントからデータが渡され、セクション・データにイメージがある場合、サーバーからイメージのレンディションURLを取得するためのクライアント側コールが作成されます。

  ngOnInit() {
        this.heading = this.section.fields.heading;
        this.type = this.section.fields.type;
        // sanitize the content for html display
        const content = this.section.fields.body;
        const options = {
          stripIgnoreTag: true, // filter out all HTML not in the whitelist
          stripIgnoreTagBody: ['script'],
        };
        this.body = filterXSS(content, options);
        this.actions = this.section.fields.actions;
        if (this.section.fields.image) {
          getRenditionURLs(this.section.fields.image.id).then((urls) => {
            this.renditionURLs = urls;
          });
        }
      }

ページ・コンポーネント

ページ・コンポーネントは、ヘッダー、フッターおよびページに定義されているすべてのセクションのレンダリングを担当します。

src/app/page/page.component.tsにあるページ・コンポーネントを開きます。ngOnInitでは、コンポーネントがホーム・ページ・リゾルバによって移入されたアクティブ・ルートからデータを取得することを確認できます。

  ngOnInit() {
        const fullData = this.route.snapshot.data.routeData;
        this.appData = fullData.appData;
        this.headerRenditionURLs = this.appData.headerRenditionURLs;
        this.footerRenditionURLs = this.appData.footerRenditionURLs;
    
        this.pageData = fullData.pageData;
        if (!this.pageData.hasError) {
          this.sections = this.pageData.fields.sections;
          this.pages = this.appData.fields.pages;
        }
      }

ページ・コンポーネントのマークアップは、src/app/page/page.component.htmlにあります。

タスク3:アプリケーションのデプロイメントの準備

アンギュラーの最低限のサイトを構築したので、稼働前に問題をデバッグしてアプリケーションをプレビューできるように、ローカル開発サーバーでそれを確認する必要があります。

次の2つのステップでアプリケーションをデプロイします。

ローカル開発サーバーのスピン・アップ
本番環境でのアプリケーションのテスト

ローカル開発サーバーのスピン・アップ

次のコマンドを実行して、開発サーバーをローカルで起動できます。

npm run dev

次に、ブラウザでhttp://localhost:4200を開き、サイトの動作を確認します。

本番環境でのアプリケーションのテスト

本番では、ビルド・スクリプトを使用してクライアントおよびサーバー・コードを構築します。

次のコマンドを使用して、ビルド・スクリプトを実行します。

npm run build

このスクリプトはまずクライアント・ビルドを実行し、次にサーバー・ビルドを実行します。

アプリケーションを起動する前に、サーバー・マシンに組込みのdist/serverとdist/browserをデプロイします。次に、次のコマンドを使用して起動します。

npm run start

まとめ

このチュートリアルでは、Angularに最小限のサイトを作成しましたが、これはGitHubにあります。このサイトでは、Oracle Content ManagementをヘッドレスCMSとして使用します。最小サイト・チュートリアルのために公開されたコンテンツのチャネルを使用してOracle Content Managementを設定および構成した後、Angularサイトをインストールして実行し、必要なコンテンツをフェッチしてサイトを作成します。

Angularの詳細は、「Angular Webサイト」を参照してください。

Oracle Content Managementの重要な概念については、ドキュメンテーションを参照してください。

このようなサンプルは、Oracle Help CenterのOracle Content Managementのサンプル・ページで確認できます。

タイトルおよび著作権情報

ヘッドレスのOracle Content Managementで最小のサイトを角度で構築

F51776-01

2021年12月

原本著者: Oracle Corporation