Go to Qiita Advent Calendar 2024 Top
LoginSignup
0
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 1 year has passed since last update.

@shinwata(shin wata)

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

Last updated at Posted at 2023-08-08

12. コンテンツ・アイテムの追加

13. サイトの編集

14. サイトの翻訳

15. サイトの公開

コンテンツ・アイテムの追加

コンテンツ・タイプはコンテンツ・アイテムに含まれる情報を定義するフレームワークです。
CMSの一般用語では「テンプレート」と呼ばれることもあります。
コンテンツ・アイテムはコンテンツ・タイプを使用して作成する情報ブロック(=コンテンツ) です。
コンテンツ・レイアウトは、具体的には、Webサイトのページにアイテムを配置した時のアイテムのレイアウトを定義したものです。
ここでは、コンテンツ・タイプ、コンテンツ・アイテムとコンテンツ・レイアウトを追加します。

コンテンツ・タイプの作成

  1. 「Home」ページのBlog一覧とBlog詳細ページから見ると、一つのBlogは、タイトル（Title）、サブタイトル（SubTitle）、作成者（Author）、投稿日（Postdate）、画像（Image）、本文（Body）から構成されています。
    92c9274a6a0de4392d02d90dc5077e05.png
    18e99b494c5e88e7876b7a11d072a804.png

  2. WebブラウザからOCMにアクセスし、左サイト・ナビゲーションから「ADMINISTRATION」の下の「コンテンツ」をクリックし、コンテンツの管理画面に切り替えます。「リポジトリ▼」をクリックし、「アセット・タイプ」を選択します。
    47585cb3786333d134622582421a03c3.png

  3. 「アセット・タイプ」が選択されていることを確認し、「作成」→ 「コンテンツ・タイプ」をクリックします。
    5453714dfcc951c5fb1969063bd7b236.png

  4. コンテンツ・タイプの名前として「DemoPost」と入力し、「作成」をクリックします。
    0cf2c3a644e13dc79acc6643fa44864d.png

  5. コンテンツ・タイプ「DemoPost」の編集画面が表示されます。

  6. 最初に Title（タイトル）フィールドを作成します。「データ・フィールド」の「テキスト」を、「ここにデータ・フィールドをドロップして定義を追加」にドラッグ&ドロップします。
    65bd94ed4b601b044285ca76afb409d5.png

  7. 「テキスト設定」ダイアログが表示されます。「このフィールドの表示名の指定」に 「Title」 を入力し、「次」をクリックします。
    13704add2fdf47ea6ed0cc5c4c96988f.png

  8. Title（タイトル）フィールドの外観を設定します。デフォルトのまま「OK」をクリックします。
    0c99f032cef82411cf7d4eff666b6f84.png

  9. タイトル（Title）と同様に、サブタイトル（SubTitle）、作成者（Author）を作成します。

  10. 次にImage（画像）フィールドを作成します。「データ・フィールド」の「メディア」を、先程作成した「Author」の下にドラッグ&ドロップします。

  11. 「メディア設定」ダイアログが表示されます。「このフィールドの表示名の指定」に 「Image」 を入力し、「次」をクリックします。
    42132df813b045edb9a4b7d9b3894858.png

  12. Image（画像）フィールドの外観を設定します。「メディアの選択」で「イメージ」のみを選択し、「OK」をクリックします。
    8c6fde024fc5b25aacb861685764ff76.png

  13. Image（画像）フィールドが作成されていることを確認します。

  14. 投稿日（Postdate）フィールドを作成します。「データ・フィールド」の「日付」を、先程作成した「Image」の下にドラッグ&ドロップします。

  15. 「日付設定」ダイアログが表示されます。「このフィールドの表示名の指定」に 「Postdate」 を入力し、ほかのフィールドはデフォルトのままにして「次」をクリックします。
    1539e99dedb3f4f50c9d0e4219351a3f.png

  16. 投稿日（Postdate）フィールドの外観を設定します。すべてのフィールドをデフォルトのままにして「OK」をクリックします。
    dcadd5968fe0b9822f0c4985292b0f77.png

  17. 投稿日（Postdate）フィールドが作成されていることを確認します。

  18. 本文（Body）フィールドを作成します。「データ・フィールド」の「大きいテキスト」を、先程作成した「Postdate」の下にドラッグ&ドロップします。

  19. 「大きいテキスト設定」ダイアログが表示されます。「このフィールドの表示名の指定」に 「Body」 を入力し、「次」をクリックします。

  20. 本文（Body）フィールドの外観を設定します。「データ・フィールドの外観」は「リッチテキスト・エディタ」を選択し、「OK」をクリックします。
    42126ed7906f8537bd28f71886ecf904.png

  21. 本文（Body）フィールドが作成されていることを確認します。

  22. 次の図のようにすべてのフィールドが作成されていることを確認し、「保存」をクリックします。
    5506a76da82a710a73691941a228a3a3.png

  23. コンテンツ・タイプが作成されていることを確認します。
    ed40ee4593cbb1a6203e960b562c2c1d.png

