LoginSignup
0
0
@shinwata(shin wata)

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

Last updated at Posted at 2023-08-08

目次

7. ページの追加

8. OCM スロット(Slots)の追加

9. パンくずリスト(Breadcrumbs)の追加

10. 動的ナビゲーション・メニューの生成

11. デジタル・アセットの登録

ページの追加

ここでは、既存サイトの構造に基づいて、各ページを作成します。そして、ページ・オプションを設定します。

ページの追加

  1. 編集画面で左側のナビゲーションから「ページ」を選択します。

  2. 「ページの追加」をクリックし、新規ページを作成します。
    5770a01ba3493337b184540bbda38ccd.png

  3. 「ページ名」に「Post」を入力し、「オーバーライド」スイッチをオンにします。「ページURL」に「post.html」を入力し、「ページ・レイアウト」に「post.html」を選択します。
    b7c4e40441de20def5a7dd98f936d39a.png

  4. 次の表を参照して、「Aboutページ」及び「Contactページ」を追加します。

    ページ ページ名 ページURL ページレイアウト
    Home
    *修正不要     		Home index.html index.html
    About
    *追加作成     		About about.html index.html
    Post
    *追加作成     		Post post.html post.html
    Contact
    *追加作成     		Contact contact.html index.html

3a5be45baef34fb76e4c9ae28bdfae5a.png
5. ほかのページはすべて削除します。
6f2521f626534f4df767645631944564.png
6. 「Post」ページのページ・オプションを開き、「ナビゲーションからページを非表示」と「詳細ページ」のチェックをオンにします。
4244825fd6429aa4b184734d00e1b68f.png
7. オリジナルサイトの構造と同じように他のページを作成します。最終的に、下記の図のようなページ構造となっていることを確認します。
b29808d862b0b4c1b045486a8dbef2c7.png
8. 「保存」をクリックします。
a4008fe083e99eff0436e307262abbae.png

OCM スロット(Slots)の追加

ここでは、ページレイアウトのコンテンツ領域のオリジナルのHTMLコードの代わりにOCMスロット(OCM Slots)を使用するように変更します。

OCMスロットとは、ページ上にOCMが提供するコンポーネントを追加できる場所です。 OCMスロットは、レイアウトファイル内の<div>要素で、class属性に値 "scs-slot"を持ちます。複数の<div>要素は、 "scs-slot"クラス属性を割り当てることでスロットとして指定できます。各スロットには一意のid属性が必要です。クラス属性値が "scs-responsive"であるスロットは、ブラウザーのビューポートが解像度を変更すると内容が更新されます。

オリジナルサイトのHTMLページにOCMスロットを追加するためのさまざまなオプションがあります。

A. ページ全体の内容を含む<div class = "container">要素を1つのスロットとして定義する

B. ページのグリッドにコンテンツの行を含む各<div class = "row">要素をスロットに変換する

C. ページのグリッドにコンテンツの列を含む各<div>要素をスロットに変換する

エンドユーザが複数のOCMコンポーネントをスロットに追加できるようにするには、上記のオプション(A)または(B)を使用する必要があります。その場合は、「scs-responsive」属性と組み合わせて「scs-slot」属性を使用する必要があります。

例： <div id="row-slot" class="scs-slot scs-responsive row">

オプション(C)を使用すると、元のページの構造に近いOCMページレイアウトを作成できます。たとえば、次のようなOCMスロットのグリッドを作成できます。

<div class="container">
    <div class="row">
        <div id="grid-title" class="scs-slot col-lg-12"></div>
        <div id="grid-col1" class="scs-slot col-md-4"></div>
        <div id="grid-col2" class="scs-slot col-md-4"></div>
        <div id="grid-col3" class="scs-slot col-md-4"></div>
    </div>
</div>

この配置は、通常、スロットごとに1つのOCMコンポーネントを配置します。 この場合は「scs-responsive」属性を使用する必要はありません。

各スロットは、追加できるOCMのコンポーネントを制限することができます。詳細については、ドキュメントの「Restrict Components in Slots」を参照してください。

Building Sites with Oracle Content Management > Restrict Components in Slots

https://docs.oracle.com/en/cloud/paas/content-cloud/creating-experiences/restrict-components-slots.html

index.htmlの編集

  1. DemoSiteTheme/layouts/index.htmlをエディタで開きます。
    e9f43777cd4b35dc675af1301215ba68.png

  2. Main ContentのHTMLコードを、下記の様に修正します。
    <変更前>

    <!-- Main Content -->
