jQuery Mobile について

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フレームワークの動向 他のモバイルWebフレームワークはどのようなものがあるのか？

jquery-mobileの特徴 他のモバイルWebフレームワークと比べて、jquery mobileのメリット／デメリットは？

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使用時の画面遷移はこうなっている。 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> </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要素内に追加

注意② ソースの記述場所に注意！！１．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;

jQuery Mobile について