Go to Qiita Advent Calendar 2024 Top
LoginSignup
0
1

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 1 year has passed since last update.

@shinwata(shin wata)

既存のWebサイトをOracle Content Management(OCM)に移行してみよう(1)

Last updated at Posted at 2023-08-08

*こちらの記事は、Yuan Yuan Dengさんの協力の下に作成しました。

Oracle Content Management(OCM)とは
製品の詳細はこちらを参照ください

OCMのセットアップなどはこちら

目次

はじめに

前提条件/事前準備

1. 既存サイトのソースコードの取得

2. リポジトリ、ローカリゼーション・ポリシーの作成

3. Starter Template を利用した新規サイトの作成

4. テーマをデスクトップに同期

5. 既存サイトのソースコードをOCMテーマのフォルダ構造にあわせて登録する

6. レイアウトファイルの構造をOCM Themeに変更

はじめに

*この記事は個人のブログであり、製品として全ての動作が保証されているわけではありません

このチュートリアルは、既存のサイトからOracle Content Management (OCM)のエンタープライズ・サイトを作成する手順をステップ・バイ・ステップで説明します。エンタープライズ・サイトを作成する場合、アセットおよび多言語サイト機能を利用できます。
この記事は、多言語サイトの作り方も同時に説明しています。
新規、または既存のCMSをOCMに置き換えてみませんか？

前提条件/事前準備

  1. Oracle Content Management (OCM)のバージョンは 23.7.1 で作成しています

  2. OCMユーザー権限を有すること。具体的には、次のロールが付与されていること
    -CECContentAdministrator
    -CECDeveloperUser
    -CECEnterpriseUser
    -CECRepositoryAdministrator
    -CECServiceAdministrator

  3. OCMインスタンスは、OCMユーザーロールでテーマやサイトの作成ができるように設定されていること。詳細は、下記スクリーンショットを参照ください。
    c8271d0521c03e7ecbea781a98f0d656.png

  4. OCM 管理者により、デフォルト・テンプレートがインスタンスにインストールされ、全てのデフォルト・テンプレートがユーザーに共有されていること。このチュートリアルでは、StarterTemplateを利用します。
    2c49c5ed650b7ba8fd32e8c8380e75c3.png

  5. クライアントPCに同期マネージャをインストールし、利用するOCMインスタンスのアカウントを登録します。
    ee9ed0d22f38326f93f796c55613ab43.png

既存サイトのソースコードの取得

既存サイトのソースコードの取得

移行したいWebサイトからソースコードを取得します。

このガイドでは、例としてBootstrap theme Clean Blogのソースコードを使用します。次のページをアクセスし、「Free Download」をクリックし、ソースコードを取得します。

https://startbootstrap.com/theme/clean-blog/
301d229b1186fce97fd2f0a683cd36bf.png

ダウンロードしたstartbootstrap-clean-blog-gh-pages.zipを、任意のフォルダに解凍します。

または、次のURLからソースコードを入手できます。（サイトのソースコードはstartbootstrap-clean-blog-6.0.9/distにあります。）

https://github.com/StartBootstrap/startbootstrap-clean-blog/archive/refs/tags/v6.0.9.zip

このガイドでは、既存サイトの二つのページ、ホームページ(Blog一覧ページ)、Blog詳細ページの移行を例として説明します。

ホームページ(Blog一覧ページ)：
49bfd5fa0c82d5f6803e2617d33dcab5.png

Blog詳細ページ：
67e73c998eced294c10ad8b6d5da1a93.png

リポジトリ、ローカリゼーション・ポリシーの作成

エンタープライズ・サイトを作成する前に、リポジトリを作成する必要があります。リポジトリを使用すると、必要なすべてのアセットを1箇所で管理できます。
またリポジトリのローカリゼーション・ポリシーを指定できます。ローカリゼーション・ポリシーでは、翻訳の必須の設定、必要に応じて、アセットの必須言語および使用されるオプションの言語が定義されます。

リポジトリの作成

