jQuery Mobile逆引きリファレンス

jQuery Mobileを利用するには？

Web Technology JavaScript jQuery 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>

<title>jQuery Mobile</title>

href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css" />

</script> 4

</head>

<body>

……ページ本文……

</body>

</html>

jQuery Mobileページの骨格（template.html）

　jQuery Mobileは、HTML5を前提としたライブラリです。利用に際しても、HTML5に準拠したページに対して、jQuery／jQuery Mobileのライブラリをインポートします。以下ではjQuery Mobileページのポイントを4点挙げていますが、このうち、1～3は（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

ビューポートの設定

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

パラメーター名	概要	設定値
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

href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css" />

</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のダウンロードページ

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

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

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

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

HTML

href="css/jquery.mobile-1.4.0.min.css" />

オフラインでjQuery Mobileを利用する例

［Note］Download Builder

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

Download Builder

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

1. 【現在、表示中】≫ jQuery Mobileを利用するには？

2014年1月9日(木曜日)

jQuery Mobile逆引きリファレンス