JP2006331264A

JP2006331264A - Ｗｅｂブラウザ上での数値表示制御及び数値入力支援プログラム。

Info

Publication number: JP2006331264A
Application number: JP2005157010A
Authority: JP
Inventors: Minoru Hiyama; 稔檜山
Original assignee: HOLONIC SYSTEMS KK
Current assignee: HOLONIC SYSTEMS KK
Priority date: 2005-05-30
Filing date: 2005-05-30
Publication date: 2006-12-07
Anticipated expiration: 2025-05-30
Also published as: JP4196213B2

Abstract

【課題】
Webブラウザ上で多数の数値表示及び入力・変更は、その個数が多いほど見間違いを起こしやすく、また入力にも手間が掛かり大変な労力を必要とし、プログラムの制約上効果的かつ効率的なユーザー・インターフェースが無かった。
【解決手段】
Ｗebブラウザ上で実行されるHTML、CSS、及びJavaScriptを使用して、テーブル・タグ <td></td> のセット個数を１０分の１以下に減らす事によりクライアントPCの負荷を軽減させ実用に耐えうるグラフィカル・ユーザー・インターフェースを提供する。
数値入力された値が、対応するグラフィック領域に赤色矩形として表示され、またグラフィック領域上の任意のグリッド位置でマウスクリックすると、対応する数値表示領域に数値として表示される。
【選択図】図１

Description

本発明は、Webブラウザ上で多数の数値表示及び、入力・変更をグラフィカル・ユーザー・インターフェースを使用して見易く、また入力し易くしたWebブラウザ上での数値表示制御及び数値入力支援プログラムに関する。

従来、Webブラウザ上での多数の数値表示及び入力・変更は、その個数が多いほど見間違いを起こしやすく、また、入力にも手間が掛かり大変な労力を必要とし、プログラムの制約上効果的かつ効率的なユーザー・インターフェースが無かった。

数値を見易くする手段としてグラフィカル表示が有望であるが、Webブラウザ上でグラフィカルに表示しようとすると、通常はテーブル・タグを多用しなければならなかった。例えば、１行が最小５分単位の２４時間分を２０行表示する為のテーブル・タグ <td></td> のセット個数は、２４時間×６０分÷５分×２０行＝５，７６０セットとなる。
これはクライアントPCにとって尋常ではない負荷を要求するため、実用には程遠いものであった。

本発明は、これらの問題を解決するため、Ｗebブラウザ上で実行されるHTML(Hyper Text Markup Language)、CSS(Cascading Style Sheets)、及びJavaScriptを使用して、テーブル・タグ <td></td> のセット個数を１０分の１以下に減らす事により、クライアントPCの負荷を軽減させ実用に耐えうるグラフィカル・ユーザー・インターフェースを提供する事にある。

上記目的を達成するために、請求項１記載の発明は、Ｗebブラウザ上で実行される、HTML、CSS、及びJavaScriptを使用して、画面の片方に数値表示入力領域を作成し、同じ画面のもう一方にグラフィック表示入力領域を作成し、前記数値表示入力領域を制御する数値表示制御手段、数値入力制御手段及び、入力された数値データを位置データに変換する数値・位置データ変換手段を設け、前記グラフィック表示入力領域を制御するグラフィック表示制御手段、グラフィック入力制御手段及び、入力された位置データを数値データに変換する位置・数値データ変換手段を設け、前記数値表示入力領域と前記グラフィック表示入力領域と双方向にデータの橋渡しをする為の相互通信手段とを設ける。

前記グラフィック表示入力領域には予め入力数値の最小単位を１個とした矩形グリッドを表示しておく。
この矩形グリッドを１つ１つテーブル・タグ <td></td>で囲むのではなく、例えば薄色分けで最小５分単位１２個を１つの画像とし、これをテーブル・タグ <td></td>の１セットで囲う。
こうする事により、最小５分単位の２４時間分を２０行表示する為のテーブル・タグ <td></td> のセット個数は、２４時間×２０行＝４８０セットに節約できる。

