使いやすい入力フォームを実現する「InputManJS（インプットマンJS）」をMonacaで使ってみる

はじめに

「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セクションに以下のコードを追加します。

InputManJSはnpmでのインストールにも対応しています。Proプラン以上ではMonaca Cloud IDEからターミナルでnpm installを実行してインストールすることもできます。

HTMLを編集

index.htmlのheadセクションにInputManJSの参照コードを追加します。上述のCDNから取得した場合は、このコードは不要です。

index.htmlのbodyセクションに、InputManJSのコントロールを表示するためのタグとscriptタグを追加します。カレンダーはdiv、複数行テキストはtextarea、コンボとリストはselect、それ以外のコントロールはinputタグを使用します。

テキストコントロール<br>

複数行テキストコントロール<br>

マスクコントロール<br>

日付時刻コントロール<br>

数値コントロール<br>

カレンダーコントロール<br>

コンボコントロール<br>

リストコントロール<br>

</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はクラウド開発環境に対応していないため、ライセンスキーを設定した場合でも上記と同じように警告が表示されます。LocalKit／Monaca CLIを使ったローカル開発、Monacaデバッガーを使用したデバッグにおいては、ライセンスキーを設定していれば警告は表示されません。