December 12, 2011

html5shim vs html5shiv

JavaScript Advent Calendar 2011 (オレ標準コース) 12 日目の id:t32k です。去年も参加しましたがなんでもありと聞いて今年も懲りずに参加！

はじめに言っておきますが、html5shim も html5shiv どっちもまったく同じです。違いなんて無いので、こんなことに頭を悩ませる暇があったらさっさとコードでも書いてろ！以上！うんこ(・∀・)!

そんなこと言っても世の中結果じゃない、過程が大切だと思うんだ先生！ってことで今回は調べてみます。

html5shi(m|v)、めんどくさいので以下 html5.js は”HTML5 IE enabling script”の名の通り、IE8 以下でarticleなどの新要素が正しく認識されずスタイル(CSS)がうまく適用されない問題を解決しそれらのブラウザでも利用可能にしてくれます。

document.createElement("article");

こんな感じに DOM で要素を生成すると、IE でも HTML5 の要素にスタイルを効くようになります。実際の html5.js はもっと複雑だけど基本的にはこんなことをやってます。詳しいことは下記スライド参照で。

HTML5.js の中身を見てみよう by @kamiyam

What’s the difference?

そろそろ HTML5 でサイト作ってみっかーということでいろいろググってたら前述の問題に引っかかり、さらにググってみると同じ機能なのに名前が違う 2 つのスクリプトがあることを認識たのが今回の経緯です。

Google Codeにホスティングされている2つのコードを見比べても全く同じです。謎です。

Common question: what’s the difference between the html5shim and the html5shiv? Answer: nothing, one has an m and one has a v - that’s it.

と思ったら、似たような疑問を持つ人も多いのかよくある質問が用意されていました。

”違いなんて無いよ！片方は m で、片方が v なだけ。それだけ！”

&lt;!--[if lt IE 9]&gt;
 &lt;script src="/common/js/html5shiv.js"&gt;&lt;/script&gt;
&lt;![endif]--&gt;

※最近では Google Code にホスティングされているものを参照するのではなく、自鯖に落としてきて使用することが推奨されています。

お… また敷かれたレールを疑問も持たずに走ってればいいんだよ的な回答ですね。そんなの求めていないんだ！僕は！じゃーなぜ 2 つあるんだよ！どっち使えばいいんだよ！と遅れてきた反抗期によって僕はあきらめません。

まずは単語の意味から…

【名詞】【可算名詞】 (ものを水平にしたり，すき間などに入れる)詰め木[金] shim の意味 - 英和辞典 Weblio 辞書

【名詞】【可算名詞】《米俗》 (ジャック)ナイフ shiv の意味 - 英和辞典 Weblio 辞書

ふむふむ、”shim” の方は詰め木ということで足りない機能を補完（カバー）する意味合いでも取れて、polyfillみたいな感じですかね？。”shiv” はナイフ…どーゆこっちゃ＞＜

The Story of the HTML5 Shiv

行き詰まり感たっぷりだったところに、Modernizr の開発者でも有名な Paul Irish さんが、The Story of the HTML5 Shiv というドンピシャなタイトルの記事をあげていました。

この記事の前半部分をざっくりまとめてみると、

2007 年くらい ■ developers: 新要素に CSS 効かなくね？やばくねｗ？あれれｗｗ？

2008 年
■ Sjoerd Visscher（初めてこのテクニックを披露した人）： createElement したらええで〜ｗｗｗ

■ Ian Hickson（HTML5 のエライ人）：これマジパネェｗｗｗこれ使ったら IE7 の互換 shim 簡単に作れるわーｗｗｗｗ

■ John Resig（jQuery 作った人）： CSS 効かせる方法、HTML5 Shiv って名前つけたわーｗｗ（shim だけど）

2009 年 ■ Remy Sharp（初めて html5.js をディストリビュートした人）： HTML5 Shiv のやつ Google Code にホスティングしといたわーｗｗ

2010 年 ■ Remy Sharp： html5shim でミラー作っておいたわーｗｗｗ

だいたいこんな感じですな。

Shiv?

ここで問題なのは、なんで Remy Sharp さんあとから html5shim のミラーを公開したのか？ということですね。

“shiv” って単語がコンピューター用語で言う互換性のため回避策といった意味が一般認識されていなかったのではないかという仮説が僕の中で湧いてきました。

試しにGitHubで “shiv” でレポジトリ検索をしてみると 17 件、“shim”で検索すると 93 件ヒットしました。”shiv” に関しては html5shiv に関しての内容ばかりで、他のものも新しいライブラリです。

2008 年の John Resig 氏のエントリのコメントにおいても、「shim じゃなくて shiv?」といった内容が見受けられます。

しかし、Wikipedia のShim (computing)の項目には、”a shim (from shim) or shiv is a small library which…“とまぁなんか互換性のため回避策の意味として記述されています…

え、そうなの？なんでじゃ！ということで、例によって反抗期の僕にはwiki の変更履歴を見てみるとありました。21:20, 16 November 2011‎ までは Shim (computing)の項目に ”shiv” って単語はなかった。なんだ最近、追記されてんじゃん！

まぁ少なくとも 2008 年の John Resig が書いたエントリの時点では “shiv” に「互換性のため回避策」といった意味がなかったのではないかと推測できます。

Conclusion

で結局、ここからは妄想になるんだけど、

2008 年 ■ John Resig（jQuery 作った人）： CSS 効かせる方法、HTML5 Shiv って名前つけたわーｗｗやってることは shim だけど、shiv の方が武器っぽくって強そうじゃんｗｗｗドヤｗｗ

■ developers1: shiv じゃなくて shim だろｗｗワロスｗｗｗ

■ developers2: html5shiv いいねｗｗｗｗｗイカスｗｗｗｗｗ

2010 年 ■ Remy Sharp： html5shiv でホスティングしたったーけどｗｗｗｗ html5shim の方が意味的に分かりやすいし一応こっちも作っとくかーｗｗ

そんな経緯ですかね…”なぜ”そうしたのかって部分が言及されて（見つから）なかったので、あくまで上記は僕の妄想ですからあしからず。知ってる人いたら教えてください。

てか、Modernizr にバンドリングされてるし、そっち使ったらいいんじゃないっすかねー（by @5509）

What’s the difference?

The Story of the HTML5 Shiv

Shiv?

Conclusion

参考