💳

【Shopify.dev和訳】Apps/Checkout/Shipping method/Localization

2021/09/12に公開

この記事について

この記事は、Localization for shipping methods scriptsの記事を和訳したものです。

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

Shopify アプリのご紹介

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

https://apps.shopify.com/shopify-application-314?locale=ja&from=daniel

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

https://apps.shopify.com/font-picker-1?locale=ja&from=daniel

配送方法に関するスクリプトのローカライズ

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


仕組み

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

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

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


ロケールファイルの作成

  1. 依存関係にある @shopify/i18n-as をインストールします。

  2. スクリプトプロジェクトでは、すべてのロケールファイルを格納するために、次のサブディレクトリを作成します: locales/

  3. ロケール設定ファイル(i18n.config.json)を作成します。:

    • プロジェクトのルートディレクトリに、手動でファイルを作成し、i18n.config.jsonという名前をつけます。
    • このファイルを開き、以下のコードを追加します。:
    i18n.config.json
    {
      "localeFilesDirectory": "./locales"
    }
    

    ロケールファイルを置くディレクトリを設定します。

  4. ストアがサポートする各言語および方言のロケールファイルを作成します。

    • 手動でファイルを作成し、標準的なIETF 言語タグフォーマットを使用してファイル名を付けます。最初のサブタグには 2 文字の言語コード(ISO 639-1)、2 番目のサブタグには 2 文字の国コード(ISO 3166-1 alpha-2)を大文字で記述します。
      例えば、「フランス語-カナダ」の場合はfr-CA.json、「英語-グレートブリテン」の場合はen-GB.json、「フィンランド-全地域」の場合はfi.jsonとなります。

    • ファイルに翻訳キーを追加する。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, "Rename Method")を呼び出したところ、英語とフランス語のロケールファイルしかありませんでした。ロケールがポルトガルの場合、チェックアウト時にRename Methodが顧客に表示されます。


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

Pament methodsShipping methodsの両 API は、以下のような機能を持っています。

  • 注文のロケールをPurchaseProposal.localeで入力します。
  • リネームされたメソッドをResult.renameResponseで出力する。
  1. スクリプトの中で、@shopify/as-i18n をインポートします。
    例えば、以下のようになります。
    src/script.ts
    import { translate } from '@shopify/i18n'
    
  2. 翻訳を使用したい場所では、translate(locale, "key-name")と入力します。
    例えば、以下のようになります
    src/script.ts
    Console.log(translate(locale, "my_key_to_translate"));
    

テストロケール

翻訳を使用するスクリプトのユニットテストを作成する際には、翻訳文字列をチェックするテストを含めてください。

  1. localeをテスト関数の入力として含める。

    例えば、.setLocale(locale)
    Domain.TestHelper.PurchaseProposalBuilder.TestHelperに含めます。

    test/script.spec.ts
    function createPurchaseProposal(locale: string):
    Domain.PurchaseProposal {
      return new Domain.TestHelper.PurchaseProposalBuilder()
        .setLines([
      ...
        ])
        // ロケールを入力として含める
        .setLocale(locale)
        .build();
    }
    
  2. 翻訳された文字列の出力をチェックするテストを書く。

    例えば、

    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 アプリのご紹介

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

https://apps.shopify.com/shopify-application-314?locale=ja&from=daniel

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

https://apps.shopify.com/font-picker-1?locale=ja&from=daniel

Discussion

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