Information processing system, information processing method, and program

Abstract

To provide an information processing apparatus, a method and a program that display an application screen according to a form of a device.SOLUTION: An information processing apparatus performs setting of a screen used for an application, and the information processing apparatus has: storage means for storing a display size of a form (personal computer desktop 2202, tablet size 2203, and smartphone size 2204) for displaying the screen and a display control value corresponding to the form of a screen component (UI component) 2221 arranged on the screen; and display control means for controlling display of the screen in the form based on a set display size of the form from the display size of the form stored in the storage means. The display control means performs display control by changing the size of the screen component arranged on the screen according to the display control value stored in the storage means and corresponding to the form of the screen component.SELECTED DRAWING: Figure 22

Description

[Technical field]

[0001] The present invention relates to an information processing device for generating a program, and a processing method and program thereof. [Background technology]

[0002] Conventionally, there have been application development tools that set input / output definitions, data model definitions, etc., and generate Web application programs.

[0003] When generating a web application program, web design methods can be broadly divided into two: responsive design and fixed design.

[0004] Fixed design is a technique for preventing layout collapse by fixing the width of a website and the width of its components.

[0005] Responsive design is a layout technique that changes the display content of each component depending on the screen size.

[0006] Responsive design commonly uses media query techniques.

[0007] Media queries are a technique that allows you to display a layout for each device from a single HTML source by setting CSS for each device.

[0008] Patent document 1 describes a method of calculating the size of each of a plurality of pieces of information to be displayed in the display area of ​​a display device, determining whether or not the plurality of pieces of information can be arranged in the display area based on the size of each of the pieces of information and the size of the display area, and if arrangement is not possible, distributing and allocating the plurality of pieces of information to a plurality of screens each of which fits within the display area, thereby generating output contents for the plurality of pieces of information. [Prior art documents] [Patent documents]

[0009] [Patent Document 1] JP 2020-60804 A Summary of the Invention [Problem to be solved by the invention]

[0010] However, even when using the technology of Patent Document 1, there are some difficulties in creating a media query. For example, the following problems exist. 1. CSS settings for each component must be configured for each device, and the components must be customized. 2. It is difficult and time-consuming to create for people without knowledge and skills in web design. 3. To check the layout you created, you need to build and deploy the application to each device.

[0011] An object of the present invention is to provide a mechanism for displaying an application screen according to the type of device. [Means for solving the problem]

[0012] An information processing device for setting a screen used in an application, comprising: a storage means for storing a display size of a form for displaying the screen and a display control value corresponding to a form of a screen component to be arranged on the screen; and a display control means for controlling the display of the screen of the form based on the display size of the set form from the display sizes of the forms stored in the storage means. the display control means controls display of screen components arranged on the screen by changing their sizes in accordance with display control values ​​corresponding to the forms of the screen components stored in the storage means. Effect of the Invention

[0013] According to the present invention, it is possible to provide a mechanism for displaying an application screen according to the form of a device. [Brief description of the drawings]

[0014] [Figure 1] 1 is a system configuration diagram showing an example of the configuration of a program development device, a program development server, a database server, an application client, and an application server according to an embodiment of the present invention. [Diagram 2] 1 is a block diagram showing an example of a hardware configuration applicable to a program development device, a program development server, a database server, an application client, and an application server according to an embodiment of the present invention. FIG. [Diagram 3] FIG. 2 is a block diagram showing an example of a software configuration according to an embodiment of the present invention. [Figure 4] 1 is a configuration diagram of a program development device according to an embodiment of the present invention. [Diagram 5] FIG. 11 is a diagram illustrating an example of a flowchart of a Web application generation process according to an embodiment of the present invention. [Figure 6] FIG. 11 is a diagram showing an example of a flowchart of a part of an input / output definition information receiving process and an input / output definition acquiring process according to an embodiment of the present invention. [Figure 7] FIG. 11 is a diagram illustrating an example of a flowchart of a responsive component size change process according to an embodiment of the present invention. [Figure 8] 11 is a schematic diagram showing an example of a new UI creation screen according to an embodiment of the present invention. FIG. [Figure 9] FIG. 4 is a schematic diagram showing an example of a design creation screen according to an embodiment of the present invention. [Figure 10] FIG. 13 is a schematic diagram showing an example of a fix design creation screen according to an embodiment of the present invention. [Figure 11] FIG. 13 is a schematic diagram showing an example of a fix design creation screen according to an embodiment of the present invention. [Figure 12] 1 is a schematic diagram showing an example of a responsive design creation screen according to an embodiment of the present invention and a correspondence between device types and screen sizes. [Figure 13]FIG. 13 is a schematic diagram illustrating an example of a responsive design creation screen according to an embodiment of the present invention. [Figure 14] FIG. 13 is a schematic diagram illustrating an example of a responsive design creation screen according to an embodiment of the present invention. [Figure 15] FIG. 13 is a schematic diagram illustrating an example of a responsive design creation screen according to an embodiment of the present invention. [Figure 16] FIG. 13 is a schematic diagram illustrating an example of a responsive design creation screen according to an embodiment of the present invention. [Figure 17] FIG. 13 is a schematic diagram illustrating an example of a responsive design creation screen according to an embodiment of the present invention. [Figure 18] FIG. 13 is a schematic diagram illustrating an example of a responsive design creation screen according to an embodiment of the present invention. [Figure 19] FIG. 13 is a schematic diagram illustrating an example of a responsive design creation screen according to an embodiment of the present invention. [Figure 20] FIG. 13 is a schematic diagram illustrating an example of a responsive design creation screen according to an embodiment of the present invention. [Figure 21] FIG. 2 is a diagram illustrating an example of a UI definition according to an embodiment of the present invention. [Figure 22] FIG. 13 is a schematic diagram illustrating an example of a responsive design creation screen according to an embodiment of the present invention. [Diagram 23] FIG. 13 is a schematic diagram illustrating an example of a responsive design creation screen according to an embodiment of the present invention. DETAILED DESCRIPTION OF THE PREFERRED EMBODIMENTS

