jQueryMobileを使ったスマートフォンなサイトを公開しました


最近の流行のjQueryMobileを使って、自分のサイトもスマートフォン化しました。
萌店インフォ for スマートフォン
PCからはSafariで見るとそれっぽく見れると思います。

作ってて思ったこと

h1タグ等はデザインされていない
自前でCSS3なデザインをするかdata-theme="b"とかを指定する
buttonをいっぱいおくと重くなる
必要最低限に配置。リストの中のリンク(href)はサムネイル画像に当てるとスクロール動作が早いかも?
ajaxリンク先がphpな場合、うまく認識してくれない
絶対パスを指定する。NG)index.php?hoge=1 OK)http://hoge.jp/index.php?hoge=1
data-transition="flip"の動作が端末によって異なる
androidでは平面回転になってなんだか重いイメージなので注意。
「さらに10件読む」などに使うiuiにあったtarget="replace"がない
自前でajax部分を作らないといけないっぽい。この辺?

現在位置から検索

以前はiPhoneとAndroidで端末分けしていたのですが、もうちょっとシンプルに書いてみました。

<!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="gears_init.js"></script>
  <script type="text/javascript">
  //緯度経度取得
  function init(){
      var gps = navigator.geolocation || google.gears.factory.create('beta.geolocation');
      gps.getCurrentPosition(updatePosition, handleError,{enableHighAccuracy: true});
  }
  //緯度経度の表示
  function updatePosition(position) {
      var lat = position.coords.latitude  ||  position.latitude;
      var lon = position.coords.longitude ||  position.longitude;
      alert( lat , lon);
  }
  //エラー処理
  function handleError(positionError) {
    alert('Attempt to get location failed: ' + positionError.message);
  }
  </script>
<body onload="init()">
</body>
</html>

参考リンク

はじめてのjQueryMobile | Mach3.laBlog
トグルボタンなど基本的な説明
jQuery Mobile リファレンス的なもの - へっぽこプログラマーの日記
リファレンス。表にまとまっていてどういったプロパティがあるのか分かりやすい。
jQuery Mobile使用時によく使いそうなマークアップのリストと動作サンプル - かちびと.net
アイコンとテーマとエフェクトのサンプル
jQuery MobileでAjaxして動的にlistviewを適用してみた。 - techlog tetsuwo.oishi
JSON形式をlistviewする方法
ListView - すにぺっと
listviewの中身の記述の仕方
jQuery Mobileのメモ★基本編
フォームでの入力の際Ajaxは使用しないように設定
jQuery mobile でスマートフォン用にフォームメニューを簡単作成
フォームのお作法

参考になる本

HTML5+CSS3で作る  魅せるiPhoneサイト  iPhone/iPad/iPod touch対応

HTML5+CSS3で作る 魅せるiPhoneサイト iPhone/iPad/iPod touch対応

iPhone+Android スマートフォンサイト制作入門 (WEB PROFESSIONAL)

iPhone+Android スマートフォンサイト制作入門 (WEB PROFESSIONAL)