説明

サーバ装置、プログラムおよびクライアント装置

【課題】Web画面において、テキスト入力項目の入力可/不可の識別を容易にできるようにし、表示データが途切れて表示されてしまうといった問題を解決する。
【解決手段】テキストボックスによる入力項目を有するWebページをクライアント装置に配信するサーバ装置である。そして、Webページを構成するプログラムは、クライアント装置に、テキストボックスを非表示状態とする第1のステップと、テキストボックスに対応するアイコンのクリックに応じて所定の選択ダイアログ画面を表示させる第2のステップと、表示された選択ダイアログ画面から選択された内容を、非表示のテキストボックスへの入力として設定する第3のステップと、選択ダイアログ画面から選択された内容を、テキストボックスに代えてラベルとして表示させる第4のステップと、を実行させる記述を含む。

【発明の詳細な説明】
【技術分野】
【0001】
本発明の実施形態は、サーバ装置、プログラムおよびクライアント装置に関する。
【背景技術】
【0002】
従来より、Web画面において、そのテキストボックス等のテキスト入力項目に対するユーザの入力を不可とする制御が行われる場合がある。例えば、テキストボックスに「readonly」属性を付与することで、ユーザの入力を不可としていた。
【発明の概要】
【発明が解決しようとする課題】
【0003】
しかしながら、こうした従来技術においては、入力不可とされたテキストボックスの画面表示は、入力項目としてのテキストボックスと違いはないため、ユーザは入力項目であるか否かの判断が難しかった。また、別途用意されたダイアログ画面から、入力不可とされたテキストボックスに設定するため選択された内容のデータ長がテキストボックスに表示可能な長さを超える場合、表示データが途切れて表示されてしまうという問題があった。
【0004】
本発明が解決しようとする課題は、Web画面において、テキスト入力項目の入力可/不可の識別を容易にできるようにし、表示データが途切れてしまうといった問題を解決することができるサーバ装置、プログラムおよびクライアント装置を提供することである。
【課題を解決するための手段】
【0005】
実施形態のサーバ装置は、テキストボックスによる入力項目を有するWebページをクライアント装置に配信するサーバ装置である。そして、Webページを構成するプログラムは、クライアント装置に、テキストボックスを非表示状態とする第1のステップと、テキストボックスに対応するアイコンのクリックに応じて所定の選択ダイアログ画面を表示させる第2のステップと、表示された選択ダイアログ画面から選択された内容を、非表示のテキストボックスへの入力として設定する第3のステップと、選択ダイアログ画面から選択された内容を、テキストボックスに代えてラベルとして表示させる第4のステップと、を実行させる記述を含む。
【図面の簡単な説明】
【0006】
【図1】図1は、一実施形態であるサーバ装置を含む、システム構成例を示すブロック図である。
【図2】図2は、サーバ装置の基本的なハードウェア構成例を示すブロック図である。
【図3】図3は、従来例としてのダイアログ画面の一例を示す図である。
【図4】図4は、実施形態と対比する従来例としてのダイアログ画面の一例を示す図である。
【図5】図5は、選択ダイアログ画面の一例を示す図である。
【図6】図6は、選択ダイアログ画面の一例を示す図である。
【図7】図7は、選択ダイアログ画面の一例を示す図である。
【図8】図8は、実施形態と対比する代替例としてのダイアログ画面の一例を示す図である。
【図9】図9は、実施形態のサーバ装置によるダイアログ画面の一例を示す図である。
【図10】図10は、実施形態のサーバ装置によるWebページの一例を示す図である。
【図11】図11は、実施形態のサーバ装置によるWebページに含まれるhtmlによる記述の一例を示す図である。
【図12】図12は、JavaScript(登録商標)を用いた表示制御フローを示すフローチャートである。
【図13】図13は、実施形態のサーバ装置によるWebページに含まれる、JavaScriptによる記述の一例を示す図である。
【図14】図14は、実施形態のサーバ装置によるWebページに含まれる、JavaScriptによる記述の一例を示す図である。
【図15】図15は、実施形態のサーバ装置によるWebページに含まれる、JavaScriptによる記述の一例例を示す図である。
【発明を実施するための形態】
【0007】
図1は、一実施形態であるサーバ装置を含む、システム構成例を示すブロック図である。図1に示す例では、サーバ装置10が所定のネットワークを介してクライアント装置20に接続されている。サーバ装置10からWebページがクライアント装置20に配信される。そして、このWebページがクライアント装置20の表示部15にWeb画面として表示される。ここでネットワークの種類は任意であり、例えばLAN(Local Area Network)であってもよいし、インターネットであってもよい。また、図1では、1台のクライアント装置20のみを例示しているが、その数は任意である。
【0008】
図2は、サーバ装置10の基本的なハードウェア構成例を示すブロック図である。図2に示すように、サーバ装置10は、CPU11と、ROM(Read Only Memory)12と、RAM(Random Access Memory)13と、二次記憶装置14と、表示部15と、通信I/F部16とを含んで構成されるコンピュータである。
【0009】
CPU11は、ROM12や二次記憶装置14に格納された所定の制御プログラムをRAM13上にロードして実行することにより、サーバ装置10全体を制御する。ROM12には、初期プログラムや各種データが記憶される。
【0010】
RAM13は、主記憶として、また各種プログラムを実行する際に各種データを一時的に保持するワークメモリとして使用される揮発性の半導体メモリである。二次記憶装置14は、各種プログラムやデータを記憶する不揮発性の記憶装置であり、HDD(Hard Disk Drive)などで構成される。
【0011】
表示部15は、サーバ装置10で生成される各種の画像を表示する手段であり、例えば液晶パネルなどで構成される。通信I/F16は、クライアント装置20との間で通信を行うためのインタフェース装置である。なお、クライアント装置20の基本的なハードウェア構成も、サーバ装置10の構成例と同様であるので、その詳細な説明は省略する。
【0012】
(従来例)
ここで、タイトル等の表示領域、テキストボックス等の入力領域、ならびにOKボタンおよびキャンセルボタンを含む、従来例としてのWeb画面の1種であるダイアログ画面の一例を図3に示す。図3に示すダイアログ画面100の符号101aの領域は、「カテゴリ1」に対応するテキストボックスであり、符号102aの領域は「カテゴリ2」に対応するテキストボックスである。以下、この従来例および代替例ならびに本実施形態における制御に関して、このテキストボックス101aおよび102aに着目して説明する。なお、「テキストボックス」とは、周知のように、グラフィカルユーザインタフェースの基本要素の1つで、ユーザがテキスト情報を入力するためのインタフェースとして使用される。
【0013】
図3の例では、テキストボックス101aおよび102aに入力されたテキスト情報は、OKボタンの押下によりシステムのデータベース(図示せず)に登録される。
【0014】
(代替例)
続いて、本実施形態と対比するため代替例を図4に例示し説明する。「テキストボックス」には、一般的にはユーザによる手入力が行われるが、外部のマスタデータのみが入力可能とされる場合がある。この場合、ユーザによる手入力は不可となる。本代替例は、「カテゴリ1」および「カテゴリ2」に対応するテキストボックス101aおよび102aが、ユーザによるテキスト情報の手入力ではなく、外部の(例えば、サーバ装置10が管理する)マスタデータ(図示せず)を用いて入力する場合の例である。
【0015】
図4は、ユーザによる手入力を不可とするために、ダイアログ画面100のテキストボックス101aおよび102aに対し「readonly」属性を付与したときの画面例である。この属性を付与したときテキストボックス101aおよび102aはユーザによるテキスト情報の手入力は不可となる。
【0016】
また、外部のマスタデータを用いて入力するため、図5に一例を示す選択ダイアログ画面200が用意される。この選択ダイアログ画面200は、マスタデータに含まれる各データを、符号210の領域に一覧として表示して、ユーザに所望のデータを選択させ、選択されたデータをOKボタンの押下に応じてテキストボックス101aまたは102aに設定するためのものである。なお、キャンセルボタンが押下された場合は何も設定されない。この選択ダイアログ画面200は、図4に示すアイコン画像111または112がクリックされたときに、対応するマスタデータの内容を含んで表示される。
【0017】
例えば、「カテゴリ1」に対応するアイコン画像111がクリックされると、図5の選択ダイアログ画面200が表示される。そして、図6に示すように、符号211で示す選択項目の「システム部よりお知らせ」がユーザにより選択されてOKボタンが押下されると、図8に示すダイアログ画面100のテキストボックス101aに、マスタデータから選択された「システム部よりお知らせ」が入力されるテキスト情報として設定されて表示される。一方、「カテゴリ2」に対応するアイコン画像112が押下されると、図7に一例として示す選択ダイアログ画面200が表示され、これから符号212の選択項目が選択されてOKボタンが押下されると、図8に示すように、テキストボックス102aに、選択された内容が設定され表示される。
【0018】
しかしこの従来例では、テキストボックス101aおよび102aの画面表示は、「readonly」属性を付与しないときのもの(図3参照)と違いはないため、ユーザはこれらのテキストボックス101aおよび102aが入力項目であるのか否かの判断が難しい。また選択された項目のデータ長により、表示データが途切れてしまう場合がある。
【0019】
(本実施形態)
次に、本実施形態の場合を説明する。本実施形態も上記従来例2と同様に、テキストボックス(ここでは101aおよび102a)に対して、外部のマスタデータのみが入力可とされる場合の形態である。本実施形態では、テキストボックス101aおよび102aに「readonly」属性を付与して、ユーザによる手入力を不可とするが、さらにこのテキストボックス101aおよび102aを非表示として、テキストボックス101aおよび102aの表示領域に、ラベル101bおよび102bを表示するようにする(図9)。そして、上述の代替例と同様に、外部のマスタデータから入力項目が選択されると、その内容(テキスト情報)がテキストボックス101aおよび102aに入力設定され、さらに、その内容がラベル101bおよび102bに表示されるようにしている(図10)。
【0020】
続いて、図9および図10に示すようなダイアログ画面を構成するための詳細を以下に説明する。
【0021】
図11は、ダイアログ画面100における「カテゴリ1」に対応する非表示のテキストボックス101a(図9および図10中非表示)およびアイコン画像111部分を構成するためのHTML(HyperText Markup Language)文である。
【0022】
第1文は、そのクリックに応じて選択ダイアログ画面を表示するための符号111のアイコン画像(icon.gif)と、このアイコン画像111のクリックに応じて(onclick)起動させるスクリプト(showCategoryDialog())を指定する文である。第2文は、ラベル表示用のspanタグ文であり、第3文は、本来の入力項目を規定するtext属性のinputタグ文を含み、その表示を非表示とする(style=”display:none”)spanタグ文である。これらの文に基づき、非表示とされるテキストボックス101aおよびアイコン画像111がダイアログ画面100上に構成される。
【0023】
「カテゴリ2」に対応する非表示のテキストボックス102a(図9および図10中非表示)およびアイコン画像112部分も同様にして構成される。
【0024】
続いて、外部のマスタデータからのテキストボックス101aおよび102aへの、選択された項目の入力と、ラベル101bおよび102bによる、選択された項目の表示のための制御方法について、図12〜図15を用いて説明する。
【0025】
図12は、図13〜14に一例として示すJavaScriptを用いた表示制御フローを示すフローチャートである。なお、下記の表示制御フローは、上記HTML文により、テキストボックス101aおよび102aが非表示状態とされ、上記ダイアログ画面100からアイコン画像111または112がクリックされ、表示された選択ダイアログ画面200からユーザによる選択がなされた後の制御である。
【0026】
まず、アイコン画像111または112のクリックにより表示される選択ダイアログ画面200のリターン値を取得する(ステップS101)。この制御のための、JavaScriptによる記述例を図13に示す。図13の例では、モーダルダイアログボックスである選択ダイアログ画面200からのリターン値(showModalDialog(dialogUrl,…))が変数resultに設定される。
【0027】
次いで、前述のinputタグに対し、そのvalue属性に上記リターン値をセットする(ステップS102)。この制御のための、「カテゴリ1」に対応するJavaScriptによる記述例を図14に示す。図14の例では、document.getElementById(”txtCategry1”)で、IDが”txtCategry1”のエレメントを取得して変数txtCategry1にセットし、「カテゴリ1」に対応する選択ダイアログ画面のリターン値(result.category1)を、上記value属性(txtCategry1.value)にセットしている。これにより、テキストボックス101aに、選択ダイアログ画面200から選択された項目が入力されることとなる。
【0028】
さらに、ラベルに関する前述のspanタグに対し、そのinnerText属性に上記リターン値をセットする(ステップS103)。この制御のための、「カテゴリ1」に対応するJavaScriptによる記述例を図15に示す。図15の例では、document.getElementById(”lblCategry1”)で、IDが”lblCategry1”のエレメントを取得して変数lblCategry1にセットし、「カテゴリ1」に対応するリターン値(result.category1)を、上記innerText属性(lblCategry1.innerText)にセットしている。これにより、ラベル101bに、選択ダイアログ画面200から選択された項目が表示されることとなる。
【0029】
本実施形態では、「カテゴリ1」に対応する選択ダイアログ画面200のリターン値となる「result.category1」を、本来の入力項目となるinputタグのvalue属性(txtCategory1.value)のほか、ラベルに関するspanタグのinnerText属性(lblCategory1.innerText)にもセットする。これにより、選択ダイアログ画面から選択された項目はラベルとして表示されるが、本来の入力項目となるinputタグのvalue属性にもその内容がセットされているので(「カテゴリ2」についても同様)、ダイアログ画面100でのその後のユーザのOKボタンの押下により、入力内容の登録処理は従来通り行われることとなる。
【0030】
以上説明したように、本実施形態では、図9に示すように、ダイアログ画面100における入力内容の表示はラベルを利用して行うため、ユーザは必要とされる入力項目を判断し易くなり、また、入力内容のデータ長により表示が途切れてしまうこともなくなる。
【0031】
なお、本実施形態のサーバ装置10からWebページを配信するプログラムは、インストール可能な形式又は実行可能な形式のファイルでCD−ROM、フレキシブルディスク(FD)、CD−R、DVD(Digital Versatile Disk)等のコンピュータで読み取り可能な記録媒体に記録して提供するように構成してもよい。あるいは、このプログラムを、インターネット等のネットワークに接続されたコンピュータ上に格納し、ネットワーク経由でダウンロードさせることにより、または配信することにより提供するように構成してもよい。あるいは、このプログラムを、ROMやHDD等の不揮発性の記憶装置に予め組み込んで提供するように構成してもよい。
【0032】
また、上述の実施形態では、Webページに含まれるダイアログ画面を構成するための実施例として、HTMLおよびJavaScript(登録商標)による記述を例に説明したが、HTMLおよびJavaScriptを拡張したプログラム言語やその他のプログラム言語を用いても、実施形態のダイアログ画面を構成することは可能である。また、上記ダイアログ画面を構成するプログラムは予め用意してもよいし、Webページを配信する際生成するようにしてもよい。また、上記ダイアログ画面を構成するプログラムの配信を受けた後のクライアント装置、または、上記ダイアログ画面を構成するプログラムと同様のプログラムを実装するクライアント装置は、上記プログラムにより実現される機能(手段)を備える装置とみなすことができる。また、Webサーバ30の実現には、単独のサーバ装置に限らず、例えば、クラウドコンピューティングを利用することができる。
【0033】
以上、本発明の実施形態を説明したが、この実施形態は、例として提示したものであり、発明の範囲を限定することは意図していない。この新規な実施形態は、その他の様々な形態で実施されることが可能であり、発明の要旨を逸脱しない範囲で、種々の省略、置き換え、変更を行うことができる。また、この実施形態やその変形は、発明の範囲や要旨に含まれるとともに、特許請求の範囲に記載された発明とその均等の範囲に含まれる。
【符号の説明】
【0034】
10 サーバ装置
11 CPU
12 ROM
13 RAM
14 二次記憶装置
15 表示部
16 通信I/F
20 クライアント装置
【先行技術文献】
【特許文献】
【0035】
【特許文献1】特開2006−155598号公報