[0015] <First embodiment> FIG. 1 is a system (information processing system) configuration diagram showing an example of the configuration of a program development device (an information processing device used by a developer to generate a Web application) according to the present invention, a program development server, a database server, an application client (client device), an application server, and a Web server.

[0016] Program development device 101 defines screen layouts and database search instructions, etc., according to operations by a developer. Note that the program development device 101 may have separate roles, such as accepting input from the developer and having a program development server 102, described later, perform actual program generation processing and application generation processing, or the program development device 101 may independently perform program generation and application generation.

[0017] In this embodiment, the application generated by the program development device 101 is a Web application, but this is not limited to this, and the application may not be an application that uses communication via Web technology, such as an application that runs on an information processing device such as a mobile phone, smartphone, or tablet, or embedded software.

[0018] In addition, in this embodiment, the program development device 101 generates the application program, but this is not limited to generating the program, and an environment in which the application runs may be created using a definition set according to the developer's operations.

[0019] Program development servers 102a to 102b (information processing devices) generate programs according to settings and instructions from a developer input by program development device 101. Program development server 102a may be placed within network 107 such as a LAN, and program development server 102b may be placed on the Internet or on the cloud.

[0020] The database servers 103a-103b (information processing devices) are databases used by the developed application, and may be used for checking operation during development in the present invention. For example, the database server 103 used by the developer may be configured as the same device as the program development device 101, or may be placed in a network 107 such as a LAN (database server 103a). It may also be placed on the Internet or on the cloud (database server 103b). In addition, when the program development device 101 cooperates with the program development server 102, the program development server 102 and the database server 103 may be configured in the same device.

[0021] The application server 105 (information processing device) executes the application program generated by the program development device 101. The application server 105 may be placed in a network 107 such as a LAN, or may be placed on the Internet or on the cloud (application server 105). In addition, it is possible to operate by connecting to a database server 103 on the network 107, the Internet, or the cloud.

[0022] The application clients 104a to 104b (information processing devices) are user input terminals that operate application programs developed by the program development device 101 in cooperation with the application server 105. They may be located within a network 107 such as a LAN (application client 104a), or may be located on the Internet or on the cloud (application client 104b). They may also be information processing devices such as mobile terminals.

[0023] Web server 106 (information processing device) executes the application program generated by program development device 101, and transmits it in response to a request from application client 104. Web server 106 may be located within network 107 such as a LAN, or may be located on the Internet, on the cloud, or the like.

[0024] In this embodiment, the application server 105 and the Web server 106 are configured as separate information processing devices, but this is not limiting and they may be configured as a single information processing device or built on a virtual environment.

[0025] FIG. 2 is a block diagram showing an example of each hardware configuration applicable to the program development device 101, the program development server 102, the database server 103, the application client 104, and the application server 105 according to the present invention.

[0026] In FIG. 2, a CPU 201 comprehensively controls each device connected to a system bus 204 .

[0027] The ROM 203 or the external memory 211 also stores an operating system (OS) which is a control program for the CPU 201, and programs for implementing various functions of the information processing device, such as each server, client, and device, which will be described later.

[0028] The RAM 202 functions as a main memory, a work area, a temporary save area, and the like for the CPU 201.

[0029] The input controller 205 controls input from an input unit 209. In an information processing device, the input unit 209 may include a keyboard and a pointing device such as a mouse.

[0030] The output controller 206 controls the display of the output unit 210. As the output unit 210, for example, a CRT or a liquid crystal display can be used.

[0031] The external memory controller 207 controls access to an external memory 211 that stores a boot program, various applications, font data, user files, edit files, printer drivers, etc. In addition, various tables and parameters for implementing various functions of each server, client, device, etc. Examples of the external memory 211 include a hard disk (HD), a flexible disk (FD), a compact flash (registered trademark) connected to a PCMCIA card slot via an adapter, a smart media, etc.

[0032] A communication I / F controller 208 executes a process for controlling communication with external devices via a network.

[0033] A program 212 for implementing the present invention is recorded in the external memory 211, and is executed by the CPU 201 by being loaded into the RAM 202 as required.

[0034] FIG. 3 is a block diagram showing an example of a software configuration according to the embodiment of the present invention.

[0035] The program development device 101 has the following functional units.

[0036] The input / output definition management unit 301 is a functional unit that manages, as input / output definition information, input definition information that defines items to be input via an application screen and output definition information that defines items to be output on the screen.

[0037] The program generation unit 302 is a functional unit that generates a program to be used as an application by using input / output definition information, data model definition information, and business model definition information. The program generation unit 302 generates an HTML file to be displayed on the screen from the input / output definition information, generates a media query in a CSS file that changes the display form for each browser size (for each screen size of the display device), and can configure differences in style depending on the screen size (display size of the form in which the screen is displayed).

[0038] The browser size receiving unit 303 is a functional unit that receives, from a user, a display size of the browser to be displayed on the display 210 of the program development device 101. This will be described later with reference to FIG.

[0039] The device reception unit 304 is a functional unit that receives, for each device, a display size of the browser to be displayed on the display 210 of the program development device 101, as input by the user. This will be described later with reference to FIG.

[0040] Display form changing unit 305 is a functional unit that changes the display form of UI widgets depending on the browser display size accepted by browser size accepting unit 303. Display form changing unit 305 can change the size and display form of widgets for each device classified by classification unit 309. This will be described later with reference to Figs. 22 and 23.

