ストアフロントコンポーネントをローカライズする

学習の目的

この単元を完了すると、次のことができるようになります。

Salesforce B2C Commerce のローカライズプロセスの手順を挙げる。
テキストとソースファイルの翻訳プロセスのステップを挙げる。
リソースファイルのしくみを説明する。
画像と URL をローカライズする方法を説明する。

ローカライズコンポーネント

Cloud Kicks のマーチャンダイザーである Brandon Wilson は、組織レベルとサイトレベルでの地域情報の構成を完了し、ローカライズプロセスを開始できるように準備を整えました。ここから先は自分だけの力では無理であるため、Cloud Kicks のデベロッパー、Vijay Lahiri に協力を求めます。

Cloud Kicks のデベロッパーの Vijay Lahiri

これから実行する手順は次のとおりです。

ステップ	作業
1	ストアフロントのどのコンポーネント (コンテンツアセット、商品、商品属性、通貨など) にローカライズが必要かを特定する。
2	どの言語をサポートし、言語が相互にどのように関係するかを特定する。
3	テンプレートとプロパティファイルを使用して、ローカライズされたコンポーネントをどのように構成するかを決定する。

コンポーネントを特定する

Brandon はまず、ストアフロントでテキスト表示されているものと、グラフィック内のテキストとして表示されているものを特定します。すべてが翻訳対象です。国によっては、その国の言語のみを表示することが求められることもあります。異なる言語を表示すると、買い物客を遠ざけることになりかねません。

Brandon は Vijay と協力して次のことを実行します。

言語固有のフォルダー (es_US など) を作成する。
地域情報固有のテキストが含まれる画像 (ボタンなど) を特定する。
ストアフロントで使用されているテンプレートのみを翻訳のために特定する。
地域情報固有テキストが使用されている JavaScript ファイルを特定する。
地域情報固有テキストが使用されているその他の商品、カテゴリ、コンテンツ画像を特定する。

ただし、ローカライズが可能ではない状況もあります。詳細は、こちらのドキュメントを参照してください。

言語とその相互関係を特定する

Brandon は、どの言語をサポートし、言語が相互にどのように関係するかを特定する必要があります。たとえば、米国とスペインのストアフロントバージョンで同じ基盤ビジネスオブジェクトを使用し、買い物客が場所を選択したときにどのファイルセットから選択されるかが B2C Commerce で認識されるようにしたいが、ヨーロッパでは、特定の国でその国だけの商品を提供したいと考えています。そのため、各地域情報に固有のカタログデータを提供します。

ローカライズされたコンポーネントを構成する

Salesforce B2C Commerce はビジネスオブジェクト (カタログ、商品、属性など) からストアフロントまでが翻訳可能です。これはどういう意味でしょうか? その答えは、どこにローカライズ可能なデータがあり、どのように整理されているかにあります。B2C Commerce ではローカライズされたストアフロントを提供するためにカートリッジ構造が使用されます。カートリッジとは、プログラムコードとデータをパッケージ化して導入するためのコンテナのことで、最大の効率を得るためにフォルダーとサブフォルダーで構成されます。

次のカートリッジフォルダー構造を見てみましょう。ローカライズされたファイルが言語固有のディレクトリ (フランス語とドイツ語) に保存されています。Vijay はこれをフォルダーの命名によっていくらでも細かく設定できます (fr_FR、fr_CA、en_US など)。

/Cartridge
   /static
       /default
           /css - generic files
                normalize.css
                print.css
                style-responsive.css
                style.css
           /images
                generic images
           /js - generic files
       /fr
           /css
                normalize.css
                print.css
                style-responsive.css
                style.css
           /images
                localized images
           /js
       /de
           /css
                normalize.css
                print.css
                style-responsive.css
                style.css
           /images
                localized images
           /js

