JP2013004051A - Screen item position adjustment program and method - Google Patents

Abstract

PROBLEM TO BE SOLVED: To perform layout in such a manner as not to damage a look, within a short time, by reducing work required for a user in screen item position adjustment.SOLUTION: A program (application) includes processing (S1) for displaying a grid and a plurality of items on a screen in processing of a first module for automatically and dynamically adjusting arrangement positions of the plurality of items on the screen through user operation, processing (S2) for moving an item on the screen and the grid through user operation, processing (S3, S4) for comparing the position of the moved item with the grid and automatically arranging the item so as to perform fine adjustment to a position matched with a square of the grid, processing (S10) for determining item position information by arranging the plurality of items on the screen through user operation, and the like. Furthermore, the program (application) also includes processing (S5-S9) and the like of a second module for rearranging the items in such a manner that the moved item is not overlapped with another item in arrangement.

Description

  The present invention relates to an information processing technique, and more particularly to a technique (layout adjustment) for adjusting a position when an item is arranged, related to drawing of an item on a computer screen (for example, a Web page screen).

  Regarding item drawing on a computer screen, there is JP 2008-269515 (Patent Document 1) as a method for dynamically generating screen item positions using parameters, and JP 9-73468 as a method for supporting item position design. Gazette (Patent Document 2). Japanese Patent Laid-Open No. 2005-293552 (Patent Document 3) discloses an arrangement of items by enlarging / reducing items or adjusting the position of grid ruled lines for screen items arranged on a grid.

JP 2008-269515 A Japanese Patent Laid-Open No. 9-73468 JP 2005-293552 A

  In the prior art example, a method for automatically adjusting the item position is not disclosed.

  For example, item placement on a computer screen in a business application includes a method of arranging items in a predetermined display position and order, and a method of arranging by specifying absolute coordinates. When the user can freely arrange the items by the function of the application (software program), it is troublesome to input the coordinates of the arrangement position numerically. In addition, even when the above items are arranged by mouse operation, the positional relationship between the plurality of items is not changed, for example, when it is necessary to arrange the upper end positions of two items arranged side by side together. Fine adjustment is troublesome.

  In view of the above, the main object of the present invention is to arrange the appearance of item arrangement when providing functions such as drawing and arrangement of items on the computer screen and item position adjustment to the user as application functions. It is an object of the present invention to provide a technique that reduces the work (labor) required by the user and enables creation of a screen layout that does not impair the appearance in a shorter time.

  In order to achieve the above object, a representative embodiment of the present invention is a computer screen item position adjustment program (a program having an item position adjustment function using a grid in a computer screen), a method, and the like. It is characterized by having.

  In the present invention, regarding the drawing / arrangement of items on a computer screen (such as a web page screen), a suitable arrangement position is determined from the coordinates of the item using a grid, and the screen layout (item position) is automatically set. A function that can be adjusted and customized is provided to the user as a function of an application (software program).

  With the above-mentioned functions prepared in the present invention, on the computer screen, the items on the screen are drawn as items that can be operated (such as moving) such as drag and drop by the user's mouse operation, and the layout by the operation on the screen is displayed. (Item position) can be adjusted. At this time, this function has a mechanism in which item position information (coordinates, etc.) is stored in a file and the information is referred to at the time of screen drawing.

  In the above screen customization function, the target screen (its area) is virtually divided by a grid, and operations such as placement (movement) of items on the grid can be performed. It is determined from the coordinates which square (lattice) on the grid the item belongs to, and the process of automatically rearranging the items so as to match the coordinates of the upper left vertex of the corresponding square is performed.

  The program according to the present embodiment is a program that causes a computer to execute information processing for arranging a plurality of items on a screen to be displayed, and automatically and dynamically moves the positions of the plurality of items on the screen by a user operation. A first program module that realizes a processing function to be automatically adjusted. The first program module performs processing for reading item position information from a file, processing for displaying a virtual grid and a plurality of items on a target screen, processing for moving an item on the screen and the grid by a user operation, Compares the position of the selected item with the grid, automatically arranges the item so that it fine-tunes to the position of the grid, and item location information based on the arrangement of multiple items on the screen by user operation The process of saving and confirming is executed.

  The program according to the present embodiment is, for example, a process of rearranging items so that the arrangement of the moved item and other items does not overlap in the screen item position adjustment process using the first program module. A second program module for realizing the function; The second program module determines whether or not the arrangement of the moved first item overlaps with the other second item. If the second program module overlaps, the second item is displayed on the grid of the screen. To determine whether the first item and the second item can be rearranged without moving the first item and the second item, and when the right item can be rearranged, the second item The process of rearranging the item to the position after the movement, and when the rearrangement in the right direction is impossible, the second item is moved downward on the grid of the screen to move the first item and the second A process for determining whether or not rearrangement is possible without overlapping with the item, a process for rearranging the second item to the position after the movement when the downward rearrangement is possible, and Item position information by arrangement of multiple items on the screen after rearrangement by user operation Processing to confirm and save the Airu, to the execution.

  According to a typical embodiment of the present invention, when providing functions such as drawing / arrangement of items on a computer screen and item position adjustment to a user as functions of an application, the user can arrange the appearance of the item arrangement. It reduces the work (labor) required and enables creation of a screen layout that does not impair the appearance in a shorter time.

