Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

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

「jQuery プラグイン」の利用(13)

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2013/02/28 14:00

 本連載では、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画面
図1 ThemeRoller for jQuery Mobile画面

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

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

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


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

著者プロフィール

  • WINGSプロジェクト 小林 健志(コバヤシ タケシ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2017年5月時点での登録メンバは52名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂き...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

バックナンバー

連載:jQuery UI/プラグインの活用

もっと読む

All contents copyright © 2005-2017 Shoeisha Co., Ltd. All rights reserved. ver.1.5