説明

画面項目位置調整プログラム及び方法

【課題】画面項目位置調整に係わり、ユーザが要する作業を軽減し、短時間で見た目を損なわないレイアウトを可能とする。
【解決手段】本プログラム(アプリケーション)は、ユーザ操作による画面での複数の項目の配置の位置を自動的及び動的に調整する第1のモジュールの処理において、画面にグリッド及び複数の項目を表示する処理(S1)、ユーザ操作により画面及びグリッド上で項目を移動させる処理(S2)、上記移動させた項目の位置とグリッドとを比較し、グリッドのマスに合う位置に微調整するように当該項目を自動的に配置する処理(S3,S4)、ユーザ操作により画面の複数の項目の配置による項目位置情報を確定する処理(S10)、等を行う。また、上記移動させた項目と他の項目とで配置が重ならないように項目を再配置する第2のモジュールの処理(S5〜S9)などを有する。

【発明の詳細な説明】
【技術分野】
【0001】
本発明は、情報処理技術に関し、特に、コンピュータ画面(例えばWebページ画面)での項目の描画に係わる、項目を配置する際の位置を調整する技術(レイアウト調整)に関する。
【背景技術】
【0002】
コンピュータ画面上での項目描画に関し、パラメータによる画面項目位置の動的生成方法として、特開2008−269515号公報(特許文献1)があり、項目位置設計を支援する方法として、特開平9−73468号公報(特許文献2)がある。また、グリッド上に配置した画面項目について、項目の拡大/縮小またはグリッド罫線の位置調整による項目の配置について、特開2005−293552号公報(特許文献3)がある。
【先行技術文献】
【特許文献】
【0003】
【特許文献1】特開2008−269515号公報
【特許文献2】特開平9−73468号公報
【特許文献3】特開2005−293552号公報
【発明の概要】
【発明が解決しようとする課題】
【0004】
前記先行技術例では、項目位置を自動調整する方法などについては開示されていない。
【0005】
例えば業務アプリケーションにおけるコンピュータ画面上の項目配置の位置決めは、予め決められた表示位置と順序で項目を羅列する方法と、絶対座標を指定して配置する方法とがある。アプリケーション(ソフトウェアプログラム)の機能によってユーザが上記項目の配置を自由に行うことを可能とする場合、その配置位置の座標を数値で入力するのは手間である。また、マウス操作によって上記項目を配置する場合においても、複数項目間において、見た目を損なわないように例えば横並びの2つの項目の上端位置をあわせて配置する必要がある場合など、互いの位置関係を微調整するのは手間である。
【0006】
以上を鑑み、本発明の主な目的としては、上記コンピュータ画面の項目の描画・配置、及び項目位置調整などの機能をアプリケーションの機能としてユーザに対し提供する際、項目配置の体裁を整えるためにユーザが要する作業(手間)を軽減し、より短時間で見た目を損なわない画面レイアウトの作成を可能とする技術を提供することである。
【課題を解決するための手段】
【0007】
上記目的を達成するため、本発明のうち代表的な形態は、コンピュータ画面項目位置調整プログラム(コンピュータ画面におけるグリッドを用いた項目位置調整機能を有するプログラム)及び方法等であって、以下に示す構成を有することを特徴とする。
【0008】
本発明では、コンピュータ画面(Webページ画面など)上での項目の描画・配置に関して、グリッドを用いて、項目の座標から好適な配置位置を決定し、画面のレイアウト(項目の位置)を自動的に調整・カスタマイズすることができる機能を、アプリケーション(ソフトウェアプログラム)の機能としてユーザに対し提供する。
【0009】
本発明で用意する上記機能では、コンピュータ画面において、画面上の項目をユーザのマウス操作などによるドラッグ&ドロップ等の操作(移動など)が可能な項目として描画し、当該画面上での操作によるレイアウト(項目位置)の調整を可能とする。この際、本機能は、項目の位置情報(座標など)についてはファイルに保存し、当該情報を画面描画時に参照する仕組みとする。
【0010】
上記画面カスタマイズ機能においては、対象の画面(その領域)を仮想的にグリッドで区切り、当該グリッド上で項目の配置(移動)等の操作を可能とし、例えばユーザが配置した項目の左上の頂点の座標から、当該項目がグリッド上のどのマス(格子)に属するか等を判定し、該当するマスの左上の頂点の座標に合うように当該項目を自動的に再配置する処理を行う。
【0011】
本形態のプログラムは、例えば、表示する対象の画面に複数の項目を配置する情報処理をコンピュータに実行させるプログラムであって、ユーザ操作による画面での複数の項目の配置の位置を自動的及び動的に調整する処理機能を実現する第1のプログラムモジュールを有する。第1のプログラムモジュールは、ファイルから項目位置情報を読み出す処理、対象の画面に仮想的なグリッド及び複数の項目を表示する処理、ユーザ操作により画面及びグリッド上で項目を移動させる処理、上記移動させた項目の位置とグリッドとを比較し、グリッドのマスに合う位置に微調整するように項目を自動的に配置する処理、及び、ユーザ操作により画面の複数の項目の配置による項目位置情報をファイルに保存して確定する処理、を実行させる。
【0012】
本形態のプログラムは、例えば、前記第1のプログラムモジュールを用いた画面項目位置調整の処理の際に、上記移動させた項目と他の項目とで配置が重ならないように項目を再配置する処理機能を実現する第2のプログラムモジュールを有する。第2のプログラムモジュールは、上記移動させた第1の項目に対し、他の第2の項目と配置が重なるかどうかを判断する処理、上記重なる場合に、上記第2の項目を画面のグリッド上で右方向に移動させて当該第1の項目と第2の項目とで重ならずに再配置が可能かどうかを判断する処理、上記右方向の再配置が可能な場合に、上記第2の項目を当該移動後の位置に再配置する処理、上記右方向の再配置が不可能な場合に、上記第2の項目を画面のグリッド上で下方向に移動させて第1の項目と第2の項目とで重ならずに再配置が可能かどうかを判断する処理、上記下方向の再配置が可能な場合に、上記第2の項目を当該移動後の位置に再配置する処理、及び、ユーザ操作により上記再配置後の画面の複数の項目の配置による項目位置情報をファイルに保存して確定させる処理、を実行させる。
【発明の効果】
【0013】
本発明のうち代表的な形態によれば、コンピュータ画面の項目の描画・配置、及び項目位置調整などの機能をアプリケーションの機能としてユーザに対し提供する際、項目配置の体裁を整えるためにユーザが要する作業(手間)を軽減し、より短時間で見た目を損なわない画面レイアウトの作成を可能とする。
【図面の簡単な説明】
【0014】
【図1】本発明の一実施の形態のシステムの構成を示す図である。
【図2】本実施の形態のプログラムによる項目位置調整処理のフロー図である。
【図3】本実施の形態のプログラムによる項目位置調整処理のイメージ(Web画面など)を示す図である。
【図4】(a),(b)は、本実施の形態のプログラムによる項目位置調整処理例のイメージを示す図である。
【図5】(a),(b),(c)は、本実施の形態のプログラムによる項目位置調整処理例のイメージを示す図である。
【発明を実施するための形態】
【0015】
以下、本発明の実施の形態を図面に基づいて詳細に説明する。なお、実施の形態を説明するための全図において、同一部には原則として同一符号を付し、その繰り返しの説明は省略する。
【0016】
[システム構成]
図1に、本実施の形態のシステムの構成を示している。本システムは、本実施の形態のプログラム(コンピュータ画面項目位置調整プログラム)を含んで成る情報処理システムである。本プログラムは、コンピュータ画面におけるグリッドを用いた項目位置調整機能を含む各機能を実現する。
【0017】
本システムは、ネットワーク3に、1つ以上のアプリケーションサーバ1と、1つ以上のクライアント端末2(ユーザが使用する情報処理装置)とが接続された構成である。アプリケーションサーバ1は、プロセッサ、メモリ、ネットワークインタフェース、等の公知の要素を含む構成に基づき、アプリケーション(本実施の形態のプログラム)10によるサービス処理をクライアント端末2に対して提供する。アプリケーション10の処理ではファイルF(項目位置情報を含む対象の画面に関するファイル)を参照する。アプリケーションサーバ1では、例えばプロセッサが記憶装置から本実施の形態のプログラムをメモリへロードして実行することにより各機能(処理)を実現する。
【0018】
クライアント端末2は、ユーザが使用するPC等の情報処理装置であり、公知のOSやWebブラウザ21等を備える。またクライアント端末2は、Webブラウザ21で表示する対象となる画面に関するファイル22(ファイルFと対応関係)を有する。クライアント端末2は、アプリケーションサーバ1へ処理を要求し、処理結果応答を受信する。クライアント端末2は、例えばディスプレイ画面にWebページ画面(以下単に「画面」と称する)を表示する。
【0019】
本実施の形態では、特に単一または複数のアプリケーションサーバ1に配置したアプリケーション10を、LAN,WANなどのネットワーク3の環境において複数のクライアント端末2から利用することを想定している。ただしスタンドアロン環境の場合であっても同様に適用可能である。
【0020】
アプリケーション10は、画面カスタマイズ(画面項目位置調整)機能を含む各機能をサービス処理として提供する。アプリケーション10は、モジュール(プログラム)として、調整モジュール11、再配置モジュール12を含む。調整モジュール11は、基本的なレイアウト調整処理として、ユーザ操作による画面内への項目の配置及びその調整の処理を行う。再配置モジュール12は、複数の項目の自動的な再配置の処理を行う。
【0021】
[画面]
図3は、コンピュータ画面及びグリッドの例などを示す。301は、カスタマイズ(調整)対象となる、Webブラウザ21におけるWebページ画面の例である(ウィンドウ枠部分を含む)。302は、画面(301)における項目が配置される対象となる領域である。303は、画面(301)の領域(302)に構成(表示)される仮想的なグリッドの例である。tは、グリッド303のマス(格子)の幅を示す。アプリケーション10は、このようなグリッド303を画面上に表示する。グリッド303のマス(格子)の幅(t)などについては、アプリケーション10の設定機能を用いてユーザにより予め設定可能、及び適宜設定変更可能となっている。
【0022】
配置する対象となる項目は、Webページを構成する入力フォームなど各種の要素があるが、ここではその種類は問わない。
【0023】
[処理]
図2に、図1のシステムにおけるアプリケーション10による、項目位置調整処理のフローを示している。S1等は処理ステップを示す。
【0024】
(S1) 本アプリケーション10は、調整モジュール11により、対象の画面の項目位置情報(各項目の位置情報)をファイルFから読み込んで取得し、カスタマイズ(項目位置調整)用の画面を描画する。ユーザはクライアント端末2で本画面をみながら作業可能である。例えば図3のような画面及びグリッド(303)において、項目(初期位置による)を表示する。
【0025】
(S2) ユーザが、上記画面上における所望の項目をマウス(ポインティグデバイス)操作などによって移動させる。アプリケーション10は、当該項目の移動に対応して画面に当該項目を描画する。
【0026】
以下では、アプリケーション10は、上記移動した項目の位置とグリッド(303)とを比較し、グリッド(303)に合う位置に当該項目を自動的に配置(微調整)する処理を行う。
【0027】
(S3) 再配置モジュール12により、上記ユーザにより画面上で項目を移動させた際の当該項目の位置(暫定的な配置の位置)の座標(例えば項目の左上の座標など)に対し、再配置する位置の座標を、図3のグリッド303の幅(t)などに基づき計算する。
【0028】
図4は、上記再配置の処理例のイメージを示している。(a)は、グリッド303上におけるある項目401(カスタマイズ対象)の再配置の前の状態(位置)、(b)は、項目401の再配置の後の状態(位置)を示す。402は、グリッド303におけるあるマス403(項目401の左上の頂点があるマス)における左上の頂点の位置を示す。(b)のように、項目401の左上の頂点をマス402の左上の頂点に一致させるように再配置する。
【0029】
上記S2でユーザの配置した項目の位置の座標を{X,Y}とするとき、上記再配置する位置の座標{Xr,Yr}を、次の計算式のように決定する。
【0030】
Xr=t×(X÷tの商) ・・・(1)
Yr=t×(Y÷tの商) ・・・(2)
(S4) 上記再配置モジュール12が計算(検出)した再配置の座標({Xr,Yr})に、対象の項目を配置(再配置)する(対応する描画を行う)。例えば図4(a)→(b)のようになる。
【0031】
(S5) アプリケーション10は、上記再配置モジュール12が再配置する項目についての位置の座標({Xr,Yr})と当該項目の幅(X方向)・高さ(Y方向)とから、当該項目が他の項目(既存の配置の項目)と重ならずに配置(再配置)が可能かどうかを判定する。ここで項目の重なりがある場合(S5−N)のみ、S6へ遷移する。項目の重なりが無い場合(S5−Y)、S10へ遷移する。
【0032】
(S6) 上記ユーザにより移動した項目をA(例えば図5(a)の501)、その再配置後に重なる対象の項目をB(例えば図5(a)の502)とする。この場合、再配置モジュール12により、再配置後に重なる対象の項目Bを、画面(図3、グリッド303上)の右側の方向へ再配置が可能かどうかを判定する。この際の(項目Bと)項目Aとの間隔はグリッド303の幅tとし、ここでの再配置の処理内容はS3に従う。例えば図5(a)から(b)に示すように、項目Bが右へt単位でずらされることになる。
【0033】
上記項目Bの再配置(右移動)で更に他の項目と重なりがある場合、または画面右側に項目Bを再配置する領域(余裕)が無い場合(S6−N)には、S8へ遷移する。問題無く再配置可能である場合(S6−Y)、S7を実行する。
【0034】
(S7) 再配置モジュール12により、上記項目Bを上記画面(グリッド303上)の右方向の位置(例えば図5(b))へ再配置し、S10へ遷移する。
【0035】
(S8) 再配置モジュール12により、上記項目Bを、画面(グリッド303上)の下側の方向へ再配置が可能かどうかを判定する。この際の(項目Bと)項目Aとの間隔はグリッド幅tとし、ここでの再配置の処理内容はS3に従う。例えば図5(a)から(c)に示すように、項目Bが下へt単位でずらされることになる。
【0036】
上記項目Bの再配置(下移動)でさらに他の項目と重なりがある場合、または画面下側に項目Bを再配置する領域(余裕)が無い場合(S8−N)には、当該項目Bの再配置を行わず、S10へ遷移する。問題無く再配置可能である場合(S8−Y)、S9を実行する。
【0037】
(S9) 再配置モジュール12により、上記項目Bを、上記画面(グリッド303)の下方向の位置(例えば図5(c))へ再配置し、S10へ遷移する。なお複数の項目の配置・再配置についても、上記S9までと同様の処理の繰り返しである。
【0038】
(S10) アプリケーション10は、ユーザが上記画面のレイアウトのカスタマイズ(項目位置調整)の情報(各項目の配置の位置情報)をその時点の状態で確定する操作を受け付け(例えば確定ボタン入力)、この確定の時、調整モジュール11により、当該時点の状態の画面の項目位置情報をファイルFに保存する。
【0039】
[効果等]
以上説明したように、本実施の形態によれば、画面上にグリッド(303)を用意し、複数の項目の配置の際、グリッド303にあわせて項目の位置を自動的・動的に調整する。自動的な項目の再配置を含む画面レイアウトのカスタマイズの機能(画面項目位置調整機能)をアプリケーション10の機能としてユーザに提供する。これにより、項目配置の体裁を整えるためにユーザが要する作業(手間)を軽減し、より短時間で見た目を損なわない画面レイアウトの作成を可能とする。特に、ユーザが配置した項目が自動的に好適な位置へ再配置されることにより、例えば、ユーザが画面の体裁を整えるためにピクセル単位の微調整を行う必要がなく、簡単なマウス操作だけで統一感のとれた項目配置を可能し、比較的短時間でデザイン性を損なわずにWebページ等の画面を構成できる。
【0040】
上記機能を業務アプリケーションの機能として提供することにより、製品導入後のレイアウト変更などが可能となり、顧客業務への適合性を向上できる。例えば従来のWebアプリケーションにおけるWeb入力画面のレイアウト変更(例えば使い勝手を向上させるための項目位置の若干の変更など)については、Webアプリケーション生成前にSE等による調整(カスタマイズ)の作業が必要であった(ユーザにとっては高コストであった)が、本技術によれば、Webアプリケーション製品導入後にユーザが手軽に画面レイアウトを変更することができる。
【0041】
以上、本発明者によってなされた発明を実施の形態に基づき具体的に説明したが、本発明は前記実施の形態に限定されるものではなく、その要旨を逸脱しない範囲で種々変更可能であることは言うまでもない。
【産業上の利用可能性】
【0042】
本発明は、Webアプリケーション、業務アプリケーション等に利用可能である。
【符号の説明】
【0043】
1…アプリケーションサーバ、2…クライアント端末、3…ネットワーク、10…アプリケーション、11…調整モジュール、12…再配置モジュール、F…ファイル、21…Webブラウザ、22…ファイル。

