spritesmithでCSSスプライト画像を合成し、CSSも出力することができますが、iOS retina対応にはなりません。
各画像は@2xで合成し、CSSの各座標情報は1/2としたいのですが、そのようなオプションはないようです。
そこで、spritesmithの出力形式にstylusを指定し、このstylusファイルを読み込んで、1/2された各画像のCSSを出力するstylusのfunctionを書くことにしました。
モバイルのWebサイトはできるだけ表示速度を向上させることが重要です。UI/UXも重要ですが、閲覧者にストレスを与えず閲覧させることは離脱を減らすことにもつながります。一般的に行われているテクニックをまとめてみました。gruntを利用すると、色々なツールが簡単に利用できます。
手元のiphone4Sを何も考えずiOS6.0にアップデートしてしまって後悔しているが、この機能だけはありがたい。
iphoneのmobile safariでjavascriptのコンソール出力を見るには、いままではmobile safariの設定→詳細→デバッグコンソールをONにすると閲覧できるようになっていました。
iphone,ipad,android用のHTML5アプリを開発していて、androidのタッチイベントの挙動が（mobile safariと比べて）おかしいなと思うことがあります。w3c Touch Eventsでの策定でも、細かなところまでは決められないだろうし、守られるものでもないだろうとは思うが、出来る限り統一されることを望みます。
W3C Touch Events version 2
jQueryMobile（以下、jqm）は、パフォーマンスを向上させるために、domをキャッシュします。静的ページなら問題ないのですが、動的コンテンツでは、このキャッシュが弊害となるケースがあります。
jQueryMobile（以下、jqm）のデフォルトページ遷移はajaxで行っていますが、これに頼らず自力で表示内容をajaxで取得して遷移したいときは、pagebeforechangeイベントハンドラを使って、表示内容を生成します。しかし、jqmで必要な処理や、気をつけないといけないことがあります。
jQueryMobile1.1.0 final（以下、jqm）もリリースされて、今回本格的にモバイルクラウドアプリ開発に利用しています。色んなデバイスに対応していて、ページ遷移エフェクトやGUIパーツが簡単に利用できて、とっても快適なのですが、まだ作法がよくわからず苦労します。
mobile safariで大きな画像を扱うとき、気をつけることが何点があったので、記録しておきます。
iphone4,ipad(3rd generation)は、retinaディスプレイ採用に伴って解像度が2倍になっていて、より鮮明な画像が扱えるようになっています。しかし、いままでの解像度の画像を、表示したらどうなるのか？大きさが半分（面積は1/4)になってしまうのか。
HTML5のinput要素には、typeによって表示形状を変えたり入力補助するソフトウェアキーボードを選択できる設定があります。typeには”password”,”number”,”email”,”url”,”tel”, “time”,”date”,”month”,”week”,”datetime”,”datetime local”,”color”(他にrange,search)などがあります。typeを適切に設定することで、モバイル端末のブラウザが入力に適したソフトウェアキーボードを表示します。
