Home > ブログ > EC-CUBE4の多言語機能

ブログ

EC-CUBE4の多言語機能

去年リリースされたEC-CUBE4では多言語対応されており、設定によって表示を英語に切り換えることができます。

日米での越境ECサイトの構築を予定されているお客様がいて、もともとMagento2での構築を計画していたのですが、EC-CUBE4の多言語化に関する開発資料を見て、やっぱり使いなれたEC-CUBEで構築できないかと相談をいただきました。

EC-CUBE4の多言語化がどのようなものかを私の方でも把握していないため、お客様へのデモと私の勉強を兼ねてEC-CUBE4を設置していろいろ試してみました。

以下はそのまとめです。バージョンは4.0.2によるものです。

2022.7.30追記

管理画面は日本語のままで、フロントで多言語表示(例えば日本語と英語)できるプラグインを試作しました。詳細は「EC-CUBE4の多言語化プラグイン」を参照してください。

2022.10.17追記

管理画面は日本語のままで、フロントのみ言語を切り替える手順を「EC-CUBE4でフロントのみ英語表示にする」に追加しました。

言語表示の切り替え

まずは、EC-CUBE4をインストールします。インストール自体はEC-CUBE3の時と同じく、スクリプトをアップロードしてトップページURLにアクセスするだけです。パーミッションの調整等はありますが、EC-CUBE3をインストールしたことがある人なら簡単にできるでしょう。

インストールして日本語サイトとして動作していることが確認できたら、言語表示を切り替えてみます。

言語表示の切り替えは管理画面からはできません。設定ファイルを直接編集する形になります。この設定ファイルはトップディレクトリにある.envになります。ECCUBE_LOCALEが表示言語で、ECCUBE_CURRENCYが表示通貨になります。言語を英語、通貨をドル表示にするため、以下のように設定を変更します。

ECCUBE_LOCALE=en
ECCUBE_CURRENCY=USD

一応これで設定は終わりです。ブラウザをリロードして表示を確認してみましょう。まずは管理画面。

英語表示の管理画面
図1 英語表示の管理画面

一部日本語表示が混ざっていますが、英語に切り替わりました。というか越境ECの場合でも、管理画面は日本語表示の方がいいと思うのですが、これについては後述します。

フロントについては、これだけでは正常に切り替えができずに追加で以下の2点の作業が必要となりました。

(1) テンプレートの更新

まず、ブラウザをリロードしても言語表示はほぼ日本語のままでした(一部英語にはなりましたが)。

調べてみたところ、テンプレート内のテキスト部分が {{ 'ログイン'|trans }} のように日本語表示のまま埋め込まれていたのが原因でした。本来、言語表示を切り替えたい部位は {{ 'common.login'|trans }} のようにテキストをcommon.loginのようなコードで指定する必要があるのですが、日本語がそのまま埋め込まれた形になっています。単純に修正もれなのかと思いましたが、github上のコードでは4.0.2でも {{ 'common.login'|trans }} のように正しくコーディングされています。zipファイルをビルドする処理にバグがあるのかもしれません。

まあこれは時間がある時に調べてみるとして、今回は、github上の4.0.2のソースコードからテンプレート(src/Eccube/Resource/template/default)をコピーして上書きすることで対応しました。

今回は、zipファイルをダウンロードしてインストールしましたが、githubのソースから直接インストールした場合は、この問題は発生しないはずです。

(2) キャッシュのクリア

テンプレートをコピーしたことで、大部分が英語表示に切り替わりましたが、まだページ上部の[新規会員登録] - [お気に入り] - [ログイン]の部分が日本語のままでした。

テンプレートを確認してみると、テンプレートの記述は正しいようですので、キャッシュをクリアしたところ正常に表示が切り替わりました。

一応、こちらのドキュメントをみると、キャッシュのクリアは不要とのことですが、上記のようにブロック内の表示についてはキャッシュをクリアする必要があるようです。

これで、フロントについても切り替え作業は終わりです。表示を確認してみましょう。

英語表示のフロント
図2 英語表示のフロント

フロントも商品名やカテゴリ名以外は、英語に切り替わりました。商品名やカテゴリ名は英語サイト用に別途登録する必要があります。

以上のようにEC-CUBE4では、.envの設定変更で言語表示を切り替えることができます。

ちなみに、言語設定のファイルはsrc/Eccube/Resource/locale/にあります。デフォルトでは日本語と英語のみですが、ここにファイルを追加していけば他言語への表示にも切り替えられます。

