サンボーの日記
サンボーです。今日は自社のネットショップに出てた変な表示の話です。「あと¥3.180円で送料無料」って、金額の区切りがピリオドになってて、記号も「¥」と「円」で二重になってました。
最初は設定のどこかを直せば済むと思ってたんですけど、管理画面をどれだけ触っても変わらなくて、これはおかしいぞと。
配信されてるコードを直接読んでみたら、日本円をドイツ語の地域設定で数値整形してました。びっくりです。日本式のカンマ区切りは特定のお店だけの例外扱いになってて、設定ではどうにもならない作りでした。
代わりにハンガリー語の地域設定にしたら、うちの金額の範囲だとちょうどきれいに表示されることを見つけました。サポート待ちより先にコードを読んじゃったほうが早かったです。
実務の記録
自社ECの送料無料バーに「あと ¥3.180円で送料無料」という表示が出ていました。三桁区切りがピリオドになっており、通貨記号の「¥」と単位の「円」も重複していました。最初はアプリの設定ミスだと考え、管理画面の表示設定を何度か見直しましたが、直りませんでした。
設定画面をいくら操作しても直らないため、配信されているJavaScriptを直接読みました。すると、日本円の金額をドイツ語のロケール(地域設定)で数値整形していることがわかりました。日本式のカンマ区切りは、特定のショップドメインだけをハードコードで例外扱いする実装になっていて、設定画面側からはどういじってもカンマ区切りに変更できない作りでした。
サポートに問い合わせて直るのを待つより先に、自分たちで回避策を探しました。地域設定の一覧から「ハンガリー語ロケール」を選ぶと、4桁までの数字には区切り記号が入らない書式になることを見つけました。自店の送料無料ラインは5,000円未満に設定しているため、不足額は常に4桁以下で収まります。その範囲であれば区切り記号自体が出ないため、結果としてカンマの無い自然な表示になりました。
外部のアプリで「設定を直せば直るはず」と思い込んでいた不具合が、実は配信コードそのもののバグでした。サポートの回答を待つより、配信されているJavaScriptを1枚読むほうが早く原因にたどり着けました。
今日の学び
外部アプリの表示崩れは設定ミスと決めつけず、配信されているコードを直接読むとサポートの回答を待つより早く原因と回避策が見つかることがあります。
自社でやるなら
まず変えること
外部アプリの表示がおかしいとき、設定を触る前に一度、配信されているJavaScriptやCSSを直接開いて中身を確認してみてください。
形骸化させない仕掛け
回避策を見つけたら、なぜその設定で直るのかを1行メモに残しておくと、次に似た不具合が起きたときに同じ調査をやり直さずに済みます。
振り返りの周期
3ヶ月に一度、外部アプリの表示まわりに不自然な数値や表記が出ていないか、実際の画面を見て確認してみてください。
コピペで使えるプロンプト
表示崩れの原因切り分けプロンプト
次に渡す配信中のJavaScript/CSSのコードを読み、金額や数値の表示形式(桁区切り・通貨記号・小数点)に関わる処理を探してください。地域設定(ロケール)やロケール別の書式指定がないか確認し、表示崩れの原因になりうる箇所を具体的に指摘してください。