翻訳キーを使用してグローバル対応のテーマを作成する方法

eコマースはグローバル規模でポピュラーになってきました。開発者にとって、国際対応や翻訳が可能なテーマを世界中のクライアントに提供する大きな機会が到来しています。

eコマースはグローバル規模でポピュラーになってきました。開発者にとって、国際対応や翻訳が可能なテーマを世界中のクライアントに提供する大きな機会が到来しています。デフォルト言語を変更でき、簡単にコンテンツが編集できる柔軟なテーマを提供できれば、マーケットは加速度的に広がっていきます。

世界の大半のWebサイトは英語ですが、Webユーザーのうち英語を話す人は25%程度にとどまっています。そのため、ローカライズされたサイトを構築する重要な役割が開発者に課せられているわけです。Shopifyのマーチャントは175カ国に及ぶため、Liquidを使用する開発者は、国際的なクライアントがビジネスを好みの言語で運営するのを支援できるポジションにいます。

Liquidの翻訳キーとフィルターを使えば、既製の翻訳を組み込むことや、ストアフロントのコンテンツを異なる言語に翻訳するための言語エディタをクライアントに提供することが可能になります。ボタン、リンク、プレースホルダーなどのストアフロントのコンテンツは、翻訳されたコピーを事前に読み込めるため、クライアントは好みのデフォルト言語を簡単に素早く選択できます。

今回の記事では、クライアントがネットショップに複数の言語を表示できるよう、Liquidを使用する方法を扱います。同時に、翻訳キーの命名規則に関するベストプラクティスも見ていきましょう。

 

翻訳キーとフィルターについて

翻訳キーは、Shopifyのストアフロントにテキストが表示される際に使用されるオブジェクトです。たとえばニュースレター登録フォームのプレースホルダーや、「カートに追加」ボタンのテキストなどが含まれます。翻訳キーには、利用可能言語それぞれに対応する値があり、これらの翻訳はテーマ自体の内部で、個々のロケールファイル内に保存されます。

Liquidの翻訳フィルター（t）は、ストアのアクティブ言語に合わせたキーの翻訳にアクセスして出力します。tフィルターを通して渡されたキーの値は正しいロケールファイルに配置されて出力されます。

翻訳キーを作成するとき、キーをシングルクオートでラップする必要があります。たとえばカードに追加ボタンのテキストのキーであれば、products.product.add_to_cartとなります。

Shopifyテーマストアで販売するためにテーマを提出する際には、ハードコーティングされたテキストではなく翻訳キーによって国際化対応されていることが要件となりますので、その点も確認が必要です。

ローカルにとどめる

ロケールファイルには翻訳キーの値が格納され、個々のロケールファイルがストアの各言語ごとに作成されます。このファイルは翻訳キーの値をJSON配列で整理し、テーマのLocalesディレクトリに複数のファイルが保存できます。

それぞれの翻訳セットはテキストの表示場所に応じてカテゴリで整理されます。「一般」カテゴリは、パンくずなどの要素に適用され、「ブログ」カテゴリは、記事コメントなどの要素に適用されます。この構造は翻訳キーのタイトルも反映しますが、ネーミングについては記事の後半で見ていきます。

ロケールファイル内の値にはHTMLとLiquidオブジェクトも含まれますが、クライアントにとって不可欠なものだけに限定するべきです。ロケールファイルは、テーマディレクトリのLocalesフォルダに.jsonファイルを追加するだけで作成できます。

新しいファイルを命名するときは、IETF言語タグの規格に従う必要があります。最初の小文字コードは言語を表し、2番目の大文字コードは地域を表します。以下は例です。

・fr-CA.json／カナダのフランス語

・en-GB.json／イギリスの英語

・es-ES.json／スペインのスペイン語

ロケールファイルに名前を付ける際、デフォルトファイルを*.default.jsonの形式で指定しておくことが必要です。たとえば、デフォルト言語をフランス語にしたいなら、フランス語のロケールファイルをfr.default.jsonとネーミングします。

翻訳を実行

翻訳プロセスの実例を確認するなら、「カートに追加」ボタンは次のようになるでしょう。

<button>

    <span {{ 'products.product.add_to_cart' | t }} </span>

</button>

ここでは'products.product.add_to_cart'がキーであり、tが翻訳フィルターです。'products.product.add_to_cart'に対応する値は、現在のアクティブ言語のロケールファイルにあります。そしてこの値が「カートに追加」ボタン上に表示されます。

上述したように、ロケールファイルは翻訳キーの場所に出力される値を格納し、ストアで利用可能な言語ごとに異なるロケールファイルがあります。

そのため、たとえば英語・フランス語・スペイン語をアクティブ言語として選択した場合、それぞれの'products.product.add_to_cart'に対応する値が必要になります。

