SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

jQuery UI/プラグインの活用

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

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

はじめに

 今回は、簡単にスマートフォン向けサイトを作成するために活用できる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"}'」を設定し、モードをカレンダーに設定します。

次のページ
その他の日付・時間入力方法

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
jQuery UI/プラグインの活用連載記事一覧

もっと読む

この記事の著者

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

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

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

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

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/7368 2013/09/12 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング