Magento2日本語化手順:インライン翻訳機能で表示調整する
イントロダクション
Magento2.4.*(2.4系)に対してインライン翻訳機能を使ってストア表示の日本語化調整する手順について紹介します。
インライン翻訳機能とは？
Magentoの機能で用意されている実際の画面をみながらi18n定義されている文字列部分を選択して置換する文字列を設定する機能です。設定した内容はMagentoデータベースの translation テーブルに保持され「Translation Dictionary方式」と同じように処理され翻訳前文字列と翻訳置換文字列が１：１で翻訳されます。
なお、他の翻訳定義と重複した場合にどの定義が優先されるか筆者が動作の確認をしたところ、このインライン翻訳機能を用いて設定された内容(=translationテーブルのレコード)の定義が最優先されて表示出力されるようです。
本記事の手順に関して下記ページを参考にしています。
(※)本記事執筆時のバージョンはMagento2.4.5になります。
Magento2日本語化手順
Magento2ストアの表示をインライン翻訳機能を用いて日本語化調整するには下記のような手順となります。
1.動作モードをDeveloperモードに変更
2.フロンエンドの言語設定がJapaneseである事を確認
3.ページキャッシュの設定を無効化
4.インライン翻訳機能の設定有効化
5.翻訳文字の設定
6.インライン翻訳機能の設定無効化
7.ページキャッシュの設定を有効に戻す
8.動作モードをProductionモードに戻す
【1】 動作モードをDeveloperモードに変更
インライン翻訳機能はDeveloperモードでないと利用できないため一時的にMagentoの動作モードをDeveloperモードに変更します。
下記コマンドで現在の動作モードを確認します。
$ bin/magento deploy:mode:show
Current application mode: production.
DeveloperモードでなかったらDeveloperモードへ変更します。
$ bin/magento deploy:mode:set developer
【2】フロンエンドの言語設定がJapaneseである事を確認
これから設定するロケール言語が日本語なので現在の設定が"Japanese(Japan)"であることを確認します。
バックエンド画面 Stores > Configuration > General > Locale Options へ移動します。
すると、ロケール設定ページが表示されます。この設定が"Japanese(Japan)"であることを確認します。異なるロケールの場合"Japanese(Japan)"を選択して"Save Config"をクリックしてセーブします。
【3】ページキャッシュの設定を無効化
このあとのインライン調整編集作業中に即時に変更内容が確認できるように一時的にページ系のキャッシュの設定を無効化しておきます。
バックエンド画面 System > Tools > Cache Management へ移動します。
“Blocks HTML output"と"Translations" にチェックを入れて上部のセレクトボックスから"Disable"を選択して"Submit"ボタンを押して無効化します。
【4】インライン翻訳機能の設定有効化
インライン調整編集ができるように設定を有効化します。
バックエンド画面 Store > Configuration > Advanced > Developer へ移動します。
Translate Inline の設定項目の"Enabled for Storefront"=Yesを選択して"Save Config"をクリックしてセーブします。
(※)注意点として、この設定を有効化すると管理者ログインの有無に関わらず全てのフロントエンドへのアクセス時にインライン編集が可能となります。もしも公開中のサーバに対して有効にする場合、一般のお客様の表示時にもインライン翻訳編集モードでの表示となってしまいます。そのためWebサーバーのIP制限などを利用して一般のアクセスができない状態にしておく必要があります。（開発環境では不要）
【5】翻訳文字の設定
前項の設定後にフロントエンド画面へアクセスすると、通常の表示に加えインライン翻訳編集のガイド（赤い破線の矩形）が付いた状態で表示されます。ガイド矩形の上にカーソルを移動すると辞書アイコンが表示されます。
例）"Sign In"にカーソルを載せた状態（下に辞書アイコンが表示される）
任意の編集したいガイド矩形エリアを選択して辞書アイコンをクリックするとダイアログが表示されます。
“Custom"のフィールドに翻訳置換したい文字列を入力して"SUBMIT"を押して設定します。
(※)複数ストアで現在表示中のストア限定での翻訳文字としたい場合は"Store View Specific"にチェックを付けます。
“SUBMIT"を押すと、今設定した内容で画面が再描画されます。（切り替わらない場合はブラウザのリロードorブラウザのキャッシュクリア）
インライン翻訳の文字設定の注意点
この作業で設定した翻訳文字は内部的にはMagentoのデータベースの"translation"テーブルにレコードが作成される形で設定が保持されます。このテーブルのデータ構造は、"Translation Dictionary方式"と似た形式となっており、実際に翻訳置換処理される際に翻訳元の英語文字列を日本語文字列へ１対１で置き換える方式となります。そのためインライン翻訳編集で設定操作した画面以外でも同様の翻訳元の英語文字列が存在する部分については設定された同じ日本語文字で翻訳置換されて表示されます。
例として、商品のユーザーレビューページから、インライン翻訳機能で"Summary"という文字を"レビュータイトル"と設定します。そうすると画面の表示は下記のように"レビュータイトル"に置き換わります。
この時、システムの内部的にはMagentoデータベースのテーブル"tranlation"に日本語ロケール用のja_JP翻訳定義が作成されます。
同じ"Summary"という翻訳定義文字がある、カート画面を表示してみると、お会計の情報表示欄のラベル"Summary"の部分が"レビュータイトル"という翻訳定義文字に従って翻訳置換されてしまいます。これは前述の追加されたテーブル"tranlation"の定義レコードによる動作です。
【6】インライン翻訳機能の設定無効化
インライン調整編集モードを無効に戻します。
バックエンド画面 Store > Configuration > Advanced > Developer へ移動します。
Translate Inline の設定項目の"Enabled for Storefront"=Noを選択して"Save Config"をクリックしてセーブします。
【7】ページキャッシュの設定を有効に戻す
ページ系のキャッシュの設定を有効に戻します。
バックエンド画面 System > Tools > Cache Management へ移動します。
“Blocks HTML output"と"Translations" にチェックを入れて上部のセレクトボックスから"Enable"を選択して"Submit"ボタンを押して無効化します。
Magentoの軽微なバグでTranslation用のJSキャッシュファイルが更新されない可能性があるので念の為手動で削除しておきます。
$ rm pub/static/frontend/Magento/luma/ja_JP/js-translation.json
(※)"Magento/luma" の部分は現在有効なテーマ設定に合わせること。デフォルトのLuma以外のテーマ場合には"<Vendor>/<theme>"とします。
例）オリジナルテーマが<Vendor>="Myvendor", <theme>="custom" の場合 rm pub/static/frontend/Myvendor/custom/ja_JP/js-translation.json
【8】動作モードをProductionモードに戻す
最後に、動作モードをProductionモードに戻します。
$ bin/magento deploy:mode:set production