ポケット詳解 jQuery Mobile辞典

概 要

スマホサイト制作の新手法jQuery Mobileの使い方を豊富な用例を使って解説したリファレンスブックです。毎年数多くのスマートフォンやタブレットが発売されるなか、Web制作の現場は多大な労力と工夫をついやして多彩なデバイスに対応することを求められています。そうしたなか、ほぼすべてのブラウザとプラットフォームに対応できるjQuery Mobileというフレームワークが注目されています。本書は、jQuery Mobileの概要から、実際にスマートフォン用に最適化されたUIを作るための機能の使い方、jQuery Mobileを拡張するためのスクリプトの知識までをリファレンス形式で解説。各種APIとの連携の例も掲載しています。iOSもAndroidも、Windows Phoneも、これ一冊で対応できます!

著者 ハヤシユタカ、原理恵
価格 本体2600円(税別)
ISBN 978-4-7980-3365-5
発売日 2012/5/25
判型 四六
色数 2色
ページ数 432
CD/DVD
対象読者 中級
シリーズ Pocket詳解辞典
表紙イメージ
購入 アマゾンで購入する
楽天で購入する

※リンク先によっては、販売ページが用意されていないことがあります。あらかじめご了承ください。

新しいウィンドウで開く 書籍購入のご案内

サポート

サポート情報は以下からご参照下さい。

サポート情報へのリンク

目次

第1章 jQuery Mobileについて

1-1 「jQuery Mobile」が、モバイルアプリケーション開発を大きく変える

1-2 jQuery Mobileの特徴

1-3 jQuery Mobileクイックスタート

1-4 カスタムデータ属性(data-*属性)とは

1-5 jQuery Mobileの定義済みクラス(ui-*クラス)

1-6 jQuery Mobileサイト設計のポイント

第2章 ページ構築

jQuery Mobileの1ページ

2-1 単一のHTMLでサイトを構築する

data-role="page"、id="ページ名を定義"

data-role="header"

data-role="content"

data-role="footer"

2-2 複数のHTMLでサイトを構築する

data-role="page"、id="ページ名を定義"

data-role="header"

data-role="content"

data-role="footer"

第3章 リンク(ページ遷移)

リンク(ページ遷移)について

3-1 ページリンクを作成する

<a href="#+ページid"></a>

<a href="同ドメインの他ファイル"></a>

3-2 Ajaxを用いないリンク(1)?Ajaxを使用しないと明示する方法

data-ajax="false"

3-3 Ajaxを用いないリンク(2)?外部サイトだと明示する方法

rel="external"

3-4 Ajaxを用いないリンク(3)?外部ドメインへのリンクを記述する

外部URLへリンク

3-5 Ajaxを用いないリンク(4)?target指定をする

target="target名"

3-6 ブラウザの「戻る」リンクを作る

data-rel="back"

3-7 遷移しないリンクを作る

<a href="#"></a>

3-8 ページ遷移エフェクト(1)?slide

data-transition="slide"

3-9 ページ遷移エフェクト(2)?slideup

data-transition="slideup"

3-10 ページ遷移エフェクト(3)?slidedown

data-transition="slidedown"

3-11 ページ遷移エフェクト(4)?pop

data-transition="pop"

3-12 ページ遷移エフェクト(5)?fade

data-transition="fade"

3-13 ページ遷移エフェクト(6)?flip

data-transition="flip"

3-14 ページ遷移エフェクトを逆方向にする

data-direction="reverse"

3-15 DOMキャッシュを使用する

data-dom-cache="true"

3-16 リンクにプリフェッチを使用する

data-prefetch

第4章 レイアウト

レイアウトについて

4-1 グリッドレイアウト

4-1-1 グリッドレイアウトを作成する

class="ui-grid-a"?"ui-grid-d"

class="ui-block-a"?"ui-block-e"

4-1-2 複数行のグリッドレイアウトを作成する

class="ui-grid-a"?"ui-grid-d"

class="ui-block-a"?"ui-block-e"

