Webフォームの全角半角問題をInputManJSで解決する | MESCIUS.devlog

2月14日のバレンタインデーに「InputManJS（インプットマンJS）」を発売しました。同製品は日本市場のあらゆる入力シーンを想定して設計された入力用JavaScriptコントロールセットです。
今回の記事では早速、このInputManJSの便利な利用方法をご紹介したいと思います。

Webフォーム全角半角問題

InputManJS発売日の数日前、はてな匿名ダイアリーにはこんな投稿が寄せられていました。

皆さんにも同じようなご経験があるのではないでしょうか。

すべての入力を半角英数字で済ませることができる欧米諸国とは異なり、日本のWebフォーム入力では、ひらがな、カタカナ、漢字を始めとする「全角文字」の考慮を欠かすことができません。システムが期待する情報を正しく受け取るためには、全角、半角、文字種など、入力の内容を精査する実装が必須となります。

しかし、実際の開発において、そのような処理が実装されることは多くないようです。アプリケーション要件に従いつつ、様々な文字種を判別しながら入力を検証する処理の実装は大変です。「入力する人に気をつけて貰う」ほうが楽ですから、そのようなWebフォームが多くなることは自然であるような気もします。

UIの影響力

システム側としては、フォームの使い勝手が多少悪くてもユーザーには入力をお願いしたいところです。しかし、上記の記事によれば「途中で会員登録をやめた」ということですから、UIの影響力は侮れません。良いUI無くしてシステムは成り立たない、そんな風に考えられるのではと思います。さて、こんな時、InputManJSのコントロールがあれば、開発者にとって実装の負担とならず、かつ、使い勝手の良い入力フォームを簡単に構築することが可能です。

InputManJS テキストコントロールを利用する

InputManJSの「テキストコントロール」は、特定の文字種だけしか入力を受け付けない文字種限定入力や、入力可能な文字種へ自動変換するオートコンバート機能など、HTML標準のINPUTタグでは実現できない高度な機能を提供しています。また高機能である一方、その利用方法は非常に簡単です。例として文字種限定と自動変換機能をもつテキストコントロールを実装してみましょう。

<html>
<head>
    <meta charset="utf-8" />
    <!-- InputManJSのライブラリ、CSSを参照します -->
    <link rel="stylesheet" type="text/css" href="http://cdn.grapecity.com/inputmanjs/hosted/css/gc.inputman-js.1.0.css">
    <script src="http://cdn.grapecity.com/inputmanjs/hosted/scripts/gc.inputman-js.ja.1.0.js" type="text/javascript"></script>
 </head>
<body>
<div>
　　    <!-- InputManJS テキストコントロールとなるINPUTを配置します -->
<input id="gcTextBox1">
</div>
<script type="text/javascript">
        // gcTextBoxインスタンスを生成します
        var gcTextBox1 = new GC.InputMan.GcTextBox(document.getElementById('gcTextBox1'));
        // 全角入力のみを許可します
        gcTextBox1.setFormat('Ｚ');
        // 入力の自動変換を有効にします
        gcTextBox1.setAutoConvert(true);
    </script>
</body>
</html>

このようにInputManJSライブラリを参照し、わずかなコードを記述するだけで高度なテキストボックスを実現することができます。このコードでは次の2つのメソッドを使用して入力の自動変換を有効にし、テキストボックスに入力できる文字種を設定しています。

setFormatメソッド

テキストボックスに入力できる文字種を設定するメソッドです。文字種の指定にはこちらのキーワードを使用します。”Ｚ”（全角文字）を指定すると、テキストボックスに入力できる文字種が「空白文字以外のすべての全角文字」のみになります。なお、キーワードは組み合わせて使用することも可能になっており、たとえば全角文字に加えて全角の空白文字も許容したい場合はキーワード”Ｓ”（全角）を使って以下のように設定します。

// 全角文字と全角空白のみ入力許可します
gcTextBox1.setFormat('ＺＳ');

setAutoConvertメソッド

入力自動変換の有効／無効を設定するメソッドです。上記のコードでは自動変換設定を可能にするためにこのメソッドを使用していますが、既定値はtrue（有効）なので、実際にはこのメソッドを省略して、今回のコードを以下のように記述することが可能です。

// gcTextBoxインスタンスを生成します
var gcTextBox1 = new GC.InputMan.GcTextBox(document.getElementById('gcTextBox1'));
// 全角入力のみを許可します
gcTextBox1.setFormat('Ｚ');

実行例

次に実行例を示します。

この例では、弊社の住所「宮城県仙台市泉区紫山3丁目1-4」（3、1-4は半角文字）をInputManJSのテキストコントロールに入力しています。全角のみを受け付け、自動変換も掛かるように設定したので、半角で入力した「3」および「1-4」は入力後自動的に全角に変換されています。

半角全角自動変換 — HTML INPUTタグによるテキストエリアと
InputManJSコントロールの比較

このようにInputManJSなら、極めて少ない工数でユーザーに使い勝手の良いWebフォームの入力欄を提供することが可能です。またシステム側も、全角半角混じりといった不均一なデータでデータベースを煩雑にすることがないため、ユーザーとシステム、双方にメリットがあります。

日本のWebフォーム開発に役立つInputManJS

いかがだったでしょうか。今回はたった3行（実質2行！）のJavaScriptコードで、ユーザーが入力に迷うことのない、高機能テキストボックスを実現する例をご紹介しました。InputManJSには他にも、Webフォーム開発に役立つ様々なコントロールが収録されています。今回の記事で「おっ」と思われた方は、InputManJS製品ページも併せてご確認いただければ幸いです。

また、Webサイトでは、今回ご紹介した機能を含め製品の動作を実際に確認できるオンラインデモも公開中です。こちらも是非、お試しください。

＼この記事をシェアする／

Webフォーム 全角半角問題