Movatterモバイル変換

jQuery Mobile入門白石俊平 @Shumpei

自己紹介 株式会社オープンウェブ・テクノロジー代表 シーエー・モバイル株式会社 Web先端技術フェロー HTML5とか勉強会主催、html5j.org管理人 Google API Expert (HTML5) Microsoft Most Valuable Professional 2011 (IE)

この資料について テキストとして、オライリー刊「jQuery Mobile」を使用します。 ハンズオンの部分は、オライリーのサイトからサンプルをダウンロードして実践してください。 とはいえ、書籍が手元になくても、この資料だけで学べることを目指しました。

jQuery Mobileとは スマートフォン向けのWebサイト開発フレームワーク 現在のバージョンは1.0.1  1.1が現在リリース候補に

jQuery Mobileの特徴 ネイティブアプリに近い操作感 テーマの切り替えが可能 JavaScriptの知識がなくてもそこそこ使える jQueryに依存している マルチプラットフォーム

ネイティブアプリに近い操作感 CSS/JavaScriptを駆使して、「ネイティブアプリに近い」操作感を実現する  UIコンポーネント・・・フォーム要素やリストなど、用意されているコンポーネントがすべてブラウザネイティブのUIに近づけてあり、操作しやすい  ページ遷移がなめらかなアニメーションで実現される（画面のリフレッシュが発生しない） jQuery Mobileのドキュメントがデモになっている。

テーマの切り替えが可能 jQuery Mobileは、CSSの切り替えのみで大幅にUIを変更することが可能。  色合いを変えるだけならば「スウォッチ」の変更だけで可能

JavaScriptの知識がなくてもそこそこ使える マークアップに特別な属性（data-*属性）を加えていくだけで、簡単にスマートフォン対応サイトを作成できる。

jQueryに依存している jQueryに強く依存している。 バージョン1.0.1では、jQuery1.6系に対応。 バージョン1.1（現在はまだ正式リリース前）では、jQuery1.7系に対応。 少し凝ったことをやるなら、jQueryの知識があったほうが良い。

マルチプラットフォーム デスクトップを含め、22のプラットフォームに対して同様のユーザ体験を提供できる  Android 2.1-4.0  iOS 3.2-5.0 プログレッシブ・エンハンスメントのアプローチにより、古いブラウザに対しても最低限の情報提供は行える。

jQuery Mobileを使用したサイトは増加中 DODA、マイナビバイト、マイナビ派遣、じゃらんnetなど、続々と利用事例は増加中 jQuery Mobileを使った国内スマホサイトまとめ 大手によって採用されていることからも、安心して使えるフレームワーク。

jQuery Mobileをはじめよう

jQuery Mobileをはじめよう インストール はじめてのjQuery Mobileページ 2ページからなるWebサイト

準備作業 XAMPPのインストール jQuery Mobileのサンプルをダウンロード サンプルをXAMPP/htdocs内に展開

jQuery Mobileのインストール  JavaScriptとCSSを読み込むだけ  CDNを利用する場合<link rel="stylesheet"href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" /><script src="http://code.jquery.com/jquery-1.6.4.min.js"></script><scriptsrc="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>  ファイルをダウンロードし、自分のサイトで配信することも可能

はじめてのjQuery Mobileページ ヘッダとフッタを持つjQueryページを作ってみましょう。

はじめてのjQuery Mobileページ  1-1.htmlをコピーして1-1a.htmlとし、body要素内に以下のコードを記述してください。<section id="page1" data-role="page"> <header data-role="header"><h1>jQuery Mobile</h1></header> <div class="content" data-role="content"> <p>はじめてのページ!</p> </div> <footer data-role="footer"><h1>O'Reilly</h1></footer></section> 結果は1-2.htmlと同じになります。

はじめてのjQuery Mobileページ  ポイント  data-role属性を使用して、要素に役割を与えている（page, header, content, footer）  jQuery Mobileはdata属性を多用します<section id="page1" data-role="page"> <header data-role="header"><h1>jQuery Mobile</h1></header> <div class="content" data-role="content"> <p>はじめてのページ!</p> </div> <footer data-role="footer"><h1>O'Reilly</h1></footer></section>

