HTML5 勉強会@福岡 - 第17回

スマホ向けCMS開発で分かってきた注意点

赤瀬　剛

Introduction

赤瀬　剛 (@akase244)

グルービーモバイル株式会社

エンジニア

ケータイ・スマホ向けのCMS作ってます

PHP、JavaScript、MySQLとか

サーバーもちょっといじる

最初にお断りしておくと、今から話す内容よりもこっちの資料見た方が絶対勉強になります。。。

結論

スマホ用のコーディングって

結構面倒くさいです。

でも、世間では「スマートフォン対応待ったなし」

そんな状況らしい

日経BPによる

「携帯電話・スマートフォン“個人利用”実態調査2012」

国内スマートフォン普及率

2011年は9.5%

2012年は18%（前年比ほぼ倍）

2016年は70%超（シード・プランニング社の予測値）

スマホ対応の注意点－その１

「グラデーション(-webkit-gradient)」の使いすぎに要注意

1画面内に大量に-webkit-gradientの指定を行うと、特にAndroidでは画面のスクロールが出来ない程、重くなる場合があります。

感覚的な話ですが、

AndroidはCSSが遅い印象、iPhoneはJSが遅い印象。

※ちゃんと計測してません。ごめんなさい。

ところで、初代Xperia(SO-01B)をご存知ですか？

2010年の時点で56万台の販売台数を誇り、Androidの普及に一役買った一台です。シェア的にも未だに無視できない存在ですが、Androidの「ブラウザ」ってダメだねっていうイメージを植えつけた一台でもあります。

そんなんで「スマホ界のIE6」と、ボクは勝手に呼んでます。

≒

スマホ対応の注意点－その２

初代Xperia(SO-01B)に要注意

・スマホ対応に欠かせないViewportの指定が効きません。

　対策：JavaScript(zoomとか)で頑張る。

・CSS3の角丸(-webkit-border-radius)の指定を

　-webkit-border-radius: 10px;

　のように記述しても効きません。

　対策：四隅全ての指定を記述する。

　-webkit-border-top-left-radius:10px;

　-webkit-border-top-right-radius:10px;

　-webkit-border-bottom-left-radius:10px;

　-webkit-border-bottom-right-radius:10px;

スマホ対応の注意点－その３

htcの機種に要注意

Viewportの話が出ましたが、拡大縮小の可否を

決定する「user-scalable」はhtcの機種では無視

されます。

対策：拡大縮小されても崩れないデザインを心がける。

拡大縮小と同時に、portrait(縦)とlandscape(横)の対策もお忘れなく。。。

スマホ対応の注意点－その４

タッチUIに要注意

PCブラウザの常識だった以下の擬似クラスたちが全然（少々大げさですが）言うことを聞いてくれません。

a:link {プロパティ: 値;}

a:visited {プロパティ: 値;}

a:hover {プロパティ: 値;}

a:active {プロパティ: 値;}

touchstartとtouchendイベントを拾ってCSSを割り当てると良さそうだけど。。。

対策：jQuery Mobileの仮想マウスイベントを利用するのがオススメ。

jQuery Mobileには以下のような仮想マウスイベントが定義されており、

これを利用することでCSSの制御を行うことが可能です。

vmouseover:touch もしくは mouseover

vmousedown:touchstart もしくは mousedown

vmousemove:touchmove もしくは mousemove

vmouseup:touchend もしくは mouseup

vclick:touchend もしくは click(vmouseupの後に呼ばれる)

vmousecancel:touch もしくは mousecancel

具体的には以下のような感じ

$('ul li a').bind('vmousedown', function() {

$(this).addClass('active');

}).bind('vmouseup', function() {

$(this).removeClass('active');

}).bind('vmousemove', function() {

$(this).removeClass('active');

});

後は、CSS側で「.active」を定義するだけ。

上記のコーディングの何が美味しいかというと、このようにコーディングすることで、PCでもスマホでも対応可能。

（これもレスポンシブって言っていいのかな？）

スマホ対応の注意点－その５

jQuery Mobileに要注意

そんなjQuery Mobile、何もいいことばかりではありません。

正直、重いです。しかも、ロード時に結構HTML構造を破壊します。

対策：まだαリリースとのことですが、機能別の分割ダウンロード（jQuery Mobile Download Builder）が出来るようになりました。

http://jquerymobile.com/download-builder/

jQuery本体も1.8からモジュール化が可能になっているようです。

http://www.publickey1.jp/blog/12/jquery_181xss.html

http://blog.jquery.com/2012/06/22/jquery-1-8-beta-1-see-whats-coming-and-going/

スマホ対応の注意点－その６

現行のiPhone基準に要注意

iPhone3/3G/3GSはいずれも320×480

iPhone4/4Sは640×960だけど1ポイントに2ピクセル利用するため、実質320×480

だけど、そろそろ、320×480基準から脱却しないとヤバイ時期に。

・iPhone5の4インチ化

・iPad mini

・GoogleのNexus7

・AmazonのKindle Fire などなど

Retinaを代表するディスプレイの高解像度化が進み、iPhone3基準で作られた画像などは顕著にぼやけて表示されています。

対策：画像素材はPC用と変わらないくらいの品質のものを利用し、画面サイズに影響しないデザインを心がける。

一つだけ告知。

Fukuoka.phpやってます。

ご清聴ありがとうございました。