はじめに
「InputManJS（インプットマンJS）」はグレープシティが提供しているJavaScriptライブラリです。エンタープライズ向けのWeb／モバイルアプリケーション開発で利用できるテキスト、マスク、日付時刻、数値、コンボなど用途別に最適化された入力UIコンポーネントを提供しています。
InputManJSの特長
InputManJSは以下の特長を持っています。
- さまざまな入力に対応
テキストやマスク、日付時刻、数値、コンボといった入力コントロールと、和暦や祝日表示に対応したカレンダー、複数列や画像も表示できるリストを提供。 - 日本仕様
日本市場のあらゆる入力シーンを想定して設計され、和暦、漢数字、ふりがな取得、日本語の入力制御など日本固有の入力機能を提供。 - 快適な入力操作
矢印キーやEnterキーでコントロール間のフォーカスを移動したり、入力完了時に次のコントロールへ自動的にフォーカス遷移する機能を搭載。 - 入力検証とエラー通知
空欄チェックや入力値の範囲チェックといった検証ルールや入力中やフォーカス移動時といった検証のタイミングを設定可能。検証結果をツールチップやアイコンなどで通知。 - タッチ対応
タッチキーボードでの入力、タッチ操作によるスピン、ドロップダウン、スクロール、文字選択、コンテキストメニューに対応。 - JavaScriptフレームワーク（Angular／React／Vue.js）に対応。
入力ミスが少なく生産性の高い入力フォームを構築できる日本仕様の入力用UIコントロールのセット、それが「InputManJS」です。
デモの紹介
InputManJSが提供する入力コントロールの機能については公開しているデモでご確認いただけます。
コントロール一覧
InputManJSに収録されている全てのコントロールを確認できるデモです。
ユースケース
お問い合わせフォームなど業務システムでの使用例を確認できるデモです。
Monacaで使ってみる
ではさっそくInputManJSをMonacaで使ってみます。
プロジェクトの作成
Monaca Cloud IDEから新しいプロジェクトを作成します。テンプレートは［最小限のテンプレート］を選択します。
InputManJSのファイルを追加
ダウンロードページより、「InputManJS」のトライアル版を入手してください。
Monaca Cloud IDEで www/vendors/inputmanjs フォルダを作成して、下記のファイルをアップロードします。
- gc.inputman-js.css (cssフォルダ内)
- gc.inputman-js.ja.js (scriptsフォルダ内)
InputManJSのファイルをアップロードせずにCDNから取得する場合は、index.htmlのheadセクションに以下のコードを追加します。
<link rel="stylesheet" type="text/css" href="https://cdn.grapecity.com/inputmanjs/hosted/css/gc.inputman-js.css">
<script src="https://cdn.grapecity.com/inputmanjs/hosted/scripts/gc.inputman-js.ja.js" type="text/javascript"></script>
HTMLを編集
index.htmlのheadセクションにInputManJSの参照コードを追加します。上述のCDNから取得した場合は、このコードは不要です。
<link rel="stylesheet" href="vendors/inputmanjs/gc.inputman-js.css" />
<script src="vendors/inputmanjs/gc.inputman-js.ja.js"></script>
index.htmlのbodyセクションに、InputManJSのコントロールを表示するためのタグとscriptタグを追加します。カレンダーはdiv、複数行テキストはtextarea、コンボとリストはselect、それ以外のコントロールはinputタグを使用します。
テキストコントロール<br>
<input id="gcTextBox"><br><br>
複数行テキストコントロール<br>
<textarea id="gcMultiLineTextBox"></textarea><br><br>
マスクコントロール<br>
<input id="gcMask"><br><br>
日付時刻コントロール<br>
<input id="gcDateTime"><br><br>
数値コントロール<br>
<input id="gcNumber"><br><br>
カレンダーコントロール<br>
<div id="gcCalendar"></div><br><br>
コンボコントロール<br>
<select id="gcComboBox"></select><br><br>
リストコントロール<br>
<select id="gcListBox"></select>
<script>
</script>
scriptタグ内にJavaScriptコードを記述します。
// テキストコントロール
var gcTextBox = new GC.InputMan.GcTextBox(document.getElementById('gcTextBox'));
// 複数行テキストコントロール
var gcMultiLineTextBox = new GC.InputMan.GcMultiLineTextBox(document.getElementById('gcMultiLineTextBox'));
// マスクコントロール
var gcMask = new GC.InputMan.GcMask(document.getElementById('gcMask'), {
formatPattern: '〒\\D{3}-\\D{4}'
});
// 日付時刻コントロール
var gcDateTime = new GC.InputMan.GcDateTime(document.getElementById('gcDateTime'));
// 数値コントロール
var gcNumber = new GC.InputMan.GcNumber(document.getElementById('gcNumber'));
// カレンダーコントロール
var gcCalendar = new GC.InputMan.GcCalendar(document.getElementById('gcCalendar'));
// コンボコントロール
var gcComboBox = new GC.InputMan.GcComboBox(document.getElementById('gcComboBox'))
gcComboBox.setItems([ '項目1', '項目2', '項目3', '項目4', '項目5' ]);
// リストコントロール
var gcListBox = new GC.InputMan.GcListBox(document.getElementById('gcListBox'));
gcListBox.setItems([ '項目1', '項目2', '項目3', '項目4', '項目5' ]);
編集したindex.htmlを保存します。この時点ではライセンスキーを設定していないのでプレビューに警告ダイアログが表示されます。
コントロールのカスタマイズ
InputManJSのコントロールは用途にあわせて色々なカスタマイズができます。ここでは一例としてテキストコントロールのカスタマイズを紹介します。
テキストコントロールでは、入力できる文字の種類をsetFormatメソッドで設定できます。設定した種類以外の文字は入力できなくなります。
gcTextBox.setFormat('Ｊ'); // ひらがな（促音・拗音の小書き表記あり）
gcTextBox.setFormat('Ｋ'); // 全角カタカナ（促音・拗音の小書き表記あり）
gcTextBox.setFormat('Ｚ'); // 空白文字以外のすべての全角文字
入力可能な文字数はsetMaxLengthメソッドで設定できます。
gcTextBox.setMaxLength(6);
テキストコントロールはsetFormatメソッドで設定した文字種へ自動変換する「オートコンバート」機能を備えており、setAutoConvertメソッドでこの機能の有効／無効を設定できます。デフォルトでtrueに設定されているのでこのメソッドの記述がなくても自動変換されます。
このようにInputManJSでは複雑なコードを必要とせず、直感的に使えるシンプルなメソッドで入力フォームの要件にあわせて簡単にカスタマイズすることができます。
まとめ
本記事では、グレープシティのJavaScriptライブラリ「InputManJS」を紹介しました。きめ細かく行き届いた入力フォームが求められるWeb／モバイルアプリケーションを構築するケースなどで活用いただけるシーンがあるかと思います。そんな時に是非お試しください。