<div class="container px-4 px-lg-5">
    <div class="row gx-4 gx-lg-5 justify-content-center">
        <div class="col-md-10 col-lg-8 col-xl-7">
        <中略>
        </div>
    </div>
</div>

    <変更後>

    <!-- Main Content -->
<div class="container px-4 px-lg-5" >
    <div class="row gx-4 gx-lg-5 justify-content-center">
        <div class="col-md-10 col-lg-8 col-xl-7 scs-slot"  id="articleCont"></div>
    </div>    
</div>

  3. NavigationのHTMLコードを、下記の様に修正します。
    <変更前>

    <!-- Navigation-->
<nav class="navbar navbar-expand-lg navbar-light" id="mainNav">
    <div class="container px-4 px-lg-5">
        <a class="navbar-brand" href="index.html">Start Bootstrap</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
            Menu
            <i class="fas fa-bars"></i>
        </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
            <ul class="navbar-nav ms-auto py-4 py-lg-0">
                <li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4" href="index.html">Home</a></li>
                <li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4" href="about.html">About</a></li>
                <li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4" href="post.html">Sample Post</a></li>
                <li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4" href="contact.html">Contact</a></li>
            </ul>
        </div>
    </div>
</nav>

    <変更後>

    <!-- Navigation -->
<div class="scs-slot" id="navbarCont"></div>

  4. Page HeaderのHTMLコードを、下記の様に修正します。
    <変更前>

    <!-- Page Header -->
<header class="masthead" style="background-image: url('_scs_theme_root_/assets/img/home-bg.jpg')">
    <div class="container position-relative px-4 px-lg-5">
        <div class="row gx-4 gx-lg-5 justify-content-center">
            <div class="col-md-10 col-lg-8 col-xl-7">
                <div class="site-heading">
                    <h1>Clean Blog</h1>
                    <span class="subheading">A Blog Theme by Start Bootstrap</span>
                </div>
            </div>
        </div>
    </div>
</header>

    <変更後>

    <!-- Page Header -->
<header class="masthead bg-index" id="bgEle">
    <div class="container position-relative px-4 px-lg-5">
        <div class="row gx-4 gx-lg-5 justify-content-center">
            <div class="col-md-10 col-lg-8 col-xl-7">
                <div class="site-heading scs-slot" id="mainCont"></div>
            </div>
        </div>
    </div>
</header>

  5. index.html ファイルを保存します。

  6. DemoSiteTheme/assets/css/custom.cssを新規作成します。下記コードを追加します。

    /* mainCont */
header.masthead .site-heading *{
    color: #fff;
}
header.masthead .page-heading h4, header.masthead .site-heading h4 {
    font-size: 24px;
    font-weight: 300;
    line-height: 1.1;
    display: block;
    margin: 20px 0 0;
    font-family: 'Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
}
header.masthead .scs-title-text,header.masthead .scs-paragraph-text,header.masthead .scs-component-content * {
    overflow: visible;
}
header.bg-index{
    background-image: url("../img/home-bg.jpg");
}

  7. DemoSiteTheme/assets/css/custom.cssファイルを保存します。

  8. DemoSiteTheme/layouts/index.htmlをエディタで開きます。新規作成されたcustom.cssを</head>タグの前に追加します。

    <link href="_scs_theme_root_/assets/css/custom.css" rel="stylesheet">

  9. DemoSiteTheme/layouts/index.htmlファイルを保存します。

  10. 編集したファイルがOCM上に同期されていることを確認します。

post.htmlの編集

  1. DemoSiteTheme/layouts/post.htmlをエディタで開きます。
    8bb0d9ff1d7c1c3abaaa4c14a83e158f.png

  2. Page Header とPost ContentのHTMLコードを、下記の様に修正します。
    <変更前>

    <!-- Page Header-->
<header class="masthead" style="background-image: url('_scs_theme_root_/assets/img/post-bg.jpg')">
    <div class="container position-relative px-4 px-lg-5">
        <div class="row gx-4 gx-lg-5 justify-content-center">
            <div class="col-md-10 col-lg-8 col-xl-7">
                <div class="post-heading">
                    <h1>Man must explore, and this is exploration at its greatest</h1>
                    <h2 class="subheading">Problems look mighty small from 150 miles up</h2>
                    <span class="meta">
                        Posted by
                        <a href="#!">Start Bootstrap</a>
                        on August 24, 2023
                    </span>
                </div>
            </div>
        </div>
    </div>
