Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

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

  • LINEで送る
  • このエントリーをはてなブックマークに追加

 グレープシティの「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)
図1 ホテルの予約フォームサンプル(p002-reservation)

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

入力内容の検証結果を通知する検証コントロール

 検証コントロールは、入力内容の検証結果を通知するコントロールです。検証コントロールを利用して、入力エラーの理由を利用者へ明確に提示できます。

検証コントロールの基本的な実装

 図2は、未入力時にツールチップでエラー表示する基本的な検証コントロールの例です。

図2 検証コントロールの表示例(p003-validation)
図2 検証コントロールの表示例(p003-validation)

 図2の検証コントロールを設定するには、リスト2の通り、GC.InputMan.GcValidatorのコンストラクターを実行します。コンストラクターの引数に設定内容を指定します。

リスト2 検証コントロールの設定(p003-validation/main.js)
var validator1 = new GC.InputMan.GcValidator({
  items: [ // 検証コントロールの設定 ...(1)
    {
      control: gcTextBox1, // 検証対象のコントロール ...(2)
      ruleSet: [
        {
          rule: GC.InputMan.ValidateType.Required // 検証規則 ...(3)
        }
      ],
      validateWhen: GC.InputMan.ValidateWhen.LostFocus, // 検証方法 ...(4)
      notify: {
        tip: true // 通知方法...(5)
      }
    }
  ]
//, defaultNotify: { // 共通の通知方法を設定する場合に記述 ...(6)
//  tip: true
//}
});

 (1)のitemsは、検証コントロールの設定を格納する配列です。配列内に複数の設定を記述できます。

 検証対象のコントロールを、(2)のcontrolに設定します。検証規則はruleSet配列に複数指定でき、ここでは(3)でRequired(必須入力)を設定しています。InputManJSでは、ほかにOutOfRange(範囲指定)の検証規則が利用できます。OutOfRangeの実装例はサンプルコードを参照してください。独自の検証規則を設定する方法は後述します。

 (4)のvalidateWhenは検証方法の指定で、表2の値が指定できます。LostFocusやTyping以外の任意タイミングで検証するには、検証方法にManualを指定後、GcValidatorオブジェクトのvalidateメソッドで検証を実行します(実装例はサンプルコードを参照)。

表2 検証方法の設定値と設定内容
設定値 設定内容
LostFocus コントロールからフォーカスが外れたときに検証
Manual 手動で検証(validateメソッド実行時)
Typing 入力中リアルタイムで検証

 (5)のnotifyは通知方法の指定で、ここではtips(ツールチップ)が表示されるように設定します。notifyの代わりに、(6)のdefaultNotifyで、itemsに指定された複数の設定に、デフォルトの通知方法をまとめて設定することもできます。

独自検証規則の設定

 検証コントロールでは、独自の検証規則を設定できます。図3のサンプルでは、入力値が偶数であることを検証します。

図3 入力値が偶数であることを検証する例(p003-validation)
図3 入力値が偶数であることを検証する例(p003-validation)

 独自検証規則の設定は、リスト3の通り、ruleに設定する検証関数で行います。検証関数の引数controlでコントロールを受け取って、getValueメソッドで入力値が取得できます。検証結果はtrue/falseで返却します。

リスト3 入力値が偶数である検証の設定(p003-validation/main.js)
rule: function (control) {
  // 偶数ならOK、それ以外ならエラーにする
  return (control.getValue() % 2 == 0);
}

検証結果の通知方法をカスタマイズ

 検証結果の通知方法はさまざまにカスタマイズできます。図4のサンプルで説明します。

図4 検証結果通知方法のカスタマイズ例(p003-validation)
図4 検証結果通知方法のカスタマイズ例(p003-validation)

 検証成功/失敗時のメッセージ文言は、リスト4の通り、ruleSet内のsuccessMessage、failMessageで設定できます。

リスト4 メッセージ文言の設定(p003-validation/main.js)
ruleSet: [
  {
    rule: GC.InputMan.ValidateType.Required,
    successMessage: 'OKです。',
    failMessage: '入力必須です。'
  }
],

 検証成功/失敗時の表示内容は、notifyかdefaultNotifyに、リスト5の通り設定します。リスト2(5)のようにfailやsuccessを明示しないと、検証失敗時の設定になります。

リスト5 検証成功/失敗時の表示内容設定(p003-validation/main.js)
notify: {
  fail: { // 検証失敗時の設定
(通知の形式設定)
  },
  success: {  // 検証成功時の設定
(通知の形式設定)
  }
}

 通知の形式設定には、表3の内容が設定できます。詳細はサンプルコードや公式ドキュメントを参照してください。