It is a figure which shows the structure of the system of one embodiment of this invention. It is a flowchart of the item position adjustment process by the program of this Embodiment. It is a figure which shows the image (Web screen etc.) of the item position adjustment process by the program of this Embodiment. (A), (b) is a figure which shows the image of the example of an item position adjustment process by the program of this Embodiment. (A), (b), (c) is a figure which shows the image of the example of item position adjustment processing by the program of this Embodiment.

  Hereinafter, embodiments of the present invention will be described in detail with reference to the drawings. Note that components having the same function are denoted by the same reference symbols throughout the drawings for describing the embodiment, and the repetitive description thereof will be omitted.

[System configuration]
FIG. 1 shows the system configuration of the present embodiment. This system is an information processing system including the program (computer screen item position adjustment program) of the present embodiment. This program realizes each function including an item position adjustment function using a grid on a computer screen.

  This system has a configuration in which one or more application servers 1 and one or more client terminals 2 (information processing devices used by a user) are connected to a network 3. The application server 1 provides the client terminal 2 with service processing by the application (program of the present embodiment) 10 based on a configuration including known elements such as a processor, a memory, and a network interface. In the processing of the application 10, the file F (file relating to the target screen including item position information) is referred to. In the application server 1, for example, each function (processing) is realized by a processor loading a program of the present embodiment from a storage device to a memory and executing the program.

  The client terminal 2 is an information processing apparatus such as a PC used by a user, and includes a known OS, a web browser 21 and the like. Further, the client terminal 2 has a file 22 (corresponding to the file F) related to a screen to be displayed on the Web browser 21. The client terminal 2 requests the application server 1 for processing and receives a processing result response. The client terminal 2 displays a Web page screen (hereinafter simply referred to as “screen”) on a display screen, for example.

  In the present embodiment, it is assumed that the applications 10 arranged on one or a plurality of application servers 1 are used from a plurality of client terminals 2 in a network 3 environment such as a LAN or a WAN. However, the same applies to a stand-alone environment.

  The application 10 provides each function including a screen customization (screen item position adjustment) function as a service process. The application 10 includes an adjustment module 11 and a rearrangement module 12 as modules (programs). The adjustment module 11 performs the arrangement of items on the screen and the adjustment process thereof by a user operation as a basic layout adjustment process. The rearrangement module 12 performs automatic rearrangement processing of a plurality of items.

[screen]
FIG. 3 shows an example of a computer screen and a grid. Reference numeral 301 denotes an example of a Web page screen in the Web browser 21 to be customized (adjusted) (including a window frame portion). Reference numeral 302 denotes an area in which items on the screen (301) are arranged. Reference numeral 303 denotes an example of a virtual grid configured (displayed) in the area (302) of the screen (301). t indicates the width of the grid (grid) of the grid 303. The application 10 displays such a grid 303 on the screen. The grid width (t) of the grid 303 can be set in advance by the user using the setting function of the application 10 and can be changed appropriately.

  The items to be arranged include various elements such as an input form constituting a Web page, but the type is not limited here.

