はじめに

　InputManJS（インプットマンJS）は、グレープシティのJavaScriptコントロールで、Webフォームの入力用UI部品を提供します。2018年1月に発表、同2月に発売されました。

• InputManJS

　InputManJSでは、表1のコントロールが利用できます。

　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）
（略：以下、日付時刻／数値／カレンダーの各コントロールも同様に設定）