表3 通知の形式設定に設定できる内容
設定項目 設定内容
tip ツールチップの表示有無(trueでデフォルト表示)、表示位置や形式
icon アイコンの表示位置(コントロールの中か外か)、アイコン画像
controlState trueにすると文字や枠線の色が検証結果に連動

 図4に示した、検証成功時の通知設定はリスト6の通りです。ツールチップが表示され、アイコンはコントロールの内側に表示、文字や枠線の色が緑色になります。

リスト6 検証成功時の通知設定(p003-validation/main.js)
success: {  // 検証成功時の設定
  tip: true,  // ツールチップを表示する
  icon: { // アイコンをコントロールの内側に表示
    direction: GC.InputMan.IconDirection.Inside
  },
  controlState: true // 文字や枠線の色を連動させる
}

多機能なコンボボックスを提供するコンボコントロール

 コンボコントロールは、HTMLのselectタグにはない機能を備えたコンボボックスで、図5のように表示されます。

図5 コンボコントロール(p004-combo)
図5 コンボコントロール(p004-combo)

コンボコントロールの基本的な実装

 図5に対応する実装(リスト7)で、コンボコントロールの基本的な実装方法を説明します。selectタグのHTML要素を引数にして、GC.InputMan.GcComboBoxのコンストラクターを実行します。コンストラクターの第2引数で、表示するデータ配列をitemsに設定します。

リスト7 コンボコントロールの基本的な実装(p004-combo/main.js)
var gcComboBox1
  = new GC.InputMan.GcComboBox(document.getElementById('gcComboBox1'), {
    items: products1 // コンストラクターでデータを設定
  });

 itemsに設定するデータ配列が複数のデータ項目を持っている場合、リスト8の通り、displayMemberPathに画面表示する項目、valueMemberPathに選択値の項目を指定します。

リスト8 画面表示と選択肢のデータ項目を設定する例(p004-combo/main.js)
var products2 = [
  { 'serial': '1', 'vendor': 'Apple', 'name': 'iPhone XS' },
(略)
];
var gcComboBox2
  = new GC.InputMan.GcComboBox(document.getElementById('gcComboBox2'), {
    items: products2,
    displayMemberPath: 'name',  // 選択肢の画面表示にするデータ項目
    valueMemberPath: 'serial'   // 選択値にするデータ項目
  });

スピンボタンとドロップダウンボタンの表示

 コンボコントロールには、標準のドロップダウンボタン(▼ボタン)のほかに、選択肢を順番に切り替えるスピンボタン(上下の▲、▼ボタン)を表示できます。図6のサンプルでは、ドロップダウンボタンを左側に、スピンボタンを右側に表示しています。

図6 スピンボタンとドロップダウンボタンの表示例(p004-combo)
図6 スピンボタンとドロップダウンボタンの表示例(p004-combo)

 図6に対応する実装はリスト9の通りです。

リスト9 スピンボタンとドロップダウンボタンの設定(p004-combo/main.js)
var gcComboBox3
  = new GC.InputMan.GcComboBox(document.getElementById('gcComboBox3'), {
(略)
    showSpinButton: true, // スピンボタンの表示指定 ...(1)
    showDropDownButton: true, // ドロップダウンボタンの表示指定 ...(2)
    spinButtonPosition: // スピンボタンの表示位置 ...(3)
      GC.InputMan.SpinButtonAlignment.RightSide,
    dropDownButtonPosition:  // ドロップダウンボタンの表示位置 ...(4)
      GC.InputMan.DropDownButtonAlignment.LeftSide
  });

 (1)と(2)がスピンボタンとドロップダウンボタンの表示設定(いずれもtrue=表示する)、(3)と(4)が表示位置の設定です。

複数選択と省略表示

 コンボコントロールでは、選択肢の複数選択が有効にできます。選択個数が増えて表示がコントロールからはみ出す場合は省略表示できます。

図7 複数選択と省略表示の例(p004-combo)
図7 複数選択と省略表示の例(p004-combo)

 図7に対応する実装はリスト10の通りです。

リスト10 複数選択と省略表示の設定(p004-combo/main.js)
var gcComboBox4
  = new GC.InputMan.GcComboBox(document.getElementById('gcComboBox4'), {
(略)
    isMultiSelect: true, // 複数選択 ...(1)
    ellipsis: GC.InputMan.EllipsisMode.EllipsisEnd, // 省略設定 ...(2)
    ellipsisString: '~' // 省略時に付加する文字列 ...(3)
  });

 (1)が複数選択を有効にする設定です。(2)は省略設定で、EllipsisEnd(文末を省略)のほか、EllipsisPath(中央を省略)、None(省略なし)が設定できます。既定の省略文字は3点リーダー(...)ですが、(3)のellipsisStringで変更できます。

