著者プロフィール

石原 悠（いしはら ゆう）

会社員として複数の会社でディレクター、デザイナーの経験を経て、2012年1月にフリーラン

スに。Webサイト、iOS、Androidアプリのデザインや実装、ロゴや印刷物の制作など幅広い

業務を大小問わず請け負っており、jQuery Mobileなどのフレームワークを用いた構築の実績

も多い。

デザインだけでなく、プログラミングまですべてを手がけたiOSアプリを複数リリースするなど

実装方面の制作も得意としており、Webサイトやアプリの構築に関してさまざまな角度から得

た経験と知識を生かした柔軟でスピーディーな対応を得意としている。

●normo（個人事業Webデザイン、iPhoneアプリ制作請負）　http://normo.jp

本書は2014 年 5月現在の情報をもとに解説しています。本書の発行後に各Webサイトの内容や仕様、jQuery Mobileのバージョンなどが変わっていることがあります。あらかじめご了承ください。本文中の製品名およびサービス名は、一般に各開発メーカーおよびサービス提供元の商標または登録商標です。なお、本文中には TM および © マークは明記しておりません。

2

はじめに

Webサイトの運営をされている方なら、アクセス数の推移を見てすでにご存知

かもしれませんが、近年Webサイトへのアクセスの比重がPCからモバイルのほう

へと推移しています。

2014年には「モバイルファースト」というキーワードをよく耳にするようになり

ました。

これまでWebサイトの制作業務では、まずPC用のWebサイトを制作して、余っ

た時間や予算でモバイルサイトを構築する、という流れで進められてきました。そ

れが「まずモバイルで使えるサイトを重点的に作る」という新しい流れも生まれて

きているようです。

そうした状況に応じて、モバイル向けのサイト制作が容易になるツールとして

jQuery Mobileをはじめ、Twitter Bootstrapやレスポンシブデザインなど便利で高

機能なフレームワークや技術が日々進化してきています。

この本を手に取られた方は、おそらくこれから新しくWebサイトを制作されるに

あたってその中からjQuery Mobileの導入を検討されているかと思います。

jQuery Mobileは数あるモバイルとPCの両方のWebサイトを構築するフレー

ムワークの中で、学習コストも低く、効率的で柔軟性にも優れたWebサイトが開

発できる非常に便利なフレームワークになっています。そのサイト制作にこの本が

少しでもお役に立てたら幸いです。

2014年5月

石原 悠

3

目 次

はじめに . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

本書の読み方 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8

序章 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

第 1 章　jQuery Mobile の基本を知る法則 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

法則

1 ページの設定と構成要素を理解する . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

2 Ajaxを使ったページ遷移を理解する . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20

3 Ajaxによるページ遷移の不具合を解消する . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22

4 jQuery Mobileに用意されているボタンを把握する . . . . . . . . . . . . . . . . . . . . . . . . 23

5 ボタンにアイコンを表示する . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25

6 ページのヘッダに「戻る」ボタンを表示する . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27

7 複数のボタンをグループ化してユーザビリティを高める . . . . . . . . . . . . . . . . . . . . . 29

8 ヘッダを固定して最大限に有効活用する . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31

9 フッタのレイアウトを調整して見やすくする . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33

10 複数ページにまたがるコンテンツを自由に行き来する . . . . . . . . . . . . . . . . . . . . . . . 35

11 リストを使ってコンテンツを階層化する . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37

12 読み込み専用のリストを使用する . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41

13 リストに自動で区切りを挿入する . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42

14 新着リストに更新時間を表示する . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44

15 画像と簡単な情報をまとめた商品一覧ページを作成する . . . . . . . . . . . . . . . . . . . 45

16 下層ページの情報量をリストに表示してユーザーのストレスを軽減する . . . 46

17 状況に合わせた文字入力フォームを選択する . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47

18 スマートフォンらしいタッチパネルを生かしたフォームを利用する . . . . . . . . . 49

19 選択入力可能なメニューを利用する . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51

20 必須項目が入力されたら「送信」ボタンをアクティブに変更する . . . . . . . . . . . 52

21 基本要素を理解してユーザーフレンドリーなアンケートページを作成する . . . 54

22 買い物カートを利用したECサイトを作成する . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56

章末コラム iPhoneとAndroidの違い . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60

第 2 章　基本的な UI パーツを使いこなす法則 . . . . . . . . . . . . . . . . . . . . . . . . . 61

法則

23 検索フォームにプレースホルダーとフィルタリング機能を使う . . . . . . . . . . . . . 62

24 オートコンプリート機能を利用してユーザーの入力をサポートする . . . . . . . . 63

基本的な使い方を知る

ボタン要素を理解する

ツールバーを理解する

リストで情報を整理する

スマートフォンの フォームを理解する

フォームを活用する

フォームを使いやすくする

25 フォームの入力内容をあらかじめ指定する . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64

26 ダイアログボックスの閉じ方やトランジションをカスタマイズする . . . . . . . . . 66

27 ダイアログボックスの「閉じる」ボタンの位置を変更する . . . . . . . . . . . . . . . . . . . 68

28 サイトが単調にならないようにダイアログボックスを使い分ける . . . . . . . . . . . 69

29 ポップアップウィジェットを使用する . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71

30 ポップアップウィジェットの位置や見栄えを変える . . . . . . . . . . . . . . . . . . . . . . . . . . 75

31 オーバーレイポップアップウィジェットを使用する . . . . . . . . . . . . . . . . . . . . . . . . . . . 78

32 パネルウィジェットを使用して複雑なサイト構造を一覧できるようにする . . . . 80

33 パネルウィジェットにリストを設置してより多くのリンクを表示させる . . . . . 82

34 グリッドレイアウトを使った緩急のあるサイトを作る . . . . . . . . . . . . . . . . . . . . . . . 83

35 レスポンシブグリッドでモニタサイズや端末の向きに応じた レイアウトにする . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85

36 レスポンシブテーブルでモニタサイズや端末の向きに応じた

レイアウトにする . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87

37 カラムトグルのチェックボックスを使ってコンテンツの表示・非表示を 切り替える . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89

38 開閉式コンテンツを利用して情報を効率的に格納する . . . . . . . . . . . . . . . . . . . . . 90

39 開閉式コンテンツを複数並べてアコーディオンメニューにする . . . . . . . . . . . . . 92

40 開閉式コンテンツのアイコンを変更する . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93

章末コラム CSSのマルチクラスの記述方法 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94

第 3 章　ページレイアウトをカスタマイズする法則 . . . . . . . . . . . . . 95

法則

41 複雑になりがちなリストを見やすくする . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96

42 初期状態の2つのテーマを理解する . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97

43 自分で新しいテーマを作成してページに反映する . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98

44 ページ遷移のエフェクトを理解して状況によって使い分ける . . . . . . . . . . . . . . . 99

45 ヘッダとフッタを画面外に移動させ、フルスクリーンモードで読みやすくする. . . . 100

46 サイト全体に共通でヘッダ、フッタを固定表示する . . . . . . . . . . . . . . . . . . . . . . . . . 101

47 ヘッダに複数のボタンを設置してページ全体の情報量を増やす . . . . . . . . . . . 102

48 レイアウトを工夫してフッタを活用し、サイトをより見やすくする . . . . . . . . . 104

49 ヘッダメニューをプルダウンメニューに変更してボタン数を増やす . . . . . . . . 106

50 プルダウンメニューに一手間加えて操作感を向上させる . . . . . . . . . . . . . . . . . . . 109

51 ページ遷移時に表示されるローダーをオリジナルのものにする . . . . . . . . . . . 110

52 省略されて「...」と表示される長いテキストを省略しないようにする . . . . . . 112

53 「ホーム画面に追加」をした際のサイトのアイコンをカスタマイズする . . . 114

54 背景にパターン画像を敷いてjQuery Mobileサイトの見栄えを変える . . . . 116

55 タブナビゲーションに通知件数アイコンを入れる . . . . . . . . . . . . . . . . . . . . . . . . . . . 117

56 端末の種類や回転方向、解像度を識別してスタイルを反映する . . . . . . . . . . . 119

カスタマイズの基本を理解する

ヘッダとフッタを活用する

スタイルシートを使ってカスタマイズする

ページレイアウトを工夫する

ダイアログボックスをカスタマイズする

ポップアップをカスタマイズする

画像を使ってカスタマイズする

57 オリジナルアイコンを作成してサイトのオリジナリティを高める . . . . . . . . . . . 122

58 CSS3のグラデーションを利用した立体的なボタンを作成する . . . . . . . . . . . 124

59 CSS3のシャドウを利用した立体的なボタンを作成する . . . . . . . . . . . . . . . . . . . 126

60 グローバル設定を利用してサイト全体のレイアウトを統一する . . . . . . . . . . . 128

61 すべてのページにTwitterとFacebookへの投稿ボタンを設置する . . . . . 130

62 デフォルトの角丸とドロップシャドウを削除してシンプルなページを作成する . . . 132

63 ページトランジションを自分でカスタマイズする . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134

章末コラム CSSやCSS3の活用 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136

第 4 章　スマートフォンならではの　　　ジェスチャーを生かす法則 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137

法則

64 スマートフォン独自のジェスチャーに対するイベントを取得する . . . . . . . . . . 138

65 画面の回転のタイミングを取得して縦長画像と横長画像を入れ替える . . . 141

66 背景色をスクロール位置に応じて変える . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143

67 ページのロードが完了した結果で成功と失敗のメッセージを表示する . . . . 145

68 ページを移動するたびにランダムに画像を切り替える . . . . . . . . . . . . . . . . . . . . . . 147

69 スクロール位置が変わったときにページトップボタンを表示する . . . . . . . . . . 149

70 どのリンクから移動してきたかによってページ上の文章を変える . . . . . . . . . . 151

71 複数の開閉パネルを同時に開いたり閉じたりする . . . . . . . . . . . . . . . . . . . . . . . . . . 154

章末コラム マウスで操作するサイトとタッチ端末で操作するサイト . . . . . . . . . . . . . . . . . . . . 156

第 5 章　フレームワークやプラグインを活用する法則 . . . . . . . 157

法則

72 スマートフォンサイトでGoogleマップを表示する . . . . . . . . . . . . . . . . . . . . . . . . . . 158

73 Googleマップにマーカーを付けたりクローズアップしたりする . . . . . . . . . . 160

74 端末をシェイクして画面を変える . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162

75 スワイプで次の画像に移動するフォトギャラリーを作る . . . . . . . . . . . . . . . . . . . 164

76 入力された郵便番号をもとに住所を自動表示する . . . . . . . . . . . . . . . . . . . . . . . . . . 166

77 リスト要素の右肩にバッジを追加する . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 169

78 データロードの成功時と失敗時に状況に合わせたアラートを表示する . . . . 171

79 Webサイト上で効果を見ながらjQuery Mobileのテーマを作成する . . . . 173

80 サードパーティ製のデザインを探してページに反映する . . . . . . . . . . . . . . . . . . . . 177

81 Twitter Bootstrap風のデザインにする . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178

82 jQuery Mobile独自のデザインを利用しないようにする . . . . . . . . . . . . . . . . . . 179

章末コラム オープンソースのプラグインの選び方 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 180

JavaScriptを使ってカスタマイズする

イベント取得時のカスタマイズをする

フレームワークやプラグインを使う

オリジナルのプラグインを作成する

テーマをカスタマイズする

既存サイトをブラッシュアップする

第 6 章　WordPress ＆ EC-CUBE を　　　カスタマイズする法則. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181

法則

83 YouTube RSSフィードからJSONをロードして一覧表示する . . . . . . . . . . . 182

84 検索結果の一覧にサムネイル画像を表示する . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184

85 作成したリストをタブで切り替えられるようにする. . . . . . . . . . . . . . . . . . . . . . . . . . 185

86 通知プラグインを使用して、RSSのロードに失敗したら アラートを表示する . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186

87 WordPressで構築したブログを端末に合わせて振り分ける . . . . . . . . . . . . . . 188

88 WordPressに対応したjQuery Mobileテーマを作成する . . . . . . . . . . . . . . . 190

89 検索サイトからリンクしてきたときにもトップページに戻れるようにする . . . 192

90 「前の記事へ」「次の記事へ」リンクをテキストからボタンに変更する . . . . 193

91 パネルウィジェットに固定リンクや外部リンクを格納する . . . . . . . . . . . . . . . . . 194

92 縦に長くなりがちなページをコンパクトにまとめる . . . . . . . . . . . . . . . . . . . . . . . . . 196

93 jQuery MobileでGoogleアナリティクスを使ってアクセス解析を行う . . . . 197

94 ブログをソーシャルメディアに対応させ、SNSのボタンを設置する . . . . . . . 199

95 WordPressとjQuery Mobileで作ったブログに自作テーマを 適用する . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 201

96 EC-CUBEのメニューをスマートフォン向けにコンパクトにまとめる . . . . . 202

97 ポップアップウィジェットを使用してログイン関連のメニューを コンパクトにまとめる . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205

98 ECサイトにローテーションバナーを設置して訪問者の視線を誘導する . . . . . 207

99 「おすすめ商品」をスライドバナーからリストビューに変更する . . . . . . . . . . . . 209

100 限定商品に在庫数が表示されたバッジを付けて目立たせる . . . . . . . . . . . . . . . 210

章末コラム SassとCompassで作成するjQuery Mobileテーマ . . . . . . . . . . . . . . . . . . . . . 211

用語集 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212

索引 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217

RSSリーダー作成の応用

WordPressのカスタマイズ

EC-CUBEのカスタマイズ

度要重

★

★★

度易難

★★

★

度要重

★

★★

度易難

★★

★

フリップスイッチを使って、 開閉パネルを一斉に開閉させる開閉パネルがページ上に複数あると、数によっては1つ1つ開いていくのは面倒

だろう。また、パネルをすべて開いたときに、ページ下方の要素までは自動的にス

クロールしないため、目的のコンテンツがすぐには視界に入らないこともある。こ

のように開閉パネルは便利な反面、使い方やレイアウトによってはちょっと不便な

ところもある。そうした開閉パネルを、ユーザーのワンアクションで、一斉にすべて

開いた状態や閉じた状態にできたらどうだろうか。ここでは、通常はタップで開閉

させる開閉パネルを、フリップスイッチを使用して一斉に開閉させる方法を紹介し

よう。iOSの標準機能では「メニューバーをタップするとページトップにスクロール

する」といった、具体的なアイコンボタンやアテンションは一切ないが、覚えておく

と便利な隠し機能が数多くある。例えば、ヘッダをスワイプしてもパネルを一斉に

開閉できるなど、ちょっとした挙動を付け足しておけば、訪れたユーザーは便利に

感じるだろう。

複数の開閉パネルを 同時に開いたり閉じたりする

法 則　71 イベント取得時のカスタマイズをする

◆スワイプとフリップによる開閉パネルの操作

ヘッダをスワイプすることでもパネルを開閉できる。フリップスイッチを使用してパネルを開閉する。

◎フリップスイッチからcollapsibleを呼び出すコード

$(document).on("pageinit", function(){ $('#flip').on('change', function(event, ui) { if( $('#flip').val() == 'open') toggleCollapsible('open'); else toggleCollapsible('close'); });});function toggleCollapsible(s) { if(s == 'open') $('.ui-collapsible').collapsible({ collapsed: false }); else $('.ui-collapsible').collapsible({ collapsed: true });}

3 フリップスイッチからcollapsibleを呼び出す

フリップスイッチは、changeに指定することでイベントを取得できるようになる。記述する場所だが、DOMが読まれたあとにイベントを指定しなければいけないので、pageinitのイベントの中に記述する必要がある。

◎スワイプによって開閉できるようにするコード

$(document).on("pageinit", function(){ $('.ui-header').on('swiperight', function(event){ toggleCollapsible('open'); }); $('.ui-header').on('swipeleft', function(event){ toggleCollapsible('close'); });});

4 スワイプで開閉できるようにする

このサンプルでは、フリップスイッチをトリガーに開閉ボタンを開閉させているが、ちょっとソースを変更すれば、「ヘッダを右にスワイプしたら開く」「ヘッダを左にスワイプしたら閉じる」などの挙動も指定可能だ。

JavaScriptでは開いたタイミングも取得できる

開閉パネルには、JavaScriptでイベントを送信して開閉させ

る他に、開閉したタイミングで指定の関数を実装させることも

可能だ。取得したい要素に対して閉じたタイミングを取得した

場合は「collapse」を、開いたタイミングを取得したい場合には

「expand」を指定すれば、それぞれ指定した関数を発火させる

ことができる。

◎開いたタイミングを取得するコード

