seno.ccWebデザイナーと２匹のハリネズミ

seno.cc > 日記 > 【メモ】jQuery mobileでスマートフォンサイト制作する際の注意点

【メモ】jQuery mobileでスマートフォンサイト制作する際の注意点

2011
12/16
Share Button


スマートフォンサイトを簡単に制作できるjQuery mobileが最近twitter等で話題になっているので、早速実践してみました。導入してみて気がついた制作時の注意点がいくつかあるので、掲載しておきます。

  1. pageタグの使い方
  2. data-transitionの挙動誤差
  3. デザイン時の注意点
  4. Backボタンのバグ

pageタグの使い方

jQuery mobileを使って一番驚いたのがこの機能でした。
簡単に説明すると、通常のHTMLでは1ファイルが１ページを表します。ところがjQuery mobileでは、pageというタグで囲む事で一つのHTMLファイル内に複数のページ内容を掲載する事が可能です。（HTML5で登場したタグかと思ってましたが違うみたいです）
詳しくはスマートフォン向けフレームワーク注目の「jQuery Mobile」でスマホサイトを作ってみよう【基本編】 | HTML5でサイトをつくろうを参考にしてみてください。僕もこのサイトを参考に制作させてもらいました。

さて、その肝心のタグですが、1HTMLファイル内に1ページ分の内容しか書き込まない場合に使用すると、footer要素で囲んだ部分が表示されない不具合が発生するようです。

例えばこんな書き方がNG

<html>
<body>
<page>
<div data-role="header">
<p>これがヘッダー</p>
</div>
<div data-role="content">
<p>jQuery mobileでスマートフォンサイト制作する際の注意点</p>
</div>
<div data-role="footer">
<p>これがフッター</p>
</div>
</page>
</body>
</html>

1HTMLファイル内に複数ページ分のタグがあれば、問題なく表示されます。
つまり、1ページ1ファイルで記載する場合にはタグを使用してはいけないみたい。

data-transitionの挙動誤差

jQuery mobileの長所のひとつdata-transitionですが、ページ遷移のモーションをまるでアプリのようなカッコいい感じにしてくれます。

その動きには

スライド(右から左へ) data-transition=”slide”
スライド(下から) data-transition=”slideup”
スライド(上から) data-transition=”slidedown”
ポップアップ data-transition=”pop”
フェードイン data-transition=”fade”
フリップ（回転） data-transition=”flip”

※ HTML5でサイトをつくろうさんより引用

などのパターンが用意されているのですが、Androidで見た場合とiphone見た場合等、ブラウザ間での動作に違いがあるようです。
(flipが一番派手な演出ですが、Android端末では動きが上手く再現できないetc…)
細かな検証は出来ていませんが、公式に配布されているcssを自分で修正した場合に若干動きがギクシャクする場合も。
現時点ではslideなどの簡単な動きにしておくのがいいかもしれません。

デザイン時の注意点

画像の使い方

タグを使用するメリットには、「一度に複数ページを読み込んでおく事でサイト内での動きをスムーズに行う」という読み込みに時間がかかるスマートフォンならではの仕様があげられるのですが、画像を多く使ったサイトにしてしまうと最初にページを読み込む段階でかなりの時間がかかってしまいます。
ボタンデザイン等は可能な限りCSSで制作するのが良いと思います。

リキッドデザイン

これはjQuery mobileに限らず、スマートフォンサイト制作に関しての注意点になります。
スマートフォンを普段使っている人はイメージしやすいと思いますが、スマートフォンでWebサイトを見る場合、画面の向きによって表示サイズが変わってしまいます。そのため画像はあらかじめ大きなサイズにしておかないと、拡大表示時にぼやけてしまうので注意してください。
基本的に%指定でコーディングを行うのがいいんじゃないでしょうか。

Backボタンのバグ

jQuery mobileを使用する場合、タグに

data-add-back-btn="true"

と指定する事で「トップに戻るボタン」を自動設置できます。
しかしこの指定にはバグがあるようで、この機能で設置したボタンを使わず、ブラウザの「戻る」ボタンを使用した場合に不具合がおきる事があります。また、このボタンが設置されているページでブラウザの「リロード」すると、戻るボタン自体がが表示されなくなるようです。

今のところまだ完全とは言えないような仕様に感じましたが、ごく簡単なスマートフォンサイトであれば小１時間で制作する事も出来てしまうので、まずは導入して使ってみる事をオススメします。
自分の環境では動いた！や、こんな不具合もあった！がありましたらコメントいただけますと嬉しいです。