jQuery mobileを扱う際に注意したこと
・javascriptの登録順序
jquery mobileのjavascript外部ファイルは、javascriptの一番最後に登録した方がいい
変数やcssをjavascriptでカスタマイズする事が多いので、
変数が初期化できていないと、ajaxの動作がおかしくなったり、cssが意図しない表示になる
・overflow処理
text-overflowは、word-wrapではなくword-breakを指定したほうが見栄えがいい
デフォルトではellipsisが指定されている場合があるが、文章が殆ど表示できないので、
あまりカッコよくない
画像のoverflowはhiddenを指定して、画面幅を超えたら表示しないようにする
画像が横に並んだ時に、画面横幅を超えると、
スマートフォンの画面がスクロールしてしまうので、これも見栄えがカッコ悪い。
部分的な横スクロールもUIが扱いづらい。
画像はセンタリングして、適切に改行させるのが見栄えがよかった。
・Ajaxを安定して利用するのは手間がかかる
画面遷移でajaxを使うのはリスクがある。
多少テストして大丈夫だったとしても、
下記のような状況が含まれている場合はajaxをdisableにしたほうがいい。
1. cssに手を加えている場合
2. campasを利用して描画している場合
3. サーバー処理（perl, php, java等）でjavascriptを管理している場合
（動的にインクルード/ ハンドルしている、等）
4. pageのIDが重複する可能性がある場合
描画やスライドのタイミングがずれて綺麗に表示できない場合は、
該当するページに遷移する場合だけ、
「link=_blank」で別窓にしてしまうことで回避する方法がある。
（_blinkの場合はBackできなくなるが）
根本的な解決はBeta版のバージョンアップで様子を見ながら手を付けた方がいいと思う。
・clickイベント → tapイベントで実装
デザインをカスタマイズして、cssを独自に組んでしまうと、
標準で反応するエフェクトが使えなくなる場合がある。
それで、clickイベントも自前でbindしてclickのエフェクトを実装したのだけど、
iPhoneだとちゃんと反応するイベントが、
Androidだと全く反応がない場合がある。
jQuery mobileでは、tapイベントで実装するのが正解らしい
・list型の項目のテーブル記述
リスト型項目で、画像を含めたテーブルセルのような記述をしようとすると、
cssの記述でハマる事があった。
対策としては、
A. 画像サイズをスクウェア（正方形）にして、標準のリストでデザインする
B. cssをカスタマイズしてリスト項目のテーブルブロックを組む
C. 画像は可変にして、spanタグの要領で横に並べる
いずれかの対応が必要になる
画像をスクウェアに揃える手間を我慢できるなら、”A”の対応がオススメできる
“B”の対応はかなり難しい。cssに自身がある人でないとハマる
“C”の対応はあまりデザイン的には調整が難しいが、
ガラケーのサイトをデザインした事があれば、
意外に現実的なソリューションになる。
実際のところは、
「jQuery mobileのバージョンアップを待ってcssが改善されるのを待つ」
とか、
「簡単に使えるプラグインを待つ」
他力本願に構えてもいいと思う。
