jQuery mobile 取扱いの注意点

 

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が改善されるのを待つ」

とか、

「簡単に使えるプラグインを待つ」

他力本願に構えてもいいと思う。

 

 

hidenori

Web、モバイル関連、コンシューマゲーム、モバイルコンテンツ等、
コンテンツ全般の開発や制作、コンテンツのバックエンドになる技術等を扱っています。

開発系
.net / mono、Java, javascript, c++, c, Perl, PHP, phython,
インフラはAWSとLinux仮想化で自前構築

・経歴
⇒外資|ゲーム開発|ローカライズ|SE|QA|PD|PG|SE|大学
⇒Web|SE|ベンチャー|コンテンツ|音楽⇒外資|ケータイ|ゲーム
⇒Web|SE|ベンチャー|音楽|大学院|ケータイコンテンツ|スマートフォンコンテンツ|独自コンテンツ配信

いろいろやってます

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です