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

CodeZine / 2013年2月28日 14時0分

図6 ラベルとフリップスイッチの部分が2行レイアウトになった画面

 本連載では、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です。



CodeZine

トピックスRSS

ランキング