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

Abstract

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

Description

本発明の実施形態は、サーバ装置、プログラムおよびクライアント装置に関する。

従来より、Ｗｅｂ画面において、そのテキストボックス等のテキスト入力項目に対するユーザの入力を不可とする制御が行われる場合がある。例えば、テキストボックスに「ｒｅａｄｏｎｌｙ」属性を付与することで、ユーザの入力を不可としていた。

しかしながら、こうした従来技術においては、入力不可とされたテキストボックスの画面表示は、入力項目としてのテキストボックスと違いはないため、ユーザは入力項目であるか否かの判断が難しかった。また、別途用意されたダイアログ画面から、入力不可とされたテキストボックスに設定するため選択された内容のデータ長がテキストボックスに表示可能な長さを超える場合、表示データが途切れて表示されてしまうという問題があった。

本発明が解決しようとする課題は、Ｗｅｂ画面において、テキスト入力項目の入力可／不可の識別を容易にできるようにし、表示データが途切れてしまうといった問題を解決することができるサーバ装置、プログラムおよびクライアント装置を提供することである。

実施形態のサーバ装置は、テキストボックスによる入力項目を有するＷｅｂページをクライアント装置に配信するサーバ装置である。そして、Ｗｅｂページを構成するプログラムは、クライアント装置に、テキストボックスを非表示状態とする第１のステップと、テキストボックスに対応するアイコンのクリックに応じて所定の選択ダイアログ画面を表示させる第２のステップと、表示された選択ダイアログ画面から選択された内容を、非表示のテキストボックスへの入力として設定する第３のステップと、選択ダイアログ画面から選択された内容を、テキストボックスに代えてラベルとして表示させる第４のステップと、を実行させる記述を含む。

図１は、一実施形態であるサーバ装置を含む、システム構成例を示すブロック図である。 図２は、サーバ装置の基本的なハードウェア構成例を示すブロック図である。 図３は、従来例としてのダイアログ画面の一例を示す図である。 図４は、実施形態と対比する従来例としてのダイアログ画面の一例を示す図である。 図５は、選択ダイアログ画面の一例を示す図である。 図６は、選択ダイアログ画面の一例を示す図である。 図７は、選択ダイアログ画面の一例を示す図である。 図８は、実施形態と対比する代替例としてのダイアログ画面の一例を示す図である。 図９は、実施形態のサーバ装置によるダイアログ画面の一例を示す図である。 図１０は、実施形態のサーバ装置によるＷｅｂページの一例を示す図である。 図１１は、実施形態のサーバ装置によるＷｅｂページに含まれるｈｔｍｌによる記述の一例を示す図である。 図１２は、ＪａｖａＳｃｒｉｐｔ（登録商標）を用いた表示制御フローを示すフローチャートである。 図１３は、実施形態のサーバ装置によるＷｅｂページに含まれる、ＪａｖａＳｃｒｉｐｔによる記述の一例を示す図である。 図１４は、実施形態のサーバ装置によるＷｅｂページに含まれる、ＪａｖａＳｃｒｉｐｔによる記述の一例を示す図である。 図１５は、実施形態のサーバ装置によるＷｅｂページに含まれる、ＪａｖａＳｃｒｉｐｔによる記述の一例例を示す図である。

図１は、一実施形態であるサーバ装置を含む、システム構成例を示すブロック図である。図１に示す例では、サーバ装置１０が所定のネットワークを介してクライアント装置２０に接続されている。サーバ装置１０からＷｅｂページがクライアント装置２０に配信される。そして、このＷｅｂページがクライアント装置２０の表示部１５にＷｅｂ画面として表示される。ここでネットワークの種類は任意であり、例えばＬＡＮ（Local Area Network）であってもよいし、インターネットであってもよい。また、図１では、１台のクライアント装置２０のみを例示しているが、その数は任意である。

図２は、サーバ装置１０の基本的なハードウェア構成例を示すブロック図である。図２に示すように、サーバ装置１０は、ＣＰＵ１１と、ＲＯＭ（Read Only Memory）１２と、ＲＡＭ(Random Access Memory)１３と、二次記憶装置１４と、表示部１５と、通信Ｉ／Ｆ部１６とを含んで構成されるコンピュータである。