ユーザーが前記数値表示入力領域にキーボードやテンキー等から直接数値入力すると、前記数値入力制御手段が前記数値表示制御手段に入力された数値データを渡し、前記数値表示制御手段が受け取った数値を前記数値表示入力領域に表示し、さらに前記数値入力制御手段は前記数値・位置データ変換手段にこの数値データを送り、次に前記数値・位置データ変換手段が受け取った数値データを位置データに変換して前記相互通信手段にこの位置データを送り、前記相互通信手段は前記グラフィック表示制御手段にこの位置データを送り、前記グラフィック表示制御手段はこの受け取った位置データに該当する前記グラフィック表示入力領域のグリッド位置に設定値としての画像（例えば赤色矩形）を表示する。

またユーザーがマウス等のポインティングデバイスを使用して前記グラフィック表示入力領域上の任意のグリッド位置にマウスポインタを移動させると、前記グラフィック入力制御手段がそのその位置データを前記グラフィック表示制御手段に渡し、前記グラフィック表示制御手段がその位置データのグリッド位置に現指示位置としての画像（例えば青色矩形）を表示する。

マウスポインタが隣のグリッドに移動すると前記グラフィック入力制御手段が新しい位置データを前記グラフィック表示制御手段に渡し、前記グラフィック表示制御手段が既に表示していた位置の現指示位置としての画像を消去し、新しい位置データのグリッド位置に現指示位置としての画像を表示し、マウスポインタがグリッド上を移動する度に上記の消去と表示を繰り返す。

そして任意のグリッド位置でマウスクリックすると、前記グラフィック入力制御手段がその位置データを前記グラフィック表示制御手段に渡し、前記グラフィック表示制御手段がマウスクリックしたグリッド位置に設定値としての画像（例えば赤色矩形）を表示する。

さらに前記グラフィック入力制御手段が前記位置・数値データ変換手段にこの位置データを送り、次に前記位置・数値データ変換手段が受け取った位置データを数値データに変換して、前記相互通信手段にこの位置データを送り、前記相互通信手段は前記数値表示制御手段にこの数値データを送り、前記数値表示制御手段はこの受け取った数値データを前記数値表示領域に数値として表示する。

この数値とグラフィックの対応を１行として複数行設ける事により多数の数値をグラフィカルに扱うことが出来るので、確認と変更が容易であることを特徴とするWebブラウザ上での数値表示制御及び数値入力支援プログラムに関するものである。

また請求項２記載の発明は、前記グラフィック表示入力領域上からマウスクリックによって複数のセットとなる様な数値、例えば１行で開始値と終了値の様なセット値を入力する場合において、１番目（例えば開始値）の入力はマウスクリックのみとし、２番目（例えば終了値）の入力を行う時は特殊キー１（例えば任trl買Lー）を押しながらマウスクリックを行い、さらにもし３番目が有ればその入力を行う時は特殊キー２（例えば尿lt買Lー）を押しながらマウスクリックを行う、もし４番目以降が有れば同様に特殊キー（ファンクションキーその他何でも使用可能）を併用してマウスクリックを行う、と言った方法で複数の数値のセット入力を可能としたことを特徴とする請求項１記載のWebブラウザ上での数値表示制御及び数値入力支援プログラムに関するものである。

また請求項３記載の発明は、前記グラフィック表示入力領域でスクロールが必要となる場合においてはスクロールボタンを設け、スクロールバーによる表示位置の誤差による設定値または、現指示位置としての画像表示のズレ防止を特徴とする請求項１記載のWebブラウザ上での数値表示制御及び数値入力支援プログラムに関するものである。

また請求項４記載の内容は、数値に関する説明で、年月日、日時、時刻、温度、湿度、圧力、流量、速さ、重さ、長さ、容積、個数、枚数、金額、割合等、その他数値で表せるものであればどのような数値でも対応可能であることを特徴とする請求項１記載のWebブラウザ上での数値表示制御及び数値入力支援プログラムに関するものである。

本発明は、Ｗebブラウザ上で実行されるHTML、CSS、及びJavaScriptを使用して、テーブル・タグ <td></td> のセット個数を１０分の１以下に減らす事により、クライアントPCの負荷を軽減させ、実用に耐えうるグラフィカル・ユーザー・インターフェースを提供し、これにより多数の数値表示及び入力・変更を間違いが少なく容易かつ迅速に行える様になった。

次に、図を用いて本発明の実施の形態および動作を順次詳細に説明する。

図１は、プログラマブル・タイマの実施例である。

図１はWebブラウザ表示画面の例で、画面左側を数値表示入力領域N1とし開始時刻J1と終了時刻J2を数値（時分）で表示している。