改行キーでのフォーカス制御

 従来の最大文字数到達時や左右キー押下時のフォーカス移動に加えて、V2Jでは新たに改行キー(Enter、Shift+Enter)押下時のフォーカス移動をサポートしました。

図8 改行キーでフォーカス移動する例(p005-focus)
図8 改行キーでフォーカス移動する例(p005-focus)

 図8のサンプルでは、各コントロールにexitOnEnterKeyを設定しています。

リスト11 改行キーでのフォーカス制御設定(p005-focus/main.js)
var gcTextBox1
  = new GC.InputMan.GcTextBox(document.getElementById('gcTextBox1'), {
    exitOnEnterKey: GC.InputMan.ExitKey.Both // 改行キーによるフォーカス移動
  });

 exitOnEnterKeyには、改行キーによるフォーカス移動の内容を表す、表4の値を設定します。

表4 改行キーによるフォーカス移動の設定値と設定内容
設定値 設定内容
None 改行キーによるフォーカス移動なし
ShiftEnter Shift+Enterで前のコントロールにフォーカス移動
Enter Enterで次のコントロールにフォーカス移動
Both Enter、Shift+Enterの両方が有効

なお、複数行テキストコントロールでは、デフォルトでEnterキーが改行文字の入力になるため、次コントロールへのフォーカス移動はできません。この場合、setAcceptsReturnメソッド(またはコンストラクターでのacceptsReturnオプション設定)をfalseに設定して、Enterキーで改行文字が入力できないようにすると、次コントロールへのフォーカス移動が可能になります。いずれの場合も、Shift+Enterによる前コントロールへのフォーカス移動は可能です。

V2Jの新機能で改良した予約フォーム

 図1の予約フォームをV2Jの新機能で改良したものが図9(p006-reservation2)です。

図9 改良した予約フォームサンプル(p006-reservation2)
図9 改良した予約フォームサンプル(p006-reservation2)

 改良内容は以下の通りです。

検証コントロールによる入力チェック

 「確定」ボタンのクリック時に、必須項目の未入力や、クレジットカード番号の妥当性をチェックして、エラー時に検証コントロールで通知するようにしました。クレジットカード番号のチェックは、チェックディジット(最後の1桁)を利用して、Luhnアルゴリズムと呼ばれる方法で行います。処理の詳細はサンプルコードを参照してください。

図10 クレジットカード番号のチェック(p006-reservation2)
図10 クレジットカード番号のチェック(p006-reservation2)

コンボコントロールによるオプション指定

 前回サンプルではコメント欄に記述するしかなかった「朝食」や「マッサージ」などのオプション指定ができるようにしました。

図11 コンボコントロールでオプション指定(p006-reservation2)
図11 コンボコントロールでオプション指定(p006-reservation2)

改行キーによるフォーカス移動

 従来の左右キーに加えて、改行キーによるフォーカス移動を追加設定しました。

V2Jのそのほかの変更点

 以下では、本記事で紹介できなかったV2Jの変更点について、概要を説明します。詳細は公式ページを参照してください。

新コントロールの追加

 複数項目をリスト表示するリストコントロールや、任意のHTML要素をコントロールにドロップダウン表示できるドロップダウンプラグインが利用できるようになりました。

コントロールの機能追加

 日付時刻コントロールのドロップダウンで日付時刻を選択できる「日付時刻ピッカー」が利用できるようになりました。また、カレンダーコントロールや日付時刻コントロールのカレンダードロップダウンで、元号の「元年」表示をサポートしました。

テーマサポートとInputManJSデザイナ

 コントロールの外観を変更できるテーマ機能がサポートされました。また、コントロールをGUIで設定する「InputManJSデザイナ」が提供されるようになりました。

npmサポート

 InputManJSが、Node.jsのパッケージマネージャーnpmの「npm install @grapecity/inputman」コマンドでインストールできるようになりました。

まとめ

 本記事では、Webフォーム用部品「InputManJS」の新バージョンV2Jを利用して、Webフォームの使い勝手を改善する方法を説明しました。V2Jで追加された検証コントロールなどのさまざまな機能で、利用者を離脱させない、入力フォーム最適化(EFO)を実現できます。InputManJSは、2018年2月にリリースされたばかりの若いライブラリーですが、新バージョンでいち早く実用的な機能が追加され、今後も継続的な進化が期待できます。

参考資料

  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • WINGSプロジェクト  吉川 英一(ヨシカワ エイイチ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

All contents copyright © 2005-2018 Shoeisha Co., Ltd. All rights reserved. ver.1.5