ＣＰＵ１１は、ＲＯＭ１２や二次記憶装置１４に格納された所定の制御プログラムをＲＡＭ１３上にロードして実行することにより、サーバ装置１０全体を制御する。ＲＯＭ１２には、初期プログラムや各種データが記憶される。

ＲＡＭ１３は、主記憶として、また各種プログラムを実行する際に各種データを一時的に保持するワークメモリとして使用される揮発性の半導体メモリである。二次記憶装置１４は、各種プログラムやデータを記憶する不揮発性の記憶装置であり、ＨＤＤ（Hard Disk Drive）などで構成される。

表示部１５は、サーバ装置１０で生成される各種の画像を表示する手段であり、例えば液晶パネルなどで構成される。通信Ｉ／Ｆ１６は、クライアント装置２０との間で通信を行うためのインタフェース装置である。なお、クライアント装置２０の基本的なハードウェア構成も、サーバ装置１０の構成例と同様であるので、その詳細な説明は省略する。

（従来例）
ここで、タイトル等の表示領域、テキストボックス等の入力領域、ならびにＯＫボタンおよびキャンセルボタンを含む、従来例としてのＷｅｂ画面の１種であるダイアログ画面の一例を図３に示す。図３に示すダイアログ画面１００の符号１０１ａの領域は、「カテゴリ１」に対応するテキストボックスであり、符号１０２ａの領域は「カテゴリ２」に対応するテキストボックスである。以下、この従来例および代替例ならびに本実施形態における制御に関して、このテキストボックス１０１ａおよび１０２ａに着目して説明する。なお、「テキストボックス」とは、周知のように、グラフィカルユーザインタフェースの基本要素の１つで、ユーザがテキスト情報を入力するためのインタフェースとして使用される。

図３の例では、テキストボックス１０１ａおよび１０２ａに入力されたテキスト情報は、ＯＫボタンの押下によりシステムのデータベース（図示せず）に登録される。

（代替例）
続いて、本実施形態と対比するため代替例を図４に例示し説明する。「テキストボックス」には、一般的にはユーザによる手入力が行われるが、外部のマスタデータのみが入力可能とされる場合がある。この場合、ユーザによる手入力は不可となる。本代替例は、「カテゴリ１」および「カテゴリ２」に対応するテキストボックス１０１ａおよび１０２ａが、ユーザによるテキスト情報の手入力ではなく、外部の（例えば、サーバ装置１０が管理する）マスタデータ（図示せず）を用いて入力する場合の例である。

図４は、ユーザによる手入力を不可とするために、ダイアログ画面１００のテキストボックス１０１ａおよび１０２ａに対し「ｒｅａｄｏｎｌｙ」属性を付与したときの画面例である。この属性を付与したときテキストボックス１０１ａおよび１０２ａはユーザによるテキスト情報の手入力は不可となる。

また、外部のマスタデータを用いて入力するため、図５に一例を示す選択ダイアログ画面２００が用意される。この選択ダイアログ画面２００は、マスタデータに含まれる各データを、符号２１０の領域に一覧として表示して、ユーザに所望のデータを選択させ、選択されたデータをＯＫボタンの押下に応じてテキストボックス１０１ａまたは１０２ａに設定するためのものである。なお、キャンセルボタンが押下された場合は何も設定されない。この選択ダイアログ画面２００は、図４に示すアイコン画像１１１または１１２がクリックされたときに、対応するマスタデータの内容を含んで表示される。

例えば、「カテゴリ１」に対応するアイコン画像１１１がクリックされると、図５の選択ダイアログ画面２００が表示される。そして、図６に示すように、符号２１１で示す選択項目の「システム部よりお知らせ」がユーザにより選択されてＯＫボタンが押下されると、図８に示すダイアログ画面１００のテキストボックス１０１ａに、マスタデータから選択された「システム部よりお知らせ」が入力されるテキスト情報として設定されて表示される。一方、「カテゴリ２」に対応するアイコン画像１１２が押下されると、図７に一例として示す選択ダイアログ画面２００が表示され、これから符号２１２の選択項目が選択されてＯＫボタンが押下されると、図８に示すように、テキストボックス１０２ａに、選択された内容が設定され表示される。

