Deep Insider の Tutor コーナー
>>  Deep Insider は本サイトからスピンオフした姉妹サイトです。よろしく! 
jQuery Mobile逆引きリファレンス

jQuery Mobile逆引きリファレンス

jQuery Mobileを利用するには?

2014年1月9日

jQuery Mobileの基本機能を目的別リファレンスの形式でまとめる連載スタート。jQuery Mobileが動作するスマホ/タブレット環境と、jQuery Mobileページの基本構造を説明する。

  • このエントリーをはてなブックマークに追加

 このシリーズでは、何回かにわたって、jQuery Mobileの基本機能を目的別リファレンスの形式でまとめていきます。

 jQuery Mobileは、jQueryを拡張するライブラリ(プラグイン)の一種で、スマホ/タブレットに代表されるモバイル対応アプリを開発するための機能を提供します。具体的には、以下のような機能が提供されています。

  • アプリのデザインを管理するテーマ機能
  • Ajax通信によるページ遷移
  • リッチなフォーム要素
  • ダイアログ、リスト、パネル、レスポンシブルテーブルなどのウィジェット
  • タッチパネル環境に対応したさまざまなイベント
分類ウィジェット名Tips
基本 (標準機能) 基本的なページを定義
(標準機能) テーマを設定(&ThemeRollerによる自作テーマ)
(標準機能) ハイパーリンクを設置
Loader ローディング表示をカスタマイズ
Toolbar ヘッダー/フッターの表示をカスタマイズ
Navbar ナビゲーションバー
(標準機能) ページの描画を高速化
フォーム (標準機能) 入力フォームを設置
Textinput テキスト入力ボックスを設置
Checkboxradio ラジオボタン/チェックボックス
Flipswitch オン/オフ選択のためのフリップスイッチ
Selectmenu 選択メニュー
Button ボタンを配置
Button アイコン付きのボタンを配置
Slider スライダー
ポップアップ Popup ポップアップを表示
Popup 画像ボックスやダイアログなど
パネル Panel 左右からスライド表示
Collapsible 開閉可能なパネル
Collapsibleset 開閉可能パネルを束ねたアコーディオンパネル
Tabs タブパネル
テーブル&
グリッドレイアウト
Table レスポンシブルなテーブル(Column toggle編)
Table レスポンシブルなテーブル(Reflow編)
(標準機能) 複数列からなるグリッドレイアウト
リスト ListView ネイティブアプリ・ライクなリストビュー
ListView 階層型リスト
ListView 作成したリストに区切り線を追加
ListView アイコン付き、カウントバブル付きのリストビュー
フィルター Filterable リスト/テーブルなどに検索機能を付与
Filterable 検索ルールをカスタマイズ
スクリプト (標準機能) 動作パラメーターを設定
(標準機能) パス/URLの情報を取得/操作
(標準機能) フォーム要素を操作
Pagecontainer jQuery Mobileページの移動を制御
(標準機能) 端末の縦横回転時にレイアウトを調整
イベント Pagecontainer ページのロード/切り替え時に初期化/後処理を実行
(標準機能) ページレイアウト変化時に処理を実行
(標準機能) スクロール時に追加的にコンテンツを読み込む
jQuery Mobileの主なウィジェットや機能と、対応するTIPS

 これらの機能を利用することで、開発者はデバイスに依存することなく、手軽にネイティブアプリ・ライクなUI(ユーザーインターフェース)を実装できます。当然、jQueryとの親和性に優れますので、アプリ独自の機能を実装する場合にも、jQueryの知識をそのまま利用できるのはうれしいポイントです。