コンテンツ・レイアウトの作成

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

  2. 右上の「作成」→ 「コンテンツ・レイアウトの作成」をクリックします。
    451b8fdfcb96303e288bf5ed734ce425.png

  3. 作成ダイアログが表示されます。

    以下を入力します。

    • アセット・タイプの選択：DemoPost
    • 表示するフィールドの選択：概要
    • コンテンツ・レイアウトの名前の指定：DemoPost-overview
    • コンテンツ・レイアウトの説明の指定：（任意）

    「作成」をクリックします。
    f6319e31a586707c076fb46d8de10409.png

  4. コンテンツ・レイアウト「DemoPost-overview」が正常に作成されていることを確認します。
    4d8e8fca31064710f06ddcebd9716456.png

  5. 続けて、コンテンツ・レイアウト「DemoPost-detail」を作成します。右上の「作成」→ 「コンテンツ・レイアウトの作成」をクリックし、作成ダイアログが表示されたら、以下を入力します。

    • アセット・タイプの選択：DemoPost
    • 表示するフィールドの選択：詳細
    • コンテンツ・レイアウトの名前の指定：DemoPost-detail
    • コンテンツ・レイアウトの説明の指定：（任意）

    「作成」をクリックします。
    9f9f77faea9aac08b958d33e33753805.png

  6. コンテンツ・レイアウト「DemoPost-detail」が正常に作成されていることを確認します。
    855582d87d932a191823845fc128e353.png