[0041] The setting unit 306 is a functional unit that sets the size of the UI widgets generated by the program generation unit and displayed at execution time, and can also accept input from the user so that the size of the UI widgets to be displayed is displayed at a set ratio of the display size of the browser depending on the display size of the browser to be displayed. This will be described later with reference to FIG. 14.

[0042] The display control unit 307 is a functional unit that displays UI widgets at a predetermined ratio accepted by the setting unit, and controls the display of a screen that is displayed on the browser at the display size of the browser for each device during execution.

[0043] The storage unit 308 is a functional unit that stores a plurality of devices and the screen size (the display size of the format in which the screen is displayed) displayed on each device in association with each other. This will be described later with reference to 1210 in FIG.

[0044] The storage unit 308 also stores the size of the UI widgets to be displayed at execution time, which is set by the setting unit. The storage unit 308 may be stored in the external memory 211, the RAM 202, or the DB server 103.

[0045] The classification unit 309 is a functional unit that classifies a plurality of devices into personal computers, tablets, and smartphones. This will be described later with reference to 1210 in FIG.

[0046] The generation unit 310 is a functional unit that generates display control information (UI definition) for controlling the size of the UI widget set by the setting unit 306 according to the display size of the browser to be displayed (changing and controlling the size of the UI widget according to the display size of the browser to be displayed). Using the display control information generated by the generation unit 310, the program generation unit 302 generates a media query in a CSS file that changes the display mode for each browser size (for each screen size of the device to be displayed). An example of the generated UI definition will be described later with reference to FIG. 21.

[0047] The screen component change unit 311 is a functional unit that accepts a change in size of a UI component when the display control unit 307 controls the display of a screen that is displayed on the browser at the display size of the browser for each device during program execution. This will be described later with reference to Figs. 16, 18, and 20.

[0048] FIG. 4 is a configuration diagram of the program development device 101.

[0049] The program development device 101 includes a repository definition unit 401 , a Web application generation unit 415 , and a screen definition unit 419 .

[0050] The program development device 101 generates a Web application 438 by a Web application generation unit 415 using the definitions in a repository definition unit 401 set by a developer who develops the Web application.

[0051] Furthermore, in the program development device 101, a repository definition unit 401 stores an application definition 402, an input / output definition 403, a data model definition 404, a business process definition 405, a screen part definition 406, an action definition 407, a desktop (personal computer) screen part definition 408, a tablet screen part definition 409, and a smartphone screen part definition 410. These definitions 402 to 410 are inputted or arranged by a developer via a Web application development tool.

[0052] The input / output definition 403 includes input item definition information and output item definition information. The input item definition information is information that defines the input items that a user of the generated Web application enters via the screen of the Web application. The output item definition information is information that defines the output items that are output on the screen of the generated Web application. Hereinafter, "input item definition information" and "output item definition information" are collectively referred to as "input / output item definition information."

[0053] Screen part definition 406 is screen information obtained by converting a screen layout generated using a screen layout editor (not shown) of a Web application development tool into HTML or the like. Creation of a screen layout using the screen layout editor is a task performed by a developer in parallel with setting input / output definition 403 on input / output definition screen 900 (FIG. 9), for example. While setting the arrangement of input / output items (captions, buttons, text boxes, etc.) using the screen layout editor, attributes 1002 (FIG. 10) of the input / output items are set using input / output definition screen 900.

[0054] The screen component definitions 408, 409, and 410 for desktops, tablets, and smartphones can be specified using a screen layout editor to control the display width of the screen components (UI components) on each terminal (FIGS. 15, 17, and 19). The display width of the screen components may be set in the display width ratio input field 1401 (FIG. 14) provided in the attribute input field 1301 (FIG. 13) of the input / output item. 1401 in FIG. 14 shows an example of a display control value for each device.

[0055] Therefore, the repository definition unit 401 is an example of a means for managing input definition information that defines the items to be input via the application screen displayed by executing the generated program, and output definition information that defines the items to be output on the screen, as input / output definition information.

[0056] A Web application generation unit 415 analyzes each definition stored in the repository definition unit 401 using a repository definition analysis unit 416 for generating Web applications, and generates a Web application 438 including compiled Java (registered trademark) code 439 and HTML / JSP / JavaScript (registered trademark) 440 via a Web application code generation unit 417 and a source code compilation unit 418. In other words, this is an example of a means for generating a program used as the application by using input / output definition information.

[0057] The screen definition unit 419 has tools for editing the screen aspects of the Web application to be generated, and specifically has a screen definition editor unit 420, a screen property editor unit 421, a parts palette unit 423, and a responsive parts size change unit 424.

[0058] The screen definition editor unit 420 corresponds to the portion 902 in FIG. 9, and edits the screen of a Web application that is generated by arranging parts from the part palette unit 423 901 as shown in 903 .

[0059] The screen property editor unit 421 can set the attributes of input / output items from the screen 1002 in FIG.

[0060] The parts palette unit 423 corresponds to the part 901 in Fig. 9, and various UI parts to be arranged on the screen are registered as a list. The UI parts in 901 can be moved to the position 903 in Fig. 9 by the user's drag-and-drop operation or the like, and a screen constituting the Web application can be generated in 902 (screen definition editor unit 420).

[0061] The responsive component size change unit 424 has the function of changing the size of screen components (UI components) and displaying them when the display area of ​​the browser displayed on the display 210 is switched using the selection buttons illustrated as 1200 in FIG. 12, namely, the desktop (personal computer) button 1201, the tablet button 1202, and the smartphone button 1203.

[0062] For example, when the information displayed in the screen definition editor section 2201 in Fig. 22 is displayed in desktop (personal computer) mode, it is displayed as shown in 2202. The display width of the screen part (UI part) 2221 displayed in the screen definition editor section 2201 is determined based on the number "2" set as the desktop width of 2211. Specifically, the screen part (UI part) 2221 is displayed at 2 / 12 of the width of the full screen size of the desktop mode 2202 (2222). In this manner, in this embodiment, the width size of the screen part (UI part) is specified as some of the 12 equal parts of the width of the full screen size of the displayed mode. The 12 equal parts may be changed by the user to 6 equal parts, 24 equal parts, etc.

