てきとうなさいと。べぇたばんはHTML5対応です！

こんにちは。てきめんです。html5jのメーリングリストを見てみたら、なんと13日目が開いているそうなので、早速書いてしまいましょう。改めましてよろしくお願いします。

このページは、HTML5 Advent Calendar 2015の13日目の記事です！

HTML5で作ったこのさいと

ぼくのさいとは、HTML5対応になっています。これは作成したかなりはじめの2010年ごろにはそうなってました。そうなってたはずです。たしか。git-log見てみましたが、2011年の4月とかになってましたが、その前からあったので多分そうです。

Internet Explorer 7〜10も動くはずです！

ぼくのサイトは、当時HTML5の環境の検証という目的も兼ねていたので、Internet Explorer6から9に対応させるというのは必ずやらなければならないことでした。その上で業務で使えるのかどうか判断するために。

そして、このサイトはInternet Explorer7〜10に対応させることに成功したのです！えっ、6はどうしたって！？…一部だけ動くけど捨てろ

html5.js

各バージョンのInternet Explorerに未対応のHTML5特有のタグを認識させるために、html5.jsを使っています。コレのおかげでarticleタグなどが使えるようになっています。

このさいとの画像ビューワー

自作jQueryプラグインでできております。FullScreen APIも使っております。ためしてみてね。

https://github.com/youkidearitai/tekitohcanvas

FullScreen APIはInternet Explorer未検証ですが、以下のリンクになります。見てみてね。

http://tekitoh-memdhoi.info/views/584

excanvas.js

canvasタグを使ったビューワーをjQueryプラグインで作っていましたが、Internet Explorerに対応させるために使っています。コレのおかげでcanvasビューワーが7以降で動きます。ただし、7はかなりもっさりです。

CSS3 PIE

Internet Explorer6〜9でborder-imageを対応させるために、CSS3 PIEを使っています。これは、エレメントビヘイビアという機能を使って、擬似的にCSS3の機能が使えるようになっていますが…後述する理由でけっこう大変な事になってしまいました。

http://css3pie.com/

border-image

このさいとを作る際に一番きつかったのがborder-imageです。Internet Explorerでは対応していないこれを、わざわざInternet Explorer6〜9まで対応させていたのです。

そしてInternet Explorer10でようやくHTML5標準だ！やった！と思ったら、なんとborder-imageが使えなくなっていました。その理由はエレメントビヘイビアが使えなくなってしまったことで、PIEが対応できなくなったことに加え、border-imageが対応していなかったことです。

これはコマッタということで、何か解決策を探したところ、最終的に落ち着いたのが「IE9モードでIE10をうごかす」でした。以下の様な感じです。

<meta http-equiv="X-UA-Compatible" content="IE=9">

これで、Internet Explorer10で動くようになりました。ちなみに、Internet Explorer11になると標準のborder-imageが使えるようになりました。やっとです。めでたしめでたし。

その苦しんだ記録は以下ページになります。

http://tekitoh-memdhoi.info/views/346

もういらないよねこの技術！

2015年ももうそろそろ終わりに近づいているわけですから、このサイトのこんなへんてこな技術はもういらないというか、役に立たないことを祈念しております。よろしくお願いします。

2015/12/22 17:51