SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

最先端テクノロジーに対応した高速・軽量なJavaScript UIライブラリ「Wijmo」の活用(AD)

マイクロソフト製品にも採用された「Wijmo(ウィジモ) 5」のモバイルWeb部品

ECMAScript 5に準拠した高速・軽量なJavaScript UIライブラリ「Wijmo 5」の活用 第7回

  • X ポスト
  • このエントリーをはてなブックマークに追加

モバイル文字入力をサポートする入力部品

 スマートフォンの画面に表示されるキーボードでは入力に手間取ってしまうという人も多いでしょう。Wijmo 5ではWeb標準の入力部品を拡張して入力支援を行う、表1のような部品が利用できます。

表1 Wijmo 5の主なテキスト入力部品
部品名 機能
AutoComplete 途中まで入力すると候補が表示される
InputMask テキストボックスで入力形式を強制できる
InputNumber テキストボックスで数値入力を強制できる

 以下では営業担当者が出先で発注処理を行う操作を想定した、図3のようなWeb画面サンプル(001_wijmo_input.html)で、表1の入力部品を利用する例を紹介します。画面上部で発注内容を入力すると、下部のプレビュー領域に内容が反映されます。

図3 Wijmo 5の入力部品サンプル(001_wijmo_input.html)
図3 Wijmo 5の入力部品サンプル(001_wijmo_input.html)

入力候補を表示できるAutoComplete

 AutoCompleteは入力可能なプルダウンで、途中までの入力内容に前方一致する候補を表示できます。記述はリスト2のように、wj-auto-completeディレクティブ(独自タグ)で行います。

リスト2 AutoCompleteの記述(001_wijmo_input.html)
<wj-auto-complete id="autoComplete1" class="form-control"
    items-source="companiesSource" ...(1)
    css-match="highlight"          ...(2)
    selected-value="companyName" > ...(3)
</wj-auto-complete>

 (1)のitems-sourceは入力候補が格納された配列で、AngularJSのスコープ変数にリスト3のように定義します。

リスト3 AutoComplete入力候補の定義(001_wijmo_input.html)
$scope.companiesSource =[
    "山本商事",
    "山本商船",
    "山本山インターナショナル",
    "渡辺倉庫",
    "渡辺四郎書店"
];

 (2)は入力候補が合致した部分の表示形式を指定するCSSクラスで、サンプルコードではhighlightクラスに赤太文字を定義しています。入力された文字列は(3)のselected-value属性に指定されたcompanyName変数に格納されます。

 リスト2、3を含むサンプルコードを実行して「山本」と入力すると、「山本」で始まる入力候補がリスト表示されて選択できます。

図4 AutoCompleteで入力候補を表示 (001_wijmo_input.html)
図4 AutoCompleteで入力候補を表示 (001_wijmo_input.html)

入力形式を制限できるInputMask

 InputMaskは、テキストボックスの入力に特定のフォーマットを強制できる部品です。リスト4のように、wj-input-maskディレクティブで記述します。

リスト4 InputMaskの記述(001_wijmo_input.html)
<wj-input-mask id="inputMask1" class="form-control"
    mask=">LLLL-0000"           ...(1)
    value="productCode"         ...(2)
    raw-value="productCodeRaw"> ...(3)
</wj-input-mask>

 (1)がマスクの指定です。「L」が英文字1文字、「0」が数字1文字を表すので、入力可能な文字列は「英文字4文字+ハイフン+数字4文字」となります。指定できる主な文字列を表2に示します。なお先頭の「>」は英文字に大文字を強制する記号です。「<」を指定すると小文字が強制されます。

表2 InputMaskのmask属性に指定できる主な文字列
文字列 意味
0 数字
9 数字または空白
# 数字、記号、または空白
L 文字
l 文字または空白
A 英数字
a 英数字または空白

 リスト4は画面上で図5のように表示されます。マスク指定に対応した入力ガイドが表示され、ガイドに従った文字列のみが許可されます。

図5 InputMaskの表示と入力 (001_wijmo_input.html)
図5 InputMaskの表示と入力 (001_wijmo_input.html)

 入力された値は、マスク文字(この場合はハイフン)を含む文字列がリスト4(2)のvalue属性に指定された変数に、マスク文字を含まない文字列が(3)のraw-value属性で指定された変数に、それぞれ格納されます。

数字以外入力できないInputNumber

 InputNumberは、数字専用のテキストボックスを設定できる部品です。リスト5のように、wj-input-numberディレクティブで指定します。

リスト5 InputNumberの記述(001_wijmo_input.html)
<wj-input-number id="inputNumber1" class="form-control"
    min="100" max="10000"          ...(1)
    show-spinner="true" step="100" ...(2)
    value="productCount">          ...(3)
</wj-input-mask>

 (1)のminとmax属性で、入力できる最小値/最大値を設定できます。(2)のshow-spinner属性をtrueにすると、テキストボックスの左右に入力値を増減できるスピナーボタンが表示されます。このときスピナーボタンで入力値を増減する量(ここでは100)をstep属性で指定できます。入力値は(3)のvalue属性に指定された変数に格納されます。

 サンプルコードを実行してリストInputMask、InputNumberのテキストボックスに文字を入力すると、それぞれの指定に合致する入力のみがテキストボックスに反映され、不正なデータの入力を抑止できます。

次のページ
入力にも表示にも使えるゲージ部品

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
最先端テクノロジーに対応した高速・軽量なJavaScript UIライブラリ「Wijmo」の活用連載記事一覧

もっと読む

この記事の著者

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

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

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

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

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

【AD】本記事の内容は記事掲載開始時点のものです 企画・制作 株式会社翔泳社

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/9404 2016/05/17 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング