スライダ入力フォーム スワイプ・ドラッグ操作で手軽に数値の入力が可能

スライダ入力フォームを含んだ日報テンプレートの画面
スライダ入力フォームを含んだ日報テンプレートの画面

数値の入力は通常キーボードから行うことが多いですが、入力される値がある程度決まっている場合はスライダー方式の入力を使うという手段もあります。 身近な例ではボリューム調整つまみなどがわかりやすい例ですね。ボリュームの値を入力するのではなく、ツマミを上下に動かしてボリューム値を調整します。

スライダーはレール上のつまみを左右に動かして値を入力できるちょっとおもしろい入力フォームです。 スワイプ操作だけで数値の入力ができるので特にスマートフォンやタブレットなどのタッチパネル操作が可能な端末との相性が良い入力方式です。

キャラクター

もちろん、PCからも入力できますよ

スライダーのレールには値の範囲を指定しなければなりません。左端はいくつで、右端はいくつか、そしてつまみを動かすときの最小単位はいくつか? このように初期設定は少し必要ですが、そこまで難しいものでは有りません。下限、上限、増減幅、そしてつまみの初期位置、この4つを意識するだけです。

入力が手軽な反面、スライダの上限を超えて入力できないというデメリットもあります。

スライダー方式による入力が向いているのは、例えば「気温」「体温」「水温」などある程度範囲が絞れるものが理想です。 このページで例示している「テストの点数」のように、点数の上限が決まっているケースも有効です。 逆に「今日の売上高」や「本日の来客者」のように上限が予測できない値の場合、スライダの入力には適しません。 上限の予測が困難な場合は、スライダではなくシンプルな数値入力フォームを利用してください。

スライド入力の初期設定

スライダ入力フォームではスライダーの下限(左端)と上限(右端)を指定します。そしてつまみを1マス動かすたびに増減する量(刻みといいます)を指定します。 スライダレール上の値はこの3つの要素で決まると言っても良いでしょう。 これらの要素によってレール上の密度がかわります。密度が濃すぎると少しつまみを動かしただけでたくさん値が変動してしまい、入力しづらくなってしまいます。 密度が高くなりすぎないように注意して設計しましょう。

また、入力フォームの幅自体を12のように大きくするとスライダレールが広くなり、結果としてレール上の密度を薄めることができます。

キャラクター

幅を12にしてもスマートフォンだと幅が狭いので効果は限定的です

名称説明
表示名項目見出しエリアに表示される文字です
項目見出しエリアの背景色を設定できます。灰色・茶色・緑色・紺色・赤色から選択してください。初期値は灰色です
サイズ表示名の文字サイズを最小・小・中・大の4段階から設定できます。初期値は「中」です。表示名が長すぎる場合は設定が無視されます
メモスライダ入力エリアの左上に赤文字で表示されます
初期値日報新規作成時にスライダのつまみが配置される位置です。最小値と最大値の中間となる値を推奨します
最小値スライダーの左端の値です。負数も利用できます
最大値スライダーの右端の値です。負数も利用できます
集計するデータ推移日報集計でこの項目を表示させる場合はONにします。初期値はONです
1〜12の幅を選択できます。密度が高い場合は幅を広くしてください。推奨幅は4〜12です
刻みつまみを動かしたときに増減する値です。小数点の指定も可能です
単位スライドの単位を指定します。初期値は「ポイント」です

スライダ入力だけのテンプレートを作成

実際にスライダ入力フォームを使った入力と表示の例を見ていくために、まずはスライダ入力だけで構成された日報テンプレートを作りました。 スライダ入力フォームを5つセットしています。

スライダ入力フォームのみで構成された日報テンプレート
スライダ入力フォームのみで構成された日報テンプレート

国語のスライダと算数のスライダはそれぞれ上限と下限が異なっていますが、密度が同じになることに注目してください。 国語も算数も50通りの入力パターンしか有りません。一方で理科はアンチパターン(やるべきではない見本)として用意しました。密度が高すぎます。

スライダ入力フォームの入力画面

先程作成したテンプレートを使って日報の作成画面を表示しました。

入力画面イメージ。密度によって操作性が大きく変わることに注意してください
入力画面イメージ。密度によって操作性が大きく変わることに注意してください

国語・算数は上限、下限が異なりますが密度が同じため、目盛りも同じように見えます。 一方で理科は密度が高すぎることがわかります。範囲は0〜30と狭く感じますが、刻みが0.25のため結果としてスライダレール上には120パターン存在することになり、操作性が著しく低下してしまいます。 逆に英語などは10パターンしかない例ですが、非常にスッキリしているのがわかります。

キャラクター

スライダのつまみは起動時にセットされています。つまり未入力状態が構造上起こり得ず、よって入力必須の指定はできません(意味がないため)

スライダ入力フォームを含んだ日報の表示

スライダ本体と単位、そして値が表示されます。スライダ上の目盛りは省略されます。

スライダ入力フォームを含んだ日報を受け取ったときの画面イメージ
スライダ入力フォームを含んだ日報を受け取ったときの画面イメージ

またスライダは集計可能な入力フォームのため、過去データ推移機能がOnになっていると過去のデータ比較が簡単に行なえます。

データ活用編

スライダ入力で入力された値は数値データとして扱われるため、集計やCSV出力など多くの機能が利用可能です。

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

スライド入力のデータを集計する

スライダはNipoPlusの集計機能を使って簡単な集計が行なえます。集計はスタッフごとに行われ、合計が算出されます。

スライダ入力フォームのデータをスタッフごとに集計する
スライダ入力フォームのデータをスタッフごとに集計する

また、データ推移を見ることもできます。

1名のスタッフを対象にとり、データの過去推移を時系列に閲覧可能です
1名のスタッフを対象にとり、データの過去推移を時系列に閲覧可能です

より詳しいガイドは集計機能を御覧ください。

スライド入力の日報をCSVに出力する

スライドの日報はそのままCSVに出力できます。設定項目等については特に有りません。 初期設定で指定した「単位」はCSVの見出し(1行目)で使用されます。

スライダ入力フォームを含んだ日報をCSVに出力したときの結果
スライダ入力フォームを含んだ日報をCSVに出力したときの結果

スライダのデータをPDFに出力する

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

スライダ入力フォームを含んだ日報をPDFに出力したときの結果
スライダ入力フォームを含んだ日報をPDFに出力したときの結果

入力された値の他、スライダの最小〜最大値、そしてスライダのおおよその位置関係が表示されます。

サンプルデータ

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

最終更新日: 2022/09/06
nipoplusアプリ起動ボタン

一切の企業情報を入力せずに手軽に体験できます

  • メール・パスワードの設定なしで体験可能(匿名機能
  • クレジットカードの登録も不要
  • Webアプリだからインストール不要
nipoplusアプリ起動ボタン
ios App Store
Android Google Play Store