JQuery Mobile について 作成日：２０１２年１０月１９ 日 作成者：石川. 本課題の目的 スマートフォンのシェアが急増するに伴い、これまでの PC 用の業務ア プリ ケーションをタブレット端末対応させたり、フィーチャフォン用のサ イトをスマ ートフォン対応させたりといったニーズが高まるなどして、スマート.

Presentation on theme: "JQuery Mobile について 作成日：２０１２年１０月１９ 日 作成者：石川. 本課題の目的 スマートフォンのシェアが急増するに伴い、これまでの PC 用の業務ア プリ ケーションをタブレット端末対応させたり、フィーチャフォン用のサ イトをスマ ートフォン対応させたりといったニーズが高まるなどして、スマート."— Presentation transcript:

1 jQuery Mobile について 作成日：２０１２年１０月１９ 日 作成者：石川

2 本課題の目的 スマートフォンのシェアが急増するに伴い、これまでの PC 用の業務ア プリ ケーションをタブレット端末対応させたり、フィーチャフォン用のサ イトをスマ ートフォン対応させたりといったニーズが高まるなどして、スマート フォン対応 案件も増加してきている。 このようなニーズに対して、以下の課題がある。 スマートフォン毎に仕様が異なる スマートフォンに向けた最適なユーザインターフェースが求められ る 上記を解決する手段の１つとして、『 jQuery Mobile 』に注目し、ス マートフォ ンの開発案件へ適用できるように、最低限の基礎知識を押さえる事を 目的と しています。

3 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 （コンテンツデリバリネットワーク）でも配信されて いる。

4 Web アプリとネイティブアプリとの違い そもそもスマートフォンにおいて Web アプリケーションとネイティブのアプリ ケーション の違いは何なのか？ № トピック Web アプリネイティブアプリ 1 インストール作業の有無不要必要 2 クロスプラットフォームの実現可能制限付き可能 3 アプリの公開、非公開の制御可能制限付き可能 4 ビジネスモデル（課金）の自由 度 自由度は高い自由度は低い 5 アプリストアからの導線の期待できないできる 6 アプリストアの課金モデルの利 用 できないできる 7 デバイス機能をフル活用できないできる 8 動作速度の速さ遅い早い 9 オフラインでの動作制限付き可能可能

5 他のモバイル Web フレームワークの動向 他のモバイル Web フレームワークはどのようなものがあるのか？ フレームワーク名バージョ ン 特徴 Sencha Touch1.1/2.0.1.1 ・ HTML5 モバイル JavaScript フレームワーク (2 系は 1 系を作り直して性能を向上 ) ・ UI の表示に JavaScript コードの記述が必要 ・ iOS 、 Android などの WebKit ブラウザで動作可能 jQTouch1(beta 4rc) ・ Web アプリを iPhone のネイティブアプリのよう な UI にする jQuery の Plug-in である JavaScript フレー ムワーク ・ UI の表示に JavaScript コード記述は不要 ・ iOS 、 Android などの WebKit ブラウザで動作可能 PhoneGap2.0.0 ・ HTML 、 JavaScript 、 CSS で作られた Web アプリ ケーションをラップしてカメラや GPS などネイ ティブ API を呼び出す ・ iOS 、 Android 、 Window Phone 7 など他多数あり iUi0.4 ( 現在開発中止 ) ・ Web アプリを iPhone のネイティブアプリのよう な UI にする JavaScript ライブラリ ・ UI の表示に JavaScript コード記述は不要

6 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 でコンテ ンツの色や背景色は可能だが、ボタンなど形状に関わる変更はできない） ・低スペックデバイスでは動きが遅い

7 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 ファイル

8 jquery-mobile の基本構成① </body jquery-mobile を使った画面の基本構成はこれだけ。 jquery 、及び、 jquery-mobile の js 、 css を読み込み。 div タグ (page 部 ) div タグ (header 部 ) div タグ (content 部 ) div タグ (footer 部 ) 必須 任意 必須

9 jquery-mobile の基本構成② <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> forefrontier title. ヘッダー メインコンテンツ フッター

10 どのように動いているのか？ Google Chrome の Developer Tools で html ソースを確認してみると・・・。

11 注意① JavaScript の読み込み順序に注意！！ １． jquery ライブラリ ２．その他外部 JavaScript （あれば） ３． jquery mobile 初期化用スクリプト（ユーザ作成） ４． jquery mobile ライブラリ ５．通常の JavaScript （ユーザ作成） 上記以外の順序で読み込みすると正しく動作しない可能性があります。

12 画面遷移の仕組み jquery-mobile の画面遷移の仕組みはどうなっているのか？ sample1.htmlsample2.html

13 画面遷移の仕組み Ajax 使用時の画面遷移はこうなっている。 ヘッダー１ メインコンテンツ１ 次へ フッター１ </body ヘッダー２ メインコンテンツ２ 前へ フッター２ </body ① Ajax で 要求 ② data- role=“page2” のみ取得 ③ DOM の body 要素内 に追加 sample1.htmlsample2.html