画面右側はグラフィック表示入力領域G1で背景として最小５分単位とした矩形グリッドを薄色分け表示していて、開始時刻の設定画像R1として赤色矩形に白抜き“＜”と、終了時刻の設定画像R2として赤色矩形に白抜き “＞”で表現している。

背景の矩形グリッドH1は、５分毎の薄色分けで１時間分１２個を１つの背景画像とし、これをテーブル・タグ <td></td>の１セットで囲っている。

こうする事により、最小５分単位の２４時間分を２０行表示する為のテーブル・タグ <td></td> のセット個数は、２４時間×２０行＝４８０セットとなる。

グラフィック表示入力領域G1の２４時間中のどの５分位置の矩形に、現指示位置としての青色矩形R3や、設定画像としての赤色矩形R1またはR2を表示するかは、CSS、とJavaScriptを使用している。

時間スケールS1には、０時〜２３時を表示し、スクロールボタンB1によりスクロールさせている。スクロールボタンB1を使用するのは、スクロールバーを使用した場合には表示する位置によりドットの誤差があり赤色矩形R1またはR2や青色矩形R3を表示させたときズレが発生する為で、これを防止する為にスクロールボタンB1を使用している。

図２は、HTML、CSS、及びJavaScriptを使用した本件プログラム構成である。

Webブラウザ上の数値表示入力領域N1は数値表示制御手段１と数値入力制御手段２により制御されている。

グラフィック表示入力領域G1はグラフィック表示制御手段４とグラフィック入力制御手段５により制御されている。

数値入力制御手段２からの数値データは、数値表示制御手段１に渡して数値表示するとともに、数値・位置データ変換手段３にも渡して、数値データから位置データに変換して、相互通信手段７に渡し、さらにグラフィック表示制御手段４に渡して、グラフィック表示する。

ただし、この例ではグラフィック表示入力領域G1で最小５分単位としているので、数値データから位置データに変換する時、０〜４分は０分、５〜９分は５分、１０〜１４分は１０分、１５〜１９分は１５分、２０分〜２４分は２０分、２５〜２９分は２５分、３０〜３４分は３０分、３５〜３９分は３５分、４０〜４４分は４０分、４５〜４９分は４５分、５０〜５４分は５０分、５５〜５９分は５５分として位置データに変換される。

また、グラフィック入力制御手段５からの位置データは、グラフィック表示制御手段４に渡してグラフィック表示するとともに、位置・数値データ変換手段６にも渡して、位置データから数値データに変換して、相互通信手段７に渡し、さらに数値表示制御手段１に渡して、数値表示する。

ただし、この例ではグラフィック表示入力領域G1で最小５分単位としているので、数値データへの変換は０分、５分、１０分、１５分、２０分、２５分、３０分、３５分、４０分、４５分、５０分、５５分となる。

例えば図３の様に、ユーザーが数値表示入力領域N1の開始時刻J1の１行目にキーボードやテンキー等から直接数値（12:30）を入力した場合は、数値入力制御手段２が入力された数値データ（12:30）を数値表示制御手段１に渡して、数値表示制御手段１が開始時刻J1に数値データ（12:30）を表示する。さらに数値入力制御手段２は数値・位置データ変換手段３にこの数値データ（12:30）を送り、次に数値・位置データ変換手段３が数値データ（12:30）を位置データに変換して、相互通信手段７に変換した位置データを送り、相互通信手段７はグラフィック表示制御手段４にこの位置データを送り、グラフィック表示制御手段４はこの受け取った位置データ（12:30）に対応するグリッド位置に設定画像としての開始時刻の赤色矩形R1を表示する。

そして図４の様に、ユーザーが数値表示入力領域N1の終了時刻J2の１行目にキーボードやテンキー等から直接数値（12:55）を入力した場合は、数値入力制御手段２が入力された数値データ（12:55）を数値表示制御手段１に渡して、数値表示制御手段１が終了時刻J2に数値データ（12:55）を表示する。さらに数値入力制御手段２は数値・位置データ変換手段３にこの数値データ（12:55）を送り、次に数値・位置データ変換手段３が数値データ（12:55）を位置データに変換して、相互通信手段７に変換した位置データを送り、相互通信手段７はグラフィック表示制御手段４にこの位置データを送り、グラフィック表示制御手段４はこの受け取った位置データ（12:55）に対応するグリッド位置に設定画像としての終了時刻の赤色矩形R2を表示する。

