実例からみる

Android向けサイトの基本とはまりポイント脱出法
しぎょう

執行だいすけ

大介

自己紹介
しぎょう

名前：執行だいすけ

大介

ビービーメディア

所属：BBmedia 株式会社
フロントエンドエンジニア
・受託案件
・社内勉強用Webアプリ：@mattari̲panda

携わった事例
BBmedia

カルビー
ポテトチップス様

セキスイハイム様もくじ✤ Android向けサイトの特徴✤ 制作＆確認環境✤ HTML＋CSSのはまりポイント✤ JavaScriptのはまりポイント

Android対応サイトの特徴

受託案件の特徴✤ iPhone向けサイトありき✤ 最近では「Android対応」必須✤ そもそも「ほとんど同じでしょ？」と思われている「従来の携帯サイトみたいなもんです」

受託案件のポイント✤ 弊社では通常Android2.1˜対応✤ リニューアル案件などでは、アクセス解析の結果を見て、ターゲットを設定するのも良い✤ 実装者はiPhoneとの違いやはまりポイントを理解しておこうiPhoneとは似て非なるもの
それがAndroid≠

二つの最大の違い✤ 端末の性能✤ 画面サイズと解像度

参照リンク：http://d.hatena.ne.jp/itog/20110601/1306897551

二つの最大の違い✤ フォント・日本語のボールドが効かない
iPhoneAndroid

二つの最大の違い✤ フォント・漢字が少し変iPhoneAndroidどうすることもできないので理解してもらうAndroid標準搭載
ブラウザー「ブラウザ」✤ 「ブラウザ」は「Chrome」ではない≠

Android標準搭載
ブラウザー「ブラウザ」※Android2.2˜✤ ブラウザからファイルのアップロードが可能✤ Flash Player対応（アプリとしてダウンロードが必要）

制作＆確認環境

制作環境
制作：Macが何かと便利、Windowsでも問題はない（iOSシミュレーターも使用可能）確認環境
確認：基本Chrome+実機
実機がない人にはAndroidエミュレーター
【6/20追記】
エミュレーターの導入・設定に関してはたにぐちまことさんのこちらの書籍に詳しく解説があります。

実機検証★ 一部の機種で、ベーシック認証のページがおかしくなる場合あり（IS03など）★ 同じAndroidのバージョンでも機種によって違いがある最終的には実機検証が重要★ たくさんあるほうが良いが、バージョン一つにつき1台くらいでも十分★ フリーランスの方などは、実機を持っている知り合いにお願いするのも一つの手★ クライアントの使っている端末を聞いておこうここまでのまとめ★ iPhoneとの違いを事前に理解してもらう★ 「ブラウザ」の特徴をつかめ！
★ 実機確認重要

HTML＋CSSのはまりポイント
http://bit.ly/pnd-lp16

数字の羅列<meta	 name="format-detection"	 
content="telephone=no">	 
上記のメタタグを入れていないと、数字の羅列が電話番号として認識される

http://bit.ly/pnd-lp16

数字の羅列<a	 href="tel:117">117</a>

前述のメタタグを入れて、電話番号としての機能を持たせたいものだけに、アンカータグで機能を付けると良い

http://bit.ly/pnd-lp16

タップハイライトカラーの動き
タップハイライトカラーとは「-webkit-tap-highlight-color」
リンク要素などをタップしたときに出る
緑やオレンジの枠のこと
Transformで動かしている要素を内包しているリンク要素をタップすると、、、
動画：http://www.youtube.com/watch?v=wJEuappWoEA

タップハイライトカラーの動き<a	 class="valueTitle">
よくあるボタン<span	 class="titleArrow">▼</span></a>/*	 CSS	 --*/a{-webkit-tap-hightlight-color:rbga(0,0,0,0);}
動画：http://www.youtube.com/watch?v=4KjlPF2cDPw

CSS3の問題
AndroidでもCSS3を使うことが可能
ただしこのような点に注意✤ 接頭辞（ベンダープレフィックス）が必要✤ 特殊な記述が必要

✤ 接頭辞が必要
border-radiusAndroid2.1以上

Android1.6

✤ 接頭辞が必要
background-size
Android2.2以上

Android2.1以下

✤ 接頭辞が必要
box-shadow
Android2.1以外

Android2.1のみ

✤ 特殊な記述が必要-webkit-box-reflect
iPhoneAndroid✤ 特殊な記述が必要-webkit-box-reflect/*	 グラデーション	 --*/
.class{-webkit-box-reflect:below	 -12px	 
-webkit-gradient(liner,topleft˜);}/*	 画像	 --*/.class{-webkit-box-reflect:below	 -12px	 
url(../img/reflect̲mask.png);}

動画の再生✤ 動画形式・コーデックの問題
Flashで再生するとシンプル
videoタグ
iPhoneFlash
PlayerAndroid(2.2˜)JavaScriptのはまりポイント

ランドスケープモード対応
端末を横に向けた状態を「ランドスケープモード」と呼ぶ
Androidでは機種によってまちまちの動きをするので、JavaScriptで制御ランドスケープモード対応
動画：http://www.youtube.com/watch?v=srsCN6GQotU

ランドスケープモード対応
if(̲asAndroid){	 	 window.addEventListener('resize',	 	 setContentsWidth,	 false);	 	 setContentsWidth();	 	  function	 setContentsWidth(){	  	  var	 setScreenWidth	 =	 $(window).width();	  	  var	 zoomParcent	 =	 Math.round	 	 	 	 	 ((setScreenWidth/320)*100);	  	  $('html').css('zoom',zoomParcent	 +	 '%');	  	  return	 false;	  }}resizeイベントの挙動
さきほどのランドスケープモード対応で使った「resize」イベント、少し注意が必要
動画：http://www.youtube.com/watch?v=spD5F7ov3VE

Androidの「resize」イベントは予期しないときに行われるので注意touchイベントの挙動.addEventListener("touchstart",	 	 
startHandler,	 false);.addEventListener("touchmove",	 	 
moveHandler,	 false);.addEventListener("touchend",	 	 
endHandler,	 false);
スマートフォンのJavaScriptには「touch」
イベントが用意されているが、Androidでは少し癖があるtouchイベントの挙動
動画１：http://www.youtube.com/watch?v=14PWM6uW8Yg
動画２：http://www.youtube.com/watch?v=6vBAEhBOo4A
動画３：http://www.youtube.com/watch?v=s6c3n7IjKuY「touchmove」は機種によって挙動が異なるので複雑な処理をさせないほうが無難

まとめ★ CSS3は接頭辞を付けよう（付けないのも書く）★ JavaScriptは特にはまります
できれば余裕を持った工数を★ 実機確認超重要ご協力いただきました■Rochelimit：横田東母子さん
Twitter ID：@tobotoboto■underHat ：平澤隆さん
Twitter ID：@hiraちょっとお知らせ
弊社BBmediaでは「フロントエンドエンジニア」職を募集しております。

「スマートフォン案件やりたい！」というかた、ぜひお声かけください。
求人サイト：http://www.moreworks.jp/company/bbmedia/recruit/2.html

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