📁

【Shopify.dev和訳】Themes/Architecture/Locales/Storefront locale

2021/09/18に公開・約9,800字

Shopify

themes

tech

この記事について

この記事は、Themes/Architecture/Locales/Storefront locale filesの記事を和訳したものです。

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

Shopify アプリのご紹介

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

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

Storefront のロケールファイル

ストアフロントのロケールファイルは、テーマ内のストアフロントに表示されるコンテンツの翻訳文字列をホストします。これらの翻訳は、マーチャントは Shopify Language Editor からアクセスできます。

テーマのレイアウト、テンプレート、スニペット、Liquid アセットは、Liquid の翻訳フィルター（tフィルター）を使ってこれらの翻訳を参照することができます。このフィルターは、アクティブな言語のロケールファイルから適切な翻訳文字列を返します。

Storefront のロケールファイルの拡張子は.jsonです。ロケールファイルの作成方法と名前の付け方については、こちらをご覧ください。

キーの基本構造

一般的に、翻訳キーは1st-level.2nd-level.3rd-levelの形をしており、キーの各レベルは Shopify Language Editor の階層の以下のレベルに関連付けられています。

1st-level - 翻訳カテゴリ、これはトップレベルのタブを表します。
2nd-level - 翻訳グループ、これは関連するトップレベルのタブ内のセクションを表します。
3rd-level - 翻訳の説明で、個々の翻訳を表します。

例えば、404.liquidのテンプレートに次のようなコードがあるとします。

<h1>{{ 'general.404.title' | t }}</h1>
<p>{{ 'general.404.subtitle' | t }}</p>

上記の例では、以下の翻訳キーが含まれています。

general.404.title
general.404.subtitle
これらのキーをロケールファイルに記述すると、次のようになります。

{
  "general": {
    "404": {
      "title": "Page not found",
      "subtitle": "Sorry, we couldn't find this page."
    }
  }
}

キーの整理

翻訳が正しくマッピングされるように、またマーチャントがプロセスをできる限りシンプルに保つために、テーマ構造を反映してキー構造を整理する必要があります。構造の最初の 2 つのレベルは次のようになります。

第 1 レベル	第 2 レベル
`general`	404、パンくず、検索（結果ページと空白のスレート）、ページネーション
`blogs`	記事、記事のコメント、ブログのサイドバー
`cart`	カートの内容、更新、メモ、チェックアウトへのリンク
`collection`	コレクション、コレクションループ
`products`	製品、製品ループ、関連製品
`layout`	一般的な分野のタイトルと識別子
`customer`	アカウント、注文（リストと詳細）、アカウントの有効化、アドレス、ログイン、パスワード、登録
`contact`	コンタクトフォーム、フォームエラー
`home_page`	白紙の状態, 特集, ヘルプ
`gift_cards`	タイトル、使用条件

スニペットの翻訳キー

スニペットで翻訳を使用する場合は、スニペットの役割に最も関連するカテゴリでグループ化する必要があります。例えば、related-products.liquidというスニペットがあれば、関連する翻訳は products グループに含まれるべきです。

チェックアウトとシステムメッセージ

Shopify では、チェックアウトやシステムメッセージを以下の言語で提供しています。

ブルガリア語（ブルガリア)
中国語（簡体字)
中国語 (繁体字)
クロアチア語 (クロアチア)
チェコ語
デンマーク語
オランダ語
英語
フィンランド語
フランス語
ドイツ語
ギリシャ語
ヒンディー語
ハンガリー語
インドネシア語
イタリア語
日本語
韓国語
リトアニア語（リトアニア
マレー語
ノルウェー語(ブークモール)
ポーランド語
ポルトガル語(ブラジル)
ポルトガル語 (Portugal)
ルーマニア（Romanian
ロシア語
スロバキア語
スロベニア語
スペイン語
スウェーデン語
タイ語
トルコ語

補間

翻訳文字列は補間することができます。つまり、文字列の中に変数を入れておけば、Liquid でその文字列が参照されたときに動的に入力されます。例えば、ロケールファイルに以下のように記述することができます。

/locales/en.default.json

{
  "layout": {
    "header": {
      "hello_user": "Hello {{ name }}!"
    }
  }
}

テーマでその翻訳を参照する際には、name変数に値を指定することができます。

/layout/theme.liquid

{% if customer %}
  <h1>{{ 'layout.header.hello_user' | t: name: customer.first_name }}</h1>
{% endif %}

Janeというお客様の場合、このコードは次のように出力されます。

Output

<h1>Hello Jane!</h1>

複数の引数を渡す

補間機能では、複数の引数をカンマ（,）で区切って渡すことができます。例えば、上の例を拡張して顧客の姓名を表示したい場合は、翻訳文字列とテーマの参照を以下のように調整します。