ここでは、デジタル・アセットを管理するためのリポジトリを作成します。

  1. Webブラウザを起動し、OCMにログインします。

  2. 左サイト・ナビゲーションから「ADMINISTRATION」の下の「コンテンツ」をクリックし、コンテンツの管理画面に切り替えます。プルダウンリストは自動的に「リポジトリ」が選択されます。右上の「作成」ボタンをクリックします。
    aeef67bf72aaa88db03d4e91b8543e5a.png

  3. 「アセット・リポジトリ」を選択します。

1-1.png
4. 名前とデフォルト言語を指定します。ここでは、名前にDemo Repositoryを入力し、アセット・タイプにImageを選択し、デフォルト言語を英語(en)に設定し、「保存」をクリックします。
677dd1f4e1aba004d2f5313d904948bf.png
5. リポジトリが作成されていることを確認します。
3ee62a60be158f643e52bebdf2f9beae.png

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

このチュートリアルでは、作成するサイトを多言語(英語と日本語)で作成します。ここでは、アセットの必須言語および使用されるオプションの言語が定義されるローカリゼーション・ポリシーを作成します。

  1. リポジトリの作成と同じ画面で、上のプルダウンリストから「ローカリゼーション・ポリシー」を選択し、「作成」をクリックします。
    e307f3ca2964924080f09e5dea26e633.png

  2. 名前と言語を指定します。ここでは、名前にDemoPolicyと、必須言語は英語(en)、日本語(ja)とします。「保存」をクリックします。
    2f4bf930764fcbbb14fc8d483aa31788.png

  3. ローカリゼーション・ポリシーが作成されていることを確認します。
    e88362e5cfc9f6f3ac2d581d8eea9b4c.png

Starter Template を利用した新規サイトの作成

ここでは、StarterTemplateを利用して新しいサイトを作成します。

新しいサイトの作成

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

  2. 「StarterTemplate」をクリックします。
    68fe1214ba9da3494ab7ba6c643ebd73.png

  3. リポジトリは先ほど作成したDemo Repositoryを選択し、ローカリゼーション・ポリシーは先ほど作成したDemoPolicyを選択します。デフォルト言語は英語(en) とします。「次」をクリックします。
    28970a36b53c903319be8df613f5434a.png

  4. 名前をDemoSiteとし、サイトの接頭辞は自動的に生成されます。「終了」をクリックします。
    1-2.png

    1つのOCMインスタンスで、サイトの名前はユニークにする必要があります。名前が重複するサイトを作成すると、エラーとなり作成に失敗します。

  5. DemoSiteサイトが作成されていることを確認します。
    be839f669c17e6ac08385df5210ad46d.png

  6. 左サイト・ナビゲーションから「開発者」に切り替え、「すべてのテーマの表示」をクリックします。
    e51b25ce902bb069953c76ee9ceb8fbd.png

  7. DemoSiteThemeテーマが作成されていることを確認します。
    9f95ebc058fd512459c9f121e9b94a64.png

    StarterTemplateを利用してサイトを作成すると、新しいサイト(DemoSite)と、新しいサイトのテーマ(DemoSiteTheme)が作成されます。 
なお、通常のテンプレートの場合、新しいサイトのみが作成され、新しいテーマは作成されません。新しいサイトは、テンプレートに含まれるテーマを参照する形になります。

テーマをデスクトップに同期

テーマを設定すると、サイト内のページ間に統一感がもたらされます。テーマには、サイトのコンテンツ、外観、および動作を設計するために使用されるページ・レイアウトが含まれています。ページ・レイアウトを編集するには、作成された新しいテーマを、同期マネージャを利用してデスクトップに同期します。

DemoSiteTheme テーマをデスクトップに同期する

  1. ローカルPC上の同期マネージャを開き、「オプション」アイコンをクリックし、「プリファレンス」でサイト・アセットの同期を有効化にチェックを入れます。
    2023-08-08 14.35.10.png
    2023-08-08 14.26.37.png

  2. ローカルPC上の同期マネージャを開き、「オプション」アイコンをクリックし、「クラウドから同期化するフォルダの選択」をクリックして、事前に登録したアカウントを選択します。
    cfd28191019386bfa6c31196d2ba4074.png

  3. 「サイト・アセット」をクリックします。
    8f115e21cd511a55ef8a0f2550c571a3.png

  4. DemoSiteThemeを選択し、「完了」をクリックします。
    21619eb7895b4358d46feb77be6c38c5.png

  5. デスクトップ上のショートカットをダブルクリックします。DemoSiteThemeが同期されていることを確認します。
    de2f1e574e59ff917fbd8818568e1820.png
    59484eea79a6b94d2728a526e0f715ee.png