[0063] On the other hand, when the information displayed in the screen definition editor section 2201 in Fig. 22 is displayed in tablet mode (when the tablet button 1202 in Fig. 12 is pressed), the screen is displayed in tablet size as shown in 2203, and area 2213 which cannot be displayed in tablet size is displayed blank (as a non-displayable area). Screen component (UI component) 2221 is displayed at 3 / 12 of the horizontal width of the screen size (2223).

[0064] 22 is displayed in smartphone mode (when the smartphone button 1203 in FIG. 12 is pressed), the screen is displayed in smartphone size as shown in 2204, and area 2214 that cannot be displayed in smartphone size is displayed blank (as a non-display area). Screen component (UI component) 2221 is displayed with a width of 6 / 12=1 / 2 of the horizontal width of the screen size (2224).

[0065] As described above, the responsive component size change unit 424 can change the UI component size (2222, 2223, 2224) by the selected device button (1200 in FIG. 12) and display it before deploying the program. After that, the component size is sent to the screen definition editor unit 420 and reflected in the screen definition as shown in FIG.

[0066] The database 441 is a functional unit of the database server 103 that manages data called by an application executed by the application server 442 .

[0067] The terminal browser 443 is a functional unit that is displayed on the display 210 of the application client 104 and can display information executed and transmitted by the application server 442 .

[0068] FIG. 5 is a diagram illustrating an example of a flowchart for generating a Web application.

[0069] The program development device 101 manages each definition in the repository definition section 401 as a file. Note that, in the present embodiment, each definition in the repository definition section 401 is managed as a file, but this is not limiting, and for example, each definition in the repository definition section 401 may be managed using a database, or may be managed using a storage device on a network such as the cloud.

[0070] The flowchart for generating a Web application is explained below.

[0071] In step S 501 , the program development device 101 acquires the application definition 402 from the repository definition unit 401 .

[0072] In step S 502 , the program development device 101 acquires the data model definition 404 from the repository definition unit 401 .

[0073] In step S503, the program development device 101 accepts input of input / output definition information from a user (developer) and registers it in the repository definition unit 401. Details will be described later with reference to FIG.

[0074] In step S 504 , the program development device 101 acquires the input / output definition 403 from the repository definition unit 401 .

[0075] In step S 505 , the program development device 101 acquires the business process definition 405 from the repository definition unit 401 .

[0076] In step S 506 , the program development device 101 acquires the database definition 406 from the repository definition unit 401 .

[0077] In step S507, the program development device 101 generates a program to be used in the Web application 438 using the Web application generation unit 415. In step S507, an HTML file to be displayed on the screen is generated from the input / output definition acquired in step S504, and a difference in style depending on the screen size can be configured by using a media query in the CSS file that changes the display form for each browser display size (for each screen size of the display device). That is, step S507 is a step showing an example of a process of generating a program to be used as an application and generating a CSS file that displays the output screen responsively for each device.

[0078] In step S508, the program development device 101 deploys the program generated in step S507 in the application server 105.

[0079] The Web application 438 generated by the above process runs as a program executed on the application server 105 (442).

[0080] This concludes the explanation of the Web application generation flowchart in FIG.

[0081] FIG. 6 is a diagram illustrating an example of a detailed flowchart of the input / output definition information receiving process.

[0082] In step S600, program development device 101 accepts a selection of whether the UI to be displayed on the Web browser is to have a fixed design or a responsive design. The process of step S600 will be described with reference to FIG.

[0083] FIG. 8 is a schematic diagram showing an example of a new UI creation screen according to an embodiment of the present invention.

[0084] FIG. 8 is a diagram showing an example of an image of a screen that receives, from a user (developer), whether the UI displayed on a Web browser, which is display-controlled by the program development device 101, is to have a fixed design or a responsive design.

[0085] A check box 801 in Fig. 8 is an item to be checked when the UI to be displayed is to be a responsive design, and since the responsive (for multiple devices) check box 801 is checked in Fig. 8, the UI of a screen 802 with the screen name "responsive" is created with a responsive design. Returning to the explanation of the flowchart in Fig. 6,

[0086] 6, the program development device 101 accepts, from a user (developer), the layout of parts on a screen to be displayed on a Web browser. The process of step S601 will be described with reference to FIG.

[0087] FIG. 9 is a schematic diagram showing an example of a design creation screen according to an embodiment of the present invention.

[0088] FIG. 9 is a diagram showing an example of an image of a screen on which a user (developer) places UI widgets on an application display screen, the image being displayed and controlled by program development device 101. In FIG.

[0089] In FIG. 9, 900, a list of UI parts to be arranged on the screen is displayed as 901 (part palette section 423), and the user can drag and drop them onto the editor screen section 902 (screen definition editor section 420) to accept the arrangement of the parts on the screen displayed in the Web browser when the Web application is generated.

[0090] In the example of the editor screen portion 902, a text area is selected from the parts palette portion 901 and placed at the position 903 by dragging and dropping with a mouse or the like (not shown).

[0091] The placed UI widget 903 has default size and width information, and when the UI widget is first placed, it is displayed with the default UI widget size and width.

[0092] The method of arranging screen components is not limited to drag and drop from component palette section 423 to screen definition editor section 420, but may be a method of moving an already arranged component within the screen definition editor section, or a method of duplicating an already arranged component by copy and paste within the screen definition editor section. Also, components that have been arranged may be deleted. Returning to the explanation of the flowchart in FIG. 6.

