JavaScript入力コントロール「InputManJS」がアップデート！ 新機能で入力フォームを最適化しよう

　グレープシティの「InputManJS（インプットマンJS）」は、Web入力フォーム用JavaScriptコントロールセットです。本記事では、2018年10月にアップデートされて「V2J」になったInputManJS V2Jの新機能を紹介します。

はじめに

　InputManJS（インプットマンJS）は、Webフォーム用のコントロールを提供するグレープシティのJavaScriptコントロールセットです。過去記事でInputManJSの利用法を紹介しましたが、その後2018年10月に「V2J」にアップデートされ、表1の機能強化が行われました。

表1　InputManJS V2Jの主な機能強化

概要	詳細
新コントロール	コンボコントロール、リストコントロール、検証コントロールなど
コントロールの機能強化	改行キーによるフォーカス制御、日付時刻コントロールの「日付時刻ピッカー」など
カスタマイズ機能	テーマのサポート、InputManJSデザイナなど
対応環境の拡大	npmサポートなど

　Webページの入力フォームでは、ユーザーの使い勝手を高めて途中離脱を防ぐ「入力フォーム最適化」（EFO = Entry Form Optimization）の重要性が高まっています。本記事では、入力フォーム最適化に役立つInputManJS V2Jの新機能について、活用法を紹介します。

対象読者

• Webページの入力用UI部品を探している方
• InputManJSの前バージョンで機能不足を感じていた方
• 入力フォーム最適化（EFO）が求められているWeb担当者の方

必要な環境

　InputManJSの動作環境は、公式ページで「Internet Explorer 11、Microsoft Edge、Chrome、Safari 5.1以上、Firefox、iOS（Safari、Chrome）」が案内されています。

　今回は以下の環境で動作を確認しています。

• Windows 10 64bit版
  • Microsoft Edge 42.17134.1.0

　本記事では、公式ページからダウンロードできるInputManJSのトライアル版を利用します。サンプルコードのjsフォルダーとcssフォルダーに、ダウンロードしたInputManJSのJavaScriptやCSSファイルを配置後、index.htmlをWebブラウザーで開いてください。なお、正式版を利用するために必要なライセンス設定の詳細は、公式ページで案内されています。

InputManJSの基本的な利用法

　まず、InputManJSの基本的な利用法を説明します。詳細は前回記事や、公式ページのクイックスタートも参考にしてください。なお、本記事のサンプルコードにクイックスタートの実装（p001-basic）を含めています。

　HTMLファイルでInputManJSのJavaScriptとCSSを参照して、コントロールに対応するHTML要素を記述します。JavaScriptでは、リスト1の通り、HTML要素を引数に指定してInputManJSのコンストラクターを実行します。なお、V2Jでは、コンストラクターの第2引数でプロパティを初期設定できるようになりました。

リスト1　InputManJSコントロールの初期化処理（p001-basic/main.js）

var gcMask
  = new GC.InputMan.GcMask(document.getElementById('gcMask'), {
    formatPattern: '〒\\D{3}-\\D{4}' // コンストラクターでマスクを設定
  });

V2Jの新機能で入力フォームをパワーアップ

　入力フォーム最適化を行う題材として、前回記事で紹介したホテル予約フォームのサンプルを利用します。

図1　ホテルの予約フォームサンプル（p002-reservation）

　この予約フォームを、V2Jの新機能「検証コントロール」「コンボコントロール」「フォーカス制御機能」で改良します。各機能について説明後、改良例を紹介します。