【確認】DemoSiteThemeのフォルダ構造を確認する

DemoSiteThemeのフォルダ構造を確認します。OCMのテーマには、CSS、JS、その他の静的ファイルを含む「assets」フォルダがあります。また、テーマで使用されるページレイアウトを含むフォルダ「layouts」フォルダがあります。
181c1694a230bd514983dcea5437e24b.png

※テーマを構成するフォルダ/ファイルの説明
  • assets： JavaScript、CSS、イメージ、およびレイアウトで参照されるその他のサポート・ファイル。
  • designs： design.cssおよびdesign.jsonファイル。これらは、コンポーネントのスタイル・オプションを指定するために使用されます。
  • layouts： ページ・テンプレートのためのHTMLファイル。これらは、サイトのページを表示するために使用されます。
    ※注意： すべてのHTMLファイルは、このように見えるファイルの先頭にDOCTYPE要素を持つ必要があります： <!DOCTYPE html>
  • publish： 公開されたサイト内でテーマが使用されると、このディレクトリがリストされ、このディレクトリにファイルのコピーが含まれます。
  • responsepages： エラー(404)を処理するための特別なページ。
    ※注意： サイト内のページに「エラー・ページ」のフラグが付けられている場合、テーマからの404エラー・メッセージは無視され、指定された「エラー・ページ」がかわりに使用されます。
  • viewport.json： テーマの「ビューポート」設定を指定します。
  • components.json： テーマ内で使用される、カスタム・コンポーネントを記録します。
  • _folder_icon.png：管理UI上でテーマをサムネイル表示するときの画像。

既存サイトのソースコードをOCMテーマのフォルダ構造にあわせて登録する

既存サイトのソースコードの構造は、OCMテーマのフォルダ構造と異なる可能性があります。ここでは、既存サイトのソースコードをOCMテーマのフォルダ構造にあわせて登録します。

DemoSiteThemeフォルダ構造の変換

  1. DemoSiteThemeフォルダ配下に、layoutsフォルダの構造を確認します。
    4eec910a36ee8b913f39cf947b02ba88.png

  2. <Bootstrap theme Clean Blog の解凍フォルダ>の中のHTMLファイルを、DemoSiteTheme/layoutsフォルダにコピーします。ここでは、次のファイルをDemoSiteTheme/layoutsフォルダにコピーします。ファイルが既に存在する場合、置き換えます。
    ・about.html
    ・contact.html
    ・index.html
    ・post.html
    47540ebd4bb416b8658d3f9d64b0b582.png

  3. <Bootstrap theme Clean Blog の解凍フォルダ>の中のCSSファイルを、DemoSiteTheme/assets/cssフォルダにコピーします。ここでは、<styles.css >を、DemoSiteTheme/assets/cssフォルダにコピーします。ファイルが既に存在する場合、置き換えます。
    00013d9b5a928c9cfe3139b003c94d71.png

  4. <Bootstrap theme Clean Blog の解凍フォルダ>の中のJavaScriptファイルをDemoSiteTheme/assets/jsフォルダにコピーします。
    ・scripts.js
    11d04ff6e20e71d714328ecdacabd2d9.png

  5. <Bootstrap theme Clean Blog の解凍フォルダ>/assetsの中の画像ファイルを、DemoSiteTheme/assets/imgフォルダにコピーします。
    18ec7186b4c8b5829cfa0fa280e9327e.png

  6. DemoSiteTheme/layouts/index.htmlをテキストエディタで開きます。cssファイル、jsファイル、画像ファイルのパスを、変換先のフォルダ階層にあわせて更新します。例えば、
    <変更前>

    <!-- Core theme CSS (includes Bootstrap)-->