【特許請求の範囲】
【請求項1】
表示する対象の画面に複数の項目を配置する情報処理をコンピュータに実行させるプログラムであって、
ユーザ操作による前記画面での複数の項目の配置の位置を自動的及び動的に調整する処理機能を実現する第1のプログラムモジュールを有し、
前記第1のプログラムモジュールは、
ファイルから項目位置情報を読み出す処理、
前記対象の画面に仮想的なグリッド及び複数の項目を表示する処理、
ユーザ操作により当該画面及びグリッド上で項目を移動させる処理、
上記移動させた項目の位置とグリッドとを比較し、グリッドのマスに合う位置に微調整するように当該項目を自動的に配置する処理、及び、
ユーザ操作により上記画面の複数の項目の配置による項目位置情報を前記ファイルに保存して確定する処理、を実行させることを特徴とする画面項目位置調整プログラム。
【請求項2】
請求項1記載の画面項目位置調整プログラムにおいて、
前記第1のプログラムモジュールを用いた画面項目位置調整の処理の際に前記移動させた項目と他の項目とで配置が重ならないように項目を再配置する処理機能を実現する第2のプログラムモジュールを有し、
前記第2のプログラムモジュールは、
前記移動させた第1の項目に対し、他の第2の項目と配置が重なるかどうかを判断する処理、
上記重なる場合に、上記第2の項目を前記画面のグリッド上で右方向に移動させて当該第1の項目と第2の項目とで重ならずに再配置が可能かどうかを判断する処理、
上記右方向の再配置が可能な場合に、上記第2の項目を当該移動後の位置に再配置する処理、
上記右方向の再配置が不可能な場合に、上記第2の項目を前記画面のグリッド上で下方向に移動させて第1の項目と第2の項目とで重ならずに再配置が可能かどうかを判断する処理、
上記下方向の再配置が可能な場合に、上記第2の項目を当該移動後の位置に再配置する処理、及び、
ユーザ操作により上記再配置後の画面の複数の項目の配置による項目位置情報を前記ファイルに保存して確定させる処理、を実行させることを特徴とする画面項目位置調整プログラム。
【請求項3】
コンピュータの情報処理に基づき、表示する対象の画面に複数の項目を配置する処理を行う方法であって、
前記コンピュータにおける、ユーザ操作による前記画面での複数の項目の配置の位置を自動的及び動的に調整する処理機能を実現する第1のモジュールによる処理において、
ファイルから項目位置情報を読み出す処理ステップ、
前記対象の画面に仮想的なグリッド及び複数の項目を表示する処理ステップ、
ユーザ操作により当該画面及びグリッド上で項目を移動させる処理ステップ、
上記移動させた項目の位置とグリッドとを比較し、グリッドのマスに合う位置に微調整するように当該項目を自動的に配置する処理ステップ、及び、
ユーザ操作により上記画面の複数の項目の配置による項目位置情報を前記ファイルに保存して確定する処理ステップ、を有することを特徴とする画面項目位置調整方法。
【請求項4】
請求項3記載の画面項目位置調整方法において、
前記第1のモジュールによる画面項目位置調整の処理の際に前記移動させた項目と他の項目とで配置が重ならないように項目を再配置する処理機能を実現する第2のモジュールによる処理において、
前記移動させた第1の項目に対し、他の第2の項目と配置が重なるかどうかを判断する処理ステップ、
上記重なる場合に、上記第2の項目を前記画面のグリッド上で右方向に移動させて当該第1の項目と第2の項目とで重ならずに再配置が可能かどうかを判断する処理ステップ、
上記右方向の再配置が可能な場合に、上記第2の項目を当該移動後の位置に再配置する処理ステップ、
上記右方向の再配置が不可能な場合に、上記第2の項目を前記画面のグリッド上で下方向に移動させて第1の項目と第2の項目とで重ならずに再配置が可能かどうかを判断する処理ステップ、
上記下方向の再配置が可能な場合に、上記第2の項目を当該移動後の位置に再配置する処理ステップ、及び、
ユーザ操作により上記再配置後の画面の複数の項目の配置による項目位置情報を前記ファイルに保存して確定させる処理ステップ、を有することを特徴とする画面項目位置調整方法。

【図1】
image rotate

【図2】
image rotate

【図3】
image rotate

【図4】
image rotate

【図5】
image rotate


【公開番号】特開2013−4051(P2013−4051A)
【公開日】平成25年1月7日(2013.1.7)
【国際特許分類】
【出願番号】特願2011−138047(P2011−138047)
【出願日】平成23年6月22日(2011.6.22)
【出願人】(000233491)株式会社日立システムズ (394)
【Fターム(参考)】