jQuery Mobileの動作環境

 jQuery Mobileが動作するおもな環境は、以下のとおりです。ざっくりと言ってしまうならば、対応が制限されるデバイス/機能が一部にあるにせよ、現在メジャーな環境のほとんどで問題なく動作します。

  • Android
  • iOS
  • Windows Phone
  • Chrome for Android
  • Firefox Mobile
  • Opera Mobile/Desktop
  • Kindle 3 and Fire
  • Blackberry
  • Kindle 3, Fire, and Fire HD
  • デスクトップブラウザー(Internet Explorer、Chrome、Firefox、Safariなど)

 より詳細な対応状況については、「Graded Browser Support」も併せて参照してください。Grade(グレード)で対応状況が分類されていますが、それぞれ「A:ほぼ全ての動作を保証」「B:Ajax関連の動作を除いては動作」「C:基本的なHTMLの機能が動作」を意味します。

 ただし、あとからも触れますが、jQuery Mobileページは標準的なHTMLをベースとしています。未対応(もしくは対応グレードが低い)のデバイスでも、jQuery Mobileのリッチな機能が動作しないだけで、コンテンツそのものの閲覧を妨げることはありません。レガシーな環境にもアクセシビリティを保証する、これもjQuery Mobileの特徴の1つと言えるでしょう。

jQuery Mobileページの基本構造

 以下は、jQuery Mobileページの基本骨格です。自分でアプリを作成する際にも、以下のコードを基本テンプレートとして、コンテンツを追加していくとよいでしょう。

HTML
<!DOCTYPE html>  1
<html>
<head>
<meta charset="UTF-8" />  2
<meta name="viewport" content="width=device-width, initial-scale=1" />  3
<title>jQuery Mobile</title>
<link rel="stylesheet"
       href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css" />
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js">
</script>  4
</head>
<body>
……ページ本文……
</body>
</html>
jQuery Mobileページの骨格(template.html)

 jQuery Mobileは、HTML5を前提としたライブラリです。利用に際しても、HTML5に準拠したページに対して、jQuery/jQuery Mobileのライブラリをインポートします。以下ではjQuery Mobileページのポイントを4点挙げていますが、このうち、13は(jQuery Mobileではなく)HTML5の一般的なルールにすぎません。

1文書型宣言は「<!DOCTYPE html>」

 HTML5の文書型宣言は、旧来のようにHTMLのバージョンや種類を表すものではありません。最低限、標準モードで動作することを目的とした記述になっています。

 ちなみに、以下は以前のXHTML 1.1 Strictの文書型宣言です。比べるまでもなく、ぐんと記述がシンプルになっていることが見て取れます。

HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
XHTML 1.1 Strictの文書型宣言

2<meta>要素で文字コードを宣言する

 HTML5では、文字コードとしてUTF-8が推奨されています(また、昨今では多くのフレームワークがUTF-8をデフォルトの言語としています)。Shift-JIS、EUC-JPなどが利用できないわけではありませんが、思わぬ不具合の原因となる場合もあるので、特別な理由がないのであれば、UTF-8を利用するようにしてください。

3ビューポートで画面サイズを最適化

 ビューポート(ViewPort)とは、ブラウザーのコンテンツ領域のこと。スマホにおけるデフォルトの設定では、ビューポートは大きめに確保されており、そのままではコンテンツが極端に縮小表示されてしまいます。例えば次の画面は、ビューポートを設定しなかった場合の表示例です。

ビューポートを設定しなかった場合の表示
ビューポートを設定しなかった場合の表示

 そこでスマホ対応のアプリを開発する際には、先ほどの例のようにビューポートを明示的に宣言すべきです。ビューポートを設定するための構文は、以下のとおりです。

HTML
<meta name="viewport" content="パラメーター名=値, ..." />
ビューポートの設定

 利用できる主なパラメーターを、以下に示します。

パラメーター名概要設定値
height コンテンツの高さ ピクセル単位、または「device-height」でデバイスの高さ
width コンテンツの幅 ピクセル単位、または「device-width」でデバイスの幅
minimum-scale 最小の拡大率 0~10
maximum-scale 最大の拡大率 0~10
initial-scale 初回表示時の拡大率 minimum-scale~maximum-scaleの値
user-scalable ユーザーによる拡大/縮小を許可するかどうか yes|no
ビューポートの設定(主なパラメーター)

 一般的には、「幅をデバイスの幅に合わせ(device-width)」「初回表示時の拡大率を1.0(等倍)」にしておけば十分です。

