Seasar2 て作ったIE8 互換の統合基幹業務システムを

最新の Chrome/Edge て動作させるための

１０のクロスフラウサテクニック

加藤　圭佑@k_kato

Seasar Conference 2015

async function aboutMe() { let profile = { name: "加藤 圭佑", twitter: "@k_kato", company: "株式会社キャム" }; try { return await followTwitterAsync(profile); } catch (e) { /* NOP ＼(^o^)／ */ } }

誰？

Java + LINQ = jLinqer

‡Qiita, “Java に C# の LINQ を移植してみた – jLinqer”, http://qiita.com/k--kato/items/ec7ab8b392fa8bb0a732

キャム？

2007福岡

ERP x Seasar2SaaS

00 年代

と同時に

00 年代IE6(2001) / IE7(2006)

一極体制の時代

Others (Opera, Safari, PSP…)

Firefox, Mozilla, Camino, etc.

Netscape classic

Internet Explorer for Windows

Browser Wars

0%

10%

20%

30%

40%

50%

60%

70%

80%

90%

100%

1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009

2008Firefox 台頭Chrome 勃興

IE6

IE7

Firefox3

Chrome

0 20 40 60 80 100 120 140

0.82

0.96

4.16

67.95

5.38

6.02

25.66

121.04

5.42

3.7

22.39

129.32

Javascript Benchmark (in Tests Run per Second)

V8SunSpiderDromaeo JS

2009IE8 ♡

Web 標準

Internet Explorer 8 での Web 標準の広範なサポートによる影響として、

標準に準拠しない方法て作成された一部の

Web アプリケーションが正常に動作しなくなる

場合があります

‡TechNet, 「 Internet Explorer 6 から Internet Explorer 8 へのブラウザーの変更点」 , https://technet.microsoft.com/ja-jp/library/Ff943752%28v=WS.10%29.aspx

IE7

. ____ _ __ _ _ /\\ / ___'_ __ _ _(_)_ __ __ _ \ \ \ \ ( ( )\___ | '_ | '_| | '_ \/ _` | \ \ \ \ \\/ ___)| |_)| | | | | || (_| | ) ) ) ) ' |____| .__|_| |_|_| |_\__, | / / / / =========|_|==============|___/=/_/_/_/

IE8

. ____ _ __ _ _ /\\ / ___'_ __ _ _(_)_ __ __ _ \ \ \ \ ( ( )\___ | '_ | '_| | '_ \/ _` | \ \ \ \ \\/ ___)| |_)| | | | | || (_| | ) ) ) ) ' |____| .__|_| |_|_| |_\__, | / / / / =========|_|==============|___/=/_/_/_/

※AA はイメージです。実際の動作とは異なります

IE8互換OFF