</header>
<!-- Post Content-->
<article class="mb-4">
    <div class="container px-4 px-lg-5">
        <div class="row gx-4 gx-lg-5 justify-content-center">
            <div class="col-md-10 col-lg-8 col-xl-7">
                <中略>
            </div>
        </div>
    </div>
</article>

    <変更後>

    <div class="scs-slot"  id="articleCont"></div>

  3. NavigationのHTMLコードを、下記の様に修正します。
    <変更前>

    <!-- Navigation-->
<nav class="navbar navbar-expand-lg navbar-light" id="mainNav">
    <div class="container px-4 px-lg-5">
        <a class="navbar-brand" href="index.html">Start Bootstrap</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
            Menu
            <i class="fas fa-bars"></i>
        </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
            <ul class="navbar-nav ms-auto py-4 py-lg-0">
                <li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4" href="index.html">Home</a></li>
                <li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4" href="about.html">About</a></li>
                <li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4" href="post.html">Sample Post</a></li>
                <li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4" href="contact.html">Contact</a></li>
            </ul>
        </div>
    </div>
</nav>

    <変更後>

    <!-- Navigation -->
<div class="scs-slot" id="navbarCont"></div>

  4. post.html ファイルを保存します。編集したファイルがOCM上に同期されていることを確認します。

【確認】変更内容を確認する

  1. 「DemoSite」の編集画面に戻り、F5を押してブラウザーをリフレッシュします。

  2. 「Home」ページにスロットが表示されることを確認します。
    515c3546cc2e543fcac43ff55773f4d7.png

  3. 「Post」ページにスロットが表示されることを確認します。
    6bc2833fe979f39e1036c2094644f786.png

パンくずリスト(Breadcrumbs)の追加

ここでは、SCS Render APIを使用して、動的にパンくずリストを生成するコードを追加します。

post.htmlの編集

  1. デスクトップに同期したDemoSiteTheme/layouts/post.htmlをエディタで開きます。

  2. Post Contentの後ろに下記のようにコードを追加します。
    <変更前>

    <!-- Navigation -->
<div class="scs-slot" id="navbarCont"></div>

<div class="scs-slot"  id="articleCont"></div>

    <変更後>

    <!-- Navigation -->
<div class="scs-slot" id="navbarCont"></div>

<div class="scs-slot"  id="articleCont"></div>

<!-- Page Heading/Breadcrumbs --> 
<div class="row"> 
    <div id="breadcrumb" class="col-lg-12">
        <!-- page breadcrumbs goes in here -->
    </div>
</div>

  3. require.jsの直前に、下記のようにコードを追加します。
    <変更前>

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

    <変更後>

        <script type="text/javascript" src="_scs_theme_root_/assets/js/breadcrumb.js"></script>
    <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>

    ※注意：このガイドで利用しているDemoSiteTheme/layouts/post.htmlには既にbootstrap.bundle.min.jsをインポートしたため、ここでは、再度インポートする必要がありません。このjsがない場合、ここで次のように追加します。

    <script type="text/javascript" src="_scs_theme_root_/assets/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>

  4. post.html ファイルを保存します。編集したファイルがOCM上に同期されていることを確認します。

  5. DemoSiteTheme/assets/jsフォルダ内にbreadcrumb.jsを新規作成し、テキストエディタで開き、下記コードを追加します。

    // render breadcrumbs...
function renderBreadcrumbs() {

    var breadcrumb = $('#breadcrumb');

    // generate title using page name and page title...
    var id = SCS.navigationCurr,
        header = document.createElement('h1');

    // generate [age breadcrumb...
    var path = document.createElement('ol');
    $(path).addClass("clearfix location-inside");
    if (id == SCS.navigationRoot) {
        // Home page...
        var bcItem = document.createElement('li');
        $(bcItem).addClass("active");
        $(bcItem).text(SCS.structureMap[id].name);
        $(path).append(bcItem);
    } else {
        // one of sub-pages...
        var ids = getParnetIds(id),
            bcItem, bcLink, linkData;
        for (var i = ids.length - 1; i >= 0; i--) {
            bcItem = document.createElement('li');
            if (ids[i] == id) {
                $(bcItem).addClass("active");
                $(bcItem).text(SCS.structureMap[ids[i]].name);
            } else {
                bcLink = document.createElement('a');
                linkData = SCSRenderAPI.getPageLinkData(ids[i]) || {};
                if (linkData.href) {
                    $(bcLink).attr("href", linkData.href);
                }
                $(bcLink).text(SCS.structureMap[ids[i]].name);
                $(bcItem).append(bcLink);
                $(bcItem).append(" <span>&gt;</span> ");
            }
            $(path).append(bcItem);
        }
    }
    $(breadcrumb).append(path);
}