また、ユーザーがマウス等のポインティングデバイスを使用してグラフィック表示入力領域G1上の任意の位置にマウスポインタを移動させると、その下のグリッド位置に青色矩形R3を表示して現指示位置を示す、通過するとそのグリッド位置は青色矩形に変わる直前の矩形色に戻る。

そして図５の様にグラフィック表示入力領域G1の最下位行の(13:15)の場所でマウスクリックすると、グラフィック入力制御手段５がそのグリッド位置をグラフィック表示制御手段４に渡して、グラフィック表示制御手段４がその位置に設定画像としての開始時刻の赤色矩形R１を表示する。さらにグラフィック入力制御手段５は位置・数値データ変換手段６にこの位置データを送り、次に位置・数値データ変換手段６が位置データを数値データ(13:15)に変換して、相互通信手段７に変換した数値データ(13:15)を送り、相互通信手段７は数値表示制御手段１にこの数値データ(13:15)を送り、数値表示制御手段１はこの受け取った数値データ(13:15)を対応する数値表示入力領域N1である最下位行の開始時刻J1に設定値として数値(13:15)を表示する。

また、終了時刻をマウスクリックにより入力したい場合は、任trl買Lーを押しながらクリックすれば終了時刻の入力であるとの識別をすることが出来るので、図６の様にグラフィック表示入力領域G1の最下位行の(13:40)の場所で任trl買Lーを押しながらマウスクリックすると、グラフィック入力制御手段５がそのグリッド位置をグラフィック表示制御手段４に渡してその位置に設定画像としての終了時刻の赤色矩形R2を表示し、さらにグラフィック入力制御手段５は位置・数値データ変換手段６にこの位置データを送り、次に位置・数値データ変換手段６が位置データを数値データ(13:40)に変換して、相互通信手段７に変換した数値データ(13:40)を送り、相互通信手段７は数値表示制御手段１にこの数値データ(13:40)を送り、数値表示制御手段１はこの受け取った数値データ(13:40)を対応する数値表示入力領域N1である最下位行の終了時刻J2に設定値として数値(13:40)を表示する。

上記

の方法により、実質４０個の時分を同じグラフィック表示領域でまかなう事が出来る。

特殊キーとは、任trl買Lー、尿lt買Lー、粘hift買Lー、ファンクションキー等何でもよく、これらを併用する事によりさらに多くの時分の表示・入力個数を、プログラムを複雑にすることなく、またクライアントPCの負荷を増加させることなく制御する事が出来る。

数値とは、年月日、日時、時刻、温度、湿度、圧力、流量、速さ、重さ、長さ、容積、個数、枚数、金額、割合等、その他数値で表せるものであればどのような数値でも対応可能である。

本発明は、Ｗebブラウザ上で実行されるHTML、CSS、及びJavaScriptを使用して、テーブル・タグ <td></td> のセット個数を１０分の１以下に減らす事により、クライアントPCの負荷を軽減させ実用に耐えうるグラフィカル・ユーザー・インターフェースを提供し、これにより多数の数値表示及び入力・変更の間違いを少なく容易かつ迅速に行える様になったので、例えば、Webインターフェースを使用したプログラムタイマの設定に使用することが出来る。

Webインターフェースを使用した予約管理システムに使用することが出来る。

Webインターフェースを使用した業務管理システムに使用することが出来る。

Webインターフェースを使用した工程管理システムに使用することが出来る。

Webインターフェースを使用した温度管理システムに使用することが出来る。

本発明のWebブラウザ表示画面である。本発明のプログラム構成図である。開始時刻の数値入力例である。終了時刻の数値入力例である。マウスクリックによる開始時刻の入力例である。任trl買Lー＋マウスクリックによる終了時刻の入力例である。

符号の説明

１：数値表示制御手段
２：数値入力制御手段
３：数値・位置データ変換手段
４：グラフィック表示制御手段
５：グラフィック入力制御手段
６：位置・数値データ変換手段
７：相互通信手段
N1：数値表示入力領域
G1：グラフィック表示入力領域
B1：スクロールボタン
S1：時間スケール
H1：１時間分の矩形グリッド
J1：開始時刻
J2：終了時刻
R1：開始時刻の赤色矩形
R2：終了時刻の赤色矩形
R3：現指示位置の青色矩形

