「html5shiv.js」で HTML5 の新要素を古い Internet Explorer(IE8 以下)に対応させることにしました

HTML5 勧告

2014年10月28日、HTML の最新規格「HTML5」がワールド・ワイド・ウェブ・コンソーシアム(W3C)から勧告されました。1999年の「HTML 4.01」から約15年ぶりとなる規格更新になります。

HTML5勧告–オープン・ウェブ・プラットフォームの重要なマイルストーンを達成

HTML5勧告–オープン・ウェブ・プラットフォームの重要なマイルストーンを達成

すでに何年も前から、いろんなところで HTML5 の話題は盛り上がっていたので、この度の最終勧告は「いまさら」感がありましたが、これでようやく1つの区切りとなったわけです。

主要なブラウザの最新版は HTML5 に対応

Internet Explorer 8 以下は HTML5 に未対応

2014年12月現在、国内の主要なブラウザである、

  • Google Chrome
  • Internet Explorer(以下 IE)
  • Safari
  • Firefox
  • Opera

などの最新版では問題なく HTML5 に対応しています。しかし、IE8 以下のバージョンは未対応です。というのも、HTML5 で採用されることになった新要素「section」「article」「aside」「header」「footer」などは、古い IE では認識されないからです。

2014年の IE8 のシェア

たとえば、2014年6月のマイナビニュースでは IE8 のシェアは21.2%で、