この例は、ローカライズされた CSS (カスケードスタイルシート) ファイルの構造を示しています。CSS ファイルではハイパーテキストマークアップ言語 (HTML) 要素が画面上にどのように表示されるかが記述されます。デフォルトフォルダーは、ローカライズされたファイルが使用できない場合に B2C Commerce で使用されるフォルダーです。地域情報固有のファイルは、デフォルトフォルダーの下のファイルと同じ名前で同じフォルダー構造にする必要があります。これはフォールバックメカニズムの本質です。

ローカライズの手順

Brandon は米国英語のソースファイルを持っています。これにはコンテンツ、カテゴリ、商品のテキストと、テキストを含む UI またはコンテンツ画像、テンプレート (ページレイアウト) が含まれています。また、ローカライズされたページのスタイル設定を処理する必要がある CSS ファイルもあります。まず、1 つの地域情報 (米国スペイン語) を追加し、翻訳作業をテキストとファイルの 2 つのプロジェクトに分けます。

コンテンツ、カテゴリ、商品のテキストを翻訳する

米国英語テキストを米国スペイン語テキストに翻訳する手順は次のとおりです。

コンテンツ、カテゴリ、商品をエクスポートする。
コンテンツ、カテゴリ、商品を翻訳する。
コンテンツをインポートし、Business Manager を使用して追加の編集を行う。
配送方法の名前と説明を翻訳する。この値はチェックアウト中にストアフロントに表示されます。

ソースファイルを翻訳する

英語ソースファイルを米国スペイン語ファイルに翻訳する手順は次のとおりです。

言語固有のフォルダー (es_US など) を作成する。
地域情報固有のテキストが含まれる画像 (ボタンなど) を特定する。
ストアフロントで使用されているテンプレートのみを翻訳のために特定する。
地域情報固有テキストが使用されている JavaScript ファイルを特定する。
地域情報固有テキストが使用されているその他の商品、カテゴリ、コンテンツ画像を特定する。
ファイルを翻訳し、前に作成したフォルダー (es_US など) に保存する。画像の場合、通常は元の作成ツールを使用して画像を再作成する必要があります。
ローカライズされたコンテンツの完全な回帰テストと QA を実行する。
ヘッダーまたはサイドバーを変更して、ユーザーがセッションに使用される言語を選択できる選択ボックスを追加する。

テンプレートのローカライズ

Vijay はテンプレートとフォーム定義もローカライズします。テンプレートは、データやページ情報を HTML ベースの Web ページにどのように変換するかを定義します。フォーム定義では、買い物客が入力した値をどのように検証してブラウザーに表示するかを管理できます。

ストアフロントアプリケーションを開発するときには、Vijay は 1 つのテンプレートセットを使用するか、各地域情報に固有のテンプレートセットを使用することができます。これがセットであるのは、商品詳細、検索結果、カートページなど、さまざまなページのストアフロントページテンプレートが含まれているためです。

ベストプラクティスは、テキスト (文字列データ) をテンプレートセットから分離し、テンプレートがコールする翻訳済みリソースファイルとして保存することです。Salesforce は次のようなさまざまな理由からこの方法をベストプラクティスとしてお勧めします。

ストアフロントテキストをローカライズするときにテンプレートを変更する必要がない。
表示ロジックが 1 か所 (言語固有でないテンプレート) に存在する。
外部に置かれた文字列はシンプルなファイル形式で保存され、翻訳サービスプロバイダーに渡すことができる。
翻訳を B2C Commerce に再び統合するには、翻訳済みファイルをカートリッジにコピーするだけで済み、ロジックが破損する恐れがない。

リソースバンドル

リソースバンドルには、エラーメッセージなどのローカライズ済み静的コンテンツが含まれています。各フォルダーのリソースバンドルは、/templates/resources ディレクトリ内に保存されるテンプレートディレクトリ内に作成できます。フォーム定義についても同じです。テンプレートがメッセージにアクセスするには、dw.web.Resource クラスで使用できる B2C Commerce API msg() メソッドをカートリッジパス内から使用します。