Claims

Ｗebブラウザ上で実行される、HTML、CSS、及びJavaScriptを使用して、画面の片方に数値表示入力領域を作成し、同じ画面のもう一方にグラフィック表示入力領域を作成し、前記数値表示入力領域を制御する数値表示制御手段、数値入力制御手段及び、入力された数値データを位置データに変換する数値・位置データ変換手段と、前記グラフィック表示入力領域を制御するグラフィック表示制御手段、グラフィック入力制御手段及び、入力された位置データを数値データに変換する位置・数値データ変換手段と、前記数値表示入力領域と前記グラフィック表示入力領域と双方向にデータの橋渡しをする為の相互通信手段とを設け、前記グラフィック表示入力領域には予め入力数値の最小単位を１個の矩形としたもの複数個を１つの画像としてこれを必要個数並べてグリッドとして表示しておき、ユーザーが前記数値表示入力領域にキーボードやテンキー等から直接数値入力すると、前記数値入力制御手段が前記数値表示制御手段に入力された数値データを渡し、前記数値表示制御手段が受け取った数値を前記数値表示入力領域に表示し、さらに前記数値入力制御手段は前記数値・位置データ変換手段にこの数値データを送り、次に前記数値・位置データ変換手段が受け取った数値データを位置データに変換して前記相互通信手段にこの位置データを送り、前記相互通信手段は前記グラフィック表示制御手段にこの位置データを送り、前記グラフィック表示制御手段はこの受け取った位置データに該当する前記グラフィック表示入力領域のグリッド位置に設定値としての図形を表示し、またユーザーがマウス等のポインティングデバイスを使用して前記グラフィック表示入力領域上の任意のグリッド位置にマウスポインタを移動させると、前記グラフィック入力制御手段がその位置データを前記グラフィック表示制御手段に渡し、前記グラフィック表示制御手段がその位置データのグリッド位置に現指示位置としての図形を表示し、マウスポインタが隣のグリッドに移動すると前記グラフィック入力制御手段が新しい位置データを前記グラフィック表示制御手段に渡し、前記グラフィック表示制御手段が既に表示していた位置の現指示位置としての図形を消去し、新しい位置データのグリッド位置に現指示位置としての図形を表示し、マウスポインタがグリッド上を移動する度に上記の表示と消去を繰り返し、そして任意のグリッド位置でマウスクリックすると、前記グラフィック入力制御手段がその位置データを前記グラフィック表示制御手段に渡し、前記グラフィック表示制御手段がマウスクリックしたグリッド位置に設定値としての図形を表示し、さらに前記グラフィック入力制御手段が前記位置・数値データ変換手段にこの位置データを送り、次に前記位置・数値データ変換手段が受け取った位置データを数値データに変換して、前記相互通信手段にこの位置データを送り、前記相互通信手段は前記数値表示制御手段にこの数値データを送り、前記数値表示制御手段はこの受け取った数値データを前記数値表示領域に数値として表示する、この数値とグラフィックの対応を１行として複数行設ける事により多数の数値をグラフィカルに扱うことが出来るので、確認と変更が容易であることを特徴とするWebブラウザ上での数値表示制御及び数値入力支援プログラム。
前記グラフィック表示入力領域上からマウスクリックによって複数のセットとなる様な数値を入力する場合において、１番目の入力はマウスクリックのみとし、２番目の入力を行う時は特殊キー１を押しながらマウスクリックを行い、さらにもし３番目が有ればその入力を行う時は特殊キー２を押しながらマウスクリックを行う、もし４番目以降が有れば同様に特殊キーを併用してマウスクリックを行う、と言った方法で複数の数値のセット入力を可能としたことを特徴とする請求項１記載のWebブラウザ上での数値表示制御及び数値入力支援プログラム。
前記グラフィック表示入力領域でスクロールが必要となる場合においてはスクロールボタンを設け、スクロールバーによる表示位置の誤差による設定値または、現指示位置としての図形表示のズレ防止を特徴とする請求項１記載のWebブラウザ上での数値表示制御及び数値入力支援プログラム。
前記数値とは、年月日、日時、時刻、温度、湿度、圧力、流量、速さ、重さ、長さ、容積、個数、枚数、金額、割合等であることを特徴とする請求項１記載のWebブラウザ上での数値表示制御及び数値入力支援プログラム。