💳

【Shopify.dev和訳】Apps/Checkout/Payment methods/Localization

2021/09/12に公開

Shopify

apps

tech

この記事について

この記事は、Apps/Checkout/Payment methods/Localizationの記事を和訳したものです。

記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。

Shopify アプリのご紹介

Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。

Shopify アプリである、「らくらく日本語フォント設定｜リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。

支払い方法に関するスクリプトのローカライズ

スクリプトで支払い方法と配送方法の名前をローカライズし、これらのスクリプトを複数の言語と文化に対応するストアで利用できるようにすることができます。

使い方

翻訳されたテキスト文字列をスクリプトにハードコーディングする代わりに、ストアがサポートするロケールごとに個別のリソースファイルを作成します。これらのロケールファイルに、翻訳キーと翻訳値を入力します。翻訳された値は、プッシュされるときにスクリプトに含まれます。

スクリプトがチェックアウト時に実行されると、注文のロケールが読み取られ、顧客の希望する言語でメソッド名が提供されます。

ロケールファイルは、スクリプトで使用されるテキスト文字列の翻訳のセットが含まれている JSON ファイルです。ストアがサポートする言語ごとに個別のロケールファイルが必要です。デフォルトのロケールファイルはありません。代わりに、スクリプトがロケールをサポートしていない場合、翻訳キーの名前がデフォルト値として使用されます。

ロケールファイルを作成する

依存関係にある @shopify/i18n-as をインストールします。
スクリプトプロジェクトで、次のサブディレクトリを作成して、すべてのロケールファイルを保存します :locales/
ロケール構成ファイル（i18n.config.json）を作成します:
1. プロジェクトのルートディレクトリで、手動でファイルを作成し、i18n.config.jsonという名前を付けます。
2. このファイルを開き、次のコードを追加します。
i18n.config.json
```
    {
    "localeFilesDirectory": "./locales"
    }
```
これにより、ディレクトリがロケールファイルに設定されます。
ストアがサポートする言語と方言ごとにロケールファイルを作成します。
1. ファイルを手動で作成し、標準のIETF 言語タグ形式を使用して名前を付けます。最初のサブタグは 2 文字の言語コード（ISO 639-1）を使用し、2 番目のサブタグは大文字で記述された 2 文字の国コード（ISO 3166-1 alpha-2）を使用します。
  
  たとえば、「フランス語-カナダ」の場合はfr-CA.json、「英語-イギリス」の場合はen-GB.json、「フィンランド語-すべての地域」の場合はfi.jsonを使用します。
2. ファイルに翻訳キーを追加します。keyフィールドは、翻訳可能なコンテンツをその翻訳に関連付けます。valueフィールドには、翻訳可能なコンテンツ自体が表示されます。
たとえば、en.json では次のようになります。
locales/en.json
```
 {
   "key": "value",
   "Renamed method": "Renamed method"
 }
```
たとえば、fr.json では次のようになります。
locales / fr.json
```
 {
   "key": "valeur",
   "Renamed method": "Méthode renommée"
 }
```
特定のキーの値が欠落している場合、またはサポートされていないロケールがスクリプトに渡された場合、キー名が翻訳値として使用されます。翻訳キーの名前は、デフォルトの翻訳値と同じになるように設定してください。

たとえば、ストアが英語、フランス語、ポルトガル語のロケールをサポートしているとします。スクリプトがtranslate(locale, "Renamed Method")を呼び出し、英語とフランス語のロケールファイルしかないとします。ロケールがポルトガル語の場合、チェックアウト時にRenamed Methodが顧客に表示されます。

スクリプトに翻訳キーを追加する

お支払い方法と配送方法の API 両方が、次の手順を実行します。

注文のロケールをPurchaseProposal.localeで入力します。
名前が変更されたメソッドをResult.renameResponseで出力する。

スクリプトで、@ shopify / as-i18n をインポートします。例えば：
src / script.ts
```
import { translate } from '@shopify/i18n'
```
翻訳を使用する場合は、必ずtranslate(locale, "key-name")を入力します。例えば：
src / script.ts
```
Console.log(translate(locale, "my_key_to_translate"));
```

テストロケール

翻訳を使用するスクリプトのユニットテストを作成するときは、翻訳文字列をチェックするテストを含めます。

テスト関数への入力としてlocaleを含めます。
たとえば.setLocale(locale)をDomain.TestHelper.PurchaseProposalBuilderにインクルードします。

test / script.spec.ts

function createPurchaseProposal(locale: string): Domain.PurchaseProposal {
   return new Domain.TestHelper.PurchaseProposalBuilder()
     .setLines([
   ...
     ])
     // 入力としてロケールを含める
     .setLocale(locale)
     .build();
 }

翻訳された文字列の出力をチェックするテストを作成します。
例:

test / script.spec.ts

// ***** 英語の翻訳を利用 *****
result = paymentMethodsHandler(
  new PaymentMethods.Input(createPurchaseProposal('en'), paymentMethods),
  config,
);

expect(result.renameResponse!.renameProposals.length).toBe(1);
expect(result.renameResponse!.renameProposals[0].name).toBe('This is your renamed payment method.');

// ***** フランス語の翻訳を利用 *****
result = paymentMethodsHandler(
  new PaymentMethods.Input(createPurchaseProposal('fr'), paymentMethods),
  config,
);

expect(result.renameResponse!.renameProposals.length).toBe(1);
expect(result.renameResponse!.renameProposals[0].name).toBe('Ceci est votre mode de paiement renommé.');

例

以下は、ローカリゼーションを使用するスクリプトの例です。

src / script.ts

...
  import { translate } from '@shopify/as-i18n';

  export function paymentMethodsHandler(
    input: PaymentMethods.Input,
    configuration: Configuration,
  ): PaymentMethods.Result {
    //注文のロケールを格納するためのconstを定義する
    const locale = input.purchaseProposal.locale;

    const sortResponse = new PaymentMethods.SortResponse(input.paymentMethods);
    const filterResponse = new PaymentMethods.FilterResponse([]);
    //ロケールと支払い方法を指定してrenameFirstPaymentMethodを呼び出す
    const renameResponse = renameFirstPaymentMethod(locale, input.paymentMethods);

    return new PaymentMethods.Result(sortResponse, filterResponse, renameResponse);
  }

  function renameFirstPaymentMethod(locale: string, paymentMethods: Domain.PaymentMethod[]): PaymentMethods.RenameResponse {
    var renameProposals = new Array<PaymentMethods.RenameProposal>();

    if (paymentMethods.length > 0) {
      //注文のロケールに基づいて、支払い方法をリネームする
      const renameProposal = PaymentMethods.RenameProposal.rename(paymentMethods[0], translate(locale, "Renamed method"));
      renameProposals.push(renameProposal);
    }

    return new PaymentMethods.RenameResponse(renameProposals);
  }

次のステップ

Shopify のチェックアウト時に支払い方法を顧客に表示する方法を変更します。
Shopify のチェックアウト時に配送方法を顧客に表示する方法を変更します。

Shopify アプリのご紹介

Discussion

ログインするとコメントできます