3. UIコンポーネント

この章では、UIコンポーネントのライブラリであるjQuery UI、Bootstrapを用いた実装例を説明する。

それぞれのライブラリが実現できる機能は、次の表の通りである。

ライブラリが実現できる機能
機能 jQuery UI Bootstrap
ボタン ✔ ✔
モーダルダイアログ ✔ ✔
モードレスダイアログ ✔ ✗
パンくずリスト表示 ✗ ✔
ドロップダウンリスト ✔ ✔
アコーディオン ✔ ✔
タブ ✔ ✔
スライダー ✔ ✗
カルーセル [1] ✗ ✔
日付入力時のカレンダー表示 [2] ✔ ✗
オートコンプリート ✔ ✗
プログレスバーによる進捗度表示 ✔ ✔
ドラッグアンドドロップ ✔ ✗
レスポンシブウェブデザイン ✗ ✔

jQuery UIとBootstrapには重複する機能が多い。どちらのライブラリを使用するかは、以下で説明する実装方法や、特徴 (jQuery UI概要およびBootstrap概要) を参考にして判断すること。

[1]カルーセルについてはslickライブラリとBootstrapのプラグインライブラリを使用した方法を紹介する
[2]日付入力時のカレンダー表示についてはjQuery UIライブラリ、Bootstrapとbootstrap-datepickerライブラリを使用した方法を紹介する

Note

jQuery UIとBootstrapを併用すると不具合が発生する場合がある。対処方法は付録のBootstrapとjQuery UIを同時に使用する際の名前空間の競合を参照すること。

3.1. ライブラリの基本的な使用方法

ここでは、UIコンポーネントを扱うライブラリであるjQuery UIとBootstrapの基本的な使用方法を説明する。

利用ライブラリ 参考ページ
jQuery UI jQuery UI
Bootstrap Getting started・Bootstrap

3.1.1. jQuery UI基本構成サンプル

HTML内でjQuery UI用のスタイルシートを読み込む。また、依存ライブラリであるjQuery、jQuery UIのJavaScriptファイルを順に読み込む。

この例は基本構成なので実際にUIコンポーネントは配置しないが、以降のサンプルではここにマークアップや独自に実装したJavaScriptを追加していく。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>jQuery UI基本構成サンプル</title>

    <!-- (1) -->
    <link rel="stylesheet" href="../lib/vendor/jquery-ui/1.12.1/jquery-ui.min.css">
  </head>
  <body>

    <h1>jQuery UI基本構成サンプル</h1>

    <!-- (2) -->
    <script src="../lib/vendor/jquery/3.3.1/jquery.min.js"></script>

    <!-- (3) -->
    <script src="../lib/vendor/jquery-ui/1.12.1/jquery-ui.min.js"></script>

    <!-- (4) -->
    <script src="js/default.js"></script>
  </body>
</html>
項番 説明
(1)
jQuery UIのスタイルシートを読み込む。
(2)
依存ライブラリを読み込む。
(3)
jQuery UIのJavaScriptを読み込む。
(4)
独自実装したJavaScriptファイルを読み込む。

3.1.2. Bootstrap基本構成サンプル

HTML内でBootstrap用のスタイルシートを読み込む。また、依存ライブラリであるjQuery、BootstrapのJavaScriptファイルを順に読み込む。

この例は基本構成なので実際にUIコンポーネントは配置しないが、以降のサンプルではここにマークアップや独自に実装したJavaScriptを追加していく。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Bootstrap基本構成サンプル</title>

    <!-- (1) -->
    <link rel="stylesheet" href="../lib/vendor/bootstrap/3.3.7/css/bootstrap.min.css">
  </head>
  <body>

    <h1>Bootstrap基本構成サンプル</h1>

    <!-- (2) -->
    <script src="../lib/vendor/jquery/3.3.1/jquery.min.js"></script>

    <!-- (3) -->
    <script src="../lib/vendor/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <!-- (4) -->
    <script src="js/default.js"></script>
  </body>
</html>
項番 説明
(1)
Bootstrapのスタイルシートを読み込む。
(2)
依存ライブラリを読み込む。
(3)
BootstrapのJavaScriptを読み込む。
(4)
独自実装したJavaScriptファイルを読み込む。

Note

基本構成サンプルではdefault.jsを読み込んでいるが、以降の節ではそれぞれ実装したJavaScriptファイルを読み込む。

Note

jQuery UI、Bootstrapで色あいなどの見た目について変更する場合は、次のような方法がある。

  • 既定のルールを上書きするよう、独自にスタイルシートを作成する。変更箇所が少ない場合はこの方法が手軽である。
  • サードパーティが作成・配布しているテーマを探す。ただし動作や表示の確認を十分に行う必要がある。
  • 公式サイトにあるテーマのカスタマイズページを利用する。jQuery UIはThemeRoller | jQuery、BootstrapはCustomize and download・Bootstrapにある。
  • 公式リポジトリからソースコードを取得してビルドする。最も柔軟にカスタマイズできるが難易度は高い。

3.2. ボタン

3.2.1. 概要

jQuery UI やBootstrap を用いると、button要素やinput要素だけでなく、a要素によるリンクもボタンとして扱う事ができる。
ここでは、jQuery UIとBootstrapそれぞれを用いたボタンの実装方法を説明する。
button

図: ボタンの例

利用ライブラリ サンプル 参考ページ
jQuery UI
Bootstrap

3.2.2. 利用方法(jQuery UI)

ここでは、jQueryUIを用いた実装方法を説明する。

3.2.2.1. 基本的な使い方

jQuery UI基本構成サンプルで示したHTMLに、ボタンを構成する表示領域を追加する。
<div>
  <!-- (1) -->
  <button class="buttonClass" value="button">button</button>
  <input type="button" class="buttonClass" value="input button" />
  <input type="submit" class="buttonClass" value="input submit" />
  <a href="#" class="buttonClass">a要素</a>
</div>
<br>
<div>
  <!-- (2) -->
  <input type="checkbox" id="checkbox1" class="checkClass" />
  <label for="checkbox1">CheckBox</label>
  <input type="radio" id="radio1" class="checkClass" name="radio" />
  <label for="radio1">RadioButton1</label>
  <input type="radio" id="radio2" class="checkClass" name="radio" />
  <label for="radio2">RadioButton2</label>
</div>
項番 説明
(1)
ボタンを生成するbutton要素やinput要素、a要素にclass属性を付与し、buttonClassを指定する。
(2)
(1)と同様にtype属性がcheckboxやradioのinput要素にclass属性を付与し、checkClassを指定する。
input要素のtype属性がcheckboxやradioの場合、label要素を定義する。
JavaScriptは以下の通り実装する。
// button-basic.js

'use strict';

$(function () {

  // (1)
  $('.buttonClass').button({
  });

  // (2)
  $('.checkClass').checkboxradio({

    // (3)
    icon: false
  });
});
項番 説明
(1)
ボタンを生成する対象に対して、buttonメソッドを実行する。
(2)
チェックボックスとラジオボタンのボタンを生成する対象に対して、checkboxradioメソッドを実行する。
(3)
チェックボックスとラジオボタンのチェックマークを非表示にするオプションを設定する。

Note

ボタンはbutton要素、input要素、a要素以外にも、span要素やdiv要素などからも生成できる。 なお、span要素やdiv要素などから生成したボタンは、そのままではフォーカスを維持したりTabキーでフォーカス遷移する事ができないが、tabindex属性を指定することで可能になる。また、keypress、keyup、keydownなどのイベントハンドラを実装する場合も、同様にtabindex属性を指定する必要がある。

3.2.2.2. ボタンのグループ化

ここでは、複数のボタンを隙間なく並べて、1つのグループの画面項目として表示する方法を説明する。
ボタンのグループ化はcontrolgroupメソッドを利用する。
jQuery UI基本構成サンプルで示したHTMLに、ボタンを構成する表示領域を追加する。
<!-- (1) -->
<div class="buttongroup">
  <p>Button</p>
  <a href="#" >button1</a>
  <a href="#" >button2</a>
  <a href="#" >button3</a>
</div>
<br>
<div class="buttongroup">
  <p>Checkbox</p>
  <input type="checkbox" id="checkbox1" class="checkClass" />
  <label for="checkbox1">CheckBox1</label>
  <input type="checkbox" id="checkbox2" class="checkClass" />
  <label for="checkbox2">CheckBox2</label>
  <input type="checkbox" id="checkbox3" class="checkClass" />
  <label for="checkbox3">CheckBox3</label>
</div>
<br>
<div class="buttongroup">
  <p>RadioButton</p>
  <input type="radio" id="radio1" name="radio" class="checkClass" />
  <label for="radio1">RadioButton1</label>
  <input type="radio" id="radio2" name="radio" class="checkClass" />
  <label for="radio2">RadioButton2</label>
  <input type="radio" id="radio3" name="radio" class="checkClass" />
  <label for="radio3">RadioButton3</label>
</div>
項番 説明
(1)
グループ化する対象をdiv要素で囲う。この際、div要素にはclass属性を付与し、buttongroupを指定する。
JavaScriptは以下の通り実装する。
// button-controlgroup.js

'use strict';

