UjiieTwitterFacebookはてブPocketLINEはじめに「InputManJS(インプットマンJS)」はグレープシティが提供しているJavaScriptライブラリです。コンボなど用途別に最適化された入力UIコンポーネントを提供しています。InputManJSの特長InputManJSは以下の特長を持っています。あらゆる入力シーンを想定して設計され、和暦、漢数字、ふりがな取得、日本語の入力制御など日本固有の入力機能を提供。矢印キーやEnterキーでコントロール間のフォーカスを移動したり、入力完了時に次のコントロールへ自動的にフォーカス遷移する機能を搭載。ツールチップやアイコンなどで通知。タッチ対応タッチキーボードでの入力、タッチ操作によるスピン、ドロップダウン、スクロール、文字選択、コンテキストメニューに対応。JavaScriptフレームワーク(Angular/React/Vue.js)に対応。入力ミスが少なく生産性の高い入力フォームを構築できる日本仕様の入力用UIコントロールのセット、それが「InputManJS」です。デモの紹介InputManJSが提供する入力コントロールの機能については公開しているデモでご確認いただけます。コントロール一覧InputManJSに収録されている全てのコントロールを確認できるデモです。ユースケースお問い合わせフォームなど業務システムでの使用例を確認できるデモです。Monacaで使ってみるではさっそくInputManJSをMonacaで使ってみます。IDEから新しいプロジェクトを作成します。テンプレートは[最小限のテンプレート]を選択します。InputManJSのファイルを追加ダウンロードページより、「InputManJS」のトライアル版を入手してください。フォルダを作成して、下記のファイルをアップロードします。(scriptsフォルダ内)InputManJSのファイルをアップロードせずにCDNから取得する場合は、index.htmlのheadセクションに以下のコードを追加します。type="text/javascript"></script>InputManJSはnpmでのインストールにも対応しています。installを実行してインストールすることもできます。HTMLを編集index.htmlのheadセクションにInputManJSの参照コードを追加します。上述のCDNから取得した場合は、このコードは不要です。src="vendors/inputmanjs/gc.inputman-js.ja.js"></script>index.htmlのbodyセクションに、InputManJSのコントロールを表示するためのタグとscriptタグを追加します。カレンダーはdiv、複数行テキストはtextarea、コンボとリストはselect、それ以外のコントロールはinputタグを使用します。id="gcListBox"></select><script></script>scriptタグ内にJavaScriptコードを記述します。]);編集したindex.htmlを保存します。この時点ではライセンスキーを設定していないのでプレビューに警告ダイアログが表示されます。現時点ではInputManJSはクラウド開発環境に対応していないため、ライセンスキーを設定した場合でも上記と同じように警告が表示されます。CLIを使ったローカル開発、Monacaデバッガーを使用したデバッグにおいては、ライセンスキーを設定していれば警告は表示されません。コントロールのカスタマイズInputManJSのコントロールは用途にあわせて色々なカスタマイズができます。ここでは一例としてテキストコントロールのカスタマイズを紹介します。テキストコントロールでは、入力できる文字の種類をsetFormatメソッドで設定できます。設定した種類以外の文字は入力できなくなります。入力可能な文字数はsetMaxLengthメソッドで設定できます。12gcTextBox.setMaxLength(6);テキストコントロールはsetFormatメソッドで設定した文字種へ自動変換する「オートコンバート」機能を備えており、setAutoConvertメソッドでこの機能の有効/無効を設定できます。デフォルトでtrueに設定されているのでこのメソッドの記述がなくても自動変換されます。このようにInputManJSでは複雑なコードを必要とせず、直感的に使えるシンプルなメソッドで入力フォームの要件にあわせて簡単にカスタマイズすることができます。まとめ本記事では、グレープシティのJavaScriptライブラリ「InputManJS」を紹介しました。きめ細かく行き届いた入力フォームが求められるWeb/モバイルアプリケーションを構築するケースなどで活用いただけるシーンがあるかと思います。そんな時に是非お試しください。Ujiieグレープシティでプロダクトマーケティングマネージャーしてます。