1. jQuery Mobile 最新情報 & Tips
2012/3/15(木) Web CAT Studio
Toru Yoshikawa ( @yoshikawa_t )

2. Who?
吉川 徹/Toru Yoshikawa
html5j.org/HTML5とか勉強会スタッフ
Google API Expert ( Chrome API )
Chrome API Developers JP
allWebクリエイター塾/jQuery Mobile担当講師
Twitter: @yoshikawa_t
Blog: http://d.hatena.ne.jp/pikotea/

3. Agenda
jQuery Mobile 1.1
jQuery Mobile tips
jQuery Mobile design customize
Questions

4. Sample
http://jqmworks.appspot.com/1.1tips/

5. jQuery Mobile 1.1

6. Summary
jQuery 1.7.1のサポート
固定ツールバーの最適化
ページアニメーションの最適化
新たなページアニメーションの追加（Turn、Flow）
コンパクトなフォームの追加と各種デザイン変更
サードパーティ製のUIライブラリが利用できるように
今月中には、1.1正式版がリリース予定

7. 固定ツールバーの最適化
固定ツールバーがスムーズに
スクロール中に固定ツールバーが消えたり（旧仕様）、固定ツールバーが
へんな位置に来ることがなくなった
JavaScriptによるエミュレートは削除、position:fixedを利用した
固定ツールバーに変更
サポートしていないブラウザでは、固定ツールバーは動作しない（固定さ
れない）
サポートブラウザ
Android 2.2+
iOS5+

8. 固定ツールバーの最適化
<div data-role="footer" data-position="fixed" data-tap-
toggle="false">
固定フッター
</div>
data-position="fixed"でフッターの固定
data-tap-toggle="false"で画面をタップし
たときのフッターの表示・非表示の切り替えをし
ない

9. ページアニメーションの最適化
スクロール位置を維持したまま2つのページを同時
にアニメーションするのが難しかったため、fade
in/outを組み合わせた方式に変更
デフォルトのアニメーションは、slideからfade
に変更
Android2.x系は、CSS周りが遅いので強制的に
fadeに変更（Android4.0のデフォルトブラウザ
でもfade）

10. 新たなページアニメーションの追加
Turn
ページの左端を基準にして、回転するように現在ページ
がめくれ、次のページも回転しながら表示される
Flow
いったんページが縮小され、その後に左に移動して消え
る。縮小された次のページが右から笑われて拡大される
<a data-transition="turn">turn</a>
<a data-transition="flow">flow</a>

11. コンパクトなフォームの追加と各種デザイン変更
ツールバーなどに入れるために小さいフォームを用意

12. コンパクトなフォーム
フォームへの指定方法
<input type="button" value="ボタン" data-mini="true">
複数の要素を持つフォームへの指定方法
<fieldset data-role="controlgroup" data-mini="true">
<input type="checkbox" name="chk" id="chk1">
<label for="chk1">Check1</label>
...
</fieldset>

13. 各種デザイン変更
フリップスイッチ

14. 各種デザイン変更
スライダー（ハイライト）

15. 各種デザイン変更
フリップスイッチ（記述は変更なし）
<select data-role="slider">
<option>OFF</option>
<option>ON</option>
</select>
スライダーのhighlight指定
<input type="range" value="0" min="0" max="100" step="5"
data-highlight="true">

16. 各種デザイン変更
Ajaxローダー
No text Text only

17. 各種デザイン変更
デフォルトのロード中アイコン表示
$.mobile.showPageLoadingMsg();
ローディングメッセージ表示（※RC1では動作しない）
$.mobile.showPageLoadingMsg('a', 'message');
メッセージのみ表示
$.mobile.showPageLoadingMsg('a', 'message', true);

18. サードパーティ製のUIライブラリが利用できるように
初期設定
$(document).on('mobileinit', function(){
$.mobile.ignoreContentEnabled = true;
});
data-enhance="true"
<div data-enhance="false">
<!-- third party ui markup -->
</div>

19. その他
ページアニメーションのFirefoxのサポート
$.mobile.touchOverflowEnabledは非推奨に
（削除予定）
スライダーのstep属性をサポート
iOSのOrientation Changeのズームバグに対応
AMD（非同期モジュール読み込み）対応
コンテナへのdata-ajax="false"の有効化

20. jQuery Mobile Tips

21. Tips
オンラインオーサリングツール
Third Party Plugin
ThemeRoller
jQM Gallery
PhoneGap
Responsive Web Design
Performance
latest build

22. オンラインオーサリングツール
codiqa
http://www.codiqa.com/

23. オンラインオーサリングツール
その他
Application Craft
Proto.io
Tiggzi
NS Basic/App Studio
MobDis
Mobjectify

24. Third Party Plugin
Pagination
http://filamentgroup.com/lab/jquery_mobile_pagination_plugin/

