だ。ログ。

開発とかスノボとかやきうとか。

EC-CUBE3購入画面の文字化け

EC-CUBE3の支払い方法部分の改造をしていた時のこと。

  1. 商品をカートに入れる
  2. ログイン/非ログインで操作を続ける
  3. 支払い方法ページを表示する

ここにjsで任意の文字列を表示させようとした際に、jsのデバッグの為にソースコードを開くと文字列が全てURLエンコード変換されていて「日本語」として確認する事が出来ない。
そのままjsの

alert("こんにちは、お昼ごはんです");

を実行すると「こんにちは、お昼ごはんです」が全て文字化けしてしまう。

%E3%81%93%E3%82%93%E3%81%AB%E3%81%A1%E3%81%AF%E3%80%81%E3%81%8A%E6%98%BC%E3%81%94%E3%81%AF%E3%82%93%E3%81%A7%E3%81%99

こんなかんじ。


文字列自体はエンコードされていて、ブラウザで表示すると「日本語」として解釈されているがjsは文字列が解釈されない。

解決策

明示的にmetaタグにエンコードタイプを記述する。

/src/Eccube/Resource/template/default/default.twig 41行目

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

明示的にUTF-8ですよ。と宣言する。
サーバーやシステムの仕様上エンコードが違う場合はcharsetを変更する。