RailsのIE8~対応でやったことまとめ 2017

IE9まででいいやと思っていたらIE8対応が必要になったので頑張った軌跡

# IEどこまで対応するか問題

※ 要アップデート = プリインストールされているバージョンではない
※ 完全対応 = プリインストールされているバージョンである

- IE6
    - 難易度★★★★★★★★★★
    - Windows 2000まである程度対応したい場合(要アップデート)
- IE7
    - 難易度★★★★★★
    - **Windows Vista以降に完全対応したい場合**
- IE8
    - 難易度★★★★★
    - Windows XPまである程度対応したい場合(要アップデート)
    - **Windows 7以降に完全対応したい場合**
- IE9
    - 難易度★★★
    - Windows Vistaまである程度対応したい場合
- IE10
    - 難易度★
    - **Windows 8以降に完全対応したい場合**
- IE11
    - 難易度★
    - Windows 7まである程度対応したい場合(要アップデート)
    - **Windows 8.1以降に完全対応したい場合**
- Edge
    - 難易度★
    - **Windows 10以降に完全対応したい場合**

参考
[各Windows OSで利用できるIEのバージョンを知る](http://www.atmarkit.co.jp/ait/articles/1405/30/news092.html)

# Internet Explorer環境構築(Mac)

[Parallels](https://www.parallels.com/)をインストール(2週間トライアル)
以下のWindowsとIEが無料でインストールできる(各インストールに1時間弱かかる)

- Windows 7 - IE 8
- Windows 7 - IE 9
- Windows 7 - IE 10
- Windows 8 - IE 11
- Windows 8 - Edge


# js問題


### jQuery 1.12.4

IE8対応の最終バージョンをダウンロード
https://code.jquery.com/jquery/#jquery-all-1.x

### Lodash 3.10.1
IE8対応の最終バージョンのRails gem

```
gem 'lodash-rails', '~> 3.10', '>= 3.10.1' #for ie8
```

### riot.js

諦めた

### DateでtoISOString()使えない

https://stackoverflow.com/questions/12907862/

### Adobe Typekit使えない問題

IEのバージョンに応じてコメントアウトする

```
<!--[if (gte IE 9)|!(IE)]><!-->
<script src="https://use.typekit.net/rjv5ste.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>
<!--<![endif]-->
```

これで`IE9未満`or`IE以外`のブラウザのみif内のブロックが実行される。
詳しくは以下。
https://ja.wikipedia.org/wiki/%E6%9D%A1%E4%BB%B6%E4%BB%98%E3%81%8D%E3%82%B3%E3%83%A1%E3%83%B3%E3%83%88

### .filter()とか.reduce()とか.map()とか使えない問題

他の書き方に変えるか諦めて機能を省略する。
デバッグするMPが足りなかったので機能を省略した。

```
if (userAgent.indexOf("msie") != -1) {
  if (appVersion.indexOf("msie 6.") != -1) {
    // IE6
  } else if (appVersion.indexOf("msie 7.") != -1) {
    // IE7
  } else if (appVersion.indexOf("msie 8.") != -1) {
    // IE8
  } else {
    // IE9以上かつIE以外のブラウザ
  }
}

```

どこかから引用させてもらったのですが履歴を辿っても見つからなかった...すみません。

# HTML/CSS問題

### html5の要素認識されない問題

[html5shiv](https://github.com/aFarkas/html5shiv)

### メディアクエリ認識されない問題

[css3-mediaqueries-js](https://github.com/heathcliff/css3-mediaqueries-js)


### ~~見た目問題~~

重くなったり画面遷移がうまくいかなかったり不自然だったので最終的には外しました

- 透過しない
- 角丸にならない
- etc...

[ie9-js](https://github.com/mylovecompany/ie9-js)

### SVG使えない

PNGに差し替えた

### flexbox使えない

[flexibility.js](https://github.com/jonathantneal/flexibility)

### background-size使えない

基本使わない方向で調整した。

色々やり方はあるみたい。
https://qiita.com/SotaSuzuki/items/03af307ae70a6025da41

### transform使った中央寄せのCSS使えない

transformを使わない中央寄せスタイルに直した

```
position: absolute;
width: 100px;
height: 100px;
left: 50%;
top: 50%;
margin-top: -50px;
margin-left: -50px;
```

こういうやつ

### その他プロパティ

- 見た目が変な所を中心にCSS3を使っている箇所を書き換えた
- 機能に問題ない範囲で `display:none` した

参考：
http://webdev.jp.net/ie8-css-impossibility/


# config.assets.js_compressor問題

圧縮後のjsがIE8でうまく読み込めなかったので対応。
一般的にはstaging/production環境でしか再現しない系なのでリリース前に要確認。
`config/environments/production.rb`または`config/environments/staging.rb`の

```
config.assets.js_compressor = :uglifier
```

をuglifier以外のコンプレッサーに変える。yuiなどいくつか試しましたが`Google Closure Compiler`を`SIMPLE_OPTIMIZATIONS`モードで圧縮するとうまくいった。

```
gem 'closure-compiler', '~> 1.1', '>= 1.1.12'
```

Gemfileに追記してbundleして

```
config.assets.js_compressor = Closure::Compiler.new(compilation_level: 'SIMPLE_OPTIMIZATIONS')
```

こんな感じに指定した。