4-2 開閉パネル

4-2-1 開閉パネルを作る

data-role="collapsible"

4-2-2 開閉パネルを最初から開いておく

data-collapsed="false"

4-2-3 開閉パネルのテーマを設定する

data-theme="テーマ"

data-content-theme="テーマ"

4-3 アコーディオンパネル

4-3-1 アコーディオンパネルを作成する

data-role="collapsible-set"

4-3-2 アコーディオンパネルのテーマを設定する

data-theme="テーマ"

data-content-theme="テーマ"

第5章 ヘッダー

ヘッダーについて

5-1 ヘッダーを作成する

data-role="header"

5-2 ヘッダーに「戻る」ボタンを付ける(マークアップで設定する)

data-add-back-btn="true"

5-3 「戻る」ボタンのテキストを変更する(マークアップで設定する)

data-back-btn-text属性

5-4 「戻る」ボタンのテーマを変更する(マークアップで設定する)

data-back-btn-theme属性

5-5 ヘッダーにボタンを付ける(1)(左側にボタンを配置する)

<a href="#"></a>

5-6 ヘッダーにボタンを付ける(2)(両側にボタンを配置する)

<a href="#"></a>

5-7 ヘッダーにボタンを付ける(3)(右側にボタンを配置する)

ui-btn-rightクラス

5-8 ヘッダーにナビゲーションバーを付ける

data-role="navbar"

5-9 ヘッダーを固定配置する

data-position="fixed"

5-10 ヘッダーをフルスクリーンモードにする

data-position="fixed"、data-fullscreen="true"

第6章 フッター

フッターについて

6-1 フッターを作成する

data-role="footer"

6-2 フッターにボタンを付ける

ui-barクラス

6-3 フッターにナビゲーションバーを付ける

data-role="navbar"

6-4 フッターを固定配置する

data-position="fixed"

6-5 フッターをフルスクリーンモードにする

data-position="fixed"、data-fullscreen="true"

6-6 フッターをパーシステント(共通したフッター)にする

data-position="fixed"、data-id="フッターID"

第7章 ナビゲーションバー

ナビゲーションバーについて

7-1 ナビゲーションバーを表示する

data-role="navbar"

7-2 ナビゲーションバーのボタンにアイコンを表示する

data-icon属性

7-3 ボタンアイコンの表示位置を指定する(1)?テキストの下

data-role="navbar"、data-iconpos="bottom"

7-4 ボタンアイコンの表示位置を指定する(2)?テキストの左

data-role="navbar"、data-iconpos="left"

7-5 ボタンアイコンの表示位置を指定する(3)?テキストの右

data-role="navbar"、data-iconpos="right"

7-6 ナビゲーションバーのテーマを変更する

data-theme属性

第8章 ダイアログ

ダイアログについて

8-1 リンク先をダイアログとして開く

data-rel="dialog"

8-2 ダイアログの表示エフェクトをマークアップで個別変更する

data-transition属性

8-3 ダイアログを「閉じる」ボタンを作る(1)

data-rel="back"

8-4 ダイアログを「閉じる」ボタンを作る(2)(JavaScriptで閉じる)

dialog('close')メソッド

8-5 ダイアログの「閉じる」ボタンのテキストを変更する

data-close-btn-text属性

8-6 コントロールパネル風のダイアログを作成する

data-rel="dialog"、data-transition="slidedown"

8-7 ダイアログの最大幅を指定する

jQuery MobileのCSSの定義済みクラスを上書きする

8-8 ダイアログのタイトルを変更する

data-title属性

8-9 ダイアログのテーマを変更する

data-theme="テーマ名(a?e)"

data-overlay-theme="テーマ名(a?e)"

第9章 ボタン

ボタンについて

9-1 ボタンを表示する

data-role="button"、button要素、input要素(一部)

9-2 「戻る」ボタンを表示する

data-add-back-btn="true"

9-3 ボタンにアイコンを設定する

data-icon="アイコンの形状"

9-4 アイコンの表示位置を指定する(1)(テキストの上)

