Forum Stats

  • 3,714,730 Users
  • 2,242,614 Discussions
  • 7,845,030 Comments

Discussions

Howdy, Stranger!

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

Log In Register

Categories

Oracle Cloud 公式ブログ

Oracle Content and Experience で多言語サイトを作成しよう（後編）

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

この文書は Oracle Content and Experience (OCE) のサイト作成機能を利用し、多言語サイトを作成・公開する方法をステップ・バイ・ステップで紹介するチュートリアルの後編です。また、サイト上で公開するコンテンツは、アセット管理機能で管理されるコンテンツ・アイテムを利用します

前提条件：

この文書は、2020年3月時点での最新バージョン(20.1.3)を元に作成されてます

image

Oracle Content and Experience で多言語サイトを作成しよう（後編）

説明

このチュートリアルでは、OCE のサイト機能を利用し、マルチリンガルサイトを作成・公開します。また、Web サイト上で公開するコンテンツは、以前のチュートリアルで作成したリポジトリ(Sample Content Repository) とコンテンツ・タイプ (sampleNewsType) を利用します。

作成するWebサイトは以下の通りです

  • サイト名：sampleSite
  • 対応言語：日本語(ja)と英語(en) のマルチリンガル。マスターは日本語
  • サイトデザイン：OCE の事前定義済テンプレート(StarterTemplate)を利用

このチュートリアルでの作成イメージを以下に示します

ocewcm001.jpg

5. サイトの編集・翻訳

サイト sampleSite を編集します。まずは日本語サイトのページを編集し、4項で作成したコンテンツアイテムを表示できるようにします。その後、翻訳ジョブを利用して英語ページを作成します。

5.1 日本語サイトの編集

  1. 左ナビゲーションの「サイト」をクリックします
  2. sampleSite を選択し、「開く」をクリックします
    ocewcm036.jpg

  3. サイトの編集画面（Site Builder）が表示されます。「ベース・サイト▼」をクリックし、「新規更新の作成」を選択します
    ocewcm037.jpg

  4. 「新規更新の名前の指定」に update と入力し、「OK」をクリックします
    ocewcm038.jpg

  5. 「update」に切り替わっていることを確認します。表示側にあるスイッチをクリックし、「編集」モードに切り替えます
    ocewcm039.jpg

  6. 左サイドバーの「ページ」をクリックします。
    ocewcm040.jpg

  7. 今回のチュートリアルで利用しないページ（Developing TemplatesとPrivate Policy）を削除します
    1. Developing Template をクリックします
      ocewcm041.jpg

    2. 「ゴミ箱」アイコンをクリックします。続けて「OK」をクリックします
      ocewcm042.jpg

    3. 同じ手順で、Private Policy ページも削除します

    4. 最終的なページ階層は、Home と Detail Page の2つのみとなります
      ocewcm043.jpg

  8. Home のページ構成を編集します
    1. Home をクリックします。続けて「ページ構成」アイコンをクリックします
      ocewcm043.jpg

    2. 「ページURL」の「オーバーライド」にチェックを入れます。続けて、「ページ名」を「Home」からカタカナの「ホーム」に変更します
      ocewcm044.jpg

    3. 「閉じる」をクリックします

  9. 右上の「保存」をクリックし、更新内容を保存します
    ocewcm045.jpg
    サイトの編集作業中は、定期的に更新内容を「保存」することを推奨します
  10. ホームページを編集します。ホームページには「タイトル」と「段落」のコンポーネントが配置されており、それぞれ英語のダミーテキストが入力されています
    ocewcm046.jpg

  11. ホームページの「タイトル」と「段落」のテキストをそれぞれ日本語で編集します。ここでは以下の通りに編集します
    • タイトル：　ようこそ
    • 段落：　ここはサンプルサイトのホームページです
      ocewcm047.jpg

  12. 4項で作成したコンテンツ・アイテムを表示（タイプ=sampleNewsType）を一覧表示するようにします
    1. 左メニューの「コンポーネント」を選択します。
    2. 「シード」を選択します
      ocewcm048.jpg

    3. 「コンテンツ・リスト」コンポーネントを、先ほど編集した「ここはサンプルサイトのホームページです」の直下にドラッグ&ドロップで配置します
      ocewcm049.jpg

    4. 配置した「コンテンツ・リスト」コンポーネントをクリックします
    5. 緑色の「コンテンツ・リスト」のメニューをクリックし、「設定」をクリックします
      ocewcm050.jpg

    6. 一般タブで、以下の通りに設定します
      • コンテンツ・タイプ：　sampleNewsType
      • 最大アイテム数：　2
      • 日付：　すべての日付
      • 並替え基準：　日付(新しいものから)
        ocewcm051.jpg

    7. 右上の「✖️」で、設定画面を閉じます

  13. コンテンツ・リストコンポーネント内に、作成したコンテンツ・アイテム（sample news content 002）の日本語版が表示されます
    ocewcm052.jpg

  14. スイッチを編集→表示に切り替え、「保存」をクリックします
    ocewcm053.jpg

  15. 「これは002ニュースの本文です」の下の Details のリンクをクリックします
    ocewcm054.jpg

  16. sample news content 002 の詳細ページが表示されます（レイアウトは一覧表示と同じです）。
    サイト内の「ホーム」をクリックし、元のページに戻ります
    ocewcm055.jpg

  17. 「ja (デフォルト) ▼」をクリックし、「en」に切り替えます
    ocewcm056.jpg

  18. 英語サイトに切り替わります。以下を確認します
    • コンテンツ・アイテムは英語に翻訳したコンテンツが表示されます
    • ページに配置した「タイトル」「段落」の文字は日本語のまま
    • ナビゲーション上の「ホーム」は日本語のまま
      ocewcm057.jpg

      ページ内に配置されたコンポーネントのテキスト（=サイト・コンテンツ）およびページ名の翻訳は「翻訳ジョブ」を利用します。次の手順でこれらの翻訳しします
  19. 更新内容を適用します。「コミット」をクリックします。確認のダイアログが表示されるので「コミット」をクリックします
    ocewcm058.jpg

    コミット操作により、更新内容がベース・サイトに反映され、更新（ここでは update）は削除されます