[0093] In step S602 in Fig. 6, the program development device 101 divides the subsequent processing depending on the setting of whether or not the design is responsive, which was input in step S600. If it is set in step S600 that the UI to be displayed is to be generated in a responsive design, the processing proceeds to step S606, and if it is set to be generated in a fixed design (the check box 801 in Fig. 8 is not checked), the processing proceeds to step S603. In other words, the processing from step S603 onwards is the processing flow when the screen UI is generated in a fixed design.

[0094] When the process proceeds to step S603, the program development device 101 displays a property input section (screen property editor section 421) on the screen, and displays an input field for a property for specifying the width of the component therein. The process of step S603 will be described with reference to Figs. 10 and 11.

[0095] FIG. 10 is a schematic diagram showing an example of a fix design creation screen according to an embodiment of the present invention.

[0096] FIG. 10 is a diagram showing an example of an image in which the program development device 101 controls the display and the user (developer) changes the width of a UI widget.

[0097] 1002 in Fig. 10 displays the property input section (screen property editor 421) of the specified UI widget (1003 in the case of 1000). An input field for inputting the width of the UI widget is displayed in property input section 1002. Hereafter, a UI widget with a black circle at the midpoint of each side of a rectangular frame, such as 1003, indicates the UI widget selected in screen definition editor 420 (902 in Fig. 9), and property input sections disclosed hereinafter (for example, 1002 and 1301 in Fig. 13) accept input of the properties of the UI widget with a black circle at the midpoint of each side of a rectangular frame.

[0098] 10, screen property editor section 421 is displayed on the right side of the screen (1002), but screen property editor section 421 of a UI widget (selected UI widget) with a black circle at the midpoint of each side of a rectangular frame may be displayed on a modal dialog, for example, as shown in 1102 in Fig. 11. In that case, an input field 1101 for inputting the width of the UI widget is also displayed. Returning to the explanation of the flowchart in Fig. 6.

[0099] In the next step S604, program development device 101 determines whether there has been any input from the user in input field 1001 or 1101 for inputting the width of the UI widget displayed in step S603. If there has been an input of the width of the UI widget from the user, the process transitions to step S605, and if there has been no input from the user (i.e., the user has determined that the default value is sufficient for the width of the UI widget for each device), the process of the flowchart in FIG. 6 ends and the process transitions to step S609.

[0100] When the process proceeds to step S605, the program development device 101 acquires the value of the width of the UI widget displayed in step S603, and inputs it to the input / output definition.

[0101] Thereafter, the process proceeds to step S609, where the program development device 101 receives an input indicating whether the placement of other parts has been completed. If the placement of other parts has been completed, the flowchart in Fig. 6 ends, and the process proceeds to step S504 in Fig. 5. If the user determines in step S609 that another UI part is to be placed, the process proceeds to step S601, where the process of placing another part, moving the position of an existing part, and the like is repeated.

[0102] On the other hand, in step S602, if the setting of responsive design input in step S600 is responsive design (box 801 in FIG. 8 is checked), the process proceeds to step S606.

[0103] In step S606, program development device 101 displays a property input section (screen property editor section 421) on the screen, and displays an input field for a property for specifying the width of the part therein. The process of step S606 will be described with reference to Figs. 13 and 14.

[0104] FIG. 13 is a schematic diagram showing an example of a responsive design creation screen according to an embodiment of the present invention.

[0105] FIG. 13 is a diagram showing an example of an image in which the program development device 101 controls the display and the user (developer) changes the width of a UI widget.

[0106] 13 shows a property input section (screen property editor section 421) of a specified UI widget (1003 in the case of 1000). The property input section 1301 has an input field 1401 for inputting the width of the UI widget for each device. The property input section 1301 (screen property editor section 421) accepts input of attribute information for a selected UI widget 1303 in the screen definition editor section 420 (1302 in FIG. 13), for example. The input field 1401 shows an example of a display control value for each device.

[0107] The screen property editor section 421 may be displayed on a modal dialog as explained in Fig. 11. Returning to the explanation of the flowchart in Fig. 6, the screen property editor section 421 may be displayed on a modal dialog as explained in Fig. 11.

[0108] Next, in step S607 in Fig. 6, the program development device 101 determines whether the component size for each device has been changed. Whether the component size for each device has been changed is determined based on whether the value of the width property for each device 1401 in Fig. 14 has been changed by the user. If the value has been changed, the process proceeds to step S608, where a process of changing the component size for each device is performed. Details will be described with reference to Fig. 7.

[0109] As described in Fig. 7, the component size may be specified by dragging and dropping the mouse, or may be directly input into the width property input field 1401 in Fig. 14, or may be selected from a pull-down menu. Also, the component that accepts a component size change request may be set for each individual component, or may be set for multiple components collectively.

[0110] On the other hand, in step S607, if the part size for each device has not been changed, that is, the value of the width property of the part for each device 1401 in FIG. 14 has not been changed by the user (the user has determined that the default size of each part is acceptable), the default UI part width size for each device (1401) is not changed and the process proceeds to step S609.

[0111] When the process proceeds to step S609, the program development device 101 receives an input as to whether the placement of other parts has been completed. If the placement of other parts has been completed, the flowchart in Fig. 6 ends, and the process proceeds to step S504 in Fig. 5. Also, if an input that the user intends to place another UI part is received in step S609, the process proceeds to step S601, and the process of placing another part, moving the position of an existing part, and the like is repeated.

[0112] The flow of the responsive component size change process according to the embodiment of the present invention will be described with reference to FIG.

[0113] FIG. 7 is a diagram showing an example of a flowchart for changing the size of a responsive component according to the present invention.

[0114] In step S700, program development device 101 accepts a selection from the user as to whether the image of screen definition editor unit 420 is to be in desktop format, tablet format, or smartphone format.

[0115] Referring to 1200 in FIG. 12, an image of accepting a device selection from the user will be described.