data-iconpos="top"

9-5 アイコンの表示位置を指定する(2)(テキストの下)

data-iconpos="bottom"

9-6 アイコンの表示位置を指定する(3)(テキストの右)

data-iconpos="right"

9-7 アイコンだけのボタンにする

data-iconpos="notext"

9-8 ボタンをグループ化する(1)(縦方向)

data-role="controlgroup"

9-9 ボタンをグループ化する(2)(横方向)

data-role="controlgroup"、data-type="horizontal"

9-10 四角いボタン形状にする(ボタンの角丸を取る)

data-corners="false"

9-11 ボタンの影を消す

data-corners="false"

9-12 ボタンをインライン化する

data-inline="true"

9-13 ボタンにテーマを設定する

data-theme属性

9-14 (リンク)要素で作成したボタンの使用可/不可を設定する

ui-disabled

第10章 リスト

リストについて

10-1 リストを表示する

data-role="listview"

10-2 リストを角丸にする

data-inset="true"

10-3 番号付きリストを作る

data-role="listview"

10-4 入れ子リスト(リストをネストする)を表示する

ul要素内のli要素の子要素として、さらにul要素を記述

10-5 リンクリストを作る(表示する)

li要素の子要素として<a href="#"></a>を1つ記述

10-6 リストにアイコンを表示する

data-icon属性

10-7 リストにテーマを設定する

data-theme="テーマ名"

10-8 分割リストを作る

li要素の子要素として<a href="#"></a>を2つ記述

10-9 分割リストのアイコンやアイコンのテーマを変更する

data-split-icon属性、data-split-theme属性

10-10 リストにデバイダーを入れる

data-role="list-divider"

10-11 リストのデバイダーのテーマを変更する

data-dividertheme属性

10-12 カウントバブルを表示する

span要素などにui-li-countクラスを指定

10-13 カウントバブルのテーマを設定する

data-count-theme属性

10-14 リストにサムネイル画像を表示する

li要素の子要素としてimg要素を記述

10-15 リストにアイコン画像を表示する

img要素に、ui-li-iconクラスを指定

10-16 リストに見出しを入れる

li要素の子要素としてh1?h6を記述

10-17 リストに説明テキストを表示する

li要素の子要素としてp要素などを記述

10-18 リストの右上に補足テキストを表示する

p要素などにui-li-asideクラスを指定

10-19 リストに検索フィルタを追加する

data-filter="true"

10-20 リストの検索フィルタの入力ヒントを変更する

data-filter-placeholder属性

第11章 フォーム

フォームについて

11-1 フォーム

11-1-1 フォーム要素とそのラベルをセットする

data-role="fieldcontain"、label要素

11-1-2 グループ化されたフォーム部品とラベルをセットする

data-role="fieldcontain"、legend要素

11-1-3 ラベルを非表示にする

ui-hidden-accessibleクラス、ui-hide-labelクラス

11-1-4 自動初期化を拒否する

data-role="none"

11-2 テキスト入力ボックス

11-2-1 テキスト入力ボックスを作成する

type="text"属性

11-2-2 テキスト入力ボックスのテーマを設定する

data-theme属性

11-2-3 入力のヒントを設定する

placeholder属性

11-2-4 検索ボックスを作成する

type="search"属性

11-2-5 パスワード入力ボックスを作成する

type="password"属性

11-2-6 数値入力ボックスを作成する

type="number"属性

11-2-7 URL入力ボックスを作成する

type="url"属性

11-2-8 メールアドレス入力ボックスを作成する

type="email"属性

11-2-9 電話番号入力ボックスを作成する

type="tel"属性

11-2-10 時刻入力ボックスを作成する

type="time"属性

11-2-11 年月日入力ボックスを作成する

type="date"属性

11-2-12 年月入力ボックスを作成する

type="month"属性

11-2-13 週入力ボックスを作成する

type="week"属性

11-2-14 日時入力ボックスを作成する

type="datetime"属性

11-2-15 ローカル日時入力ボックスを作成する

