jQuery UI Virtual Keyboardプラグイン
jQuery UI Virtual Keyboardプラグインは、仮想キーボードを表示させて入力させるプラグインです。例えば、不特定多数の来場者が想定される展示会場などで、物理的なキーボードには触って欲しくない場合など、マウスのみで操作をさせたりといった使い方が考えられます。下記サイトからMottie-Keyboard-v1.6.2-0-g56d61b1.zipをダウンロードし、解凍後、Mottie-Keyboard-56d61b1フォルダ下のMottie-Keyboard-56d61b1フォルダをpluginsフォルダに配置します。
また、jQuery UIは下記サイトからjquery-ui-1.8.11.custom.zipをダウンロードし、解凍後のjquery-ui-1.8.11.customをScriptsフォルダに配置します。jQuery UIはjQueryの機能を拡張し、マウス操作やアニメーション機能などユーザインタフェースに特化したライブラリです。jQuery UIのダウンロードは第1回を参考にしてください。
今回は、デフォルトの仮想キーボードで、inputタグを使用する場合、text数字入力の仮想キーボードでinputタグ使用する場合について説明します。
リスト5にプラグインの使用例を示します。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery UI Virtual Keyboardサンプル</title>
<!--1.jQueryの読み込み-->
<script type="text/javascript" src="Scripts/jquery-1.5.2.min.js"></script>
<!--2.プラグインの読み込み-->
<script type="text/javascript" src="plugins/Mottie-Keyboard-56d61b1/js/jquery.keyboard.min.js"></script>
<script type="text/javascript" src="Scripts/jquery-ui-1.8.11.custom/js/jquery-ui-1.8.11.custom.min.js"></script>
<!--3.CSSの設定-->
<link rel="stylesheet" href="plugins/Mottie-Keyboard-56d61b1/css/keyboard.css" type="text/css" />
<link type="text/css" href="Scripts/jquery-ui-1.8.11.custom/css/ui-lightness/jquery-ui-1.8.11.custom.css" rel="stylesheet" />
<style type="text/css">
html{
font-size: 14px;
}
body {
font-family: helvetica, arial;
margin: 0px;
padding: 0px;
font-size: 14px;
}
.container {
margin: 0 auto;
width: 800px;
border-left: 15px solid #AA4488;
padding-left: 25px;
}
h2 {
margin-top: 60px;
}
</style>
<!--4.プラグインの設定-->
<script type="text/javascript">
$(function () {
//1.テキスト入力の例
$('.qwerty').keyboard({ layout: 'qwerty' });
//2.数字入力の例
$('#num').keyboard({
layout: 'num',
maxLength: 6,
restrictInput: true,
preventPaste: true
});
});
</script>
</head>
<body>
<div class="container">
<h1>jQuery UI Virtual Keyboardサンプル</h1>
<div class="block">
<h2>input class="qwerty" type="text"の場合</h2>
<input class="qwerty" type="text"/>
</div>
<div class="block">
<h2>input class="qwerty" type="password"の場合</h2>
<input class="qwerty" type="password"/>
</div>
<div class="block">
<h2>textarea class="qwerty"の場合</h2>
<textarea class="qwerty" rows="2" cols="20"></textarea>
</div>
<div class="block">
<h2>input id="num" type="text"の場合</h2>
<input id="num" type="text" />
</div>
</div>
</body>
</html>
今回は、表示領域を「3.CSSの設定」で、keyboard.cssとjquery-ui-1.8.11.custom.cssを読み込み、他にbody、container、h2について指定しました。こちらは、必要に応じて書き換えてください。
プラグインの使い方は、「4.プラグインの設定」のように、keyboardメソッドを使用します。通常の仮想キーボードを表示させたい場合はinputタグでclassをqwertyに指定し、数字入力のキーボードを表示させたい場合はinputタグでidをnumと指定します。
keyboardメソッドのオプションを表2に示します。
| オプション | 説明 |
| layout | 仮想キーボードのレイアウトを指定する。qwerty/num |
| maxLength | 入力文字数を指定する。 |
| restrictInput | キーボードに表示している文字のみ入力を許可する。true/false デフォルト：false |
| preeventPaste | コピーアンドペーストを許可しない。true/false デフォルト:false |
プラグイン適用後を図9～12に示します。
入力部分にカーソルをあて、クリックすると、図9のような仮想キーボードが表示されます。
入力後の結果を図10に示します。
また、layoutをnum指定すると、図11のように数字入力キーボードが表示されます。
入力後の結果を図12に示します。
まとめ
第7回では、ちょっとしたUI効果をプラスするjQuery Pluginとして、文章の折りたたみ機能、星形の評価機能の表示、仮想キーボードから入力させるプラグインを紹介しました。次回はハイライト、マウスオーバーでの変化などエフェクトをテーマにしたjQuery Pluginを取り上げる予定です。
