Seasar2で作ったIE8互換の統合基幹業務システムを最新のChrome/Edgeで動作させるための１０のクロスブラウザテクニック

1. 先ずCSSリセットより始めよ
2. 属性は直で取得せよ
3. Teeda Ajaxは死んでいる 再燃させよ
4. Remember YAPC 19100
5. マウスオーバを追え
6. 大小文字を疑え
7. イベント発火順は推測するな 計測せよ
8. イベントは直で登録せよ
9. 廃止/未搭載機能に拘泥するな
10. Seasar2 異常なし

Transcript

1. Seasar2 で作った IE8 互換の統合基幹業務システムを 最新の Chrome/Edge で 動作させるための １０のクロスブラウザテクニック 加藤　圭佑 @k_kato Seasar Conference 2015
2. async function aboutMe() { let profile = { name: "加藤 圭佑", twitter: "@k_kato", company: "株式会社キャム" }; try { return await followTwitterAsync(profile); } catch (e) { /* NOP ＼(^o^)／ */ } }
3. 誰？
4. Java + LINQ = jLinqer ‡Qiita, “Java に C# の LINQ を移植してみた – jLinqer”, http://qiita.com/k--kato/items/ec7ab8b392fa8bb0a732
5. キャム？
6. 2007 福岡 ERP x Seasar2 SaaS
7. 00 年代
9. と同時に
10. 00 年代 IE6 (2001) / IE7 (2006) 一極体制の時代
11. 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
12. 2008 Firefox 台頭 Chrome 勃興
13. 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) V8 SunSpider Dromaeo JS
14. 2009 IE8 ♡ Web 標準
15. 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
16. IE7 . ____ _ __ _ _ /\\ / ___'_ __ _ _(_)_ __ __ _ \ \ \ \ ( ( )\___ | '_ | '_| | '_ \/ _` | \ \ \ \ \\/ ___)| |_)| | | | | || (_| | ) ) ) ) ' |____| .__|_| |_|_| |_\__, | / / / / =========|_|==============|___/=/_/_/_/ IE8 . ____ _ __ _ _ /\\ / ___'_ __ _ _(_)_ __ __ _ \ \ \ \ ( ( )\___ | '_ | '_| | '_ \/ _` | \ \ \ \ \\/ ___)| |_)| | | | | || (_| | ) ) ) ) ' |____| .__|_| |_|_| |_\__, | / / / / =========|_|==============|___/=/_/_/_/ ※AA はイメージです。実際の動作とは異なります
17. IE8 互換 OFF . ____ _ __ _ _ /\\ / ___'_ __ _ _(_)_ __ __ _ \ \ \ \ ( ( )\___ | '_ | '_| | '_ \/ _` | \ \ \ \ \\/ ___)| |_)| | | | | || (_| | ) ) ) ) ' |____| .__|_| |_|_| |_\__, | / / / / =========|_|==============|___/=/_/_/_/ IE8 互換 ON _________ / _____/ ____ _____ ___________ _______ \_____ \ _/ __ \ \__ \ / ___/\__ \ \_ __ \ / \\ ___/ / __ \_ \___ \ / __ \_ | | \/ /_______ / \___ >(____ //____ >(____ / |__| \/ \/ \/ \/ \/ ※AA はイメージです。実際の動作とは異なります
18. 弊社サービス 〜 After IE8 〜 　 年代 フレームワーク 推奨ブラウザ 2007 〜 Seasar2 Teeda + S2Dao IE6, IE7 IE8 以降は互換表示 2012 〜 Java EE 6 JSF + JPA IE8 以降 2014 〜 Spring Boot Doma 2 AngularJS 最新の IE 最新の Chrome
19. Seasar2 で作った Web 資産は なんと 約 1,000 画面！
20. 弊社では 2014 年より Seasar2 の資産を Spring Boot で 再構築中
21. 1,000 画面 の 再構築 ＼ (^o^) ／
22. 1,000 ＼ (^o^) ／
23. ＼ (^o^) ／
24. 　　　　　　　　 *'`` ・ * 。 　　　　　　　　 | 　　　　 `* 。 　　　　 　　 , ｡∩　　　　 　 * 　　　 　　　　　　 + 　 (´ ･ ω ･ `) 　 * ｡ + ﾟ 　　　　　　 `* ｡ ヽ、　 つ * ﾟ * 　　　　　　　 ` ・ + ｡ * ・ ' ﾟ⊃ + ﾟ 　　　　　　　☆　　 ∪ ~ ｡ * ﾟ 　 　　　　　　 ` ・ + ｡ * ・ ﾟ 　　　　　 もう◯◯にでもな～れ
25. 過渡期は Spring Boot + Seasar2 ハイブリット稼働
26. IE7 の頃に作った レガシー Web アプリ を最新のブラウザで 動作させてみた 一体何が起きたのか？
27. The Art of クロスブラウザ テクニック Top 10
28. I 先ず CSS リセット より始めよ
29. I. CSS リセット <ul style="width: 300px; height: 300px; background-color: darkgray"> <li>STALLOWN3D!</li> </ul> IE7 (IE11 互換表示 ) Chrome 【現象　★★★★★】
30. I. CSS リセット <ul style="width: 300px; height: 300px; background-color: darkgray"> <li>STALLOWN3D!</li> </ul> <ul> IE7 (IE11 互換表示 ) Chrome 【原因　★★★★★】
31. 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; 【原因　★★★★★】
32. 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+ に リセット 【対策　★★★★★】
33. I. CSS リセット 　 CSS リセット で開発 normalize.css v.1.1.3 以下 相当 IE8 以上 で開発 CSS リセット で開発 No Yes Yes Yes No No No Yes 【対策　★★★★★】 OK NG “normalize.css v.3.0.3” “IE User Agent Style Sheets” NG “IE User Agent Style Sheets” “normalize.css v.1.1.3” 開始
34. II 属性は 直で取得せよ
35. 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" /> 【現象　★☆☆☆☆】
36. II. 属性取得 document.getElementById('junet') style.cssText style.display getAttribute('readonly') readOnly getAttribute('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" /> 【対策　★☆☆☆☆】
37. III Teeda Ajax は死んでいる 再燃させよ
38. III. Teeda Ajax 1.0.13-sp11 【現象　★★★☆☆】 Edge IE11 IE7(IE11 互換表示 ) Chrome ＿人人人 人人人＿ ＞ 文字化けでも動作 ＜ ￣ Y^Y^Y^Y^Y ￣ XHR SyntaxError
39. 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 2015  Wed 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)
40. 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 UTC  Wed, 23 Sep 2015 00:00:00 UTC IE11  Wed, 23 Sep 2015 00:00:00 GMT  Wed, 23 Sep 2015 00:00:00 GMT Edge  Wed, 23 Sep 2015 00:00:00 GMT  Wed, 23 Sep 2015 00:00:00 GMT Chrome  Wed, 23 Sep 2015 00:00:00 GMT  Wed, 23 Sep 2015 00:00:00 GMT
41. IV Remember YAPC 19100
42. 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 年
43. IV. 西暦取得 【脱線　★☆☆☆☆】 1951年 Whirlwind 磁気コアメモリ2048ビット (1GBの4,194,304分の1)
44. V マウスオーバを 追え！
45. V. マウスオーバ <img alt="KEK" src="first-1.jpg"/> <button style="cursor: hand;">talk to the hand</button> 【現象　★☆☆☆☆】 IE7 (IE11 互換表示 ) Chrome
46. 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
47. VI 大小文字を疑え
48. 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" /> 【現象・原因　★★★☆☆】
49. 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 を汚染させた
50. VII イベント発火順 は推測するな 計測せよ
51. 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 を強制的に未選択状態にする
52. VIII イベント は直で登録せよ
53. VIII. new function new Function new Function 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"); }; 【現象・原因・対策　★★☆☆☆】
54. IX 廃止 / 未搭載 機能に拘泥するな
55. 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
56. X Seasar2 異常なし ※ 2016 年 9 月 26 日サポート終了
57. X. Seasar2 異常なし A. Seasar2 の進化は止まった。 　　 ※ 2016 年 9 月 26 日サポート終了 B. Web ブラウザは進化した。 C. 古い Web アプリ資産は使えない。 A ≠ C B = C 【現象　☆☆☆☆☆】
58. まとめ
59. ++
60. Thanks!
61. The Art of クロス ブラウザ テクニック Top 10 I. 先ず CSS リセットより始めよ II. 属性は直で取得せよ III. Teeda Ajax は死んでいる 再燃させよ IV. Remember YAPC 19100 V. マウスオーバを追え VI. 大小文字を疑え VII. イベント発火順は推測するな 計測せよ VIII. イベントは直で登録せよ IX. 廃止 / 未搭載機能に拘泥するな X. Seasar2 異常なし　※ 2016 年 9 月 26 日サポート終了
62. 動作確認ブラウザ 資料中の語句 正式名 Version IE7(IE11 互換表示 ) Microsoft Internet Explorer 11 Internet Explorer 7 モード レン ダリング 11.0.10240.16431 11.0.22 IE11 Microsoft Internet Explorer 11 11.0.10240.16431 11.0.22 Edge Microsoft Edge 20.10240.16384.0 Chrome Google Chrome 45.0.2454.99 m
63. 参考文献 [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 徹底入門』