InputManJSで仕事が捗る入力フォーム開発(1)文字種指定で間違わない住所入力

InputManJS(インプットマンJS)は便利で快適な入力フォーム開発に特化したJavaScriptライブラリです。様々な用途に合わせて最適化された同ライブラリのインプットコントロールを活用することにより、入力ストレスの少ないWebフォームを効率的に実現することができます。

このシリーズではInputManJSに収録されている便利な機能やコントロールをピックアップしながら、開発者もシステム利用者も「仕事が捗る」入力フォームの開発TIPSをご紹介します。

入力フォーム離脱率と「良い入力フォーム」

「入力フォーム離脱率」という言葉があります。これは入力フォームにアクセスした利用者が、入力を完了せずにその場から離脱してしまう確率のことです。入力フォームをしっかりと機能させるためには、単に入力欄を並べるだけではなく、この確率が低くなるように設計や実装を行わなければなりません。

この離脱率は入力に手間がかかるほど高くなると言われています。裏を返して考えると、入力フォームから手間のかかる要素を排することができれば、離脱率の低い「良い入力フォーム」を作ることができそうです。

InputManJSにはこの点でいくつもの便利機能が収録されているのですが、今回はその中から1つ、ピックアップしてご紹介したいと思います。

入力フォームの鬼門「住所入力」

世の中には様々な入力フォームがありますが、ここでは代表的なものとして以下のようなフォームを取り上げ、離脱率との関係について考えてみます。

オーソドックスなWebフォーム
オーソドックスな Web フォームの例

このような入力フォームでは、よく「住所」が問題になります。例えば「宮城県仙台市泉区紫山3ー1ー4」といった入力にあたり数字や記号といった文字は全角、半角のどちらであるべきなのか。その判断にストレスを抱える利用者はとても多いように思います。

住所入力の問題点

また、こういった場合に慣れたやり方で入力をしたところエラーになってしまった、なんてケースもあるようです。

上記の記事で「途中で会員登録やめた」とあるように、このような手間が重なると入力フォーム離脱率はグンと上がってしまいます。

InputManJSの文字種変換機能

InputManJSに収録のテキストコントロール/複数行テキストコントロールでは、このような問題のソリューションとなる下記2つの機能をご提供しています。

文字種の指定機能

コントロールに入力できる文字種を指定する機能です。この機能を使い、あらかじめ入力可能な文字種を指定しておけば、システムの利用者が全角や半角といった設定で迷うことはなくなります。

使い方

文字種の指定にはformatプロパティこちらのキーワードを使用します。例えば下記はInputManJSのテキストコントロールに入力できる文字種を「空白文字以外のすべての全角文字」に指定する例です。

// テキストコントロールのインスタンスを生成します
var gcTextBox = new GC.InputMan.GcTextBox(document.getElementById('gcTextBox'));

// 空白文字以外のすべての全角文字の入力を許可します
gcTextBox.format = 'Z';

なお、このキーワードは組み合わせて使用することも可能です。以下の例では全角文字に加えて全角の空白文字も許容する設定を行なっています。

// 全角文字と全角空白のみ入力許可します
gcTextBox.format = 'ZS';

文字種の自動変換機能

コントロールに入力された文字列の種別を判定し、上記にあるformatプロパティで指定した文字種に自動変換する機能です。この機能を有効にしていれば、システム利用者が指定と異なる文字種の入力を行なった場合でも、自動でその内容が指定の文字種によるものに変換されるようになります。

使い方

この機能は規定値が有効(true)に設定されています。そのため、InputManJSをお使いの際には意識して設定を行うことなく、この機能を利用することが可能です。なお、必要な場合はautoConvertプロパティに’false’を設定し、この機能を無効にすることもできます。

コードと実行例

ここで上記二つの機能を使った例を示します。以下は、InputManJSのテキストコントロールを使い、入力が全角文字のみとなるように文字種を指定した場合のコード例です。

<html>

<head>
    <!--InputManJS関連のCSSとライブラリファイルを参照します-->
    <!--CSSファイル-->
    <link rel="stylesheet" href="css/gc.inputman-js.css" />
    <!--JavaScriptファイル-->
    <script src="js/gc.inputman-js.ja.js"></script>
</head>

<body>
    <p>入力された文字列を全角に自動変換して表示します</p>
    
    <!-- InputManJS テキストコントロールとなるINPUT要素を配置します -->
    <input id="gcTextBox" />
</body>

</html>
// gcTextBoxインスタンスを生成します
var imDom = document.getElementById('gcTextBox');
var gcTextBox = new GC.InputMan.GcTextBox(imDom);

// 空白文字以外のすべての全角文字の入力を許可します
gcTextBox.format = 'Z';

このコードを実行すると以下のような動作を確認できます。

住所入力にあたり最後の番地情報を半角で入力しましたが、文字種指定と自動変換機能により最終的な入力文字列が全角になります。さらに以下では動作を確認できるデモを配置していますので、ぜひ実際にこの機能を体験してみてください。

InputManJSでストレスフリーの入力フォーム開発

今回はInputManJSのテキストコントロールおよび複数行テキストコントロールに搭載されている2つの機能をご紹介しました。これらの機能を活用することにより、入力ストレスの少ない入力フォームを簡単に実現できます。

またこの他にもInputManJSには、Webフォーム開発に役立つ様々なコントロールが収録されていますので、本シリーズ次回以降の記事でご紹介していきたいと思います。

なお、今回の記事で製品が気になった方は、InputManJS製品ページも併せてご確認いただければ幸いです。