5.2 サイト・コンテンツの翻訳

「翻訳ジョブ」を利用し、ページ内に配置した「タイトル」や「段落」のテキスト情報、およびページ名を翻訳します。

  1. 左ナビゲーションの「サイト」をクリックします。sampleSite を選択し、「翻訳」をクリックします
    ocewcm059.jpg

  2. 翻訳ジョブを作成します。ここでは、以下の通りに入力し、最後に「作成」をクリックします
    • 名前： sampleSite_job001
    • ソース言語：日本語 (ja)  （※自動選択されます。変更不可）
    • ターゲット言語：英語 (en)
    • 翻訳ジョブ・コンテンツ：サイト・コンテンツのみ
    • 翻訳プロジェクト：翻訳パッケージのエクスポート
      ocewcm060.jpg

  3. 「翻訳ジョブ」をクリックします
    ocewcm061.jpg

  4. sampleSite_job001 をクリックします
    ocewcm062.jpg

  5. ステータスが「準備完了」であることを確認し、「ダウンロード」をクリックします
    ocewcm063.jpg

  6. ステータスが「進行中」に遷移し、翻訳パッケージ sampleSite_jpb001.zip がローカル環境にダウンロードされます
  7. ダウンロードされた sampleSite_jpb001.zipを任意のフォルダに移動し、展開します。展開すると、以下のような構成になります
    • job.json: 翻訳ジョブの内容が記述。sourceLanguage が "ja"、targetLanguagesが "en" となっています
    • root フォルダ: ソース言語（ここでは日本語）のサイト情報およびサイトコンテンツが含まれます
      • siteinfo.json: サイトのプロパティ
      • structure.json: サイトのページ構造（ナビゲーション）を記述
      • <数字.>json: 各ページのサイト・コンテンツの内容
        ocewcm064.jpg
  8. 今回は、structure.jsonの「ホーム」のページ名、および「ホーム」ページ内の「タイトル」「段落」を翻訳します
  9. root フォルダと同列に、翻訳対象のロケールと同じ名前のフォルダ（en フォルダ）を作成します
  10. en フォルダに、root フォルダ内の .json ファイルをすべてコピーします
    ocewcm065.jpg

  11. en フォルダの structure.json をテキストエディタ等で開きます
    1. "name" の"ホーム"を英語に翻訳します。ここでは "HOME" と書き換えます
    2. 保存します
      ocewcm066.jpg

      翻訳したホーム(HOME) の id が 10 とあります。これより、10.json が「ホーム」ページの定義ファイルであることが確認できます
  12. en フォルダの 10.json をテキストエディタ等で開きます
    1. scs-titleの "ようこそ" を翻訳します。ここでは "Welcome" とします
    2. scs-paragraphの "これはサンプルサイトのホームページです" を翻訳します。ここでは "This is sampleSite Home Page" とします
    3. 保存します
      ocewcm067.jpg

  13. root フォルダ、en フォルダ、job.json を含む site フォルダを圧縮します。圧縮ファイルの名前は自由ですが、ここでは sampleSite_job001_translated.zip とします
    ocewcm068.jpg

  14. OCE の「サイト」→「翻訳ジョブ」を開きます。「インポート」をクリックします
    ocewcm069.jpg

    1. ドキュメントのフォルダが表示されます。任意のフォルダを開き、先ほど作成した sampleSite_job001_translated.zip をアップロードします
    2. アップロードした sampleSite_job001_translated.zip を選択し、「OK」をクリックします
      ocewcm070.jpg

    3. インポートファイルの検証が実行されます。正常終了することを確認し、「翻訳ジョブ内のすべてのページを表示します」をクリックしすると、ジョブの内容を確認できます
    4. 「インポート」をクリックします
      ocewcm071.jpg

    5. 「正常にインポートされました」を確認します。翻訳ジョブのステータスが「翻訳済」に遷移します
      ocewcm072.jpg

  15. 左ナビゲーションの「サイト」を開き、sampleSite を選択し、「開く」をクリックします
    ocewcm073.jpg

  16. サイトの編集画面が開きます。「ja (デフォルト)」から「en」に切り替えます。ナビゲーションとページ内のテキストが、正しく翻訳されていることを確認します
    ocewcm074.jpg

