jQuery Mobileプラグイン「Datebox」を活用したスマートフォンサイト作成

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

　本連載では、JavaScriptライブラリの中でも人気が高まりつつあるjQuery UIとjQueryプラグインをサンプルを交えて紹介していきます。今回はスマートフォン向けサイト作成において日付・時間の入力で便利な「jQuery Mobile」用のプラグインを紹介します。

はじめに

　今回は、簡単にスマートフォン向けサイトを作成するために活用できるjQuery Mobile向けのプラグインを紹介します。日付や時間入力に便利なDateboxの使い方とさまざまなUIによる入力を紹介します。

対象読者

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

必要な環境と準備

　執筆時点のjQueryの最新版は、2.0.3と1.10.2ですが、2.0.3はバージョン8以前のInternet Explorerに対応しないなど、制限も大きいため、今回のサンプルでは1.10.2を用いています。第1回を参考にダウンロードする方法もありますが、今回のサンプルからは昨今一般的な方法になりつつあるGoogle CDNを読み込む形とします。以下のスクリプトでjQuery 1.10.2を呼び出します。

［リスト1］Google DevelopersのライブラリからjQueryを呼び出すスクリプト

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

　また、jQueryプラグインの基本的な使い方は、第3回を参照してください。

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

日付・時間入力に便利なプラグイン「Datebox」

　今回紹介するjQuery Mobile用プラグイン「Datebox」は、さまざまなスマートフォン向けのUIで日付・時間入力を容易にするプラグインです。また、オプションにより入力できる日付・時間を限定させたり、入力方法を変更させたりすることもできます。

　Dateboxを使用するには、まずDateboxサイトからダウンロードします。サイトの中の「Download & Use」を選択し、「Download Links - Current Version」を選択して以下のファイルをダウンロードします。サンプルデータではpluginsフォルダの中に入っています。なお、プラグインの日本語化を行う「jquery.mobile.datebox.i8n.jp.js」のみ別のサイトからダウンロードします。

表1 ダウンロードするファイル

ファイル名	機能	呼び出し必須のファイル
jqm-datebox.core.min.js	プラグインの本体	＊
jqm-datebox.min.css	プラグインのCSSファイル	＊
jquery.mobile.datebox.i8n.jp.js	プラグインの日本語化ファイル	＊
jqm-datebox.mode.calbox.min.js	カレンダーによる日付選択に利用	-
jqm-datebox.mode.datebox.min.js	上下ボタンによる日付・時間選択に利用	-
jqm-datebox.mode.flipbox.min.js	縦スクロール式の日付・時間選択に利用	-
jqm-datebox.mode.slidebox.min.js	横スクロール式の日付・時間選択に利用	-
jqm-datebox.mode.durationbox.min.js	日・時間・分・秒の数値入力に利用	-

　まずは入力用フォームをつくり、その右端のカレンダーマークをタッチすると、その場所でポップアップでカレンダーが表示され、カレンダーから日付を選択できるサイトをつくってみます。以下に表示例を示します。

図1　カレンダーアイコンをタップすると
日付入力用カレンダーがポップアップで表示される

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

［リスト1］カレンダー表示による日付入力フォームのあるサイト（jQuery_Mobile_sample1.html）

<!--1.CSSの読み込み-->
<link rel="stylesheet" type="text/css" href="./mobile/jquery.mobile-1.3.2.min.css" />
<link rel="stylesheet" type="text/css" href="./plugins/jqm-datebox.min.css" />

<!--2.jQueryの読み込み-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<!--3.jQuery Mobileの読み込み-->
<script src="./mobile/jquery.mobile-1.3.2.min.js"></script>

<!--4.jQuery Mobileプラグインの読み込み-->
<script src="./plugins/jqm-datebox.core.min.js"></script>
<script src="./plugins/jqm-datebox.mode.calbox.min.js"></script>
<script src="./plugins/jquery.mobile.datebox.i8n.jp.js"></script>
（中略）
<!--5.日付入力部分の設定-->
<label for="date1">年月日入力</label>
<input name="date1" id="date1" type="date" data-role="datebox" data-options='{"mode": "calbox"}'>

　まずは1～4で、事前に必ず呼び出すファイルを呼び出します。

　5は日付入力部分の設定では、inputタグのtypeには「date」、data-roleには「datebox」を設定します。ここまでは他の形式で日付・時間を入力する場合でもすべて共通です。

　カレンダーを表示させて日付を入力するにはdata-optionsに「'{"mode": "calbox"}'」を設定し、モードをカレンダーに設定します。