jQuery Mobileについて
作成日：２０１２年１０月１９日
作成者：石川
本課題の目的
スマートフォンのシェアが急増するに伴い、これまでのPC用の業務アプリ
ケーションをタブレット端末対応させたり、フィーチャフォン用のサイトをスマ
ートフォン対応させたりといったニーズが高まるなどして、スマートフォン対応
案件も増加してきている。
このようなニーズに対して、以下の課題がある。
• スマートフォン毎に仕様が異なる
• スマートフォンに向けた最適なユーザインターフェースが求められる
上記を解決する手段の１つとして、『jQuery Mobile』に注目し、スマートフォ
ンの開発案件へ適用できるように、最低限の基礎知識を押さえる事を目的と
しています。
jQuery Mobileの概要
jQuery Mobileは、JavaScriptライブラリjQueryのプラグインでモバイルアプリ
ケーション構築のためのフレームワークであり、ネイティブアプリではなく
HTML5／CSS3をベースとしたWebアプリケーションを対象としている。
2010年10月にアルファ版がリリースされた後、細かなバージョンアップを経
て、2011年11月にjQuery Mobile 1.0正式版が公開されている。
（本課題執筆中に1.2.0rc3から1.2.0リリースとなったが、本課題ではバージョ
ン1.1.1を使用している。 ）
オープンソースとして開発されており、公式サイトから無料でダウンロードで
きるほか、CDN（コンテンツデリバリネットワーク）でも配信されている。
Webアプリとネイティブアプリとの違い
そもそもスマートフォンにおいてWebアプリケーションとネイティブのアプリケーション
の違いは何なのか？
№
トピック
Webアプリ
ネイティブアプリ
1
インストール作業の有無
不要
必要
2
クロスプラットフォームの実現
可能
制限付き可能
3
アプリの公開、非公開の制御
可能
制限付き可能
4
ビジネスモデル（課金）の自由度
自由度は高い
自由度は低い
5
アプリストアからの導線の期待
できない
できる
6
アプリストアの課金モデルの利用
できない
できる
7
デバイス機能をフル活用
できない
できる
8
動作速度の速さ
遅い
早い
9
オフラインでの動作
制限付き可能
可能
他のモバイルWebフレームワークの動向
他のモバイルWebフレームワークはどのようなものがあるのか？
フレームワーク名
バージョン
特徴
Sencha Touch
1.1/2.0.1.1
・HTML5モバイルJavaScriptフレームワーク(2系は1
系を作り直して性能を向上)
・UIの表示にJavaScriptコードの記述が必要
・iOS、AndroidなどのWebKitブラウザで動作可能
jQTouch
1(beta 4rc)
・WebアプリをiPhoneのネイティブアプリのようなUIに
するjQueryのPlug-inであるJavaScriptフレームワーク
・UIの表示にJavaScriptコード記述は不要
・iOS、AndroidなどのWebKitブラウザで動作可能
2.0.0
・HTML、JavaScript、CSSで作られたWebアプリケー
ションをラップしてカメラやGPSなどネイティブAPIを呼
び出す
・iOS、Android、Window Phone 7など他多数あり
0.4
・WebアプリをiPhoneのネイティブアプリのようなUIに
するJavaScriptライブラリ
・UIの表示にJavaScriptコード記述は不要
PhoneGap
iUi
(現在開発中止)
jquery-mobileの特徴
他のモバイルWebフレームワークと比べて、jquery mobileのメリット／デメリットは？
メリット
・クロスプラットフォームに対応(Apple IOS 3.2-5.0、Android 2.1-2.3、Android 3.1、Android 4.0、Windows
Phone 7-7.5 etc...)
・JavaScriptを直接記述せずにリッチでインタラティブなモバイルサイトが作成可能（HTML5のカスタムデー
タ属性を使用）
・充実なUIコンポーネント
デメリット
・完全オリジナルのデザインはできない。大掛かりなカスタマイズが難しい（Themerollerでコンテンツの色や
背景色は可能だが、ボタンなど形状に関わる変更はできない）
・低スペックデバイスでは動きが遅い
jquery-mobileのライブラリ構成
jquery-mobileを構成するライブラリはたった３ファイル！！
・jquery
⇒ jqueryのJSファイル
・jquery-mobile ⇒ jqueryを使ったmobile用JSファイルとCSSファイル
{contextpath}/
├css/
│ └jquery.mobile-{version}.css
├js/
│ ├jquery.mobile-{version}.js
│ └jquery-{version}.js
└html
jquery-mobileの基本構成①
jquery-mobileを使った画面の基本構成はこれだけ。
<!DOCTYPE html>
<html>
<head>
必須
jquery、及び、jquery-mobileのjs、cssを読み込み。
</head>
<body>
必須
divタグ(page部)
divタグ(header部)
divタグ(content部)
divタグ(footer部)
任意
</body
</html>
jquery-mobileの基本構成②
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,
minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>forefrontier title.</title>
<link rel="stylesheet" href="css/jquery.mobile-1.1.1.min.css" />
<link rel="stylesheet" href="css/forefrontier.css" />
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/config.js"></script>
<script src="js/jquery.mobile-1.1.1.min.js"></script>
<script src="forefrontier.js"></script>
</head>
<body>
<div data-role="page" id="page1">
<div data-role="header">
<h1>ヘッダー</h1>
</div>
<div data-role="content">
メインコンテンツ
</div>
<div data-role="footer">
フッター
</div>
</div>
</body>
</html>
どのように動いているのか？
Google ChromeのDeveloper Toolsでhtmlソースを確認してみると・・・。
注意①
JavaScriptの読み込み順序に注意！！
１．jqueryライブラリ
２．その他外部JavaScript（あれば）
３．jquery mobile初期化用スクリプト（ユーザ作成）
４．jquery mobileライブラリ
５．通常のJavaScript（ユーザ作成）
上記以外の順序で読み込みすると正しく動作しない可能性があります。
画面遷移の仕組み
jquery-mobileの画面遷移の仕組みはどうなっているのか？
sample1.html
sample2.html
画面遷移の仕組み
Ajax使用時の画面遷移はこうなっている。
sample1.html
sample2.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div data-role="page" id="page1">
<div data-role="header">
<h1>ヘッダー１</h1>
</div>
<div data-role="content">
メインコンテンツ１
<a href=“sample04-1.html”>次へ</a>
</div>
<div data-role="footer">
フッター１
</div>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div data-role="page" id="page2">
<div data-role="header">
<h1>ヘッダー２</h1>
</div>
<div data-role="content">
メインコンテンツ２
<a href=“sample04-2.html”>前へ</a>
</div>
<div data-role="footer">
フッター２
</div>
②datarole=“page2”
のみ取得
</div>
</body
</html>
①Ajaxで
要求
③DOMの
body要素内
に追加
</div>
</body
</html>
注意②
ソースの記述場所に注意！！
１．jquery mobileのhtmlソースはdata-roleの要素の中に記述すること。
⇒ ２画面以降の画面（DOM）はAjaxでHTMLを取得し、画面をレンダリングしている
ため、data-role=“page”で定義された要素以外は無視される。
２．同様にhead要素内に直接<script>タグでJavaScriptコードは記述しないこと。
⇒画面リロード（ブックマーク起動）時にJavaScriptやCSSの処理が必要となるため
全てのページに同一のJavaScriptファイル、及び、CSSファイルを読み込むように
するのが望ましい。
イベント処理の仕組み
jquery-mobileのイベント処理の仕組みはどうなっているのか？
（参考：http://screw-axis.com/2012/01/20/jquery-mobile-pageevent-cheatsheet/）
注意③
イベント発生の仕組みに注意！！
１．jquery mobileは、jqueryのイベントと混同しないようにすること。
⇒jqueryで使っていた${document}.ready、${document}.bind、{document}.liveなど
は、Ajaxを使った時に意図しない時に発生しないため使用しない方が良い。
２．Ajaxの使用・未使用で、発生しないイベントがあるので注意。
⇒Ajaxを使用しない場合、外部からのランディングと同じイベント発生となる。
Ajaxを使用時は内部的にDOMをキャッシュしているためで、Ajaxを未使用時や外
部からのランディングではDOMのキャッシュが利用されず毎回DOMを構築している
ため。
（例）<a href=“sample05-2.html” data-role=“button” id=“foward1” data-ajax=“false”>
パフォーマンスチューニング（問題点）
モバイル端末を使用する際、依然として以下の問題を考える必要がある。
■ 端末の性能の低さ（特に一昔前の端末）
■ ネットワーク帯域が狭い
■ 場所によっては回線が繋がらない
パフォーマンスチューニング（対策）
性能を向上させる対策として、以下の方法がある。
１．通信量の削減
２．クリックレスポンスの向上
３．遅延ロードで必要なデータを取得
４．フォームの遅延ロード
５．スクリプトの遅延ロード
６．画面のプリフェッチ
７．DOMキャッシュの使用
８．アニメーション無効化
９．jquery mobileのエンハンス無効化
（色の意味）
青：jquery mobile以外でも適用可能。
緑：jquery mobile固有の対策。
パフォーマンスチューニング（対策）
【通信量の削減】
ライブラリを利用する際、xxx.js、xxx.cssに対応したxxx.min.js、xxx.min.cssを使用
する。（jquery mobileをダウンロードした際に一緒に付属されている）
これらは、コード内のスペースや変数を省略する事で、js、cssのサイズを圧縮してい
る。
ユーザが作成したjs、cssについてもツールを利用して圧縮する事も可能。
（ツールによる圧縮）
・Google Closure CompilerによるJavaScriptコードの圧縮
・YUI CompressorによるJavaScript、CSSコードの圧縮
（サーバによる圧縮）
・apacheのmod_deflateによるデータ転送時に圧縮
パフォーマンスチューニング（対策）
【 クリックレスポンスの向上】
Androidではブラウザ標準のclickイベントをイベント処理を行うと若干もたつく。
jquery mobileのvclickやtapイベントで代用することで反応が早くなる（らしい） 。
【遅延ロードで必要なデータを取得】
大量データや重い画像データを表示する際、時間がかかってもユーザにストレスを与
えないように、最初に最小限の画面を表示し、必要時に該当データを取得・表示を行
う遅延ロードを考慮する。
【フォームの遅延ロード】
フォーム内のコンポーネントも遅延ロードを行い必要な時に表示を行う。
なお、コンポーネントを動的に生成して追加した場合、jquery mobileのスタイルが適
用されず通常のhtmlが表示されてしまうので、以下のコードを記述すること。
（例）${#hoge}.trigger(“create”);
パフォーマンスチューニング（対策）
【 スクリプトの遅延ロード】
大きなサイズのJavaScriptライブラリを使用する場合、scriptタグを利用して全部読み
込みするよりも、 一旦画面を表示した後、スクリプトを読み込む事でレスポンスがよく
なる。
（例）$.getScript(“http://hostname/scriptname.js, function(dta, status) {
// 読み込み後の処理
});
【 画面のプリフェッチ】
jquery mobileのプリフェッチ機能を利用する事で画面表示している間に次の画面の
データを読み込む事ができる。
（例）<a href=“nextpage.html” data-prefetch=“true”>次のページ</a>
パフォーマンスチューニング（対策）
【DOMキャッシュの使用】
一度表示した画面のDOMをキャッシュしておき、画面表示時にキャッシュしたDOMを
使用できます。
（例）$(document).on(“mobileinit”, function() {
$.mobile.page.prototype.options.domCache = true;
}
特定の画面のみのキャッシュも可能
（例）<div data-role=“page” id=“page1” data-dom-cache=“true”>
なお、HTML5から新たに追加されたアプリケーションキャッシュを利用する事で、ネッ
ト環境に繋がっていないでもWebアプリを動作も可能だが、以下の注意点が必要。
・動的にHTMLが変更されたり、DBのデータを表示するような画面には不可。
・更新チェック仕組みを設ける必要がある。
パフォーマンスチューニング（対策）
【アニメーションの無効化】
jquery mobileはデフォルトでアニメーションするように設定されているが、以下の様に
してアニメーションを無効化することで動作を軽くする事も可能。
（例）$.mobile.defaultPageTransition = ‘none’;
【 jquery mobileのエンハンス無効化】
これを無効化するとjquery mobileを使うメリットが半減しますが・・・。
リッチなコンテンツを捨て、各ブラウザ本来の見た目になるが、フォームのエンハンス
（JavaScriptによるjquery mobileのスタイルの適用）を無効にする事も可能。
（例）$.mobile.ignoreContentEnabled = true;
© Copyright 2024 ExpyDoc