/templates
     /default
         /account.isml
         ...
         /util.isml
     /resources
         account.properties - default files
         ...
         storelocator.properties
         /fr
              account.properties
              ...
              storelocator.properties
         /de
              account.properties
              ...
              storelocator.properties

default フォルダーが必ず最初にあり、地域情報固有のフォルダーが、B2C Commerce で使用されるローカライズフォールバックメカニズムと同じパターンで続きます。

テンプレートまたはフォーム内でローカライズされたテキストを表示するために、B2C Commerce は適切なファイルから対応する行を参照します。カートテンプレート内でテキストにアクセスする例を次に示します。

// Reference to resource minicart.viewcart in resource file
<a href="${URLUtils.https('Cart-Show')}"
 title="${Resource.msg('minicart.viewcart','checkout',null)}"
 class="mini-cart-link">
// ${Resource.msg('minicart.viewcart', 'checkout',null) } will grab the text = View your cart

Resource.msg エントリには checkout.properties ファイル内に対応するエントリがあり、カートページ HTML タイトルテキストが保存されています: minicart.viewcart

リソースバンドルを /templates/resources ディレクトリにサブディレクトリなしで保存し、次のようなファイル名で地域情報を指定することもできます。

account_en_GB.properties
account_en_US.properties
account_us.properties

フォームをローカライズする

フォームをローカライズするには、国によって異なる住所フィールド (州や都道府県など) を含めるなど、構造の変更が必要になることがよくあります。国の選択に基づいて郵便番号/国コードの構造を変更するなど、フォームを処理する方法をプログラムできます。構造を完全に変更することもできます。たとえば、アジアの地域情報で、ソース言語とは異なる方法で単語を表示する場合などです。

Vijay は標準地域情報用に forms/default フォルダーを作成し、各地域情報のフォルダーを分けて、請求先住所の地域情報固有フォーム定義を保存します。以下がその構造です。

  forms
      default
          billingaddress.xml
      it_IT
          billingaddress.xml
      ja_JP
          billingaddress.xml

画像をローカライズする

画像をローカライズするとは、画像内のテキストや記号を翻訳することです。Brandon は Vijay と協力してファイルがどこにあるかを特定し、翻訳サービスにファイルを渡せるようにします。通常、ソースファイルは次の場所にあります。

ファイル	場所	ローカライズ
英語 (またはデフォルト) の画像 (ボタンなど)、JavaScript (英語のエラーメッセージを含む)、css ファイル (すべてコード内)	cartridge\web_ch_cust_app\cartridge\static\default	いいえ
英語 (またはデフォルト) のコンテンツとカテゴリ画像、カテゴリ画像とホームページ画像 (すべてコンテンツライブラリから)	sites\Sites-cust-Site\1\units\Sites-cust\static\default	はい — テキストオーバーレイ

URL をローカライズする

B2C Commerce の URL はデフォルトではローカライズされず、検索エンジン最適化 (SEO) 用に最適化されていません。そこで、Brandon は標準 URL 構造を調査して、何がしたいかを決めます。Vijay はストアフロントアプリケーションにプログラムによって地域情報固有の URL を生成するコードを追加する必要があります。

デフォルトの地域情報に対応する一般的な URL は次のとおりです。

http://<domain>/on/demandware.store/Sites-customer-Site/default/... Value

Vijay は使用可能な地域情報を特定して次のような URL を生成するコードを追加します。

http://<domain>/on/demandware.store/Sites-customer-Site/en_US/... Value
http://<domain>/on/demandware.store/Sites-customer-Site/fr_CA/... Value

次のステップ

この単元では、ストアフロントコンポーネントをローカライズする方法、その場所、B2C Commerce フォールバックメカニズムを活用するための構成方法を学習しました。次は、マルチサイトローカライズの概念と手法について詳しく学習します。