2ページからなるWebサイト ページ遷移のあるWebサイトを作成してみましょう。

2ページからなるWebサイト  1-1a.htmlのbody要素内に、2ページ目を追加しましょう。<section id="page2" data-role="page"> <header data-role="header"><h1>jQuery Mobile</h1></header> <div class="content" data-role="content"> <p>2ページ目</p> </div> <footer data-role="footer"><h1>O'Reilly</h1></footer></section>  page1に、page2へのリンクを追加しましょう。<p><a href="#page2">2ページ目へGo!</a></p> 結果は1-3.htmlと同じになります。

2ページからなるWebサイト ポイント  1ページ=1ブロック  ページ間のリンクは、スムーズなアニメーションで実現される  すべてのページが一意なURLを持ち、戻るボタンで戻ることが出来る。

アプリケーションの構造とナビゲーション

内部ページと外部ページ jQuery Mobileにおけるページとは、data- role="page"が付与されたブロック要素。 すべてのページを1枚のHTMLに収めることができるが、HTMLが巨大になる ページを外部のファイルに記述し、必要に応じてロードすることもできる。  →外部ページ

内部ページの利用 1-1a.htmlをコピーして、2-1a.htmlとしてください。（フォルダはchapter-2に置いてください） ページを追加して3ページとし、「1P→2P→3P→1P」と遷移するようにリンクしてください。  テキストのP.11を参照結果は2-1.htmlと同じになります。

外部ページの利用  今作成した2-1a.htmlの3ページ目に、以下のリンクを追加しましょう。<p><a href="external.html">外部ページへGo!</a></p> 結果は2-2.htmlとほぼ同じになります。

外部ページの利用 ポイント  外部ページはAjaxで自動的にロードされる  ロードされたページは元ページのDOMに組み込まれる  ID属性の衝突が発生しないように注意！  外部ページの中で読み込まれるのは最初のページ（data-role="page"が付与されたブロック）のみ。それ以外の部分は無視される。

ダイアログ ダイアログの指定方法  ダイアログのページにdata-role="dialog"と指定する  リンクにdata-rel="dialog"と指定する

ダイアログ 2-2a.html のページ2をダイアログにしてみましょう。

ページ遷移のアニメーション ページ遷移のアニメーションは変更できる  data-transition・・・アニメーションの種類を指定  data-direction・・・"reverse"と指定すれば、アニメーションが逆方向に

ページ遷移のアニメーション 2-1a.htmlを題材に、様々なアニメーションを試してみましょう。 data-transitionに指定可能な値 fade flip pop slide slidedown slideup

ページの要素 リストビュー ナビゲーションバー ヘッダー・フッター ボタン チェックボックスとラジオボタン フリップトグル 選択メニュー スライダー レイアウトグリッド

リストビュー スマホで一般的な一覧UIを簡単に実現できる  読み取り専用の一覧  他のページにジャンプする一覧  リストに区切りを入れる  リストビューを入れ子で指定する  リスト項目の分割  カウントのバブル表示  サムネイルとアイコン

読み取り専用のリストビュー data-role="listview"を指定する 3-1.htmlを3-1a.htmlにコピーして、ブラウザでアクセスしてみましょう。

読み取り専用のリストビュー ポイント  ul/ol要素にdata-role="listview"を指定する

リストビューの項目から他のページにジャンプする  3-1a.htmlを修正して、li要素の内容をリンクにしましょう。<ul data-role="listview"> <li><a href="#">項目</a></li> …</ul>

リストに区切りを入れる  3-1a.htmlを修正して、リストに区切りを入れましょう。  data-role="divider"を指定したli要素を追加します。<ul data-role="listview"> <li data-role="divider">区切り</li> <li><a href="#">項目</a></li> …</ul>

リストビューを入れ子で指定する リストのli要素内に、更にul/ol要素を記述すると、入れ子構造の中をインタラクティブに移動できる