$(function () {

  // (1)
  $('.checkClass').checkboxradio({
    icon: false
  });

  // (2)
  $('.buttongroup').controlgroup({
  });
});
項番 説明
(1)
チェックボックスとラジオボタンにオプションを設定する場合は、事前にcheckboxradioメソッドを実行する。
(2)
ボタンを生成する対象のグループに対して、controlgroupメソッドを実行する。
controlgroupメソッドを利用することで、複数のボタンが1つのグループとして表示される。
ボタンをグループ化すると、ボタン間の隙間はなくなり、両端のボタンのみ角が丸くなる。

Note

controlgroupメソッドは、次の条件に当てはまる要素をグループ化できる。

分類 要素 概要
button
  • button要素
  • input要素のうち、typeがbutton、submit、resetのいずれか
  • a要素
 通常のボタン
checkboxradio input要素のうち、typeがcheckbox、radioのいずれか チェックボックス、ラジオボタン
selectmenu select要素 ドロップダウンリスト
spinner input要素のうち、classにui-spinner-inputを設定 増減ボタン付きの数値入力用テキストボックス
controlgroupLabel classにui-controlgroup-labelが指定されたlabel要素やspan要素、div要素 文字の表示のみでボタンの機能を有しないラベル

各分類名のメソッドによって、controlgroupメソッドより先に生成された部品も、同様にグループ化できる。

なお、controlgroupメソッドは、a要素とbutton要素の組み合わせなど、異なる要素同士でも1つのグループとすることができる。

また、spinnerに利用するinput要素のtype属性がnumberの場合、増減ボタンがinputにも作成されてしまうため、CSSで非表示にする必要がある。

詳細は、jQuery UI公式ウェブサイトのリファレンスを参照すること。

3.2.3. 利用方法(Bootstrap)

ここでは、Bootstrapを用いた実装方法を説明する。

3.2.3.1. 基本的な使い方

Bootstrap基本構成サンプルで示したHTMLに、次の内容を追加する。

<div>
  <!-- (1) -->
  <button class="btn btn-default" type="submit">button</button>
  <input class="btn btn-default" type="button" value="input button">
  <input class="btn btn-default" type="submit" value="input submit">
  <a class="btn btn-default" href="#" role="button">a要素</a>
</div>
<br>
<!-- (2) -->
<div data-toggle="buttons">
  <label class="btn btn-default">
    <input type="checkbox" id="checkbox1">checkbox
  </label>
</div>
<br>
<div data-toggle="buttons">
  <label for="radio1" class="btn btn-default">
    <input type="radio" id="radio1" name="radio">radiobutton1
  </label>
  <label for="radio2" class="btn btn-default">
    <input type="radio" id="radio2" name="radio">radiobutton2
  </label>
</div>
項番 説明
(1)
ボタンを生成するbutton要素やinput要素、a要素にclass属性を付与し、btn(必須)とスタイルを決めるbtn-defaultを指定する。
上記以外にも、ボタン用のクラスが提供されている。これらの詳細について知りたい場合は、Bootstrap 公式ウェブサイトのリファレンスを参照すること。
(2)
input要素のtype属性がcheckboxやradioの場合、対象のinput要素をlabel要素とdiv要素で囲う。
この際、div要素にdata-toggle属性を付与しbuttonsを指定する。またlabel要素にclass属性を付与しボタン用のクラスを指定する。

Note

ボタンは上記以外に、span要素やdiv要素などからも生成できる。 なお、フォーカスの維持などjQuery UIと同様の配慮が必要になる。詳細は、利用方法(jQuery UI)の基本的な使い方に記載したNoteを参照すること。

3.2.3.2. ボタンのグループ化

ここでは、複数のボタンを隙間なく並べて、1つのグループの画面項目として表示する方法を説明する。

Bootstrap基本構成サンプルで示したHTMLに、次の内容を追加する。

<!-- (1) -->
<div class="btn-group">
  <a class="btn btn-default" href="#" role="button">button1</a>
  <a class="btn btn-default" href="#" role="button">button2</a>
  <a class="btn btn-default" href="#" role="button">button3</a>
</div>
<br>
<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-default">
    <input type="checkbox" id="checkbox1">checkbox1
  </label>
  <label class="btn btn-default">
    <input type="checkbox" id="checkbox2">checkbox2
  </label>
  <label class="btn btn-default">
    <input type="checkbox" id="checkbox3">checkbox3
  </label>
</div>
<br>
<div class="btn-group" data-toggle="buttons">
  <label for="radio1" class="btn btn-default">
    <input type="radio" id="radio1" name="radio">radiobutton1
  </label>
  <label for="radio2" class="btn btn-default">
    <input type="radio" id="radio2" name="radio">radiobutton2
  </label>
  <label for="radio3" class="btn btn-default">
    <input type="radio" id="radio3" name="radio">radiobutton3
  </label>
</div>
項番 説明
(1)
グループ化する対象をdiv要素で囲う。この際、div要素にはclass属性を付与し、btn-groupを指定する。

3.4. モードレスダイアログ

3.4.1. 概要

モードレスダイアログとは、呼び出し元画面が操作できる状態で表示されるダイアログである。

ここでは、jQuery UIを用いて、ボタンクリック時にモードレスダイアログを表示する方法を説明する。

modeless-dialog

図: モードレスダイアログの例

利用ライブラリ サンプル 参考ページ
jQuery UI モードレスダイアログ表示 Dialog | jQuery UI

3.4.2. 利用方法

jQuery UI基本構成サンプルで示したHTMLに、次の内容を追加する。

<!-- (1) -->
<button id="modeless-launch">モードレスダイアログ起動ボタン</button>

<!-- (2) -->
<div id="dialog">
  <p>
    コンテンツ
  </p>
</div>
項番 説明
(1)
モードレスダイアログ起動ボタンを設置する。
(2)
表示するモードレスダイアログを定義する。

JavaScript(modeless.js)は以下のように実装する。

// modeless.js

'use strict';

$(function () {

  // (1)
  $('#dialog').dialog({
    title: 'タイトル',

    // (2)
    autoOpen: false
  });

  // (3)
  $('#modeless-launch').on('click', function () {
    $('#dialog').dialog('open');
  });
});
項番 説明
(1)
指定した要素をモードレスダイアログにする。
(2)
ダイアログが自動的に表示されないようにオプションを指定する。
(3)
ボタンのクリックでモードレスダイアログを起動するイベントを設定する。

上記のサンプルではdialogメソッドの実行の際に、タイトルを設定するtitleプロパティを設定しているが、他にも多くのプロパティが提供されている。これらの詳細について知りたい場合は、jQuery UI公式ウェブサイトのリファレンスを参照すること。

3.7. アコーディオン

3.7.1. 概要

アコーディオンとは、見出しとなるヘッダと、ペアとなるコンテンツ表示領域であるパネルで構成されていて、ヘッダをクリックすることでパネルを開くスタイルのことを指す。
accordion

図: アコーディオン（jQuery UI)

ここでは、jQuery UI 、Bootstrapそれぞれをを用いて、アコーディオンを表示する方法を説明する。
利用ライブラリ サンプル 参考ページ
jQuery UI Accordion | jQuery UI
Bootstrap アコーディオン JavaScript - Bootstrap #collapse

3.7.2. 利用方法(jQuery UI)

ここでは、jQuery UI を用いてアコーディオンを表示する方法を説明する。
なお、本ガイドラインおよびサンプルで紹介するオプション以外に、オプションやメソッドが提供されている。これらの詳細について知りたい場合は、jQuery UI 公式ウェブサイトのリファレンスを参照すること。

3.7.2.1. 基本的な使い方

jQuery UI基本構成サンプルで示したHTMLに、アコーディオンを構成する表示領域を追加する。
<!-- (1) -->
<div id="accordion">
  <!-- (2) -->
  <h3>アコーディオン1</h3>
  <!-- (3) -->
  <div>
    <p>アコーディオン1の内容が表示されました。</p>
  </div>
  <!-- (2) -->
  <h3>アコーディオン2</h3>
  <!-- (3) -->
  <div>
    <p>アコーディオン2の内容が表示されました。</p>
  </div>
  <!-- (2) -->
  <h3>アコーディオン3</h3>
  <!-- (3) -->
  <div>
    <p>アコーディオン3の内容が表示されました。</p>
  </div>
</div>
項番 説明
(1)
アコーディオン全体の領域を定義する。
(2)
アコーディオンのヘッダ領域を定義する。
(3)
アコーディオンのパネル領域を定義する。
JavaScript(accordion-basic.js)で、次の処理を実行する。
// accordion-basic.js

'use strict';

// (1)
$(function () {
  $('#accordion').accordion({
  });
});
項番 説明
(1)
accordionメソッドを実行する。
ヘッダとパネルはaccordionメソッドを実行する要素（サンプルではid=”accordion”のdiv要素）の子要素（h3要素とdiv要素）から作成される。
ヘッダとなる要素の直後の兄弟要素がパネルになるため、ヘッダとなる要素とパネルとなる要素が交互に配置されるよう順番に注意する必要がある。

Note