<link href="css/styles.css" rel="stylesheet" />

    <変更後>

    <!-- Core theme CSS (includes Bootstrap)-->
<link href="../assets/css/styles.css" rel="stylesheet" />

    <変更前>

    <!-- Core theme JS-->
<script src="js/scripts.js"></script>

    <変更後>

    <!-- Core theme JS-->
<script src="../assets/js/scripts.js"></script>

    <変更前>

    <!-- Page Header -->
<header class="masthead" style="background-image: url('assets/img/home-bg.jpg')">

    <変更後>

    <!-- Page Header -->
<header class="masthead" style="background-image: url('../assets/img/home-bg.jpg')">

  7. DemoSiteTheme/layouts/index.htmlをブラウザで開きます。正しくレンダリングされることを確認します。
    160f97719d334e761d5d985d84df43ad.png

  8. 同じ手順で、DemoSiteTheme/layouts/post.htmlをテキストエディタで開きます。cssファイル、jsファイル、画像ファイルのパスを、変換先のフォルダ階層にあわせて更新します。
    0205c260d97855298f40f209fce55b9f.png

レイアウトファイルの構造をOCM Themeに変更

ここでは、OCMのThemeのフォルダ構造を使用するように変更された「DemoSiteTheme」テーマのレイアウトファイルの構造もOCM Themeの構造に変更します。

レイアウトファイルのパスをOCM Themeのルートパスに変更

  1. DemoSiteTheme/layouts/index.htmlをテキストエディタで開きます。
    f397c3309622edb251a650dbd8b70982.png

  2. スタイルシートのURLに_scs_theme_root_を追加します。
    <変更前>

    <!-- Core theme CSS (includes Bootstrap)-->
<link href="../assets/css/styles.css" rel="stylesheet" />

    <変更後>

    <!-- Core theme CSS (includes Bootstrap)-->
<link href="_scs_theme_root_/assets/css/styles.css" rel="stylesheet" />

  3. jsのURLに_scs_theme_root_を追加し、JQueryライブラリを追加します。

    <変更前>

    <!-- Core theme JS-->
<script src="../assets/js/scripts.js"></script>

    <変更後>

    <!-- Core theme JS-->
<script type="text/javascript" src="_scs_theme_root_/assets/plugins/jquery.min.js"></script>
<script src="_scs_theme_root_/assets/js/scripts.js"></script>

  4. imageのURLに _scs_theme_root_ を追加します。
    <変更前>

    <!-- Page Header -->
<header class="masthead" style="background-image: url('../assets/img/home-bg.jpg')">

    <変更後>

    <!-- Page Header -->
<header class="masthead" style="background-image: url('_scs_theme_root_/assets/img/home-bg.jpg')">

    ”_scs_theme_root_”はOCMのThemeが使用されている環境にあわせて、自動的に変換されます。今回の場合、
    “_scs_theme_root_” → “_themes/DemoSiteTheme”
    と変換されます。

  5. 同じ手順で、DemoSiteTheme/layouts/post.htmlをテキストエディタで開きます。cssファイル、jsファイル、画像ファイルのURLに _scs_theme_root_を追加します。

  6. コピーしたファイル、フォルダがOCM上に同期されるのを待ちます。

レイアウトファイルに事前定義済タグを追加する

  1. DemoSiteTheme/layouts/index.htmlをテキストエディタで開きます。
    f397c3309622edb251a650dbd8b70982.png

  2. <head>タグ直下に、下記の様にコードを追加します。

    <変更前>

    <head>

    <変更後>

    <head>
<!-- Avoid FOUC issue in FF with async loading of style sheets -->
<style> body { opacity: 0; }</style>

  3. </head>タグの直前に、下記の様にコードを追加します。

    <変更前>

    </head>

    <変更後>

        <!-- Custom styles for this template -->
    <link rel="stylesheet" type="text/css" href="_scs_theme_root_/designs/_scs_design_name_/design.css">
    <!--$SCS_RENDER_INFO-->
    <!--$SCS_SITE_HEADER-->
    <!--$SCS_PAGE_HEADER-->