// returns array of parent page id's...
function getParnetIds(nodeId) {
    var ids = [],
        i = 0;
    ids[i] = nodeId;
    while (nodeId != SCS.navigationRoot) {
        nodeId = SCS.structureMap[nodeId].parentId;
        i = i + 1;
        ids[i] = nodeId;
    }

    return ids;
}

// must wait for the script to be ready...
if (document.addEventListener) {
    document.addEventListener('scsrenderstart', renderBreadcrumbs, false);
} else if (document.attachEvent) {
    document.documentElement.scsrenderstart = 0;
    document.documentElement.attachEvent('onpropertychange', function(event) {
        if (event && (event.propertyName == "scsrenderstart")) {
            renderBreadcrumbs();
        }
    });
}

  6. breadcrumb.jsファイルを保存します。編集したファイルがOCM上に同期されていることを確認します。

  7. DemoSiteTheme/assets/css/custom.cssに下記コードを追加します。

    /* breadcrumb */
#breadcrumb ol {
    list-style-type: none;
}

#breadcrumb ol li {
    display:inline;
}

  8. DemoSiteTheme/assets/css/custom.cssファイルを保存します。

  9. DemoSiteTheme/layouts/post.htmlをエディタで開きます。custom.cssを</head>タグの前に追加します。

    <link href="_scs_theme_root_/assets/css/custom.css" rel="stylesheet">

  10. DemoSiteTheme/layouts/post.htmlファイルを保存します。

【確認】変更内容を確認する

  1. 「DemoSite」の編集画面に戻り、F5で画面をリフレッシュします。

  2. 「Post」ページにパンくずリストが表示されていることを確認します。
    8bce4abda8de11673f5d2c8a04647703.png
    　

動的ナビゲーション・メニューの生成

ここでは、既存コンポーネントから、ページレイアウトファイルの静的ナビゲーション・メニューを、動的にレンダリングされるメニューに置き換えます。

コンポーネントの追加

  1. WebブラウザからOCMにアクセスし、左サイド・ナビゲーションから「開発者」に切り替え、「すべてのコンポーネントの表示」をクリックします。
    4afe44619dcc9ac985d8a23b258e8951.png

  2. 「NavMenu」を選択し、「コピー」をクリックします。
    be736018cfa9a6d38fd151d5361747ab.png

  3. コンポーネントの名前として「DemoNavMenu」と入力し、「コピー」をクリックします。
    35c7211dc195b446f606e51d7c760a34.png

  4. コンポーネント「DemoNavMenu」が正常にコピーされていることを確認します。
    a8490b177bd1f7baea1ead056da84a0b.png

components.jsonの編集

  1. デスクトップに同期したDemoSiteTheme/components.jsonをエディタで開きます。
    c4916f010e862f6ee96d7f19c468837c.png

  2. 下記のようにコードを追加します。
    <変更前>

    [{
    "name": "Starter",
    "list": [
        {
            "type": "component",
            "id": "StarterComponent",
            "themed": true
        },
        {
            "type": "component",
            "id": "StarterFooter",
            "themed": true
        }
    ]
}]

    <変更後>

    [{
    "name": "Starter",
    "list": [
        {
            "type": "component",
            "id": "StarterComponent",
            "themed": true
        },
        {
            "type": "component",
            "id": "StarterFooter",
            "themed": true
        },
        {
            "type": "component",
            "id": "DemoNavMenu",
            "themed": true
        }
    ]
}]

  3. components.jsonファイルを保存します。編集したファイルがOCM上に同期されていることを確認します。

【確認】変更内容を確認する

  1. 「DemoSite」の編集画面に戻り、F5で画面をリフレッシュします。

  2. 「Home」ページを開きます。

  3. 左側のナビゲーションから「コンポーネント」に切り替えます。

  4. カスタム・コンポーネントの一覧から「DemoNavMenu」を一番上のスロットにドラッグ＆ドロップします。
    6f746d6cfa4c492f877fe31356edc9a2.png

  5. 「保存」をクリックします。
    a4008fe083e99eff0436e307262abbae.png

  6. ナビゲーション・メニューが表示されていることを確認します。
    6face7346fc2493f1acebbf94e6540e1.png