locales/en.default.json (英語)

"products": {

    "product": {

        "add_to_cart": "Add to cart"

    } 

...

locales/fr.json (フランス語)

"products": {

    "product": {

    "add_to_cart": "Ajouter au panier"

    }

...

locales/es.json (スペイン語)

"products": {

    "product": {

        "add_to_cart": "Agregar al carrito"

    }

...

「フランス語」をアクティブ言語として選択した場合、消費者が商品ページにいくと次のように表示されます。

ここで注意点があります。このテクニックは、ストアに訪れたお客さまが好きな言語を選択できるものではありません。そうではなく、マーチャントがテーマに表示させたいデフォルト言語を選択します。クライアントがマルチ言語のストアを必要としているなら、アプリストアにこれを実装できるアプリが色々ありますのでご確認ください。

言語を編集する

翻訳キーとtフィルターを使ってストアをセットアップし、各言語ごとのロケールファイルを作成したら、あなたのクライアントは表示させたい言語を言語エディタで選択することができます。このエディタで翻訳を編集することも可能で、表現の編集などもできるため、ブランドが独自のトーンやスタイルをもっている場合などにとくに役立ちます。

このインターフェイスはさまざまな情報も表示します。どの翻訳が利用可能で、翻訳がどこに適用されるのかを確認できるため、これはマーチャントにとって有益です。たとえば以下のように、テーマ自体には存在しない翻訳をチェックアウトで利用可能な場合があります。

テーマ開発者のトラブルシューティングにも便利です。テキストを検索して翻訳が抜けている部分を特定することができます。クライアントにテーマを渡す前に、必要な翻訳がそろっているか確実にしておきましょう。

翻訳キーのネーミングについて

ロケールファイルにおいて翻訳はいくつかのレベルとカテゴリによって整理されています。翻訳キーは特定のフォーマットに従う必要があり、翻訳キーのネーミングには、以下のようなルールがあります。

1st-level.2nd-level.3rd-level

各レベルの翻訳キーは、Shopifyの言語エディタの階層をナビゲートするために使用されます。

・1st level：翻訳カテゴリ

・2nd level：翻訳グループ

・3rd level：翻訳ディスクリプション

1つめは翻訳カテゴリで、商品・ブログ・一般など、言語エディタに表示されるトップレベルのタブになります。2つめのレベルは翻訳グループで、タブ内のセクションを定義し、カテゴリに応じて商品・記事・ナビゲーションなどを含みます。

最後の3つめのレベルは、個々の要素を指し、翻訳の文言それ自体です。特定のセクション内に位置します。「カートに追加」ボタン、「詳しく知る」のリンク、「次へ」ボタンなどがあります。

「カートに追加」ボタンを例にしてみると、次のような3つのレベルが確認できます。

{{ 'products.product.add_to_cart' | t }

productsが1つめのレベル（カテゴリ）で、productが2つめのレベル（グループ）、add_to_cartが3つめのレベル（文言）になります。

独自の翻訳キーを作成する際に重要なのは、テーマの構造を反映するようにキーの構造に一貫性をもたせることです。こうすることで、クライアントは言語エディタで翻訳内容を見つけるのが容易になります。

実際、翻訳キーのまとめ方や一連のつながりは、Shopifyの言語エディタUIへの情報表示に影響をおよぼします。つまり、コードに一貫性があってキーが整理されていれば、クライアントのユーザーエクペリエンスを向上させることになるわけです。

こちらも参考にしてください： カスタムランディングページのテンプレートを作成するためにLiquidを使用する方法

翻訳が重要なポイントに

翻訳キーを使用してWebサイトを柔軟でローカライズ可能なものにし、eコマースのトレンドに適応していくことは、開発者にとって重要です。テーマを翻訳可能なものにする、あるいは、既存テーマを翻訳キーで調整できるようなサービスを提供することで、海外のクライアントとつながるのが容易になります。

GoogleはWebページの翻訳サービスを提供していますが、クライアントが表現したいコピーを正確に翻訳できているわけではありません。Shopifyの翻訳キーと言語エディタは、翻訳の過程でクライアントのメッセージが抜け落ちないよう強固なメソッドを提供します。また、さまざまなロケールファイルを異なる方言に合わせて作成することも可能です。たとえば、ブラジル・ポルトガル語とヨーロッパ・ポルトガル語の翻訳セットを作ることができます。

ここまで見てきたように、Shopifyが提供する世界中のクライアントのニーズに応えるテーマ作成メソッドには、さまざまなものがあります。この記事を参考にして、ローカライズ対策や海外クライアントとの提携をスムーズに進めていただければ、幸いです。

原文：Liam Griffin 翻訳：深津望