4jQuery/jQuery Mobileをインポート

 jQuery Mobileでは、動作に必要なライブラリ/スタイルシートをCDN(Content Delivery Network)経由で提供しています。「事前準備が不要」「(一般的には)パフォーマンスに優れる」などの理由から、まずはこちらの方法での導入をお勧めします。

 CDNを利用するには、ページに以下のコードを含めるだけです。

HTML
<link rel="stylesheet"
       href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css" />
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js">
</script>
CDN経由でjQuery Mobileを利用する例

 冒頭で述べたように、jQuery MobileはjQueryのプラグインなので、ライブラリをインポートするに当たっても、jQuery→jQuery UIの順番で記述します。

補足:オフラインでの利用

 もちろん、あらかじめ必要なファイルをダウンロードしておくことで、オフライン環境でjQuery Mobileを利用することもできます。その場合は、jQuery本家サイトの[Download]ページからjQueryを、jQuery Mobile本家サイトの[Download]ページから「ZIP File: jquery.mobile-1.4.0.zip (JavaScript, CSS, and images)」をダウンロードしてください(jQuery本体は、jQuery Mobileには同梱されないので注意してください)。

 jquery.mobile-1.4.0.zipを解凍すると、配下にはさまざまなファイルが含まれていますが、アプリの動作に必要なのは以下のファイルです。

  • jquery.mobile-1.4.0.min.css
  • jquery.mobile-1.4.0.min.js
  • /imagesフォルダー

 拡張子の前に「.min」と付いているのは、オリジナルのソースコードからコメントや空白を除去し、サイズを圧縮したファイルです。通常の利用ではこちらを、開発中にソースコードそのものを確認したいという場合には「.min」無しの同名のファイルを利用してください。

 これらのファイルを任意のフォルダーに配置した上で、以下のようにライブラリ/スタイルシートをインポートします(パスは配置先に応じて読み替えてください)。

HTML
<link rel="stylesheet"
       href="css/jquery.mobile-1.4.0.min.css" />
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery.mobile-1.4.0.min.js"></script>
オフラインでjQuery Mobileを利用する例

[Note]Download Builder

 アプリで利用する機能があらかじめ限定できる場合には、「jQuery Mobile Download Builder」を利用することで、目的のモジュールだけをダウンロードすることもできます。執筆時点ではアルファ版ということで、まだ本番環境で利用すべきではありませんが、今後の展開に期待です。

※以下では、本稿の前後を合わせて5回分(第1回~第5回)のみ表示しています。
 連載の全タイトルを参照するには、[この記事の連載 INDEX]を参照してください。

jQuery Mobile逆引きリファレンス
1. 【現在、表示中】≫ jQuery Mobileを利用するには?

jQuery Mobileの基本機能を目的別リファレンスの形式でまとめる連載スタート。jQuery Mobileが動作するスマホ/タブレット環境と、jQuery Mobileページの基本構造を説明する。

jQuery Mobile逆引きリファレンス
2. jQuery Mobileで基本的なページを定義するには?

基本的なページを作成する方法を解説。要素のid値を振る際の注意点と、1つのファイルで複数ページを管理する方法についても説明。

jQuery Mobile逆引きリファレンス
3. jQuery Mobileのテーマを設定(&ThemeRollerによる自作テーマ作成)するには?

サイトデザインを管理できる「テーマ」と「スウォッチ」の基本的な利用法を解説。

jQuery Mobile逆引きリファレンス
4. jQuery Mobileページでヘッダー/フッターの表示をカスタマイズするには?

ヘッダー/フッターを作成する方法を解説。また、ヘッダー/フッターの位置を固定したり、タップで非表示にしたりする方法なども紹介。

jQuery Mobile逆引きリファレンス
5. jQuery Mobileページでハイパーリンクを設置するには?

jQuery Mobileにおけるリンクの挙動を解説。また、ページ遷移時のエフェクトやプリフェッチ機能についても説明する。

サイトからのお知らせ

Twitterでつぶやこう!