. ____ _ __ _ _ /\\ / ___'_ __ _ _(_)_ __ __ _ \ \ \ \ ( ( )\___ | '_ | '_| | '_ \/ _` | \ \ \ \ \\/ ___)| |_)| | | | | || (_| | ) ) ) ) ' |____| .__|_| |_|_| |_\__, | / / / / =========|_|==============|___/=/_/_/_/

IE8互換ON

_________ / _____/ ____ _____ ___________ _______ \_____ \ _/ __ \ \__ \ / ___/\__ \ \_ __ \ / \\ ___/ / __ \_ \___ \ / __ \_ | | \//_______ / \___ >(____ //____ >(____ / |__| \/ \/ \/ \/ \/

※AA はイメージです。実際の動作とは異なります

弊社サービス 〜 After IE8 〜

　年代 フレームワーク 推奨フラウサ

2007〜

Seasar2Teeda + S2Dao

IE6, IE7IE8 以降は互換表示

2012〜

Java EE 6 JSF + JPA

IE8 以降

2014〜

Spring BootDoma 2AngularJS

最新の IE最新の Chrome

Seasar2 て作ったWeb 資産は

なんと

約 1,000 画面！

弊社ては 2014 年より

Seasar2 の資産をSpring Boot て

再構築中

1,000 画面の

再構築＼ (^o^) ／

1,000＼ (^o^) ／

＼ (^o^) ／

　　　　　　　　 *'`` ・ * 。　　　　　　　　 | 　　　　 `* 。　　　　 　　 , ｡∩　　　　 　 * 　　　　　　　　　 + 　 (´ ･ ω ･ `) 　 * ｡ + ﾟ　　　　　　 `* ｡ ヽ、　 つ * ﾟ *　　　　　　　 ` ・ + ｡ * ・ ' ﾟ⊃ + ﾟ　　　　　　　☆　　 ∪ ~ ｡ * ﾟ　 　　　　　　 ` ・ + ｡ * ・ ﾟ 　　　　　 もう◯◯にてもな～れ

過渡期は

Spring Boot+

Seasar2ハイフリット稼働

IE7 の頃に作ったレガシー Web アプリを最新のフラウサて

動作させてみた一体何が起きたのか？

The Art of

クロスフラウサテクニック

Top 10

I先ず

CSS リセットより始めよ

I. CSS リセット <ul style="width: 300px; height: 300px; background-color: darkgray">

<li>STALLOWN3D!</li></ul>

IE7 (IE11 互換表示 ) Chrome

【現象　★★★★★】

I. CSS リセット <ul style="width: 300px; height: 300px; background-color: darkgray">

<li>STALLOWN3D!</li></ul>

<ul>IE7 (IE11 互換表示 ) Chrome

【原因　★★★★★】

I. CSS リセット User Agent Style Sheet

Trident, Edge, Blink etc... はデフォルトの CSS が異なる

<ul>

IE7(IE11 互換表示 ) margin: auto auto auto 30pt;

IE11 margin-top: 16px; margin-bottom: 16px;padding-left: 40px;

Edge margin-top: 16px; margin-bottom: 16px;padding-left: 40px;

Chrome -webkit-margin-before: 1em; -webkit-margin-after: 1em;-webkit-margin-start: 0px; -webkit-margin-end: 0px;-webkit-padding-start: 40px;

【原因　★★★★★】

I. CSS リセット normalize.css

v1.1.3 (IE6+) v3.0.3 (IE8+)dl,menu,ol,ul { margin: 1em 0;}

menu,ol,ul { padding: 0 0 0 40px;}

ol,ul,dl { margin-top: 0; margin-bottom: 1rem;}

Bootstrap 4 も採用IE6/7 は非対応

IE6,7 を IE8+ にリセット

【対策　★★★★★】

I. CSS リセット　

CSS リセットて開発

normalize.cssv.1.1.3 以下

相当

IE8 以上て開発

CSS リセットて開発

No

Yes

Yes Yes

No

No

No

Yes

【対策　★★★★★】

OKNG

“normalize.css v.3.0.3”“IE User Agent Style Sheets”

NG“IE User Agent Style Sheets”

“normalize.css v.1.1.3”

開始

II属性は

直て取得せよ

II. 属性取得

document.getElementById('junet')

style.cssText getAttribute('readonly')

getAttribute('disabled')

IE7(IE11 互換表示 ) DISPLAY: block true true

IE11 display: block; readonly disabled

Edge display: block; readonly disabled

Chrome display: block; readonly disabled

<input id="junet" type="text" style="display: block;" readonly="readonly" disabled="disabled" />

【現象　★☆☆☆☆】

II. 属性取得

document.getElementById('junet')style.cssText

style.displaygetAttribute('readonly')

readOnlygetAttribute('disabled')

disabled

IE7(IE11 互換表示 ) block true true

IE11 block true true

Edge block true true

Chrome block true true

<input id="junet" type="text" style="display: block;" readonly="readonly" disabled="disabled" />

【対策　★☆☆☆☆】

IIITeeda Ajaxは死んている再燃させよ

III. Teeda Ajax 1.0.13-sp11

【現象　★★★☆☆】

EdgeIE11IE7(IE11 互換表示 )

Chrome

＿人人人 人人人＿ ＞ 文字化けでも動作 ＜

￣ Y^Y^Y^Y^Y ￣

XHRSyntaxError

III. Teeda Ajax 1.0.13-sp11

【原因　★★★☆☆】

ajax.js

151:193:

var sysdate = new String(new Date());xmlHttp.setRequestHeader("If-Modified-Since", sysdate);

日本語環境英語環境

new String(new Date())

IE7(IE11 互換表示 )Wed Sep 23 09:00:00 UTC+0900 2015Wed Sep 23 09:00:00 UTC+0900 2015

IE11 Wed Sep 23 2015 09:00:00 GMT+0900 ( 東京 ( 標準時 ))Wed Sep 23 2015 09:00:00 GMT+0900 (Tokyo Standard Time)

Edge Wed Sep 23 2015 09:00:00 GMT+0900 ( 東京 ( 標準時 ))Wed Sep 23 2015 09:00:00 GMT+0900 (Tokyo Standard Time)

Chrome Wed Sep 23 2015 09:00:00 GMT+0900 ( 東京 ( 標準時 ))Wed Sep 23 2015 09:00:00 GMT+0900 (Japan Standard Time)

III. Teeda Ajax 1.0.13-sp11

【対策　★★★☆☆】

ajax.js

151:193:

var sysdate = (new Date()).toUTCString();xmlHttp.setRequestHeader("If-Modified-Since", sysdate);

日本語環境英語環境

new String(new Date())

(new Date()).toUTCString()

IE7(IE11 互換表示 )Wed, 23 Sep 2015 00:00:00 UTCWed, 23 Sep 2015 00:00:00 UTC

IE11 Wed, 23 Sep 2015 00:00:00 GMTWed, 23 Sep 2015 00:00:00 GMT

Edge Wed, 23 Sep 2015 00:00:00 GMTWed, 23 Sep 2015 00:00:00 GMT

Chrome Wed, 23 Sep 2015 00:00:00 GMTWed, 23 Sep 2015 00:00:00 GMT

IVRemember

YAPC 19100

IV. 西暦取得

(new Date()).getYear()

(new Date()).getFullYear()

IE7(IE11 互換表示 ) 2015 2015

IE11 115 2015

Edge 115 2015

Chrome 115 2015

var year = (new Date()).getYear();var year = (new Date()).getFullYear();

【現象・原因・対策　★☆☆☆☆】

ECMAScript v.3で非推奨

2015 年 -1900 年

IV. 西暦取得

【脱線　★☆☆☆☆】

1951年 Whirlwind 磁気コアメモリ2048ビット(1GBの4,194,304分の1)

Vマウスオーバを追え！

V. マウスオーバ

<img alt="KEK" src="first-1.jpg"/><button style="cursor: hand;">talk to the hand</button>

【現象　★☆☆☆☆】

IE7 (IE11 互換表示 ) Chrome

V. マウスオーバ

<img alt="KEK" title="KEK" src="first-1.jpg"/><button style="cursor: hand; cursor: pointer;">talk to the hand</button>

【原因・対策　★☆☆☆☆】

<img> <button>

alt title cursor: hand cursor: pointer

IE7(IE11 互換表示 ) OK OK OK OK

IE11 NG OK NG OK

Edge NG OK NG OK

Chrome NG OK NG OK

VI大小文字を疑え

VI. getElementBy

document.getElementById('wide')

取得 大文字・小文字の区別 検索する属性

IE7(IE11 互換表示 ) OK なし id, name

IE11 NG あり id

Edge NG あり id

Chrome NG あり id

<input id="junet" name="WIDE" type="text" />

【現象・原因　★★★☆☆】

VI. getElementBy

/** * IE判定 * * @returns {Boolean} true: IE7-, false: IE8+,Chrome,Firefox,Edge */function isUnderIE7() { return !((document.documentMode && document.documentMode >= 8) || !document.all);}

if (!isUnderIE7()) {

/** * IE7 document.getElementById再現Proxy * (IE7以前; 大小文字区別:なし, 検索属性:id,name) */ document._oldGetElementById = document.getElementById; document.getElementById = function(idOrName) { if (!idOrName.toLowerCase) { return undefined; }

var idOrNameLower = idOrName.toLowerCase(); var $elements = $('[id],[name]').filter(function() { return (this.id && this.id.toLowerCase && this.id.toLowerCase() == idOrNameLower) || (this.name && this.name.toLowerCase && this.name.toLowerCase() == idOrNameLower); }); return $elements[0]; };}

【対策　★★★☆☆】

HACK:IE7 の動作をエミュレートする関数を作って getElementBy

を汚染させた

VIIイベント発火順は推測するな計測せよ

VII. onfocus イベント ＆ select

onfocusイベント

e.select() setTimeout( function() { e.select(); }, 0);

IE7(IE11 互換表示 ) OK OK

IE11 OK OK

Edge NG OK

Chrome NG OK

e1.onfocus = function() { e1.select(); };e2.onfocus = function() { setTimeout(function(){ e2.select(); }, 0); };

【現象・原因・対策　★★☆☆☆】

onfocus イベント発火順 （※抜粋）

[Chrome 通常 ] mousedown → focus → select → mouseup → click

[Chrome setTimeout トリック ] mousedown → focus → select → mouseup → click → select

mouseup イベントは input を強制的に未選択状態にする

VIIIイベント

は直て登録せよ

VIII. new function

new Function newFunction

event =function

IE7(IE11 互換表示 ) OK NG OK

IE11 NG OK OK

Edge NG OK OK

Chrome NG OK OK

e1.setAttribute('onkeydown', new Function('return alert("XSS");'));e2.setAttribute('onkeydown', 'return alert("xss");');e3.onkeydown = function() { return alert("Xss"); };

【現象・原因・対策　★★☆☆☆】

IX廃止 /未搭載機能に拘泥するな

IX. IME 制御， KeyCode

【未達成　★★★☆☆】

<input type="text" style="ime-mode:active;">

window.event.keyCode = 9;

ime-mode:active window.event.keyCode=9

IE7(IE11 互換表示 ) OK OK

IE11 OK NG (IE10- OK)

Edge OK NG

Chrome NG NG

XSeasar2異常なし

※ 2016 年 9月 26 日サポート終了

X. Seasar2 異常なし A. Seasar2 の進化は止まった。　　 ※ 2016 年 9月 26 日サポート終了

B. Web ブラウザは進化した。C. 古い Web アプリ資産は使えない。

A ≠ CB = C

【現象　☆☆☆☆☆】

まとめ

++

Thanks!

The Art of

クロス フラウサ テクニック Top 10I. 先ず CSS リセットより始めよII. 属性は直で取得せよIII. Teeda Ajax は死んでいる 再燃させよIV. Remember YAPC 19100V. マウスオーバを追えVI. 大小文字を疑えVII. イベント発火順は推測するな 計測せよVIII. イベントは直で登録せよIX. 廃止 / 未搭載機能に拘泥するなX. Seasar2 異常なし　※ 2016 年 9月 26 日サポート終了

動作確認フラウサ 資料中の語句 正式名 Version

IE7(IE11 互換表示 ) Microsoft Internet Explorer 11Internet Explorer 7 モード レンダリング

11.0.10240.1643111.0.22

IE11 Microsoft Internet Explorer 11 11.0.10240.1643111.0.22

Edge Microsoft Edge 20.10240.16384.0

Chrome Google Chrome 45.0.2454.99 m

参考文献[1] JakeArchibald.com, “ES7 async functions”, https://jakearchibald.com/2014/es7-async-functions/[2] Qiita, “Java に C# の LINQ を移植してみた – jLinqer”, http://qiita.com/k--kato/items/ec7ab8b392fa8bb0a732[3] Wikipedia, “Browser wars”, https://en.wikipedia.org/wiki/Browser_wars[4] Dennis Odell, “Pro JavaScript RIA Techniques: Best Practices, Performance and Presentation”, https://books.google.co.jp/books?id=8f9m_4DvrZgC&lpg=PA118&pg=PA118#v=onepage&q&f=true[5] TechNet, 「 Internet Explorer 6 から Internet Explorer 8 へのブラウザーの変更点」 , https://technet.microsoft.com/ja-jp/library/Ff943752%28v=WS.10%29.aspx[6] IECSS.com, “Internet Explorer User Agent Style Sheets”, http://www.iecss.com/[7] The WebKit Open Source Project, “html.css”, http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css[8] GitHub, “normalize.css”, https://github.com/necolas/normalize.css[9] GitHub, “Bootstrap 4”, https://github.com/twbs/bootstrap/blob/master/dist/css/bootstrap.css[10] Wikipedia, 「磁気コアメモリ」 , https://ja.wikipedia.org/wiki/%E7%A3%81%E6%B0%97%E3%82%B3%E3%82%A2%E3%83%A1%E3%83%A2%E3%83%AA[11] Stackoverflow, “Why does Javascript getYear() return 108?”, http://stackoverflow.com/questions/98124/why-does-javascript-getyear-return-108[12]高エネルギー加速器研究機構 (KEK ） , 「日本最初のホームページ」 , http://www.ibarakiken.gr.jp/www/[13]蒼い海の中に溺れる , 「 setAttribute と onclick 」 , http://d.hatena.ne.jp/Marine-Blue/20100426/p1[14] Stackoberflow, “Select all contents of textbox when it receives focus (JavaScript or jQuery)”, http://stackoverflow.com/questions/480735/select-all-contents-of-textbox-when-it-receives-focus-javascript-or-jquery[15] Scott Granneman, 『ブラウザ選択の時代を読み解く』[16] ばるぼら , 『教科書には載らないニッポンのインターネットの歴史教科書』[17] Wikipedia, 「 UNIX哲学」 , https://ja.wikipedia.org/wiki/UNIX%E5%93%B2%E5%AD%A6[18] CNN, “'Funeral' held for aging Web browser”, http://edition.cnn.com/2010/TECH/03/04/ie6.funeral/[19] 竹添直樹 , 『 Seasar2徹底入門』