はじめに

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タグを使用します。

scriptタグ内にJavaScriptコードを記述します。

編集したindex.htmlを保存します。この時点ではライセンスキーを設定していないのでプレビューに警告ダイアログが表示されます。

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

コントロールのカスタマイズ

InputManJSのコントロールは用途にあわせて色々なカスタマイズができます。ここでは一例としてテキストコントロールのカスタマイズを紹介します。

テキストコントロールでは、入力できる文字の種類をsetFormatメソッドで設定できます。設定した種類以外の文字は入力できなくなります。

入力可能な文字数はsetMaxLengthメソッドで設定できます。

テキストコントロールはsetFormatメソッドで設定した文字種へ自動変換する「オートコンバート」機能を備えており、setAutoConvertメソッドでこの機能の有効/無効を設定できます。デフォルトでtrueに設定されているのでこのメソッドの記述がなくても自動変換されます。

このようにInputManJSでは複雑なコードを必要とせず、直感的に使えるシンプルなメソッドで入力フォームの要件にあわせて簡単にカスタマイズすることができます。

まとめ

本記事では、グレープシティのJavaScriptライブラリ「InputManJS」を紹介しました。きめ細かく行き届いた入力フォームが求められるWeb/モバイルアプリケーションを構築するケースなどで活用いただけるシーンがあるかと思います。そんな時に是非お試しください。

InputManJSのページ
グレープシティのブログ「GrapeCity.devlog」
グレープシティのWebサイト