リストビューを入れ子で指定する  3-1a.htmlを修正して、番号付きのリストを、番号なしのリストの入れ子にしましょう。<ul data-role="listview"> ... <li> <h3>番号付きの箇条書き</h3> <ol data-role="listview"> <li><a href="#">項目</a></li> <li><a href="#">項目</a></li> <li><a href="#">項目</a></li> </ol> </li></ul>

リスト項目の分割 リストのli要素内に、リンクを２つ以上並べると、最後のリンクがボタンに変化する 3-1a.htmlを修正して、li要素に2つ以上のa要素が含まれるようにしてみましょう。

カウントのバブル表示 リストのli要素内に、ui-li-countというクラスを持つインライン要素を含めると、バブル表示される 3-1a.htmlを修正して試してみましょう。 <li> <a href="#">項目</a> <span class="ui-li-count">3</span> </li>

ナビゲーションバー リンクのグループをタブ、もしくはボタン表示することができる。

ナビゲーションバー 1-2.htmlをコピーして3-9a.htmlを作成し、編集します。 以下のコードをheader要素内に記述しましょう。 <nav data-role="navbar"> <a href="#">1</a> <a href="#">二</a> <a href="#">さん</a> </nav> 上記のリンクを、順序なしリスト（ul）で囲み、見た目の違いを確認しましょう。

ヘッダー・フッター data-roleにheader/footerと指定すれば、ヘッダとフッタを作れます。 ヘッダとフッタは、以下のような表示方法を行えます。  標準・・・フッタの位置は、コンテンツの高さに依存する  固定・・・ヘッダ・フッタが常に画面端に固定される。data-position="fixed"を指定する  フルスクリーン・・・コンテンツがフルスクリーン表示され、タップするとヘッダー・フッターが表示される。ページにdata-fullscreen="true"を指定する。

ヘッダー・フッター 1-2.htmlをコピーして3-10a.htmlを作成し、編集します。 固定モードを試しましょう。  ヘッダ・フッタにdata-position="fixed"を指定します。 フルスクリーンモードを試しましょう。  固定モードの状態で、ページに対してdata- fullscreen="true"を指定します。

フォーム要素 jQuery Mobileでは、様々なフォーム要素を自動的にモバイル用に最適化してくれる。 フォーム要素のデモ

ボタン input要素/button要素によるボタンは、ユーザが押しやすいサイズのUIへと勝手に変換されます。 data-role="button"とすることで、任意の要素をボタンに見せることができる。 ボタンの幅をコンテンツに合わせるには、 data-inline="true"の指定が必要

ボタン  1-2.htmlをコピーして3-13a.htmlを作成し、編集します。  以下のコードをコンテンツ領域に記述し、様々なボタンを試しましょう。<a href="#" data-role="button">リンクベースのボタン</a><input type="submit" value="送信" data-inline="true"><input type="reset" value="リセット" data-inline="true"> 結果は3-13.htmlと同じになります。

ボタンのコントロールグループ data-role="controlgroup"を付与したブロック要素で、ボタンをグループ化することができる。 data-type="horizontal"を指定すると横向きにボタンが並ぶ。

ボタン 1-2.htmlをコピーして3-14a.htmlを作成し、編集します。 以下のコードをコンテンツ領域に記述し、様々なボタンを試しましょう。 <div data-role="controlgroup"> <span data-role="button">リンクベースのボタン</span> <span data-role="button">リンクベースのボタン</span> <span data-role="button">リンクベースのボタン</span> </div>

ボタンのコントロールグループ 3-13a.htmlを編集し、

（ボタンの）アイコン ボタンにdata-icon属性を指定すると、アイコン付きのボタンにできる。 data-icon属性で指定できる値 alert arrow-d arrow-l arrow-r arrow-u back check delete forward gear grid home info minus plus refresh search star また、data-iconpos属性でアイコンの表示位置を変更できる。  bottom/left/right/top/notext(アイコンのみ)

（ボタンの）アイコン 1-2.htmlをコピーして3-15a.htmlを作成し、編集します。 以下のコードをページ内に記述しましょう。 <button data-icon="gear" data-iconpos="left"> ボタン </button> アイコンや表示位置をいろいろ変更してみましょう。