6. サイトの公開

サイト sampleSite を公開し、サイト訪問者が参照可能な状態にします

6.1 サイトの公開

サイトを公開します。オンライン状態のサイトを「公開」すると、ベース・サイトの内容がサイトにアクセス可能なユーザーすべてに表示されます

  1. sampleSite を選択し、「公開」をクリックします
    ocewcm075.jpg

  2. 「サイトと、サイトのページに追加されているすべてのアセットの公開」を選択し、「OK」をクリックします
    ocewcm076.jpg

    「サイトと、サイトの公開チャネルのターゲット対象になっているすべてのアセットを公開」を選択すると、サイトの公開チャネル（ここでは sampleSite）が設定されているすべてのアセット（含むサイトのページ上で利用されていないアセット）も、公開されます
  3. サイトの公開検証が行われます。検証チェックに合格したことを確認し、「公開」をクリックします
    ocewcm077.jpg

  4. しばらくすると、サイトのステータスが「公開」に遷移します
    ocewcm078.jpg

6.2 サイトをオンラインにする

最後に、サイトを「オンライン」にします。サイトをオンラインにすると、完全にレンダリングされたHTMLバージョンのサイトが作成され、Oracle Cloud のホスティング環境ににコピーされます。オンライン・サイトのURLは、サイトのプロパティより確認できます。デフォルトのURLの形式は次のとおりです。

https://<OCE instance>-<Cloud accont>.cec.ocp.oraclecloud.com/site/<Site name>

  1. sampleSite を選択し、「オンラインにする」をクリックします
    ocewcm079.jpg

  2. 「確認して続行」にチェックを入れ、「オンラインにする」をクリックします
  3. サイトがオンライン状態に遷移します
    ocewcm081.jpg

7. 確認

公開されたオンライン状態のサイトを確認します

  1. sampleSite001 を選択し、「プロパティ」を開きます
  2. 「サイトURL」をコピーし、別ブラウザで開きます
    ocewcm082.jpg

  3. 日本語サイトが表示されます。
    ocewcm083.jpg

  4. 「002ニュースの本文です」の下の Details をクリックします。日本語の記事詳細ページが表示されます
  5. ナビゲーション上の「ホーム」をクリックします。日本語サイトの「ホーム」に戻ります
  6. URL の /sampleSite の後ろに "/en/" を入れます。英語サイトが表示されます
    ocewcm085.jpg

  7. 「This is thw body of 002 news.」の下の Details をクリックします。英語版の記事詳細ページが表示されます
  8. ナビゲーションの Home をクリックします。英語サイトの「Home」に戻ります

以上で、このチュートリアルは終了です。お疲れさまでした

Tagged:
· Share on TwitterShare on Facebook
Sign In or Register to comment.