accordionメソッドを実行する要素の子要素がli要素の場合のみ、li要素の最初の子要素がヘッダとなり、li要素の2つ目の子要素がパネルの内容となる。 このため、li要素一つ一つでヘッダとパネルのセットが作成できる。 詳細は、jQuery UI公式ウェブサイトのリファレンスを参照すること。

3.7.2.2. 全てのパネルを閉じることができるアコーディオン

デフォルトでは、アコーディオンはいずれか1つのパネルが常に開いた状態となる。
ここでは、全てのパネルを閉じた状態にする方法について説明する。
HTMLは 基本的な使い方で示したものと同様の内容とする。
JavaScript(accordion-collapsible.js)で、次の処理を実行する。
// accordion-collapsible.js

'use strict';

// (1)
$(function () {
  $('#accordion').accordion({
    active: false,
    collapsible: true
  });
});
項番 説明
(1)
accordionメソッドにactiveとcollapsibleオプションを実装する。
上記のサンプルでは以下のオプションを指定している。
オプション名 型 概要 デフォルト値
active Booleanまたは Integer
初期状態で開いているパネルを指定する。
falseを設定すると、全てのパネルが閉じた状態となる。（collapsibleをtrueにする必要がある）
数値を設定する場合、0を基準として何番目のパネルを開くか指定する。一番上を指定したい場合は0、二番目を指定したい場合は1を設定する。
マイナスの値を指定すると、一番下のパネルから遡ったパネルを開く。一番下を指定したい場合は-1、下から二番目を指定したい場合は-2を設定する。
 0
collapsible Boolean
すべてのパネルを閉じられるかを指定する。
trueを設定すると、全てのパネルを閉じることができる。
 false

Note

jQuery UIのアコーディオンは同時に複数のパネルを開いた状態にすることができない。 そのような要件がある場合は後述の 全てのパネルを開くことができるアコーディオンの方法を利用するか、jQueryのslideToggleメソッド等を利用して作りこむか、Bootstrapのアコーディオンを利用する必要がある。

3.7.3. 応用方法(jQuery UI)

3.7.3.1. 全てのパネルを開くことができるアコーディオン

アコーディオンは、デフォルトではいずれか1つのパネルしか開いた状態にできない。
ここでは、全てのパネルを開く方法について説明する。
基本的な使い方で示したHTMLのパネルの内容をそれぞれ変更する。
<!-- (1) -->
<div id="accordion">
  <!-- (2) -->
  <div>
    <!-- (3) -->
    <h3>アコーディオン1</h3>
    <!-- (4) -->
    <div>
      <p>アコーディオン1の内容が表示されました。</p>
    </div>
  </div>
  <!-- (2) -->
  <div>
    <!-- (3) -->
    <h3>アコーディオン2</h3>
    <!-- (4) -->
    <div>
      <p>アコーディオン2の内容が表示されました。</p>
    </div>
  </div>
  <!-- (2) -->
  <div>
    <!-- (3) -->
    <h3>アコーディオン3</h3>
    <!-- (4) -->
    <div>
      <p>アコーディオン3の内容が表示されました。</p>
    </div>
  </div>
</div>
項番 説明
(1)
アコーディオン全体の領域を定義する。
(2)
アコーディオン1つ分の領域を定義する。
(3)
アコーディオンのヘッダを定義する。
(4)
アコーディオンのパネルを定義する。
JavaScript(accordion-multiple.js)で、次の処理を実行する。
// accordion-multiple.js

'use strict';

// (1)
$(function () {
  $('#accordion').children('div').accordion({
    active: false,
    collapsible: true
  });
});
項番 説明
(1)
div要素に対してaccordionメソッドを実行する。
ヘッダとパネルのペアごとにdiv要素で分割して、そのdiv要素全てにaccordionメソッドを実行している。
そのため、見た目上は3つのヘッダを持っている1つのアコーディオンだが、実際には3つのアコーディオンを並べる事で実現している。

3.7.4. 利用方法(Bootstrap)

ここでは、Bootstrapを用いてアコーディオンを表示する方法を説明する。

Bootstrap基本構成サンプルで示したHTMLに、次の内容を追加する。

<div class="panel panel-default" role="tablist">

  <div class="panel-heading" role="tab">
    <!-- (1) -->
    <a data-toggle="collapse" href="#collapse1">ヘッダー#1</a>
  </div>

  <!-- (2) -->
  <div id="collapse1" class="collapse" role="tabpanel">
    <div class="panel-body">
      コンテンツ#1
    </div>
  </div>

  <div class="panel-heading" role="tab">
    <!-- (1) -->
    <a data-toggle="collapse" href="#collapse2">ヘッダー#2</a>
  </div>

  <!-- (2) -->
  <div id="collapse2" class="collapse" role="tabpanel">
    <div class="panel-body">
      コンテンツ#2
    </div>
  </div>

</div>
項番 説明
(1)
アコーディオンのヘッダーを定義する。
(2)
アコーディオンのコンテンツを定義する。

アコーディオンのヘッダ部品は、次の属性を持つ要素によって構成する。

属性 値
data-toggle collapse(固定)
href 表示するコンテンツのセレクタ

コンテンツ部品は、次のクラスを持つ要素によって構成する。

クラス 備考
collapse アコーディオンの開閉状態やアニメーションを制御する。

上記のサンプルでは パネルの属性にcollapseクラスを設定することで初期表示時を閉じた状態にしているが、最初からコンテンツを展開する場合にはcollapseに加えてinクラスもあわせて指定する。

なお、panel関連のクラスはアコーディオンの動作には無関係だが、アコーディオン部品に適した見栄えを実現できるため、組み合わせて使用することが多い。パネル部品は次のクラスを持つ要素によって構成する。

クラス 備考
panel 必須。パネル全体の領域を表す。
panel-default 任意。パネルのスタイルを決める。他にもpanel-infoやpanel-warningなどが使える。
panel-heading 任意。パネル内のヘッダ領域を表す。
panel-body 任意。パネル内のコンテンツ領域を表す。

Note

このサンプルでは同時に複数のコンテンツ領域を展開することができるが、同時に複数のコンテンツ領域を展開できないようにすることもできる。そのためには、アコーディオン全体の領域を囲う要素や属性の追加、またpanelクラスの利用が必須になる。Bootstrap公式ウェブサイトのリファレンスにあるサンプルを参考にすること。

3.8. タブ

3.8.1. 概要

タブとは、複数の表示領域(以降、パネル)を切り替えて使用する際の、それぞれのパネルの見出しのことを指す。
タブの例

図: タブの例

ここでは、jQuery UIとBootstrapそれぞれで、タブを表示する方法を説明する。
利用ライブラリ サンプル 参考ページ
jQuery UI Tabs | jQuery UI
Bootstrap JavaScript - Bootstrap #tabs
本ガイドラインおよびサンプルで紹介するプロパティ以外にもプロパティが提供されている。これらの詳細について知りたい場合は、上記のjQuery UIおよびBootstrapの公式サイトを参照すること。

3.8.2. 利用方法(jQuery UI)

3.8.2.1. 基本的な使い方

jQuery UI基本構成サンプルで示したHTMLに、タブとパネルを表示する領域を追加する。
タブおよびパネル表示用の領域をdivで作成し、div内にタブ領域をul要素、パネルをdiv要素で配置する。
タブ領域内に配置する各タブはli要素で作成する。
各タブには、a要素で#を付与したパネルを表すdiv要素のid値をリンク先として指定することで、タブとパネルを紐付ける。
<!-- (1) -->
<div id="tabs">
  <!-- (2) -->
  <ul>
    <li><a href="#tabs-1">タブ１</a></li>
    <li><a href="#tabs-2">タブ２</a></li>
    <li><a href="#tabs-3">タブ３</a></li>
  </ul>
  <!-- (3) -->
  <div id="tabs-1">
    <p>タブ１のパネルを表示します。</p>
  </div>
  <!-- (3) -->
  <div id="tabs-2">
    <p>タブ２のパネルを表示します。</p>
  </div>
  <!-- (3) -->
  <div id="tabs-3">
    <p>タブ３のパネルを表示します。</p>
  </div>
</div>
項番 説明
(1)
タブ全体の領域を定義する。
(2)
タブ領域の見出し部分をリストで定義する。
(3)
タブ選択時に表示するパネル部分を定義する。
 
// tabs.js

'use strict';

$(function () {

  // (1)
  $('#tabs').tabs({
  });
});
項番 説明
(1)
tabsメソッドを実行する。

3.8.2.2. タブの表示位置変更

jQuery UIのタブの表示位置はパネルの下側・左側・右側に変更できる。
表示位置の変更は、タブ領域の移動と、タブのスタイル変更(タブ間隔やタブの形など)で実現する。
ここでは、タブ領域の移動のみ、実装方法を紹介する。

なおサンプルではタブのスタイル変更も行っている。必要に応じて、サンプルのソースコードを参照し、スタイルを変更すること。
3.8.2.2.1. 下付きタブ
jQuery UI基本構成サンプルで示したHTMLに、タブとパネルを表示する領域を追加する。
<!-- (1) -->
<div id="tabs" class="tabs-bottom">
  <ul>
    <li><a href="#tabs-1">タブ１</a></li>
    <li><a href="#tabs-2">タブ２</a></li>
    <li><a href="#tabs-3">タブ３</a></li>
  </ul>
  <div id="tabs-1">
    <p>タブ１のパネルを表示します。</p>
  </div>
  <div id="tabs-2">
    <p>タブ２のパネルを表示します。</p>
  </div>
  <div id="tabs-3">
    <p>タブ３のパネルを表示します。</p>
  </div>
