IEがいよいよサポート終了！IEからEdgeに切り替わって発生したエンジニア泣かせの動作の違い2つ
IEのサポートが2022/6/16に終了します。これ、WEBシステムをやっているシステム屋さんとしては、大変な問題でした。後継ブラウザとしてはEdgeになりますが、IE→Edgeに利用ブラウザが変わったときに、運営しているWEBサイトの動作がいろいろ変わってしまい対応に苦労しました。
この記事では、私が作成しているWEBシステムで発生した不具合と修正内容についてか記載していきます。
問題①：EdgeではIMEオフが機能しない（一番の問題）
Edge対応で一番困ったのが、
※IMEオフ/オンとは？
Windowsで「半角英数字や記号だけの入力」←→「日本語などの全角文字の入力」を切り替える機能です。「IME」をオフにすると半角文字だけを入力できる状態になります。逆にオンなら、日本語を入力できるようになります。
IEでは、入力項目ごとに「この項目はIMEオフにする」といったコントロールが可能でした。全角文字を入れてほしくない項目では強制的にIMEオフに設定することで、ユーザが全角→半角を切り替えなくても半角文字だけを入力できるようになり、スムーズに入力できるようになっていたのです。
IMEオフにする入力項目例：
- 郵便番号
- 電話番号
- 年齢
- バーコード読み取り欄
ところが、EdgeではIMEオフの設定が効かないようになっています。これまでユーザが意識していなかったのに、日本語入力がNGの項目では、ユーザ自身が「IMEオン→オフ」を切り替えしないといけなくなります。
対応策：サーバ側処理で全角から半角に置換
サーバ側で半角に置換する色々と調べましたが、EdgeでIMEオフに切り替える方法がありませんでした。そこで、ユーザが入力した値をサーバ側で半角に置換するように、共通処理を追加することで対応しました。
【イメージ（例：電話番号の入力欄の場合）】
ユーザの入力値（全角）：０１２０ー１１１１－２２２２
↓
サーバ側（半角）：0120-1111-2222
全角の「０」なら半角「0」に置換、といったイメージです。
※幸い、ユーザから受け取った値について共通処理がったので、そのような対応がしやすかったのです。
問題②レイアウトが崩れる
EdgeではIEと比べて、パーツが気持ち大きく表示されている（？）ためなのか、もともとIEではキレイに整形されて表示されていた画面が、Edgeでは崩れるものが多かったです。（もちろんEdgeに限らず、ブラウザが変われば表示が崩れるというのはあるあるですが）
こちらに関しては、１画面ずつレイアウトの調整するしかありません。修正に時間がかかってしまうので、早め早めに１つずつ対応を行っていきました。
すぐに対応できない場合はEdgeのIEモードで
Edge対応は意外と時間がかかります。対応まで間に合わない！という場合は、EdgeのIEモードを利用するのが現実的ですね（IEモードは、少なくとも2029年まではサポートされるようです）。
＜関連記事＞
↓ブログ内で使った、蛍光マーカーの適用
