CodeZine(コードジン)

特集ページ一覧

便利な入力部品が多数追加! JavaScript入力コントロール「InputManJS」最新バージョンV3J

軽量で多機能なJavaScript入力コントロール「InputManJS」の紹介

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

 本記事では、グレープシティのJavaScript入力コントロール「InputManJS」の最新バージョンV3Jで追加された新機能を紹介します。さまざまな入力方法を提供する新しい入力コントロールが追加されるなど、より多様なフォーム入力のニーズに応えられるようになりました。

目次

はじめに

 InputManJSは、Webフォーム用の入力コントロールを提供するグレープシティのJavaScriptコントロールセットです。テキストコントロールや複数行テキストコントロールといった基本的なものから、マスクコントロールやカレンダーコントロールといった多機能なものまで、Webフォームの入力に特化したさまざまなコントロールが提供されます。利用できるすべてのコントロールは、公式デモページで確認できます。

図1 InputManJSで提供されるコントロールの一部(公式ページより)
図1 InputManJSで提供されるコントロールの一部(公式ページより)

 InputManJSは2018年2月の発売以来バージョンアップを重ね、2021年1月に最新バージョン「V3J」がリリースされました。V3Jでは新しい入力コントロールとして、電卓の計算結果が入力できる「電卓コントロール」、ファンクションキー操作を提供する「ファンクションキーコントロール」、画面にキーボードを表示する「ソフトウェアキーボードコントロール」、ほかのコントロールにショートカットキーを設定できる「ショートカットキーコントロール」の4つが追加されたのを中心に、さまざまな機能アップが図られています。本記事では、InputManJS V3Jの新機能を紹介していきます。

対象読者

  • Webページの入力用UI部品を探している方
  • フォームの使い勝手で、ほかと差をつけたい方
  • InputManJSの最新機能をチェックしたい方

必要な環境

 本記事のサンプルは、以下の環境で動作を確認しています。Node.jsは、InputManJSの動作に必ずしも必要ではありませんが、ローカルでWebサーバーを動作させるために利用しています。InputManJSの動作環境(サポートするブラウザ)は、公式ページで案内されています。

Windows 10 64bit版

  • InputManJS V3J
  • Microsoft Edge 89.0.774.75
  • Node.js 14.16.1 64bit版

 サンプルを動作させるには、公式ページからダウンロードできるInputManJSのトライアル版を利用します。トライアル版のZipファイルを展開したフォルダから、表1のファイルをサンプルコードにコピーします。

表1 サンプルコードにコピーするInputManJSのファイル
InputManJSのファイル サンプルコードへのコピー先
css/gc.inputman-js.css cssフォルダ
scripts/gc.inputman-js.ja.js jsフォルダ

 その後「npm install」コマンドでライブラリをダウンロードして、「npm run start」コマンドを実行すると、Webブラウザが開いてWebページが表示されます。

InputManJSの基本的な利用法

 まず、InputManJSの基本的な利用法を、基本的なコントロールを表示する図2のサンプルで説明します。

図2 InputManJSのコントロールを表示するサンプル(p001-basic)
図2 InputManJSのコントロールを表示するサンプル(p001-basic)

 最初に、InputManJSのファイルを、index.htmlの<head>要素内でリスト1の通り参照します。また、<body>要素には、InputManJSコントロールを描画するHTML要素を記述しておきます(詳細はサンプルコードを参照してください)。

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

 次にJavaScript処理で、リスト2の通りInputManJSのコントロールを生成します。

[リスト2]InputManJSコントロールの生成処理(p001-basic/main.js)
// ライセンス設定 ...(1)
GC.InputMan.LicenseKey = '<ライセンスキー>';
// Webページロード時の処理
window.addEventListener('load', function () {
  // コンボコントロール、リストコントロールに表示する内容
  var smartphones = [
    'Galaxy S21 5G',
(略)
  ];
  // HTML要素を引数にコンストラクタを実行してコントロールを生成 ...(2)
  var gcTextBox
    = new GC.InputMan.GcTextBox(document.getElementById('gcTextBox'));
  // コンストラクタにHTML要素と、属性のオブジェクトを渡す場合 ...(3)
  var gcComboBox
    = new GC.InputMan.GcComboBox(document.getElementById('gcComboBox'), {
      items: smartphones
    });
  // コントロール生成後に属性を設定する場合 ...(4)
  var gcListBox
    = new GC.InputMan.GcListBox(document.getElementById('gcListBox'));
    // // メソッドで設定(従来の記法) ...(4a)
    // gcListBox.setItems(smartphones);
    // プロパティで設定(V3Jの新記法) ...(4b)
    gcListBox.items = smartphones;
}, false);

 InputManJSを正式版として利用するには、(1)の通りライセンスの設定が必要です。グレープシティの公式ページで案内されている方法で取得したライセンスキーを、GC.InputMan.LicenseKeyに設定します。

 (2)ではInputManJSのテキストコントロール(GcTextBox)を生成しています。コントロールを生成するには、表示先HTML要素をコンストラクタの引数に設定して実行します。

 コンストラクタの第2引数に属性を設定することもできます。(3)ではコンストラクタの第2引数に表示内容(items)を設定して、コンボコントロール(GcComboBox)を生成しています。

 コンストラクタの戻り値はコントロールに対応するオブジェクトとなります。このオブジェクトのメソッドやプロパティを利用して、後から属性を設定できます。例えば(4)で生成したリストコントロール(GcListBox)に対して、(4a)のsetItemsメソッドや、(4b)のitemsプロパティで表示内容を設定できます。なお、プロパティによる属性設定はV3Jから可能になった記法です(詳細は後述)。


関連リンク

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

あなたにオススメ

著者プロフィール

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

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

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

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

バックナンバー

連載:ComponentZine(InputMan)

もっと読む

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