$(".ui-collapsible").collapsible({ expand: function( event, ui ) { var $p = $('.ui-btn', this); $p.empty(); $p.append('開いた。'); }, collapse: function( event, ui ) { var $p = $('.ui-btn', this); $p.empty(); $p.append('閉じた。'); }});

1 開閉パネルをタップではなくJavaScriptで開閉させる

開閉パネルは通常はタップで開閉するが、ここではJavaScriptから開閉パネルのメソッドを呼び出して開閉してみよう。開くときには$('.ui-collapsible').collapsible({collapsed: false});を呼び出し、閉じるときには$('.ui-collapsible').collapsible({collapsed: true});を呼び出すようにする。サンプルでは.ui-collapsibleで一括で開閉しているので、data-role="collapsible"を指定したページ上すべての要素に対して命令を送信することになる。しかし、例えば特定のカテゴリだけ、あるいは特定の要素が付いているコンテンツだけを開閉したいような場合でも、$('.ui-collapsible')の部分を変更するだけで個別に開閉することも可能となる。

2 トリガーとなるフリップスイッチと開閉パネルを設置する

jQuery Mobileのフリップスイッチは、現行のiOSの標準のフリップスイッチに非常によく似たデザインが使われている。PCのサイトで使うことはまだあまりないが、スマートフォンサイトでは小さいスペースを効率的に使うことができ、また標準UIに近いことから、ユーザーも直感的に使うことができる。通常はフォーム画面で使用するUIだが、こういった用途で使用するのにも向いている。このサンプルでは、開閉パネルが閉じている状態ではopenさせるボタンとして見せたいので、<option value="close">open</option>のように、要素のvalueと内容が逆のものを記述している。

◎開閉パネルをJavaScriptで操作するコード

$('.ui-collapsible').collapsible({collapsed: false});$('.ui-collapsible').collapsible({collapsed: true});

◎フリップスイッチと開閉パネルを設置するコード

<div class="center"> <select name="slider" id="flip" data-role="slider" data-mini="true" data-theme="a"> <option value="close">open</option> <option value="open">close</option> </select></div>

◆フリップスイッチとスワイプで開閉可能にする方法

用語アテンション _P213

関連する法則

18スマートフォンらしいタッチパネルを生かしたフォームを利用する _P49

64スマートフォン独自のジェスチャーに対するイベントを取得する _P138

154　　　　第4章　スマートフォンならではのジェスチャーを生かす法則 第4章　スマートフォンならではのジェスチャーを生かす法則　　　　155

本書の読み方

本書では、jQuery MobileによるWebサイトの構築を実践するうえで必要な100のノウハウを紹介しています。まずはじっくりと解説を読んで、それから図解や実例、具体的な記述方法などを読み進めることで、確実に理解を深められます。※ここで紹介している紙面はイメージです。実際の本書紙面とは異なります。

本書掲載のソースコードについて本書で説明しているサンプルコードと画像ファイルは、本書のサポートページからダウンロードできます。 ◆本書サポートページ http: //www.impressjapan.jp/books/1111101131

●法則のタイトルやるべきことがすぐにわかるタイトル付けをしています。

●解説法則をしっかり習得できるように、ていねいに解説しています。

●重要度・難易度法則の重要度と難易度を3段階に分類しています。法則を実践するときの目安にしてください。

●ポイント法則に関連する知っておくべき知識について説明しています。

●画面例豊富な画面例によってわかりにくいところの理解が深まります。

●用語わかりにくい用語は巻末の用語集で調べられます。

●関連する法則解説している法則と密接にかかわる 他の法則を紹介しています。続けて読むことで、理解が深まります。

●Webサイトの制作手順Webサイトの制作手順を、詳細な説明とともにサンプルコードを掲載しています。

8

2014年にバージョン1.4として公開されたjQuery Mobileの特徴や主な変更点、ダウンロードしてから開発するまでの環境の構築方法などを解説する。

序 章

序章　　　　9

● 2014年1月にバージョン1.4がリリースされたjQuery Mobileは2010年に公開されて以来バージョ

ンアップを繰り返し、本書の執筆時点ではバージョン1.4

が公開されている。

バージョン1.3まではバージョンアップごとに新しく

ウィジェットなどの機能面が追加、強化されることが多

かったが、2014年の1月に公開されたバージョン1.4で

は、デザインの刷新と使い方の変更が大きかった。

デザイン面では、iOS 7をイメージしたフラットなデザ

インに変更され、また使い方の面では、前バージョンま

ではデータ属性でスタイルを指定していたが、新しいバー

ジョンからは直接クラスセレクタを指定してデザインを反

映させるようになった。

デザインが刷新された新バージョン1.4

バージョン1.3までのカラフルなデザイン。 iOS 7を想起させるフラットなデザイン。

10　　　　序章

●フラットデザインの採用これまでは、スキューモーフィックデザインといわれる、

現実世界に実際にあるものをモチーフにした立体感や光

沢があるデザインが流行していた。それが2013年あたり

から、次第にシンプルでフラットなデザインが採用される

ことが増えてきた。

jQuery Mobileの1.3までのバージョンアップでも、と

ころどころデザインの見直しがされていてその兆しはあっ

たが、バージョン1.4で大幅にほぼすべてのパーツにおい

てフラットデザインが採用されることとなった。

新しいフラットなデザインのjQuery Mobileは、これまで

デフォルトで用意されていた5つのテーマを使い分けていた

のが、白と黒の2つのテーマのみとなった。また、バージョン

1.3までのテーマAは黒ベースのものだったが、バージョ

ン1.4から白ベースのテーマがAとして採用されている。

●デザインの指定方法の変更これまでは、UIにデザインを指定する際、データ属性を

使用して「data-role="button"」などとしてボタン要素とし

て指定していた。バージョン1.4ではこの指定方法が撤廃

されて、クラスセレクタを直接使用するようになった。

バージョン1.3までは、複数のスタイルを指定したいと

きにはデータ属性を「data-role="button"」「data-mini=

"true"」などと複数記述しなければならなかったのだが、

バージョン1.4からは、「class="ui-btn ui-btn-mini"」など、

直接クラスセレクタを指定してデザインを適用することが

可能になった。これにより、HTMLファイルが随分すっき

りして、可読性が上がった。

◎バージョン1.3以前のボタンの指定方法のコード

<a href="#" data-role="button" data-inline="true"> ボタン </a>

◎バージョン1.4からの新しいボタンの指定方法のコード

<a href="#" class="ui-btn ui-btn-inline"> ボタン </a>

●アイコンの描画がSVG形式に変更jQuery Mobileは、デフォルトの状態で数多くのプリセッ

トのアイコンが用意されていて、簡単な指定で使えるのが

魅力の1つだったのだが、バージョン1.4からはPNG形式と

SVG形式の2種類を状況によって使い分けるような仕様に

変更になった。

SVG形式で描画されたアイコンは、PNG形式と異な

り拡大してもぼやけないので、拡大して大きく扱う場合で

もきれいなエッジで描画することが可能だ。今後、Retina

ディスプレイ以上の解像度の画面が登場したときでも問

題ないだろう。

他にもバージョン1.4では、グローバル設定やメソッド

の呼び出し方が変わったり、依存しているjQueryのバー

ジョンが上がったりして使い勝手が変わっているので、

本書を参考にいろいろと試してほしい。今後は、階層メ

ニューやポップアップウィジェットなどが非推奨になる可

能性もあり、次第に廃止されていくと考えられる。

序章　　　　11

●ソースコードをダウンロードするjQuery Mobileの公式サイトにアクセスし、「Download

jQuery Mobile」の「Latest stable」をクリックしてフル

パッケージのソースコードをダウンロードする。本書執筆

時点（ 2014年5月）では、jQuery Mobileの公式サイト

からは安定版のバージョン1.4.2がダウンロードできる。

・「Latest stable」：安定版の最終リリース版

・ 「Custom download」：必要な機能のみを選択してダ

ウンロード可能

本書ではフルパッケージのバージョン1.4.2を使用する。

バージョン1.4.2では、いくつかの新機能や専用のアイコン

群が追加され、ユーザーにとってより快適なサイト制作が

できるようになっている。また、トップページの「Download」

をクリックすると、さまざまなダウンロードリンクがあり、そ

れぞれ次のような内容のファイルが用意されている。

・CDN-Hosted JavaScript：JSファイル

・CDN-Hosted CSS：CSSファイル

・ Copy-and-Paste Snippet for CDN-hosted files:

CDNを使用する場合のコピーペースト用のスニペット

・ZIP File：デモを含めたファイル一式

ダウンロードできるファイルには、それぞれにUncompressed

版 とMinifi ed版 が あり、選 べ る ように なって い る。

Uncompressed版は、デバッグ用なのでソースコードにコメン

トが付いていて可読性が高く、ソースコードを解読して内容を

理解しやすい。

また、業務などで実際に使用する場合は、軽くてサーバー

やクライアントPCへの負荷が低いMinifi ed版や、すでにイン

ターネット上で配信されているCDN版を使用したほうがいい

だろう。

●ファイルの中身を確認する本書では、トップページにある「Latest stable」をクリッ

クしてすべてのファイルをダウンロードしたうえで、順を追っ

て説明していく。ZIPファイルをダウンロードして展開する

と、次の図のような構成でファイルが格納されている。

ECサイト構築のために最低限必要なファイル

◆jQuery Mobile公式サイト http: // jquerymobile.com/

12　　　　序章

なおjQuery Mobile本体のJavaScriptファイルとして、

次の2つがある。

jquery.mobile-1.4.2.js

jquery.mobile-1.4.2.min.js

ファイル名に「.min」という文字が入っているものが、

前述したMinified版にあたる圧縮されたソースコードで、

入っていないものがUncompressed版にあたる圧縮前の

ソースコードである。

　demosディレクトリ　imagesディレクトリ　jquery.mobile-1.4.2.css　jquery.mobile-1.4.2.js　jquery.mobile-1.4.2.min.css　jquery.mobile-1.4.2.min.js　jquery.mobile-1.4.2.min.map　jquery.mobile.external-png-1.4.2.css　jquery.mobile.external-png-1.4.2.min.css　jquery.mobile.icons-1.4.2.css　jquery.mobile.icons-1.4.2.min.css　jquery.mobile.inline-png-1.4.2.css　jquery.mobile.inline-png-1.4.2.min.css　jquery.mobile.inline-svg-1.4.2.css　jquery.mobile.inline-svg-1.4.2.min.css　jquery.mobile.structure-1.4.2.css　jquery.mobile.structure-1.4.2.min.css　jquery.mobile.theme-1.4.2.css　jquery.mobile.theme-1.4.2.min.css

そして、その他にjQuery Mobileサイトを装飾する次の

CSSが入っている。

jquery.mobile.external-png-1.4.2.css

jquery.mobile.icons-1.4.2.css

jquery.mobile.inline-png-1.4.2.css

jquery.mobile.inline-svg-1.4.2.css

jquery.mobile.structure-1.4.2.css

jquery.mobile.theme-1.4.2.css

jquery.mobile-1.4.2.min.map

このうちファイル名に「.structure」という文字が入っ

ているものは、ページ遷移など基本となる動作部分のみ

が記載され、ナビゲーションバーのカラーリングやアイ

コンなどの装飾部分が省かれたファイルである。通常は

「jquery.mobile-1.4.2.css」ファイルのみ使用すればいい

が、自作のテーマを使うときなどは各テーマのスタイルが

記述されている「.theme」と「.structure」を合わせて使

用することになる。

また、バージョン1.4.2から新たに追加されたアイコン

用のファイルも入っており、SVGやPNG形式のファイル

がそれにあたる。またミニファイされたJavaScriptファイ

ルをデバッグするために使用するmapファイルなども追

加されている。

このように多くのファイルがあるのだが、実際に仕事な

序章　　　　13

jQuery Mobileサイトには、必 要なモジュールを選

択してダウンロードできる「jQuery Mobile Download

Builder」が用意されている。

どで使用する場合はすべてのファイルが必要なわけでは

ない。本書では最低限必要とされる次の3つのファイル

を使用して話を進めていく。

imagesディレクトリ

jquery.mobile-1.4.2.css

jquery.mobile-1.4.2.js

また、Mobile版ではないjQuery 本体の「jquery.js」も

必要となる。jQuery Mobile 1.4.2では、jquery.jsのバー

ジョンは1.10.2が使用されているが、1.8〜1.10/2.0な

どの幅広いバージョンがサポートされているようだ。

ダウンロードページには、最新のバージョンである1.4以

外にも、以前のバージョンもいくつかダウンロードできる

ようになっている。ただし、対応しているjQueryのバー

ジョンが異なることに注意が必要だ。

jQuery Mobile Download Builderを使うと、ダウンロードすべきファイルが整理されているので非常に便利だ。

14　　　　序章

● オフライン環境に必要なファイルをヘッダに記述するjQuery Mobileを使ったサイト制作に必要なファイル

を読み込むため、HTMLファイルのヘッダ部分を修正す

る。この記述方法は2つあるので、用途に合わせて選択

してほしい。1つ目の方法では、ダウンロードしたjQuery

Mobile関連のファイルをローカルPCのディレクトリ内

に格納して使用する。オフラインでのサイト制作の際に

は、後述する2つ目の方法では動作確認ができないので、

この方法を選択しなければならない。

次に、HTMLファイルが入っている階層に「/jquerymobile」

ディレクトリを作成し、その中に次に示す3ファイルを格

納し、「/images」ディレクトリを作成する。

jquery.mobile-1.4.2.min.cssjquery.mobile-1.4.2.min.jsjquery.js/imagesディレクトリ

jQuery Mobileは基本的にHTML5で記述するため

type属 性 が省 略でき、type="text/css"や type="text/

javascript"を記載する必要はない。

● オンライン環境では、CDNで提供されているファイルを使用する必要なファイルをヘッダに記述する2つ目の方法は、

コンテンツデリバリネットワーク（Contents Delivery

Network、CDN）で提供されているファイルを使用して、

サーバーから直接ソースコードを読み込む方法だ。なお、

コンテンツデリバリネットワークとは、デジタルコンテンツ

をインターネット経由で配信するために最適化されたネッ

トワークのことである。

この方法は、準備が不要でレスポンスもいいため、公式

サイトではこちらが推奨されている。筆者もディレクトリ

に余分なファイルを入れたくないのでCDNのファイルを

使用することがほとんどだが、オフライン環境では使えな

いため、本書では、オフライン環境で使える1つ目に紹介

した方法で解説する。

オフラインの開発環境の構築◎ オフライン環境の場合のコード

<link rel="stylesheet" href="../jquerymobile/jquery.mobile-1.4.2.css" /><script src="../jquerymobile/jquery.js"></script><script src="../jquerymobile/jquery.mobile-1.4.2.js"></script>

◎ オンライン環境の場合のコード

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" /><script src="http://code.jquery.com/jquery-1.9.1.min.js"></script><script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.2.min.js"></script>

序章　　　　15

● CDNを利用しない場合と利用する場合のサイト閲覧の違い通常は左図のようにサーバーと1対1でリクエストとレ

スポンスが繰り返される。しかし、CDNを利用して、右図

のようにサイト内で使用する一部のデータを地理的およ

びバックボーン的に分散させた別のサーバーから受信す

れば、負荷が分散されより効率のいい安定したサイトの

配信が可能になる。

① サーバーからHTMLデータが送信さ

れる

② HTMLを解析し、画像やJavaScript

などの別ファイルのデータをサーバー

にリクエストする

③ リクエストのあった画像やJavaScript

が送信される

◎ 通常のネットワークを使用したサイトの閲覧（左図）と、CDNを使用したサイトの閲覧（右図）

① ② ③

Web ページ

① ② ③

Web ページ

16　　　　序章

第 1 章

jQuery Mobileを使 用するにあたって必 要になる知 識として、jQuery

MobileによるサイトでのHTMLの書き方から、ページ遷移などの仕組み、

ボタンやリストなどの基本的なUIの使い方までを解説する。

jQuery Mobileの基本を知る法則

法 則

1 ページの設定と構成要素を理解する . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

2 Ajaxを使ったページ遷移を理解する . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20

3 Ajaxによるページ遷移の不具合を解消する . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22

4 jQuery Mobileに用意されているボタンを把握する . . . . . . . . . . . . . . . . . . . . . . . 23

5 ボタンにアイコンを表示する . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25

6 ページのヘッダに「戻る」ボタンを表示する . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27

7 複数のボタンをグループ化してユーザビリティを高める . . . . . . . . . . . . . . . . . . . . 29

8 ヘッダを固定して最大限に有効活用する . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31

