jQuery: The Write Less, Do More, JavaScript Library

人気のあるAjax JavaScriptフレームワークのひとつにjQueryがある。簡単で扱いやすく高速に動作し、サイズも小さい。MozillaのJavaScriptエバンジェリストが開発していることもあり、FirefoxエクステンションJetpackでもデフォルトで利用できるようになるなど、さらに露出の機会を増やしている。

jQueryはコアとなる機能を提供し、拡張機能やUI、コンポーネントはプラグインとして提供されている。どれだけプラグインを把握しているかが、jQueryを使ってアプリケーションを開発する際のひとつのポイントとなる。8 Useful jQuery Calendar, Date Picker and Time Formatting Plugins that You Should Knowにおいて、jQueryで利用できる8つのカレンダープラグインが紹介されている。カレンダー系機能はスケジュール関連のWebサービスや日付を入力する場合に必要になる重要な機能のひとつ。紹介されているプラグインやコンポーネントは次のとおり。

jQuery Plugin - FullCalendar

フルサイズのカレンダーコンポーネントFullCalendar。月表示、週表示、日表示が可能でイベントをドラッグ&ドロップで移動可能。イベントはオンザフライで取得可能で、ウィンドウのリサイズ、各種クリックなどを柔軟にカスタマイズ可能。

FullCalendar実行例 - 配布サイトより抜粋

jQuery Week Calendar実行例 - 配布サイトより抜粋

jQuery Plugin - jQuery Week Calendar

週表示に特化したタイプのカレンダーコンポーネントjQuery Week Calendar。FullCalendarの週表示にも似ているが、週表示に特化しているだけあってさまざまな設定が可能。月表示などが必要になる場合にはFullCalendarがいいだろうと説明がある。

jQuery UI - Datepicker

日付入力機能を提供するDatepickerコンポーネント。たとえば入力フィールドに関連付けて、クリックすることでDatepickerをポップアップさせ選択できるようになる。柔軟なカスタマイズが可能で日付フォーマットの設定が可能。

Datepicker実行例 - 配布サイトより抜粋

Date Range Picker実行例 - 配布サイトより抜粋

jQuery UI - Date Range Picker

期間を指定する機能を提供するDate Range Pickerコンポーネント。Datepickerのような利用もできるが、2つならべて表示して期間を選びやすく表示することもできる。

jQuery Plugin - overset

期間をまとめて指定するためのoversetコンポーネント。Date Range Pickerが始まりの日と終わりの日を指定するタイプのUIを採用しているのに対し、oversetでは指定した長さの期間分を一度にクリックして選択できるUIを提供している。

overset実行例 - 配布サイトより抜粋

iCal-like calendars実行例 - 配布サイトより抜粋

iCal-like calendars with jQuery

テーブルをMac OS XのiCalのように表示するiCal-like calendarsコンポーネント。クリックに対してイベントを結びつけることもできる。

jQuery Plugin - CuteTime

「残り何日と何時間」といった表示を提供するCuteTimeコンポーネント。

jQuery Plugin - timeago

「何時間前」といった表示を提供するtimeago

jQueryにはプラグインが豊富に用意されており、組み合わせることでさまざまな機能を実現できる。ただし、プラグインやコンポーネントごとにライセンスが異なっていることが多いため、商用サービスなどで採用する場合にはポリシーに合わせて採用するコンポーネントやプラグインのライセンスを個別によく吟味する必要がある。