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

その他

概要
JavaScriptでの使用ブラウザ判定について
cssでの使用ブラウザ判定について
showModalDialogの移行について
帳票出力に関する対応について
最後に

概要

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

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

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

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

// ユーザーエージェントの文字列をすべて小文字で取得
var userAgent = window.navigator.userAgent.toLowerCase();

// 'msie'または'trident'が含まれている場合はIEと判定
var isIE = (userAgent.indexOf('msie') &gt;= 0 || userAgent.indexOf('trident') &gt;= 0);

// 'chrome'が含まれている場合はChromeと判定
var isChrome = userAgent.indexOf('chrome') &gt;= 0;

// ユーザーエージェントの文字列をすべて小文字で取得

var userAgent = window.navigator.userAgent.toLowerCase();

// 'msie'または'trident'が含まれている場合はIEと判定

var isIE = (userAgent.indexOf('msie') >= 0 || userAgent.indexOf('trident') >= 0);

// 'chrome'が含まれている場合はChromeと判定

var isChrome = userAgent.indexOf('chrome') >= 0;

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

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

@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {
　　 /* Chrome表示用スタイルを記載 */
}

@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {

　　 /* Chrome表示用スタイルを記載 */

}

showModalDialogの移行について

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

　if ('ie' === getBrowser()) {
　　　ret = showModalDialog(msg);
　} else {
　　　// IE以外の場合、showModalDialog()が使用できないため、confirm()、alert()を使用する
　　　var msgArr = msg.split('msg=');
　　　// msgの内容からconfirm()、alert()の使用を判定
　　　if (msg.indexOf('CommomMsg?flg_2=4') === 0) {
　　　　　ret = confirm(msgArr[1].replace('&lt;BR&gt;', '\n'));
　　　} else {
　　　　　alert(msgArr[1].replace('&lt;BR&gt;', '\n'));
　　　}
　}

　if ('ie' === getBrowser()) {

　　　ret = showModalDialog(msg);

　} else {

　　　// IE以外の場合、showModalDialog()が使用できないため、confirm()、alert()を使用する

　　　var msgArr = msg.split('msg=');

　　　// msgの内容からconfirm()、alert()の使用を判定

　　　if (msg.indexOf('CommomMsg?flg_2=4') === 0) {

　　　　　ret = confirm(msgArr[1].replace('<BR>', '\n'));

　　　} else {

　　　　　alert(msgArr[1].replace('<BR>', '\n'));

　　　}

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

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