しかしこの従来例では、テキストボックス１０１ａおよび１０２ａの画面表示は、「ｒｅａｄｏｎｌｙ」属性を付与しないときのもの（図３参照）と違いはないため、ユーザはこれらのテキストボックス１０１ａおよび１０２ａが入力項目であるのか否かの判断が難しい。また選択された項目のデータ長により、表示データが途切れてしまう場合がある。

（本実施形態）
次に、本実施形態の場合を説明する。本実施形態も上記従来例２と同様に、テキストボックス（ここでは１０１ａおよび１０２ａ）に対して、外部のマスタデータのみが入力可とされる場合の形態である。本実施形態では、テキストボックス１０１ａおよび１０２ａに「ｒｅａｄｏｎｌｙ」属性を付与して、ユーザによる手入力を不可とするが、さらにこのテキストボックス１０１ａおよび１０２ａを非表示として、テキストボックス１０１ａおよび１０２ａの表示領域に、ラベル１０１ｂおよび１０２ｂを表示するようにする（図９）。そして、上述の代替例と同様に、外部のマスタデータから入力項目が選択されると、その内容（テキスト情報）がテキストボックス１０１ａおよび１０２ａに入力設定され、さらに、その内容がラベル１０１ｂおよび１０２ｂに表示されるようにしている（図１０）。

続いて、図９および図１０に示すようなダイアログ画面を構成するための詳細を以下に説明する。

図１１は、ダイアログ画面１００における「カテゴリ１」に対応する非表示のテキストボックス１０１ａ（図９および図１０中非表示）およびアイコン画像１１１部分を構成するためのＨＴＭＬ（HyperText Markup Language）文である。

第１文は、そのクリックに応じて選択ダイアログ画面を表示するための符号１１１のアイコン画像（ｉｃｏｎ．ｇｉｆ）と、このアイコン画像１１１のクリックに応じて（ｏｎｃｌｉｃｋ）起動させるスクリプト（ｓｈｏｗＣａｔｅｇｏｒｙＤｉａｌｏｇ（））を指定する文である。第２文は、ラベル表示用のｓｐａｎタグ文であり、第３文は、本来の入力項目を規定するｔｅｘｔ属性のｉｎｐｕｔタグ文を含み、その表示を非表示とする（ｓｔｙｌｅ＝”ｄｉｓｐｌａｙ：ｎｏｎｅ”）ｓｐａｎタグ文である。これらの文に基づき、非表示とされるテキストボックス１０１ａおよびアイコン画像１１１がダイアログ画面１００上に構成される。

「カテゴリ２」に対応する非表示のテキストボックス１０２ａ（図９および図１０中非表示）およびアイコン画像１１２部分も同様にして構成される。

続いて、外部のマスタデータからのテキストボックス１０１ａおよび１０２ａへの、選択された項目の入力と、ラベル１０１ｂおよび１０２ｂによる、選択された項目の表示のための制御方法について、図１２〜図１５を用いて説明する。

図１２は、図１３〜１４に一例として示すＪａｖａＳｃｒｉｐｔを用いた表示制御フローを示すフローチャートである。なお、下記の表示制御フローは、上記ＨＴＭＬ文により、テキストボックス１０１ａおよび１０２ａが非表示状態とされ、上記ダイアログ画面１００からアイコン画像１１１または１１２がクリックされ、表示された選択ダイアログ画面２００からユーザによる選択がなされた後の制御である。

まず、アイコン画像１１１または１１２のクリックにより表示される選択ダイアログ画面２００のリターン値を取得する（ステップＳ１０１）。この制御のための、ＪａｖａＳｃｒｉｐｔによる記述例を図１３に示す。図１３の例では、モーダルダイアログボックスである選択ダイアログ画面２００からのリターン値（ｓｈｏｗＭｏｄａｌＤｉａｌｏｇ（ｄｉａｌｏｇＵｒｌ，…））が変数ｒｅｓｕｌｔに設定される。