[0116] In 1200 in FIG. 12, a desktop (personal computer) button 1201, a tablet button 1202, and a smartphone button 1203 are arranged.

[0117] When each selection button shown in 1200 in Fig. 12 is pressed, the display area is changed to the display size stored in storage unit 308 using the display size and setting values ​​corresponding to the form of each device. After the display area is changed, the size of the screen components (UI components) displayed on the screen can be changed for each device, thereby editing the size of the screen components (UI components) for each device. The flow of processing when each button is pressed is explained below.

[0118] When the desktop (personal computer) button 1201 is pressed, the process proceeds to the next step S701, and the program development device 101 displays the screen definition editor section 420 shown in 1502 of Fig. 15. That is, a 1920 x 1080 screen, which is a desktop screen image, is displayed in the screen definition editor section 1502.

[0119] When the tablet button 1202 is pressed in step S700, the process proceeds to step S704, and the program development device 101 displays a tablet-sized screen definition editor section 420 as shown in 1702 in FIG.

[0120] Furthermore, when the smartphone button 1203 is pressed in step S700, the process proceeds to step S707, and the program development device 101 displays a smartphone-sized screen definition editor section 420 as shown in 1902 in FIG.

[0121] Note that the areas outside the tablet display area and smartphone display area in Figures 17 and 19 are defined as undisplayable areas, and the browser display areas 1702 and 1902 cannot be enlarged or reduced. The reason they cannot be enlarged or reduced is that if a developer were to freely change the size of the browser, it would be impossible to reproduce the browser size for each device. For this reason, the areas that cannot be displayed are displayed as blank areas such as 1905, suggesting that the width of the display area 1902 cannot be changed.

[0122] In addition, since there are multiple sizes for smartphones, tablets, and desktops, as shown in 1210 of Figure 12, the browser display area may be able to be enlarged or reduced to fit each size, but it may not be possible to enlarge or reduce freely, and it may be possible to enlarge or reduce the size of the browser within each device, as shown in 1210 of Figure 12.

[0123] 1210 in FIG. 12 shows the screen display size and its classification for each device stored in the storage unit 306, but the device form may be stored in various forms such as the type of device (personal computer, tablet, smartphone) or a specific model name of the device. The screen size column may be stored as a screen aspect ratio, and may be stored in advance in the storage unit 306 or may be added later. Each type of device may be stored in one or multiple forms.

[0124] Next, the process proceeds to steps S702, S705, and S708 for the screen displayed in each browser size, and the program development device 101 accepts the size of the component in each screen as a value in units of 1 / 12 of the horizontal size of the screen, or accepts screen drawing so that the width becomes 1 / 12 of the horizontal size of the screen by a drag-and-drop operation using the user's mouse.

[0125] 15 to 20, a description will be given of an operation for changing the width of a UI widget by dragging and dropping the width with a mouse.

[0126] Fig. 15 shows a screen image when the desktop (personal computer) button 1501 is pressed. 1502 is a display image of the desktop screen. The processes in Figs. 15 and 16 are executed in steps S702 and S703.

[0127] FIG. 16 is a screen image after the desktop (personal computer) button 1501 is pressed (step S701).

[0128] In 1600 of FIG. 16, a component 1601 (text area) is placed in the screen definition editor section 420, and by default, its width is displayed as 2 / 12=1 / 6 of the width of the screen (see 1606).

[0129] Next, when the user drags and drops the circle at the center of the square frame 1601 to the right (step S702), it moves to 3 / 12=1 / 4 of the width of the screen, as in 1602. If it is moved further, the width changes to 4 / 12=1 / 3, as in 1603.

[0130] When the drag-and-drop of the mouse is released at location 1603, the text area inside also changes to the same width as the square frame with a circle at the midpoint, as shown in 1604, and the value at that time is reflected in desktop width input field 1605. In the case of 1604, the value "4" is reflected in 1605 (step S703).

[0131] Note that the entire screen is not visible in screen definition editor section 420 in Fig. 16, as can be seen from the scroll bar at bottom 1607 of 1600, and screen definition editor section 420 extends off the right side of the screen. Therefore, although the ratio of the screen width to the rectangular frame widths 1601 to 1604 appears to be different in Fig. 16, on the actual screen, they are displayed at a specified X / 12 ratio, as in 2222 within 2202 in Fig. 22 (in the case of 2202, UI widget 2222 is displayed at a 2 / 12 ratio).

[0132] Fig. 17 shows screen images before and after pressing the tablet button 1701. The processes in Fig. 17 and Fig. 18 are executed in steps S705 and S706.

[0133] When tablet button 1701 is pressed, screen definition editor unit 420 displays tablet-sized screen 1702 (step S704).

[0134] FIG. 18 is a diagram for explaining the behavior of the screen when the user changes the size of the UI widget after pressing the tablet button 1701.

[0135] In 1800 of FIG. 18, a component 1801 (text area) is placed in the screen definition editor section 420, and by default, its width is displayed as 3 / 12=1 / 4 of the width of the screen (see 1806).

[0136] Next, if the user drags and drops the circle at the center of the square frame in 1801 to the right, it will move to 5 / 12 of the width of the screen, as in 1802. If the user moves it further, it will change to 6 / 12=1 / 2 the width, as in 1803.

[0137] When the drag-and-drop of the mouse is released at location 1803, the text area inside also changes to the same width as the square frame with a circle at the midpoint, as shown in 1804, and the value at that time is reflected in tablet width input field 1805. In the case of 1804, the value "6" is reflected in 1805 (step S706).

[0138] Fig. 19 shows screen images before and after pressing the smartphone button 1901. Note that the processing in Fig. 19 and Fig. 20 is the processing executed in step S708 and step S709.

