jquery mobile について
DESCRIPTION
jQuery Mobile について. 作成日：２０１２年１０月１９日 作成者：石川. 本課題の目的. スマートフォンのシェアが急増するに伴い、これまでの PC 用の業務アプリ ケーションをタブレット端末対応させたり、フィーチャフォン用のサイトをスマ ートフォン対応させたりといったニーズが高まるなどして、スマートフォン対応 案件も増加してきている。 このようなニーズに対して、以下の課題がある。 スマートフォン毎に仕様が異なる スマートフォンに向けた最適なユーザインターフェースが求められる - PowerPoint PPT PresentationTRANSCRIPT
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 ブラウザで動作可能
PhoneGap 2.0.0 ・ HTML 、 JavaScript 、 CSS で作られた Web アプリケーションをラップしてカメラや GPS などネイティブ API を呼び出す・ iOS 、 Android 、 Window Phone 7 など他多数あり
iUi 0.4(現在開発中止 )
・ Web アプリを iPhone のネイティブアプリのような UI にする JavaScript ライブラリ・ UI の表示に JavaScript コード記述は不要
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 のライブラリ構成
{contextpath}/ ├css/ │ └ jquery.mobile-{version}.css
├js/ │ ├jquery.mobile-{version}.js │ └jquery-{version}.js └html
jquery-mobile を構成するライブラリはたった３ファイル！！・ jquery jquery⇒ の JS ファイル・ jquery-mobile jquery⇒ を使った mobile 用 JS ファイルと CSS ファイル
jquery-mobile の基本構成①
<!DOCTYPE html><html><head>
</head><body>
</body</html>
jquery-mobile を使った画面の基本構成はこれだけ。
jquery 、及び、 jquery-mobile の js 、 css を読み込み。
divタグ (page部 )
divタグ (header部 )
divタグ (content部 )
divタグ (footer部 )
必須
任意
必須
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使用時の画面遷移はこうなっている。
<!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>
</div>
</body</html>
<!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>
</div></body</html>
①Ajaxで要求
②data-role=“page2”のみ取得
③DOMのbody要素内に追加
sample1.html sample2.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.c
ss を使用する。（ 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;