バージョン別に見るとMicrosoft Internet Explorer 8.0のシェアが21.25%で1位。先月よりもシェアを増やしており、バージョン別ブラウザとしては高いシェアを持ち続けている。Microsoft Internet Explorerはこれに11.0、9.0、10.0が続いている。最新の11.0へ移行する傾向は弱くなり、8.0が強い存在感を示している。(IEの増加傾向続く – 6月ブラウザシェア | マイナビニュース

とありました。11月の発表では15.11%に減少していますが、それでもまだ全体の2位をキープしているようです。

バージョン別に見るとInternet Explorer 11およびInternet Explorer 10、Internet Explorer 9がシェアを増やし、Inetnet Explorer 8がシェアを減らしている。Internet Explorerはより新しいバージョンへの移行が進んでいることがわかる。(IEとSafariが増加、ChromeとFirefoxが減少 – 11月ブラウザシェア | マイナビニュース

いまだに IE8 の利用者が多いのは、

 IE8はWindows 7に標準装備されているため、Windows 7のシェアの高さがIE8のシェアとつながっていると考えられる。また、現在でもOSシェアの3割を握るWindows XPにはIE8までしか対応していない。これもIE8のシェアが高く、IE9のシェアが低い一因かもしれない。(ASCII.jp:世界のトップシェアはChrome! IE天下の日本は少数派 (2/2)|高橋暁子の「意外と知らない!? 業界ランキング」

とあるように、Windows XP の利用者が最近まで多くいたこと(サポートは4月9日に終了)、最新のバージョン 8 がイマイチなことで、7 のままでいるユーザーが多いことが理由でしょうか。

セキュリティ面から考えて、ブラウザだけでも最新版にすべきだとは思いますが。

対応策

IE8 以下では、未知の要素があると、正しい DOM(Document Object Model)ツリーが構成されません。そこで、HTML5 の新要素を正しく認識させるために、JavaScript を利用した2つの方法が効果的です。

  • 新しい要素ごとに「document.createElement(‘要素名’);」のように指定する
  • 「html5shiv.js」を利用する

HTML5 に合わせるようソースコードを自分で書くことも可能

JavaScript を使用して新しい要素ごとに「document.createElement(‘要素名’);」のように指定すると、古い IE でも新要素が認識され、スタイルシートを適用することができます。

ただし、この方法をとると、印刷時に表示が崩れてしまう可能性が拭えません。そのため実務レベルではあまり利用されないようです。

「html5shiv.js」を使えば簡単に対応させられる

たくさんの人たちが検証を重ねて、不具合の出ないオープンソースのソースコードが公開されています。「html5shiv.js」を利用することをおすすめします。

だれにでも自由に利用できます。公式ページからソースコードをダウンロードして、JavaScript ファイルとしてサーバーにアップロードし、古い IE でアクセスされたときにだけ読み込むように指定します。

「html5shiv.js」で HTML5 に対応させる方法

では、その手順を書いていきます。以前はこちらの公式ページにホスティングされていました。

Google Project Hosting

HTML5shiv – Google Project Hosting

しかし、現在では「GitHub」のページに移されていますので、そちらでファイルをダウンロードします。

aFarkas html5shiv · GitHub

aFarkas/html5shiv · GitHub

画面右下にある「Download ZIP」をクリックをすれ、「html5shiv-master.zip」ファイルがダウンロードされます。

ダウンロードしたファイルを解凍して、「dist」フォルダにある「html5shiv.js」を利用します。他にもファイルはありますが、基本的にはこれでいいでしょう。「printshiv」というのは印刷に対応したファイル、「min」というのは圧縮済みのファイルです。

次に、いまの「html5shiv.js」ファイルをサーバーにアップロードしてください。

続いて<head>…</head>内に以下のコードを記述します。

相対パスの指定はサイトに合わせて変更してください。

<!—[if lt IE 9]>…<![endif]—>

というコメントで「IE8 の場合にだけ読み込ませる」ようにしています。これで作業は完了です。とくに HTML を変更する必要はないので簡単ですね。

さいごに

HTML5 の構文チェックツールは以下のページで紹介しています。こちらも参考にどうぞ。

HTML5 の構文チェック(Validation)に利用したサービスやツールなどのまとめ | かっぱのWordPress入門ブログ

当ブログでは、毎日ほんの数%ですが、IE8 でアクセスされています。その方々に不便を感じさせないようにするために今回対応してみました。ただし、おそらく近い将来、IE8 以下を使うことはなくなりますので、いずれこの設定はやめにすると思います。

 

IE に限らず、古いバージョンのブラウザを使うことは推奨されません。HTML5 への対応がされないだけでなく、セキュリティ上の問題もあります。できれば、この機会に IE 最新版をインストールされてはいかがでしょうか?

Internet Explorer のダウンロード – ブラウザー

Google Chrome は以前、NHKテレビの特集(ホワイトハッカーの回?)で、2週間に1回の頻度で自動的にバージョンアップしていると紹介されていました(暴走するサイバー攻撃 – NHK クローズアップ現代)。Google さん、やり過ぎやで。

まあ、ここまで頻繁でなくとも、常に最新版にしておくことは大事ですね。

 

HTML5 については以下の書籍が参考になります。

関連記事

自作 WordPress テーマのためのメモ

前回のところから、もうすこしおもしろいデザインにしたいと思って、いろんなサイトデザインを調べて見ることにしました。 とくに参考になったのが、 Themegraphy – WordPressテーマギャラリー Media Queri…

新しく自作 WordPress テーマに変更しました

なんとか、完成にまでこぎつけました。 昼にテーマのファイルをアップロードして、変更してみたら、いろいろ表示に不具合が発生して、そのときに訪問された方にはご迷惑をお掛けしました。 ページによって新テーマと旧テーマの表示が違っていて「なんでやろ…

Google Chrome デベロッパーツール「要素の検証」を利用した HTML と CSS の学び方(素人向き)

素人による学び方 HTMLやCSSを学ぶ方法はいろいろあるとおもいますが、基本的なサイト作成の教科書を読んだあと、わたしは中級レベルの本をじっくり読むようなことはしていません。わたしがやったのは以下の方法です。 興味を持ったサイトのデザイン…

Google の「モバイル フレンドリー テスト(Mobile-Friendly Test)」に合格して検索結果に「スマホ対応」ラベルを表示させよう

Google Chrome の検索結果に「スマホ対応」のラベルが付くようになった このところ Google はモバイル向けのツールを多く提供してきています。またモバイル端末で Google 検索をすると、タイトルの下に灰色の文字で小さく「ス…

【マルチデバイス対応】 WordPress で作ったサイトをメディアクエリー(Media Query)とユーザーエージェント(UA)による判別でモバイル端末に最適化する方法

マルチデバイスに対応したサイトにする マルチデバイスに合わせた対応をする方法はいろいろありますが、今回は「レスポンシブWebデザイン」で使われる主要な技術のひとつである「メディアクエリー(Media Query)」と、「ユーザーエージェント…