こんにちは八号機です。
ロケッツでエンジニアを担当しています。
あるときはHTMLコーディング、あるときはシステム開発を行なっています。
メンバーからの調査依頼
お仕事をしていると色々な問題が発生しますよね。
私も最近メンバーから下記の依頼を受けました。
・EC-CUBEのスマホ表示で画像が表示されない。
・PC版は表示される。
・本番はスマホでも表示されるが、テスト環境だけ表示されない
上記の状態なので調査してほしい。
調査開始
実際にテスト環境をChromeのデベロッパーツールのスマホ表示で確認してみました。
確かに画像が表示されていません。
EC-CUBEのスマホ表示を行った際にはresize_image.phpというPHPを利用して縮小画像を表示しています。
画像のURLだけをブラウザで表示してレスポンス内容を確認してみます。
レスポンス情報に画像の情報は含まれているのを確認しました。
画像情報がサーバーから返ってきているのに何故画像が表示されないのでしょう。
次に本番サーバーからダウンロードした画像とテスト環境からダウンロードした画像の差を確認するためにバイナリエディタで実際の画像情報を比較して確認してみます。
テスト環境の画像の先頭バイトに本番環境には存在しない「EF BB BF EF BF」が見つかりました！
「EF BB BF EF BF」とは何者なのかGoogle先生に聞いてみました。
検索結果から「EF BB BF EF BF」の正体はUTF-8のBOMっぽい感じがします。
せっかくなのでWikipediaの内容も確認してみます。
これで完全に原因が判明しました！
それでは、どのファイルがにBOMが付いているのかサーバーにあるファイルを調べてみます。
調査に利用したコマンドは以下となります。
find . -type f -name '*.php' -exec file {} + | grep "(with BOM)"
実行した結果は下記でした。
mtb_constants.phpファイルはEC-CUBEの管理画面で設定された内容がPHPのdefineとして定義されるファイルです。
その為、全ての処理でこちらのファイルを読み込んでいます。
このファイルにBOMが付いていた為に、画像の出力にノイズが付加されていました。
PHPは一般的に読み込むファイル順に実行されるため、
１. 色々なPHPファイル読み込み
２. mtb_constants.php読み込み（この時点でBOMがノイズとして出力）
３. 画像出力のPHPファイル読み込みと画像情報の出力
４. BOMが付与された事により画像ファイルとしてのフォーマットが崩れて壊れた画像ファイルをブラウザに表示
となっていたのが原因の様です。
早速mtb_constants.phpからBOMを取り除いてサーバーにアップし、確認してみました。
画像が表示されました！
まとめ
・BOMは目には見えないのでソースコードをチェックしても気づき辛い。
・Windowsのメモ帳でUTF-8の文字コード指定で保存を行うとBOMが付与されるので注意。
・何か問題が発生した場合、ソースコードの記述だけが問題の要因ではない。
（調査は順調に行われたかに記載していますが、実はソースコードの調査もしていました。）
コンサルロケッツではデザイナーの他にエンジニア（コーダー）も募集してます！
・困ったらプログラム書いて解決すれば良いじゃない！
・プログラムで効率化できたら達成感を感じる！
・JSバリバリ書いちゃうよ！
・HTMLとCSSをバリバリ書いちゃうよ！
・CSVで商品移行できちゃいます！
・実はAIに興味があります！（最近、私はグループ会社のお多福ラボで研究開発しています）
・まだまだ技術力はないけど意気込みなら誰にも負けないよ！
上記に１つでも当てはまる方はコチラから是非ご応募ください。