type="datetime-local"属性

11-2-16 色指定入力ボックスを作成する

type="color"属

11-2-17 テキストエリアを作成する

textarea要素

11-3 スライダー

11-3-1 スライダーを作成する

type="range"属性

11-3-2 スライダーのテーマを指定する

data-theme属性、data-track-theme属性

11-4 トグルスイッチ

11-4-1 トグルスイッチを作成する

data-role="slider"

11-4-2 トグルスイッチのテーマを指定する

data-theme属性、data-track-theme属性

11-5 ラジオボタン

11-5-1 ラジオボタンを作成する

type="radio"属性

11-5-2 ラジオボタンのテーマを指定する

data-theme属性

11-5-3 ラジオボタンを横に並べる

data-type="horizontal"

11-6 チェックボックス

11-6-1 チェックボックスを作成する

type="checkbox"属性

11-6-2 チェックボックスのテーマを指定する

data-theme属性

11-6-3 チェックボックスを横に並べる

data-type="horizontal"

11-7 セレクトメニュー

11-7-1 セレクトメニューを作成する

select要素、option要素

11-7-2 セレクトメニューのテーマを指定する

data-theme属性

11-8 カスタムセレクトメニュー

11-8-1 カスタムセレクトメニューを作成する

data-native-menu="false"

11-8-2 カスタムセレクトメニューを複数選択可能にする

multiple="multiple"

11-8-3 optgroup要素でoption要素をグループ化する

optgroup要素

11-8-4 カスタムセレクトメニューのテーマを設定する

data-theme属性、data-overlay-theme属性

第12章 初期設定

初期設定について

12-1 全体の初期設定

12-1-1 data-*属性に名前空間を設定する

ns

12-1-2 初期化スクリプトの呼出しを手動にする

autoInitializePage

12-1-3 サブページを参照するためのキーを指定する

subPageUrlKey

12-1-4 ページがアクティブになった場合に指定されるクラス名を変更する

activePageClass

12-1-5 ボタンがアクティブになった場合に指定されるクラス名を変更する

activeBtnClass

12-1-6 リンクやフォームにAjaxを利用するかどうかを設定する

ajaxEnabled

12-1-7 リンク要素への自動Ajaxのバインドを有効または無効にする

linkBindingEnabled

12-1-8 ハッシュの管理を有効化または無効化する

hashListeningEnabled

12-1-9 常にハッシュベースのURLを使う

pushStateEnabled

12-1-10 デフォルトのページ遷移エフェクトをまとめて設定する

defaultPageTransition

12-1-11 部分的スクロールのネイティブ機能を有効にする

touchOverflowEnabled

12-1-12 デフォルトのダイアログ表示時の表示エフェクトを設定する

defaultDialogTransition

12-1-13 ページのスクロール位置を記憶する最小距離を設定する

minScrollBack

12-1-14 ページロード中のメッセージを設定する(Ajaxによる遷移の場合のみ)

loadingMessage

12-1-15 ページロードのエラーメッセージを設定する(Ajaxによる遷移の場合のみ)

pageLoadErrorMessage

12-2 個別UIの初期設定

12-2-1 ヘッダーの「戻る」ボタンを初期設定する

$.mobile.page.prototype.options.addBackBtn

$.mobile.page.prototype.options.backBtnText

$.mobile.page.prototype.options.backBtnTheme

12-2-2 ヘッダーのテーマを初期設定する

$.mobile.page.prototype.options.headerTheme

12-2-3 コンテンツのテーマを初期設定する

$.mobile.page.prototype.options.contentTheme

12-2-4 フッターのテーマを初期設定する

$.mobile.page.prototype.options.footerTheme

12-2-5 input要素のtype属性の値を動的に変換する

$.mobile.page.prototype.options.degradeInputs

12-2-6 ボタンの初期設定をする

$.mobile.button.prototype.options.theme

$.mobile.button.prototype.options.corners

$.mobile.button.prototype.options.icon

$.mobile.button.prototype.options.iconpos

