Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

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

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

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

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

目次

はじめに

 簡単にスマートフォン向けサイトを作成するために活用できるjQuery Mobileを紹介します。前回に引き続き、今回もjQuery Mobile 1.3.0で登場した新機能を紹介します。

対象読者

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

必要な環境と準備

 執筆時点のjQueryの最新版は、2.0.0ですが、現時点でのjQuery MobileはjQuery 1.7~1.9対応を前提としているため、今回のサンプルでは1.9.1を用いています。第1回を参考に、ダウンロードしてください。また、jQueryプラグインの基本的な使い方は、第3回を参照してください。

 また、執筆時点でのjQuery Mobileの最新版は、1.3.1です。1.3.0での不具合修正が主で新機能の追加はほぼありません。こちらからzipファイルでダウンロードできます。サンプルでは、htmlファイルと同じ階層にmobileというフォルダを作成しています。zipファイル中のimagesフォルダ(cssファイルが呼び出す画像ファイルが格納されたフォルダ)と、jquery.mobile-1.3.1.min.css(通常使用するcssファイル)とjquery.mobile-1.3.1.min.js(スクリプトファイル)をmobileフォルダに入れています。

レンジスライダーを使ったサイトの作成

 まずは、jQuery Mobile 1.3.0から使用できるようになったレンジスライダーを使ったサイトを作成してみます。1.3.0登場以前からあったスライダーは1つの値しか指定できませんでしたが、レンジスライダーはある数値から、ある数値まで、といった数値の範囲を指定できるスライドスイッチです。下記は、実際にレンジスライダーを表示させたところです。

図1 jQuery Mobile サンプル(1)画面
図1 jQuery Mobile サンプル(1)画面

 なお、jQuery Mobileはパソコンのブラウザでの表示も対応していますので、パソコンで見るとこうした形になります。

図2 パソコンで見たjQuery Mobile サンプル(1)画面
図2 パソコンで見たjQuery Mobile サンプル(1)画面

 サンプルサイトのスクリプトを以下に示します。

[リスト1]レンジスライダーを使ったサイト(jQuery_Mobile_sample1.html)
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8" />

<!--1.スマートフォン画面での表示方法指定-->
<mata name="viewport" content="width=device-width,initial-scale=1" />

<title>jQuery Mobileサンプル(レンジスライダー)</title>

<!--2.CSSの読み込み-->
<link rel="stylesheet" type="text/css" href="./mobile/jquery.mobile-1.3.1.min.css" />

<!--3.jQueryの読み込み-->
<script language="javascript" type="text/javascript" src="./Scripts/jquery-1.9.1.min.js"></script>

<!--4.jQuery Mobileの読み込み-->
<script language="javascript" type="text/javascript" src="./mobile/jquery.mobile-1.3.1.min.js"></script>

</head>

<body>
<!--5.ページの設定-->
<div data-role="page">

<!--6.ヘッダーの設定-->
<div data-role="header" data-theme="b">
	<h1>jQuery Mobileサンプルページ(レンジスライダー)</h1>
</div>

<!--7.ページ内容の設定-->
<div data-role="content">

	<!--8.レンジスライダーの設定-->
	<div data-role="rangeslider">
		<label for="slider_min">身長の範囲(cm)</label>
		<input type="range" name="slider_min" id="slider_min" min="100" max="200" value="150">
		<label for="slider_max">身長の範囲(cm)</label>
    		<input type="range" name="slider_max" id="slider_max" min="100" max="200" value="180">
	</div>

</div>

<!--9.フッターの設定-->
<div data-role="footer" data-theme="b">
	<h3>Codezine</h3>
</div>

</div>
</body>
</html>

 8.レンジスライダーの設定の中に、jQuery Mobile1.3.0より使用できるようになった「data-role="rangeslider"」という記述があります。単一の数値を指定するスライダーでは「data-role="slider"」ですが、sliderの前に範囲という意味の「range」が付きます。このdivタグの中で、レンジスライダーで動かせる数値の最小値と最大値、そしてハンドルが示す最小値と最大値の既定値を設定します。

 単一の数値を指定するスライダーでは、タイトルにlabel要素でラベル付けをして、input要素でスライダーの数値の最小値と最大値、そしてハンドルの既定値を指定しますが、レンジスライダーは指定範囲最小値のハンドルと最大値のハンドルと2つあるので、label要素とinput要素が2セット必要です。

 最小値のハンドルを設定するため、「身長の範囲(cm)」というタイトルにlabel要素で「slider_min」というIDでラベル付けをして、input要素で「type="range"」を指定し、name、IDに「slider_min」というlabel要素で設定したIDを指定、あとはスライダーで指定できる最小値を「min="100"」で100と設定、最大値を「max="200"」で200と設定し、最小値ハンドルの既定値を「value="150"」で150に設定します。

 そして最大値のハンドルもlabel要素とinput要素で最小値同様に設定します。IDを「slider_max」に変更し、最大値ハンドルの既定値を「value="180"」で180に設定します。


  • 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