- 開発技術
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対応を行った際に実施したことを記載しました。各システムによって必要な対応は異なるとは思いますが、誰かの一助になれば幸いです。