2009-08-12

今日気になったページ

メモ | 22:39 |

safari(css3)関係のメモでっす。

http://gihyo.jp/assets/files/design/feature/01/css3-approach/0003/demo-apple-flip/demo-apple-flip.html

http://hisasann.com/housetect/2009/03/webkittransformcss.html

http://mydailyphoto.com/blog/iphone-safari-flick-navigation/

http://paulbakaus.com/lab/css/flip/

Android,iPhone用ページを作成するにあたっての注意点

Android,iPhone | 20:55 |

Android,iPhone用ページを作成するにあたっての注意点

ちょいとAndroidとiPhone用のページを作っているのですが、解像度もブラウザも一緒だからあまり気にしなくていいのかなぁって思ってたそんなことはなかったのでメモ。

iPhoneでのsafari

Androiでのsafari

レイアウトが崩れてる！！

原因は単純でAndroidの場合は右のスクロールバーの横幅分だけ減ってます。６ピクセル。

これから両方に対応したページを作ろうかなぁって思っている方は覚えておいたほうがいい感じ。

せっかくなので表示される解像度を表にしてみました。

機種	横	高さ
Android	314	429
iPhone	320	356

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

Android,iPhone | 21:02 |

ちょいと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

作者: 株式会社FEYNMAN 正健太朗,川畑佑介
出版社/メーカー: ソフトバンククリエイティブ
発売日: 2009/02/27
メディア: 大型本
購入: 2人クリック: 71回
この商品を含むブログ (4件) を見る

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

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>