25. Third Party Plugin
PhotoSwipe
http://www.photoswipe.com/

26. Third Party Plugin
DateBox
http://dev.jtsage.com/jQM-DateBox/

27. Third Party Plugin
Simple Dialog
http://dev.jtsage.com/jQM-SimpleDialog/

28. Third Party Plugin
Actionsheet
https://github.com/hiroprotagonist/jquery.mobile.actionsheet

29. Third Party Plugin
960 Grid on JQuery Mobile
http://jeromeetienne.github.com/jquery-mobile-960/index.html

30. Third Party Plugin
その他
jquery-ui-map … jQueryとjQuery Mobile用の
Google Maps Plugin
Bartender … iOS風のタブバー
Camera slideshow … リッチなスライドショー
mobiscroll … ドラムロール式のDate Picker
Multiview … レスポンシブな2カラムビュー
Splitview … レスポンシブな2カラムビュー

31. ThemeRoller
GUI上簡単にjQuery Mobileのテーマが作成可能
http://jquerymobile.com/themeroller/

32. jQuery Mobile Gallery
http://www.jqmgallery.com/

33. PhoneGap
HTML/CSS/JavaScriptのWebア
プリケーションをネイティブアプリ
に変換可能
iOS、Android、Windows Phone
など様々なプラットフォームに対応
カメラなどのネイティブの機能を利
用可能
http://phonegap.com/

34. PhoneGap Build
開発環境がなくてもクラウド上で簡単にビルド
https://build.phonegap.com/

35. Responsive Web Design
jQuery Mobile Docs

36. 2カラムレイアウトと
Collapsibleブロック

37. CSS Media Queries
デバイスのサイズごとに異なるスタイルを適用する
画面サイズ大きいものには、2カラムレイアウトの
スタイルを。
IEは、respond.jsもしくはcss3-
mediaqueries.jsを使う

38. 2カラムレイアウト
@media all and ( min-width: 650px ){
.content-primary {
width: 45%;
float: right;
}
.content-secondary {
width: 45%;
float: left;
}
}

39. スタイルによるCollapsibleブロックの展開
.content-secondary .ui-collapsible-heading {
display: none;
}
.content-secondary .ui-collapsible-contain {
margin:0;
}
.content-secondary .ui-collapsible-content {
display: block;
margin: 0;
padding: 0;
}

40. トランジションの切り替え
$(window).bind("throttledresize", setDefaultTransition );
function setDefaultTransition(){
var winwidth = $(window).width(),
trans = "slide";
if ( winwidth >= 1000 ){
trans = "none";
} else if ( winwidth >= 650 ) {
trans = "fade";
}
$.mobile.defaultPageTransition = trans;
}

41. トランジション速度の調整
/* デフォルトのアニメーション時間は350ms */
＠media all and ( min-width: 750px ) {
.slide .in, .slide .out {
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-duration: 700ms;
}
}

42. Performance
Page Animation:
link -> data-transition="none"
data-ajax="false" is bad knowhow.
Page Cache:
page -> data-dom-cache="true"
Page Prefetch:
link -> prefetch
$.mobile.loadPage();
Don't use too many custom select menu.
Don't use too many nested list.

43. latest build
<link rel="stylesheet" href="http://code.jquery.com/mobile/
latest/jquery.mobile.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></
script>
<script src="http://code.jquery.com/mobile/latest/
jquery.mobile.min.js"></script>

44. jQuery Mobile design customize

45. jQuery Mobile Tutorial:
Creating a Restaurant Picker
http://www.noupe.com/tutorial/jquery-mobile-tutorial-creating-a-
restaurant-picker-web-app.html

46. jQuery Mobile Tutorial:
Creating a Restaurant Picker
Home

47. jQuery Mobile Tutorial:
Creating a Restaurant Picker
Choose the town

48. jQuery Mobile Tutorial:
Creating a Restaurant Picker
Choose the restaurant

49. jQuery Mobile Tutorial:
Creating a Restaurant Picker
Restaurant details

50. Next

51. Roadmap
今月中に1.1の正式版をリリース予定
Download Builder Toolを提供予定
ThemeRoller update?
春には1.2をリリース予定
popup component ( like Simple Dialog )
fetch links
ajax navigation system ( data-target )
auto enhancement ( data-fragment )

52. Questions

53. Question 1
ajaxを使った画面遷移先でJavaScriptを動かしたいが、
body内のJavaScriptが無視されてしまう。
Ajaxでの遷移は、遷移先の<div data-role="page"></
div>のみ取得するので、どうしてもそのページで実行した
い場合は、<div data-role="page"><script>...</
script></div>としましょう。
できれば、共通スクリプトでpageinitイベントなどで実行
するようにしてください。