9 フッタのレイアウトを調整して見やすくする. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33

10 複数ページにまたがるコンテンツを自由に行き来する . . . . . . . . . . . . . . . . . . . . . . 35

11 リストを使ってコンテンツを階層化する . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37

12 読み込み専用のリストを使用する . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41

13 リストに自動で区切りを挿入する . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42

14 新着リストに更新時間を表示する . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44

15 画像と簡単な情報をまとめた商品一覧ページを作成する . . . . . . . . . . . . . . . . . . 45

16 下層ページの情報量をリストに表示してユーザーのストレスを 軽減する . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46

17 状況に合わせた文字入力フォームを選択する . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47

18 スマートフォンらしいタッチパネルを生かしたフォームを利用する . . . . . . . . . 49

19 選択入力可能なメニューを利用する . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51

20 必須項目が入力されたら「送信」ボタンをアクティブに変更する . . . . . . . . . . 52

21 基本要素を理解してユーザーフレンドリーなアンケートページを 作成する . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54

22 買い物カートを利用したECサイトを作成する . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56

重要度★★★

難易度★★★

ページの設定と構成要素を理解する

法 則　1 基本的な使い方を知る

head要素に必要な項目を記述するまずは単体のページを作成して、ヘッダに必要な項目をリストアップする。

<head>〜</head>には、序章で読み込む設定をしたjQuery Mobileのプログラ

ム以外に、次の3つの項目の記述が必要になることを覚えておこう。

・文字コードの指定

・ページタイトル

・Viewportの設定

ここで選択する文字コードは、ソースコード本体やjQuery Mobileの公式サイト

でも使用されているのと同様にUTF-8を使用するため、<meta charset="utf-8">

と記述する。

Viewportという項目では、スマートフォンでページを開いた際のページ幅や、ピ

ンチ操作などで拡大可能な最大幅を指定する。jQuery Mobileを使用したサイト

の制作では、横幅をスマートフォンのブラウザにフィットさせるため、このViewport

の記述1行を加える必要がある。

◎<head>〜</head>に記述するコード

!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <title>jQuery Mobile 100の法則：サンプルプログラム </title> <link rel="stylesheet" href="../jquerymobile/jquery.mobile-1.4.0.css" /> <script src="../jquerymobile/jquery.js"></script> <script src="../jquerymobile/jquery.mobile-1.4.0.js"></script></head>

用語Viewport _P213データ属性 _P215

関連する法則

88WordPressに対応したjQuery Mobileテーマを作成する _P190

18　　　　第1章　jQuery Mobileの基本を知る法則

重要度★★★

難易度★★★

ボディに必要な項目をリストアップする次にbody要素内部だが、最初のdata-role属性に下のHTMLソースの①のよう

に"page"と指定し、jQuery Mobileサイト内での1ページ単体のくくりとする。そし

て、この中にページを構成するさまざまな要素を配置してページを作成していく。

jQuery Mobileでは、HTML内に記述したひとまとまりの要素を、HTML 5の独

自データ属性「data-」を使用して「data-role="〇〇"」と指定することで、各パー

ツとしての機能を付与させる仕組みになっている。ここでは、data-role="page"を

指定することで、jQuery Mobileがその中の要素をまとめて1つのページとして認

識するように指定している。

◎<div>〜</div>に記述するコード

<div data-role="page"> <div data-role="header"> 〜 </div> ←② <div role="main" class="ui-content"> 〜 </div> ←③ <div data-role="footer"> 〜 </div> ←④ </div>

ヘッダ 部 分 に は 上 の HTML ソース の ② の よ う に、div要 素 に data-role="header"というデータ属性を指定して記述する。このheader属性はサイト全体で常に表示される共通のパーツであり、「コンテンツタイトル」「ホームボタン」「戻るボタン」などを設置するために使用するエリアとなる。

コンテンツ部 分 には上の HTMLソースの ③ のように、div要 素 に<div role="main" class="ui-content">という値をそれぞれ指定し、その内容を記述する。ここには「タイトル」「本文」「画像」「リスト」「子階層へのリンク」など、実際のコンテンツの内容を配置する。本書掲載の多くの要素は、この中で使用するものとなる。

フッタ 部 分 に は 上 の HTML ソース の ④ の よ う に、div要 素 に data-role="footer"というデータ属性を指定してその内容を記述する。フッタはページ下部に表示されるエリアで、一般的には「コピーライト」「利用条件」「免責事項」「PCサイトなどへのリンク」を設置することが多い。ただスマートフォンの特性上、表示面積が狭くあまり多くのパーツが設置できないので、コピーライトのみを記載しているサイトも少なくない。また、タブナビゲーションを使用するサイトでは、フッタ自体が使われないこともある。

①

◆ヘッダ、コンテンツ、フッタの役割

スマートフォンの画面に合わせてページを表示するViewport

この法則で登場した「Viewport」は、jQuery Mobileを使用

しない場合でもスマートフォンサイトの制作でよく使用する設

定になる。PCサイトをスマートフォンのブラウザで閲覧した際

に、ページ全体が小さく表示されてしまう経験をした人もいる

と思うが、これは横幅の指定されていないページを閲覧した際

に、ブラウザがページの横幅をデフォルトのViewport設定に

合わせて980pxで表示してしまうために起きる現象だ。これは

あらかじめmeta要素内のViewportの設定で横幅を指定して

おくことで回避できる。

jQuery Mobileでは<meta name="viewport" content=

"width=device-width, initial-scale=1, maximum-scale=1">

を指定しているが、width（幅）やinitial-scale（倍率の初期値）、

maximum-scale（倍率の最大値）などを調整することで、ペー

ジを拡大縮小したり、任意のサイズのページを指定したりする

ことも可能になるので覚えておきたい。

第1章　jQuery Mobileの基本を知る法則　　　　19

重要度★★★

難易度★★★

Ajaxを使ったページ遷移を理解する

法 則　2 基本的な使い方を知る

複数のページを別々のHTMLファイルに記述して サイトを作成する

法則1で説明したように、jQuery Mobileではbody要素内にdata-role="page"

を指定することで1ページとして認識される。そのため、例えば1つのHTMLファ

イル内にdata-role="page"を3つ指定すれば、全部で3ページのサイトというこ

とになる。このページの考え方はjQuery Mobileの大きな特徴の1つだ。しかし本

書では通常のサイトのページの考え方と同様に、個別のHTMLファイルによる単

体ページを複数作って、それらを相互に遷移させるサイトの作成方法を覚えてほし

い。なぜなら、実際にスマートフォンサイトを制作する場合、階層が深くページ数の

多いサイトを制作するケースが多く、主にこの方法を使うことになるからだ。この

サイト設計については、初期段階でいろいろ迷うことが多いのだが、別々のHTML

ファイルで制作すれば、コードの可読性も上がり、分業も可能になるので、迷った

場合はこの構成でサイトを制作しておくことをおすすめする。

ページ遷移にはAjaxを使って通信効率を向上させる内部的な処理の話だが、jQuery Mobileではスムーズなページ遷移を実現して

通信効率を向上させるために、通常「Ajax」という非同期処理を用いてHTMLファ

イルをロードし、コンテンツ部分だけDOM（Document Object Model）を書き換

える方式をとっている。

Ajaxとは、Webページをインターネットからダウンロードして表示するまでの処

理方式の1つだ。通常Webページは、ハイパーリンクがクリックされると、次に表

示させたいHTMLファイルをサーバーからダウンロードしてきて、ブラウザ全体の

表示をすべて破棄してから次のHTMLファイルの表示を始める。多くのサイトの場

合、ヘッダ、フッタ、グローバルナビやサイドメニューなど一部共通のHTMLを表示

している部分があるかと思うが、通常のページ遷移ではこれらもいったん破棄して

再度同じものを描画している場合が多い。しかし、Ajaxを使ったページ遷移を行う

と、ページ上にすでに表示されている要素で変更の必要のないものはそのまま利

用し、表示を切り替えたいコンテンツ部分のみを入れ替えることが可能となる。

用語Ajax _P212DOM _P212

関連する法則

3Ajaxによるページ遷移の不具合を解消する _P22

68ページを移動するたびにランダムに画像を切り替える _P147

20　　　　第1章　jQuery Mobileの基本を知る法則

重要度★★★

難易度★★★

複数のページを1つのHTMLファイルに記述する方法

複数のページ構造をもつサイトを1つのHTMLファイルで制

作するには、単一ページのdiv要素であるdata-role="page"の

塊を複数作り、それぞれにidを使用して各ページを指定すれば

いい。

ソースコードのように、id="index"、id="news"、id="about"

と指定しておけば、アンカーリンクから#indexなどにリンクす

ることで、それぞれのページに遷移させることが可能になる。ま

た、HTMLファイルの一番上に記述されたdata-role="page"

の要素が最初のページとして表示される。2〜3ページぐらい

の簡単な構造のサイトを制作するケースなら、この方法で十分

だろう。

この方式のメリットとしては、複数のHTMLファイルにまた

がらないので、ヘッダやフッタを何度も記述せずに済むことや、

一度のアクセスでHTMLファイルをすべてダウンロードできる

ので、ページ遷移の際にロード処理に時間がかからないことが

挙げられる。

デメリットとしては、1ページ内にすべての要素を記述するた

め、内容が多くなればなるほど可読性が損なわれ、また1回の

アクセスでダウンロードするファイルサイズが大きくなってしま

うことだ。回線が遅いスマートフォンのサイトでは、あまりに大

きなサイトを1つのHTMLファイルで制作してしまうと致命的

になるおそれがあるので、ページ数が多いならこの法則で解説

した複数のHTMLファイルに記述する方法を選んでほしい。

◎ 複数のページを1つのHTMLファイルに記述するHTML5のコード

<div data-role="page" id="index"> 〜 </div>…1 ページ（トップページなど）

<div data-role="page" id="news"> 〜 </div>…2 ページ（ニュースリリース、新着情報など）

<div data-role="page" id="about"> 〜 </div>…3 ページ（会社概要など）

フォームなどでは注意が必要なケースもあるjQuery Mobileではこのページ遷移の方法を採用することで、ページの切り替え

ごとにダウンロードされたり再描画されたりする部分の処理負荷や転送量が軽減

され、快適なページ閲覧が可能になる。

しかし、Ajaxでの遷移を採用する場合にフォームを使用すると、ページ全体が

切り替わらず、通常のページ遷移の際に受け渡されていたformの値の情報などの

扱いが大きく変わってくるので、その部分だけAjaxを無効化させて運用することも

多い。このAjaxによるページ遷移の不具合を解消する方法については次の法則で

解説する。

◆通常のページ遷移とAjaxのページ遷移の違い

Ajaxのページ遷移では、共通部分はそのまま利用し、表示を切り替えたい部分のみを読み込む。

◎Ajaxのページ遷移

通常のページ遷移では、ページ遷移をするたびに新たにHTMLファイルの情報を読み込む。

◎通常のページ遷移

HTML HTML HTML

HTML

旧 新

HTML HTML

この部分だけ破棄

この部分だけ読み込む

第1章　jQuery Mobileの基本を知る法則　　　　21

重要度★★★

難易度★★★

Ajaxによるページ遷移の不具合を解消する

法 則　3 基本的な使い方を知る

Ajaxを使わずに複数ページを相互に遷移させる法則2で解説したAjaxを使ったページ遷移の方法には注意点がある。Ajaxを

使うと、最初に読み込まれたページにhead要素が依存してしまうため、例えば「個

別のCSSを使用する下層ページがある」などの理由でAjax読み込みを行いたく

ない場合も出てくるだろう。そのような場合、ある特別な処理を実行すれば、Ajax

処理を回避してページごとにロードしなおして表示させることが可能となる。

多くの場合デフォルトのAjaxの遷移を使うことになると思うのだが、サーバー

の要件や、JavaScriptイベントのハンドリングの方法によって、Ajaxの遷移では

データのやり取りに不具合が生じてしまう場合がある。このような場合、非Ajax処

理を利用するのだが、それには以下で紹介する4通りの方法がある。状況に応じて

使い分けよう。

「$.mobile.ajaxEnabled = false;」と記述すれば、jQuery Mobileがページを初期化した際に「すべてのリンクにおいて非同期処理を行わない」という指定が可能となる。一度にすべてのリンクに対して指定できるので、サイト全体でAjaxでの遷移をまったく行わない場合はこの方法を使用する。

◎ページ初期化時にAjaxを非使用にするコード

<script language="JavaScript"> $(document).bind("pageinit", function(){ $.mobile. ajaxEnabled = false; });</script>

リンクごとにAjaxの使用／非使用を指定したい場合は、a要素を使って非使用のリンクに rel="external"を記述する。サイト全体ではAjaxを使用するが、特定のページのみ非同期処理を行いたくない場合などには、この方法を使用する。

◎a要素でAjaxを非使用にするコード

<a href="./index2.html" rel="external"> 次のページ </a>

ある特定のフォームだけAjaxで遷移させたくない場合は、そのフォームに対して<form data-ajax="false">と指定する。

◎特定のフォームだけAjaxの遷移を回避するコード

<form data-ajax="false"></form>

◆Ajaxを非使用にする処理

用語Ajax _P212

関連する法則

2Ajaxを使ったページ遷移を理解する _P20

68ページを移動するたびにランダムに画像を切り替える _P147

22　　　　第1章　jQuery Mobileの基本を知る法則

重要度★★★

難易度★★★

法 則　4 ボタン要素を理解する

jQuery Mobileに用意されている ボタンを把握する

用途やサイトのデザインに合わせてカスタマイズするPCサイトのリンクでは、青い文字にアンダーラインが一般的だが、jQuery

Mobileでは、リンクにボタンの指定をするだけで、自動的にスマートフォンの画面

に合わせてボタンを描画してくれる。ここでは、用途やサイトのデザインに合わせて

自在にカスタマイズできるボタン機能について把握していこう。

デフォルトのボタンを使うには、a要素にui-btnクラスを追加する。これでリン

クがボタンとして表示される。このデフォルトの状態だと、ボタンは端末の横幅

100%で作られるブロック要素のものとなる。もっとコンパクトなボタンを作りたい

場合は、ui-btn-inlineというクラスを追加すれば、文字の長さに応じて幅がフィッ

トするインライン要素のボタンが表示される。また、このui-btn-inlineクラスを指

定すると、自動的に要素がfloatされるようになり、追加したボタンが順番に横に

並ぶようになる。例えば「保存」や「キャンセル」などの短い文字のボタンを並べた

ときに、横100%のボタンが縦に並ぶと見栄えも悪くタップしにくくなるため、この

指定をして端末の横幅に依存しないボタンにしたほうが、より使いやすいサイトに

なるだろう。

また、デフォルトのボタンは、縦にもある程度大きいためタップしやすくなってい

るのだが、優先度が低くかったりページ内のスペースが狭かったりするときなどは、

小さなボタンが必要になるだろう。その際はui-miniというクラスを指定すると、コ

ンパクトなボタンを表示できる。

関連する法則

5ボタンにアイコンを表示する _P25

◆ボタンの大きさのカスタマイズ例◎デフォルトのボタンのコード

<a href="#" class="ui-btm"> ボタン </a>

◎ボタンの横幅を広げるコード

<a href="#" class="ui-btm ui-btm-inline"> ボタン </a>

◎ボタンを小さくするコード

<a href="#" class="ui-btm ui-mini"> ボタン </a>

用語インライン要素 _P213ブロック要素 _P215ユーザーインターフェース _P216

第1章　jQuery Mobileの基本を知る法則　　　　23

重要度★★★

難易度★★★

色やデザインもカスタマイズできる決定ボタンなど、ボタンの用途によっては、色を変更したい場合もあるだろう。そ

の場合は、ui-btn-bのクラスを追加すれば、あらかじめjQuery Mobileに用意され

ている別のテーマに合わせて色を変更できる。この「b」というのは、「a」と「b」

という2つのカラーテーマのうち、「b」を使用するという意味だ（省略した場合は

「a」が採用される）。テーマ自体の編集に関しては法則42、43で解説しているが、

2つのカラーテーマを用途に応じて使い分けることで、サイト全体のバランスを保

つように制作を進められる。

色以外のカスタマイズも可能だ。ページのデザインによっては、ボタンを角丸に

したり影を付けたりすることもあるだろう。その場合にはui-corner-allクラスやui-

shadowクラスを追加することで簡単に角丸や影を付けることができる。また、同

意のチェックマークを入れるなど、あるアクションを行わないとタップできないよう

になっているボタンはui-state-disabledクラスを使うといいだろう。これは下のサ