$.mobile.button.prototype.options.iconshadow

$.mobile.button.prototype.options.inline

$.mobile.button.prototype.options.shadow

12-2-7 テキスト入力ボックスの初期設定をする

$.mobile.textinput.prototype.options.theme

$.mobile.textinput.prototype.options.disabled

12-2-8 スライダーの初期設定をする

$.mobile.slider.prototype.options.theme

$.mobile.slider.prototype.options.trackTheme

$.mobile.slider.prototype.options.disabled

12-2-9 セレクトメニューの初期設定をする

$.mobile.selectmenu.prototype.options.theme

$.mobile.selectmenu.prototype.options.icon

$.mobile.selectmenu.prototype.options.iconpos

$.mobile.selectmenu.prototype.options.iconshadow

$.mobile.selectmenu.prototype.options.hidePlaceholderMenuItems

$.mobile.selectmenu.prototype.options.shadow

$.mobile.selectmenu.prototype.options.corners

$.mobile.selectmenu.prototype.options.menuPageTheme

$.mobile.selectmenu.prototype.options.overlayTheme

$.mobile.selectmenu.prototype.options.inline

$.mobile.selectmenu.prototype.options.closeText

$.mobile.selectmenu.prototype.options.nativeMenu

12-2-10 チェックボックス・ラジオボタンの初期設定をする

$.mobile.checkboxradio.prototype.options.theme

$.mobile.checkboxradio.prototype.options.disabled

12-2-11 ナビゲーションバーの初期設定をする

$.mobile.navbar.prototype.options.iconpos

12-2-12 ダイアログの初期設定をする

$.mobile.dialog.prototype.options.theme

$.mobile.dialog.prototype.options.closeBtnText

12-2-13 リストの初期設定をする

$.mobile.listview.prototype.options.inset

$.mobile.listview.prototype.options.theme

$.mobile.listview.prototype.options.splitIconTheme

$.mobile.listview.prototype.options.headerTheme

$.mobile.listview.prototype.options.dividerTheme

$.mobile.listview.prototype.options.countTheme

$.mobile.listview.prototype.options.splitIcon

$.mobile.listview.prototype.options.filter

$.mobile.listview.prototype.options.filterPlaceholder

$.mobile.listview.prototype.options.filterCallback

12-2-14 jQuery Mobileの自動初期化対象に含める

$.mobile.UIパーツ.prototype.options.initSelector

12-2-15 jQuery Mobileの自動初期化対象から外す

$.mobile.UIパーツ.prototype.options.keepNative

第13章 プロパティ

13-1 現在表示されているページを参照するプロパティ

$.mobile.activePage()

13-2 最初のページを参照するプロパティ

$.mobile.firstPage()

第14章 イベント

イベントについて

14-1 ページ関連イベント

14-1-1 ページ読み込みイベント

14-1-1-1 ページ読み込み前イベント

pagebeforeload

14-1-1-2 ページ読み込み後イベント

pageload

14-1-1-3 ページ読み込み失敗イベント

pageloadfailed

14-1-2 ページ遷移イベント

14-1-2-1 ページ遷移前イベント

pagebeforechange

14-1-2-2 ページ遷移後イベント

pagechange

14-1-2-3 ページ遷移失敗イベント

pagechangefailed

14-1-3 ページ表示イベント

14-1-3-1 ページ表示前イベント

pagebeforeshow

14-1-3-2 ページ表示後イベント

pageshow

14-1-3-3 ページ非表示前イベント

pagebeforehide

14-1-3-4 ページ非表示後イベント

pagehide

14-1-4 ページ初期化イベント

14-1-4-1 ページ初期化前イベント

pagebeforecreate

14-1-4-2 ページ初期化後イベント

pagecreate

14-1-4-3 ページ初期化イベント

pageinit

14-1-4-4 ページ削除時イベント

pageremove

14-2 タッチイベント

14-2-1 タップイベント

tap

14-2-2 タップホールドイベント

taphold

14-2-3 スワイプイベント

swipe