src/Eccube/Resource/locale/以下の言語ファイル

messages.en.yaml
messages.ja.yaml
validators.en.yaml
validators.ja.yaml

この多言語機能はどのように使えるか

以上のことからEC-CUBE4の多言語化は、管理画面、フロント含めて丸ごとの表示切り替えであることがわかります。

これは、EC-CUBEというシステムを海外でも使えるようにする(例えば米国人消費者向けに米国人が運用する)ようなケースには使えるかもしれませんが、越境ECサイトの構築には向きません。

例えば、日本で運用する日米越境ECの場合、管理画面が日本語、/jp/のフロントでは日本語表示、/en/のURLでは英語表示のように、状況に応じて表示を切り替える必要があるためです。

また、商品名や価格についても言語ごとに情報を持てないという問題もあります(ある商品について、日本語/英語の商品名を2種類持ったり、円とドルで価格を持っておく等)。このため、ある商品を日本語サイト/英語サイトどちらにも表示するということはできません。日本語サイト用商品、英語サイト用商品と別に登録する必要があります。

もともと開発資料を見ても、あくまで「多言語化」であって、「越境対応」のようなことは言っていないため、そこを勘違いして期待してしまうとがっかりすることになります。

とはいえ、、

EC-CUBE4を使ってもそれだけで越境ECを構築するのは無理というのはわかりましたが、設定一つで言語表示/通貨表示を簡単に切り替えられるようになったのは大きいと思います。

これを利用すれば、工夫次第では少ない努力で越境ECを構築できそうな気がするので、実際どのようにすればEC-CUBE4で越境ECを構築できるか考えてみます。

(1) フロントと管理画面での言語切り替え

これは、フロントアクセス時と管理画面アクセス時にコントローラでECCUBE_LOCALEの設定を切り替えてしまうことで解決できそうです。

ちなみに、Magento2はフロントと管理画面で別の言語設定にできます(管理画面は管理者アカウント毎に切り替え可)。フロントについてもURLごと(/en/,/jp/)に言語を指定できますし、ユーザにメニューから言語選択させるなど柔軟な設定が可能です。

(2) 日本語と英語のフロントを用意する

仮に日本語ページ(/jp/)と英語ページ(/en/)のフロントを動作させたいとします。これには、/jp/と/en/で二つEC-CUBEを設置してしまうとかなり楽はできそうです。

管理画面が二つになり、在庫等の商品管理も二重になってしまいますが、そもそも現状のEC-CUBEでは商品情報内に言語ごとの情報(円とドルの価格情報など)を持つことはできないので、各言語ごとに商品情報を持つ必要があります。ここは、思い切った妥協をして二つ設置するものとします。

(3) 配送、決済等のカスタマイズ

これらは各国の状況に合わせてカスタマイズする必要がありますが、EC-CUBEが各言語ごとに別インストールされていればカスタマイズは比較的やりやすいのではないかと思います。

ということで越境ECというか、各国用にECを構築するだけというような形になってしまいましたが、この手法がとれるのもEC-CUBEに多言語機能が実装されたおかげと言えます。

越境ECサイトを本格的に構築する場合、オープンソースシステムでやるなら現時点ではMagento2を使うことになると思います。 Magento2は本当にカスタマイズ性も高くよくできていますが、正直、かなり動作も重く、カスタマイズも面倒なため、EC-CUBEくらいの方が扱いやすくて助かります。

越境ECサイト構築において妥協できる点を明確にして、機能的に充分ならEC-CUBE4で越境ECを実現するのもいいのではないかと思います。実際に構築してみるには、私もまだまだ勉強しなくてはいけませんが。

参考

EC-CUBE 4.0開発ドキュメント 多言語化
http://doc4.ec-cube.net/i18n_multilingualization

[関連記事]

投稿日:2019/04/12 18:26

タグ: 作業実績 EC-CUBE

Top

アーカイブ

タグ

Server (18) プログラミング (15) 作業実績 (15) PHP (11) ネットワーク (9) C (7) C++ (7) Webアプリ (6) EC-CUBE (6) Nginx (5) OpenSSL (5) laravel (4) Linux (4) 書籍 (4) JavaScript (3) AWS (3) Rust (3) Vue.js (3) Golang (2) Symfony (2) Apache (1) デモ (1) お知らせ (1) MySQL (1) CreateJS (1) OSS (1)