「jQuery Mobile」を活用したスマートフォンサイト作成（前編）

「jQuery プラグイン」の利用（13）

　本連載では、JavaScriptライブラリの中でも人気が高まりつつあるjQuery UIとjQueryプラグインをサンプルを交えて紹介していきます。今回からは、急速に普及を見せるスマートフォン向けサイト作成に便利な「jQuery Mobile」を紹介します。

はじめに

　今回は、簡単にスマートフォン向けサイトを作成するために活用できるjQuery Mobileを紹介します。jQuery MobileはjQueryと同時に読み込んで使用するもので、スマートフォン向けサイトでよく使われるスライダースイッチなどのフォームを簡単に呼び出すなど、スマートフォン向けUIサイトが簡単に作成できます。今回はjQuery Mobileとは何かを解説し、ごく簡単なスマートフォン向けサイトを作成してみます。

対象読者

• jQuery mobile、スマートフォンに興味があり、使ってみたい方

必要な環境と準備

　今回使用したjQuery Mobile1.2.0がサポートしているjQueryのバージョンは1.7.x、1.8.xで、1.6.x以前のバージョンと1.9.xはサポート外となっています。このため、今回のサンプルスクリプトで使用しているjQueryのバージョンは1.8.3です。第1回を参考に、ダウンロードしてください。また、jQueryプラグインの基本的な使い方は、第3回を参照してください。

　また、jQuery Mobile 1.2.0はこちらからzipファイルでダウンロードできます。サンプルでは、htmlファイルと同じ階層にmobileというフォルダを作成しています。zipファイル中のimagesフォルダ（cssファイルが呼び出す画像ファイルが格納されたフォルダ）と、jquery.mobile-1.2.0.min.css（通常使用するcssファイル）とjquery.mobile-1.2.0.min.js（スクリプトファイル）をmobileフォルダに入れています。

jQuery Mobileとは？

　jQuery Mobileとは、スマートフォン・タブレットサイト作成用のUIシステムです。簡単な記述でスマートフォン・タブレットに特化したUIのサイトが簡単に作れるもので、パソコンサイト用のjQuery UIのスマートフォン・タブレット版という見方もできます。iOS、Android、BlackBerryなどのOS、そしてSafari、Chromeなどのブラウザといった多様なプラットフォームに対応しているのも特徴です。対応しているプラットフォームは以下のとおりです。

表1-a　対応しているOS・ブラウザ一覧
（※A-grade　全機能が対応）

プラットフォーム名	バージョン	テスト環境
Apple iOS	3.2-6.0	original iPad（4.3/5.0）、iPad 2（4.3）、iPad 3（5.1/6.0）、 original iPhone（3.1）、iPhone 3（3.2）、3GS（4.3）、 4（4.3/5.0）、4S（5.1/6.0）
Android	2.1-2.3、 3.2、 4.0、4.1	HTC Incredible（2.2）、original Droid（2.2）、 HTC Aria（2.1）、Google Nexus S（2.3）、 Functional on 1.5 & 1.6 but performance may be sluggish、 tested on Google G1（1.5）、 Samsung Galaxy Tab 10.1（3.2）、 Motorola XOOM（3.2）、Galaxy Nexus（4.0）、 Note（4.0）:transition performance can be poor on upgraded devices, Galaxy Nexus（4.1）、Galaxy 7（4.1）
Windows Phone	7-7.5	HTC Surround（7.0）、HTC Trophy（7.5）、 LG-E900（7.5）、Nokia Lumia 800
Blackberry	6.0、7	Torch 9800（6.0）、Style 9670（6.0）、 BlackBerry Torch 9810（7）
BlackberryPlaybook	1.0-2.0	PlayBook
Palm WebOS	1.4-2.0、 3.0	Palm Pixi（1.4）、Pre（1.4）、Pre 2（2.0）、 HP TouchPad（3.0）
Firefox Mobile	15	Android 2.3 and 4.1 devices
Chrome for Android	18	Android 4.0 and 4.1 devices
Skyfire	4.1	Android 2.3 device
Opera Mobile	11.5-12	Android 2.3
Meego	1.2	Nokia 950、N9
Tizen	pre-release	early hardware
Samsung Bada	2.0	Samsung Wave 3, Dolphin browser
UC Browser	-	Android 2.3 device
Kindle	3、Fire	built-in WebKit browser for each
Nook Color	1.4.1	original Nook Color, not Nook Tablet
Chrome Desktop	11-21	OS X 10.7、Windows 7
Safari Desktop	4-5	OS X 10.7、Windows 7
Firefox Desktop	4-15	OS X 10.7、Windows 7
Internet Explorer	7-10	Windows XP、Vista、7
Opera Desktop	10-12	OS X 10.7、Windows 7

表1-b　対応しているOS・ブラウザ一覧
（※B-grade　Ajaxナビゲーション機能以外をサポート）

プラットフォーム名	バージョン	テスト環境
Blackberry	5.0	Storm 2 9550,Bold 9770
Opera Mini	7	iOS 5.1,Android 2.3
Nokia Symbian	3	Nokia N8（Symbian^3）、C7（Symbian^3）、 also works on N97（Symbian^1）

表1-c　対応しているOS・ブラウザ一覧
（※C-grade　非常に基本的な部分のみをサポート）

プラットフォーム名	バージョン	テスト環境
Blackberry	4.x	Curve 8330
Windows Mobile	-	HTC Leo（WinMo 5.2）
その他すべての古い スマートフォン・ フィーチャーフォン	-	-

　このように、たくさんのプラットフォームに対応しています。スマートフォン・タブレットのみならず、パソコンのブラウザにも対応しています。

　jQuery MobileはHTML5に則った記述でサイトのスタイルや挙動を設定しますので、HTMLソースはHTML5に則って記述するのが前提です。スタイルを「テーマ」という形でHTMLソースと分離して管理するのも特徴で、「ThemeRoller for jQuery Mobile」というオンラインツールで独自のテーマを作成することもできます。

図1　ThemeRoller for jQuery Mobile画面

　 そして、スライダースイッチなどスマートフォンのUIでよく見かける仕掛けは「コンポーネント」という形で呼び出していきます。主なコンポーネントは以下のとおりです。

表2　jQuery Mobileの主なコンポーネント

コンポーネント	機能
ヘッダー	最上部にツールバーを表示する
フッター	最下部にツールバーを表示する
ボタン	リンク付きやアイコン付きなどさまざまなボタンを表示する
アコーディオンブロック	タッチするとコンテンツが表示され、 もう一度タッチすると元に戻る開閉式ブロックを表示する
リスト	さまざまなリスト （タッチするとその項目ごとに別コンテンツへのリンクに飛ぶ）を表示する。
テキスト入力	テキスト入力フィールドを表示する。
チェックボックス	チェックボックスを表示する
ラジオボタン	ラジオボタンを表示する
セレクトメニュー	ドラム式などで項目を選択できるセレクトメニューを表示する
フリップスイッチ	左右にハンドルを動かすことで2つの項目を選択できるスイッチを表示する
スライダー	左右に動くハンドルを動かすことで数値入力ができるスイッチを表示する
アニメーション	画面遷移時にポップアップなどさまざまなアニメーションを表示する

　非常に簡便な方法で、多様なデザインのスマートフォン向けUIサイトが作れてしまうのがjQuery Mobileです。