範囲入力フォーム

スライダー上のつまみを左右にドラッグすることで入力が可能なフォームです。見た目はスライダ入力フォームと似ていますが、スライダーレール上につまみが2つあるのが本フォームの特徴です。 つまみが2つありこれらを左右にドラッグすることで、ある値の範囲入力ができるようになります。

スライダーの範囲は予め設定しておく必要があります。最小値がレールの左端、最大値がレールの右端になります。スライダ上のつまみが動く量は「刻み」として設定します。 最小〜最大の範囲を設定する性質上、予め入力の範囲がわかっているものに適しています。

スライダーはスワイプ操作でつまみが移動できるため、特にスマートフォンやタブレットなどのタッチパネル操作に対応した機器と相性が良いです。もちろん、PCでもマウスを使用して入力が可能です。

例えば「気温」「室温」「水温」のようにある程度入力範囲が限定されているデータと相性が良いフォームです。 一方で上限や下限が推測できないデータには不向きです。

範囲入力の初期設定

ポイントはスライダーレールの範囲を決める「最小値」「最大値」そしてつまみの移動量を決める「刻み」です。この3つの要素でスライダーレールの「密度」が決まります。 密度が高すぎるとつまみの操作がしにくくなり、操作性が低下してしまいます。密度が高くなりすぎないように注意してください。

共通の設定項目については「各種入力フォームの共通設定項目」を参照してください。 以下は本入力フォームにのみ存在する設定項目です

範囲入力フォームのテンプレートを作る

範囲入力フォームのみで構成されたサンプルのチェックシート用テンプレートを設計した画面です。

左側の「気温」は問題有りませんが、あえて問題のあるアンチパターンを右側に配置しました。これがどのように悪い結果をもたらすのかについても併せて確認していきます。

範囲入力チェックシートの入力画面

範囲入力チェックシートの作成画面を表示します。

下段左の「合格範囲」の範囲入力は密度が低いため操作しやすい一方で、アンチパターン（右上）は目盛りでスライダレールが塗りつぶされてしまっていることがわかります。 アンチパターンでは範囲が-100〜100の200と広い上に、刻みが0.2のためこの狭い範囲に1000パターンも詰め込まれている状態です。つまみを少し動かす操作は非常に難しくなり、狙った値で止めることが困難になります。 今回は極端な例を示しましたが、密度をある程度低く抑えることで入力の操作性が良くなります。多くても密度は100以下に抑えるようにしてください。

範囲入力の日報を受け取ったときにどのように見えるのか？

スライダーがそのまま表示されますが、目盛りは省略されます。正確な値は各フォームの左上に記載されます。 スライダーレールが表示されることで入力された範囲が全体にたいして広いのか？狭いのか？といったことが視覚的に判別できます。

データ活用編

範囲入力はスライダーレール上のつまみが2つあるため、内部的には次のような構造でデータを記録しています

{
  min: 3,
  max: 10
}

minがスライダ上の左側のつまみを表し、maxがスライダ上の右側のつまみを表しています。このように最大・最小の2つの値を持つため、単純な集計ができません。 よって範囲入力のデータは主にCSVに出力した上で使用することになります。範囲入力フォームのデータ対応は以下の表のとおりです。

範囲入力の日報をCSVに出力する

範囲は「最小」と「最大」の2つのデータを持っているため、CSV出力時には1つの範囲入力に付き最小最大の2つの列が自動で生成されて分けて出力されます。

見やすいように項目ごとに色分けをしてみました。J列とK列、L列とM列、N列とO列、P列とQ列がそれぞれのペアになります。 分けて出力されるため加工や分析に適した計上です。

PDF出力

なお、PDFに出力したときはこのように表現されます。

サンプルデータ

このページで使用した実際のサンプルをダウンロードできます