カスタムアイコン カスタムのアイコンを使用するには、data- icon属性に定義済み以外の値（例えばdata- icon="smile"を使用する。 →すると、そのボタンには「ui-icon-smile」というクラスが付与される

カスタムアイコン 3-15a.htmlを編集します。 以下のコードをページ内に記述しましょう。 <style> .ui-icon-smile { background-image: url(http://bit.ly/smileicon); background-size: 18px 18px; } </style> <button data-icon="smile" data-iconpos="left"> ボタン </button>

ヘッダ上のボタン ヘッダに、ボタン化したリンクを配置することができる。  a要素を２つまで記述でき、左右に一つずつ配置される。  ボタンを１つだけ、右側に配置したい場合は、ui- btn-rightというクラスを使用する

ヘッダ上のボタン 1-3.htmlをコピーしてheaderButtons.htmlを作成し、編集します。 以下のコードをヘッダに記述し、結果を確認します。<a href="#" data-role="button" data-icon="gear" data-iconpos="notext" class="ui-btn-right">設定</a>

戻るボタンの自動挿入 ページにdata-add-back-btn="true"と記述すると、ヘッダに戻るボタンが自動的に挿入されます。 headerButtons.htmlの2ページ目に戻るボタンを追加しましょう。

チェックボックスとラジオボタン 特に何もしなくても、ユーザが押しやすいUI になります。 3-16.htmlを表示し、ソースを確認しましょう。

フリップトグル select要素に、data-role="slider"を指定すると、オン／オフを切り替えられるスイッチを作成できます。 3-17.htmlを表示し、ソースを確認しましょう。

フィールドのグループ化 ラベルとフィールドのセットを表すためのブロックを作成できる data-role要素に"fieldcontain"を指定した div/fieldset要素でフォーム要素を囲む <div data-role="fieldcontain"> <label for="username">ユーザ名:</label> <input type="text"> </div>

選択メニュー select要素は、data-native-menu="false"を指定することで、jQuery Mobile独自の選択メニューを利用できる。 3-20.htmlを表示し、ソースを確認しましょう。

スライダー rangeタイプのinput要素を用いることで、スライダーUIが表示されます。 3-21.htmlを表示し、ソースを確認しましょう。

レイアウトグリッド グリッドレイアウトを行うためのCSSフレームワークが用意されています。 ui-grid-[a-e]でグリッドのカラム数を指定します。ui-grid-aは2列です。 グリッド内にui-block-[a-e]でセルを配置していきます。ui-block-aは、行を折り返す効果を持ちます。

レイアウトグリッド 1-2.htmlをコピーして3-22a.htmlを作成し、以下のコードを記述します。 <style> *[class^='ui-block-'] p{ border: 1px solid gray; } </style> <div class="ui-grid-a"> <div class="ui-block-a"><p>1-1</p></div> <div class="ui-block-b"><p>1-2</p></div> <div class="ui-block-a"><p>2-1</p></div> </div>

テーマとスウォッチ テーマ・・・インターフェース全般 スウォッチ・・・テーマの色 data-theme属性を用いて、スウォッチを切り替えられる。  デフォルトテーマではa-eを選択できる  初期状態ではc

テーマとスウォッチ 3-1.html（リストビューのサンプル）をコピーして4-1a.htmlを作成し、様々なテーマを試してみましょう。  data-theme属性にa-eのいずれかを指定します。  ページだけでなく、リストビューなどにも指定できます。

スウォッチをカスタマイズする 4-1a.htmlに、以下のスタイルを追加してください（jQuery MobileのCSSよりも後に記述してください。 リストビューのテーマをaに設定してください。 <style> .ui-btn-up-a { background-image:-webkit-linear-gradient(red, #333); } </style>

スウォッチをカスタマイズする スウォッチを作成・編集できる「ThemeRoller」というWebアプリがある。

スウォッチをカスタマイズする ThemeRollerを使用して作成したテーマをダウンロードして読み込み、利用してみましょう。左上のメニューからテーマをダウンロードできる

スウォッチをカスタマイズする jQuery Mobile Bootstrapという、Twitter Bootstrapを意識したテーマが利用可能 こちらもダウンロードして使ってみましょう。

:jqmData()セレクタ jQuery Mobileはdata-属性を多用するため、 jqmData()という特別なセレクタが用意されている。 // すべてのページを取得する $(':jqmData(role="page")') // すべてのリストビューを取得する $(':jqmData(role="listview")')

UIウィジェットが持つメソッド 各UIウィジェットは、jQuery UIと同様にメソッドを使って操作できるリストビュー listview() スライダー slider()テキスト入力 textinput() 選択メニュー selectmenu()ボタン button() 更に、個々のウィジェットに対して以下のようなメソッドを使用できる。  enable/disable/refresh

UIウィジェットが持つメソッド 1-13.htmlをコピーしてformMethods.htmlを作成し、以下のコードを入力してください。 <script> $(function() { var linkButton = $('a:jqmData(role="button")'); var submitButton = $('input[type="submit"]'); var resetButton = $('input[type="reset"]'); linkButton.click(function() { resetButton.button("disable"); }); submitButton.click(function() { resetButton.button("refresh"); }); }); </script>

$.mobile.changePage(to, options) ページ遷移を行う  to・・・URL文字列、もしくはページをラップした jQueryオブジェクト  options（省略可）（主なもののみ）  changeHash: URLのハッシュを変更するか(true)  reloadPage: ページを強制的に再読み込みするか(false)  showLoadMsg: ローディングメッセージを表示するか (true)  role: ページのdata-role属性の値を指定  transition: 遷移アニメーション ($.mobile.defaultPageTransition)  reverse: 遷移を逆向きにするか(false)

$.mobile.changePage(to, options) 1-3.htmlをコピーしてchangePage.htmlを作成し、2ページ目へのリンクを以下のボタンに差し替えてください。 <button onclick=" $.mobile.changePage( '#page2', {transition: 'flip'});"> 2ページ目へGo! </button>

$.mobile.showPageLoadingMsg()$.mobile.hidePageLoadingMsg() jQuery Mobileの「読み込み中」ダイアログを表示あるいは非表示にする

タッチイベント タッチスクリーンに対するイベント。ブラウザごとの差異を抽象化している  tap・・・タップされた  taphold・・・1秒以上タップされたまま  swipe・・・スワイプされた  swipeleft・・・左にスワイプされた  swiperight・・・右にスワイプされた

仮想マウスイベント PCのマウスイベントとタッチイベントを統一して扱える  vmouseover  vmousedown  vmousemove  vmouseup  vclick  vmousecancel

APIを利用したサンプル(1) 5.2.1.1のサンプル（「スワイプイベントからページ遷移を発生させる」）を書きなおしたもの。 1-3.htmlをコピーしてswipePages.htmlを作成し、次のページに示すスクリプトをhead要素内に挿入してください。

APIを利用したサンプル(1)<script> $(function() { var pages = $(':jqmData(role="page")'); pages.each(function() { $(this).bind('swipeleft', function() { var next = $(this).next(); if (next.length === 0) next = $(pages[0]); $.mobile.changePage(next); }); $(this).bind('swiperight', function() { var prev = $(this).prev(); if (prev.length === 0) prev = $(pages[pages.length - 1]); $.mobile.changePage(prev, { reverse: true }); }); }); });</script>

外部ページの読み込みに伴うイベント pagebeforeload pageload pageloadfailed

ページ遷移に伴うイベント pagebeforehide pagebeforeshow pagehide pageshow pagebeforechange pagechange pagechangefailed

ページの生成・削除に伴うイベント pagebeforecreate・・・初期化直前 pagecreate・・・DOM構築直後 pageinit・・・jQMによる拡張完了後 pageremove・・・ページ削除時のイベント。外部ページは、ユーザがそこを離れると削除される。

APIを利用したサンプル(2) ページに関するイベントをコンソールに表示します。 2-2.htmlをコピーしてpageEvents.htmlを作成し、次のページに示すスクリプトをhead要素内に挿入してください。

APIを利用したサンプル(2)<script>$(function() { $(':jqmData(role="page")').live('pagebeforecreate',function() { console.log('ページ' + this.id + 'においてpagebeforecreateイベントが発生しました!'); $(this).bind( 'pagecreate pagebeforehide pagebeforeshow' + 'pagehide pageshow pagebeforechange pagechange', function(e) { console.log('ページ' + this.id + 'において' + e.type + 'イベントが発生しました!'); }); });});</script>

その他のイベント updatelayout・・・UIコンポーネントのレイアウトが変化すると呼び出される（検索機能付き orientationchange・・・デバイスの方向が変化した際呼び出される アニメーションの終了

jQuery Mobileの設定 主な設定項目（完全なリストはこちら）  activeBtnClass: アクティブなボタンのクラス  activePageClass: アクティブなページのクラス  defaultPageTransition: デフォルトのページ遷移アニメーション  defaultDialogTransition:デフォルトのダイアログ表示アニメーション  loadingMessage: ローディング中の文字列  ns: 名前空間。data属性に文字列が追加される。（例えば、ns='my'とすると、data-my-roleなどになる。）

jQuery Mobileの設定 jQuery Mobileが読み込まれるより先に、 documentにmobileinitイベントのハンドラを指定し、その中で$.mobileオブジェクトに設定項目を指定します。 次のページの例を見てください。

APIを利用したサンプル(1) 1-3.htmlをコピーしてconfig.htmlを作成し、次のページに示すスクリプトをhead要素内に挿入してください。 <script src="jquery.js"></script> <script> $(document).bind('mobileinit', function() { $.mobile.defaultPageTransition = 'flip'; }); </script> <script src="jquery.mobile.js"></script>

jQuery Mobileでつくってみよう

6章のサンプルを作ってみましょう 本のソースコードとかけ離れてしまってもいいので、自分で一から作ってみましょう！ 1-3.htmlをコピーしてmy_jqmTweet.htmlを作成し、編集していきましょう。

まず、画面のモックを作る このアプリは、3画面からなります。  ツイート一覧画面  ツイート詳細画面  設定画面

ツイート一覧画面  まずはリストビューを使って、右のようなUIを実現しましょう。  画面のIDは "pageTweetList"としましょう。<ul data-role="listview"> <li><a href="#">ツイート!</a></li> <li><a href="#">ツイート!</a></li> <li><a href="#">ツイート!</a></li></ul>

ツイート詳細画面 まずは画面に「ツイート!」という文字列が出ているだけ、で構いません。 画面のIDは「pageTweetDetail」とし、一覧画面から遷移するようにしましょう。

設定画面  まず、設定画面に飛ぶためのボタンを一覧画面のヘッダに作成します。  一覧画面のheader要素内に、以下のコードを記述してボタンを作りましょう。<a href="#pageSettings" data-transition="flip" data-role="button" data-icon="gear" data-iconpos="notext" class="ui-btn-right">設定</a>

設定画面 次ページのような見た目になるよう、フォーム要素を配置してください。 ページのIDは"pageSettings"とします。 上のテキストフィールドは、IDを"username" としたtextタイプのinput要素で作ります。 下のテキストフィールドはIDを"slider"とした rangeタイプのinput要素で作ります。min="5", max="50"としてください。

JavaScriptプログラミング 今回は、本に書いてあるコードではなく、白石が独自に書いたコードを使いましょう。  コードが短い（本: 218行、独自版: 53行）  jQuery Mobileにとって、より望ましいコードになっている（$(document).ready()ではなく pageshowを使う、など） 独自版のコードが理解できたら、本のコードにもトライしてみてください。

コードを書く準備 以下のコードを、body要素の一番下に記述してください。 スコープと変数の宣言を行なっています。$(function() { var userName = 'Shumpei', // Twitterのユーザ名 currentTweet = null, // 詳細画面に表示するツイート updateNeeded = true, // 一覧画面の更新が必要か maxCount = 20; // 一覧に表示するツイート数 // 残りのコードはここに記述});

Twitterからツイートを読み込む 一覧画面の表示時に、Ajaxでツイートを読み込みます。// ツイート一覧画面が表示されると呼び出される$('#pageTweetList').live('pageshow', function() { // 更新が必要ない if (!updateNeeded) return; var page = $('#pageTweetList'); var list = page.find('ul').empty(); // ツイートを取得する $.get( 'http://search.twitter.com/search.json?callback=?' + '&rpp=' + maxCount + '&q=from:' + userName, function(data) { // 次のページの処理はここに記述 }, 'json');});

ツイートから一覧を作成 1ツイート=1つのli要素としてリストビューを更新します。var tweets = data.results;tweets.forEach(function(tweet) { var iconSrc = tweet.profile_image_url; var text = tweet.text; var link = $('<a href="#pageTweetDetail"/>'); // リンクをクリックされたら、変数を更新する link.data('tweet', tweet).click(function() { currentTweet = $(this).data('tweet'); }); $('<img/>', {src: iconSrc}).appendTo(link); $('<span/>', {text: text}).appendTo(link); $('<li/>').append(link).appendTo(list);});// リストビューをリフレッシュlist.listview("refresh");updateNeeded = false;

詳細画面を表示する際の処理 リンクをクリックされると、変数currentTweetに該当のツイートが格納されます（前ページ参照） 詳細画面の表示時に、currentTweetの情報をページに書き出します。// 詳細画面が表示されると呼び出される$('#pageTweetDetail').live('pageshow', function() { if (!currentTweet) return; $(this).find(':jqmData(role="content")') .text(currentTweet.text);});

設定画面を表示する際の処理 画面表示時に、設定項目の値を更新します。 設定が変更されたら、変数を変更すると同時にupdateNeeded（一覧の更新が必要かどうかを表すフラグ）をtrueにします。// 設定画面が表示されると呼び出される$('#pageSettings').live('pageshow', function() { $('#username').val(userName).change(function() { userName = $(this).val(); updateNeeded = true; }); $('#slider').val(maxCount).slider('refresh') .change(function() { maxCount = $(this).val(); updateNeeded = true; });});

時間が余ったら ツイートの取得に失敗した際のエラーページを追加してみましょう。  本とは異なり、changePage()メソッドを使ってやってみてください。 テーマを変えてみましょう すべてのページに戻るボタンを追加してみましょう。 本の6.4以降のインターフェース改良にトライしてみましょう。

jQuery Mobileの開発環境 DreamWeaver5.5 codiqa ApplicationCraft

DreamWeaver5.5 デザインを確認しながらコードを編集できる。 data属性の補完に対応している

codiqa ブラウザ上でjQuery Mobileのコードを編集可能 ドラッグ＆ドロップで画面を構築していける

ApplicationCraft ブラウザ上で動作する統合開発環境 ドラッグ＆ドロップで画面を構築していける

jQuery Mobile以外の主なモバイルフレームワーク Sencha Touch Kendo UI PhoneGap

Sencha Touch jQuery Mobileの競合 JavaScriptの知識が必須 デフォルトのUIコンポーネントが美しい ネイティブアプリの作成ツールを備える

Kendo UI Mobile jQuery Mobileとほぼ同じコンセプト ネイティブUIにかなり近い。 営利企業が開発しており、基本的に有償

PhoneGap Web技術（HTML/CSS/JavaScript）で、スマートフォンやタブレットのネイティブアプリを作成するためのフレームワーク DreamWeaverで、jQuery Mobileと組み合わせて開発できる

終わりに jQuery Mobileの魅力は、以下のところにあると考えます。  数分でモックが作れてしまうほどの生産性  カスタマイズ性  オープンソースで、開発が活発 1.1ではパフォーマンスの向上や細かな改善が図られており、今後が非常に期待できるフレームワークでもあります。

ご清聴ありがとうございました。 @Shumpei

Movatterモバイル変換

Change Language

jQuery Mobile入門

Embed presentation

Recommended

More Related Content

What's hot

Viewers also liked

Similar to jQuery Mobile入門

More from Shumpei Shiraishi

jQuery Mobile入門