???「有料で買ったテーマ超かっこいいやん、ウェーイ」
Zakime「やばいっすね」
???「このテーマ、カスタマイズ画面（管理画面）の項目が英語やん」
Zakime「わかりやすいしクールでいいですね」
???「（英語分からないから）日本語にしないと操作できないね」
Zakime「？」
???「ということで日本語にしよっか」
Zakime「？？？」
???「君が」
Zakime「？？？？？？」
???「じゃあ、よろしく」
Zakime「ﾊｲ､ﾖﾛｺﾝﾃﾞｰ」

schema の翻訳

Shopify の各テーマには「言語を編集」がありますが、これはフロント（実際にストアページに表示される部分）の翻訳はできますが、カスタマイズ画面の項目の翻訳はできないみたいです（できたらすいません）。

ということで、わざわざファイル単位で翻訳作業を行ったので、その手順を紹介したいと思います。

本来テーマ開発者側でやるべきだし何より普通に面倒なので、良い子のみんなと上司と部下とその他あらゆる人類は英語のまま使おうね！

Shopify テーマにおける翻訳の仕組み（概要）

Shopify テーマのトップレベルには locales という名前のフォルダが存在しており、その中にある json 形式のファイルを翻訳データとして読み込んでいます。
このフォルダには .json ファイルと .schema.json ファイルの２種類のファイルを置くことができ、それぞれ用途が異なります。

テーマによっては（翻訳データを準備していないために）ファイルが存在しない場合もあります。

`.json` ファイル

このファイルはフロント（実際にストアページに表示される部分）の翻訳を記述することができ、「言語を編集」を通して翻訳を書き換えることができます。

ファイル名については、例えば英語のデータは en.json、日本語のデータは ja.json などと、あらかじめ決められた命名規則（言語の省略名.json）にしたがってファイルを作成します。そのうちの一つは、例えば ja.json が用意されていない場合に我々ジャパニーズピーポーがアクセスしても使えるように、一致する言語がない場合にデフォルトとして使用されるファイルとして xx.default.json のような名前でデフォルトのファイルとして指定します。（多くのテーマでは英語：en.default.json だと思います）。

"日本語訳のファイルは準備しているが、漏れがある・エラーがある" のような場合はその箇所だけ default.json のデータが使われます。さらに default.json にもデータがない場合はその箇所にエラーの文字が表示されます。

`.schema.json` ファイル

このファイルはテーマのカスタム画面（管理画面）の翻訳を記述することができますが、.json ファイルと違いコードを直接編集しないと書き換えることができません。本記事が対象とするファイルです。

ファイルの命名については.json ファイルと同様で、en.default.schema.json や ja.schema.json のように行います。

Shopify テーマにおける翻訳の仕組み（詳細）

例えばカスタマイズ画面（管理画面）で下記の画像のように表示されている場合、

それぞれの項目の名前はそれぞれのファイルで定義されています。
例えば（このテーマの場合は）「Popup」は popup.liquid、「Header」は header.liquid の schema で定義されています。
下記の画像は header.liquid からの抜粋です。

例えば "Header" を "へっだー" に変更すると、管理画面でも "へっだー" と表示されます。

ということで、全てのファイルの全ての該当箇所を上記のように書き換えると翻訳できるわけですが、これだと一つの言語しか対応することができません。
そこで .schema.json ファイルの出番となります。

locales フォルダに該当のファイルが存在する場合、各ファイルは自動的にそのデータを取得するようになっています。
例えば下記のような翻訳データを準備した場合、

ja.schema.json

{
  "sections": {
    "header": {
      "name": "ヘッダー",
      "settings": {
        "use_sticky_header": {
          "label": "ヘッダーを常に表示する"
        }
      }
    }
  }
}

header.lquid では t:sections.header.name とすると "ヘッダー" が、t:sections.header.settings.use_sticky_header.label とすると "ヘッダーを常に表示する" を取得できます。先頭のt:は liquid の作法です。「そもそもこの書き方、何？」という方は「json」でググってください。

上記の翻訳データは、Shopify の無料公式テーマである "Dawn" を参考に命名していますが、好きな名前を付けて大丈夫です。私は "sections" => 各ファイル名 => 階層があれば階層名 => id名で命名しています。

以上、各セクションの翻訳について言及してきました。
管理画面にある「テーマの設定」は config > settings_schema.json で定義されています。
これらはセクションに属していないため、翻訳データでは下記のようにセクションと階層を分けると良いでしょう。

ja.schema.json

{
　"settings_schema": {
    ここに settings_schema.json に対応する翻訳データ
　}
  "sections": {
    ここに各セクションに対応する翻訳データ
  }
}

locales フォルダに元から .schema.json ファイルが存在する場合は、それをコピーしてファイル名を変更し、該当する文字を翻訳するだけで機能します。上記の手順はそもそも .schema.json ファイルが一つも存在しない場合の手順です。

読み返すと…正直、分かりづらいし中途半端な記事だなと思いましたが…このまま投稿させていただきますっ \ｻｰｾﾝｯ/ \ﾒﾝﾄﾞｸｻｲｯ/