はじめに
InputManJS(インプットマンJS)は、グレープシティのJavaScriptコントロールで、Webフォームの入力用UI部品を提供します。2018年1月に発表、同2月に発売されました。
![図1 InputManJS公式ページ](http://cz-cdn.shoeisha.jp/static/images/article/10969/10969_001.png)
InputManJSでは、表1のコントロールが利用できます。
UI部品 | 説明 |
---|---|
テキストコントロール | 書式指定などの機能を持つテキストボックスコントロール |
マスクコントロール | 定型書式を正規表現で指定できるコントロール |
日付時刻コントロール | 日時入力に特化したコントロール |
数値コントロール | 数値入力に特化したコントロール |
カレンダーコントロール | 年月日を指定できるカレンダーコントロール |
InputManJSには、以下の特徴があります。
高速、軽量、シンプル
InputManJSの構成ファイルは600KB程度と軽量で、高速に動作します。動作に必要なファイルはCSSとJavaScriptが1ファイルずつだけです。
多彩な環境対応
HTML5対応のほとんどのブラウザーで動作します。タッチ入力対応のPCでは、コントロールを長押しして表示されるタッチツールバーで、コピーや貼り付けなどができます。
![図2 タッチでさまざまな操作ができるタッチツールバー](http://cz-cdn.shoeisha.jp/static/images/article/10969/10969_002.png)
日本独自文化に対応
InputManJSは日本生まれで、漢数字や和暦といった日本独自の文化に対応します。2019年5月1日からの新元号にも対応できます。
単体でも、他フレームワークと組み合わせても利用可能
単体での利用のほか、AngularJS/Angular、React、Vue.jsといったJavaScriptフレームワークや、TypeScriptでの開発に対応します。
本記事では、InputManJSの利用方法を、サンプルを交えて説明していきます。
対象読者
- Webページの入力用UI部品を探している方
- Webページの入力画面を作りこむのが面倒な方
- Webページの新元号対応が求められている方
必要な環境
InputManJSの動作環境は、公式ページで「Internet Explorer 11、Microsoft Edge、Chrome、Safari 5.1以上、Firefox、iOS(Safari、Chrome)」が案内されています(Androidは非対応です)。タッチツールバーは、タッチ機能対応PCで動作します(タッチツールバーはiOS非対応です)。
今回は以下の環境で動作を確認しています。
- Windows 10 64bit版
- Microsoft Edge 42.17134.1.0
本記事では、公式ページからダウンロードできるトライアル版を利用します。正式版を利用するにはライセンスの設定が必要です。ライセンスの詳細は公式ページを参照してください。
まず表示させてみる
最初に、InputManJSのクイックスタートを参考にして、InputManJSのコントロールを表示させてみます。
![図3 InputManJSのコントロール(P001-basic)](http://cz-cdn.shoeisha.jp/static/images/article/10969/10969_003.png)
まず、InputManJSのCSSファイル(gc.inputman-js.1.0.css)とJavaScriptファイル(gc.inputman-js.ja.1.0.js)を、ダウンロードしたトライアル版のアーカイブファイルから展開して、リスト1のようにindex.htmlのhead要素で参照します。
<link rel="stylesheet" type="text/css" href="css/gc.inputman-js.1.0.css"/> <script src="js/gc.inputman-js.ja.1.0.js"></script>
body要素には、リスト2のようにInputManJSのコントロールを表示するHTML要素を記述します。カレンダーコントロールは<div>、それ以外は<input>タグを用います。また<textarea>タグで、テキストコントロールを複数行にできます。
<div>テキストコントロール</div> <input id="gcTextBox1"> <div>複数行テキストコントロール</div> <textarea id="gcTextBox2"></textarea> <div>マスクコントロール</div> <input id="gcMask"> <div>日付時刻コントロール</div> <input id="gcDateTime"> <div>数値コントロール</div> <input id="gcNumber"> <div>カレンダーコントロール</div> <div id="gcCalendar"></div>
JavaScriptでは、InputManJSのコントロールを設定するメソッド(テキストコントロールならばGC.InputMan.GcTextBoxメソッド)を実行します。(1)はマスクコントロールに郵便番号のマスクを設定する処理です(詳細は後述します)。
// テキストコントロール var gcTextBox1 = new GC.InputMan.GcTextBox(document.getElementById('gcTextBox1')); // マスクコントロール var gcMask = new GC.InputMan.GcMask(document.getElementById('gcMask')); gcMask.setFormatPattern('〒\\D{3}-\\D{4}'); // マスクを設定 ...(1) (略:以下、日付時刻/数値/カレンダーの各コントロールも同様に設定)