</head>

  4. </body>タグの直前に、下記の様にコードを追加します。

    <変更前>

    </body>

    <変更後>

        <script data-main="/_sitescloud/renderer/renderer.js" src="/_sitescloud/renderer/require.js"></script>

    <!--$SCS_PAGE_FOOTER-->
    <!--$SCS_SITE_FOOTER-->

    <!-- Avoid FOUC issue in FF with async loading of style sheets -->
    <style> body { opacity: 1; }</style>
</body>

  5. DemoSiteTheme/layouts/index.html ファイルを保存します。同じ手順で、DemoSiteTheme/layouts/post.htmlを編集します。DemoSiteTheme/layouts/about.htmlファイル、DemoSiteTheme/layouts/contact.htmlファイルはこのガイドで使用されないため削除します。編集したファイルがOCM上に同期されるのを待ちます。

    ※コードの動作説明

  • [!--$SCS_THEME_NAME--]
    サイトのために現在選択されたテーマの名前に置き換えます。このトークンを含むURLが現在のテーマを参照するので、テーマがコピーされるのを許可します。
  • [!--$SCS_DESIGN_NAME--]
    サイトのために現在選択されたデザインの名前に置き換えます。レイアウトをテーマの中で複数デザインとして利用されることを許可します。
  • <script data-main="/_sitescloud/renderer/renderer.js" src="/_sitescloud/renderer/require.js"></script>
    SCS のレンダリングコードをロードするスクリプトタグ。ページエディタを起動するためには、このタグを含む必要があります。
  • <!--$SCS_RENDER_INFO-->
    ページ階層やコンポーネントレンダリングの情報を含むスクリプトタグ。レイアウトページの<head>セクション内に配置します。
  • <!--$SCS_SITE_HEADER-->
    編集画面の設定→SEOプロパティ→「ヘッダー」で入力された情報を読み込むスクリプトタグ。レイアウトページの<head>セクション内に配置します。
  • <!--$SCS_PAGE_HEADER-->
    編集画面の各ページ毎の設定→「ページ・ヘッダー」で入力された情報を読み込むスクリプトタグ。レイアウトページの<head>セクション内に配置します。
  • <!--$SCS_SITE_FOOTER-->
    編集画面の設定→SEOプロパティ→「フッター」で入力された情報を読み込むスクリプトタグ。レイアウトページの<body>セクションの最後に配置します。
  • <!--$SCS_PAGE_FOOTER-->
    編集画面の各ページ毎の設定→ 「ページ・フッター」で入力された情報を読み込むスクリプトタグ。レイアウトページの<body>セクションの最後に配置します。
  • サイトが配信(オンライン)になると、下記トークンに置き換えられます
    /_themes/ ⇒ /_themesdelivery/
    /_sitescloud/ ⇒ /_sitesclouddelivery/

【確認】OCMの編集画面で確認する

  1. WebブラウザからOCMにアクセスし、左サイド・ナビゲーションから「サイト」に切り替えます。

  2. 先の手順で作成したサイト（ここではDemoSite）を選択し、「開く」をクリックします。
    67a58d9c5d47c78ebf75fe767b6221c0.png

  3. 下記の様なサイトが表示されることを確認します。編集側にあるスイッチをクリックし、編集モードに切り替えます。
    33247cf3aaf698f6a11b0f0d8bd47f23.png

  4. 「新規更新の名前」と「新規更新の説明」を入力し、「OK」をクリックします。ここでは、「新規更新の名前」をupdateと入力し、「新規更新の説明」を空欄のままとします。
    2940162c15b174e395a5e09bbfd3fff0.png

  5. 編集画面が表示されます。左側のナビゲーションから「ページ」を選択し、Homeページの右のページ設定アイコンをクリックします。
    730aaa88aafab8a9a17974238c0e89ed.png

  6. ページ・レイアウトを「post.html」に変更します。
    8112f1e25c4c7f5678107cb469393ce1.png

  7. 下記の様な画面が表示されることを確認します。
    62a0199ea71f753eef7b070e9882d2c8.png

  8. Homeページのページ・レイアウトを「index.html」に切り替えます。

その2に続きます

0
1
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
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?