- 開発技術
InternetExplorer対応システムのChrome対応で実施したこと
- その他
概要
InternetExplorer（以後IE）で運用されていたWEBシステムのChrome対応を行った際に実施したことを記載します。
JavaScriptでの使用ブラウザ判定について
下記処理でユーザーエージェントが取得できるので、IE、Chromeで含まれている特定文字列をチェックして、使用されているブラウザの判定を行いました。
（共通関数で判定結果を取得して、サーバーサイドに判定結果を渡すことでサーバーサイドでの使用ブラウザ判定も行いました。）
※使用ブラウザにSafariやEdgeを含む場合は、判定の処理順も考慮する必要があるため、注意が必要です。
|
1 2 3 4 5 6 7 8 |
// ユーザーエージェントの文字列をすべて小文字で取得 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表示時のデザイン崩れの対応を行いました。
|
1 2 3 |
@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) { /* Chrome表示用スタイルを記載 */ } |
showModalDialogの移行について
Chromeでは、showModalDialogが使用できないため、Chromeの場合はそれぞれconfirm、alertを使用する対応を行いました。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
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対応を行った際に実施したことを記載しました。各システムによって必要な対応は異なるとは思いますが、誰かの一助になれば幸いです。