DemoNavMenuをデスクトップに同期する

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

  2. 「サイト・アセット」をクリックします。
    abf2653458b27a12280e0792b43fbb22.png

  3. 「DemoNavMenu」を選択し、「完了」をクリックします。
    105d6f0d65fa50365521f59b75ba6d92.png

  4. デスクトップ上のショートカットをダブルクリックします。
    cd1f21c032b061680904509acda1cb29.png

  5. DemoNavMenuが同期されていることを確認します。
    a5a7b6dc6f3592c9f1eb95829dc42232.png

navMenu.cssの編集

  1. デスクトップに同期したDemoNavMenu/assets/css/navMenu.cssをエディタで開きます。

  2. すべての内容をコメントアウトします。

  3. navMenu.cssファイルを保存します。

  4. DemoSiteTheme/assets/css/custom.cssに下記コードを追加します。

    /*NavMenu*/
#navbarCont .scs-component-content{
    display: block;
}

  5. custom.cssファイルを保存します。編集したファイルがOCM上に同期されていることを確認します。

template.htmlの編集

  1. DemoNavMenu/assets/template.htmlのHTMLコードを、下記の様に修正します。

    <変更前>

    <nav class="navbar navbar-expand-md">
    <button class="navbar-toggler ml-auto collapsed" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-expanded="false">
        <span class="navbar-toggler-icon"></span>
    </button>


    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav ml-auto" data-bind="foreach: navMenus">
            <li data-bind="css: classes">
                <a class="nav-link dropdown-toggle" data-bind="attr: {href: destination, target: target}, text: name"></a>
                <!-- ko if: submenus().length > 0 -->
                <ul class="dropdown-menu" data-bind="template: {name: 'submenu-template', foreach: submenus}"></ul>
                <!-- /ko -->
            </li>
        </ul>
    </div>
</nav>

    <変更後>

    <nav class="navbar navbar-expand-lg navbar-light" id="mainNav">
    <div class="container px-4 px-lg-5">
        <button class="navbar-toggler ml-auto collapsed" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-expanded="false">
            <span class="navbar-toggler-icon"></span>
        </button>


        <div class="collapse navbar-collapse" id="navbarResponsive">
            <ul class="navbar-nav ms-auto py-4 py-lg-0" data-bind="foreach: navMenus">
                <li data-bind="css: classes">
                    <a class="nav-link px-lg-3 py-3 py-lg-4" data-bind="attr: {href: destination, target: target}, text: name"></a>
                    <!-- ko if: submenus().length > 0 -->
                    <ul class="dropdown-menu" data-bind="template: {name: 'submenu-template', foreach: submenus}"></ul>
                    <!-- /ko -->
                </li>
            </ul>
        </div>
    </div>
</nav>

  2. template.html ファイルを保存します。編集したファイルがOCM上に同期されることを確認します。

【確認】変更内容を確認する

  1. 「DemoSite」の編集画面に戻り、F5で画面をリフレッシュします。

  2. 「Home」ページにナビメニューが次の図のように表示されていることを確認します。
    0ad70e56a85412d0eb5aee4ad1b20958.png

#　デジタル・アセットの登録

ここでは、リポジトリに画像ファイルをアップロードします。

デジタル・アセットの登録

  1. WebブラウザからOCMにアクセスし、左サイド・ナビゲーションから「アセット」に切り替えます。
  2. フィルタ・パネルより、「Demo Repository」を選択します。（リポジトリが１つしかない場合は、自動的に選択されます。）
    95fb323f672ad5ab9a0e097995f0129c.png
  3. 右上の「追加」→「このコンピュータから追加」をクリックします。
    4d13ee19f2ba025d84993e095050e2a3.png
  4. デスクトップDemoSiteTheme/assets/imgよりスロットに使用する画像ファイルを選択します。
    13a27a9e082c29ccb44f2c83f0eda09b.png
  5. 「完了」をクリックします。
    78d1b13dc90c23d64bc97d25d88ade39.png
  6. 画像がリポジトリにアップロードされていることを確認します。
    195f3b8fe5132f77028160b0fe1c0400.png

その3に続きます

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