コンテンツ・レイアウトの編集

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

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

  3. 「DemoPost-overview」と「DemoPost-detail」を選択し、「完了」をクリックします。
    e552a4012218cd4d39d0bfe616d5e582.png

  4. 「DemoPost-overview」と「DemoPost-detail」が同期されていることを確認します。
    71a9e4e10dfedcffe4402e81c965dc71.png

  5. デスクトップに同期したDemoPost-overview/assets/layout.htmlをエディタで開きます。
    5447f3a1dd129f14e8e0fa42882c6e51.png

  6. HTMLコードを、下記の様に修正します。

    <変更前>

    {{#fields}}
<ul class="DemoPost">
<li><h2>title</h2></li>
<li><p>{{title}}</p></li>

<li><h2>subtitle</h2></li>
<li><p>{{subtitle}}</p></li>

<li><h2>author</h2></li>
<li><p>{{author}}</p></li>

<li><h2>image</h2></li>
{{#image}}
{{#showName}}
<li><span>{{name}}</span></li>
{{/showName}}
{{#url}}
<li><img src="{{url}}" data-asset-operation="view:{{id}}"></img></li>
{{/url}}
{{^showName}}
{{^url}}
<li>{{referenceInaccessible}}</li>
{{/url}}
{{/showName}}
{{/image}}

<li><h2>postdate</h2></li>

<li><p>{{postdate.formatted}}</p></li>

<li><h2>body</h2></li>
<li><p>{{{body}}}</p></li>

{{#scsData.detailPageLink}}
<li><a href="{{scsData.detailPageLink}}" title="Go to detail page"><span class="detail- page">Details</span></a></li>
{{/scsData.detailPageLink}}
</ul>
{{/fields}}

    <変更後>

    {{#fields}}
<div class="post-preview">

    <a href="{{#scsData.detailPageLink}}{{scsData.detailPageLink}}{{/scsData.detailPageLink}}" >
    <h2 class="post-title">{{title}}</h2>

    <h3 class="post-subtitle">{{subtitle}}</h3>
    </a>
    
    <p class="post-meta">Posted by <a href="#">{{author}}</a> on {{postdate.formatted}}</p>

</div>
<hr class="my-4">

{{/fields}}

  7. DemoPost-overview/assets/layout.html ファイルを保存します。

  8. デスクトップに同期したDemoPost-overview/assets/design.cssをエディタで開きます。

  9. すべてのコードをコメントアウトします。

  10. DemoPost-overview/assets/design.css ファイルを保存します。

  11. デスクトップに同期したDemoPost-detail/assets/layout.htmlをエディタで開きます。HTMLコードを、下記の様に修正します。

    <変更前>

    {{#fields}}
<ul class="DemoPost">
<li><h2>title</h2></li>
<li><p>{{title}}</p></li>

<li><h2>subtitle</h2></li>
<li><p>{{subtitle}}</p></li>

<li><h2>author</h2></li>
<li><p>{{author}}</p></li>

<li><h2>image</h2></li>
{{#image}}
{{#showName}}
<li><span>{{name}}</span></li>
{{/showName}}
{{#url}}
<li><img src="{{url}}" data-asset-operation="view:{{id}}"></img></li>
{{/url}}
{{^showName}}
{{^url}}
<li>{{referenceInaccessible}}</li>
{{/url}}
{{/showName}}
{{/image}}

<li><h2>postdate</h2></li>

<li><p>{{postdate.formatted}}</p></li>

<li><h2>body</h2></li>
<li><p>{{{body}}}</p></li>

{{#scsData.detailPageLink}}
<li><a href="{{scsData.detailPageLink}}" title="Go to detail page"><span class="detail- page">Details</span></a></li>
{{/scsData.detailPageLink}}
</ul>
{{/fields}}

    <変更後>

    {{#fields}}
<!-- Page Header-->
<header class="masthead" style="background-image: url({{#image}}'{{url}}'{{/image}})">
    <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>{{title}}</h1>
                    <h2 class="subheading">{{subtitle}}</h2>
                    <span class="meta">Posted by
                    <a href="#">{{author}}</a>
                    on {{postdate.formatted}}</span>
                </div>
            </div>
        </div>
    </div>
</header>

<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">
                {{{body}}}
            </div>
        </div>
    </div>
</article>
{{/fields}}

  12. DemoPost-detail/assets/layout.html ファイルを保存します。編集したファイルがOCM上に同期されていることを確認します。

コンテンツ・タイプにレイアウトを追加

  1. WebブラウザからOCMにアクセスし、左サイト・ナビゲーションから「ADMINISTRATION」の下の「コンテンツ」をクリックし、コンテンツの管理画面に切り替えます。「リポジトリ▼」をクリックし、「アセット・タイプ」を選択します。
    47585cb3786333d134622582421a03c3.png

  2. 「DemoPost」を選択し、「編集」をクリックします。
    d8a3ca7633864ceac1db020bf17db0a7.png

  3. 「コンテンツ・レイアウト」タブに切り替え、下記の様に修正します。「保存」をクリックします。

    • コンテンツ・アイテムのデフォルト：DemoPost-detail
    • コンテンツ・リストのデフォルト：DemoPost-overview
    • 空のコンテンツ・リストのデフォルト：DemoPost-overview
    • コンテンツ・プレースホルダーのデフォルト：DemoPost-detail

13b2101dd0364d964e7d24de3873adbe.png

  1. コンテンツ・タイプが正常に保存されていることを確認します。
    ed40ee4593cbb1a6203e960b562c2c1d.png

リポジトリにコンテンツ・タイプを指定

  1. 「アセット・タイプ▼」をクリックし、「リポジトリ」を選択します。
    66178e6555628230741f6fcc2b590727.png

  2. 「Demo Repository」を選択し、「編集」をクリックします。
    47d19f2a3093b083ff183e0826656080.png

  3. 「アセット・タイプ」に「DemoPost」を選択し、「保存」をクリックします。
    b3e6c8e0470e09c2f630c369473c4756.png

  4. リポジトリが正常に更新されていることを確認します。
    01b6522a3a0df50e4df5b2a554776c30.png

コンテンツ・アイテムの追加

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

  2. フィルタ・パネルより、「Demo Repository」を選択します。（リポジトリが１つしかない場合は、それが自動的に選択されます。）
    95fb323f672ad5ab9a0e097995f0129c.png

  3. 右上の「作成」→「新規コンテンツ・アイテムを作成します」をクリックします。
    ae1f7f7747f713c99f0f2898e28476c8.png

  4. コンテンツ・タイプに「DemoPost」を選択し、「OK」をクリックします。
    1-3.png

  5. 下記の通りプロパティを入力します。

    • 名前：post_01

    • 説明：（任意）

    • 言語：英語(en) を選択

    • 翻訳不能：チェックしない

    • Title：Man must explore, and this is exploration at its greatest

    • SubTitle：Problems look mighty small from 150 miles up

    • Author：Alex

    • Image：デジタル・アセットに登録したBlogの画像を選択します

    • Postdate：任意の日付を選択します。

    「タグとコレクション」をクリックして、「チャネル」パネルに切り替えます。
    84a6345bc7c6f17ddfe15f524164502e.png

    • Body： （任意、リッチテキストエディタを利用可）
      85fa46070b25f5ca13cdf3cee0d9d33d.png

下記のようにソースコードを入力することも可能です。
1-4.png

  • ターゲット・チャネル： DemoSiteを追加
    1-5.png
    1-6.png

「保存」をクリックします。
1-7.png
6. コンテンツ・アイテムが正常に保存されていることを確認し、「完了」をクリックします。
1-8.png
7. 作成したコンテンツ・アイテムを選択して、「選択したアセットの表示」アイコンをクリックします。
1-9.png
8. フォーム形式で入力内容を確認できます。「コンテンツ・フォーム・ビュー」をクリックし、「コンテンツ・リストのデフォルト」を選択します。
461514f6e3af89ab29f309d431da6f03.png
9. Web ページでの表示イメージを確認（プレビュー）できます。
43a6a78bd6e6ce9fc5a9ab546d40413f.png
10. 「コンテンツ・リストのデフォルト」をクリックし、「コンテンツ・アイテムのデフォルト」を選択します。
3de8ce368e64f883b7848eb778bb7598.png
11. Web ページでコンテンツ・アイテム「post_01」の本文の表示イメージを確認できます。「閉じる」をクリックします。
ab4260786db18f52ce252074dbdebe1e.png
12. 同じ手順で他のコンテンツ・アイテムを登録します。

7ae7abf007d0658cb108e1b60dc28af6.png

サイトの編集

ここでは、ページのSlotに内容を埋めます。

ホームページの編集

  1. OCMのナビゲーションからサイトを選択し、更新を表する数①をクリックします。
    fbee2e43c7831af85ebb34221eb3650d.png

  2. 前に作成されたupdateという更新名をクリックします。
    c64101a08b979aa12de71b3f1ca18b6e.png

  3. 表示から編集に切り替えます。
    3dea5e162a1fef7a3418e73a64c248c2.png

  4. ホームページを開きます。

  5. コンポーネントから「シード」をクリックして、サービスで使用可能なデフォルト・コンポーネントのリストを表示します。段落をヘッダー部のSlotにドラッグ&ドロップします。
    a887d3f27334c0565a364d76644f0253.png

  6. 段落コンポーネントをクリックし、テキストを入力します。 テキストは、コンポーネントのデフォルトのスタイルにフォーマットされます。テキストの任意の部分に対してデフォルトのフォーマットを変更する場合は、フォーマットするテキストを選択し、フォーマット・ツール・バーの任意のオプション(フォント、色、位置合せなど)を選択します。
    9490be6864f33a026ee683e7ecdb2a1b.png

  7. 次は作成したコンテンツを本文Slotに配置します。コンポーネント「コンテンツ・リスト」をSlotにドラッグ&ドロップします。
    6a32026ed443dd6ac8bfb3b6838c2b27.png

  8. メニュー・アイコンをクリックして、「設定」を選択します。
    c0985b5f15419e3c5e095a8011955897.png

  9. 「一般」タブでコンテンツ・タイプは作成したDemoPostを選択します。
    353ec56d549853c42566819b61eaede3.png

  10. コンテンツ・リストの表示を確認します。
    d2745d94aa98dc822fdd61bbb51e77c0.png

  11. もう一個段落をSlotにドラッグ&ドロップします。
    15a492f2b29dbc981b6aaf5577a0667d.png

  12. テキストを入力します。書式はヘッダー6を選択します。
    118ffcd73679ea7568e29c7a5cc9b120.png

  13. 段落内にリンクを追加する手順は次です。リンクとして使用するテキストやイメージを選択し、リンクアイコンをクリックします。
    df7a7a4970eead3ceff2e785d44f5498.png

  14. 「リンク・タイプの選択」はサイト・ページを選択します。現在のサイトのページを選択し、リンクを開く場所(デフォルトは同じウィンドウで開く)を選択します。
    54c7b6d08e73c402237835235cb8b358.png

  15. 表示モードに切り替えます。保存をクリックします。
    d50065eeb8c90c88e73fb836fba2b07e.png

  16. 既存サイトと表示が違う場合、コンテンツの表示をコントロールしている設定やCSSファイルを適切に修正します。DemoSiteTheme/assets/css/custom.cssに下記コードを追加します。

    /*old posts*/
#articleCont h6 a{
    background-color: #0085a1;
    border-color: #0085a1;
    font-size: 14px;
    font-weight: 800;
    padding: 15px 25px;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-radius: 0;
    font-family: 'Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
    float: right;
    color: #fff;
    display: inline-block;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
}

#articleCont h6:after {
    content: ".";
    display: block;
    clear: both;
    width: 0;
    height: 0;
    line-height: 0;
    visibility: hidden;
    overflow: hidden;
}

/* Hides from IE-mac \*/ * html .clearfix {
    height: 1%;
}

#articleCont h6 a:hover, #articleCont h6 a:focus, #articleCont h6 a:active {
    color: #fff;
    background-color: #00657b !important;
    border-color: #00657b !important;
}

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

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

  19. 「Home」ページが次の図のように表示されることを確認します。
    2e496e81e98506764293689f5eac32db.png

Blog詳細ページの編集

  1. 編集モードに切り替え、「Post」ページを選択します。

  2. 一番上のSlotに作成したDemoNavMenuを配置します。
    481a8eb5411a5afbde8e391fe0ed7bad.png

  3. コンテンツ・プレースホルダー・コンポーネントを使用して、1つ以上のタイプのコンテンツ・アイテムを動的に表示できます。articleContのSlotに、コンテンツ・プレースホルダー・コンポーネントを追加します。
    3767e3110cc809401b2b30f17ba8ba02.png

  4. コンポーネントとその外観を編集するには、そのコンポーネントのメニュー・アイコンをクリックして、「設定」を選択します。
    b0efc431771913c5c3d174edf5e57b68.png

  5. 「一般」タブを使用して、間隔、位置合せおよび他の表示オプションを変更します。

    ・コンテンツ・タイプ: 使用可能なコンテンツ・タイプを1つ以上選択します。ここでは作成したDemoPostを選択します。
    ・アイテムの表示、個々のアイテムを表示するページ、間隔はデフォルトのままにします。
    bcda9f281957ec9522d7d4b7329ca7d9.png

  6. 詳細ページを確認するために、コンテンツ・リストのホームページに戻る必要があります。ホームページを開きます。

  7. 表示モードに切り替え、「保存」をクリックします。
    d50065eeb8c90c88e73fb836fba2b07e.png

  8. 表示されているコンテンツ・リストから一つ目のBlogのタイトルをクリックします。
    df68f083fe9b62d8fab41c8d4e35b770.png

  9. 詳細ページが既存サイトと同じように表示されることを確認します。HTMLの構造が変わったところがあるため、既存サイトに適用していたCSSは適用されていない場合があります。既存サイトと表示が違う場合、詳細ページ表示をコントロールしている設定やCSSファイルを適切に修正します。
    f21a03d7d64b12ecf6821c353ee811b6.png

  10. すべてのSlotを配置したら、更新をベース・サイトにコミットします。
    3d77c17da028572cbdb3609de4669951.png

  11. 確認画面でコミットをクリックします。
    2e931ffae93792a9b124ba8924618465.png

  12. コミットが完了していることを確認します。現在の更新内の変更をコミットすると、変更がベース・サイトに加えられ、更新は削除されます。
    15237445dc66ec622222dbfcf88f6903.png

サイトの翻訳

ここでは、翻訳ジョブを利用し、すべてのサイト・コンテンツおよびターゲット対象アセットをローカルにダウンロードします。さらに、翻訳された内容をOCMにインポートします。

サイトの翻訳

  1. 左サイト・ナビゲーションから「サイト」をクリックし、サイトの管理画面に切り替えます。「DemoSite」を選択し、「その他」→「「翻訳」をクリックします。
    4c48346eac13c575aa0fb4d91b50ce87.png

  2. 「翻訳ジョブの作成」ダイアログが表示されます。

    以下を入力／選択します。

    • 名前：job001
    • ソース言語：英語(en)
    • ターゲット言語：日本語（ja）
    • 翻訳ジョブ・コンテンツ：サイト全体（すべてのサイト・コンテンツおよびターゲット対象アセット）

    「作成」をクリックします。
    1b0545da59714c3edaef637374016069.png

  3. 翻訳ジョブが作成されたことを確認します。
    6ec4a6542de622d9eda8810f770f8eac.png

  4. 右上の「ジョブの表示」→「翻訳ジョブ」をクリックします。
    626914946885b6821ddbfe5c1bd1c738.png

  5. 翻訳ジョブの一覧が表示されます。「job001」を選択し、「開く」をクリックします。
    f143e11a39ef33a8566b2617ee9da99e.png

  6. 「job001」のステータスが準備完了であることを確認し、右上の「ダウンロード」をクリックします。
    57d07a6b9e0bd03a870a2416c218eeba.png

  7. ダウンロードされたjob001.zipファイルを展開し、フォルダの構成を確認します。

    • assets/job.json: 翻訳ジョブの内容が記述
    • assets/root フォルダ: ソース言語（ここでは英語）のアセットが含まれます
    • site/job.json: 翻訳ジョブの内容が記述
    • site/root フォルダ: ソース言語（ここでは英語）のサイト情報およびサイトコンテンツが含まれます
    • site/root/siteinfo.json: サイトのプロパティ
    • site/root/structure.json: サイトのページ構成
    • site/root/<数字.>json : 各ページのサイト・コンテンツの内容
      0885ab34bbe84cda4537eeda566e91ed.png

  8. job001/assets にあるrootフォルダをコピーし、同じフォルダに配置して、フォルダ名を「ja」に変更します。次に、job001/siteにあるrootフォルダをコピーし、同じフォルダに配置して、フォルダ名を「ja」に変更します。
    51842bc9e5cc4deb780e4ce39473fe26.png

  9. job001/assets/ja にあるすべてのファイルを英語から日本語へ書き換え、保存します。
    84900ac46fed0a719b80f30a5102fab4.png

  10. テキストエディタでjob001/site/ja/structure.json を開き、英語から日本語へ翻訳し、保存します。
    8eff6cd6761b857de9b205151144bebf.png

  11. このように、job001/site/jaにあるすべてのファイルを英語から日本語へ書き換え、保存します。

  12. assetsフォルダとsite フォルダを zip 形式に圧縮します。圧縮されたファイルの名前は自由ですが、ここでは job001_translated.zipとします。
    *assetsフォルダとsiteフォルダを選択して圧縮してください
    f255a822051e58d0756a07ef3c54cd3e.png

  13. OCMのサイトから「翻訳ジョブ」を開き、「翻訳ファイルのインポート」をクリックします。
    262afdf073ea86f8367d431ef632d1c5.png

  14. ドキュメントのフォルダUIが表示されます。任意のフォルダを作成し、 job001_translated.zipをアップロードします。
    7b45eb020dc2f8e3c23fd16261188c25.png

  15. job001_translated.zipがアップロードされていることを確認し、job001_translated.zipを選択し、「OK」をクリックします。
    af1f7d61dbb82b0b482e78f80eff2c92.png

  16. インポートファイルの検証が実行されます。問題がなければ、そのまま「インポート」をクリックします。

    「翻訳ジョブ内のすべてのアセットを表示します」で、ジョブのアセット内容を確認できます。

    「翻訳ジョブ内のすべてのページを表示します」で、ジョブのページ内容を確認できます。
    69abc5492141ca69224e50b6f44a6296.png

  17. 翻訳ジョブが正常に終了されることを確認します。ステータスが「翻訳済」に更新されることを確認します。
    c5d4e6b1ae28cfaa604573283dbcac60.png

【確認】翻訳内容を確認する

  1. OCMのナビゲーションからサイトを開きます。DemoSiteを右クリックし、「表示」を選択します。
    6fa489bf3a2ae48b15e43a7b32d80b8a.png
  2. URLを編集します。DemoSiteの後ろに/jaを追加します。
    7cdc04aee4d732556d3bdc6c0a111b92.png
  3. 編集されたURLを開きます。表示されたページを確認します。ナビゲーション・メニュー、翻訳されたコンテンツ・アイテムの表示が日本語になっています。
    bc077e2788a1cbbf5631cb3dcf59914d.png
  4. Blogのタイトルをクリックします。コンテンツ・アイテムの本文も日本語になっていることを確認します。
    166d459f257dced5faad76803351ac80.png

サイトの公開

ユーザーがサイトにアクセスできるようにオンラインにする必要があります。ここでは、サイトを公開し、オンラインにします。

サイトの公開

  1. OCMのナビゲーションからサイトを開きます。DemoSiteを右クリックし、「公開」を選択します。
    b30e52c72729e981b091c4071d1026c2.png

  2. 公開ダイアログが表示されます。「完全な検証レポートの表示」を選択し、「OK」をクリックします。
    e03044cbc7f560cbce15aa8c634365ab.png

  3. DemoSiteで利用されるすべてのアセットに対する公開検証が実行されます。問題がなければ、そのまま「公開」をクリックします。
    285456d8e8d039c82213fa49d651260e.png

  4. サイトが公開されていることを確認します。ステータスが公開済に更新されています。
    13e7ace38bddcf18f83b8830f9e201c7.png

  5. DemoSiteで利用されるすべてのアセットのステータスが公開済に更新されていることを確認します。
    7a32ac2a40f17cdc54ed7e773394b4ab.png

  6. 続けて、サイトをオンライン状態にします。DemoSiteを右クリックし、「オンラインにする」を選択します。
    716d781b4162617d506073582041b0d7.png

  7. 「確認して続行」にチェックを入れ、「オンラインにする」をクリックします。
    2ea717bd77cd0da46b308a55058e4c12.png

  8. サイトがオンライン状態になります。これで、サイトはインターネット経由でアクセスできるようになります。

    ※インターネット上に公開されますので注意して行ってください。
    4edb0f0f13f118686e06ee1ee0036133.png

    DemoSiteを右クリックし、「プロパティ」を選択します。
    f1f10d44976a2f315396e48d5e4f8cab.png

  9. 「サイトURL」をコピーします。
    f0ba9e986c83b92ed24c26e16d70c6b6.png

  10. 別ブラウザでサイトを開きます。正しく表示されたことを確認します。
    43b7314a6dec0a692dca632be7368c6d.png

以上で終了です、お疲れ様でした。

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

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?