あけましておめでとうございます。本年もよろしくお願いいたします。
さて、今年の課題の一つに「複数デバイス対応」というのが私の中にあります。
PCの他にスマートフォン・フィーチャーフォン(ガラケー)・タブレットとデバイスが増え、それら全てに対応する場合が多くなりました。
今のところ、各デバイスにあわせてデザインやコーディングをしているものの、更新効率などを考えるとワンソースで対応できた方が好ましいと個人的には思う訳です。
■モニター画素数
- iPad|1024×768
- iPhone3G|320×480
- iPhone4|620×960
- Android|480×720(機種によって違います)
SP(スマートフォン)については、現状で画素数が3つある。Androidに至っては、微妙に画素数が違うから少々厄介。画素数に合わせて画像を切り替えないと、iPhone3Gを基準として制作した場合、iphone4、Androidの場合は画像がぼやけます。
そこで使用するのがdevicePixelRatio。
iPhoneG3を基準として考えた場合、iPhone4は×2、Andoridは×1.5として考えます。Andoridは機種によって様々な画素数なのですが、1.5倍が妥当。
※参考サイト:「Android端末のdevicePixelRatio」
そこで、3種の画像を用意し、CSSのmedia queryを利用してそれぞれのCSSを適用させます。
※参考URL:「スマートフォンで解像度ごとに最適な画像サイズにするdevicePixelRatioの設定」
/* devicePixelRatio=1(iPhone3~3GS)とdevicePixelRatio未対応ブラウザ */
.className {
width: 100px;
height: 50px;
background: url(/images/image.img); /* 基準となる等倍サイズの画像 */
}
/* devicePixelRatio=1.5 (Android系。現在は1.5倍を想定)*/
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
.className {
background: url(/images/image1.img); /* 1.5倍サイズの画像 */
-webkit-background-size: 100px 50px; /* WebKit */
background-size: 100px 50px; /* WebKit以外 */
}
}
/* devicePixelRatio=2 (iPhone4)*/
@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
.className {
background: url(/images/image2.img); /* 2倍サイズの画像 */
-webkit-background-size: 100px 50px; /* WebKit */
background-size: 100px 50px; /* WebKit以外 */
}
}
・・・・・面倒ですね。非常に面倒です。
なので、やり方としては、最大画素数にあわせた画像をCSSでサイズ変更して表示させる、という方法もあると思いますが、場合によっては表示が遅くなるので注意が必要です(私自身はこの方法を使ったことがありません)。
また、SPには「傾き」という動作があります。
傾けた時におかしなレイアウトにならないようにするには、この「傾き」を感知する必要があります。
※参考URL:「スマートフォンで傾きを検知するJavascript」
私自身がそうなのですが、デザイナーはjsに弱い・・・ということで、下記のTipsを利用することに。
※参考URL:「iPhoneで傾きに合わせてスタイルを切り替えるjavascript」
上記2つの方法を使うと、ある程度満足な結果が得られると思うけど、画像は最大6枚必要になるorz….
ちなみに、同じく「傾き」があるタブレットについては「iPhone Safariの固有仕様を調べてみる」を見ながら、上のTipsをカスタマイズするといいかと。
今のところ、iPadで傾けた時に問題なく表示されることが多いので、iPad用に「傾き」を検知させたことがなく、そのうちきちんと調べてblogを書く予定です。
また、PCと他のバイスの大きな違いの一つに「postion:fixedが使えない」という仕様がある。
どうしてもfixedを使いたい場合は「iScroll.js」または「Skroll.js」を利用するといいです。
私自身はiScroll.jsを利用したことがありますが、ちょっとした問題が・・・。
問題が起きた理由は、PCサイトのデザイン制作後、ワンソースでSPやiPadに対応するという後出しじゃん拳的な状況が起きたところから始まる。
PCサイトについては、お問い合わせフォームがあり、モーダルで個人情報保護方針を表示させる仕様になっていた。モーダルの選択も実装も自分ではなかったので、これがますます厄介なことになった。
iScroll.jsの場合、touchMoveイベントが無効になっているため、モーダル内のスクロールも無効となる。
これは悩んだ・・・。ひとまず、無効になっているtouchMoveイベントを復活させるとモーダル内のスクロールは復活し、postion:fixedも再現できていた。
この場合は、モーダルをやめれば良かったし、iPhoneやiPadでは別ウィンドウか同レイヤーに表示されるようにjQueryでhtmlコードを変更させれば良かったのだが、モーダル内のボタンとお問い合わせフォームが連動しているため、容易にその変更をすることができなかったorz…
で、苦肉の策がコレ。
ワンソースで複数デバイス対応するには、制作初期の段階で対応するデバイスをきちんと考えておく必要がある。
そうでないと意外なところで苦しむことにorz…
ただ、この問題が起こったおかげで、いろいろ知ることができたのがせめてもの救い。
今年は更に、多デバイス対応が加速する気配を感じる。
一昨年末(2010年)から去年(2011年)の今頃の状況を思い出すと、一昨年(2010年)末はPC/FP(フィーチャーフォン)対応。年が明ける(2011年)とPC/FP/SP対応。ただし、SPはiPhoneでちゃんと見えれば良いと言っていたのが、春頃にはXperiaにも対応してほしい、つまりAndorid系にも対応になり、年末にはiPadに対応する事案が発生した。
おそらく、今年はiPad以外のタブレットの対応も出てくるだろうなあ・・ますます実機が必要になるけど、お金がついていきませんよー(遠い目)
Webサイト制作の他にも、個人的には電子書籍やWebフォントに非常に興味がある。
今年の課題も盛りだくさんになる気配。