IE11/Edgeへの恨みつらみ（というかハマったこと） 

# NGK2018Bの発表資料です

https://ngk2018b.connpass.com/event/104965/

---
# 自己紹介



---
## 「豊田市IT勉強会」を主催しています

* 何でもありのもくもく会（自習）
* 日時：毎月第2日曜日 10:00-18:00
* 場所：T-FACE A館9階（豊田市駅近くの松坂屋の上）
* 名古屋より豊田に近い方は是非起こしください！
* [豊田市の市民活動団体です](http://www.city.toyota.aichi.jp/shisei/machizukuri/shimin/1005240.html)
    * ![image.png](https://qiita-image-store.s3.amazonaws.com/0/37903/26ab75ee-9632-a6bb-e977-7830b139e3c5.png)

https://toyota-it-benkyokai.connpass.com/event/105317/

---
## 「技評雑誌もくもく会」を主催しています
* 「SoftWare Design」や「WEB+DB Press」など技術評論社の雑誌を楽しむ会
* それ以外の勉強もOK
* 日時：毎月第2火曜日 19:00-21:30
* 場所：来栖川電算 会議室


https://wakateweb-nagoya.connpass.com/event/112784/

---
## 経歴
* ～2018/03：会社Iにて、社内Webシステムを開発
    * 使っていた技術：Spring Boot, Java8, Pure JavaScript(ES5), PostgreSQL, HTML/CSS, Bootstrap, jQuery, Terasoluna など
    * サポートブラウザ：Firefox, **IE11**
* 2018/04：会社Kに転職！
    * IEから離れる(というよりWeb開発から離れる)

---
## IEから離れられたのに、なぜIEについて話すのか
* 「今日を最後に、もうIEの愚痴は言わない」というケジメ
* 「憎むことでいつまでも　あいつ(IE)に縛られない」ようにするため（中島みゆき　「空と君とのあいだに」より）


---
# IE11/Edgeへの恨みつらみ

うらみます　うらみます　あんた(IE)のこと死ぬまで

（中島みゆき　「うらみます」より）

---
## 今日、話すこと
* IE11/Edgeでハマったこと
    * 主にFirefox, Chromeと動きが異なる部分
    * Web標準仕様に載っていない部分が多く、IE11/Edgeが悪いとは限らない

---
## 今日、話さないこと
* IE11/Edgeで対応していないことが明記されている機能
    * IE11でのES6
* IE/Edgeの互換モード
* IE11が遅い


---
## 目次
* ①accept属性にファイル種類を指定しても、ファイル選択ダイアログのファイルタイプが「すべてのファイル」(Edge)
* ②拡張子が間違った画像をfile URI schemeで開くと、画像が表示されない(IE11)
* ③HTTP Status Codeが201だと、ファイルがダウンロードできない(IE11/Edge)
* ④Data URI schemeで表した画像を、ブラウザで直接で表示することができない(IE11/Edge)
* ⑤col要素のspan属性値を変更すると、画面が更新される(IE



---

## ①accept属性にファイル種類を指定しても、ファイル選択ダイアログのファイルタイプが「すべてのファイル」(Edge)

```html
<input type="file"  accept="image/png">
```


![image.png](https://qiita-image-store.s3.amazonaws.com/0/37903/0b65fb03-9f32-9780-5d0b-a7485dc4d822.png)

一応セレクトボックスの一番下に"png"が追加されていますが…

---
### 補足
* IE11,Firefox,Chrome：accept属性に指定したファイル種類が、ファイル選択ダイアログのファイルタイプ
 
https://qiita.com/yuji38kwmt/items/0bd5d95ef6b3450c85ea 参考

<p data-height="265" data-theme-id="0" data-slug-hash="yGOzMm" data-default-tab="html,result" data-user="yuji38kwmt" data-pen-title="accept属性にファイル種類を指定しても、ファイル選択ダイアログのファイルタイプが「すべてのファイル」" class="codepen">See the Pen <a href="https://codepen.io/yuji38kwmt/pen/yGOzMm/">accept属性にファイル種類を指定しても、ファイル選択ダイアログのファイルタイプが「すべてのファイル」</a> by yuji38kwmt (<a href="https://codepen.io/yuji38kwmt">@yuji38kwmt</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

---
## ②拡張子が間違った画像をfile URI schemeで開くと、画像が表示されない(IE11)

* [PNG画像だけど拡張子が"jpg"のファイルを用意](https://github.com/yuji38kwmt/static-page/blob/master/false-images/png.jpg)
* IE11で`file:///～/png.jpg`にアクセス


![image.png](https://qiita-image-store.s3.amazonaws.com/0/37903/fc6a4812-a7cf-9e72-5ef7-63c7fd109885.png)

```
DOM7009: URL 'file:///C:/Users/yuji3/Downloads/png.jpg' のイメージをデコードできません。
png.jpg
```

---
### 補足
* Edge,Chrome,Firefox：画像は表示される
* **IE11：http/https schemeでアクセスすると、画像は表示される**
    * なぜ？詳しい人教えて！
    * https://github.com/yuji38kwmt/static-page/blob/master/false-images/png.jpg

https://qiita.com/yuji38kwmt/items/7d7f76d53a52560bb33c 参考

---
## ③HTTP Status Codeが201だと、ファイルがダウンロードできない(IE11/Edge)

* そもそもStatus Codeが間違っている（正しくは200）ことに注意

```python:server.py
from flask import Flask, make_response
app = Flask(__name__)

@app.route('/download')
def download():
    resp = make_response("Hello World")
    resp.headers['Content-Disposition'] = 'attachment'
    resp.status = '201'
    return resp
```
	
![ファイルがダウンロードできない.gif](https://qiita-image-store.s3.amazonaws.com/0/37903/d788ea38-9e15-0e77-a70b-240d790682b1.gif)

---
### 補足
* Chrome,Firefox：ダウンロードできる

https://qiita.com/yuji38kwmt/items/b369abb2dab4fff4d3ca 参考

---
## ④Data URI schemeで表した画像を、ブラウザで直接表示することができない(IE11/Edge)

* ブラウザのアドレスバーに、以下のURIを入力しても、画像（小さな赤い丸）が表示されない

 
```
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==
```


![image.png](https://qiita-image-store.s3.amazonaws.com/0/37903/809323e6-dc67-044b-8f04-81215decc5eb.png)


---
### 補足
* Firefox, Chrome：画像（小さな赤い丸）が表示される

https://qiita.com/yuji38kwmt/items/74e68b1d060444d60b3c 参考

---
## ⑤col要素のspan属性値を変更すると、画面が更新される(IE11/Edge)
table要素が`border-collapse: collapse`のとき、JavaScriptでcol要素のspan属性値を**減少**させると、画面が更新されてしまう。

```html
<table>
  <col id="body-col" span="2" ><!-- jsでspan属性値を変更する -->
  <tr><td>A</td><td>B</td></tr>
</table>
```

```css
table {
    border-collapse: collapse; /* この指定に注意 */
}
```

```javascript
document.getElementById("body-col").span = 1;
//span属性値が2⇒1に変わり、IE11/Edgeの画面が更新されてしまう
```

---
### 動作結果

![col要素.gif](https://qiita-image-store.s3.amazonaws.com/0/37903/46dec090-5014-83b6-477f-1f837ed95eb5.gif)


---
### 1年前はIE11が強制終了した

* 2018年3月：Internet Explorer 11.125.16299.0 ⇒ IE11が強制終了する
* 2018年12月：Internet Explorer 11.471.17134.0 ⇒ IE11の画面が更新される

バグが改善されている。。。？

![image.png](https://qiita-image-store.s3.amazonaws.com/0/37903/43d650c8-279f-10d6-f430-d1ac8a0d11f0.png)

https://qiita.com/yuji38kwmt/items/d6d10d059677a73af651 参考






<p data-height="265" data-theme-id="0" data-slug-hash="YdpeQw" data-default-tab="html,result" data-user="yuji38kwmt" data-pen-title="col要素のspan属性値を減らす" class="codepen">See the Pen <a href="https://codepen.io/yuji38kwmt/pen/YdpeQw/">col要素のspan属性値を減らす</a> by yuji38kwmt (<a href="https://codepen.io/yuji38kwmt">@yuji38kwmt</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>


---
## Windowsをお使いの方は、お手元の環境でご確認ください



---
# 備考

---
## 実行環境

### ブラウザ(2018/12/22時点で最新のバージョン)
* Internet Explorer 11.471.17134.0
* Microsoft Edge 42.17134.1.0
* Firefox 64.0
* Google Chrome 71.0.3578.98

### その他
* Windows 10
* Python 3.6.6
    * flask 1.0.2

---
## Webブラウザシェア率：全世界 

![StatCounter-browser-ww-monthly-201711-201811-bar.png](https://qiita-image-store.s3.amazonaws.com/0/37903/470f4bac-1a02-c3c7-f060-d6c210fdf0e1.png)

* 2017/11-2018/11  
* デスクトップブラウザのみ


http://gs.statcounter.com/browser-market-share/desktop/worldwide/#monthly-201711-201811-bar

---
## Webブラウザシェア率：Japan 

![StatCounter-browser-JP-monthly-201711-201811-bar.png](https://qiita-image-store.s3.amazonaws.com/0/37903/62e4c04f-e8da-59f0-8e1b-18dfe0dce048.png)

IEの使用率が高い

* 2017/11-2018/11  
* デスクトップブラウザのみ

http://gs.statcounter.com/browser-market-share/desktop/japan/#monthly-201711-201811-bar


---
## 次のEdgeはChromiumベース

>Today we’re announcing that we intend to adopt the Chromium open source project in the development of Microsoft Edge on the desktop to create better web compatibility for our customers and less fragmentation of the web for all web developers.

https://blogs.windows.com/windowsexperience/2018/12/06/microsoft-edge-making-the-web-better-through-more-open-source-collaboration/ 引用

大企業向けのWebシステム開発が幸せになるといいなー


https://forest.watch.impress.co.jp/docs/serial/yajiuma/1157671.html 参考


---
## ロストテクノロジー Advent Calendarに投稿しました
ロストテクノロジーになって欲しいという願いを込めて…

![image.png](https://qiita-image-store.s3.amazonaws.com/0/37903/69cac2b5-5c53-4f3a-1bad-aeb3cd0580e8.png)

https://qiita.com/advent-calendar/2018/lost-technology

---
# おわり