[processing]
FIG. 2 shows a flow of item position adjustment processing by the application 10 in the system of FIG. S1 etc. indicate processing steps.

  (S1) The application 10 uses the adjustment module 11 to read and acquire item position information (position information of each item) of the target screen from the file F, and draws a screen for customization (item position adjustment). The user can work while viewing this screen on the client terminal 2. For example, items (depending on the initial position) are displayed on the screen and grid (303) as shown in FIG.

  (S2) The user moves a desired item on the screen by a mouse (pointing device) operation or the like. The application 10 draws the item on the screen in response to the movement of the item.

  In the following, the application 10 compares the position of the moved item with the grid (303), and performs a process of automatically arranging (finely adjusting) the item at a position that matches the grid (303).

  (S3) The rearrangement module 12 rearranges the position (provisional placement position) of the item when the item is moved on the screen by the user (for example, the upper left coordinate of the item). The coordinates of the position to be calculated are calculated based on the width (t) of the grid 303 in FIG.

  FIG. 4 shows an image of the above rearrangement processing example. (A) shows a state (position) before rearrangement of an item 401 (customization target) on the grid 303, and (b) shows a state (position) after rearrangement of the item 401. Reference numeral 402 denotes the position of the upper left vertex in a certain cell 403 in the grid 303 (the cell having the upper left vertex of the item 401). As shown in (b), the top left vertex of the item 401 is rearranged so as to coincide with the top left vertex of the cell 402.

  When the coordinate of the position of the item arranged by the user in S2 is {X, Y}, the coordinate {Xr, Yr} of the position to be rearranged is determined as in the following calculation formula.

Xr = t × (X ÷ t quotient) (1)
Yr = t × (quotient of Y ÷ t) (2)
(S4) The target item is placed (rearranged) at the rearrangement coordinates ({Xr, Yr}) calculated (detected) by the rearrangement module 12 (corresponding drawing is performed). For example, as shown in FIG.

  (S5) The application 10 determines the item from the position coordinates ({Xr, Yr}) of the item to be rearranged by the rearrangement module 12 and the width (X direction) / height (Y direction) of the item. Determines whether or not placement (rearrangement) is possible without overlapping other items (existing placement items). Only when there is an overlap of items (S5-N), the process proceeds to S6. When there is no overlap of items (S5-Y), the process proceeds to S10.

  (S6) The item moved by the user is A (for example, 501 in FIG. 5A), and the item to be overlapped after the rearrangement is B (for example, 502 in FIG. 5A). In this case, the rearrangement module 12 determines whether or not the item B to be overlapped after the rearrangement can be rearranged in the right direction of the screen (on the grid 303 in FIG. 3). At this time, the interval between (item B) and item A is the width t of the grid 303, and the processing content of the rearrangement here follows S3. For example, as shown in FIGS. 5A to 5B, the item B is shifted to the right by t units.

  If the item B is rearranged (moved to the right) and there is an overlap with another item, or if there is no area (margin) for rearranging the item B on the right side of the screen (S6-N), the process proceeds to S8. . If rearrangement is possible without any problem (S6-Y), S7 is executed.

  (S7) The rearrangement module 12 rearranges the item B to the right position (for example, FIG. 5B) of the screen (on the grid 303), and proceeds to S10.

  (S8) The rearrangement module 12 determines whether the item B can be rearranged in the lower direction of the screen (on the grid 303). At this time, the interval between (item B) and item A is the grid width t, and the processing content of the rearrangement here follows S3. For example, as shown in FIGS. 5A to 5C, the item B is shifted downward by t units.

  If the item B is rearranged (downward) and there is an overlap with another item, or if there is no area (room) for rearranging the item B on the lower side of the screen (S8-N), the item B Is not performed, and the process proceeds to S10. If rearrangement is possible without any problem (S8-Y), S9 is executed.

  (S9) The rearrangement module 12 rearranges the item B to a lower position (for example, FIG. 5C) of the screen (grid 303), and transitions to S10. Note that the arrangement and rearrangement of a plurality of items are also the same processes as those up to S9.

  (S10) The application 10 accepts an operation in which the user confirms the customization of the screen layout (item position adjustment) (position information of the arrangement of each item) in the current state (for example, a confirmation button input). At the time of confirmation, the adjustment module 11 stores the item position information on the screen at the time point in the file F.

