Magento2 日本語化手順:Translation Dictionary方式でオリジナル辞書ファイル作成する

2022年10月16日

イントロダクション

Magento2.4.*(2.4系)に対してTranslation Dictionary方式でオリジナルの辞書ファイルを作成してストア表示を日本語化する手順について紹介します。

Translation Dictionary方式とは?

Magentoの全コンポーネントにおいて共通ロケール辞書定義で英語文字列を日本語文字列へ1対1で置き換える方式です。各機能を実装されているコンポーネント別に分けて翻訳定義は解釈・管理されません。Magentoの各コンポーネント別に分けて翻訳文字列を定義したい場合には、「Language Packages方式」で対処する必要があります。

本記事の手順に関して下記ページを参考にしています。

(※)本記事執筆時のバージョンはMagento2.4.5になります。

Magento2日本語化手順

Magento2ストアの表示を自作オリジナルのTranslation Dictionary方式を用いて日本語化するには下記のような手順となります。

1.日本語化Dictionary定義ファイル雛形の出力
2.Dictionaryファイルの編集
3.Dictionaryファイルの配置
4.フロントエンドの日本語表示
5.管理画面(バックエンド)の日本語表示

【1】 日本語化Dictionary定義ファイル雛形の出力

MagentoのCLIコマンドで日本語化ロケールDictionary定義ファイルの元となる雛形のファイルを出力させます。このコマンドにより現在のストアのエクステンション構成で 有効な多言語対応の文字列が一括でCSV形式で出力されます。コマンドオプション –out=xxxx で出力ファイルパスを指定します。
例)/tmp/ja_JP.csv に雛形ファイルを出力する場合

$ su - magento_user
$ cd /path/to/magento/
$ bin/magento i18n:collect-phrases --output=/tmp/ja_JP.csv -m

i18n:collect-phrases コマンドの詳細については公式ドキュメントのこちらを参照のこと。

【2】Dictionaryファイルの編集

前項で出力したCSV形式ファイルを編集します。意図せず特殊文字などが自動変換される可能性を考えると、エクセルなどの表計算ソフトではなく、テキストエディタを使った編集をおすすめします。
CSVファイルの各カラムは下記のように4つの要素で構成されています。
[第1カラム]置換元の文字列(英語表記)
[第2カラム]ロケール設定により置換する文字列
[第3カラム]対象コンポーネントタイプ(モジュールの場合はmodule)
[第4カラム]対象コンポーネント名(例:Magento_Catalog)

公式ドキュメントにも記載のとおり、編集すべきデータは第2カラムのみとなります。
この記事で説明している、「Translation Dictionary方式」での日本語化の場合、実際のページ生成時にプログラムが参照しているのは、第1カラムと第2カラムの定義のみになります。極端な話、第3カラムと第4カラムを削除して、第1カラムと第2カラムのみで構成されたDictionaryファイル(ja_JP.csv)でも問題なく言語ロケール設定に従い置換されます。
CSVデータの構造をみると第3カラムと第4カラムにモジュール識別子の定義があるので、一見すると「モジュールごとに翻訳置換文字を定義できるのでは?」と思いますが、実際そのようには動作しません。これはこのCSVファイルのフォーマットが「Language Packages方式」での対処時にも併用できるように設計されているためのようです。
なお前項手順で出力したCSVファイルにおいて、異なるモジュールで同一の置換元文字列の定義が複数行で存在するパターンがあります。筆者が動作の確認(Ver2.4.5環境)をしたところ、このケースの場合、行末に近いほうの定義が優先されて(=行頭寄りの定義は無視されて)翻訳置換されました。
例)第1カラムが"Sumary"となっている行は全部で6行存在します。

Summary,Summary,module,Magento_Bundle
Summary,Summary,module,Magento_ConfigurableProduct
Summary,Summary,module,Magento_Review
Summary,Summary,module,Magento_AsynchronousOperations
Summary,Summary,module,Magento_Checkout
Summary,Summary,module,Magento_ImportExport

仮に下記のように異なる文字列を第2カラムとして編集更新した場合

Summary,"サマリ-1",module,Magento_Bundle
Summary,"サマリ-2",module,Magento_ConfigurableProduct
Summary,"サマリ-3",module,Magento_Review
Summary,"サマリ-4",module,Magento_AsynchronousOperations
Summary,"サマリ-5",module,Magento_Checkout
Summary,"サマリ-6",module,Magento_ImportExport

Magentoはアプリケーション内のi18n形式で書かれた"Summary"の文字について、モジュール差異は考慮されず一律に、最も行末に近い行で定義されている"サマリ-6″に置換される動作となりました。

【3】Dictionaryファイルの配置

前項で編集したCSV形式ファイルを配置してMagentoアプリケーションに組み込みます。
自身のMagentoストアのCLIコンソールでアクセスして、magento_userでMagentoルートディレクトリへ移動します。
(*)"/path/to/magento/" の部分は適宜ご自身のサーバー環境に合わせてください。

$ su - magento_user
$ cd /path/to/magento/

拡張言語パッケージを配置するためのディレクトリを用意します。
./app/i18n/ の配下に [任意のvender名]/ja_jp という名前のディレクトリを作成します。
Magentoの初期状態だと app のディレクトリは存在しますが、 i18n フォルダは存在しないので作成します。
例)[任意のvender名]を originmod とした場合

$ mkdir ./app/i18n
$ mkdir ./app/i18n/originmod
$ mkdir ./app/i18n/originmod/ja_jp

用意したディレクトリに前項で作業した編集済みCSV形式定義ファイル(ja_JP.csv) を配置します。

$ cd ./app/i18n/originmod/ja_jp/
$ cp /tmp/ja_JP.csv ./

この翻訳モジュールの付帯ファイルとして、

  • composer.json
  • registration.php
  • language.xml

を同一ディレクトリに作成します。
以下サンプルを示します。サンプルは[任意のvender名]を originmod とした場合になります。

composer.json の新規作成

$ vi ./composer.json

composer.json の内容

{
    "name":"originmod/ja_jp",
    "description":"Original Japanese Language module",
    "version":"103.0.1",
    "license":[
        "OSL-3.0"
    ],
    "require":{
        "magento/framework":"100.0.*||101.0.*||102.0.*||103.0.*"
    },
    "type":"magento2-language",
    "autoload":{
        "files":[
            "registration.php"
        ]
    }
}

registration.php の新規作成

$ vi ./registration.php

registration.php の内容

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
	\Magento\Framework\Component\ComponentRegistrar::LANGUAGE,
	'originmod_ja_jp',
	__DIR__
);

language.xml の新規作成

$ vi ./language.xml

language.xml の内容

<language xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:App/Language/package.xsd">
    <code>ja_JP</code>
    <vendor>originmod</vendor>
    <package>ja_jp</package>
</language>

(確認)上記作業により ./app/i18n/originmod/ja_jp ディレクトリのファイルは下記のようになっているはずです。

$ cd /path/to/magento/
$ ls ./app/i18n/originmod/ja_jp/
composer.json  ja_JP.csv  language.xml  registration.php


最後に今回の作業で作成したファイル類のパーミッションを設定しておきます。

$ cd /path/to/magento/
$ sudo chown -R magento_user:www-data ./app/i18n
$ find ./app/i18n -type d -exec chmod 770 {} \;
$ find ./app/i18n -type f -exec chmod 660 {} \;

コンテンツデプロイ

翻訳リソースキャッシュファイル"js-translation.json"を削除してからデプロイして最後にキャッシュクリアをします。
(※)なお、あとからja_JP.csvファイルを修正更新した場合にも都度下記コマンド実行が必要です。コマンド実行後に変更内容がページ表示へ反映されます。

$ cd /path/to/magento/
$ rm pub/static/adminhtml/Magento/backend/ja_JP/js-translation.json
$ rm pub/static/frontend/Magento/luma/ja_JP/js-translation.json
$ php bin/magento setup:static-content:deploy ja_JP -f
$ php bin/magento cache:flush

(※)"Magento/luma" の部分は現在有効なテーマ設定に合わせること。デフォルトのLuma以外のテーマ場合には"<Vendor>/<theme>"とします。
例)オリジナルテーマが<Vendor>="Myvendor", <theme>="custom" の場合 rm pub/static/frontend/Myvendor/custom/ja_JP/js-translation.json

【4】フロントエンドの日本語表示

[Step.1] 動作モードを"developer mode"に変更します。
“Locale Options::Locale" の設定変更は、MagnetoがDeveloperモードの時のみ変更できるため、最初にMagentoの動作モードをDeveloperモードに変更する必要があります。
Ref: https://experienceleague.adobe.com/docs/commerce-operations/configuration-guide/cli/set-mode.html?lang=en

$ php -f ./bin/magento deploy:mode:set developer

[Step.2] ロケール設定を“Japanese(Japan)”に変更します。
バックエンド画面 Stores > Configuration > General > Locale Options へ移動します。
すると、ロケール設定ページが表示されます。ここで"Japanese(Japan)"を選択して"Save Config"をクリックしてセーブします。

(※)もしもLocaleのドロップダウンが無効化されている場合。原因はMagentoの動作モードがDeveloperモードでないためです。その場合、前述[Step.1]の操作で"developer mode"に変更してください。

Magento2:"Japanese Language Pack【日本言語化パック】"ロケール設定画面ドロップダウン無効時

[Step.3]設定キャッシュをクリアします。

$ php -f ./bin/magento cache:flush

【5】 管理画面(バックエンド)の日本語表示

バックエンド画面(管理者ページ)の言語表示設定は管理者ユーザーごとに設定します。
バックエンド画面に移動
System > Permission > All Users > 変更する対象ユーザーをクリックします。
“Japanese(Japan)"を選択
次回ログイン後、バックエンド画面が日本語表示になります。

管理者ユーザー言語設定画面イメージ