著者プロフィール
石原 悠
（いしはら ゆう） 会社員として複数の会社でディレクター、デザイナーの経験を経て、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
ページの設定と構成要素を理解する . . . .182
Ajaxを使ったページ遷移を理解する . . . .203
Ajaxによるページ遷移の不具合を解消する . . . .224
jQuery Mobileに用意されているボタンを把握する . . . .235
ボタンにアイコンを表示する . . . .256
ページのヘッダに「戻る」ボタンを表示する . . . .277
複数のボタンをグループ化してユーザビリティを高める . . . .298
ヘッダを固定して最大限に有効活用する . . . .319
フッタのレイアウトを調整して見やすくする . . . .3310
複数ページにまたがるコンテンツを自由に行き来する . . . .3511
リストを使ってコンテンツを階層化する . . . .3712
読み込み専用のリストを使用する . . . .4113
リストに自動で区切りを挿入する . . . .4214
新着リストに更新時間を表示する . . . .4415
画像と簡単な情報をまとめた商品一覧ページを作成する . . . .4516
下層ページの情報量をリストに表示してユーザーのストレスを軽減する . . .4617
状況に合わせた文字入力フォームを選択する . . . .4718
スマートフォンらしいタッチパネルを生かしたフォームを利用する . . . .4919
選択入力可能なメニューを利用する . . . .5120
必須項目が入力されたら「送信」ボタンをアクティブに変更する . . . .5221
基本要素を理解してユーザーフレンドリーなアンケートページを作成する . . .5422
買い物カートを利用したECサイトを作成する . . . .56 章末コラム iPhoneとAndroid の違い . . . .60第 2 章
基本的な UI パーツを使いこなす法則
. . . .61 法則23
検索フォームにプレースホルダーとフィルタリング機能を使う . . . .6224
オートコンプリート機能を利用してユーザーの入力をサポートする . . . .63 基本的な使い方を知る ボタン要素を理解する ツールバーを理解する リストで情報を整理する スマートフォンの フォームを理解する フォームを活用する フォームを使いやすくする25
フォームの入力内容をあらかじめ指定する . . . .6426
ダイアログボックスの閉じ方やトランジションをカスタマイズする . . . .6627
ダイアログボックスの「閉じる」ボタンの位置を変更する . . . .6828
サイトが単調にならないようにダイアログボックスを使い分ける . . . .6929
ポップアップウィジェットを使用する . . . .7130
ポップアップウィジェットの位置や見栄えを変える . . . .7531
オーバーレイポップアップウィジェットを使用する . . . .7832
パネルウィジェットを使用して複雑なサイト構造を一覧できるようにする . . . .8033
パネルウィジェットにリストを設置してより多くのリンクを表示させる . . . . .8234
グリッドレイアウトを使った緩急のあるサイトを作る . . . .8335
レスポンシブグリッドでモニタサイズや端末の向きに応じたレイアウトにする . . . .85
36
レスポンシブテーブルでモニタサイズや端末の向きに応じたレイアウトにする . . . .87
37
カラムトグルのチェックボックスを使ってコンテンツの表示・非表示を切り替える . . . .89
38
開閉式コンテンツを利用して情報を効率的に格納する . . . .9039
開閉式コンテンツを複数並べてアコーディオンメニューにする . . . .9240
開閉式コンテンツのアイコンを変更する . . . .93 章末コラム CSSのマルチクラスの記述方法 . . . .94第 3 章
ページレイアウトをカスタマイズする法則
. . . .95 法則41
複雑になりがちなリストを見やすくする . . . .9642
初期状態の2つのテーマを理解する . . . .9743
自分で新しいテーマを作成してページに反映する . . . .9844
ページ遷移のエフェクトを理解して状況によって使い分ける . . . .9945
ヘッダとフッタを画面外に移動させ、フルスクリーンモードで読みやすくする. . . .10046
サイト全体に共通でヘッダ、フッタを固定表示する . . . .10147
ヘッダに複数のボタンを設置してページ全体の情報量を増やす . . . .10248
レイアウトを工夫してフッタを活用し、サイトをより見やすくする . . . .10449
ヘッダメニューをプルダウンメニューに変更してボタン数を増やす . . . .10650
プルダウンメニューに一手間加えて操作感を向上させる . . . .10951
ページ遷移時に表示されるローダーをオリジナルのものにする . . . .11052
省略されて「...」と表示される長いテキストを省略しないようにする . . . .11253
「ホーム画面に追加」をした際のサイトのアイコンをカスタマイズする . . .11454
背景にパターン画像を敷いてjQuery Mobileサイトの見栄えを変える . . . .11655
タブナビゲーションに通知件数アイコンを入れる . . . .11756
端末の種類や回転方向、解像度を識別してスタイルを反映する . . . .119 カスタマイズの 基本を理解する ヘッダとフッタを 活用する スタイルシートを使って カスタマイズする ページレイアウトを 工夫する ダイアログボックスを カスタマイズする ポップアップを カスタマイズする 画像を使ってカスタマイズする57
オリジナルアイコンを作成してサイトのオリジナリティを高める . . . .12258
CSS3のグラデーションを利用した立体的なボタンを作成する . . . .12459
CSS3のシャドウを利用した立体的なボタンを作成する . . . .12660
グローバル設定を利用してサイト全体のレイアウトを統一する . . . .12861
すべてのページにTwitterとFacebookへの投稿ボタンを設置する . . . . .13062
デフォルトの角丸とドロップシャドウを削除してシンプルなページを作成する . . .13263
ページトランジションを自分でカスタマイズする . . . .134 章末コラム CSSやCSS3の活用 . . . .136第 4 章
スマートフォンならではの
ジェスチャーを生かす法則
. . . .137 法則64
スマートフォン独自のジェスチャーに対するイベントを取得する . . . .13865
画面の回転のタイミングを取得して縦長画像と横長画像を入れ替える . . .14166
背景色をスクロール位置に応じて変える . . . .14367
ページのロードが完了した結果で成功と失敗のメッセージを表示する . . . .14568
ページを移動するたびにランダムに画像を切り替える . . . .14769
スクロール位置が変わったときにページトップボタンを表示する . . . .14970
どのリンクから移動してきたかによってページ上の文章を変える . . . .15171
複数の開閉パネルを同時に開いたり閉じたりする . . . .154 章末コラム マウスで操作するサイトとタッチ端末で操作するサイト . . . .156第 5 章
フレームワークやプラグインを活用する法則
. . . .157 法則72
スマートフォンサイトでGoogleマップを表示する . . . .15873
Googleマップにマーカーを付けたりクローズアップしたりする . . . .16074
端末をシェイクして画面を変える . . . .16275
スワイプで次の画像に移動するフォトギャラリーを作る . . . .16476
入力された郵便番号をもとに住所を自動表示する . . . .16677
リスト要素の右肩にバッジを追加する . . . .16978
データロードの成功時と失敗時に状況に合わせたアラートを表示する . . . .17179
Webサイト上で効果を見ながらjQuery Mobileのテーマを作成する . . . .17380
サードパーティ製のデザインを探してページに反映する . . . .17781
Twitter Bootstrap風のデザインにする . . . .17882
jQuery Mobile 独自のデザインを利用しないようにする . . . .179 章末コラム オープンソースのプラグインの選び方 . . . 180 JavaScriptを使って カスタマイズする イベント取得時の カスタマイズをする フレームワークや プラグインを使う オリジナルの プラグインを作成する テーマをカスタマイズする 既存サイトを ブラッシュアップする第 6 章
WordPress ＆ EC-CUBE を
カスタマイズする法則
. . . .181 法則83
YouTube RSSフィードからJSONをロードして一覧表示する . . . .18284
検索結果の一覧にサムネイル画像を表示する . . . .18485
作成したリストをタブで切り替えられるようにする. . . .18586
通知プラグインを使用して、RSSのロードに失敗したらアラートを表示する . . . .186
87
WordPressで構築したブログを端末に合わせて振り分ける . . . .18888
WordPressに対応したjQuery Mobileテーマを作成する . . . .19089
検索サイトからリンクしてきたときにもトップページに戻れるようにする . . .19290
「前の記事へ」「次の記事へ」リンクをテキストからボタンに変更する . . . .19391
パネルウィジェットに固定リンクや外部リンクを格納する . . . .19492
縦に長くなりがちなページをコンパクトにまとめる . . . .19693
jQuery MobileでGoogleアナリティクスを使ってアクセス解析を行う . . . .19794
ブログをソーシャルメディアに対応させ、SNSのボタンを設置する . . . .19995
WordPressとjQuery Mobileで作ったブログに自作テーマを適用する . . . .201
96
EC-CUBEのメニューをスマートフォン向けにコンパクトにまとめる . . . . .20297
ポップアップウィジェットを使用してログイン関連のメニューをコンパクトにまとめる . . . .205
98
ECサイトにローテーションバナーを設置して訪問者の視線を誘導する . . . . .20799
「おすすめ商品」をスライドバナーからリストビューに変更する . . . .209100
限定商品に在庫数が表示されたバッジを付けて目立たせる . . . .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/
なお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を使うと、ダウンロードすべきファイルが 整理されているので非常に便利だ。
●
オフライン環境に必要なファイルをヘッダに記
述する
jQuery Mobileを使ったサイト制作に必要なファイル
を読み込むため、HTMLファイルのヘッダ部分を修正す
る。この記述方法は 2つあるので、用途に合わせて選択
してほしい。1つ目の方法では、ダウンロードしたjQuery
Mobile 関連のファイルをローカル PC のディレクトリ内
に格納して使用する。オフラインでのサイト制作の際に
は、後述する2つ目の方法では動作確認ができないので、
この方法を選択しなければならない。
次に、HTMLファイルが入っている階層に「/jquerymobile」
ディレクトリを作成し、その中に次に示す 3ファイルを格
納し、「/images」ディレクトリを作成する。
jquery.mobile-1.4.2.min.css
jquery.mobile-1.4.2.min.js
jquery.js
/imagesディレクトリ
jQuery Mobile は基 本的に HTML 5で記述するため
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>
●
CDNを利用しない場合と利用する場合のサイト
閲覧の違い
通常は左図のようにサーバーと1対1でリクエストとレ
スポンスが繰り返される。しかし、CDNを利用して、右図
のようにサイト内で使用する一部のデータを地理的およ
びバックボーン的に分散させた別のサーバーから受信す
れば、負荷が分散されより効率のいい安定したサイトの
配信が可能になる。
① サーバーからHTMLデータが送信さ
れる
② HTMLを解析し、画像やJavaScript
などの別ファイルのデータをサーバー
にリクエストする
③ リクエストのあった画像やJavaScript
が送信される
◎ 通常のネットワークを使用したサイトの閲覧（左図）と、CDNを使用したサイトの閲覧（右図） ① ② ③ Web ページ ① ② ③ Web ページ16
序章
第
1
章
jQuery Mobile を 使 用するにあたって必 要 になる知 識として、jQuery Mobile によるサイトでの HTMLの書き方から、ページ遷移などの仕組み、 ボタンやリストなどの基本的なUI の使い方までを解説する。
jQuery Mobileの基本を知る法則
法 則1
ページの設定と構成要素を理解する . . . .182
Ajaxを使ったページ遷移を理解する . . . .203
Ajaxによるページ遷移の不具合を解消する . . . .224
jQuery Mobileに用意されているボタンを把握する . . . .235
ボタンにアイコンを表示する . . . .256
ページのヘッダに「戻る」ボタンを表示する . . . .277
複数のボタンをグループ化してユーザビリティを高める . . . .298
ヘッダを固定して最大限に有効活用する . . . .319
フッタのレイアウトを調整して見やすくする. . . .3310
複数ページにまたがるコンテンツを自由に行き来する . . . .3511
リストを使ってコンテンツを階層化する . . . .3712
読み込み専用のリストを使用する . . . .4113
リストに自動で区切りを挿入する . . . .4214
新着リストに更新時間を表示する . . . .4415
画像と簡単な情報をまとめた商品一覧ページを作成する . . . .4516
下層ページの情報量をリストに表示してユーザーのストレスを 軽減する . . . .4617
状況に合わせた文字入力フォームを選択する . . . .4718
スマートフォンらしいタッチパネルを生かしたフォームを利用する . . . .4919
選択入力可能なメニューを利用する . . . .5120
必須項目が入力されたら「送信」ボタンをアクティブに変更する . . . .5221
基本要素を理解してユーザーフレンドリーなアンケートページを 作成する . . . .5422
買い物カートを利用した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 関連する法則 88 WordPressに対応した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（倍率の最大値 ）などを調整することで、ペー ジを拡大縮小したり、任意のサイズのページを指定したりする ことも可能になるので覚えておきたい。
重 要 度 ★ ★ ★ 難 易 度 ★ ★ ★
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 _P212 DOM _P212 関連する法則 3 Ajaxによるページ遷移の不具合を 解消する _P22 68 ページを移動するたびにランダム に画像を切り替える _P14720
第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ファイルに記述するHTML 5 のコード
<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 関連する法則 2 Ajaxを使ったページ遷移を理解す る _P20 68 ページを移動するたびにランダム に画像を切り替える _P14722
第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
重 要 度 ★ ★ ★ 難 易 度 ★ ★ ★
色
やデザインもカスタマイズできる
決定ボタンなど、ボタンの用途によっては、色を変更したい場合もあるだろう。そ
の場合は、ui-btn-b のクラスを追加すれば、あらかじめjQuery Mobileに用意され
ている別のテーマに合わせて色を変更できる。この「b」というのは、「a」と「b」
という2つのカラーテーマのうち、「b」を使用するという意味だ（省略した場合は
「a」が採用される）。テーマ自体の編集に関しては法則42、43で解説しているが、
2つのカラーテーマを用途に応じて使い分けることで、サイト全体のバランスを保
つように制作を進められる。
色以外のカスタマイズも可能だ。ページのデザインによっては、ボタンを角丸に
したり影を付けたりすることもあるだろう。その場合には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>
◆
ボタンのデザインのカスタマイズ例
重 要 度 ★ ★ ★ 難 易 度 ★ ★ ★
法 則
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>
重 要 度 ★ ★ ★ 難 易 度 ★ ★ ★
ページのヘッダに
「戻る」ボタンを表示する
法 則
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=" 戻る ">
