Salesforce B2B/D2C Commerce サイトのマルチ言語対応 - 翻訳編


※ これから記載する事項は、私が所属する会社とは一切関係のない事柄です。

サイトをマルチ言語にする方法を２部（[事前準備編](https://qiita.com/syunyama/items/7357ab2d69aec5d76abf)・翻訳編）に分けて紹介します。
今回は翻訳する方法について紹介したいと思います。方法の詳細はヘルプの「[グローバルな販売](https://help.salesforce.com/s/articleView?id=sf.comm_language_currency.htm&type=5)」をご確認ください。

:::note warn
※ 今回は通貨や納入先をマルチロケールにする設定は省きますので、ご了承ください。
:::



## サイトのコンポーネントの翻訳（プロパティ）

### 管理画面からの翻訳方法

エクスペリエンスビルダーの右上の地球マークから設定した言語の状態でコンポーネントの入力項目を保存すると、保存した内容はその言語の時のみ表示されます。
![スクリーンショット 2023-10-05 13.41.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/19847827-069c-f82e-b83c-315254a182f3.png)



### 一括で翻訳する方法

#### 1. デフォルトの言語の設定

_この設定はは必ずする必要はないです。_
初期の状態ではコンポーネントの全てのテキストが英語なので、まずデフォルト言語を英語にして日本語の翻訳が済んだ時点で日本語にデフォルトを変更するのがいいかと思います。

エクスペリエンスビルダーの左ナビより設定マークをクリックし、**[言語]** を選択します。
英語の横の３点マークをクリックして **[デフォルトのサイト言語として設定]** をクリックします。
![スクリーンショット 2023-10-05 10.44.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/b2b8caf8-48c4-d93a-8c67-47ce2349678a.png)




#### 2. コンポーネントの翻訳ファイルのエクスポート

エクスペリエンスビルダーの左ナビより設定マークをクリックし、 **[言語]** を選択します。 **[エクスポート内容]** をクリックし、ポップアップからエクスポートする内容として日本語を選択しエクスポートを開始します。

:::note warn
ここでデフォルト言語を日本語にしていたら選択肢として日本語は表示されません
:::

![スクリーンショット 2023-10-05 10.39.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/f2fb4b86-782a-bdea-a534-b81e76ebf324.png)


エクスポートが完了するとメールが届きます。
![スクリーンショット 2023-10-05 10.45.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/3fb8ec59-9a82-fb9e-ade8-bed0333cdada.png)



メール本文内ののダウンロードリンクから下記のような翻訳ファイルをダウンロードできます
![スクリーンショット 2023-10-05 10.47.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/8d550887-05a6-7e8c-b2cf-030ec99b3229.png)



#### 3. 翻訳

ここではホームページの英語表示で **「Top Sellers」** を日本語表示で **「トップセラーテスト」** に変更してみ合いと思います。

![スクリーンショット 2023-10-05 10.48.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/750ae6a4-9a05-7c0f-929c-e327ed74f809.png)





ダウンロードした翻訳ファイルから **「Top Sellers」** を見つけ `<target>` 内に **「トップセラーテスト」** を入力します。さらに、ファイル上部の `<xliff>` 内に `srcLang` （翻訳元の言語）と `trgLang` （翻訳先の言語）が入っていることを確認してください。

:::note warn
- 今回はわかりやすくするように **「Top Sellers」** 以外の項目は削除しましたが、必ず削除する必要はありません。
- `<source>` 内の内容は変更しても翻訳として反映されないのでご注意ください。
:::

![スクリーンショット 2023-10-05 10.47.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/89b009a6-707b-a2fa-6cca-4ada65aea587.png)


エクスペリエンスビルダーの左ナビより設定マークをクリックし、**[言語]** を選択します。**[翻訳済みコンテンツのインポート]** より作成した翻訳ファイルをアップロードします。

![スクリーンショット 2023-10-05 12.23.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/1aa92b9a-99bf-1b38-2229-a8b9453c0c4c.png)



インポートが完了すると下記のように表示を日本語に変更すると **「Top Sellers」** が **「トップセラーテスト」** に変わっていることを確認できます。
![スクリーンショット 2023-10-05 12.26.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/47ebda6a-3ed9-b5ec-079f-44f52a47c40b.png)




## サイトのコンポーネントの翻訳（カスタムラベル）

下記のようにコンポーネントの引数としてカスタムラベルを利用していたり、以前紹介した Qiita 「初めての Lightning Web コンポーネント開発で OCI を操作してみる（気づき・困った編）」内の「[多言語化国際化](https://qiita.com/syunyama/items/3c68fa8f3163ee599d08#%E5%A4%9A%E8%A8%80%E8%AA%9E%E5%8C%96%E5%9B%BD%E9%9A%9B%E5%8C%96)」で紹介したように LWC の中で利用している場合があります。
![スクリーンショット 2023-10-05 12.29.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/45a3bb55-d88e-ca0d-1886-f1b1ba79b066.png)



### 管理画面からの翻訳方法

手動で行う場合は **_設定 > ユーザインターフェース > カスタム表示ラベル_** から翻訳したいラベルを選択し、翻訳の項目の **[新規]** ボタンから追加することができます。
![スクリーンショット 2023-10-05 12.34.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/6ed2a48a-ab4a-7fc6-e328-cec360d4eb27.png)




### 一括で翻訳する方法

翻訳ファイルを利用して一括で行う場合は、トランスレーションワークベンチを利用します。

**_設定 > トランスレーションワークベンチ > エクスポート_** から下記のように設定し **[エクスポート]** ボタンをクリックすると、翻訳ファイルのダウンロードリンクが載ったメールが送信されます。 
![スクリーンショット 2023-10-05 12.45.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/e001eecc-aa7e-8f45-e38d-e22d4ed663a0.png)


メール内のダウンロードリンクからダウンロードした翻訳ファイルは下記のようなファイルです。
![スクリーンショット 2023-10-05 12.46.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/eb3ae870-7318-b682-569b-ac06a04f51ba.png)


翻訳したいカスタムラベルを検索し、` <target>` を追加し翻訳内容を入力します。
この際、`<file>` 内の `target-language` に翻訳先の[言語コード](https://help.salesforce.com/s/articleView?id=sf.faq_getstart_what_languages_does.htm&type=5)を入力します。
![スクリーンショット 2023-10-05 12.51.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/293384aa-f5ca-d0d4-2813-daa60bdf8ed8.png)


作成したファイルは **_設定 > トランスレーションワークベンチ > インポート_** からインポートします。インポート結果はメールで通知されます。
![スクリーンショット 2023-10-05 12.48.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/cd8fa627-2ce8-e341-e72d-caecd94f7ee7.png)


## サイトのナビゲーションの翻訳

一部のナビゲーションはエクスペリエンスビルダーから設定します。
![スクリーンショット 2023-10-05 13.08.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/186c50cd-8e2b-948c-a399-4afe0ad09e50.png)


エクスペリエンスビルダーの左ナビより設定マークをクリックし、**[ナビゲーション]** を選択することで管理ページに遷移することができます。
![スクリーンショット 2023-10-05 11.05.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/fba0dbe9-0be7-b197-456c-b8bcfed55e07.png)


### 管理画面からの翻訳方法

 **_設定 > トランスレーションワークベンチ > 翻訳_** 画面にて翻訳先となる言語と **[設定コンポーネント]** として **「ナビゲーション項目」** を選択し、**[ナビゲーションメニュー項目名の翻訳]** に翻訳内容を入力し、保存します。
![スクリーンショット 2023-10-05 13.17.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/c360bb82-a7e4-e0df-131b-b349ed64b577.png)





## 商品・カテゴリの翻訳

カテゴリ名や商品名も翻訳する必要があります。
![スクリーンショット 2023-10-05 13.32.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/4b431852-5b92-4067-8992-632a37ae8afe.png)



### 管理画面からの翻訳方法

商品、カテゴリのそれぞれのレコードページの翻訳タブから翻訳を設定することが可能です。

![スクリーンショット 2023-10-05 13.39.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/72b2da37-4317-0f3c-bec5-01a023e1d29e.png)


### 一括で翻訳する方法

商品やカテゴリの翻訳はカスタムラベルと同様にトランスレーションワークベンチを利用します。エクスポートする際は **[翻訳種別]** として **「データ」** を選択し、さらに **[オブジェクト]** として「**商品」「カテゴリ**」を選択しましょう。

:::note
プロモーションの表示も翻訳したい場合はここで **[オブジェクト]** として **「プロモーション」** も追加しましょう。
:::

![スクリーンショット 2023-10-05 11.07.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/abb0415e-8ab2-8c51-61c3-28f51a1f7845.png)


あとは、カスタムラベルと同様なので割愛しますが、下画像のようにファイルを作成しました。
![スクリーンショット 2023-10-05 11.10.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/b7229173-761d-c518-13bf-fac60cf3dc9d.png)



## バリエーション項目・選択肢の翻訳

バリエーション商品の設定自体は過去に紹介した「[Salesforce B2B / D2C Commerce でバリエーション商品をCSVで登録してみる](https://qiita.com/syunyama/items/4dafbcbdd4559a696ae2)」を参照ください。


### 管理画面からの翻訳方法

バリエーションの項目を翻訳するには、 **_設定 > トランスレーションワークベンチ > 翻訳_** 画面にて翻訳先となる言語と **[設定コンポーネント]** として  **「カスタム項目」**、**[オブジェクト]** として **「商品属性」** 、**[部分]** として **「項目の表示ラベル」** を選択し、**[項目の表示ラベルの翻訳]** に翻訳内容を入力し、保存します。
![スクリーンショット 2023-10-05 14.02.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/11baa348-3701-55f3-ca43-edc7c776a77a.png)



選択肢を翻訳する場合は、**[設定コンポーネント]** として **「選択リスト値」**、**[オブジェクト]** として **「商品属性」** を選択し、**[選択リスト値の表示ラベルの翻訳]** に翻訳内容を入力し、保存します。
![スクリーンショット 2023-10-05 14.13.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/dd558e98-9297-a230-49a3-dba1b506ea60.png)


### 一括で翻訳する方法

また、選択肢はカスタムラベルの翻訳と同様にトランスレーションワークベンチのエクスポート・インポートを利用できそうです。エクスポートする際は **[翻訳種別]** として **「メタデータ」** を選択しましょう。
下画像は値のサンプルです。
![スクリーンショット 2023-10-05 14.04.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/18486c2e-b4e8-da90-84bb-afc6b85b981f.png)