Webページのフォームをより便利に！ 軽量で多機能なJavaScript入力コントロール「InputManJS」の紹介

　グレープシティの「InputManJS（インプットマンJS）」は、Webページの入力フォームで利用できる入力用JavaScriptコントロールセットです。InputManJSの機能を利用すると、Webページの入力フォームをより使いやすくできます。本記事ではInputManJSの利用法を紹介していきます。

はじめに

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

• InputManJS

図1　InputManJS公式ページ

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

表1　InputManJSのコントロール

UI部品	説明
テキストコントロール	書式指定などの機能を持つテキストボックスコントロール
マスクコントロール	定型書式を正規表現で指定できるコントロール
日付時刻コントロール	日時入力に特化したコントロール
数値コントロール	数値入力に特化したコントロール
カレンダーコントロール	年月日を指定できるカレンダーコントロール

　InputManJSには、以下の特徴があります。

高速、軽量、シンプル

　InputManJSの構成ファイルは600KB程度と軽量で、高速に動作します。動作に必要なファイルはCSSとJavaScriptが1ファイルずつだけです。

多彩な環境対応

　HTML5対応のほとんどのブラウザーで動作します。タッチ入力対応のPCでは、コントロールを長押しして表示されるタッチツールバーで、コピーや貼り付けなどができます。

図2　タッチでさまざまな操作ができるタッチツールバー

日本独自文化に対応

　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）

　まず、InputManJSのCSSファイル（gc.inputman-js.1.0.css）とJavaScriptファイル（gc.inputman-js.ja.1.0.js）を、ダウンロードしたトライアル版のアーカイブファイルから展開して、リスト1のようにindex.htmlのhead要素で参照します。

リスト1　InputManJSのファイルを参照する記述（P001-basic/index.html）

<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>タグで、テキストコントロールを複数行にできます。

リスト2　コントロールを表示するHTML要素の記述（P001-basic/index.html）

<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）はマスクコントロールに郵便番号のマスクを設定する処理です（詳細は後述します）。

リスト3　コントロールを表示するJavaScript処理（P001-basic/main.js）

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