次いで、前述のｉｎｐｕｔタグに対し、そのｖａｌｕｅ属性に上記リターン値をセットする（ステップＳ１０２）。この制御のための、「カテゴリ１」に対応するＪａｖａＳｃｒｉｐｔによる記述例を図１４に示す。図１４の例では、ｄｏｃｕｍｅｎｔ．ｇｅｔＥｌｅｍｅｎｔＢｙＩｄ（”ｔｘｔＣａｔｅｇｒｙ１”）で、ＩＤが”ｔｘｔＣａｔｅｇｒｙ１”のエレメントを取得して変数ｔｘｔＣａｔｅｇｒｙ１にセットし、「カテゴリ１」に対応する選択ダイアログ画面のリターン値（ｒｅｓｕｌｔ．ｃａｔｅｇｏｒｙ１）を、上記ｖａｌｕｅ属性（ｔｘｔＣａｔｅｇｒｙ１．ｖａｌｕｅ）にセットしている。これにより、テキストボックス１０１ａに、選択ダイアログ画面２００から選択された項目が入力されることとなる。

さらに、ラベルに関する前述のｓｐａｎタグに対し、そのｉｎｎｅｒＴｅｘｔ属性に上記リターン値をセットする（ステップＳ１０３）。この制御のための、「カテゴリ１」に対応するＪａｖａＳｃｒｉｐｔによる記述例を図１５に示す。図１５の例では、ｄｏｃｕｍｅｎｔ．ｇｅｔＥｌｅｍｅｎｔＢｙＩｄ（”ｌｂｌＣａｔｅｇｒｙ１”）で、ＩＤが”ｌｂｌＣａｔｅｇｒｙ１”のエレメントを取得して変数ｌｂｌＣａｔｅｇｒｙ１にセットし、「カテゴリ１」に対応するリターン値（ｒｅｓｕｌｔ．ｃａｔｅｇｏｒｙ１）を、上記ｉｎｎｅｒＴｅｘｔ属性（ｌｂｌＣａｔｅｇｒｙ１．ｉｎｎｅｒＴｅｘｔ）にセットしている。これにより、ラベル１０１ｂに、選択ダイアログ画面２００から選択された項目が表示されることとなる。

本実施形態では、「カテゴリ１」に対応する選択ダイアログ画面２００のリターン値となる「ｒｅｓｕｌｔ．ｃａｔｅｇｏｒｙ１」を、本来の入力項目となるｉｎｐｕｔタグのｖａｌｕｅ属性（ｔｘｔＣａｔｅｇｏｒｙ１．ｖａｌｕｅ）のほか、ラベルに関するｓｐａｎタグのｉｎｎｅｒＴｅｘｔ属性（ｌｂｌＣａｔｅｇｏｒｙ１．ｉｎｎｅｒＴｅｘｔ）にもセットする。これにより、選択ダイアログ画面から選択された項目はラベルとして表示されるが、本来の入力項目となるｉｎｐｕｔタグのｖａｌｕｅ属性にもその内容がセットされているので（「カテゴリ２」についても同様）、ダイアログ画面１００でのその後のユーザのＯＫボタンの押下により、入力内容の登録処理は従来通り行われることとなる。

以上説明したように、本実施形態では、図９に示すように、ダイアログ画面１００における入力内容の表示はラベルを利用して行うため、ユーザは必要とされる入力項目を判断し易くなり、また、入力内容のデータ長により表示が途切れてしまうこともなくなる。

なお、本実施形態のサーバ装置１０からＷｅｂページを配信するプログラムは、インストール可能な形式又は実行可能な形式のファイルでＣＤ−ＲＯＭ、フレキシブルディスク（ＦＤ）、ＣＤ−Ｒ、ＤＶＤ（Digital Versatile Disk）等のコンピュータで読み取り可能な記録媒体に記録して提供するように構成してもよい。あるいは、このプログラムを、インターネット等のネットワークに接続されたコンピュータ上に格納し、ネットワーク経由でダウンロードさせることにより、または配信することにより提供するように構成してもよい。あるいは、このプログラムを、ＲＯＭやＨＤＤ等の不揮発性の記憶装置に予め組み込んで提供するように構成してもよい。