</div>
項番 説明
(1)
タブ全体の領域を定義する。class属性値に独自に実装したCSS(tabs-bottom)を指定する。
JavaScript(tabs-bottom.js)で、次の処理を実行する。
// tabs-bottom.js

'use strict';

$(function () {

  // (1)
  $('#tabs').tabs({
  });

  // (2)
  $('.tabs-bottom .ui-tabs-nav').appendTo('#tabs');
});
項番 説明
(1)
tabsメソッドを実行する。
(2)
タブ領域を下部に移動する。
なお、サンプルでは上記以外にスタイルを調整するための実装をしている。サンプルのソースコードを参照すること。
3.8.2.2.2. 左付きタブ
jQuery UI基本構成サンプルで示したHTMLに、タブとパネルを表示する領域を追加する。
<!-- (1) -->
<div id="tabs" class="tabs-left ui-helper-clearfix">
  <ul>
    <li><a href="#tabs-1">タブ１</a></li>
    <li><a href="#tabs-2">タブ２</a></li>
    <li><a href="#tabs-3">タブ３</a></li>
  </ul>
  <div id="tabs-1">
    <p>タブ１のパネルを表示します。</p>
  </div>
  <div id="tabs-2">
    <p>タブ２のパネルを表示します。</p>
  </div>
  <div id="tabs-3">
    <p>タブ３のパネルを表示します。</p>
  </div>
</div>
項番 説明
(1)
タブ全体の領域を定義する。class属性値に独自に実装したCSS(tabs-left)を指定する。
CSS(tabs-left.css)で、タブ領域を左側に設定する。
/* (1) */
.tabs-left .ui-tabs-nav {

  /* (2) */
  float: left;
}

/* (3) */
.tabs-left .ui-tabs-nav .ui-state-default {

  /* (4) */
  width: 100%;
}
項番 説明
(1)
タブ領域の設定を定義する。
(2)
領域を左に寄せる。
(3)
タブの設定を定義する。
(4)
タブを縦に並べるために幅を100%に設定する。
なお、サンプルでは上記以外にスタイルを調整するための実装をしている。サンプルのソースコードを参照すること。

Note

右付きタブを作成する場合は、.ui-tabs-navセレクタのfloat属性値をrightに設定することで実現する。

ただし、スタイルについては左付きタブの設定を参考に適宜修正すること。

3.8.3. 利用方法(Bootstrap)

3.8.3.1. Bootstrap（マークアップ形式）のタブ

ここでは、Bootstrapを用いた実装方法を説明する。

Bootstrap基本構成サンプルで示したHTMLに、次の内容を追加する。

<!-- (1) -->
<ul class="nav nav-tabs" role="tablist">
  <li class="active" role="presentation"><a href="#tab1" data-toggle="tab" role="tab">タブ１</a></li>
  <li role="presentation"><a href="#tab2" data-toggle="tab" role="tab">タブ２</a></li>
</ul>

<!-- (2) -->
<div class="tab-content">
  <div class="tab-pane active" id="tab1" role="tabpanel">
    <p>コンテンツ１</p>
  </div>
  <div class="tab-pane" id="tab2" role="tabpanel">
    <p>コンテンツ２</p>
  </div>
</div>
項番 説明
(1)
タブ領域の見出し部分をリストで定義する。
(2)
タブ選択時に表示するパネル部分を定義する。

タブ部品は、次の属性とクラスを持つ要素によって構成する。

属性 値
data-toggle tab(固定)
href 表示するペインのセレクタ
クラス 備考
nav 必須
nav-tabs 必須
active 必須。これを設定したタブが選択状態で表示される。

ペイン部品は、次のクラスを持つ要素によって構成する。

クラス 備考
tab-content 必須
tab-pane 必須。単一のペインを表す。複数設定することができる。
active 必須。これを設定したペインが選択状態で表示される。

3.9. スライダー

3.9.1. 概要

スライダーとは、棒状の領域の上に現在位置を指し示す小さな印(以降、ハンドル)を表示し、ハンドルを移動させることで値や範囲を指示する入力要素のことである。
スライダーの例

図: スライダーの例

ここでは、jQuery UIを用いて、スライダーを表示する方法を説明する。
利用ライブラリ サンプル 参考ページ
jQuery UI Slider | jQuery UI
本ガイドラインおよびサンプルで紹介するプロパティ以外にもプロパティが提供されている。これらの詳細について知りたい場合は、jQuery UI 公式ウェブサイトのリファレンスを参照すること。

3.9.2. 利用方法

3.9.2.1. 基本的な使い方

jQuery UI基本構成サンプルで示したHTMLに、スライダーを表示する領域を追加する。
<div id="slider"></div>
JavaScript(slider.js)で、sliderメソッドを実行する。
// slider.js

'use strict';

$(function () {

  $('#slider').slider({
  });
});

3.9.2.2. スライダーのオプション

オプションの設定について説明する。
ここでは、スライダーの位置が示す数値を取得し、別途設置したテキストボックスにその数値を表示させるサンプルを用いて説明する。

jQuery UI基本構成サンプルで示したHTMLに、スライダーを表示する領域とテキストボックスを追加する。
<!-- (1) -->
<input type="text" id="value"/><br>
<!-- (2) -->
<div id="max">50</div>
<div id="slider-numeric"></div>
<div id="min">10</div>
項番 説明
(1)
ハンドルの数値確認用テキストボックスを設置する。
(2)
スライダー領域を定義する。
JavaScript(slider-numeric.js)で、sliderメソッドを実行する。
// slider-numeric.js

'use strict';

$(function () {

  // (1)
  $('#slider-numeric').slider({

    // (A)
    range: 'min',

    // (B)
    orientation: 'vertical',

    // (C)
    min: 10,

    // (D)
    max: 50,

    // (E)
    value: 25,

    // (F)
    step: 5,

    // (G)
    slide: function (event, ui) {
      $('#value').val(ui.value);
    }
  });

  $('#value').val($('#slider-numeric').slider('value'));
});
項番 説明
(1)
sliderメソッドを実行する。実行時にオプションを指定する。
項番 オプション名 型 概要 デフォルト値
(A) range
String
または
Boolean
ハンドルの位置に応じて、トラックの色を変更するオプション。
String：
minを設定すると、ハンドルから最小値までのトラックを着色し、maxを設定すると、ハンドルから最大値までのトラックを着色する。
Boolean：
trueを設定するとハンドルが2つになる。ハンドル間のトラックを着色する。
 false
(B) orientation String スライダーの向きを設定する。horizontalを設定すると横向き、 verticalを設定すると縦向きとなる。 horizontal
(C) min Number スライダーの最小値を設定する。 0
(D) max Number スライダーの最大値を設定する。 100
(E) value Number スライダーの初期値を設定する。 0
(F) step Number ハンドルの1ステップあたりの移動値を設定する。 1
(G) slide Event ハンドルが移動する度に発生するイベントに関数を設定する。 -

3.9.3. 応用方法

3.9.3.1. イベントを利用した他部品との連動

jQuery UI Sliderにはユーザ操作によって発生するイベントがある。
ここでは、イベントを利用して、スライダーとドロップダウンリストを連動させ、スライダーまたはドロップダウンリストを操作すると、文字列のフォントサイズが変更されるサンプルを用いて説明する。

jQuery UI基本構成サンプルで示したHTMLに、スライダーを表示する領域とドロップダウンリストとフォントサイズを変更する領域を追加する。
<!-- (1) -->
<form id="font-size">
  <label>フォントサイズ</label>
  <select name="font" id="font">
    <option>10</option>
    <option>12</option>
    <option>14</option>
    <option>16</option>
    <option>18</option>
    <option>20</option>
    <option>22</option>
    <option>24</option>
  </select>
  <label>px</label>
</form>
<!-- (2) -->
<div id="min">10px</div>
<div id="slider-change-fontsize"></div>
<div id="max">24px</div>
<!-- (3) -->
<div id="font-size-div" class="ui-widget-content">
  ハンドルを動かすとフォントサイズが変更されます。
</div>
項番 説明
(1)
連携用ドロップダウンリストを定義する。
(2)
スライダー領域を定義する。
(3)
フォントサイズの変更を反映する領域を定義する。
JavaScript(slider-change-fontsize.js)で、sliderメソッドを実行する。
// slider-change-fontsize.js

'use strict';