[0139] When the smart phone button 1901 is pressed, the screen definition editor unit 420 displays a smart phone-sized screen 1902 (step S707).

[0140] FIG. 20 is a diagram for explaining the behavior of the screen when the user changes the size of a UI widget after pressing the smartphone button 1901.

[0141] In FIG. 20, 2000, a part 2001 (text area) is placed in the screen definition editor section 420, and by default, its width is displayed at 6 / 12=1 / 2 the width of the screen (see 2006).

[0142] Next, if the user drags and drops the circle at the center of the square frame of 2001 to the right, it will move to 7 / 12 of the width of the screen, as in 2002. If the user moves it further, it will change to 8 / 12=2 / 3 of the width, as in 2003.

[0143] When the drag-and-drop of the mouse is released at location 2003, the text area inside also changes to the same width as the square frame with a circle at the midpoint, as in 2004, and the value at that time is reflected in tablet width input field 2005. In the case of 2004, the value "8" is reflected in 2005 (step S709).

[0144] As described above, the width of UI widgets can be easily changed for each device through the processing in steps S702, S705, and S708. Also, UI widgets can be arranged while checking the screen before deploying the program.

[0145] Next, the process proceeds to step S710, where the program development device 101 reflects the width values ​​of the UI components for each browser display size of the device selected by the user in step S700 in the component definition of the input / output definition. An example of the reflected UI definition will be described with reference to FIG.

[0146] Fig. 21 shows an example of the UI definition reflected in step S710, and is an example of display control information generated by the generation unit 310 in Fig. 3. Fig. 21 shows an example of the UI definition of the screen parts (UI parts) set in 1604 in Fig. 16, 1804 in Fig. 18, and 2004 in Fig. 20.

[0147] In 2101, the values ​​"4" are set for the UI widget "item1" as the width for personal computers, "6" as the width for tablets, and "8" as the width for smartphones. As mentioned above, these set values ​​are values ​​that set what percentage of the browser's display size (width) divided into 12 equal parts at which the UI widget is displayed. These values ​​are the values ​​reflected in steps S703, S706, and S709, respectively. Returning to the explanation of the flowchart in FIG. 7.

[0148] Next, in step S711 in Fig. 7, a confirmation process is performed as to whether the settings of other devices are to be changed as well, and if the UI component size on other devices is not to be changed, the flowchart in Fig. 7 is terminated. If an instruction to change the UI component size on other devices is accepted, the process transitions to step S700, and the process of pressing the device selection button and subsequent steps are repeated.

[0149] As described above, according to the first embodiment of the present invention, the size of each UI component can be set for each device in the program development device 101, and the display image for each device can be reproduced in the program development device 101 before the program is deployed. <Second embodiment> Unlike the first embodiment, instead of switching the screen as in step S700, values ​​may be directly input to 1401 in Fig. 14 to set the width of the UI components for each device. In that case, too, the display image on each device can be displayed by pressing the device switching button in Fig. 12. The second embodiment will be described with reference to Fig. 22.

[0150] FIG. 22 is a schematic diagram showing an example of a responsive design creation screen according to the present invention.

[0151] 2201 in Fig. 22 shows an example of screen generation using responsive design, with 2211 displaying a screen for inputting the setting value of the width of the UI widget for each device's screen width. The display width for each device is set by accepting input of the display width ratio of the UI widget for each device from a keyboard (not shown) or the like in this input field. In 2211, 2 / 12 of the screen width is input for the UI widget 2221 on a desktop (personal computer), 3 / 12 on a tablet, and 6 / 12 on a smartphone.

[0152] When the device switching buttons 1200 at the top left of the screen 2201 are pressed after input as shown in 2211, image screens 2202 to 2204 are displayed, respectively.

[0153] Reference numeral 2202 denotes a screen image when the desktop (personal computer) button 1201 is pressed, and a UI widget 2221 is displayed at a size that is 2 / 12 the horizontal width of the screen, as shown by reference numeral 2222.

[0154] Reference numeral 2203 denotes a screen image when the tablet button 1202 is pressed, and the UI widget 2221 is displayed at a size that is 3 / 12 the horizontal width of the screen 2203, as shown in reference numeral 2223.

[0155] Reference numeral 2204 denotes a screen image when the smart phone button 1203 is pressed, and the UI widget 2221 is displayed at a size that is 6 / 12 the width of the screen 2204 as shown by reference numeral 2224 .

[0156] Note that 2213 and 2214 displayed as blanks are areas outside the display area of ​​each device that do not display anything, and the size of the display area of ​​each device cannot be changed. Note that the size of the display area of ​​each device is different as shown by 1210 in FIG. 12, so the size of the display area may be changed within each device. For example, in the case of smartphones, the screen size of smartphone 2, which is 375×812, may be switched to a different size screen within a smartphone, such as smartphone 1 or smartphone 3. In that case, the device type (device name) and screen size of 1210 may be displayed in a specified position on the screen.

[0157] As described above, according to the second embodiment of the present invention, the size of each UI component can be set for each device in the program development device 101, and the display image for each device can be reproduced in the program development device 101 before the program is deployed. <Third embodiment> In the first and second embodiments, the width of the UI widget is controlled for each device. However, as another embodiment, a process for changing the display form for each device will be described with reference to FIG.

[0158] FIG. 23 is a schematic diagram showing an example of a responsive design creation screen according to the present invention.

[0159] FIG. 23 shows an example in which the display form of the portion 2313 displayed on the desktop (personal computer) is changed for each device.

[0160] Numerals 2301 and 2302 are screen images that set the display results for each device, and in 2311, it is specified that the UI widget 2313 is to be displayed in table format (results table) when displayed on a desktop (personal computer) or tablet. The table format indicates display in list format, and the first row of the list displays item names (product image, product code, product name, manufacturer, price, quantity) as in 2313, and the values ​​of each item are displayed from the second row onwards.