ンプルのように、ボタンがタップできない無効の状態で表示されるので、何らかの

アクションを起こす必要があることが暗黙の了解としてユーザーに伝わる。

ユーザーインターフェース（UI）は、サイト全体で共通のデザインになっている

ことが好ましく、ページのデザイン優先でページごとに見栄えが変わってしまうと

ユーザーを混乱させてしまう。しかし、必要に応じて機能を理解し、上手に使い分

ければ、整ったデザインのサイトを作成することも可能になる。

◎ボタンの色を変えるコード

<a href="#" class="ui-btn ui-btn-b"> ボタンテーマ </a>

◎ボタンを角丸にしたり、陰を付けたりするコード

<a href="#" class="ui-btn ui-corner-all"> 角丸のボタン </a><a href="#" class="ui-btn ui-shadow"> 影付きのボタン </a>

◎button要素でのデザインを無効にするコード

<button data-role="none"> ボタン </button>

◎「無効」ボタンを作るコード

<a href="#" class="ui-btn ui-state-disabled"> ボタン </a>

◆ボタンのデザインのカスタマイズ例

24　　　　第1章　jQuery Mobileの基本を知る法則

重要度★★★

難易度★★★

法 則　5 ボタン要素を理解する

ボタンにアイコンを表示する

ボタンの機能をイメージしやすくする 50種類のアイコン

jQuery Mobileでは、a要素にui-icon-（アイコン名）というクラス名を指定する

だけで、あらかじめ用意されたアイコンを表示できる。例えば右の例では、「削除」

の文字を入れたボタンに アイコンを表示させているが、これはui-icon-deleteと

指定している。他にも、「次ヘ進む」に使える アイコンや「ホームに戻る」に使え

る アイコンなど、ボタンの機能をイメージしやすくするアイコンが50種類も用意されている（アイコンの種類は次ページを参照）。

通常、アイコンを表示する際には、ui-btn-icon-left（アイコンを左端に表示する）

などのクラスを併せて記述し、ボタン内でのアイコンの表示位置を指定する。用

途や画面のレイアウトに応じてクラスを指定して、アイコンの位置を右端（ui-btn-

icon-right）やボタン上部（ui-btn-icon-top）あるいは下部（ui-btn-icon-bottom）

に表示させることも可能だ。

例えば、ボタンをタップすると画面が右から左へ遷移するようなサイトを制作し

ている場合、「次へ進む」ボタンは、ui-btn-icon-rightクラスを追加して右端にアイ

コンを表示したほうが、その後の画面の遷移がイメージしやすい。また、画面下部

に設置するタブバーでボタンを使用するような場合は、上部（ui-btn-icon-top）か

下部（ui-btn-icon-bottom）にアイコンを表示すると、ボタンがより見やすくタップ

しやすくなる。なお、アイコンはデフォルトでは左端に表示されるため、アイコンを

左端に表示する場合はクラスの記述は必要ない。

◆ボタン内のアイコンの位置を変更する

◎ 削除ボタンにアイコンを付けるコード

<a href="#" class="ui-btn ui-btn-inline ui-icon-delete"> 削除</a>

◎アイコンを右端に表示するコード

<a href="#" class="ui-btn ui-icon-delete ui-btn-icon-right"> 右</a>

◎アイコンを上部に表示するコード

<a href="#" class="ui-btn ui-icon-delete ui-btn-icon-top"> 上</a>

◎アイコンを下部に表示するコード

<a href="#" class="ui-btn ui-icon-delete ui-btn-icon-bottom"> 下</a>

左寄せ（デフォルト）

アイコンをボタンの右端に表示

アイコンをボタンの下部に表示

アイコンをボタンの上部に表示

第1章　jQuery Mobileの基本を知る法則　　　　25

重要度★★★

難易度★★★

アイコン 記述方法

ui-icon-arrow-l

ui-icon-arrow-r

ui-icon-arrow-u

ui-icon-arrow-d

ui-icon-delete

ui-icon-plus

ui-icon-minus

ui-icon-check

ui-icon-gear

ui-icon-bars

アイコン 記述方法

ui-icon-refresh

ui-icon-forward

ui-icon-back

ui-icon-grid

ui-icon-star

ui-icon-alert

ui-icon-info

ui-icon-home

ui-icon-search

ui-icon-edit

◎jQuery Mobileに用意されている主なアイコン

「歯車」の形をしたアイコンなどは、多くのスマートフォ

ンアプリでも「設定」画面などを表示する機能をもつた

め、アイコンだけで意味が伝わるし、画面もスッキリする。

そのため、ボタンとしての形や文字などを非表示にし、ア

イコンだけの簡略化した表示にしたいときもあるだろう。

そんなときはui-btn-icon-notextを追加するだけでいい。

このときa要素に囲われたテキストは非表示になり、その

代わりにリンクのtitle属性として自動的に設定される。

アイコンだけ表示させることもできる

◎アイコンのみを表示するコード

<a href="#" class="ui-btn ui-btn-inline ui-icon-gear ui-btn-icon-notext"> アイコンのみ </a>

26　　　　第1章　jQuery Mobileの基本を知る法則

重要度★★★

難易度★★★

ページのヘッダに 「戻る」ボタンを表示する

法 則　6 ボタン要素を理解する

ページを遷移してきたときだけ ヘッダに「戻る」ボタンを表示させる

スマートフォンのサイトでは、ヘッダの左側に「戻る」ボタンが付いているペー

ジをよく見かけるが、この「戻る」ボタンを効率よく設置するには工夫が必要だ。

jQuery Mobileでヘッダに「戻る」ボタンを設置するには、data-role="header"の

div要素に対してdata-add-back-btn="true"というデータ属性を記述すればいい。

これはページに直接ボタンを記述しているわけではなく、単体のURLに直接アク

セスしたときには「戻る」ボタンは表示されず、同じサイトの別ページから遷移して

きたときだけボタンが表示される仕様になっている。

例えば、メールやTwitterでURLを知らされてjQuery Mobileサイトのページを

表示したとする。その場合、ページにhistory.backなどが指定されている「戻る」ボ

タンを設置していると、どのページにもリンクされていないボタンが表示されてしま

う。しかし、この方法を利用すれば、直接下層ページにアクセスしてきた場合には

「戻る」ボタンは表示されず、トップページからアクセスしてきた場合には「戻る」ボ

タンが表示され、historyを利用してもとのページに戻ることができる。

◎ヘッダに「戻る」ボタンを表示するコード

<div data-role="header" data-add-back-btn="true" data-back-btn-text=" 戻る ">

◆ヘッダに「戻る」ボタンを表示する

関連する法則

8ヘッダを固定して最大限に有効活用する _P31

用語history _P212

第1章　jQuery Mobileの基本を知る法則　　　　27

重要度★★★

難易度★★★

◎②サイト全体の下層ページに「戻る」ボタンを表示するコード

<script type="text/javascript"><!--$(document).on("pageinit", function(){ $.mobile.toolbar.prototype.options.addBackBtn = true;$.mobile.toolbar.prototype.options.backBtnText = "戻る ";});// --></script>

◎③特定のページにだけ「戻る」ボタンを表示させないコード

<div data-role="header" data-add-back-btn="false">

◎④リンクボタンなどに「戻る」機能を追加するコード

<a href="#" class="ui-btn ui-btn-icon-left ui-icon-arrow-r" data-rel="back"> 戻る </a>

◎①「戻る」ボタンのテキストを変更するコード

<script type="text/javascript"><!--$(document).bind("pageinit", function(){ $.mobile.toolbar.prototype.options.backBtnText = "戻る";});// --></script>

「戻る」ボタンをより便利になるように工夫する「戻る」ボタンは、自動的に「< Back」のようなボタンがヘッダに表示される仕

様になっている。サイトによってはこの文字を日本語に変えたい場合も出てくるだ

ろう。その場合は、head要素内で①のサンプルのように記述すれば、日本語への

変更が可能になる。全ページにまとめて「戻る」ボタンを表示して効率よくサイトを

制作することも可能だ。②のサンプルのようにhead要素内にscriptとして記述す

れば、自動的に下層ページすべてに「戻る」ボタンを表示でき、いちいちa要素に

data-rel="back"と記述する手間が省ける。ただし、一括で全ページに「戻る」ボタ

ンを設置してしまうと、例えばお問い合わせフォームなど、「戻る」ボタンを表示さ

せたくないページにも自動的に表示されてしまう。そのような場合は、「戻る」ボタ

ンを表示させたくないページに③の記述を個別に加えておこう。

ここまで解説してきたように、ヘッダに自動的にボタンを表示する機能はとても

便利なのだが、普通のページ要素として配置されているボタンや、文脈の中のリン

クから前のページに戻りたい場合もあるだろう。そのような場合は、④のサンプル

のようにa要素を記述することで、通常のボタンにも「戻る」ボタンとしての機能を

付与することが可能になる。

この方法はボタンに直接記述するので、ボタンの装飾も自由に行える。ヘッダに

ボタンを表示したくないときや、サイト特有のデザインの「戻る」ボタンを設置した

いときなどはこの方法で指定しよう。なお、この設定を行った場合、a要素のhref

属性に対してどこのURLが記載されていたとしても、historyをたどって1ページ前

に戻る挙動になる。

アイコンの影と枠を削除する

アイコンの周りの影や枠もクラスの追加や削除によって細か

く指定できる。その方法はいたって簡単で、影を追加したいと

きはui-shadow-iconクラスを追加し、枠を削除したいときは

ui-nodisc-iconクラスを追加すればいい。さらにui-alt-iconを

指定すれば白塗りのアイコンを黒塗りに変更することが可能

だ。

28　　　　第1章　jQuery Mobileの基本を知る法則

重要度★★★

難易度★★★

複数のボタンをグループ化して ユーザビリティを高める

法 則　7 ボタン要素を理解する

ボタンの位置や大きさだけでなく グループ化もサイト制作では大切

スマートフォンのサイト制作では、限られたスペースの画面の中で「いかにわか

りやすくボタンを配置し、ユーザーを目的のページに誘導するか」が大事になってく

る。「雑然とボタンが並んでいるだけのサイト」と「ボタンが機能ごとにグループに

分かれているサイト」とでは、後者のほうが迷いにくくなるので、快適にサイトを閲

覧させることが可能になる。そのためには、ボタンの位置や大きさを調節するだけ

でなく、複数のボタンをグループにまとめるなどの工夫も必要になる。

ボタンをグループ化する複数のボタンをグループ化するには、グループ化するボ

タンを<div data-role="controlgroup">〜</div>で囲えばいい。デフォルトでは、

左下の図のようにボタンが縦に並んでグループ化される。

サンプルのように「はい」「いいえ」や「前へ」「次へ」でまとめるのもいいし、カ

テゴリ分けされたボタンにするのも見やすい。ボタンの用途を考えてレイアウトし

て、使いやすいサイトを制作しよう。

大きなボタンを複数まとめるだけなら縦並びでもいいのだが、「はい」「いい

え」などの選択肢となっているボタンをまとめるときは、文字も短いため左右に

余白ができてしまう。このような例では横並びにするといい。div要素にdata-

type="horizontal"を追加すれば横並びにできる。

◆ボタンをグループ化する ◆ボタンを横並びでグループ化する

◎ボタンをグループ化するコード

<div data-role="controlgroup"> <a href="#" data-role="button"> 戻る </a> <a href="#" data-role="button"> 次へ </a> <a href="#" data-role="button"> ホームへ戻る </a></div>

◎ボタンを横並びでグループ化するコード

<div data-role="controlgroup" data-type="horizontal"> <a href="#" data-role="button"> はい </a> <a href="#" data-role="button"> いいえ </a></div>

デフォルトでは、ボタンは縦に並ぶ。

文字数が少ないときは、ボタンを横並びにするといい。

関連する法則

18スマートフォンらしいタッチパネルを生かしたフォームを利用する _P49

用語div要素 _P212

第1章　jQuery Mobileの基本を知る法則　　　　29

重要度★★★

難易度★★★

グループ化したボタンにアイコンを表示するグループ化したボタンの横にアイコンを表示して装飾したいときは、それぞれの

ボタン要素に対して、「ui-icon-arrow-l」「ui-btn-icon-left」などのクラスを追加

すればいい。また、ボタンエリアが狭い場合やボタンの優先度が低い場合などは、

data-mini="true"を追加して、ボタンを小さく表示させることも可能だ。ボタンエリ

アが極端に狭い場合や大量のボタンを設置しなければならない場合などは、アイ

コンのみをグルーピングして表示できる。

<div data-role="controlgroup" data-type="horizontal"> <a href="#" class="ui-btn ui-alt-icon ui-nodisc-icon ui-corner-all ui-icon-check ui-btn-icon-notext">ボタン </a> <a href="#" class="ui-btn ui-alt-icon ui-nodisc-icon ui-corner-all ui-icon-delete ui-btn-icon-notext"> ボタン </a></div>

<div data-role="controlgroup" data-type="horizontal" data-mini="true"> <a href="#" class="ui-btn ui-alt-icon ui-nodisc-icon ui-corner-all ui-icon-check ui-btn-icon-notext">ボタン </a> <a href="#" class="ui-btn ui-alt-icon ui-nodisc-icon ui-corner-all ui-icon-delete ui-btn-icon-notext"> ボタン </a></div>

<div data-role="controlgroup" data-type="horizontal"> <a href="#" class="ui-btn ui-btn-inline ui-icon-arrow-l ui-btn-icon-left">前へ </a> <a href="#" class="ui-btn ui-btn-inline ui-icon-arrow-r ui-btn-icon-right"> 次へ </a></div>

◎ボタンにアイコンを付けるコード

◎アイコンのみをグループ化するコード ◎アイコンをさらに小さくするコード

<div data-role="controlgroup" data-type="horizontal" data-mini="true"> <a href="#" class="ui-btn ui-btn-inline ui-icon-arrow-l ui-btn-icon-left">前へ </a> <a href="#" class="ui-btn ui-btn-inline ui-icon-arrow-r ui-btn-icon-right"> 次へ </a></div>

◎小さなアイコン付きボタンにするコード

◆グループ化したボタンのカスタマイズ例

30　　　　第1章　jQuery Mobileの基本を知る法則

重要度★★★

難易度★★★

ヘッダを固定して 最大限に有効活用する

法 則　8 ツールバーを理解する

スクロールしても隠れないようにヘッダを固定するスマートフォンサイトに限らず、Webサイトでは多くの場合、共通の「ヘッダ」

と「フッタ」が用意されている。サイト共通のヘッダやフッタを設置すれば、サイ

ト全体の共通性が保たれて導線がわかりやすくなるからだ。jQuery Mobileの

デフォルトのヘッダは、法則1で説明したようにページの上部である<div data-

role="page">のすぐあとに、data-role="header"を指定したdiv要素を記述する

ことでページに追加できる。また、ヘッダのバー内には、h1要素でページのタイト

ルを入れておけば、サイトやページのタイトルを表示することが可能となる。

デフォルトでは、ヘッダはページ上部に設定され、ページをスクロールすると

消えていってしまう。しかし、data-role="header"を指定したdiv要素にdata-

position="fixed"を追加すれば、スクロールしても常にページ上部に固定表示させ

られる。下層のページなどで長文が続く場合は、固定表示させたヘッダに「戻る」

ボタンを表示させておくのも親切な設計といえる。

◎スクロールしてもヘッダが表示されるようにするコード

<div datarole="page"> <div data-role="header" data-position="fixed"> <h1> ヘッダ（固定表示）</h1> </div></div>

◎デフォルトのヘッダのコード

<div datarole="page"> <div data-role="header"> <h1> ヘッダ </h1> </div></div>

◆ デフォルトのヘッダ ◆ スクロールしてもヘッダが表示されるようにする

関連する法則

46サイト全体に共通でヘッダ、フッタを固定表示する _P101

用語カスタムヘッダ _P213

第1章　jQuery Mobileの基本を知る法則　　　　31

重要度★★★

難易度★★★

◎バーにボタンを追加するコード

<div class="ui-bar ui-bar-a"> <div data-role="controlgroup" data-type="horizontal" data-mini="true"> <a href="#" class="ui-btn ui-btn-inline">1</a> <a href="#" class="ui-btn ui-btn-inline">2</a> <a href="#" class="ui-btn ui-btn-inline">3</a> </div></div>

◎ヘッダの右側にボタンを表示するコード

<div data-role="header"> <h1> ヘッダ </h1> <a href="#" class="ui-btn ui-nodisc-icon ui-corner-all ui-icon-check ui-btn-icon-notext ui-btn-b ui-btn-right"> ボタン </a></div>

◎ヘッダにボタンを追加するコード