$(function () {
  var select = $('#font');

  // (1)
  var changeFontSize = function (value) {
    $('#font-size-div').css('font-size', value + 'px');
  };

  var slider = $('#slider-change-fontsize').slider({

    range: 'min',
    min: 10,
    max: 24,
    step: 2,
    value: select[0].selectedIndex * 2 + 10,

    // (2)
    slide: function (event, ui) {

      // (3)
      select[0].selectedIndex = (ui.value - 10) / 2;
      changeFontSize(ui.value);
    },

    // (4)
    change: function (event, ui) {
      changeFontSize(ui.value);
    },

    // (5)
    create: function (event, ui) {
      var value = $(this).slider('value');
      changeFontSize(value);
    }
  });

  // (6)
  $('#font').on('change', function () {
    slider.slider('value', this.selectedIndex * 2 + 10);
  });
});
項番 説明
(1)
フォントサイズを変更するための関数を定義する。
(2)
ハンドルを移動する度に発生するイベントに関数を設定する。
(3)
ドロップダウンリストを選択する。
(4)
valueの値を変更した時に発生するイベントに関数を設定する。
(5)
スライダーが生成された時に発生するイベントに関数を設定する。
(6)
ドロップダウンリストの値を変更した場合、スライダーの位置を変更する。
createイベントでは、sliderメソッドよりスライダーの値を取得し、ドロップダウンリストとフォントサイズを設定する。
slideイベントでは、引数からスライダーの値(ui.value)を取得し、ドロップダウンリストとフォントサイズを設定する。
changeイベントでは、引数からスライダーの値(ui.value)を取得し、フォントサイズを設定する。

Warning

createイベントでは、ui.valueがundefinedになっているため、sliderメソッドを利用してスライダーの値を取得すること。

Note

本サンプルでは紹介していないが、ハンドルの移動を始めた際に発生するstartイベント、ハンドルの移動を止めた際に発生するstopイベントがある。

また、スライダーを生成してからハンドルを移動させた際に発生する一連のイベントは、下記の場合で異なる。

  1. 画面に表示されているスライダーのハンドルをユーザが直接操作し移動した場合
ユーザが操作した場合のイベント
  1. ハンドルをユーザが直接操作せず、他の画面項目と連動し（JavaScriptがハンドルに対して内部処理を行い）ハンドルを移動した場合
JavaScriptで操作した場合のイベント

詳細は、jQuery UI公式ウェブサイトのリファレンスを参照すること。

3.9.3.2. 目盛り付きスライダー

jQuery UIでは、スライダーに目盛りを表示することは出来ないが、JavaScriptとCSSの組み合わせで実現可能である。
jQuery UI基本構成サンプルで示したHTMLに、スライダーを表示する領域を追加する。
<div id="slider-labels"></div>
JavaScript(slider-labels.js)で、sliderメソッドを実行する。
createイベントで、目盛りの作成を行うcreateLabelsメソッドを設定する。
// slider-labels.js

'use strict';

$(function () {

  // (1)
  var createLabels = function (event, ui) {

    // (2)
    var opt = $(this).slider('option');

    // (3)
    var vals = opt.max - opt.min;

    // (4)
    for (var i = 0; i <= vals; i = i + opt.step) {

      // (5)
      var el = $('<label>' + (i + opt.min) + '</label>').css('left', (i / vals * 100) + '%');

      // (6)
      $('#slider-labels').append(el);
    }
  };

  $('#slider-labels').slider({
    min: 0,
    max: 10,

    // (7)
    create: createLabels
  });
});
項番 説明
(1)
スライダーの最小値と最大値に合わせて目盛りを追加する関数を定義する。
(2)
スライダーのオプションを取得する。
(3)
範囲内の数値の個数を取得する。
(4)
スライダーに対して最小値側からステップ数毎に目盛りを配置する。
(5)
label要素を生成し、目盛りの位置を設定する。
(6)
スライダーに要素を追加する。
(7)
スライダーが生成された時に発生するイベントに関数を設定する。

Note

createLabelsメソッド内for文の変化式を変更することで、目盛りを任意の間隔に変更することが出来る。

例えば、間隔を5にする場合、i = i + opt.stepをi = i + 5に変更する。

CSS(slider-labels.css)で、目盛りの位置を設定する。
#slider-labels label {
  position: absolute;
  width: 20px;
  margin-top: 20px;
  margin-left: -10px;
  text-align: center;
}

3.11. 日付入力時のカレンダー表示

3.11.1. 概要

日付入力のテキストフィールドへのフォーカス時にカレンダーを表示することで、日付入力を容易にすることができる。
ここでは、jQuery UI、bootstrap-datepickerそれぞれを用いて、カレンダーを表示する方法を説明する。
calendar

図: カレンダー表示の例

利用ライブラリ サンプル 参考ページ
jQuery UI Datepicker | jQuery UI
bootstrap-datepicker bootstrap-datepicker documentation

3.11.2. 利用方法(jQuery UI)

ここでは、jQuery UIを用いて、日付入力のテキストフィールドへのフォーカス時にカレンダーを表示する方法を説明する。
本ガイドラインおよびサンプルで紹介するプロパティ以外にもプロパティが提供されている。これらの詳細について知りたい場合は、jQuery UI 公式ウェブサイトのリファレンスを参照すること。

3.11.2.1. 基本的な使い方

jQuery UI基本構成サンプルで示したHTMLに、日付入力をするテキストフィールドを追加する。
<!-- (1) -->
<label>日付: <input type="text" id="jquery-ui-datepicker"></label>
項番 説明
(1)
フォーカスを契機にカレンダーが表示されるテキストフィールドを設置する。
JavaScript(datepicker-basic.js)では、カレンダーをポップアップするテキストフィールドに対し、datepickerメソッドを実行する。
// datepicker-basic.js

'use strict';

$(function () {

  // (1)
  $('#jquery-ui-datepicker').datepicker();
});
項番 説明
(1)
テキストフィールドに対し、datepickerメソッドを実行する。

3.11.2.2. 休日設定（背景色・休日選択不可・休日定義）

jQuery UI基本構成サンプルで示したHTMLに、日付入力をするテキストフィールドを追加する。
<!-- (1) -->
<label>日付: <input type="text" id="jquery-ui-datepicker-holiday"></label>
項番 説明
(1)
フォーカスを契機にカレンダーが表示されるテキストフィールドを設置する。
JavaScript(datapicker-holiday-definition.js)では、休日設定する日付をオブジェクトで定義する。
// datapicker-holiday-definition.js

'use strict';

// (1)
var holidays = {
  '2016-01-01': {selectable: true, label: '元日'},
  '2016-11-03': {selectable: true, label: '文化の日'},
  '2016-11-23': {selectable: false, label: '勤労感謝の日'},
  '2016-04-01': {selectable: false, label: '任意の休日'}
};
項番 説明
(1)
祝日・休日をオブジェクトで定義する。
オブジェクトはカレンダーにおける対象年月日（date）をキーに選択可否（selectable）・ラベル（label）を定義する。

Note

このサンプルでは休日定義をJavaScriptにハードコーディングしている。

休日定義が設定ファイルやデータベースに格納されている場合、外部から取得するよう実装方法を変更すること。

JavaScript(datepicker-holiday.js)では、カレンダーをポップアップするテキストフィールドに対し、datepickerメソッドを実行する。
上記で定義した日付に対し、個別のラベル名やスタイル、選択可否を設定する場合には、datepickerメソッドのbeforeShowDayプロパティに関数を指定する。
// datepicker-holiday.js

'use strict';

$(function () {

  function addZero(n) {
    return ('0' + n).slice(-2);
  }

  $('#jquery-ui-datepicker-holiday').datepicker({

    dateFormat: 'yy/mm/dd',

    // (1)
    defaultDate: '2016/01/01',

    // (2)
    beforeShowDay: function (date) {

      // (3)
      var holiday = holidays[date.getFullYear() + '-' + addZero(date.getMonth() + 1) + '-' + addZero(date.getDate())];
      if (holiday) {

        // (4)
        return [holiday.selectable, 'class-holiday', holiday.label];

      } else {

        // (5)
        switch (date.getDay()) {

          // (6)
          case 0 :
            return [true, 'class-sunday', 'Sunday'];

          // (7)
          case 6 :
            return [true, 'class-saturday', 'Saturday'];
          default:
            return [true, '', 'Weekday'];
        }
      }
    }
  });
});
項番 説明
(1)
テキストフィールドを最初に開いた時にハイライトされる日付を設定する。
(2)
カレンダーを表示する前にすべての日付に対して処理を実施する。
(3)
カレンダーに表示する日付と定義した祝日・休日を比較する。
(4)
日付が一致した場合は、[選択可否（boolean）, 日付に適用するスタイル名（String）, 日付がフォーカスされた際に表示するラベル（String）]を返却する。
(5)
定義した祝日・休日に一致しない場合、土曜日・日曜日と平日で適用するスタイル等を設定する。
曜日判定はbeforeShowDayオプションに実装する関数に渡されたdateオブジェクトに対して、date.getDay()の取得結果（0：日曜～6：土曜）で判定する。
(6)
日曜日(date.getDay()の値が0)の場合の定義
(7)
土曜日(date.getDay()の値が6)の場合の定義
beforeShowDayオプションはカレンダーが表示される直前に、表示する全ての日付に対して繰り返し処理を実行する。
function(date)の引数にはDate型の日付情報が渡され、休日・祝日設定を実施するために渡された日付情報に対して判定処理を実装する。
beforeShowDayオプションの戻り値には配列を設定し、設定項目は配列の先頭から順番にそれぞれ以下の通り。
  • 選択可否（Boolean）
  • CSSクラス名（String）
  • ラベル名（String）
