スマホ対応、IE8対応

2012/5/29 [17:43:43] (火)

この雑記帖。こないだは、IEはもう止め止め、ここはHTML5の実験にする、とか言ったんだけど、現実的にはIE8はまだまだ全然主流で、どこかの記事では、日本でのシェアは60%程度で、圧勝。ここのような辺境のブログのアクセスログを見ても、IE8は無視できないのでありました。
てことで、検索してみたら、ぞろぞろ出てくる、HTML5のIE8対策。WEB制作会社などは死活問題。クライアントとか、声のでかいだけの上層部に振り回されて、現場は阿鼻叫喚吐血の図、というのが想像に難くない。心中・胸中お察しします。
とりあえず、ここも対応できるなら対応するに越したことないよね、ということで。
html5で書いたサイトをie8にも対応させる。

スタイルシートで新要素をブロック要素にする。
article,aside,canvas,details,figcaption,figure, footer,header,hgroup,menu,nav,section,summary { display:block; }
グーグルのjavascriptを読み込ませる
https://html5shiv.googlecode.com/svn/trunk/html5.js
こいつは、html5以降の新要素をcreateして認識させる…て、よくわからんので、使い方としては呪文でよろしい。

さらにhtml5とは違うけど css3で追加された角丸などを ie8 に適用するのに
https://github.com/lojjic/PIE/downloads
PIE.htc というのをダウンロードして、サーバーのどこか適当なところに置く（わたしは css と同じ場所に）
そしたら、角丸を使っているところすべてにいちいち
behavior:url("PIE.htc"); position:relative;
を書いていく。PIE.htcのurlは呼びだされるページからの相対パスか、絶対パス。

以上で、html5とcss3をie8に対応させることができた、かな。

スマホ対応も探してみた。
https://dev.screw-axis.com/doc/jquery_mobile/

いや、いまどき、スマホのリクエストが多いので、ちょっと勉強も兼ねて、というスケベ心満載。
jquery.mobileというフレームワーク（？）を使えばあっさりさっくり。これ、ほとんどブロック。昔懐かしの電子ブロックのようなもの。用意されている部品をマニュアル通りに書いていけば、PC版のサイトをあっさり短時間でモバイル、スマホ対応にできてしまう。

スマホに搭載されるブラウザに対応イコールwebkit対応なので、なにもこのフレームワークを利用しなくても、HTMLとCSSを書けばいいんだけど、このフレームワークは、いわゆるスマホのお作法・流儀・デザイン・エフェクト・UIを提供してくれてる。専用アプリ同様の風味なのだ。
ここ、すごく大事なところだと思っていて。
PCとスマホなどのモバイルとでは、見ることになる情報が同じでも、ユーザーの距離感が違う。肌感覚とかいうと胡散臭いけど、対デバイスの距離というか。
なので、PC版をそのまま持ってきても違和感がつきまとう。弱ったなあ、と思ってたところにこのフレームワーク。
今日、それこそ2時間ほど眺めてただけで、とりあえずこの雑記帖のスマホ版をでっち上げることができた。細かいところはまだこれからいじるとしても、2時間程度で移植できたということが、このフレームワークの凄さだなあ。
文字数の制限なんか動的にプログラムでごそごそやってたのを面倒みてくれるし、1pxの影なんてcssでうんざりしてたのを面倒みてくれるし、プログラム的なところもデザイン的なところも両方ともフォローしてくれてる。
いやもう、今日、絶賛。

» ローカル環境で電子書籍を作る、Macアプリ・Windows版ツール 「かんたんEPUB3作成easy_epub」

»電子書籍制作代行についてはこちら