<div data-role="header"> <a href="#" class="ui-btn ui-btn-inline ui-icon-delete ui-btn-icon-left"> 削除</a> <h1> ヘッダ </h1> <a href="#" class="ui-btn ui-btn-inline ui-icon-check ui-btn-icon-left"> 保存</a></div>

◆ ヘッダの左右にボタンを表示する ◆ ヘッダの右側だけにボタンを表示する

◆ カスタムヘッダで自由にレイアウトする

ヘッダに2つのボタンを表示する法則6ではヘッダに「戻る」ボタンを表示する方法を解説したが、それ以外にも、

ヘッダには「何をするかわかりやすいボタン」を表示するといいだろう。入力をキャ

ンセルするときに使う「取消」ボタンや、ダウンロードしたファイルなどを保存する

ときなどに使う「保存」ボタンなど、ヘッダにあると便利なボタンにはさまざまなケー

スが考えられる。また、ヘッダの左右にそれぞれボタンを表示させたいこともある

だろう。ヘッダの左右にボタンを表示させるには、（1）<div data-role="header">

〜</div>内にa要素で左側のボタンの記述、（2）<h1>〜</h1>でページタイト

ルの記述、（3）さらにa要素で右側のボタンの記述のようにすればいい。

なお、右側だけにボタンを表示させたい場合は、ボタン要素内にclass="ui-btn-

right"と指定する。左側だけにボタンがあるとユーザーは「戻る」ボタンだと勘違い

しやすいので気を付けよう。

カスタムヘッダを作成する共通のヘッダではあまり自由なレイアウトはできない。例えばヘッダにロゴ画像

を入れるなどの工夫をしたい場合は、data-role="header"を使用せず、直接div要

素にclass="ui-bar ui-bar-a"などを指定しよう。これだけで下のサンプルのように

横100%のボタンが入るような自由なレイアウトのヘッダを作ることが可能だ。こ

のように、ある程度柔軟なレイアウトが可能なのもjQuery Mobileの強みといえ

る。

32　　　　第1章　jQuery Mobileの基本を知る法則

重要度★★★

難易度★★★

フッタのレイアウトを調整して 見やすくする

法 則　9 ツールバーを理解する

フッタを固定表示させて 必要な情報を常に表示させる

法則8ではヘッダのカスタマイズ方法を解説したが、ここでは「フッタ」について

解説しよう。ページの下部に表示するフッタには主にコピーライトや、サイト全体

で表示させなければならないが優先順位の低いリンク（例えば会社案内など）を

設置することが多い。

デフォルトのフッタをページに表示するには、<div data-role="page">の閉じタ

グのすぐ上にdata-role="footer"を指定したdiv要素を設置すればいい。また、コ

ピーライトをp要素で入れようとすると、デフォルトの場合は画面左にピッタリくっ

ついた状態で表示されてしまう。細かいところだが、スタイルシートで調整してきれ

いに表示させたほうがいいだろう。

法則8のヘッダと同様に、フッタを固定して、スクロールしても常に表示させた

いときは、data-position="fixed"と指定すればいい。スクロール位置にかかわらず

常に画面の下部にフッタを表示できる。

◎フッタにコピーライトを入れるコード

<div data-role="footer"> <p>&copy; jQuery Mobile 100の法則</p></div>

◎CSSで画面左に空きを入れるコード

.ui-footer { padding: 0 10px; font-weight: normal; font-size: .8em; }

◎フッタを固定するコード

<div data-role="footer" data-position="fixed"> <p>&copy; jQuery Mobile 100の法則</p></div>

◆ フッタにコピーライトを入れる

◆ スクロールしてもフッタが隠れないように固定する

関連する法則

48レイアウトを工夫してフッタを活用し、サイトをより見やすくする _P104

用語グローバルナビ _P214スタイルシート _P214

第1章　jQuery Mobileの基本を知る法則　　　　33

重要度★★★

難易度★★★

◎フッタにリンクボタンを設置するコード

<div data-role="footer"> <a href="#" class="ui-btn"> サイトマップ </a> <a href="#" class="ui-btn"> プライバシーポリシー </a></div>

◎フッタのボタンをグループ化するコード

<div class="ui-bar ui-bar-a"> <div data-role="controlgroup" data-type="horizontal" data-mini="true"> <a href="#" class="ui-btn ui-btn-inline">1</a> <a href="#" class="ui-btn ui-btn-inline">2</a> <a href="#" class="ui-btn ui-btn-inline">3</a> </div></div>

さまざまなデザイン例が参考になる「jQuery Mobile Gallery」。◆ jQuery Mobile Gallery http: //www.jqmgallery.com/

◆ フッタのボタンをグループ化する ◆ フッタにリンクボタンを設置する

フッタにグループボタンを設置する場合は、デフォルト

のマージン設定では思った通りにレイアウトされないこと

がある。その際には、class="ui-bar"を指定したり、法則8

のように個別にスタイルを設定したりするなどして、レイ

アウトが崩れないように調整するといいだろう。また、フッ

タにサイトマップなどのボタンを設置したい場合は、サン

プルのようにa要素を挿入すればいい。

フッタにボタンを表示する際の注意点

ヘッダとフッタの使い方

ヘッダにはサイトのタイトルや検索ボタン、フッタには社名

やサイトマップなど、サイトの種類によってはヘッダとフッタに

入れる要素がだいたい決まっている。これは、異なるサイトで

あっても同じ場所に同じ機能のボタンがあれば、ユーザーに

とって非常に使いやすくなるからだ。コンテンツの優先順位な

ども含めて考える必要があるが、サイトレイアウトの段階でど

んな要素を入れるか迷ったら、他のサイトと見比べて検討する

のもいいだろう。

例えば、jQuery Mobileを使用したサイトを集めた「jQuery

Mobile Gallery」などを見てみると非常にわかりやすい。ヘッ

ダには、ロゴだけがあるケースも多いが、プルダウンメニューで

サイトの主要なコンテンツへの導線やログイン機能が格納され

ているケースも多いことがわかる。フッタには、PCサイトへの

表示機能の切り替えやサイトの概要などへのコンテンツが格

納されているケースが多い。

さらに、画面下部にグローバルナビのような用途のボタンが

設置される場合には、タブナビゲーションが使用されることが

多い。

34　　　　第1章　jQuery Mobileの基本を知る法則

重要度★★★

難易度★★★

法 則　10 ツールバーを理解する

複数ページにまたがるコンテンツを 自由に行き来する

ナビゲーションバーを使ってページを切り替えるjQuery Mobileのツールバーには、ヘッダとフッタ以外に「ナビゲーションバー」

というものが用意されている。これは、複数のボタンがセットになったグループで

構成されているものだが、そのうちの1つのボタンがあらかじめ選択されて表示さ

れるようになっている。このナビゲーションバーは、複数のページにまたがるコンテ

ツを相互に行き来するような構成のサイトで使用するといい。例えば、全国の店舗

一覧のページで地区ごとに切り替えられるようにしたり、製品情報などを一覧表示

しているページでテキストや画像表示を切り替えたりするときなどに便利だろう。

ナビゲーションバーを使用するには、data-role="navbar"というデータ属性を使

用する。あらかじめ選択された状態にしたいボタンは、class="ui-btn-active"と記

述しておく。こうすることで、ページがロードされた初期状態で、このボタンがアク

ティブな状態になる（初期状態以降は、タッチされたボタンがアクティブになる）。

また、navbar 内のリスト要素（ul）に複数のli要素を入れればボタンを増やすこ

ともできる。ボタンが1つの場合は横100%で表示され、2つ〜5つまでの間は横

並びにボタンが並ぶ。6つ以上のボタンをグループ化した場合には、一番下のサン

プルのように2列の複数行で表示されるようになっている。

ボタンが6つ以上あるときは複数行で表示される。

◎ボタンが2つのナビゲーションバーを作るコード

<div data-role="navbar"> <ul> <li><a href="#" class="ui-btn-active">1</a></li> <li><a href="#">2</a></li> </ul></div>

ボタンが2つのナビゲーションバー。

ボタンが5つのナビゲーションバー。

◆ ナビゲーションバーの使用例

関連する法則

55タブナビゲーションに通知件数アイコンを入れる _P117

85作成したリストをタブで切り替えられるようにする _P185

用語タブナビゲーション _P214ナビゲーションバー _P215

第1章　jQuery Mobileの基本を知る法則　　　　35

重要度★★★

難易度★★★

フッタの上に表示すれば、グローバルナビのように使うこともできる。こうすることで、iPhoneアプリなどでよく使われるタブナビゲーションのようなUIを簡単に実現できる。

ボタン単体でテーマを変更したい場合は、a要素に個別にテーマを指定する。

◎フッタの上に表示するコード

<div data-role="footer" data-position="fixed"> <div data-role="navbar" data-iconpos="bottom"> <ul> <li><a href="#" data-icon="grid" class="ui-btn-active">ボタン</a></li> <li><a href="#" data-icon="star"> ボタン </a></li> <li><a href="#" data-icon="gear"> ボタン </a></li> </ul> </div></div>

◎別々のテーマのボタンを並べるコード

<div data-role="navbar"> <ul> <li><a href="#" class="ui-btn-active" data-icon="grid" data-theme="a">A</a></li> <li><a href="#" data-icon="star" data-theme="b">B</a></li> <li><a href="#" data-icon="grid" data-theme="a">A</a></li> <li><a href="#" data-icon="star" data-theme="b">B</a></li> </ul></div>

◎ヘッダの下に表示するコード

<div data-role="header"> <h1> ヘッダ </h1> <div data-role="navbar"> <ul> <li><a href="#" class="ui-btn-active">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul> </div></div>

◎ナビゲーションのテーマを変えるコード

<div class="ui-body ui-body-b"> <div data-role="navbar"> <ul> <li><a href="#" class="ui-btn-active" data-icon="grid" data-theme="a">A</a></li> <li><a href="#" data-icon="star">B</a></li> <li><a href="#" data-icon="grid">A</a></li> <li><a href="#" data-icon="star">B</a></li> </ul> </div></div>

ヘッダのすぐ下に表示する場合は、data-role="header"のタグ内に記述する。

親の要素にテーマを指定すると、ボタン全体のテーマカラーを変更することが可能だ。ui-bodyだったらui-body-bを、ui-barだったらui-bar-bを追加すればサンプルのような黒いBのテーマになる。

◆ ナビゲーションバーをヘッダの下に表示する

◆ 別のテーマのナビゲーションを使用する

◆ ナビゲーションバーをフッタの上に表示する

◆ 別々のテーマのボタンを並べて使用する

ナビゲーションバーの位置を変えるナビゲーションバーは、その用途から、多くはヘッダのすぐ下か、フッタのす

ぐ上のどちらかで使用される。例えばヘッダのすぐ下に表示する場合は、data-

role="header"のタグ内に下のサンプルのように記述する。

36　　　　第1章　jQuery Mobileの基本を知る法則

重要度★★★

難易度★★★

法 則　11 リストで情報を整理する

リストを使ってコンテンツを階層化する

jQuery Mobileの特徴の1つである豊富なリスト表示スマートフォンはPCと比べると画面が小さく、グローバルナビ、コンテンツ、バ

ナー、サイトマップなど、サイトに必要な数多くの要素を1ページに収めるのは難

しい。そのため、必然的にサイトの導線を一望できる一覧ページが増え、階層構造

の多いページ構成になる。jQuery Mobileにはそうした階層構造を苦労なく実現

し、さまざまな一覧ページを制作できる豊富な種類の「リスト」が用意されている。

リストの作成は、ul要素にdata-role="listview"というデータ属性を指定するだ

けだ。li要素の中にa要素でリンクを設定すれば、右向きの矢印が表示されて、次

のページへのリンクも生成される。

リストは、スマートフォンサイトで必ずといっていいほど使用されるUIだが、アン

カータグの有無やアイコンの違い、リストに入れるテキストの内容などで、さまざ

まなケースを想定しなければならず、CSS の修正が多く発生し、実装にとても苦

労する。jQuery Mobileを使えばこうしたケースを特に意識せずに、きれいな表示

のサイトを制作できるところが魅力の1つだといえる。次のページから、見出しで区

切ったリストや番号付きのリストなど、さまざまなリストを解説しているので、サイ

トの内容に合わせて最適なものを見つけてほしい。

◎デフォルトのリストを記述するコード

<ul data-role="listview"> <li><a href="#"> リスト </a></li> <li><a href="#"> リスト </a></li> <li><a href="#"> リスト </a></li></ul>

◆ デフォルトのリスト

関連する法則

33パネルウィジェットにリストを設置してより多くのリンクを表示させる _P82

41複雑になりがちなリストを見やすくする _P96

用語アンカータグ _P213リスト _P216

第1章　jQuery Mobileの基本を知る法則　　　　37

重要度★★★

難易度★★★

さまざまなコンテンツに対応するリスト形式

店舗一覧や製品一覧などのページを作成するとき、リストの項目を「あ行」「か行」などで分類することがある。その際、指定した項目の色を変更してタイトルとして使用して区切るリストにしたい場合があるだろう。そんなときは、色を変えたい項目に対して<li data-role="list-divider">あ行</li>のようにlist-divider属性を指定すればタイトル行が作成できる。また、list-dividerを指定した親ul要素に対して、data-dividertheme="（テーマID）"とテーマを指定すれば、区切りリストの色を変えることもできる。単に羅列されただけのリストは非常に可読性が低く、ユーザーが目的の項目を探し出すのが困難になるので、必要に応じて色付きの区切りリストを使用するといいだろう。このように、わかりやすく区切ることが親切な設計につながるのだ。

◎リストを区切るコード

<ul data-role="listview"> <li data-role="list-divider"> 区切りの名前 <span class="ui-li-count">1</span></li> <li><a href="#"> リスト </a></li> <li><a href="#"> リスト </a></li> <li><a href="#"> リスト </a></li></ul>

◆ランキングなどに最適な番号付きリスト

◆複雑な挙動が設定できる分割ボタンリスト

◆タイトル行を入れられる区切りリスト

ランキングや箇条書きなどには番号付きのリストが必要だろう。番号付きのリストは通常のHTMLの番号リストと同様に、ol要素を使えば作成できる。

◎リストに番号を付けるコード

<ol data-role="listview"> <li><a href="#"> リスト </a></li> <li><a href="#"> リスト </a></li> <li><a href="#"> リスト </a></li></ol>

1つのリスト行に複数のリンクを設定したい場合、data-split-icon="info"などでアイコンを設定し、li要素の中にリンクを2つ作成すれば、分割されたリストの左右それぞれをクリックしたときの挙動を別のものに設定できる。例えば映画のタイトルを紹介するリストなどで、リストのテキスト部分はそのタイトルのDVD購入ページにリンクし、右側の「i」ボタンだけをタップしたときだけ詳細ページヘリンクさせるなど、複雑な挙動を設定することが可能になる。

◎リストに分割ボタンを付けるコード

<ul data-role="listview" data-split-icon="gear" data-split-theme="a" data-inset="true"> <li> <a href="#"> リスト </a> <a href="#" data-rel="popup" data-position-to="window" data-transition="pop">icon</a> </li></ul>

38　　　　第1章　jQuery Mobileの基本を知る法則

重要度★★★

難易度★★★

リストにアイコンなどの情報を入れる

◆数字の入ったカウントアイコン付きリスト

◎リストにカウントアイコンを付けるコード

<ul data-role="listview" data-count-theme="b" data-inset="true"> <li><a href="#"> リスト <span class="ui-li-count">12</span></a></li> <li><a href="#"> リスト <span class="ui-li-count">0</span></a></li> <li><a href="#"> リスト <span class="ui-li-count">4</span></a></li></ul>

◆商品紹介に最適なサムネイル付きリスト

◆下層の情報を推測しやすいアイコン付きリスト

最近スマートフォンのアプリを触っていると、メールの受信件数や未読件数など数字の入ったアイコンで表示されているUIがよく採用されている。このようなカウントアイコンは、リストに<span class="ui-li-count">62</span>などと記述すればいい。

リストの中にimg要素を記述することで、サムネイル付きのリストが作成できる。ECサイトの商品紹介はもちろん、新着情報一覧のアイキャッチなどに使用すると効果的だ。

◎リストにサムネイルを付けるコード

<ul data-role="listview"> <li> <a href="#"> <img src="images/thumb.jpg" /> <h3> リスト </h3> <p> 概要</p> </a> </li></ul>