14-2-4 左スワイプイベント(スワイプイベント)

swipeleft

14-2-5 右スワイプイベント(スワイプイベント)

swiperight

14-3 スクロールイベント

14-3-1 スクロール開始イベント

scrollstart

14-3-2 スクロール終了イベント

scrollstop

14-4 仮想マウスイベント

14-4-1 マウスオーバーイベント

vmouseover

14-4-2 マウスダウンイベント

vmousedown

14-4-3 マウス移動イベント

vmousemove

14-4-4 マウスアップイベント

vmouseup

14-4-5 クリックイベント

vclick

14-4-6 マウスキャンセルイベント

vmousecancel

14-5 デバイスの向きを検出するイベント

14-5-1 端末回転イベント

orientationchange

14-6 レイアウトイベント

14-6-1 レイアウト変更イベント

updatelayout

第15章 API

APIについて

15-1 API

15-1-1 指定のページへ遷移する

$.mobile.changePage(to, options)

15-1-2 指定のページを読み込む(遷移はしない)

$.mobile.loadPage(url, options)

15-1-3 カスタムセレクタ関数

jqmData(name, value)

15-1-4 jQuery Mobileの(data-roleなどの)設定を削除する

jqmDataRemove()

15-1-5 ページ読み込みのメッセージを表示する

$.mobile.showPageLoadingMsg()

15-1-6 ページ読み込みのメッセージを非表示にする

$.mobile.hidePageLoadingMsg()

15-1-7 固定ツールバーを表示状態にする

$.mobile.fixedToolbars.show(immediately)

15-1-8 固定ツールバーを非表示状態にする

$.mobile.fiexedToolbars.hide(immediately)

15-1-9 固定ツールバーのトグル機能をON/OFFにする

$.mobile.fiexedToolbars.setTouchToggleEnabled(immediately)

15-1-10 URLなどを解析し、必要な情報を取り出すメソッド(URLパースAPI)

$.mobile.path.parseUrl(url)

15-1-11 絶対パス作成API

$.mobile.path.makePathAbsolute(relPath, absPath)

15-1-12 絶対URL作成API

$.mobile.path.makeUrlAbsolute(relUrl, absUrl)

15-1-13 同一ドメイン判別API

$.mobile.path.isSameDomain(url1, url2)

15-1-14 相対URL判別API

$.mobile.path.isRelativeUrl(url)

15-1-15 絶対URL判別API

$.mobile.path.isAbsoluteUrl(url)

15-1-16 サイレントスクロール関数

$.mobile.silentScroll(yPos)

15-2 個別UIのAPI

15-2-1 ページを初期化する

page()

15-2-2 ボタンの使用可/不可を設定する

button(options)

15-2-3 リンク(a要素)のボタンの装飾をまとめて指定する

buttonMarkup(options)

15-2-4 テキスト入力ボックスorテキストエリアの使用可/不可を設定する

textinput(options)

15-2-5 スライダー(input[type="range"])を初期化する

slider(options)

15-2-6 セレクトメニュー(select要素)を初期化する

selectmenu(options)

15-2-7 チェックボックス・ラジオボタンを初期化する

checkboxradio(options)

15-2-8 開閉パネルを初期化する

collapsible()

15-2-9 ナビゲーションバーを初期化する

navbar()

15-2-10 ダイアログをJavaScriptから閉じる

dialog('close')

15-2-11 リストを初期化する

listview('refresh')

補 章

補-1 テーマシステムについて

・jQuery Mobileのテーマシステム

・オリジナルのカスタムテーマの作成

・ThemeRollerを活用してテーマをらくらく作成

補-2 jQuery Mobileを具体的に使う(各種API連携とTIPS集)

・jQuery Mobileの日本語化

・Google MapsをjQuery Mobieサイトに埋め込む

・TwitterのタイムラインをjQuery Mobileページに表示する

巻末資料

巻末資料(1) data-*属性リファレンス

巻末資料(2) ボタンアイコン一覧(data-icon属性)

PR

秀和システム