選択可否はtrueを設定すればカレンダー上で選択可能となり、falseを設定すればカレンダー上で選択不可となる。
CSSクラス名は対象日付に独自の装飾（背景色や文字色）を設定したい場合に、個別定義したCSSクラス名を設定する。指定しない場合は空文字を設定する。
ラベル名はカレンダー上で日付がマウスオーバーされた際に表示する情報を設定する。祝日名や休日名を設定する場合に活用する。指定しない場合は空文字を設定する。

Note

ラベル名は選択可能な日付のみ表示される。選択不可の休日の場合にも表示させたい場合は、独自にスタイルシートを作成し、 .ui-state-disabled {pointer-events: auto;}を追加すること。

Note

CSSクラスを定義する際は

.class-sunday .ui-state-default {
  color:red;
}

のようにjQueryのCSSクラスである .ui-state-defaultを上書きする必要がある。

Warning

beforeShowDayオプションは配列の戻り値を設定する必要があり、分岐条件等の実装により戻り値が返却されない場合は、JavaScript実行時エラーが発生するため注意すること。

3.11.2.3. 選択可能な日付の範囲制御

jQuery UI基本構成サンプルで示したHTMLに、日付入力をするテキストフィールドを追加する。
<!-- (1) -->
<label>日付: <input type="text" id="jquery-ui-datepicker-range"></label>
項番 説明
(1)
フォーカスを契機にカレンダーが表示されるテキストフィールドを設置する。
JavaScript(datepicker-range.js)では、カレンダーをポップアップするテキストフィールドに対し、datepickerメソッドを実行する。
カレンダーの選択範囲を指定範囲に設定する場合にはdatepickerメソッドのminDateオプションとmaxDateオプションを使用する。
// datepicker-range.js

'use strict';

// (1)
$(function () {
  $('#jquery-ui-datepicker-range').datepicker({
    dateFormat: 'yy/mm/dd',
    minDate: '2016/01/11',
    maxDate: '2016/03/21'
  });
});
項番 説明
(1)
minDateとmaxDateを使用し範囲指定を実装する。

3.11.2.4. カレンダーのロケール設定

jQuery UI基本構成サンプルで示したHTMLに、日付入力をするテキストフィールドとローカライズファイルを読み込む記述を追加する。jQuery UI本体の読み込み後にローカライズファイルを読み込む必要があるため、順序性に注意すること。
<!-- (1) -->
<label>Date(en-GB): <input type="text" id="jquery-ui-datepicker-localize-en-GB"></label><br><br>
<label>日付(ja): <input type="text" id="jquery-ui-datepicker-localize-ja"></label>

<!-- (2) -->
<script src="../lib/vendor/jquery/3.3.1/jquery.min.js"></script>
<script src="../lib/vendor/jquery-ui/1.12.1/jquery-ui.min.js"></script>
<!-- (3) -->
<script src="../lib/vendor/jquery-ui/1.12.1/i18n/datepicker-en-GB.js"></script>
<script src="../lib/vendor/jquery-ui/1.12.1/i18n/datepicker-ja.js"></script>
項番 説明
(1)
フォーカスを契機にカレンダーが表示されるテキストフィールドを設置する。
(2)
jQueryとjQuery UIのJavaScript、カレンダーの日本語対応のJavaScript、独自に実装したJavaScriptを読み込む。
(3)
jQuery UI本体読み込み後にローカライズファイルを読み込む。
JavaScript(datepicker-locale.js)では、全カレンダーで使用する言語を$.datepicker.setDefaultsで指定する。また、特定のカレンダーのみ言語を変更する場合、セレクタで対象を選択し、$datepickerメソッドの引数に使用する言語を設定する。
// datepicker-locale.js

'use strict';

$(function () {
  // (1)
  $.datepicker.setDefaults($.datepicker.regional['ja']);

  // (2)
  $('#jquery-ui-datepicker-localize-en-GB').datepicker($.datepicker.regional['en-GB']);

  // (3)
  $('#jquery-ui-datepicker-localize-ja').datepicker();
});
項番 説明
(1)
全てのカレンダーに有効なローカライズを設定する。
(2)
特定のカレンダーをセレクトし、ローカライズを設定する。
(3)
ローカライズ設定を個別に指定しない場合はsetDefaultsの設定が使用される。

Note

ローカライズファイルを複数読み込み、かつ使用言語の設定を省略した場合、最後に読み込まれたローカライズファイルが使用される。サンプルの例の場合、datepicker-ja.jsが有効になる。

Note