サムネイルほど大きな画像が必要ではないときや、ちょっとしたアイコンをリストに表示したいときは、img要素にclass="ui-li-icon"を指定すれば小さなアイコン付きリストが作成できる。アイコンを使って下層の情報を表示すれば、ユーザーは遷移先の情報を予測できるようになるので、無駄な遷移が減り、より快適にサイトを閲覧できるようになる。

◎リストにアイコンを付けるコード

<ul data-role="listview"> <li><a href="#"><img src="images/icon.jpg" class="ui-li-icon">リスト </a></li> <li><a href="#"><img src="images/icon.jpg" class="ui-li-icon">リスト </a></li></ul>

第1章　jQuery Mobileの基本を知る法則　　　　39

重要度★★★

難易度★★★

デフォルトのリストは横幅が100%の状態で生成されるが、これにdata-inset="true"を付けて指定すると、角丸の左右に余白のあるリストが作成できる。グローバルナビより優先度が低い項目を作成するときや、メリハリを付けたデザインにしたいときなどに便利だ。

◎インラインリストを記述するコード

<ul data-role="listview" data-inset="true"> <li><a href="#"> リスト </a></li> <li><a href="#"> リスト </a></li> <li><a href="#"> リスト </a></li></ul>

グローバルナビより優先度の低い項目で使うインラインリスト

◆角丸の左右に余白のあるインラインリスト

◆リストの色を変更する

◆アイコンのテーマを変更する

リストの色を変更するにはul要素に別のテーマを指定すればいい。やり方は簡単でul要素に対してdata-theme="b"、data-divider-theme="b"、data-count-theme="b"などのデータ属性を追加すればいい。テーマについては、法則42、43を参照のこと。

◎リストの色を変更するコード

<ul data-role="listview" data-inset="true" data-theme="b" data-divider-theme="b" data-count-theme="b"> <li data-role="list-divider">タイトル </li> <li><a href="#" data-theme="a"> リスト <span class="ui-li-count">12</span></a></li> <li><a href="#"> リスト <span class="ui-li-count">0</span></a></li> <li><a href="#"> リスト <span class="ui-li-count">328</span></a></li></ul>

リストビューの右端に追加されるアイコンのテーマだけを変更することも可能だ。ul要素に対してui-alt-iconやui-icon-bなどを指定すれば、各リストに追加されるアイコンの色を変更することができる。

◎アイコンのテーマを変更するコード

<ul data-role="listview" data-inset="true" class="ui-alt-icon ui-icon-b ui-nodisc-icon"> <li> <a href="#"> リスト </a> </li></ul><ul data-role="listview" data-inset="true" class="ui-alt-icon ui-icon-b"> <li> <a href="#"> リスト </a> </li></ul>

40　　　　第1章　jQuery Mobileの基本を知る法則

重要度★★★

難易度★★★

◎読み込み専用リストのコード

<ul data-role="listview"> <li> リスト </li> <li> リスト </li> <li> リスト </li></div>

法 則　12 リストで情報を整理する

読み込み専用のリストを使用する

jQuery Mobile 1.2以降では、タップできない 読み込み専用リストが利用できる

jQuery Mobileのバージョン1. 2から、新たな機能として読み込み専用のリスト

が作成できるようになった。これまでは、リスト項目にリンクを設定しなかった場

合、リンクがないこと（タップできないこと）は右側のリンクアイコンが削除され

ることで表現されていたが、読み込み専用リストでは、グラデーションのない少し

暗いフラットなデザインにすることでタップできないことを表現している。

タッチパネルで操作するスマートフォンサイトにおいては、不慣れな人のタップ

ミスを防ぐため、タップできるかどうかの判別がひと目でつくことは非常に重要だ

ろう。例えば、箇条書きの項目を読ませるためのリストと、クリックして下層に誘導

させるためのリストとをうまく使い分ければ、より見やすいサイトになるだろう。

読み込み専用リストの作成方法はいたって簡単で、通常ならリンク用に<li><a

href="#">リスト</a></li>としていたリスト項目を、a要素を削除して<li>リスト

</li>とするだけでよい。なお、読み込み専用リストには.ui-li-staticというセレクタ

が割り当てられているので、デザインを変更したい場合には.ui-li-staticのスタイル

を上書きすれば、任意のデザインの読み込み専用リストを作成できる。

◆ 読み込み専用リスト◆ インラインの読み込み

専用リスト

関連する法則

33パネルウィジェットにリストを設置してより多くのリンクを表示させる _P82

41複雑になりがちなリストを見やすくする _P96

用語読み込み専用リスト _P216

第1章　jQuery Mobileの基本を知る法則　　　　41

重要度★★★

難易度★★★

リストに自動で区切りを挿入する

法 則　13 リストで情報を整理する

jQuery Mobile 1.2以降では 自動で区切りが挿入されるようになった

jQuery Mobileのバージョン1.2から、新しく自動で区切りリストを挿入する機能

が加わった。従来は、区切りリストが必要になるたびにdata-role="list-divider"で区

切って見出しを作成していたが、この機能によりその手間が省けて更新のしやすさが

アップした。また区切りリストに挿入される文字は、その頭文字に大文字や小文字が

混在していても同じグループとしてまとめられる。リストビューは店舗一覧などに利用

されることが多いと思うが、この機能はアルファベットだけでなく、漢字や数字でもそ

の頭文字をもとにリストに変換してくれるので、いろいろなリストに応用できる。

自動で区切りリストを挿入する区切りリストを挿入する方法も簡単になっていて、リストビューにdata-autodividers

="true"を加えるだけで、頭文字が変わるたびに自動的に<li data-role="list-divider"

role="heading" class="ui-li ui-li-divider ui-bar-b">A</li>のような区切りがコード

に挿入される。これにより、iOSの標準の「連絡先」アプリのように一覧性が大きく向

上した。

◎区切りリストのコード

<ul data-role="listview" data-autodividers="true"> <li><a href="#">Aichi</a></li> <li><a href="#">Akita</a></li> <li><a href="#">Aomori</a></li> 〜</ul>

◎自動的に変換された見出し付きリストのコード

<li data-role="list-divider" role="heading" class="ui-li ui-li-divider ui-bar-b">A</li><li><a href="#">Aichi</a></li><li><a href="#">Akita</a></li><li><a href="#">Aomori</a></li><li data-role="list-divider" role="heading" class="ui-li ui-li-divider ui-bar-b">E</li><li><a href="#">Ehime</a></li><li data-role="list-divider" role="heading" class="ui-li ui-li-divider ui-bar-b">G</li><li><a href="#">Gifu</a></li><li><a href="#">Gunma</a></li>

◆ 区切りリストの例

iOS 標準の「連絡先」アプリのような区切りのあるリストが自動的に作成される。

用語区切りリスト _P214ソート _P214

関連する法則

33パネルウィジェットにリストを設置してより多くのリンクを表示させる _P82

41複雑になりがちなリストを見やすくする _P96

42　　　　第1章　jQuery Mobileの基本を知る法則

重要度★★★

難易度★★★

◎リスト要素に独自デザインを適用するコード

.list { margin: -16px; padding: 0; position: relative;}.list li { border-bottom: 1px solid #E4E0BE; list-style: none; float: left; width: 50% ;}.list li:nth-child(odd) a { border-right: 1px solid #E4E0BE;}.list li a { text-decoration: none; font-size: 12px; font-weight: normal; color: #777; padding: 10px; display: block; text-align: center; background: #FFFBD5;}

自動で区切りを挿入する機能は、自動で頭文字を検索

して区切ってくれるので非常に便利だが、データをソート

してくれる機能はない。例えば、右の例のように順番が錯

綜してしまっていても、HTMLに記載されているli要素の

順番どおりに区切りを挿入してしまい、同じ見出しが複数

回表示されてしまう。自動で生成してくれるのが便利なの

でつい見落としがちだが、このようなことがないように納

品前には入念にチェックして、手動でソートしておきたい。

ソート機能がないことに注意◎ソートされていないHTMLのコード<li><a href="#">Aichi</a></li><li><a href="#">Akita</a></li><li><a href="#">Ehime</a></li><li><a href="#">Aomori</a></li>

リスト要素の独自デザイン

Webサイトでリスト要素を使用するのは、この法則で紹介

しているような一覧表のようなものから、グローバルナビゲー

ション、ニュースリスト、フッタのナビゲーションなど多岐にわ

たる。このようにさまざまな役割があるリスト要素を、Webサイ

ト内で効率的に配置し、かつユーザーを迷わせないようにする

には、同じリスト要素であっても役割や重要度に応じてデザイ

ンを異なるものにする必要がある。

jQuery Mobileには役割に合わせたさまざまなリストが用意

されていて、そうしたリストを利用してもいいが、独自デザインで

作成することも可能だ。独自デザインにしたいときは、通常の

HTMLのCSSの適用と同様に、<ul data-role="listview"></

ul>としていたところを、<ul class="list"></ul>に変更し、そ

こにCSSを適用するだけだ。

jQuery Mobileに標準で備わっている区切りリストに、独自のデザインを適用させた。このように2段組にして色を付けることもできる。

こちらは3段組にして、色を水色に変えた例。狭い端末の画面で、多くの情報が一覧可能となる。

第1章　jQuery Mobileの基本を知る法則　　　　43

重要度★★★

難易度★★★

新着リストに更新時間を表示する

法 則　14 リストで情報を整理する

新着リストに更新時間を表示して 最新情報の鮮度を伝える

1日に2件ほどの更新があるサイトを想定してみよう。1日に数件の更新がある

更新頻度の高いサイトでは、最新の情報の鮮度がわかるように更新日や更新時間

の表示も必要になってくる。そこでこの法則では、区切りリストを利用して新着情

報ページを作成し、リストの見出し部分に更新日を、リストの項目部分に更新時間

を表示する方法を解説する。

jQuery Mobileでは、正しいHTMLの記述方法で指定することで、h3要素など

の重要な情報は大きく、p要素などの概要情報は小さく、優先度に合わせてレイア

ウトしてくれる。これを利用して見やすい新着情報ページを作成する。

日付ごとに区切りを入れて、全体の更新頻度を把握できるようになっている。

1 リストの情報を入力する

リストを作成し、サンプルコードのようにli要素で囲まれた中に必要な情報を入力していく。下層の情報がひと目でわかることが重要なので、h3要素でタイトル、p要素で概要がわかる情報、必要であればstrong要素などを使用して、キャッチコピーなどを入れる。

◎リストの情報を入力するコード

<li><a href="#"> <h3> イベント情報</h3> <p><strong> 詳細テキスト詳細テキスト </strong></p> <p> 詳細テキスト詳細テキスト詳細テキスト詳細テキスト詳細テキスト </p></a></li>

2 更新時間を表示する

p要素にclass="ui-li-aside"クラスを指定すると、その行の右上に文字を表示することができる。今回はここに更新時間を入力する。

◎更新時間を表示するコード

<p class="ui-li-aside"><strong>7:32</strong>AM</p>

3 日付ごとに区切りを入れる

法則11で解説したように、li要素にlist-dividerデータ属性を指定すればタイトル行を作成できる。

◎日付ごとに区切りを入れるコード

<li data-role="list-divider">2012年7 月2 日</li>

◆ 更新日と更新時間を表示する方法

44　　　　第1章　jQuery Mobileの基本を知る法則

重要度★★★

難易度★★★

画像と簡単な情報をまとめた 商品一覧ページを作成する

法 則　15 リストで情報を整理する

さまざまなリスト形式を組み合わせる法則11で解説したさまざまなリスト形式を組み合わせることで、ショッピングサ

イトのDVD情報のような、画像と簡単な情報をまとめた商品一覧ページを作成

できる。同じリストを使用しても、法則14で解説した新着情報のリストとDVD情

報などの商品リストでは役割も使い方も異なるため、その見栄えも変える必要があ

る。必要なUIを使用し、見栄えのよいリストが作れるように心がけてほしい。

カテゴリごとに分類して表示したDVD 情報の一覧ページ。

◆ 商品一覧ページの作成方法1 リストにサムネイルを表示する

リストを作成し、リストにサムネイル用の画像を配置する。右側に配置するテキスト情報の量によって画像のサイズも変わってくるが、115×115pxくらいのサイズで画像を作っておくときれいに収まる。

◎リストにサムネイルを表示するコード

<li> <a href="#"> <img src="images/thumb.jpg" /> </a></li>

2 商品情報を入力する

法則14と同様にh3要素とp要素を使用し、おおよその内容が伝わるように文字情報を入力する。また、a要素には商品の購入ページへのリンクを指定する。

◎商品情報を入力するコード

<h3> リスト </h3><p> 概要概要概要</p>

3 商品詳細ページへのリンクも指定する

a要素のあとにもう1つa要素を入れ、ダイアログで商品詳細ページが表示されるようにする。

◎商品詳細ページへのリンクを指定するコード

<a href="dammy.html" data-rel="dialog" data-transition="slideup"></a>

4 区切りリストを挿入する

作品のカテゴリごとに、タイトルを入れる区切りリストを挿入する。

◎区切りリストを挿入するコード

<li data-role="list-divider"> ゾンビ映画</li>

用語サムネイル _P214

第1章　jQuery Mobileの基本を知る法則　　　　45

重要度★★★

難易度★★★

法 則　16 リストで情報を整理する

下層ページの情報量をリストに表示して ユーザーのストレスを軽減する

おすすめレストラン一覧に紹介店舗数を表示するスマートフォンはブロードバンドと比べて通信速度が遅いので、ページを進んで

また戻ってくるという動作が億劫になりがちだが、下層ページの情報量をあらかじ

め数字でリストに表示しておけば、ユーザーのストレスを少なからず軽減できるだ

ろう。ここでは例として、タウン情報サイトのおすすめレストラン一覧のようなペー

ジを作成してみよう。

1 リストに次ページの内容を入力する

リストを作成してリンクを設定し、次のページの内容（この例では料理のカテゴリ）を入力する。

◎リストに次ページの内容を入力するコード

<li><a href="#"> 洋食</a></li>

2 リストにアイコンを表示する

料理のカテゴリを表すアイコンを作成し、img要素にclass="ui-li-icon"クラスを設定してテキストの前に挿入する。

◎リストにアイコンを表示するコード

<img src="images/icon.jpg" class="ui-li-icon">

3 リストにカウントアイコンを表示する

タップして進んだ下層のページには複数の項目（この例では店舗数）が存在するので、それがあらかじめわかるようにカウントの数字が入ったアイコンを表示する。数字はclass="ui-li-count"クラスと指定したspan要素で囲む。

◎リストにカウントするアイコンを表示するコード

<span class="ui-li-count">12</span>

4 区切りリストを挿入する

カテゴリを地区ごとに分けるため、タイトルとなる区切りリストを挿入して、ページを見やすくする。

◎区切りリストを挿入するコード

<li data-role="list-divider"> 千代田区</li>

◆ 紹介店舗数の表示方法

下層ページに進んだときに表示される情報量がわかると、遷移する手間が省けるのでユーザビリティが向上する。

46　　　　第1章　jQuery Mobileの基本を知る法則

重要度★★★

難易度★★★

法 則　17 スマートフォンのフォームを理解する

状況に合わせた文字入力フォームを 選択する

想定されるさまざまなUIをきれいに整えるWebサイトを制作する過程においては、「お問い合わせフォーム」や「カートシ

ステム」などのさまざまな文字入力フォームを作成することがある。こうしたフォー

ムページは、UIの種類が多かったりレイアウトが難しかったりして、コーディング

の負荷が高くなりがちだ。特にスマートフォンの場合は、オン／オフを切り替えるフ

リップスイッチなどの特有のUIがあったり、縦横のレイアウトを考慮しなければな

らなかったりする。

しかし、jQuery Mobileは、ルールに従って制作することで、想定されるひと通り

のUIをきれいに整えてくれる。jQuery Mobileの機能を使用して実例に合わせた

フォームを作成してみれば、さまざまなケースに合わせたフォームページの作り方

やイベントのハンドリング方法を理解できるようになるだろう。

フォームの作成方法は下のソースコードのように<form action="#" method

="get">〜</form>で囲み、formであることを宣 言し、次に<div data-role=

"fieldcontain">〜</div>で囲み、個別の要素を配置すればいい。この法則では

代表的な文字入力フォームを紹介しよう。

input要素の基本となる形。このUIは名前やメールアドレスなど、主に1行の入力を促す入力フォームに使用する。

◎文字入力フォームのコード

<form action="#" method="get"> <div data-role="fieldcontain"> <!-- 要素を配置します --> </div></form>

◎1行の入力を促すコード

<input type="text" name="name" id="name" value="" />

◆ 1行の入力を促すテキスト入力フォーム

複数行の入力が可能なテキストエリアも、サンプルのようにcols属性とrows属性を指定すれば、テキストエリアと同じ幅の入力しやすいUIで表示できる。このテキストエリアは、問い合わせや商品の感想など、多くのテキストを入力する可能性がある項目に使用する。

◎複数行の入力を促すコード

<textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>

◆ 複数行を入力できるテキスト入力フォーム

用語cols属性 _P212rows属性 _P212

第1章　jQuery Mobileの基本を知る法則　　　　47

重要度★★★

難易度★★★

見た目はテキスト入力フォームと似ているが、左側に「検索」を示す虫眼鏡アイコンが表示される検索用のフォーム。入力中に右側に表示される　　ボタンをタップすれば、入力した内容が削除される。

◎検索フォームのコード

<input type="search" name="search" id="search" value="" placeholder=" キーワード ">

◆ 検索フォーム

jQuery Mobileの標準の機能。詳細は法則24を参照。

◆オートコンプリート機能「Autocomplete」ht tp: //demos.jquerymobile.com/1.3.0-rc.1/docs/demos/widgets/autocomplete/

カレンダーから日付を入力することが可能になる。詳細は法則25を参照。

◆datepickerプラグイン「jquery-mobile-datepicker」https: //github.com/arschmitz/ jquery-mobile-datepicker-wrapper

テキストエリアへの入力を補助する機能やプラグイン

スマートフォンのタッチパネルは入力端末としてまだ日が浅

く、不慣れな人だとちょっとした情報を入力するだけでも考え

ている以上に時間がかかってしまうものだ。jQuery Mobileに

は、そうした入力を補助する機能やプラグインがあるので紹介

しよう。なお、これらの機能やプラグインの使い方は、後述する

法則でより詳細に説明している。

48　　　　第1章　jQuery Mobileの基本を知る法則

重要度★★★

難易度★★★

法 則　18 スマートフォンのフォームを理解する

スマートフォンらしいタッチパネルを 生かしたフォームを利用する

スマートフォン特有のUIだが、主にオン／オフの切り替えなどに使われる。押したりスライドしたりして切り替えることが可能だ。機能そのものは後述するラジオボタンでも代用可能だが、選択肢が2つの場合はこのフォームのほうが選択しやすいだろう。

これもスマートフォン特有のUIだ。iOSではボリュームや明るさの調整に使われている。Webサイト上のフォームとしても、色やサイズの指定など、一定の範囲内から値を指定する用途で使い勝手がいいだろう。

指で動かすスイッチを使ってユーザーの負担を軽くする法則17で解説した文字入力フォームのUIの他にも、jQuery Mobileにはタッチ

パネルを生かしたさまざまなUIが用意されている。オン／オフの切り替えなどに使

われる「スイッチ」や、一定の範囲内から値を指定できる「スライダー」、複数の項

目から値を選択できる「チェックボックス」「ラジオボタン」などのUIをうまく利用

すれば、ユーザーに文字入力させる負担を大きく軽減できる。この法則では、これ

らのUIがどのような用途で使いやすいのかを解説していこう。

◎フリップスイッチのコード

<select name="flipswitch" id="flipswitch" data-role="slider"> <option value="off"> オフ </option> <option value="on"> オン </option></select>

レンジスライダーは高機能なUIで、1つのスライダーに対して2つの値を設定できる。商品の価格帯を最安値と最高値でユーザーに設定してもらうなど、低い値と高い値を設定しなければならない項目に使うといい。

◎レンジスライダーのコード

<div data-role="rangeslider"> <label for="range-1a"> レンジスライダー </label> <input type="range" name="range-1a" id="range-1a" min="0" max="100" value="40"> <label for="range-1b"> レンジスライダー </label> <input type="range" name="range-1b" id="range-1b" min="0" max="100" value="80"></div>

◎スライダーのコード

<input type="range" name="slider" id="slider" value="50" min="0" max="100">

◆フリップスイッチ

◆レンジスライダー

◆スライダー

第1章　jQuery Mobileの基本を知る法則　　　　49

重要度★★★

難易度★★★

チェックボックスは、数多くの項目から複数選択できる機能をもつ。チェックボックスは項目をグループ化するdata-role="controlgroup"属性を使わずに、バラバラに配置することもできるが、実際には複数の項目からいくつかを選択するという意味合いからも、サンプルのようにcontrolgroup属性を使ってまとめておくのが妥当だ。

◎controlgroup属性を使ったチェックボックスのコード

<fieldset data-role="controlgroup"> <legend> チェックボックス </legend> <input type="checkbox" name="checkbox-1a" id="checkbox-1a" class="custom" /> <label for="checkbox-1a"> 食べる </label> <input type="checkbox" name="checkbox-2a" id="checkbox-2a" class="custom" /> <label for="checkbox-2a"> 寝る </label> <input type="checkbox" name="checkbox-3a" id="checkbox-3a" class="custom" /> <label for="checkbox-3a"> 遊ぶ </label> </fieldset>

◆チェックボックス

1つ1つの文章が少ないときなどは、項目にdata-type="horizontal"属性を設定すれば、横並びに表示されてコンパクトに収められる。なお、各UIを説明するテキストは基本的にlabel要素で囲むのだが、このサンプルのように横並びのグループ全体の説明をするときには、legend要素を使うことが推奨されている。label要素を併記した入力フォームは左右に並んで整列するが、legend要素を使うとテキストとUIが上下に並び、左右に横幅が必要な入力フォームに最適な表示をしてくれるようになっている。

◆ボタン式のチェックボックス

ラジオボタンは複数の項目から1つだけを選択させるためのもので、ユーザーに何かの可否を選択させる場合や、支払方法を1つだけ選択させるときなどに使用する。これもチェックボックスと同様にdata-type="horizontal"属性を設定すると、ボタン式のラジオボタンになり、見た目はただのグループボタンに見えるが、複数をまとめて横並びに配置できるようになる。例えば「はい／いいえ／どちらでもない」など、短い選択肢からどれかを選択してもらう場合に使用するといいだろう。

◎ラジオボタンをボタン式にするコード

<fieldset data-role="controlgroup"> <legend> ラジオボタン </legend> <input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" /> <label for="radio-choice-1">猫</label> <input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2" /> <label for="radio-choice-2">犬</label> <input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3" /> <label for="radio-choice-3"> 鳥</label></fieldset>

◆ラジオボタン

ボタンの左右位置はどのように決めればいいの？

本書のサンプルでは、「送信」ボタンなど何かを決定するボ

タンは右側に配置している。こうした何かを決定するアクショ

ンは、Windowsのデフォルトでは左側に、Macでは右側に配

置されている。OSの普及率を考えると、左側に「送信」ボタン

を配置するほうがふさわしいように思えるかもしれない。しか

し、PCの画面は、基本的に左上から右下に目線が行き、最後

に見る右下に次のアクションのためのボタンなどがあるという

共通認識がある。それはスマートフォンでも同様で、ページ遷

移も多くは右から左に動くため、右下に「次へ進む」ボタンを、

左下には「キャンセル」または「戻る」などのボタンを配置する

のが無難だといえる。

50　　　　第1章　jQuery Mobileの基本を知る法則

重要度★★★

難易度★★★

◎セレクトメニューで曜日を選ぶコード

<select name="select-1" id="select-1"> <option value="standard"> 曜日を選ぶ </option> <option value="0"> 日</option> <option value="1"> 月</option> <option value="2"> 火</option> <option value="3"> 水</option> <option value="4"> 木</option> <option value="5"> 金</option> <option value="6"> 土</option> </select>

法 則　19 スマートフォンのフォームを理解する

選択入力可能なメニューを利用する

サブメニューが表示されるタイプのフォームを利用する

◆セレクトメニュー

iOSでセレクトメニューを表示したところ。メニューをタップすると「スピニングホイール UI」が表示される。

◆カスタムセレクトメニュー◎ダイアログでセレクトメニューを表示するコード

<select name="select-2" id="select-2" data-native-menu="false"> <option value="standard"> 場所を選ぶ </option> <option value="0"> 北海道・東北</option> <option value="1"> 関東・中部</option> <option value="2"> 近畿・中国・四国</option> <option value="3"> 九州・沖縄</option> </select>

iOSでカスタムセレクトメニューを表示したところ。選択肢の数によってセレクトメニューとカスタムセレクトメニューを使い分けよう。

セレクトメニューは、PCではプルダウンメニューのように

表示されるが、iOSでは画面下からスピニングホイールUI

が、Androidではダイアログボックスが表示される。jQuery

Mobileでは、デフォルトではサンプルのように下矢印のアイ

コンが表示されるため、これをタップすることで選択用のコ

ントローラーが表示される。

jQuery Mobileには、さらに「カスタムセレクトメニュー」と

いうものが用意されていて、iOS標準のスピニングホイール

UIではなく、Androidと似た形式のダイアログ状の独自UI

も使用できる。例えばiOSとAndroidでデザインを合わせた

いときや、選択肢が多くスピニングホイールUIでスクロール

させるのが妥当でないときなどに使用するといいだろう。

第1章　jQuery Mobileの基本を知る法則　　　　51

重要度★★★

難易度★★★

法 則　20 フォームを活用する

必須項目が入力されたら 「送信」ボタンをアクティブに変更する

◆誤送信防止の機能を付ける方法

必須項目「※」が入力されていないと「送信」ボタンがアクティブにならない。

1 ラベルに赤色の※印を付ける

必須項目であることがひと目でわかるように、※印のラベルの色を赤色にする設定をCSSファイルに記述する。

◎ラベルの色を赤色にするコード

.attention { color: #ff0000;}

2 ラベルとして※印を配置する

HTMLファイルにラベルとして※印を記述する。

◎ラベルを※印にするコード

<label for="mail"> メールアドレス <span class="attention"> ※</span></label>

◎updataアクションのコード

$(document).on("pageinit", function(){ $('input').on('change',update); $('textarea').on('change',update); update();});

3 ページのhead部分にJavaScriptを記述する

pageinitで初期化されたときに実行される部分には、「input」や「textarea」に変更が加わった際にupdateというアクションを起こすイベントのリスナーを設定する。

JavaScriptでボタンに誤送信防止の 機能を付ける

お問い合わせページ自体は、テキスト入力フォームなどを数種類並べてフォーム

ページとして作成するのだが、その後、ラベルをプレースホルダーという機能を使

用してコンパクトにまとめれば完成だ。しかし、お問い合わせページは、メーラーを

起動せずにメールを送信できるので、必要な入力内容を入力し終える前に間違え

て「送信」ボタンをタップしてしまうことが予想される。それを防ぐためには、サー

バー側で送信内容をチェックしてエラーを表示させたり、クライアント側で必須項

目が入力されたかどうかをチェックして、入力が完了したら「送信」ボタンをアクティ

ブに変更したりするなど、さまざまな回避策がある。ここでは、クライアント側で

JavaScriptを使って構文をチェックし、jQuery Mobileに用意されている「ボタン

の有効（enable）／無効（disable）の切り替え機能」を使って誤送信防止の機能

を付けてみよう。

用語クライアント側 _P214プレースホルダー _P215

52　　　　第1章　jQuery Mobileの基本を知る法則

重要度★★★

難易度★★★

プレースホルダーを使えばユーザーも迷わなくなる

メールフォーム画面に必須の項目である「氏名」や「メール

アドレス」は、テキスト入力フォームで作成するが、メールアドレ

スのように入力される内容が定形フォーマットになる場合は、

placeholder=aaa@aaa.com属性を追加すればプレースホル

ダーの機能を使用でき、あらかじめ入力内容を示唆できる。

入力ができない状態のフォームを作る

◎テキスト入力フォームの例

<input disabled="disabled" type="text" name="text-basic" id="text-basic" value="">

jQuery Mobileのフォーム要素は、disableにすると入力が

できない状態を作ることができる。何か特定のアクションを行

わないと入力ができない項目や、値を入力する項目があること

を示唆したいが、まだ入力する段階ではないものなど、何らか

の理由で非アクティブな状態を作りたいときには、この機能

を使用するといいだろう。使い方は、それぞれのinput要素に

disabled="disabled"という値を付け加えるだけでいい。

◎送信ボタンのタップを判定するコード

function update(){ if( $('#mail').val() != '' && $('#textarea').val() != '') { $('button').prop('disabled', false); } else { $('button').prop('disabled', true); }}

4 「送信」ボタンのタップの可否を決める

updateが実行されたら各inputを確認して、入力があるかどうかを調べ、「送信」ボタンのタップの可否を決めるように変更を加える。「$（フォーム要素）.val()」で入力されている内容を取得できるので、この例では「空ではないとき」という意味で「if( $

（フォーム要素）.val() != '') { 処理内容}」という記述をしている。なお、jQuery Mobileでボタンのアクティブな状態を切り替えるには、「 $('button').prop('disabled', true); or $('button').prop('disabled', false);」とすればいい。最後に、ページを開いたときにも入力内容をチェックして、pageinit内からも一度updateをコールしておこう。

すべての要素が入力できなくなっている。

第1章　jQuery Mobileの基本を知る法則　　　　53

重要度★★★

難易度★★★

基本要素を理解してユーザーフレンドリーな アンケートページを作成する

法 則　21 フォームを活用する

選択項目の数に合わせてパーツを小さくするアンケートフォームは、これまでの法則で解説してきたさまざまなフォームを、質問

項目に合わせて選択する必要がある。例えば「メールアドレス」なら法則17で解説し

た「文字入力フォーム」を選択し、「性別」であれば法則18で解説した「ラジオボタン」

を選択すればいい。しかし、より使いやすさを向上させるためには、選択項目が多い

ときにフォームのパーツを小さくするといった細かなカスタマイズが必要だ。この法

則では、これまで解説してきたフォームを項目や画面スペースに合わせてカスタマイ

ズして、ユーザーフレンドリーなアンケートページを作成する方法を紹介しよう。

1 「性別」に横並びのラジオボタンを使う

一般的なラジオボタンのままでも要件は満たすが、説明が不要な単純なものからどれか1つだけを選択させる場合、datatype="horizontal"属性を用いて横並びのグループボタンにすると使いやすくなり、かつ省スペースにもなる。

また、性別を必須項目としなかった場合は、何も選択せずに送信する人はすべて男性になってしまうため、初期状態でchecked属性を指定しないでおくか、タップしてキャンセルできるように未選択のラジオボタンを用意するといいだろう。これにより、誤情報が含まれるのを防ぐことができる。筆者は意図していないボタンを間違えてタップしてしまうことがある。そこで、キャンセルできるほうが親切な設計だと考え、可能であれば未選択項目を付け足している。

さらに、アンケートフォームは問い合わせフォームとは異なり、入力する項目が多くなるので、ボタンを小さく表示するようにdata-mini="true"という値を指定しておこう。これによりレイアウトがスッキリし、入力項目が多いという印象を軽減できる。

◎性別のラジオボタンのコード

<fieldset data-role="controlgroup" data-type="horizontal" data-inline="true" data-mini="true"> <legend> 性別</legend> <input type="radio" name="radio-choice-1" id="radio-choice-1" /> <label for="radio-choice-1"> 男性</label> <input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2" /> <label for="radio-choice-2">女性</label> <input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3" checked="checked" /> <label for="radio-choice-3"> 未選択</label></fieldset>

◆アンケートページの作成方法

さまざまなフォームを駆使したアンケートページの例。

54　　　　第1章　jQuery Mobileの基本を知る法則

重要度★★★

難易度★★★

「身長」と「体重」の項目をテキストエリアにしてしまうと、中にはkg やcmまで入れる人がいるかもしれない。また、セレクトメニューにすると、項目が膨大になりすぎてしまう。その点スライダーは、ドラッグ操作で数値を変更できるうえ、最大値と最小値を簡単に設定可能なので、身長や体重といった数値を入力するような場面では非常に有効なUIとなる。さらに、このフォームでは「value」（初期値）、

「min」（最小値）、「max」（最大値）の3つの値をあらかじめ設定しておくことも可能である。なお、数値といっても靴のサイズは数値が限られているのでセレクトメニューのほうが使いやすい。

2 数値を入力する項目にスライダーを使う ◎身長・体重のスライダーのコード

<label for="slider"> 身長</label> <input type="range" name="slider" id="slider" value="160" min="130" max="200" data-inline="true" data-mini="true" />

《中略》<label for="slider"> 体重</label> <input type="range" name="slider" id="slider" value="65" min="30" max="100" data-inline="true" data-mini="true" />

3 「ご職業」に縦並びのラジオボタンを使う

5 メルマガの送付可否の確認にフリップスイッチを使う

職業の項目は、数ある選択肢の中から1つを選ぶだけなのでラジオボタンを使用するといい。ラジオボタンは、性別と同じように横並び表示にすることも可能だが、職業の場合、ある程度の長さの文字が少なくとも3つ以上は並ぶので、datatype="horizontal"属性を指定せず、デフォルトでのグループにして縦並びに表示するほうが無難だろう。横並びと縦並びの使い分けに関しては、ラジオボタンだけではなくチェックボックスでも遭遇する問題だが、これは文字量やその内容によって変わってくるということを覚えておこう。

◎職業のラジオボタンのコード

<fieldset data-role="controlgroup" data-mini="true"> <legend> ご職業</legend> <input type="radio" name="radio-choice-2" id="radio-choice-1" value="choice-1" checked="checked" /> <label for="radio-choice-1">学生</label> <input type="radio" name="radio-choice-2" id="radio-choice-2" value="choice-2" /> <label for="radio-choice-2"> 会社員</label> <input type="radio" name="radio-choice-2" id="radio-choice-3" value="choice-3" /> <label for="radio-choice-3"> その他</label></fieldset>

4 「きっかけ」に縦並びのチェックボックスを使う

こうした項目は「雑誌で」「テレビで」「友人からすすめられて」などから複数項目を選択する可能性があるので、ラジオボタンではなくチェックボックスを使用する。チェックボックスはラジオボタンとは異なり、複数項目が選択でき、一度選択した項目を再度タップすることでキャンセルできるのが特徴だ。

◎きっかけ項目のチェックボックスのコード

<fieldset data-role="controlgroup" data-inline="true" data-mini="true"> <legend> このサイトをご覧になられたきっかけ </legend> <input type="checkbox" name="checkbox-1a" id="checkbox-1a" class="custom" /> <label for="checkbox-1a">雑誌で </label> <input type="checkbox" name="checkbox-2a" id="checkbox-2a" class="custom" /> <label for="checkbox-2a"> テレビで </label> <input type="checkbox" name="checkbox-3a" id="checkbox-3a" class="custom" /> <label for="checkbox-3a"> 友人からすすめられて </label> <input type="checkbox" name="checkbox-4a" id="checkbox-4a" class="custom" /> <label for="checkbox-4a"> その他</label></fieldset>

メールマガジンの送付について許可するかどうかを尋ねる項目では、フリップスイッチを使う。オン／オフの選択がドラッグでもタップでも可能で、非常に使いやすいUIだ。フリップスイッチはサンプルのように説明文が長くなりがちだが、デフォルトの状態でlabel属性と併用して使うと、左側に横幅3文字程度で文字が折り返され、そのすぐ右側にスイッチが表示されるような比率となる。しかし、legend属性を使用して縦並びになるように配置すれば、文字の折り返しが減り、説明文が読みやすくなる。

◎メルマガ送付可否のフリップスイッチのコード

<legend> メールマガジンを送信させていただいてもよろしいでしょうか？ </legend> <select name="slider2" id="slider2" data-role="slider" data-mini="true"> <option value="off"> いいえ </option> <option value="on"> はい </option> </select>

第1章　jQuery Mobileの基本を知る法則　　　　55

重要度★★★

難易度★★★

法 則　22 フォームを活用する

買い物カートを利用した ECサイトを作成する

フォームを活用してスムーズに購入完了まで進める 導線やレイアウトを設計する

これまで解説してきたフォームを組み合わせてEC サイトのページを作成してみ

よう。ECサイトはフォームを使う場面が多く、特に購入画面ではさまざまな入力項

目が必要になる。そのため、ユーザーの購入意欲を維持したままスムーズに購入

完了画面まで進んでもらえるように、導線やレイアウトを設計する必要がある。以

降、買い物カートの購入画面を例に、項目が多く長いページになってしまいがちな

フォームページのレイアウト方法と、入力方法をチェックするためのイベントのハ

ンドリング方法を解説していく。なお、「名前」と「メールアドレス」の入力フォー

ムについては、法則20と同じなので参照してほしい。

「カートの中身」はサムネイル付きの リストで一覧にする

まず、商品の購入後に表示される「カートの中身」ページを見ていこう。ここでは

サムネイル付きのリスト（法則11）で商品一覧を作成しておく。カートに入れた商

品をこのページで削除する人もいるので、分割ボタンリスト（法則11）を使用して

削除アイコンを右端に表示しておくのもいいだろう。さらにリストをタップしたとき

に、別ウィンドウで商品詳細をもう一度見せるなどすれば、買い物がしやすいサイ

トになる。

なお、販売商品がお茶や消耗品などで、同じような写真が並ぶ場合は、テキスト

のみのリストでも十分だ。逆に表示させる項目をもっと多くしたい場合は、jQuery

Mobileのスタイルでは表示に向かないので、data-role="none"属性を使用して

jQuery Mobileのスタイルを外してもいい。その場合は、なるべく普通のコーディン

グ方法でtable要素を使用し、商品の色や数などを並べて、見やすい一覧を作成し

よう（普通のコーディング方法については法則82を参照）。

◎サムネイル付きのリストのコード

<ul data-role="listview" data-inset="true" data-split-icon="delete"> <li> <a href="#"> <img src="images/thumb.jpg" /> <h3>商品A</h3> <p> 説明文</p> </a> <a href="#"></a> </li></ul>

サムネイル付きのリストを利用した「カートの中身」ページ。このページで商品の削除ができるように、分割リストを使用して削除アイコンを配置した。

56　　　　第1章　jQuery Mobileの基本を知る法則

重要度★★★

難易度★★★

お届け先のページでは、住所を都道府県から順番に入

力していく。住所は入力内容も多く、ユーザーの離脱率が上

がるところなので、入力間違いがないようにしたい。スマー

トフォンのキーボードは入力しにくいので、ユーザーの負荷

を軽減できるように、セレクトメニューでだいたいの情報が

入力できるように設計しておくことが重要になる。

また、入力項目がずれて入力し直しとなるような2度手間

を回避するため、未入力の段階では都道府県のみが入力

できるようにし、都道府県を選択したあとに市町村が選択

できるようにするといい。同様に市町村の選択後に番地と

建物名が入力できるようにする。

こうした制御にはJavaScriptを使う。まず、ページの初

期化時にセレクトメニューを変更した場合の挙動を設定す

る。この例では、update関数を実行するようにしている。こ

うしたJavaScriptの使い方では、ページ上のさまざまなUI

から入力終了時の挙動を入手してくるのだが、この例では

selectメニューの変更を取得している。「$(セレクタ名)」

で個別のUIから値を取得して、別々の関数を実行するよう

に設定することも可能だし、「$(要素名)」でページ上のす

べてのUIの変更に対して一括でイベントを取得することも

可能だ。

セレクトメニューの都道府県の値は「$('#select-1').

val()」で取得できるので、その値が初期値の'standard'の

ままかどうかを判定する。この値の取得はUIの種類によっ

て変わってくるが、セレクトメニューやテキストエリアはval()

で取得できる。値を取得した結果によって、次のように設定

をする。

・ 初期設定値の'standard'以外の項目が選択された

→セレクトメニューの市町村をアクティブに変更する

　$('#select-2').selectmenu('enable');

・ 初期設定値の'standard'のままだった

　→タップできない状態のままとする

　$('#select-2').selectmenu('disable');

以上のことを、2つ目のセレクトメニューである市町村の

ほうにも設定し、最後にテキストエリアのenable／disable

を変更するようにする。セレクトメニューの enable／

disableは「selectmenu(値)」の値を変更するのだが、テキ

ストエリアでは「$('textarea').textinput(値);」の値を変更

してenable／disableを指定する。イベントの取得や値の

設定は通常のjQuery Mobileのコーディングとは異なり、

JavaScriptを使用してイベントをやり取りするので若干や

やこしいが、ユーザーの離脱を防ぐためのとても大事な設

定なので、丁寧に設定しよう。

「お届け先」はセレクトメニューフォームを使って 入力できるようにする

◆セレクトメニューを使って入力の手間を省く

セレクトメニューから都道府県を選択してからでないと、次の市町村が入力できないようになっている。

第1章　jQuery Mobileの基本を知る法則　　　　57

重要度★★★

難易度★★★

◎ページの初期化を行うJavaScriptのコード

$(document).on("pageinit", function(){ $('select').on('change',update); update();});

◎セレクトメニューを制御するコード

<div data-role="fieldcontain"> <label for="select-1" class="select"> お届け先：<br /> 都道府県 <span class="attention"> ※</span></label> <select name="select-1" id="select-1" data-mini="true"> <option value="standard"> 選択して下さい </option> <option value="0"> 東京都</option> <option value="1"> 大阪府</option> </select></div> <div data-role="fieldcontain" > <label for="select-2" class="select"> お届け先：<br /> 市町村 <span class="attention"> ※</span></label> <select name="select-2" id="select-2" data-mini="true"> <option value="standard"> 選択して下さい </option> <option value="0"> 東京都</option> <option value="1"> 大阪府</option> </select></div> <div data-role="fieldcontain" > <label for="select-2" class="select"> お届け先：<br /> 番地、マンション <span class="attention"> ※</span></label> <textarea cols="40" rows="8" name="textarea" id="textarea"></textarea></div>

包装するかどうかの選択には フリップスイッチを使う

商品を包装するかどうかの選択は、法則21で解説した

アンケートフォームのメルマガ送付可否の項目と同様に、

フリップスイッチで設定する。また、ギフトラッピングなど

で包装紙が数種類ある場合は、ラジオボタンで設定して

もいいだろう。さらに支払方法の選択はラジオボタンが

適している。

◆フリップスイッチとラジオボタンの使い分け

代引手数料などの注意書きも必要になるので、リストのあとにはp要素で説明を入れたり、「お支払いの方法」ページなどへリンクしたりしよう。

◎フリップスイッチとラジオボタンのコード

<div data-role="fieldcontain"> <label for="slider2"> 包装</label> <select name="slider2" id="slider2" data-role="slider"> <option value="off"> しない </option> <option value="on"> する </option> </select> </div>

<div data-role="fieldcontain"> <fieldset data-role="controlgroup" data-mini="true"> <legend>支払方法</legend> <input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" /> <label for="radio-choice-1"> 代金引換</label> <input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2" /> <label for="radio-choice-2">口座振替</label> <input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3" /> <label for="radio-choice-3">クレジットカード </label> </fieldset> <p> ※代金引換は手数料がかかります </p></div>

58　　　　第1章　jQuery Mobileの基本を知る法則

重要度★★★

難易度★★★

◎疑似的なスクロールバーのコード

.iframe { height: 200px; -webkit-overflow-scrolling: touch; overflow-y: scroll; padding: 5px;}

JavaScriptによる要素の取得

この法則では、要素の使用可否の切り替えをJavaScriptで

行っているが、その流れは次のようになっている。

①特定の要素に何か変更が加わった際に、「$「(要素を指定)」.

bind('change',update);」という形でupdate関数を実行する

②実行されるupdate関数の中で、「Aという要素の入力値が

○○だった場合には、使用可能にする。さもなければ使用不

可にする」と分岐している

要素を取得する書き方はさまざまで、<input type="text"

name="name" id="name" value="" />という要素が変更さ

れたタイミングを取得するには、下の表に示す4つの書き方の

いずれでも可能だが、それぞれ特徴がある。ページ内の要素の

数や種類によって正しく使い分けられるようになっておくと、バ

グのないセキュアなフォームを作成できるようになる。

書き方 特徴

$('input').on('change',update); ページ内に複数のinputがあり、そのいずれかが変更されたときにイベントを取得したい場合。ただし、この書き方は一律で便利な半面、画面内に配置されているすべての要素で実行されるので、ページの要素が多い場合には予想外の挙動が出てくる可能性がある

$('.name').on('change',update); 特定のセレクタのものだけでいい場合

$('input.name').on('change',update); セレクタ名が他の要素でも使用されている可能性がある場合

$('#name').on('change',update); 特定の1つの要素だけをチェックしたい場合。ただし、要素すべてに指定が必要なので、JavaScriptが非常に長くなってしまう

プライバシーポリシーは疑似的に スクロールバーを設定する

ECサイトではユーザーに個人情報を入力させるため、

プライバシーポリシーの同意が必要になる。このプライ

バシーポリシーの表示にiframeを使っているサイトも多

いのだが、ここではdiv要素を入れ子にして疑似的にスク

ロールバーを設定して規約を表示するようにしている。な

お、div要素には、「高さの指定」「タッチでスクロールさ

せるように挙動を設定する」「はみ出している部分をスク

ロールさせる」といった基本的な設定以外にも、角丸や

ボーダー背景色などもCSSで併せて設定し、ストレスな

く閲覧できるように整えておこう。

◆規約には疑似的にスクロールバーを設定する

◎要素を取得するJavaScriptの書き方

第1章　jQuery Mobileの基本を知る法則　　　　59

60　　　　第1章　jQuery Mobileの基本を知る法則

iPhoneとAndroidの違い

jQuery Mobile 1.4は、スマートフォン環境ではiOSは4

〜7.0、Androidは2.1〜4.4、他にもWindows Phone7.5

〜8やBlackberry6〜10に対応、デスクトップ環境でも

Chromeは16〜24、Safariは5〜6、Firefoxは10〜18、

またIEは8〜10など、かなり幅広いプラットフォームに対

応している。こうしたさまざまな環境に対して細かな対応状

況を気にせずにWebサイトを作成できるのは大きな強みと

なっている。

ただ気を付けなければいけないのは、こうして単純にサ

ポートプラットフォームを並べてみると相当幅広く対応し

ているように見えるが、実際にそれぞれの端末を普段から

使用している人からみれば、ボタンの位置やサイズなど使

い慣れているUIとはかけ離れたWebサイトになっている

と違和感をもつことがあるのだ。

端末の違いとしてよくいわれるのが、iPhoneでは端末

に「戻る」ボタンが存在しないため、画面の左上に「戻る」

ボタンを設置することが多いということだ。Androidなら

ば端末自体に「戻る」ボタンが用意されていて、画面の中

にはボタンは必要ない。

他 にもセレクトメニューの 開き方が 異 なったり、

Androidではタブは画面上部に配置されることが多いが、

iOSでは下のほうが多いなどさまざまな違いが存在する。

どちらか一方のOSに合わせてデザインすると、その

OSに慣れている人にとっては非常に使いやすくなるが、

半面使いにくくなるユーザーがいるということは考慮しな

ければならない。

とはいえ、結局デザインは1つしか選択できず、どちら

に合わせればいいのかという結論はないのだが、ユーザー

にとって使いやすいWebサイトに仕上げるためには、ター

ゲットとするユーザー層やコンテンツの内容など、それぞ

れの特性を考慮したうえでサイトを制作する必要がある

だろう。

jジェイクエリー

Query Mモ バ イ ル

obile スマートフォンサイト・デザインWウ ェ ブ

ebクリエイターが身み

につけておくべき新しん

・100 の法ほう

則そく

。

2014 年 6 月 30 日　初版発行

著　者 石いしはら

原 悠ゆう

発行人 土田米一発　行 株式会社インプレスジャパン An Impress Group Company

〒 102-0075 東京都千代田区三番町 20 番地発　売 株式会社インプレスコミュニケーションズ An Impress Group Company

〒 102-0075 東京都千代田区三番町 20 番地

出版営業 TEL 03-5275-2442

http://www.ips.co.jp印刷所 株式会社廣済堂

本書の内容はすべて、著作権法上の保護を受けております。本書の一部あるいは全部について、株式会社インプレスジャパンから文書の許諾を得ずに、いかなる方法においても無断で複写、複製することは禁じられています。

ISBN 978-4-8443-3537-5 C3055Copyright © 2014 Yu Ishihara. All rights reserved. Printed in Japan

本書の内容に関するご質問は、書名・ISBN（奥付ページに記載）・お名前・電話番号と、該当するページや具体的な質問内容、お使いの動作環境などを明記のうえ、インプレスカスタマーセンターまでメールまたは封書にてお問い合わせください。電話や FAX 等でのご質問には対応しておりません。なお、本書の内容に直接関係のないご質問にはお答えできない場合があります。また本書の利用によって生じる直接的または間接的被害について、著者ならびに弊社では一切の責任を負いかねます。あらかじめご了承ください。

造本には万全を期しておりますが、万一、落丁・乱丁がございましたら、送料小社負担にてお取り替え致します。お手数ですが、インプレスカスタマーセンターまでご返送ください。

■読者様のお問い合わせ先インプレス カスタマーセンター〒 102-0075 東京都千代田区三番町 20 番地TEL 03-5213-9295 ／ FAX 03-5275-2443info@impress.co.jp