AndroidとiPhone両方対応するページ

Android,iPhone


ちょいとiPhoneとAndroid版のページを作ってます。
まだデバッグ終えてないけどこちら
http://moeten.info/maidcafe/iphone.php
それで気になった点とか便利だなぁって思った点があるのでメモ

  • なにはともあれiuiを使うと便利
  • safariでデバッグ。開発ツール使用するとタグの閉じ忘れなど教えてくれる。
  • iuiの際、ajaxをしたい場合は普通にアンカータグでＯＫ
  • 逆にajaxしたくない場合はアンカータグに「target="_self"」
  • ajaxで置換したい場合は「target="_replace"」
  • webkit拡張タグで3D回転は１個の軸のみ。xyzそれぞれに30度回転とかはダメっぽい。
  • Androidでgpsを使う場合はgears_init.jsが必要

そんな感じ。
safariでとりあえず確認して動けばそんなに問題ない感じです。
１冊しか持ってませんが、こちらの本が大変わかりやすいです。

iPhone Web Style

iPhone Web Style

プログラム的なメモはこちら

PHPで端末の判定。簡単バージョン

gpsの処理などで端末を振り分ける場合に便利
javascriptだけで全部したい場合はこちら

//iPhone,Androidの判定
$agent = $_SERVER["HTTP_USER_AGENT"];
if( count( explode( "Android" , $agent ) ) >= 2 ){
    $B = "Android";
}elseif(
        count( explode( "iPhone"  , $agent ) ) >= 2 ||
        count( explode( "iPod"    , $agent ) ) >= 2
        ){
    $B = "iPhone";
}

Androidでのgps利用方法

Androidでのgpsはgears_init.jsが必要になります。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"  xmlns:v="urn:schemas-microsoft-com:vml">
<head>
  <meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
  <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
  <script type="text/javascript" src="/mylib/js/iphone/gears_init.js"></script>
  <script type="text/javascript">
  function init(){
    gps = google.gears.factory.create('beta.geolocation');
    gps.getCurrentPosition( callback, handleError );
  }
  //緯度経度取得エラー
  function handleError(a) {
    alert("現在地の取得に失敗しました。電波状況の良いところで再度試してください。");
  }
  //緯度経度取得ＯＫ
  function callback(a){
    var url = "./iphone.php?m=iphone&mode={$_GET['mode']}&wlat=" + a.latitude + "&wlon=" + a.longitude;
    location.replace( url );
  }
  </script>
</head>
<body onload="init()">
</body>
</html>

iPhoneでのgps利用方法

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"  xmlns:v="urn:schemas-microsoft-com:vml">
<head>
  <meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
  <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
  <script type="text/javascript">
  function init(){
    navigator.geolocation.getCurrentPosition( callback, handleError );
  }
  //緯度経度取得エラー
  function handleError(a) {
    alert("error");
  }
  //緯度経度取得ＯＫ
  function callback(a){
      var url = "./iphone.php?m=iphone&mode={$_GET['mode']}&wlat=" + a.coords.latitude + "&wlon=" + a.coords.longitude;
      location.replace( url );
  }
  </script>
</head>
<body onload="init()">
</body>
</html>