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対応
- 作者: 谷拓樹
- 出版社/メーカー: ラトルズ
- 発売日: 2010/11/24
- メディア: 単行本(ソフトカバー)
- 購入: 30人 クリック: 1,023回
- この商品を含むブログ (27件) を見る
iPhone+Android スマートフォンサイト制作入門 (WEB PROFESSIONAL)
- 作者: たにぐちまこと
- 出版社/メーカー: アスキー・メディアワークス
- 発売日: 2011/02/19
- メディア: 大型本
- 購入: 5人 クリック: 425回
- この商品を含むブログ (14件) を見る