[Effects]
As described above, according to the present embodiment, a grid (303) is prepared on the screen, and when a plurality of items are arranged, the position of the item is automatically and dynamically adjusted according to the grid 303. . A screen layout customization function (screen item position adjustment function) including automatic item rearrangement is provided to the user as a function of the application 10. As a result, it is possible to reduce the work (labor) required by the user to arrange the item layout, and to create a screen layout that does not impair the appearance in a shorter time. In particular, the items placed by the user are automatically rearranged to a suitable position, so that, for example, the user does not need to make fine adjustments in units of pixels to adjust the appearance of the screen. It is possible to arrange items with a sense of unity, and it is possible to configure a screen such as a web page in a relatively short time without impairing the design.

  By providing the above functions as business application functions, it is possible to change the layout after the product is introduced and to improve the suitability for customer business. For example, with respect to a change in the layout of the Web input screen in a conventional Web application (for example, a slight change in item position for improving usability), adjustment (customization) by SE or the like is required before generating the Web application. (It was expensive for the user) However, according to the present technology, the user can easily change the screen layout after introducing the Web application product.

  As mentioned above, the invention made by the present inventor has been specifically described based on the embodiment. However, the present invention is not limited to the embodiment, and various modifications can be made without departing from the scope of the invention. Needless to say.

  The present invention can be used for Web applications, business applications, and the like.

  DESCRIPTION OF SYMBOLS 1 ... Application server, 2 ... Client terminal, 3 ... Network, 10 ... Application, 11 ... Adjustment module, 12 ... Relocation module, F ... File, 21 ... Web browser, 22 ... File

Claims (4)

A program for causing a computer to execute information processing for arranging a plurality of items on a screen to be displayed,
A first program module that realizes a processing function for automatically and dynamically adjusting the position of the arrangement of the plurality of items on the screen by a user operation;
The first program module is:
Process to read item position information from file,
A process of displaying a virtual grid and a plurality of items on the target screen;
Processing to move items on the screen and grid by user operation,
A process of comparing the position of the moved item with the grid, and automatically arranging the item so as to fine-tune it to a position that fits the grid cell; and
A screen item position adjustment program for executing a process of saving and determining item position information by arrangement of a plurality of items on the screen in the file by a user operation. In the screen item position adjustment program according to claim 1,
A second program module that realizes a processing function for rearranging items so that the moved items and other items do not overlap when the screen item position adjustment process using the first program module is performed Have
The second program module is:
A process for determining whether the arrangement of the moved first item overlaps with another second item;
A process of determining whether or not rearrangement is possible without overlapping the first item and the second item by moving the second item to the right on the grid of the screen in the case of the overlap;
A process of rearranging the second item at the position after the movement when the rightward rearrangement is possible;
When the rearrangement in the right direction is impossible, the second item can be moved downward on the grid of the screen so that the first item and the second item can be rearranged without overlapping. Process to determine whether
A process of rearranging the second item to the position after the movement when the downward rearrangement is possible; and
A screen item position adjustment program for executing, by a user operation, storing and determining item position information by arrangement of a plurality of items on the screen after rearrangement in the file. A method of performing a process of arranging a plurality of items on a screen to be displayed based on information processing of a computer,
In the processing by the first module for realizing the processing function for automatically and dynamically adjusting the position of the arrangement of the plurality of items on the screen by the user operation in the computer,
Processing steps for reading item position information from a file;
A processing step of displaying a virtual grid and a plurality of items on the target screen;
Processing steps for moving items on the screen and grid by user operation;
A step of comparing the position of the moved item with the grid, and automatically arranging the item so as to fine-tune to a position that matches the grid cell; and
A screen item position adjusting method comprising: a step of storing and determining item position information by arrangement of a plurality of items on the screen by a user operation in the file. In the screen item position adjustment method according to claim 3,
In the processing by the second module that realizes a processing function for rearranging the items so that the moved items and other items do not overlap in the screen item position adjustment processing by the first module,
A processing step for determining whether the arrangement of the moved first item and another second item overlap;
A processing step of determining whether or not rearrangement is possible without overlapping the first item and the second item by moving the second item in the right direction on the grid of the screen in the case of the overlap. ,
A processing step of rearranging the second item at the position after the movement when rearrangement in the right direction is possible;
When the rearrangement in the right direction is impossible, the second item can be moved downward on the grid of the screen so that the first item and the second item can be rearranged without overlapping. Processing steps to determine whether
A process step of rearranging the second item at the position after the movement when the downward rearrangement is possible; and
A screen item position adjusting method comprising: a step of saving and determining item position information by arrangement of a plurality of items on the screen after rearrangement by a user operation.

Images