【特許請求の範囲】
【請求項1】
テキストボックスによる入力項目を有するWebページをクライアント装置に配信するサーバ装置であって、
前記Webページを構成するプログラムは、前記クライアント装置に、
前記テキストボックスを非表示状態とする第1のステップと、
前記テキストボックスに対応するアイコンのクリックに応じて所定の選択ダイアログ画面を表示させる第2のステップと、
表示された前記選択ダイアログ画面から選択された内容を、非表示の前記テキストボックスへの入力として設定する第3のステップと、
前記選択ダイアログ画面から選択された内容を、前記テキストボックスに代えてラベルとして表示させる第4のステップと、
を実行させる記述を含む、サーバ装置。
【請求項2】
前記選択ダイアログ画面は、前記クライアント装置の外部からのマスタデータを、選択のための一覧として含む、請求項1に記載のサーバ装置。
【請求項3】
前記プログラムは、HTML(HyperText Markup Language)およびJavaScriptに基づくものである、請求項1または請求項2に記載のサーバ装置。
【請求項4】
テキストボックスによる入力項目を有するWebページを構成するプログラムであって、クライアント装置に、
前記テキストボックスを非表示状態とする第1のステップと、
前記テキストボックスに対応するアイコンのクリックに応じて所定の選択ダイアログ画面を表示させる第2のステップと、
表示された前記選択ダイアログ画面から選択された内容を、非表示の前記テキストボックスへの入力として設定する第3のステップと、
前記選択ダイアログ画面から選択された内容を、前記テキストボックスに代えてラベルとして表示させる第4のステップと、
を実行させる記述を含む、プログラム。
【請求項5】
テキストボックスを非表示状態とする非表示手段と、
前記テキストボックスに対応するアイコンのクリックに応じて所定の選択ダイアログ画面を表示させるダイアログ表示手段と、
表示された前記選択ダイアログ画面から選択された内容を、非表示の前記テキストボックスへの入力として設定する入力手段と、
前記選択ダイアログ画面から選択された内容を、前記テキストボックスに代えてラベルとして表示させるラベル表示手段と、
を備える、クライアント装置。
【請求項6】
前記選択ダイアログ画面は、外部からのマスタデータを、選択のための一覧として含む、請求項5に記載のクライアント装置。

【図1】
image rotate

【図2】
image rotate

【図3】
image rotate

【図4】
image rotate

【図5】
image rotate

【図6】
image rotate

【図7】
image rotate

【図8】
image rotate

【図9】
image rotate

【図10】
image rotate

【図11】
image rotate

【図12】
image rotate

【図13】
image rotate

【図14】
image rotate

【図15】
image rotate