14 注意② ソースの記述場所に注意！！ １． jquery mobile の html ソースは data-role の要素の中に記述すること。 ⇒ ２画面以降の画面（ DOM ）は Ajax で HTML を取得し、画面をレンダリングし ている ため、 data-role=“page” で定義された要素以外は無視される。 ２．同様に head 要素内に直接 タグで JavaScript コードは記述しないこと。 ⇒画面リロード（ブックマーク起動）時に JavaScript や CSS の処理が必要とな るため 全てのページに同一の JavaScript ファイル、及び、 CSS ファイルを読み込む ように するのが望ましい。

15 イベント処理の仕組み jquery-mobile のイベント処理の仕組みはどうなっているのか？ （参考： http://screw-axis.com/2012/01/20/jquery-mobile-pageevent-cheatsheet/ ） http://screw-axis.com/2012/01/20/jquery-mobile-pageevent-cheatsheet/

16 注意③ イベント発生の仕組みに注意！！ １． jquery mobile は、 jquery のイベントと混同しないようにすること。 ⇒ jquery で使っていた ${document}.ready 、 ${document}.bind 、 {document}.live など は、 Ajax を使った時に意図しない時に発生しないため使用しない方が良い。 ２． Ajax の使用・未使用で、発生しないイベントがあるので注意。 ⇒ Ajax を使用しない場合、外部からのランディングと同じイベント発生となる。 Ajax を使用時は内部的に DOM をキャッシュしているためで、 Ajax を未使用時 や外 部からのランディングでは DOM のキャッシュが利用されず毎回 DOM を構築 している ため。 （例）

17 パフォーマンスチューニング（問題点） モバイル端末を使用する際、依然として以下の問題を考える必要がある。 ■ 端末の性能の低さ（特に一昔前の端末） ■ ネットワーク帯域が狭い ■ 場所によっては回線が繋がらない

18 パフォーマンスチューニング（対策） 性能を向上させる対策として、以下の方法がある。 １．通信量の削減 ２．クリックレスポンスの向上 ３．遅延ロードで必要なデータを取得 ４．フォームの遅延ロード ５．スクリプトの遅延ロード ６．画面のプリフェッチ ７． DOM キャッシュの使用 ８．アニメーション無効化 ９． jquery mobile のエンハンス無効化 （色の意味） 青： jquery mobile 以外でも適用可能。 緑： jquery mobile 固有の対策。

19 パフォーマンスチューニング（対策） 【通信量の削減】 ライブラリを利用する際、 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 によるデータ転送時に圧縮

20 パフォーマンスチューニング（対策） 【 クリックレスポンスの向上】 Android ではブラウザ標準の click イベントをイベント処理を行うと若干もたつく。 jquery mobile の vclick や tap イベントで代用することで反応が早くなる（らし い） 。 【遅延ロードで必要なデータを取得】 大量データや重い画像データを表示する際、時間がかかってもユーザにストレ スを与 えないように、最初に最小限の画面を表示し、必要時に該当データを取得・表 示を行 う遅延ロードを考慮する。 【フォームの遅延ロード】 フォーム内のコンポーネントも遅延ロードを行い必要な時に表示を行う。 なお、コンポーネントを動的に生成して追加した場合、 jquery mobile のスタイ ルが適 用されず通常の html が表示されてしまうので、以下のコードを記述すること。 （例） ${#hoge}.trigger(“create”);

21 パフォーマンスチューニング（対策） 【 スクリプトの遅延ロード 】 大きなサイズの JavaScript ライブラリを使用する場合、 script タグを利用して全 部読み 込みするよりも、 一旦画面を表示した後、スクリプトを読み込む事でレスポン スがよく なる。 （例） $.getScript(“http://hostname/scriptname.js, function(dta, status) { // 読み込み後の処理 }); 【 画面のプリフェッチ 】 jquery mobile のプリフェッチ機能を利用する事で画面表示している間に次の画 面の データを読み込む事ができる。 （例） 次のページ

22 パフォーマンスチューニング（対策） 【 DOM キャッシュの使用 】 一度表示した画面の DOM をキャッシュしておき、画面表示時にキャッシュした DOM を 使用できます。 （例） $(document).on(“mobileinit”, function() { $.mobile.page.prototype.options.domCache = true; } 特定の画面のみのキャッシュも可能 （例） なお、 HTML5 から新たに追加されたアプリケーションキャッシュを利用する事 で、ネッ ト環境に繋がっていないでも Web アプリを動作も可能だが、以下の注意点が必 要。 ・動的に HTML が変更されたり、 DB のデータを表示するような画面には不可。 ・更新チェック仕組みを設ける必要がある。

23 パフォーマンスチューニング（対策） 【アニメーションの無効化】 jquery mobile はデフォルトでアニメーションするように設定されているが、以 下の様に してアニメーションを無効化することで動作を軽くする事も可能。 （例） $.mobile.defaultPageTransition = ‘none’; 【 jquery mobile のエンハンス無効化 】 これを無効化すると jquery mobile を使うメリットが半減しますが・・・。 リッチなコンテンツを捨て、各ブラウザ本来の見た目になるが、フォームのエ ンハンス （ JavaScript による jquery mobile のスタイルの適用）を無効にする事も可能。 （例） $.mobile.ignoreContentEnabled = true;