Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

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

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

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

 本連載では、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 カレンダーアイコンをタップすると日付入力用カレンダーがポップアップで表示される

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

[リスト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"}'」を設定し、モードをカレンダーに設定します。


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

著者プロフィール

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

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

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

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

バックナンバー

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

もっと読む

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