はじめに
今回は、簡単にスマートフォン向けサイトを作成するために活用できる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などのブラウザといった多様なプラットフォームに対応しているのも特徴です。対応しているプラットフォームは以下のとおりです。
| プラットフォーム名 | バージョン | テスト環境 |
|---|---|---|
| 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 |
| プラットフォーム名 | バージョン | テスト環境 |
|---|---|---|
| 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） |
| プラットフォーム名 | バージョン | テスト環境 |
|---|---|---|
| Blackberry | 4.x | Curve 8330 |
| Windows Mobile | - | HTC Leo（WinMo 5.2） |
|
その他すべての古い スマートフォン・ フィーチャーフォン |
- | - |
このように、たくさんのプラットフォームに対応しています。スマートフォン・タブレットのみならず、パソコンのブラウザにも対応しています。
jQuery MobileはHTML5に則った記述でサイトのスタイルや挙動を設定しますので、HTMLソースはHTML5に則って記述するのが前提です。スタイルを「テーマ」という形でHTMLソースと分離して管理するのも特徴で、「ThemeRoller for jQuery Mobile」というオンラインツールで独自のテーマを作成することもできます。
そして、スライダースイッチなどスマートフォンのUIでよく見かける仕掛けは「コンポーネント」という形で呼び出していきます。主なコンポーネントは以下のとおりです。
| コンポーネント | 機能 |
|---|---|
| ヘッダー | 最上部にツールバーを表示する |
| フッター | 最下部にツールバーを表示する |
| ボタン | リンク付きやアイコン付きなどさまざまなボタンを表示する |
| アコーディオンブロック |
タッチするとコンテンツが表示され、 もう一度タッチすると元に戻る開閉式ブロックを表示する |
| リスト |
さまざまなリスト （タッチするとその項目ごとに別コンテンツへのリンクに飛ぶ）を表示する。 |
| テキスト入力 | テキスト入力フィールドを表示する。 |
| チェックボックス | チェックボックスを表示する |
| ラジオボタン | ラジオボタンを表示する |
| セレクトメニュー | ドラム式などで項目を選択できるセレクトメニューを表示する |
| フリップスイッチ | 左右にハンドルを動かすことで2つの項目を選択できるスイッチを表示する |
| スライダー | 左右に動くハンドルを動かすことで数値入力ができるスイッチを表示する |
| アニメーション | 画面遷移時にポップアップなどさまざまなアニメーションを表示する |
非常に簡便な方法で、多様なデザインのスマートフォン向けUIサイトが作れてしまうのがjQuery Mobileです。
