Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

Webページのフォームをより便利に! 軽量で多機能なJavaScript入力コントロール「InputManJS」の紹介

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

 グレープシティの「InputManJS(インプットマンJS)」は、Webページの入力フォームで利用できる入力用JavaScriptコントロールセットです。InputManJSの機能を利用すると、Webページの入力フォームをより使いやすくできます。本記事ではInputManJSの利用法を紹介していきます。

目次

はじめに

 InputManJS(インプットマンJS)は、グレープシティのJavaScriptコントロールで、Webフォームの入力用UI部品を提供します。2018年1月に発表、同2月に発売されました。

図1 InputManJS公式ページ
図1 InputManJS公式ページ

 InputManJSでは、表1のコントロールが利用できます。

表1 InputManJSのコントロール
UI部品 説明
テキストコントロール 書式指定などの機能を持つテキストボックスコントロール
マスクコントロール 定型書式を正規表現で指定できるコントロール
日付時刻コントロール 日時入力に特化したコントロール
数値コントロール 数値入力に特化したコントロール
カレンダーコントロール 年月日を指定できるカレンダーコントロール

 InputManJSには、以下の特徴があります。

高速、軽量、シンプル

 InputManJSの構成ファイルは600KB程度と軽量で、高速に動作します。動作に必要なファイルはCSSとJavaScriptが1ファイルずつだけです。

多彩な環境対応

 HTML5対応のほとんどのブラウザーで動作します。タッチ入力対応のPCでは、コントロールを長押しして表示されるタッチツールバーで、コピーや貼り付けなどができます。

図2 タッチでさまざまな操作ができるタッチツールバー
図2 タッチでさまざまな操作ができるタッチツールバー

日本独自文化に対応

 InputManJSは日本生まれで、漢数字や和暦といった日本独自の文化に対応します。2019年5月1日からの新元号にも対応できます。

単体でも、他フレームワークと組み合わせても利用可能

 単体での利用のほか、AngularJS/Angular、React、Vue.jsといったJavaScriptフレームワークや、TypeScriptでの開発に対応します。

 本記事では、InputManJSの利用方法を、サンプルを交えて説明していきます。

対象読者

  • Webページの入力用UI部品を探している方
  • Webページの入力画面を作りこむのが面倒な方
  • Webページの新元号対応が求められている方

必要な環境

 InputManJSの動作環境は、公式ページで「Internet Explorer 11、Microsoft Edge、Chrome、Safari 5.1以上、Firefox、iOS(Safari、Chrome)」が案内されています(Androidは非対応です)。タッチツールバーは、タッチ機能対応PCで動作します(タッチツールバーはiOS非対応です)。

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

  • Windows 10 64bit版
  • Microsoft Edge 42.17134.1.0

 本記事では、公式ページからダウンロードできるトライアル版を利用します。正式版を利用するにはライセンスの設定が必要です。ライセンスの詳細は公式ページを参照してください。

まず表示させてみる

 最初に、InputManJSのクイックスタートを参考にして、InputManJSのコントロールを表示させてみます。

図3 InputManJSのコントロール(P001-basic)
図3 InputManJSのコントロール(P001-basic)

 まず、InputManJSのCSSファイル(gc.inputman-js.1.0.css)とJavaScriptファイル(gc.inputman-js.ja.1.0.js)を、ダウンロードしたトライアル版のアーカイブファイルから展開して、リスト1のようにindex.htmlのhead要素で参照します。

リスト1 InputManJSのファイルを参照する記述(P001-basic/index.html)
<link rel="stylesheet" type="text/css" href="css/gc.inputman-js.1.0.css"/>
<script src="js/gc.inputman-js.ja.1.0.js"></script>

 body要素には、リスト2のようにInputManJSのコントロールを表示するHTML要素を記述します。カレンダーコントロールは<div>、それ以外は<input>タグを用います。また<textarea>タグで、テキストコントロールを複数行にできます。

リスト2 コントロールを表示するHTML要素の記述(P001-basic/index.html)
<div>テキストコントロール</div>
<input id="gcTextBox1">
<div>複数行テキストコントロール</div>
<textarea id="gcTextBox2"></textarea>
<div>マスクコントロール</div>
<input id="gcMask">
<div>日付時刻コントロール</div>
<input id="gcDateTime">
<div>数値コントロール</div>
<input id="gcNumber">
<div>カレンダーコントロール</div>
<div id="gcCalendar"></div>

 JavaScriptでは、InputManJSのコントロールを設定するメソッド(テキストコントロールならばGC.InputMan.GcTextBoxメソッド)を実行します。(1)はマスクコントロールに郵便番号のマスクを設定する処理です(詳細は後述します)。

リスト3 コントロールを表示するJavaScript処理(P001-basic/main.js)
// テキストコントロール
var gcTextBox1
= new GC.InputMan.GcTextBox(document.getElementById('gcTextBox1'));
// マスクコントロール
var gcMask = new GC.InputMan.GcMask(document.getElementById('gcMask'));
gcMask.setFormatPattern('〒\\D{3}-\\D{4}'); // マスクを設定 ...(1)
(略:以下、日付時刻/数値/カレンダーの各コントロールも同様に設定)

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

著者プロフィール

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

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

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

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

バックナンバー

連載:ComponentZine(InputMan)

もっと読む

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