IE対応でよく利用するhtml5shivの使用方法変更について

公開

HTML5でサイトを構築する際にIE8以下への対応でよく利用されるhtml5shiv。今まで導入方法は下記のように条件分岐コメントを利用してGoogle Code内のソースコードを読み込むように説明されていました。

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

しかし、5月14日現在ではまずzipファイルをダウンロードし、自分のサーバーにホストした上で条件分岐コメントを利用してホストしたファイルを読み込むようにと使用法の解説が変更されています。

新しい導入方法と、変更になった理由や注意点について簡単にまとめました。

新しいhtml5shivの使用方法

  1. Google Project Hostingのhtml5shivに行き、download html5shiv (zip file) をクリックしてhtml5shivをダウンロードします。
  2. ダウンロードしたzipファイルを解凍し、aFarkas-html5shiv-xxxxxx（xxxxxxは任意の文字列）/dist/html5shiv-printshiv.jsを、プロジェクトの中のjsディレクトリ...例えば/common/js/に格納します。
  3. 条件分岐コメントを利用してhtml5shivを読み込むように設定します。 
    <!--[if lt IE 9]>
<script src="/common/js/html5shiv.js"></script>
<![endif]-->
  4. ファイルをアップロードします。

なぜ使用方法が変わったのか

海外サイトZoompfの記事「html5shiv and Serving Content From Code Repositories」が発端ではないかと思われます（ちなみにこの記事は@kazuhitoさんのツイートを見て知りました。）。

記事に挙げられているポイントをいくつか抜粋すると以下のような内容です。

  • ソースコードリポジトリへのリンクは行うべきではない
  • （記事が出た時点でGitHubのソースコードと比較すると）最新のソースコードではない
  • 3分しかキャッシュされない

Google Codeでホスティングされている（バージョンの古い）html5shivとIE9.jsと併用すると、印刷時にJavaScriptのエラーが出るなどの不具合がありましたし、リポジトリへリンクすることに疑問を感じ（エンジニアとしてはもっと早く気付くべきでした...）、GitHubからダウンロードして利用しようかと考えていたところでしたので、私には正にホットな記事でした。

html5shiv.jsとhtml5shiv-printshiv.jsの違いについて

両者の違いは印刷時のサポート機能が含まれているかどうかの違いです（具体的には、onbeforeprintイベントが発火した際、すべてのHTML5要素を印刷可能な要素でラップしたり、CSSを追加したりしているようです。詳しくはソースコードを。）。

よって、印刷時のサポート機能が必要であれば「html5shiv-printshiv.js」を選択しましょう。これはマークアップやCSSの記述次第ではないかと考えます。プリントプレビューでも確認できますので必要かどうか見極めて下さい。

Google Codeのリポジトリのhtml5shivも新しくなったことに注意

リポジトリを確認すると、昨日（5月13日7時頃？）アップデートが行われリビジョン30になっています（プロジェクトホームからリンクされていないので、直リンクは避けておきます）。リビジョン29と比較すると、HTML5 Shiv pre3.5だったものがHTML5 Shiv pre3.6にアップデートされているようです。

なお、リビジョン30でコミットされたものはhtml5shiv-printshiv.jsではなくhtml5shiv.jsにあたるもののようで、印刷時のサポート機能が含まれていません。リビジョン29までは印刷時のサポート機能が含まれたhtml5shiv-printshiv.jsにあたるものだったので、Google Codeのリポジトリを読み込んでいるサイトでは印刷に不具合が生じている可能性があります。今後のバージョンアップで状況が変わるかもしれませんが、注意が必要でしょう。

補足

ie7-jsプロジェクトのファイルに関して

ie7-js - A JavaScript library to make MSIE behave like a standards-compliant browser.で配布されるスクリプトに関しても、使用法でリポジトリを参照する記述方法が記載されていますが、html5shivと同様の理由（3分しかキャッシュされないなど）により、左サイドのDownloadsよりIE7.js・IE8.js・IE9.jsが含まれたzipファイルをダウンロードして利用すべきではないかと考えます。