はじめに
InputManJS（インプットマンJS）は、グレープシティのJavaScriptコントロールで、Webフォームの入力用UI部品を提供します。2018年1月に発表、同2月に発売されました。
InputManJSでは、表1のコントロールが利用できます。
| UI部品 | 説明 |
|---|---|
| テキストコントロール | 書式指定などの機能を持つテキストボックスコントロール |
| マスクコントロール | 定型書式を正規表現で指定できるコントロール |
| 日付時刻コントロール | 日時入力に特化したコントロール |
| 数値コントロール | 数値入力に特化したコントロール |
| カレンダーコントロール | 年月日を指定できるカレンダーコントロール |
InputManJSには、以下の特徴があります。
高速、軽量、シンプル
InputManJSの構成ファイルは600KB程度と軽量で、高速に動作します。動作に必要なファイルはCSSとJavaScriptが1ファイルずつだけです。
多彩な環境対応
HTML5対応のほとんどのブラウザーで動作します。タッチ入力対応のPCでは、コントロールを長押しして表示されるタッチツールバーで、コピーや貼り付けなどができます。
日本独自文化に対応
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のコントロールを表示させてみます。
まず、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）
（略：以下、日付時刻／数値／カレンダーの各コントロールも同様に設定）