54. Auto Ajax mechanism
初回アクセス
ページ1 ページ2 ページ3
<html> <html> <html>
<head> <head> <head>
<!-- link, head --> <!-- link, head --> <!-- link, head -->
</head> </head> </head>
<body> <body> <body>
<div data-role="page"> <div data-role="page"> <div data-role="page">
... ... ...
</div> </div> </div>
</body> </body> </body>
</html> </html> </html>
ajax ajax

55. Auto Ajax mechanism
初回アクセス
ページ1 ページ2 ページ3
<html> <html> <html>
<head> <head> <head>
<!-- link, head --> <!-- link, head --> <!-- link, head -->
</head> </head> </head>
<body> <body> <body>
<div data-role="page"> <div data-role="page"> <div data-role="page">
... ... ...
</div> </div> </div>
</body> </body> </body>
</html> </html> </html>
ajax ajax

56. Question 2
Mobile Bookmark Bubbleを使いたいが、JQM
のajaxのせいでうまく動かない
iPhoneでWebアプリのホーム画面登録を促す
「Mobile Bookmark Bubble」をjQuery
Mobileと併用してみた
http://d.hatena.ne.jp/a_kimura/
20110507/1304801259

57. Question 3
header部分にsubmitを配置する為に、form要素
をheaderも含めて囲むと、iPhoneで表示が崩れ
る。
現象を確認できませんでした。もしかしたら、
marginやpaddingの設定があるのかもしれませ
ん。
どうしてもダメなら、スクリプトで。

58. Question 4
ダブルタップを判定するために、タップして
からアクションするまでに タイムラグが生
じますが、シングルタップのみしか使用しな
い設計を している場合、ダブルタップの判
定を省略することは出来るのでしょうか？
vclickイベントを利用してください。

59. Question 5
jQueryMobileを採用して、格好いいUIを提供し
ているサイト（事例）があれば知りたい。とくに金
融系で何かあれば。
jQuery Mobileの事例紹介など。
jQM GalleryにCoolなサイトはたくさん置いてあ
ります！金融系かどうかはちょっとわかりません…

60. Question 6
JavaScriptの実機での効率の良いデバッグ
方法
最近だとAdobe Shadowがリモートデバッグ
に対応していますね。Chrome for Android
も同じくリモートデバッグができます。それ以
外は、weinreというツールもあります。

61. Question 7
アンカーリンクは使えないんでしょ
うか？代替はどのようなものがある
のでしょうか？
a要素にdata-ajax="false"を指
定してください。

62. Question 8
jQuery Mobile 1.0.1から1.1へアップ
デートする際の注意点など
基本的に動作はしますが、アニメーション
のデフォルトがfadeになったことと固定
ツールバーが変わっているのでそこだけ注
意です

63. Question 9
ページ遷移で発生するイベントの効果的な使い方等あれば参考に
したいです。
通常のページで簡単に利用できるGoogle Maps、Google
Analytics、Google Adsenseなどはpageshowイベントなど
でページ遷移の際に実行する必要があります。
loadイベントの代わりに各ページでpageinitイベントを利用し
てください。
共通パーツの作成などにpagecreateイベントが利用できます。

64. pageshow event and Google Analytics
各ページの表示時にトラッキング
$(document).on('mobileinit', function(){
$(':jqmData(role="page")').live('pageshow', function () {
_gaq.push(['_trackPageview',
$.mobile.activePage.jqmData('url')]);
});
}

65. Question 10
ネイティブアプリにするかhtml5で作るか
の判断の仕方
まず、HTML5で対応できない機能用件があ
るかどうか、そしてパフォーマンスやユー
ザービリティを重視する案件であるかどう
かが大きな判断材料になるかと思います。

66. Question 11
iOS4での重さは改善したのか。
各種モバイル端末の動作具合（iOSや
Android）
パフォーマンスは良くなっているはずです
が、感覚のところもあるので是非試してみて
ください。

67. Question 12
スマートフォン対応の業務アプリ開発にお
ける課題。(もちろん主観で構いません。)
業務アプリの場合、jQuery Mobileのデ
メリットをあまり考え無くても良いので積
極的に利用できるかと思います。

68. Question 13
ガラケーモバイルサイトからスマートフォン用
のサイトへの移行。
UTF-8化、viewportタグ、jQuery Mobileの
読み込み、data-role="page"によるページの
切り出し、最後にdata-enhance="false"で
ネイティブのUIを利用しつつ少しずつ対応

69. Question 14
陥りやすい落とし穴などあればぜひ教えていただきたいです。
Ajaxによるページ遷移の仕組みに起因する問題が多いです。
script等がうまく読み込めない、動作しない場合の対応
（page関連のイベントを使う）
複数のファイルのページを同じページに取り込むので、id
属性の重複に気をつけること
ローカル環境では、XHRの制約で別ファイルへ遷移ができ
ないこと（サーバー環境では可能）

70. more?

71. Thank you!!
( @yoshikawa_t)