ローカライズファイルはGitHubリポジトリ(https://github.com/jquery/jquery-ui/tree/master/ui/i18n)で配布されている。利用する際はjQuery UIのバージョンに合わせて適切なリリースタグから資材を取得すること。

GitHubリポジトリのブランチ/タグ切り替え例

図: GitHubリポジトリのブランチ/タグ切り替え例

3.11.3. 利用方法(bootstrap-datepicker)

Bootstrapには日付入力時のカレンダー表示機能が存在しない。
jQuery UIには日付入力時のカレンダー表示機能があるが、Bootstrapと併用する際にはスタイルの統一が課題になる。

bootstrap-datepickerはBootstrap風のスタイルを持つ日付入力部品である。これを利用することで、jQuery UIのスタイルをカスタマイズすることなく、日付入力部品が使用できる。
また、jQuery UIは様々な機能を包含しているためにファイルサイズが大きい(圧縮時に約250kb)が、bootstrap-datepickerはファイルサイズが小さい(圧縮時に約25kb)というメリットもある。

ここでは、bootstrap-datepickerを用いて、Bootstrap風のスタイルのカレンダーを表示する方法を説明する。

実装方法はマークアップによる方法とJavaScriptによる方法の二通りを説明する。
なお、カレンダー表示の前後に処理を実装する場合は、JavaScript形式での実装が適している。

3.11.3.1. 基本的な使い方(マークアップ形式)

HTMLでは、Bootstrapのスタイルシート、jQuery、Bootstrap及びbootstrap-datepickerのJavaScript、カレンダーの日本語対応のJavaScriptを読み込む。日付入力をするテキストフィールドにはinput要素を使用し、data-provide属性にdatepickerを指定する。

<head>
  <meta charset="utf-8">
  <title>マークアップ形式のカレンダー</title>

  <!-- (1) -->
  <link rel="stylesheet" href="../lib/vendor/bootstrap/3.3.7/css/bootstrap.css">
  <link rel="stylesheet" href="../lib/vendor/bootstrap/3.3.7/css/bootstrap-theme.css">
  <link rel="stylesheet" href="../lib/vendor/bootstrap-datepicker/datepicker3.css">
</head>
<body>

  <h1>マークアップ形式のカレンダー</h1>

  <!-- (2) -->
  <label>日付: <input value="2014/09/09"
                      data-provide="datepicker"
                      data-date-format="yyyy/mm/dd"
                      data-date-language="ja"
                      data-date-orientation="buttom auto"
                      data-date-autoclose="true"></label>

  <!-- (3) -->
  <script src="../lib/vendor/jquery/3.3.1/jquery.min.js"></script>
  <script src="../lib/vendor/bootstrap/3.3.7/js/bootstrap.js"></script>
  <script src="../lib/vendor/bootstrap-datepicker/bootstrap-datepicker.js"></script>
  <script src="../lib/vendor/bootstrap-datepicker/bootstrap-datepicker.ja.min.js"></script>
</body>
項番 説明
(1)
Bootstrapのスタイルシートを読み込む。
(2)
フォーカスを契機にカレンダーが表示されるテキストフィールドを設置する。
各オプションは以下の通り。
オプション 説明
data-provide マークアップ形式で利用するための設定。
data-date-format 日付フォーマットを設定する。
data-date-language 表示言語を設定する。
data-date-orientation カレンダーの表示位置を設定する。
data-date-autoclose 日付選択後にカレンダーを自動で閉じるかをtrue/falseで設定する。
(3)
jQuery、Bootstrap、bootstrap-datepicker及びカレンダーの日本語対応のJavaScriptを読み込む。

日付フォーマットや表示言語などの形式や、その他のオプションについて知りたい場合は、bootstrap-datepicker公式ウェブサイトのリファレンス を参照すること。

3.11.3.2. 基本的な使い方(JavaScript形式)

HTMLでは、Bootstrapのスタイルシート、jQuery、Bootstrap及びbootstrap-datepickerのJavaScriptを読み込み、独自に実装したJavaScriptを読み込む。

<head>
  <meta charset="utf-8">
  <title>JavaScript形式のカレンダー</title>

  <!-- (1) -->
  <link rel="stylesheet" href="../lib/vendor/bootstrap/3.3.7/css/bootstrap.css">
  <link rel="stylesheet" href="../lib/vendor/bootstrap/3.3.7/css/bootstrap-theme.css">
  <link rel="stylesheet" href="../lib/vendor/bootstrap-datepicker/datepicker3.css">
</head>
<body>

  <h1>JavaScript形式のカレンダー</h1>

  <!-- (2) -->
  <label>日付: <input id="datepicker" type="text" value="2014/09/09" ></label>

  <!-- (3) -->
  <script src="../lib/vendor/jquery/3.3.1/jquery.min.js"></script>
  <script src="../lib/vendor/bootstrap/3.3.7/js/bootstrap.js"></script>
  <script src="../lib/vendor/bootstrap-datepicker/bootstrap-datepicker.js"></script>
  <script src="../lib/vendor/bootstrap-datepicker/bootstrap-datepicker.ja.min.js"></script>

  <!-- (4) -->
  <script src="js/bootstrap-datepicker-javascript.js"></script>
</body>
項番 説明
(1)
Bootstrapのスタイルシートを読み込む。
(2)
フォーカスを契機にカレンダーが表示されるテキストフィールドを設置する。
(3)
jQuery、Bootstrap、bootstrap-datepicker及びカレンダーの日本語対応のJavaScriptを読み込む。
(4)
独自に実装したJavaScriptを読み込む。

JavaScript(bootstrap-datepicker-javascript.js)では、フォーカスを契機にカレンダーが表示されるテキストフィールドに対し、datepickerメソッドを実行する。

// bootstrap-datepicker-javascript.js

'use strict';

$(function () {

  // (1)
  $('#datepicker').datepicker({

    // (2)
    format: 'yyyy/mm/dd',

    // (3)
    language: 'ja',

    // (4)
    orientation: 'bottom auto',

    // (5)
    autoclose: true
  });
});
項番 説明
(1)
カレンダー表示を設定する。
(2)
日付フォーマットを設定する。
(3)
表示言語を設定する。
(4)
カレンダーの表示位置を設定する。
(5)
日付選択後にカレンダーを自動で閉じるかをtrue/falseで設定する。

Note

jQuery UIとbootstrap-datepickerは別のライブラリなので、動作や表示が異なることに注意する。例として次の点が異なる。

条件 jQuery UI bootstrap-datepicker
カレンダーをクリックして日付を選択した際の動作 カレンダー表示が閉じる。 カレンダー表示が閉じない(autocloseオプションを指定することで閉じるように動作を変更できる)。
キー入力で「2014/04/35」などの無効な日付を入力した際の動作 そのまま「2014/04/35」が表示され、カレンダー上は選択されていない状態になる。 自動的に「2014/05/05」に修正される。カレンダー上も修正後の日付が選択されている状態になる。
日本語化時のカレンダーのヘッダ部の年月表示 「2014年 4月」のように年月の順で表示される。 「4月 2014」のように月年の順で表示される。
日本語化時のカレンダーのヘッダ部の年月表示をクリック 何も起こらない。 クリック回数に応じてページ送りの単位を切り替えられ、1年単位、10年単位、100年単位、1000年単位でのページ送りが可能になる。

Warning

bootstrap-datepickerを適用した要素の手前で、マージンを取っている要素がある場合、以下の問題が発生する。

  • カレンダーが、テキストフィールドに重なって表示される。(カレンダーの表示位置が下の場合)
  • カレンダーが、テキストフィールドから少し離れて表示される。(カレンダーの表示位置が上の場合)
calendar-bootstrap-datepicker-popup-bug

図: カレンダーの表示バグ（カレンダーの表示位置が下の場合）

これはbootstrap-datepicker1.4以降の不具合であるため、対処が必要な場合は、独自にスタイルシートを作成し、カレンダーの表示位置を調整すること。紹介しているサンプルでは以下のCSSを適用して解消しているので参考にしてほしい。

.datepicker-dropdown {
  margin-top: 20px;
}

3.12. オートコンプリート

3.12.1. 概要

オートコンプリートとは、あらかじめ語句を定義しておくことで、入力時に候補リストを表示し、入力を補助する機能である。

ここでは、jQuery UIを用いて、テキストフィールドへの文字入力時に候補リストを表示する方法を説明する。

autocomplete

図: オートコンプリートの例

利用ライブラリ サンプル 参考ページ
jQuery UI オートコンプリート Autocomplete | jQuery UI

Note

HTML5からinputなどのフォームコントロールでautocomplete属性が使用できるようになっているが、これはユーザが過去に入力した値をもとに候補を表示する機能である。

3.12.2. 利用方法

jQuery UI基本構成サンプルで示したHTMLに加え、候補リストを表示するテキストフィールドを追加する。

<!-- (1) -->
<label>入力欄:<input id="jquery-ui-autocomplete-input" /></label>
項番 説明
(1)
文字を入力すると候補を表示するテキストフィールドを定義する。

JavaScript(autocomplete.js)では、候補リストを表示するテキストフィールドに対し、autocompleteメソッドを実行する。

// autocomplete.js

'use strict';

$(function () {

  // (1)
  var computerLanguages = [
    'latex', 'lisp', 'locobasic', 'lolcode', 'lotusformulas',
    'lotusscript', 'lscript', 'lsl2', 'lua'
  ];

  // (2)
  $('#jquery-ui-autocomplete-input').autocomplete({

    // (3)
    source: function (request, response) {

      // (4)
      var matcher = new RegExp('^' + $.ui.autocomplete.escapeRegex(request.term), 'i');

      // (5)
      var suggestions = $.grep(computerLanguages, function (item) {
        return matcher.test(item);
      });

      // (6)
      response(suggestions);
    }
  });
});
項番 説明
(1)
表示される候補の文字列を設定する。
(2)
テキストフィールドに対し、autocompleteメソッドを実行する。
(3)
入力された文字から始まる候補を抽出し、sourceに設定する。
(4)
入力文字列から正規表現のオブジェクトを作成する。
(5)
正規表現パターンに一致する候補をcomputerLanguagesから探し、suggestionsオブジェクトに設定する。
(6)
suggestionsオブジェクトを返却する。

autocompleteメソッドには、入力された文字から始まる候補を抽出する処理を実装した関数を、sourceプロパティに設定する。

3.12.3. 応用方法

上記では候補の絞り込みを対象データに対してクライアント側で実施したが、候補の絞り込み対象データが大量に存在する等の場合にはサーバ側で絞り込みを実装し、クライアント側は絞り込み済みのデータを表示するよう工夫する必要がある。 サーバ側で絞り込みを実装するために使用する入力文字列は、request.term として取得しリクエストの際にクエリ文字列として設定する。

例えば、Ajaxを用いて候補情報を取得する場合は以下のように実装する。

$(function () {
  $('#autocompleteInput').autocomplete({
    source: function (request, response) {
      $.ajax({
        url: contextPath + '/api/v1/autocomplete',
        type: 'POST',
        dataType: 'json',
        data: {
        inputText : request.term
        }
      }).then(function (data) {
        response(data);
      });
    }
  });
});

上記の例ではサーバへ送信する項目に request.termを設定し、処理正常終了時に responseにサーバから返却された絞り込み済みの戻り値（リスト/配列）を設定している。

Note

Ajaxを用いたサーバとの非同期通信の詳細については Macchinettaオンライン版 開発ガイドライン ( https://macchinetta.github.io/server-guideline/current/ja/の Macchinetta Server Framework (1.x) Development Guideline ) を参照すること。

Warning

本応用方法を用いた場合では、ユーザが文字を入力すると都度サーバへのリクエストが発生するため、通信量については注意する必要がある。

3.13. プログレスバーによる進捗度表示

3.13.1. 概要

プログレスバーとは、処理の進捗状況をユーザに対して視覚的・直感的に表示するために利用するユーザインターフェースの1つである。
ここでは、jQuery UIとBootstrapそれぞれで、プログレスバーを表示する方法を説明する。
progressbar

図: プログレスバーの例

利用ライブラリ サンプル 参考ページ
jQuery UI プログレスバー(jQuery UI) JavaScript - jQuery UI #progressbar
Bootstrap プログレスバー(Bootstrap) JavaScript - Bootstrap #progress

3.13.2. 利用方法(jQuery UI)

jQuery UIのプログレスバーを使用するためには、jQuery UIのスタイルシートを読み込み、div要素を使用しプログレスバーを表示する領域を作成する。
jQuery UI基本構成サンプルで示したHTMLに以下のプログレスバーの領域を追加する。
<!-- (1) -->
<div id="progressbar-area">
  <div id="progressbar">
    <!-- (2) -->
    <div class="progress-label">Loading...</div>
  </div>
</div>
項番 説明
(1)
プログレスバーを表示するための領域を設置する。
(2)
プログレスバーに表示するラベルの領域を設置する。
JavaScriptでは、HTMLで設置したプログレスバーの領域に対して.progressbarを実装し、各種プロパティを設定することでプログレスバーを作成・操作する。
以下にJavaScriptの実装のサンプルを示す。
// progressbar.js

'use strict';

$(function () {
  var progressbar = $('#progressbar');
  var progresslabel = $('.progress-label');
  var progressTimer;

  // (1)
  $('#execute-progressbar').on('click', function () {
    progressTimer = progress();
  });

  // (2)
  $('#reset-progressbar').on('click', function () {
    clearTimeout(progressTimer);
    progressbar.progressbar('value', false);
    progresslabel.text('Loading...');
  });

  // (3)
  progressbar.progressbar({
    value: false, // (A)
    max: 150, // (B)
    change: function () { // (C)
      progresslabel.text(progressbar.progressbar('value') + '/150');
    },
    complete: function () { // (D)
      progresslabel.text('Complete!');
    }
  });

  // (4)
  function progress() {
    var val = progressbar.progressbar('value') || 0;
    progressbar.progressbar('value', val + 1);

    if (val < 150) {
      progressTimer = setTimeout(progress, 50);
    }
  }

});
項番 説明
(1)
処理開始ボタン押下時の挙動を定義する。
(2)
リセットボタン押下時の挙動を定義する。
(3)
プログレスバーの定義を実装する。使用しているオプションは以下の通り。
項番 オプション名 説明
(A) value プロパティの値にfalseを設定することでプログレスバーの初期状態を不定とする。
(B) max プログレスバーの最大値を指定する。省略時は100が設定される。
(C) change プログレスバーのvalueの値が変更された際に実行する処理を定義する。
(D) complete プログレスバーのvalueの値がmaxの値に達した際に実行する処理を定義する。

(4)
プログレスバーのvalueの値を更新するための処理を実装する。
valueの値は(3)で初期状態にfalseを指定しているため、取得した値がfalseの可能性がある。falseの場合は0を設定するよう実装する。
プログレスバーのvalueの値を更新するには.progressbarメソッドの第1引数に’value’（固定）を指定し、第2引数に更新する値を設定する。設定完了後にchangeイベントが実行される。

Note

進捗をパーセンテージで表示したい場合は実装をprogresslabel.text(progressbar.progressbar('value')/150 * 100 '%');のように修正することで可能となる。

3.13.3. 利用方法(Bootstrap)

ここでは、Bootstrapを用いて、10秒で完了になるプログレスバーを表示する方法を説明する。

Bootstrap基本構成サンプルで示したHTMLに、次の内容を追加する。

<!-- (1) -->
<div class="progress">
  <div class="progress-bar" id="progressbar" role="progressbar"></div>
</div>
項番 説明
(1)
プログレスバーを表示するための領域を設置する。領域を構成するクラスは以下の通り。
クラス 備考
progress 必須
progress-bar 必須

プログレスバーの進行度を動的に変更するためには、JavaScriptでprogress-barクラスの要素に対し、スタイルのwidthの値を変更する。

// progressbar.js

'use strict';

$(function () {

  // (1)
  var estimatedRatio = 0;
  var $progressBar = $('#progressbar');
  var progress = setInterval(function () {
    $progressBar.css('width', estimatedRatio + '%');
    if (estimatedRatio >= 100) {
      clearInterval(progress);
    }
    estimatedRatio += 10;
  }, 1000);
});
項番 説明
(1)
プログレスバーのwidthを1秒ごとに10%増やすための実装。

3.14. ドラッグアンドドロップ

3.14.1. 概要

ここでは、jQuery UIを用いて、ドラッグアンドドロップによるイベントを検知する方法と、リストの要素を入れ替える方法を説明する。

利用ライブラリ サンプル 参考ページ
jQuery UI

3.14.2. 利用方法

3.14.2.1. 基本的な使い方

jQuery UI基本構成サンプルで示したHTMLに加え、ドラッグする要素とドラッグ先の要素を追加する。

<!-- (1) -->
<div id="drag1" class="drag">ドラッグする要素A</div>
<div id="drag2" class="drag">ドラッグする要素B</div>
<div id="drag3" class="drag">ドラッグする要素C</div>

<hr>

<!-- (2) -->
<div class="drop">drag and drop it here<br/></div>
項番 説明
(1)
ドラッグする要素を定義する。
(2)
ドラッグ先を設置する。

JavaScript(drag-and-drop.js)では、次の処理を行っている。

// drag-and-drop.js

'use strict';

$(function () {

  // (1)
  $('.drag').draggable({

    // (2)
    cursor: 'move',

    // (3)
    helper: 'clone'
  });

  // (4)
  $('.drop').droppable({
    drop: function (e, ui) {
      var $this = $(this);
      $this
        .append(document.createTextNode(ui.draggable.text() + 'がカートに入れられました。'))
        .append('<br>');
    }
  });
});
項番 説明
(1)
ドラッグする要素に対し、draggableメソッドを実行する。
(2)
マウスカーソルの形状を設定する。
(3)
ドラッグ時の要素の表示設定をする。
(4)
ドラッグ先に対し、droppableメソッドを実行する。

上記のサンプルではdraggableメソッドのプロパティにマウスカーソルの形状を指定するcursorや、ドラッグの際の動作を設定するhelperを使用している。 これらの詳細について知りたい場合は、jQuery UI 公式ウェブサイトのリファレンスを参照すること。

3.14.2.2. リストでのドラッグアンドドロップ

jQuery UI基本構成サンプルで示したHTMLに加え、ドラッグアンドドロップにより入れ替えることのできるリストを追加する。

<!-- (1) -->
<ul class="jquery-ui-sortable">
  <li>項目 1-1</li>
  <li>項目 1-2</li>
  <li>項目 1-3</li>
</ul>

<!-- (1) -->
<ul class="jquery-ui-sortable">
  <li>項目 2-1</li>
  <li>項目 2-2</li>
  <li>項目 2-3</li>
</ul>

<!-- (1) -->
<ul class="jquery-ui-sortable">
  <li>項目 3-1</li>
  <li>項目 3-2</li>
  <li>項目 3-3</li>
</ul>
項番 説明
(1)
リストグループを定義する。

JavaScript(drag-and-drop-sortable.js)では、次の処理を行っている。

// drag-and-drop-sortable.js

'use strict';

$(function () {

  // (1)
  $('.jquery-ui-sortable').sortable({

    // (2)
    connectWith: '.jquery-ui-sortable'
  });
});
項番 説明
(1)
ドラッグアンドドロップするリストの親要素に対し、sortableメソッドを実行する。
(2)
ドラッグアンドドロップをし合うリストグループのセレクタをconnectWithプロパティに設定する。

別のリスト間で相互に入れ替えられるようにする場合は、connectWithプロパティに対象のリストのセレクタを設定する。 他にも様々なプロパティが提供されている。これらの詳細について知りたい場合は、 jQuery UI 公式ウェブサイトのリファレンスを参照すること。

3.15. レスポンシブウェブデザイン

3.15.1. 概要

レスポンシブウェブデザインとは、画面のサイズによってレイアウトを組み替えることである。

ここでは、Bootstrapを用いた実装方法をサイドメニューとコンテンツがレイアウトされたサンプルを例に説明する。

このサンプルではウィンドウの幅が768px以上の幅で表示されている場合にはサイドメニューとコンテンツが1対2の比率で並んで表示され、それ未満だとサイドメニューとコンテンツが上下に並び表示される。

利用ライブラリ サンプル 参考ページ
Bootstrap レスポンシブウェブデザイン CSS - Bootstrap #grid

3.15.2. 利用方法

Bootstrap基本構成サンプルで示したソースコードに、サイドメニュー領域とコンテンツ領域を次のように追加する。

<!-- (1) -->
<div class="side col-sm-4">
  side
  <ul>
    <li><a href="#">menu 1</a></li>
    <li><a href="#">menu 2</a></li>
    <li><a href="#">menu 3</a></li>
  </ul>
</div>

<!-- (2) -->
<div class="contents col-sm-8">
  contents
  <div class="article article1">
    article 1
  </div>
  <div class="article article2">
    article 2
  </div>
  <div class="article article3">
    article 3
  </div>
</div>
項番 説明
(1)
サイドメニュー領域を定義する。
(2)
コンテンツ領域を定義する。

サイドメニュー領域にはcol-sm-4クラスを、コンテンツ領域にはcol-sm-8を指定する。

Bootstrapには、幅を12分割したグリッドに見立ててレイアウトできる機能があり、col-sm-4やcol-sm-8のようなクラスはグリッド4個分または8個分の幅を確保する。数値部は、1から12までの値を指定できる。

これらのクラスは、レイアウト分岐点となる既定幅が定められており。ウィンドウの幅がこれを下回る場合にはcol-sm-4やcol-sm-8は等しく幅100%のブロック要素としてレイアウトされる。つまり、これらのクラスを使用することで自動的にレスポンシブウェブデザインが実現される。

col-sm-のプレフィックス部はレイアウト分岐点となる幅を768pxに設定することを意味し、より広い幅を指定する場合にはcol-md-(992px)や、col-lg-(1200px)が使用できる。

Note

レスポンシブウェブデザインとせず単にグリッドレイアウトを使用したい場合は、col-xs-4のようなcol-xs-プレフィックスのクラスを使用する。

Note

レスポンシブウェブデザインによって表示領域の幅が可変であることにより、特定のウィンドウ幅にした際にコンテンツの文字列が折り返されて表示されてしまうことがある。

これに対し、次の対応方法が考えられる。

  1. メインとなるウィンドウサイズでは文字が折り返されないようレイアウトを調整し、それ以外の画面サイズでは折り返しが生じても無視する
  2. 該当箇所のCSSプロパティtext-overflowにellipsisを指定することで、はみ出した文字を...表示に置き換える
  3. 固定幅、またはmin-widthを指定し、折り返さないようにする

案2はレイアウト崩れは防止できるものの、画面表示される情報量が減るというデメリットがある。案3は、Bootstrapのグリッドレイアウトと共存させることができないため、実装のコストが高くなるというデメリットがある。

詳細について知りたい場合は、 Bootstrap 公式ウェブサイトのリファレンスを参照すること。