InternetExplorer対応システムのChrome対応で実施したこと

概要

【エンジニア募集中】フルリモート可◎、売上/従業員数9年連続UP、平均残業8時間、有給取得率90%、年休124日以上 etc.  詳細はこちらから>

InternetExplorer(以後IE)で運用されていたWEBシステムのChrome対応を行った際に実施したことを記載します。

JavaScriptでの使用ブラウザ判定について

下記処理でユーザーエージェントが取得できるので、IE、Chromeで含まれている特定文字列をチェックして、使用されているブラウザの判定を行いました。
(共通関数で判定結果を取得して、サーバーサイドに判定結果を渡すことでサーバーサイドでの使用ブラウザ判定も行いました。)
※使用ブラウザにSafariやEdgeを含む場合は、判定の処理順も考慮する必要があるため、注意が必要です。


cssでの使用ブラウザ判定について

下記cssメディアクエリを追加して、Chromeの場合のスタイルを指定することでChrome表示時のデザイン崩れの対応を行いました。

 

showModalDialogの移行について

Chromeでは、showModalDialogが使用できないため、Chromeの場合はそれぞれconfirm、alertを使用する対応を行いました。

 

帳票出力に関する対応について

帳票をPDFで出力してブラウザ上に表示していたのですが、chrome標準のPDFビューワーで表示した場合にフォントの一部に崩れが発生していました。
ChromeにAdobe Acrobat 拡張機能を適用することでフォント崩れの回避を行いました。
(今回の対応では他システムとの兼ね合いもあり、Chromeに拡張機能を追加できなかったため、Chromeの場合は帳票をダウンロードする方式で対応させていただきました。帳票の出力ツール等に依存するとは思いますが、事前に確認できる場合は注意が必要と感じました。)

最後に

WEBシステムのChrome対応を行った際に実施したことを記載しました。各システムによって必要な対応は異なるとは思いますが、誰かの一助になれば幸いです。

【エンジニア募集中】フルリモートも◎(リモート率85.7%)、平均残業8時間、年休124日以上、有給取得率90% etc. 詳細はこちらから>

Smallitのサービス