料金 旧Nipo チェックシートApp 問合せ

範囲入力フォーム

範囲入力フォーム 画像を拡大 範囲入力フォーム

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

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

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

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

範囲入力の初期設定

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

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

名称 説明
入力必須 これがONの場合、ファイルが添付されていない場合日報の提出ができなくなります
初期値 日報新規作成時に最初から文字を入力済みにできます。不要の場合は空欄にしておきます
最小値 スライダーの左端の値を指定します。負数も扱えます
最大値 スライダーの右端の値を指定します。負数も扱えます
初期値(最小) 日報作成時にスライダーの最小つまみが配置される位置を指定します
初期値(最大) 日報作成時にスライダーの最大つまみが配置される位置を指定します
刻み つまみの1メモリ単位を指定します。例えば2なら 2 , 4 , 6のように増えていきます。小数点も指定できます。初期値は1です
単位 数値の単位を指定します。例えば気温であれば「度」と入力します。単位は入力時の画面左上にヒントとして表示されます

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

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

範囲入力フォームのみで構成されたチェックシートテンプレートの例
範囲入力フォームのみで構成されたチェックシートテンプレートの例
範囲入力フォームのみで構成されたチェックシートテンプレートの例

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

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

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

範囲入力の画面イメージ。アンチパターンは密度が高すぎて目盛りが塗りつぶされている状態になっています。
範囲入力の画面イメージ。アンチパターンは密度が高すぎて目盛りが塗りつぶされている状態になっています。
範囲入力の画面イメージ。アンチパターンは密度が高すぎて目盛りが塗りつぶされている状態になっています。

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

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

スライダ入力フォームを含んだ日報を受信したときの例。スライダはそのまま表示されるが読み取り専用となるため動かすことはできない
スライダ入力フォームを含んだ日報を受信したときの例。スライダはそのまま表示されるが読み取り専用となるため動かすことはできない
スライダ入力フォームを含んだ日報を受信したときの例。スライダはそのまま表示されるが読み取り専用となるため動かすことはできない

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

データ活用編

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

{
  min: 3,
  max: 10
}

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

集計可否 CSV出力 PDF出力 文字検索

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

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

範囲入力フォームを含んだ日報をCSVに出力したときの例。最小の列と最大の列の2つに分けてCSVに出力されます
範囲入力フォームを含んだ日報をCSVに出力したときの例。最小の列と最大の列の2つに分けてCSVに出力されます
範囲入力フォームを含んだ日報をCSVに出力したときの例。最小の列と最大の列の2つに分けてCSVに出力されます

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

PDF出力

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

範囲入力フォームを含んだ日報をPDFに出力したときの画面イメージ
範囲入力フォームを含んだ日報をPDFに出力したときの画面イメージ
範囲入力フォームを含んだ日報をPDFに出力したときの画面イメージ

サンプルデータ

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

更新日: 2023/03/02