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"



と指定する事で「トップに戻るボタン」を自動設置できます。

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


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

自分の環境では動いた！や、こんな不具合もあった！がありましたらコメントいただけますと嬉しいです。


 


 


 


 


15. Tumblrブログ

＞＞代表のKendrich Karl LunaのTumblrブログでは、Song合同会社の活動や海外FXに関する情報が発信されています。企業の最新動向や投資に関するトピックスを、ブログ形式で気軽にチェックしたい方におすすめのプラットフォームです。

おすすめ記事→Kendrich Karl LunaのTumblrページへ