また、上述の実施形態では、Ｗｅｂページに含まれるダイアログ画面を構成するための実施例として、ＨＴＭＬおよびＪａｖａＳｃｒｉｐｔ（登録商標）による記述を例に説明したが、ＨＴＭＬおよびＪａｖａＳｃｒｉｐｔを拡張したプログラム言語やその他のプログラム言語を用いても、実施形態のダイアログ画面を構成することは可能である。また、上記ダイアログ画面を構成するプログラムは予め用意してもよいし、Ｗｅｂページを配信する際生成するようにしてもよい。また、上記ダイアログ画面を構成するプログラムの配信を受けた後のクライアント装置、または、上記ダイアログ画面を構成するプログラムと同様のプログラムを実装するクライアント装置は、上記プログラムにより実現される機能（手段）を備える装置とみなすことができる。また、Ｗｅｂサーバ３０の実現には、単独のサーバ装置に限らず、例えば、クラウドコンピューティングを利用することができる。

以上、本発明の実施形態を説明したが、この実施形態は、例として提示したものであり、発明の範囲を限定することは意図していない。この新規な実施形態は、その他の様々な形態で実施されることが可能であり、発明の要旨を逸脱しない範囲で、種々の省略、置き換え、変更を行うことができる。また、この実施形態やその変形は、発明の範囲や要旨に含まれるとともに、特許請求の範囲に記載された発明とその均等の範囲に含まれる。

１０ サーバ装置
１１ ＣＰＵ
１２ ＲＯＭ
１３ ＲＡＭ
１４ 二次記憶装置
１５ 表示部
１６ 通信Ｉ／Ｆ
２０ クライアント装置

特開２００６−１５５５９８号公報

Claims (6)

1. テキストボックスによる入力項目を有するＷｅｂページをクライアント装置に配信するサーバ装置であって、
   前記Ｗｅｂページを構成するプログラムは、前記クライアント装置に、
   前記テキストボックスを非表示状態とする第１のステップと、
   前記テキストボックスに対応するアイコンのクリックに応じて所定の選択ダイアログ画面を表示させる第２のステップと、
   表示された前記選択ダイアログ画面から選択された内容を、非表示の前記テキストボックスへの入力として設定する第３のステップと、
   前記選択ダイアログ画面から選択された内容を、前記テキストボックスに代えてラベルとして表示させる第４のステップと、
   を実行させる記述を含む、サーバ装置。
2. 前記選択ダイアログ画面は、前記クライアント装置の外部からのマスタデータを、選択のための一覧として含む、請求項１に記載のサーバ装置。
3. 前記プログラムは、ＨＴＭＬ（HyperText Markup Language）およびＪａｖａＳｃｒｉｐｔに基づくものである、請求項１または請求項２に記載のサーバ装置。
4. テキストボックスによる入力項目を有するＷｅｂページを構成するプログラムであって、クライアント装置に、
   前記テキストボックスを非表示状態とする第１のステップと、
   前記テキストボックスに対応するアイコンのクリックに応じて所定の選択ダイアログ画面を表示させる第２のステップと、
   表示された前記選択ダイアログ画面から選択された内容を、非表示の前記テキストボックスへの入力として設定する第３のステップと、
   前記選択ダイアログ画面から選択された内容を、前記テキストボックスに代えてラベルとして表示させる第４のステップと、
   を実行させる記述を含む、プログラム。
5. テキストボックスを非表示状態とする非表示手段と、
   前記テキストボックスに対応するアイコンのクリックに応じて所定の選択ダイアログ画面を表示させるダイアログ表示手段と、
   表示された前記選択ダイアログ画面から選択された内容を、非表示の前記テキストボックスへの入力として設定する入力手段と、
   前記選択ダイアログ画面から選択された内容を、前記テキストボックスに代えてラベルとして表示させるラベル表示手段と、
   を備える、クライアント装置。
6. 前記選択ダイアログ画面は、外部からのマスタデータを、選択のための一覧として含む、請求項５に記載のクライアント装置。

Images