[0161] On the other hand, in the case of smartphone display, it is specified in 2312 that the contents of the UI widget in 2313 are to be displayed in card format (result card). The card format indicates a display that is completed as a single sheet, and on the card, for example, as in 2315, the name of each item (product name, price, quantity, etc.) and the value of each item (Desktop XXX, 160,000) are written and displayed on all cards in a preset format.

[0162] When each of the device switching buttons 1200 is pressed, the corresponding screen is displayed as shown in 2303 to 2305.

[0163] As set in 2311, the UI widget 2313 can display one item in list form in a table format as in 2313 or 2314 on a desktop (personal computer) display or tablet display.

[0164] On the other hand, in the case of the card format display set in the smartphone display by reflecting the setting in 2312, it is possible to display in a preset card format as in 2315.

[0165] These settings can be changed by the user. For example, if it is specified that the results be displayed in card format (result cards) even on a tablet, the results can be displayed in card format in a specified format even on a tablet.

[0166] As described above, according to the third embodiment of the present invention, the size of each UI component can be set for each device in program development device 101, and not only the width but also the display form can be set. Furthermore, in program development device 101, the display image for each device can be reproduced before deploying a program.

[0167] As described above, it goes without saying that the object of the present invention can be achieved by supplying a recording medium on which a program that realizes the functions of the above-mentioned embodiments is recorded to a system or device, and having the computer (or CPU or MPU) of that system or device read and execute the program stored on the recording medium.

[0168] In this case, the program itself read out from the recording medium will realize the novel functions of the present invention, and the recording medium on which the program is recorded will constitute the present invention.

[0169] Examples of recording media for supplying the program include flexible disks, hard disks, optical disks, magneto-optical disks, CD-ROMs, CD-Rs, DVD-ROMs, magnetic tapes, non-volatile memory cards, ROMs, EEPROMs, silicon disks, etc.

[0170] Furthermore, it goes without saying that the functions of the above-mentioned embodiments are not only realized by the computer executing a program it has read, but also includes cases where an OS (operating system) running on the computer performs some or all of the actual processing based on the instructions of the program, and the functions of the above-mentioned embodiments are realized through that processing.

[0171] Furthermore, it goes without saying that this also includes cases where a program read from a recording medium is written into a memory provided on a function expansion board inserted into a computer or a function expansion unit connected to a computer, and then a CPU or the like provided on the function expansion board or function expansion unit performs some or all of the actual processing based on the instructions of the program code, thereby realizing the functions of the above-mentioned embodiments.

[0172] The present invention may be applied to a system consisting of multiple devices, or to an apparatus consisting of a single device. Needless to say, the present invention can also be applied to a case where the object is achieved by supplying a program to a system or apparatus. In this case, the effect of the present invention can be enjoyed by the system or apparatus by reading a recording medium storing a program for achieving the present invention into the system or apparatus.

[0173] The program may be in the form of object code, program code executed by an interpreter, script data supplied to an OS (operating system), or the like.

[0174] Furthermore, by downloading and reading a program for achieving the present invention from a server, database, etc. on a network using a communication program, the system or device can enjoy the effects of the present invention. Note that the present invention also includes configurations that combine the above-mentioned embodiments and their modified examples. [Explanation of symbols]

[0175] 101 Program Development Equipment 102 Program Development Server 103 Database Server 104 Application Client 105 Application Server 106 Web Server 107 Network

Claims

1. A determination means for determining a value relating to the display size of a component to be arranged on a screen for each type of device; a display control means for controlling display of the screen on which the components are arranged at a display size based on the value determined by the determination means and corresponding to the type of device on which the screen is displayed. An information processing system comprising:

2. The determination means controls display of an input area for a value for each type of device on one screen, and determines a value inputted into the input area as the value for each type of device.

2. The information processing system according to claim 1,

3. The input area is an input field divided according to the type of the device.

3. The information processing system according to claim 2,

4. the value relating to the display size is a value relating to the width of the component, The display control means controls to display a screen in which the part is displayed with a width related to the value.

4. The information processing system according to claim 1, wherein:

5. The value relating to the display size is a value input as a predetermined ratio corresponding to the width of the screen size of the device type, The display control means controls to display a screen on which the components are arranged with a width of a value input as a predetermined ratio corresponding to the width of a screen size of the device type for each of the components.

5. The information processing system according to claim 1, wherein:

6. The display control means controls to display a screen on which a plurality of the parts are arranged in a predetermined display size for each type of the device.

6. The information processing system according to claim 1, wherein:

7. The value related to the display size is set by default for each type of device.

7. The information processing system according to claim 1, wherein:

8. The display size is set by default to a different value for each type of device.

8. The information processing system according to claim 1, wherein:

9. The display device further includes a receiving means for receiving a selection of a type of device so as to display the screen in a screen size defined for each type of device, The display control means controls so as to further display a preview in a display size of the part on a screen size defined in accordance with the type of device accepted by the acceptance means.

9. The information processing system according to claim 1, wherein:

10. The display control means controls to receive a change in the display size of the part in the preview and to display a screen on which the part is arranged with the display size according to the received change.

10. The information processing system according to claim 9,

11. The display control unit may further include a selection receiving unit for receiving a selection of a display size of the part to be displayed by the display control unit as a fixed size independent of the type of device.

11. The information processing system according to claim 1,

12. The types of devices include personal computers and smartphones.

12. The information processing system according to claim 1, wherein:

13. A determination step of determining a value relating to a display size of a component to be arranged on a screen for each type of device; a display control step of controlling display of the screen on which the components are arranged at a display size based on the value determined in the determination step and corresponding to the type of device that displays the screen. An information processing method comprising:

14. A program for causing at least one computer to function as each of the means of the information processing system according to any one of claims 1 to 12.

Images