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

概要

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

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

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

// ユーザーエージェントの文字列をすべて小文字で取得
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表示用スタイルを記載 */
}

 

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('<BR>', '\n'));
   } else {
     alert(msgArr[1].replace('<BR>', '\n'));
   }
 }

 

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

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

最後に

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

Smallitのサービス