/locales/en.default.json

{
  "layout": {
    "header": {
      "hello_user": "Hello {{ first_name }} {{ last_name }}!"
    }
  }
}

/layout/theme.liquid

{% if customer %}
  <h1>
    {{ 'layout.header.hello_user' | t: first_name: customer.first_name, last_name: customer.last_name }}
  </h1>
{% endif %}

「Jane Doe」という名前のお客様の場合、このコードは次のように出力されます。

Output

<h1>Hello Jane Doe!</h1>

エスケープ翻訳

翻訳されたコンテンツは、デフォルトではエスケープされます。つまり、HTML の文字はすべて、それと同等の実体に変換されます。

接尾辞「_html」について

翻訳キーの description レベルにサフィックス_htmlを追加することで、翻訳されたコンテンツがエスケープされないようにすることができます。例えば、以下の翻訳で出力されたコンテンツは、エスケープされてしまい、<strong>タグがプレーンテキストとして表示されてしまいます。

locales/en.default.json

{
  "layout": {
    "header": {
      "announcement_bar_text": "Spend $50 and get <strong>FREE</strong> shipping",
    }
  }
}

接尾辞_htmlを付けることで、出力内容がエスケープされるのを防ぎ、<strong>タグが適切な HTML として表示されるようになります。

/locales/en.default.json

{
  "layout": {
    "header": {
      "announcement_bar_text_html": "Spend $50 and get <strong>FREE</strong> shipping",
    }
  }
}

翻訳を複数形にする

翻訳フィルター（tフィルター）にcount属性を渡すことで、翻訳にロケールを意識した複数形を適用することができます。

Unicode Consortium のCLDRで定義されている以下の複数形キーに対応しています。

few
many
one
other
two
zero

例えば、次のような翻訳と翻訳参照では、次のような出力が得られます。

/locales/en.default.json

{
  "customers": {
    "orders": {
      "order_count": {
        "one": "You've made {{ count }} order with us",
        "other": "You've made {{ count }} orders with us"
      }
    }
  }
}

/layout/theme.liquid

{% if customer %}
  <h1>{{ 'customers.order.order_count' | t: count: customer.orders_count }}</h1>
{% endif %}

Output

// count == 1
<h1>You've made 1 order with us</h1>

// count == 12
<h1>You've made 12 orders with us</h1>

各言語の複数形ルールの詳細については、Unicode language plural rules tablesを参照してください。

日付と時刻のローカライズ

日付と時刻は、日付とtime_tagのリキッドフィルターで表示することができます。それぞれにデフォルトのフォーマットオプションがあり、ストアのアクティブな言語に適したフォーマットで表示されます。

date フィルターのデフォルトフォーマットオプション
time_tag フィルターのデフォルトフォーマットオプション

例えば、以下の Liquid は以下のような出力を生成します。

Input

{{ order.created_at | date: format: 'abbreviated_date' }}

Output

Dec 31, 2018

カスタムフォーマット

date_formatsオブジェクトを追加することで、ロケールファイルにカスタムフォーマットを含めることができます。

locales/en.json

{
  "date_formats": {
    "month_and_year": "%B %Y"
  }
}

これらのフォーマットは、Ruby のstrftimeメソッドと同じパラメータを使用する必要があります。これらのパラメータのリストはRuby のドキュメントにありますが、strfti.meのようなサイトを利用することもできます。

上記のカスタムフォーマットを使用して、次の Liquid は次のような出力を生成します。

Input

{{ order.created_at | date: format: 'month_and_year' }}

Output

December 2018

リファレンスストアフロントの翻訳

テーマのアクティブな言語に対してストアフロントのロケールファイルから翻訳を参照するには、翻訳キーとリキッド翻訳フィルター（tフィルター）を使用します。

例えば、英語、フランス語、スペイン語のロケールファイルがあるとします。この場合、関連付けられた各ロケールファイルには以下のようになります。

locales/en.default.json (English)

{
  "blog": {
    "comment": {
      "email": "Your email"
    }
  }
}

/locales/fr.json (French)

{
  "blog": {
    "comment": {
      "email": "Votre adresse courriel"
    }
  }
}

locales/es-ES.json (Spanish)

{
  "blog": {
    "comment": {
      "email": "Su correo electrónico"
    }
  }
}

この翻訳を参照するには、次のような使い方があります。

<span>{{ 'blog.comment.email' | t }}</span>

各ロケールファイルの設定に基づいて、出力がカスタマイズされます。

Output

// English
<span>Your email</span>

// French
<span>Votre adresse courriel</span>

// Spanish
<span>Su correo electrónico</span>

Shopify アプリのご紹介

Discussion

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