WO2018154801A1 - Web page production support system - Google Patents

Web page production support system Download PDF

Info

Publication number
WO2018154801A1
WO2018154801A1 PCT/JP2017/018036 JP2017018036W WO2018154801A1 WO 2018154801 A1 WO2018154801 A1 WO 2018154801A1 JP 2017018036 W JP2017018036 W JP 2017018036W WO 2018154801 A1 WO2018154801 A1 WO 2018154801A1
Authority
WO
WIPO (PCT)
Prior art keywords
web page
information
image
web
area
Prior art date
Application number
PCT/JP2017/018036
Other languages
French (fr)
Japanese (ja)
Inventor
鈴木　英樹
Original Assignee
エヴリ・チューンズ株式会社
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by エヴリ・チューンズ株式会社 filed Critical エヴリ・チューンズ株式会社
Publication of WO2018154801A1 publication Critical patent/WO2018154801A1/en

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F12/00—Accessing, addressing or allocating within memory systems or architectures
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F13/00—Interconnection of, or transfer of information or other signals between, memories, input/output devices or central processing units
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00—Handling natural language data
    • G06F40/10—Text processing
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00—Handling natural language data
    • G06F40/10—Text processing
    • G06F40/12—Use of codes for handling textual entities

Definitions

  • This disclosure relates to a web page creation support system that supports web page creation.
  • Patent Document 1 describes a technique for automatically creating a standard web page based on specific data prepared in advance.
  • Patent Document 1 describes a technique for automatically creating a web page, it is limited to a web page according to a standard format and has a low degree of design freedom. Therefore, it is not suitable for creating a web page with uniqueness in line with the intention of a person who creates a web page and publishes it on the WWW (hereinafter referred to as a page creator).
  • One aspect of the present disclosure preferably provides a technique for supporting the creation of a unique web page in accordance with the intention of the page creator.
  • the web page production support system includes a reception unit, a storage unit, a program creation unit, and a transmission unit.
  • the receiving unit receives design information including at least one image information representing a design design of a web page to be produced and setting information representing settings related to the function of the web page from a web client requesting production of the web page. Is configured to do.
  • the setting information includes coordinate information representing coordinates on an image of at least one clickable area provided on the web page.
  • the program creation unit is configured to create a generation program.
  • This generation program automatically generates a web page corresponding to the design information and setting information corresponding to the web page on the web client side browsing the web page that can be generated based on the stored design information and setting information.
  • the program creation unit is configured to create a generation program that generates a web page having the following functions as a generation program.
  • the web page displays the image information of the design information on the web browser.
  • the web browser recognizes the clickable area.
  • the transmission unit is configured to transmit browsing data corresponding to the web page to the browsing request source web client in response to a browsing request from the web client to the web page.
  • the browsing data includes design information corresponding to the web page and a generation program for generating the web page.
  • a web page having a clickable function can be produced simply by uploading design information and setting information including at least one piece of image information from a web client requesting production of the web page. can do. Therefore, even if the page creator does not have the specialized knowledge necessary for coding work or the like, it is possible to support the creation of a unique web page in accordance with the intention of the page creator.
  • the web page creation support system of the present disclosure may further employ the following configuration.
  • the receiving unit is configured to receive inactive image information and design information including an active image as the design information.
  • the inactive image information is image information representing a state in which all image areas corresponding to at least one clickable area provided on the web page are not targets of operation.
  • Active image information is image information corresponding to inactive image information, and is image information representing a state in which an image area corresponding to a clickable area is a target of operation.
  • the program creation unit is configured to create a generation program that generates a web page having the following functions as the generation program.
  • the web page displays inactive image information on the web browser. Then, when a predetermined operation is performed on the clickable area indicated by the coordinate information of the setting information in the displayed inactive image information, the web page is as follows. That is, the web page is displayed by replacing the image area corresponding to the clickable area in the inactive image information with the image area corresponding to the clickable area in the corresponding active image information.
  • the web page production support system of the present disclosure may be configured to further include a public processing unit.
  • the publication processing unit is configured to register a web page that can be generated based on the design information and setting information saved by the saving unit as a publication target on the World Wide Web. According to such a configuration, the web page is automatically published on the WWW only by uploading the design information and the setting information from the web client requesting the production of the web page. Thereby, since it becomes possible to perform a search easily from the web client on the viewer side, it is possible to increase the chances that the web page is browsed.
  • the web page creation support system of the present disclosure may further employ the following configuration.
  • the receiving unit is configured to receive setting information further including function information indicating a function to be executed when a predetermined execution operation for the clickable area is input.
  • the program creation part is comprised so that the production
  • the web page has a function of executing the function indicated by the function information of the clickable area in the setting information when the execution operation for the clickable area indicated by the coordinate information of the setting information is input in the displayed image information. Also have.
  • the receiving unit may be configured to receive setting information including function information regarding at least one of a hyperlink, an input form, a telephone application, and an e-mail client.
  • setting information including function information regarding at least one of a hyperlink, an input form, a telephone application, and an e-mail client.
  • the web page creation support system of the present disclosure may further employ the following configuration. Specifically, when the image information is displayed as a web page on the web browser, the receiving unit is content width information that is information that defines a range in the horizontal width direction that must be displayed out of the total width of the image information. Is further acquired.
  • the storage unit is further configured to store the content width information received by the receiving unit in the storage device in association with the identification information regarding the web page.
  • the program creation unit is configured to create a generation program that generates a web page further having the following functions as a generation program.
  • the web page includes the entire width of the content area, which is the area represented by the content width information corresponding to the image information, in the display object in the width direction of the web browser.
  • a part of the image information in the horizontal width direction other than the content area that exceeds the horizontal width of the display area of the web browser is excluded from the display target in the horizontal width direction of the web browser.
  • an area including main information such as a message to be transmitted to a viewer on a web page can be set as a content area among uploaded image information.
  • This content area is always displayed regardless of the width of the display range of the web browser.
  • areas other than the content area are displayed as a background that matches the display width of the web browser. In this way, it is possible to produce a web page in a manner that allows the main content area and the background to be properly used according to the intention of the page creator for the uploaded image information.
  • the flowchart showing the procedure of an authentication process An example of a production request screen.
  • the flowchart showing the procedure of a production request reception process An example of a table in which design information and setting information are stored.
  • Explanatory drawing showing the setting procedure of content width Explanatory drawing showing the display procedure of the web page based on the setting of content width.
  • SYMBOLS 1 Web page production support system, 11 ... WWW server, 12 ... Design information database, 13 ... Setting information database, 20 ... Client terminal (production side), 30 ... Client terminal (viewing side), 100 ... Internet.
  • the web page production support system 1 is a computer system managed by an operator who operates a service that supports web page production.
  • the web page production support system 1 is connected to the Internet 100.
  • the web page production support system 1 includes a WWW server 11, a design information database 12, and a setting information database 13.
  • the WWW server 11 is a server computer that provides various information in response to a request from a web client connected to the Internet 100.
  • the WWW server 11 is mainly configured by a CPU, RAM, ROM, auxiliary storage device, input / output interface and the like (not shown).
  • the WWW server 11 has a function of receiving information that is the basis of a web page from a web client (for example, the client terminal 20) that requests creation of the web page.
  • the WWW server 11 has a function of publishing on the WWW a web page that can be constructed from information received from a web client.
  • the WWW server 11 when the WWW server 11 receives a browsing request from a web client (for example, the client terminal 30) for a published web page, the WWW server 11 obtains information necessary for constructing the web page from the browsing request source web client. It has the function to transmit to. These functions are realized, for example, by executing a well-known PHP: HypertextperPreprocessor script installed in the WWW server 11.
  • the design information database 12 is a database for storing design information including information related to the design design of the web page among the information that is the basis of the web page received from the web client that requested the creation of the web page.
  • the setting information database 13 is a database for storing setting information including information related to setting of functions assigned to a web page among information that is the basis of the web page received from the web client that requested the creation of the web page. is there.
  • the WWW server 11, the design information database 12, and the setting information database 13 constituting the web page production support system 1 may be separate devices or may be configured as an integrated device.
  • client terminals 20 and 30 having web browsers for browsing websites are connected to the Internet 100.
  • client terminals 20 and 30 are embodied by portable terminals, such as a personal computer and what is called a smart phone and a tablet computer, for example.
  • portable terminals such as a personal computer and what is called a smart phone and a tablet computer, for example.
  • FIG. 1 for simplicity of explanation, one client terminal 20 and 30 is illustrated, but a large number of client terminals 20 and 30 may be connected to the Internet 100.
  • the client terminal 20 is a computer that functions as a web client that requests the web page production support system 1 to produce a web page via the Internet 100.
  • the client terminal 30 is a computer that functions as a web client that browses web pages published on the WWW by the web page production support system 1 via the Internet 100. Further, the client terminals 20 and 30 have a function of executing a client-side application constructed in a specific script language such as JavaScript (registered trademark), for example.
  • the WWW server 11 authenticates the user related to the client terminal 20 that is the request source. Specifically, the WWW server 11 receives an authentication code for identifying a user from the client terminal 20. Then, the WWW server 11 authenticates the user by determining whether or not the authentication code received from the client terminal 20 matches the authentication code registered in advance as a valid user.
  • the WWW server 11 determines whether or not the user authentication is accepted as a result of S100. When the user authentication is not accepted (S102: NO), the WWW server 11 returns to the process of S100. On the other hand, when the user authentication is accepted (S102: YES), the WWW server 11 proceeds to the process of S104.
  • the WWW server 11 transmits the request application program to the web browser of the client terminal 20 that requested the request.
  • This request application is a client-side application executed on the web browser of the client terminal 20.
  • the request application is constructed in a script language such as JavaScript (registered trademark).
  • This request application displays on the display screen of the web browser a production request screen composed of a GUI for allowing the user to input information that is the basis of the web page to be produced.
  • the request application has a function of uploading information input in accordance with the GUI of the production request screen to the WWW server 11.
  • a production request screen 40 illustrated in FIG. 3 is displayed on the display screen of the web browser as an initial screen.
  • the initial screen of the production request screen 40 illustrated in FIG. 3 displays a user interface for inputting image information representing a design design of a web page to be produced, basic information representing an outline of the web page, and the like. Yes.
  • the production request screen 40 is provided with an image display area 41.
  • This image display area 41 is a user interface for acquiring and displaying an image representing a design design of a web page to be produced.
  • the image display area 41 describes image information representing a design design, that is, a message prompting to input an image file.
  • the user opens an arbitrary file folder on the web browser and selects an image file, or performs an operation of dragging and dropping an icon indicating an image file onto the image display area 41, thereby The file can be input.
  • image information such as an inactive image 50 and an active image 51 as illustrated in FIG. 4 are input as image information representing the design design of a web page.
  • the inactive image 50 and the active image 51 are composed of simple bitmap images that do not include a mechanism such as a document or hypertext.
  • An inactive image is an image representing a design design of a web page, and an image representing a raw state in which all image areas corresponding to at least one clickable area provided on the web page are not targets of operation. It is.
  • an active image is an image corresponding to inactive image information, and is an image representing a state in which an image region corresponding to a clickable region is an operation target.
  • the clickable area is a predetermined process when a point-and-click operation (hereinafter simply referred to as “click”) by a pointing device such as a mouse or a touchpad is input on the display screen of the web browser. Is a specific image area to execute.
  • the active image 51 corresponding to the non-active image 50 representing the prime state As the active image 51 corresponding to the non-active image 50 representing the prime state, the image regions 51a, 51b, 51c, 51d corresponding to the clickable regions are highlighted such as shaded. It shall be. Note that the images in the image area other than the clickable area are the same.
  • the production request screen 40 is provided with an information input area 42.
  • the information input area 42 has a user interface for inputting basic information about a web page to be created.
  • the information input area 42 is provided with user interfaces such as a plurality of types of text boxes, drop-down lists, buttons, and the like indicated by reference numerals 42a to 42g and 43.
  • Numeral 42a indicates a text box for inputting text information representing the title of the web page.
  • Reference numeral 42b denotes a text box for inputting information representing the name of an information providing entity (that is, an advertiser) by a web page.
  • Reference numeral 42c denotes a text box for inputting information representing a simple summary sentence or explanatory text of a web page.
  • Reference numeral 42d indicates a text box for inputting information representing a keyword that is a characteristic of a web page and can be searched by a well-known search engine that searches information on the Internet.
  • Reference numeral 42e denotes a text box for inputting information representing a period for publishing a web page on the WWW.
  • Numeral 42f indicates a pull-down menu for selecting one of a plurality of options for designating whether to publish a web page on the WWW.
  • Reference numeral 42g indicates a pull-down menu for selecting one of a plurality of options for designating the display format of the web page. For example, it is possible to select whether a web page is dedicated for display on a PC, dedicated for display on a smartphone, or shared for display on a PC and smartphone. It has become.
  • Reference numeral 43 denotes a button that completes the input of the image information and the basic information and gives an instruction to shift the production request screen 40 to the next screen.
  • FIG. 5 illustrates a state after the user inputs image information and basic information on the production request screen 40 according to the initial screen illustrated in FIG.
  • an image input by the user is displayed in the image display area 41 of the production request screen 40.
  • the inactive image 50 is drawn on the active image 51 out of the two images of the inactive image 50 and the active image 51 illustrated in FIG. Therefore, only the inactive image 50 is visible to the user.
  • the inactive image 50 may be displayed in the image display area 41, and the active image 51 may be arranged side by side in a non-display state.
  • various types of information input or selected by the user are displayed in the boxes 42a to 42g of the information input area 42.
  • each piece of information input so far is confirmed, and the production request screen 40 shifts to the next input acceptance state illustrated in FIGS. 6 to 8. .
  • the production request screen 40 illustrated in FIGS. 6 to 8 accepts input of information related to setting of functions given to the web page.
  • an area to be set as a clickable area can be designated by a pointing device such as a mouse or a touch pad.
  • the coordinate range of the rectangular clickable area can be specified by clicking the coordinates corresponding to the upper left vertex of the rectangle and dragging the coordinates to the lower right coordinates. Subsequently, the contents of processing to be executed when the designated clickable area is clicked can be set. By repeatedly performing these operations, the functions of a plurality of clickable areas can be set.
  • FIG. 6 shows a situation where a clickable area 51a is designated on the image displayed in the image display area 41.
  • the image area corresponding to the clickable area 51 a in the inactive image 50 displayed over the active image 51 is replaced with the corresponding image area in the active image 51 and displayed.
  • the active image 51 may be arranged side by side in a non-display state next to the inactive image 50. In that case, when a clickable area is designated on the inactive image 50, an image obtained by sliding a corresponding image area in the inactive image 51 by a certain amount is displayed.
  • the setting window 45a pops up in the vicinity of the clickable area 51a.
  • the setting window 45a is a user interface for setting a function assigned to the clickable area 51a.
  • a text box 46a is provided in the setting window 45a. Information indicating the contents of processing to be executed is input to the text box 46a, and the range and function of the clickable area 51a are determined by clicking the apply button 47a in the setting window 45a.
  • a URL indicating a website resource on the Internet is entered in a text box 46a in the setting window 45a.
  • a destination website by the hyperlink function is set as a function of the clickable area 51a.
  • a link information display area 44 is provided in the right area of the production request screen 40. In this link information display area 44, information 44a indicating the URL of the link destination set as a function of the clickable area 51a is displayed.
  • FIG. 7 shows a situation in which another clickable area 51b is set from the situation illustrated in FIG. At this time, the image area corresponding to the clickable area 51 b in the inactive image 50 displayed over the active image 51 is replaced with the corresponding image area in the active image 51 and displayed.
  • the setting window 45b is popped up in the vicinity of the clickable area 51b.
  • the setting window 45b is a user interface for setting a function assigned to the clickable area 51b.
  • the form use button 48 provided in the setting window 45b is clicked, the character string "" form use "" is automatically entered in the text box 46b.
  • ““ form use ”” is input here, a function for starting the input form is set as the function of the clickable area 51b.
  • the apply button 47b in the setting window 45b is clicked, the range and function of the clickable area 51b are determined. Further, as illustrated in FIG. 7, the link information display area 44 displays information 44b indicating “form use” set as a function of the clickable area 51b.
  • FIG. 8 shows a situation in which further clickable areas 51c and 51d are set in the same manner as the procedure described in the examples of FIGS.
  • a function for starting a telephone application for making a call using a designated telephone number as a call partner is set as a function of the clickable area 51c.
  • a function of starting an email client with a designated email address as a destination is set as a function of the clickable area 51c.
  • the link information display area 44 displays information 44c representing the telephone number of the telephone call destination set as a function of the clickable area 51c.
  • information 44d indicating an e-mail address indicating an e-mail destination set as a function of the clickable area 51d is displayed.
  • the publish button 49 provided in the link information display area 44 is clicked.
  • each information input from the user through the production request screen 40 is uploaded to the WWW server 11.
  • the image information representing the design design of the web page (that is, the file of the inactive image and the active image) and the basic information of the web page are uploaded to the WWW server 11 as design information.
  • coordinate information indicating the coordinate range of each clickable area on the web page and information indicating the function of each clickable area are uploaded to the WWW server 11 as setting information.
  • the WWW server 11 receives the design information and setting information uploaded in the information input process executed by the web browser of the requesting client terminal 20.
  • the design information received here includes image information representing the design design of the web page (that is, files of inactive images and active images) and basic information of the web page.
  • the setting information includes coordinate information indicating the coordinate range of each clickable area on the web page and information indicating the function of each clickable area.
  • the WWW server 11 stores the design information and setting information received in S200 in the design information database 12 and the setting information database 13 in association with identification information for identifying the web page. Specifically, the WWW server 11 creates a “page” table that is a table describing the contents of basic information of a web page. Then, the WWW server 11 stores the created “page” table and inactive image and active image files in the design information database 12. Further, the WWW server 11 creates a “link setting” table that is a table describing the contents of the setting information, and stores it in the setting information database 13.
  • the “page” table 60 includes items such as “ID”, “title”, “company name / store name”, “tag”, “description”, and “image file name”. ing. Among these, in the item “ID”, unique identification information given to identify the web page is described. The item “ID” is expressed by a multi-digit numeric string.
  • the title of the web page is described in the “Title” item.
  • This “title” item is expressed by text information.
  • the content described in the “title” item is the content input in the text box 42a illustrated in FIG.
  • the item “company name / store name” is expressed by text information.
  • the content described in the item “company name / store name” is the content entered in the text box 42b illustrated in FIG.
  • the item “explanation” item a summary or explanation of the web page is described.
  • the item “explanation” is expressed by text information.
  • the content described in the item “explanation” is the content input in the text box 42c illustrated in FIG.
  • the information described in each item of “title”, “company name / store name”, and “description” is the result of a search by a well-known search site that provides a search engine function on the Internet. Information that can be presented.
  • Tag a word representing the characteristics of the web page is described.
  • the item of “tag” is expressed by text information.
  • the content described in the “tag” item is the content input in the text box 42d illustrated in FIG.
  • Information described in the “tag” item is information that can be used as a keyword to be searched by a search engine.
  • a common file name is described for each of the inactive image and active image files stored in the design information database 12. For example, when the common file name is “aaa.jpg”, the file name of the inactive image is “aaa.jpg” and the file name of the active image is “aaa_activ.jpg”. In this way, the inactive image and the active image are associated with each other and can be distinguished from each other.
  • the “link setting” table 61 includes items such as “ID”, “page ID”, “link type”, “value”, “coordinate”, and “deletion flag”. Is provided.
  • the “link setting” table 61 is created for each clickable area set in the web page. That is, when a plurality of clickable areas are set for one web page, a plurality of “link setting” tables 61 corresponding to each clickable area are stored in the setting information DB 13.
  • the “ID” item unique identification information given to identify the clickable area is described.
  • the item “ID” is expressed by a multi-digit numeric string.
  • identification information of a web page to which the “link setting” table 61 is applied is described. Specifically, the same identification information as the “ID” item in the “page” table 60 is described in the “page ID” item. In this way, the “page” table 60 and the “link setting” table 61 are associated with each other. Thereby, the function of the clickable area represented by the “link setting” table 61 is applied to the web page related to the associated “page” table 60.
  • link type information indicating the type of function to be executed when the clickable area is clicked on the web page.
  • This item of “link type” is expressed by a number of an identification number assigned in advance for each type of function. Specifically, identification numbers such as 1, 2, 3,... Are assigned for each function such as hyperlink, input form activation, telephone application activation, e-mail client activation, and the like. Then, according to the content of the information indicating the function of the clickable area included in the setting information received in S200, the identification information of the corresponding function is described in the item “link type”.
  • the “value” item information indicating the link destination corresponding to the clickable area is described.
  • This “value” item is expressed by text information.
  • the contents described in the “value” item are a URL, a telephone number, an e-mail address, and the like as a connection destination of a function assigned to the clickable area.
  • These URL, telephone number, e-mail address, etc. are the contents entered in the text box 46 exemplified in FIGS.
  • coordinate information indicating the coordinate range of the clickable area on the inactive image and the active image is described.
  • value is expressed by text information. For example, when the clickable area is set as a rectangle, coordinate values representing the coordinates of the upper left vertex and the lower right vertex of the rectangular image area are described.
  • This “value” item is represented by a number of 0 or 1. Specifically, by describing the number “1” in this “deletion flag” item, it is possible to set the web page to be displayed with no clickable area.
  • the WWW server 11 executes a process of registering a web page that can be generated based on the design information and setting information saved in S202 as a publication target on the WWW. Specifically, the WWW server 11 accesses a well-known search site that provides a search engine function, and registers a URL including information indicating the web page as a search target in the WWW server 11. Thereby, the browsing person can search the said website through a search site.
  • the WWW server 11 when registering a web page in a search site, the WWW server 11 includes “title”, “company name / store name”, “description”, “tag”, etc. described in the “page” table 60 related to the web page.
  • the contents of each item may be registered together with the URL of the web page.
  • the contents of each item such as “title”, “company name / store name”, “explanation” and the like can be presented to the viewer as the contents of the search result by the search engine.
  • words described in each item of “tag” can be set as keywords for searching the web page.
  • the WWW server 11 transmits information indicating that the publication of the web page is completed to the web browser of the client terminal 20 as the request source. After S206, the WWW server 11 ends the production request reception process.
  • the WWW server 11 reads design information and setting information, which are the basis of the web page corresponding to the browsing request from the client terminal 30, from the design information database 12 and the setting information database 13.
  • the information read here includes the contents of the tables 60 and 61 associated with the web page and the inactive image and active image files associated with the web page.
  • the WWW server 11 creates an HTML document incorporating a script configured to automatically generate and display a web page on the web client side based on each information read in S300.
  • the web page generation script is created by the WWW server 11 using a script language mechanism such as JavaScript (registered trademark).
  • the WWW server 11 creates an HTML document incorporating a script for automatically generating a web page having the following mechanism.
  • the web page is configured to display an inactive image on the display screen of the web browser.
  • the following operation is performed. That is, the image area corresponding to the clickable area of the inactive image is replaced with the image area corresponding to the clickable area of the active image, and displayed on the display screen of the web browser.
  • the WWW server 11 forms a script so that a web page is generated according to the content represented by the item “Coordinate” in the “Link setting” table 61.
  • the predetermined operation here is exemplified by a so-called mouse-over operation in which a mouse pointer is placed in a clickable area.
  • the display is returned to the display of the inactive image.
  • this web page is configured to cause a web browser to execute a function assigned to the clickable area when an execution operation such as a click is input to the clickable area.
  • a web page is generated according to the content represented by the item “link type” in the “link setting” table 61 of the clickable area.
  • the WWW server 11 forms a script.
  • the parameter passed to the application that is started when the execution operation is performed on the clickable area is generated as a web page as indicated by the “value” item in the “link setting” table 61 of the clickable area.
  • the WWW server 11 forms a script.
  • the WWW server 11 transmits browsing data including the HTML document created in S302 and the image file (that is, the inactive image and the active image) constituting the web page to the client terminal 30 that is the browsing request source. To do. After S304, the WWW server 11 ends the browsing request acceptance process.
  • the client terminal 30 that has received the browsing data from the WWW server 11 automatically generates a web page by executing a web page generation script by the web browser, and the generated web page is displayed on the web browser. Displayed on the screen.
  • a display example of the web page will be described with reference to FIG.
  • FIG. 12 it is assumed that a web page corresponding to the contents set in the cases of FIGS. 3 to 8 is displayed on the display screen of the web browser of the client terminal 30.
  • the web page 70 in a state of only inactive images is displayed.
  • a pointer 71 operated by a pointing device such as a mouse is also displayed on the display screen of the web browser.
  • the pointer 71 is placed in the clickable area 72 set at the upper left of the web page 70 and the mouse is over.
  • the clickable area 72 is highlighted by shading, and it is clearly shown to the viewer that this clickable area is an operation target. This highlighting is realized by replacing the image area corresponding to the clickable area 72 of the inactive image with the image area corresponding to the clickable area 72 of the active image.
  • the clickable area 72 has a destination website set by the hyperlink function. Therefore, when the clickable area 72 is clicked by the pointer 71 from the stage (2) in FIG. 12, the web browser displays the set link destination website as illustrated in FIG. 12 (3). Access and display the contents of the website on the display screen.
  • the web browser when a clickable area where activation of the input form is set is clicked, the web browser activates and displays a predetermined input form. When a clickable area where activation of the telephone application is set is clicked, the web browser activates the telephone application with the set telephone number as the call destination. When a clickable area where activation of the e-mail client is set is clicked, the web browser activates the e-mail client with the set e-mail address as a destination.
  • the web page production support system 1 has the following effects.
  • By simply uploading design information and setting information to the WWW server 11 from the web browser of the client terminal 20 that requests the creation of a web page a web page having a clickable function can be made public on the WWW. Therefore, even if the page creator does not have the specialized knowledge necessary for coding work or the like, it is possible to support the creation of a unique web page in accordance with the intention of the page creator.
  • the web page is automatically published on the WWW, the viewer can easily perform a search, so that the chances of browsing the web page can be increased. Further, according to the intention of the page creator, it is possible to support the creation of a web page having various functions such as hyperlinks, input forms, telephone applications, and e-mail clients.
  • the processing of S104 and S200 executed by the PHP script of the WWW server 11 corresponds to an example of processing as a receiving unit.
  • the process of S202 executed by the PHP script of the WWW server 11 corresponds to an example of a process as a storage unit.
  • the processing of S204 executed by the PHP script of the WWW server 11 corresponds to an example of processing as a public processing unit.
  • the processing of S302 executed by the PHP script of the WWW server 11 corresponds to an example of processing as a program creation unit.
  • the process of S304 executed by the PHP script of the WWW server 11 corresponds to an example of a process as a transmission unit.
  • a web page is created by uploading two types of images, an inactive image and an active image.
  • the present invention is not limited to this, and an image that is displayed as a background of a web page may be uploaded to be applied to display of a web page.
  • the web browser is configured to display an inactive image superimposed on the front side of the background image.
  • the configuration may be such that the upload of the active image is omitted and the web page can be produced only by uploading the image corresponding to the inactive image.
  • the web browser is recognized as a clickable area when a mouse over operation is performed on the clickable area set to an image corresponding to an inactive image. For example, when a mouse over operation is performed on a clickable area, the display mode of the mouse pointer is changed by the function of the web browser that recognizes the clickable area, so that the viewer can click without changing the image. The area can be recognized.
  • image processing for example, cloudiness or reverse display
  • a configuration has been described in which design information and setting information that is the basis of a web server are input by providing a client-side application that displays a production request screen to a web client that requests web page production.
  • a configuration is provided in which a production request screen created in a server-side application that operates on the WWW server 11 side is provided to a web client, and design information and setting information are input to the web client along the production request screen. There may be.
  • the content width may be set for the uploaded image information, and the web page may be displayed in a manner that reflects the set content width.
  • the specific procedure will be described with reference to FIGS. In the following description of FIG. 13 and FIG. 14, configurations that are not particularly mentioned are based on the configurations of the above-described embodiment.
  • the content width here is a range in the horizontal width direction in which display is essential regardless of the display width of the web browser that browses the web page, out of the total width of the image information uploaded from the client terminal 20 on the production side. is there.
  • information defining the content width is referred to as content width information.
  • the content width information is expressed by, for example, a range of the number of pixels in the horizontal width direction of the image.
  • the production request screen 40 displayed on the display screen of the web browser after the input of the image information is shown in FIG. Transition to contents as exemplified in 1).
  • the timing for shifting to the production request screen 40 in (1) of FIG. 13 is, for example, immediately after an image file or basic information is input on the production request screen 40 illustrated in FIG.
  • the production request screen 40 illustrated in (1) of FIG. 13 is provided with an area for displaying the image information input at the previous stage and a GUI for setting the content width. As illustrated in (1) of FIG. 13, an image 52 representing the entire input image information is displayed in the image display area 41 provided on the production request screen 40.
  • the production request screen 40 is provided with a slider 81.
  • the slider 81 is a GUI for designating the content width for the image 52 displayed in the image display area 41.
  • the slider 81 can be operated to expand or contract the content width on the image 52 by moving the knob to the left or right using a pointing device.
  • a display line 82 is displayed on the image 52. The display line 82 moves to the left and right in conjunction with the position of the knob of the slider 81 and displays the content width.
  • the production request screen 40 is provided with a setting button 83.
  • the setting button 83 When the setting button 83 is clicked, the content width specified by the slider 81 is fixed, and the production request screen 40 shifts to an input acceptance state for the next item. Thereafter, when the information input process performed by the web browser of the client terminal 20 is completed, each piece of information (that is, including design information, setting information, and content width information) input from the user through the production request screen 40 is stored in the WWW server. 11 is uploaded.
  • the WWW server 11 receives the design information, the setting information, and the content width information uploaded from the requesting client terminal 20 in S200 of the production request receiving process (see FIG. 9).
  • the WWW server 11 associates the design information, setting information, and content width information received in step S200 with identification information for identifying a web page, and stores the design information in the design information database 12 and the setting information database 13. save.
  • the content width information may be recorded by providing an item “content width” in the “page” table 60 stored in the design information database 12 as illustrated in FIG. Conceivable.
  • the item “content width” in the “page” table 60 describes information indicating the range of the number of pixels in the width direction of the image. This “content width” item is expressed by text information.
  • the series of procedures includes a procedure in which the WWW server 11 transmits browsing data including information related to the content width to the web client. Moreover, the procedure in which a web page is displayed in the aspect by which the content width was controlled in the web client is included.
  • the WWW server 11 receives design information, setting information, and content width information that are the basis of the web page corresponding to the browsing request, the design information database 12 and the setting information database 13. Read from.
  • the WWW server 11 creates an HTML document incorporating a script configured to automatically generate and display a web page on the web client side based on the information read in S300.
  • the WWW server 11 generates a CSS file that defines the content width as illustrated in (1) of FIG. CSS here is an abbreviation of Cascading Style Sheets, and is a well-known programming language for designating the style of a web page.
  • the CSS file generated here includes information defining the layout of the web page as follows. That is, when image information is displayed on the web browser, the entire width of the area corresponding to the content width defined by the content width information is included in the display object in the horizontal width direction of the web browser. In addition, a portion of the image information in the width direction other than the content width that exceeds the width of the display area of the web browser (that is, the display width) is excluded from being displayed in the width direction of the web browser and is not displayed. And
  • the WWW server 11 receives the browsing data including the CSS file that defines the content width, the HTML document, and the image file, as the client terminal 30 that is the browsing request source. Send to.
  • a web page is generated by the web browser, and the generated web page is displayed on the display screen of the web browser.
  • the web browser of the client terminal 30 controls the display width of the web page based on the CSS file that defines the content width.
  • reference numeral 90 represents an image display range in the web browser.
  • the display range 90 of the web browser includes at least the entire content width defined in the CSS file among the image information represented by the image file.
  • the image area corresponding to the content width is arranged at the center in the horizontal width direction of the display range 90 of the web browser.
  • the background part on both the left and right sides other than the content width includes the range corresponding to the display width of the web browser, and the background part exceeding the display width of the web browser is trimmed. Has been hidden.
  • the horizontal width of the web page matches the display width of the web browser while displaying all the main information on the web page. Can be made.
  • the display area can be moved by a GUI such as a scroll bar installed in the web browser. Specifically, by displaying only the partial area that fits within the display width of the web browser out of the entire content width, and moving the display area in the horizontal width direction as necessary using the scroll bar, at least the entire content width is equivalent. Make the area viewable.
  • the present disclosure can also be realized in various forms such as a support method.

Abstract

According to the present invention, a WWW server receives, from a client terminal, design information indicating a design of a web page, and setting information about a function of the web page; and stores, in a database, the received design information and setting information. The WWW server creates a generation program for automatically generating and displaying a web page in a browsing-side web client, the web page being able to be generated on the basis of the stored design information and setting information. In response to a browsing request, the WWW server transmits, to a client terminal of a browsing request source, browsing data which includes design information that corresponds to a corresponding web page and a generation program for generating the web page.

Description

ウェブページ制作支援システムWeb page creation support system 関連出願の相互参照Cross-reference of related applications
　本国際出願は、２０１７年２月２２日に日本国特許庁に出願された日本国特許出願第２０１７－０３１２９８号に基づく優先権を主張するものであり、日本国特許出願第２０１７－０３１２９８号の全内容を本国際出願に参照により援用する。 This international application claims priority based on Japanese Patent Application No. 2017-031298 filed with the Japan Patent Office on February 22, 2017, and is based on Japanese Patent Application No. 2017-031298. The entire contents are incorporated by reference into this international application.
　本開示は、ウェブページの制作を支援するウェブページ制作支援システムに関する。 This disclosure relates to a web page creation support system that supports web page creation.
　インターネット上のワールド・ワイド・ウェブ（略名：ＷＷＷ又はウェブ）で公開・閲覧されるウェブページには、例えば、マウスオーバーやクリックといった閲覧者による操作に反応して何らかの処理を実行する機能を有するものが知られている。また、特許文献１には、予め準備された特定のデータに基づいて、定型のウェブページを自動制作する技術が記載されている。 Web pages published and viewed on the World Wide Web on the Internet (abbreviation: WWW or web) have a function to execute some processing in response to an operation by a viewer such as mouse over or click Things are known. Patent Document 1 describes a technique for automatically creating a standard web page based on specific data prepared in advance.
特開２００１－２７３２３３号公報JP 2001-273233 A
　閲覧者からの操作に対応する処理を実行する機能を持つウェブページを制作するにあたって、元となるデザイン画像から、当該ウェブページを構成するデータを制作するコーディング作業が必要であった。この種のコーディング作業は、ＨＴＭＬ、ＸＨＴＭＬ、ＣＳＳ等のプログラミング言語を駆使して行われる。そのため、専門的な知識や多大な手間が必要であり、専門的な知識や経験の乏しい人には敷居が高いという問題がある。 When creating a web page having a function for executing processing corresponding to an operation from a viewer, coding work for creating data constituting the web page from the original design image was necessary. This type of coding operation is performed using a programming language such as HTML, XHTML, CSS, or the like. Therefore, specialized knowledge and a great deal of labor are required, and there is a problem that the threshold is high for those who lack specialized knowledge and experience.
　一方、特許文献１には、ウェブページを自動制作する技術が記載されているものの、定型のフォーマットに沿ったウェブページに限られ、デザインの自由度が低い。そのため、ウェブページを制作してこれをＷＷＷで公開しようとする人（以下、ページ制作者という）の意図に沿った独自性のあるウェブページを制作することには適していない。 On the other hand, although Patent Document 1 describes a technique for automatically creating a web page, it is limited to a web page according to a standard format and has a low degree of design freedom. Therefore, it is not suitable for creating a web page with uniqueness in line with the intention of a person who creates a web page and publishes it on the WWW (hereinafter referred to as a page creator).
　本開示は、上記問題を解決するためになされたものである。本開示の一局面は、ページ制作者の意図に沿った独自性のあるウェブページの制作を支援するための技術を提供することが好ましい。 This disclosure has been made to solve the above problems. One aspect of the present disclosure preferably provides a technique for supporting the creation of a unique web page in accordance with the intention of the page creator.
　本開示の一態様にかかるウェブページ制作支援システムは、受領部と、保存部と、プログラム作成部と、送信部とを備える。受領部は、制作すべきウェブページの意匠デザインを表す少なくとも１つの画像情報を含むデザイン情報と、当該ウェブページの機能に関する設定を表す設定情報とを、ウェブページの制作を依頼するウェブクライアントから受領するように構成されている。このうち、設定情報には、ウェブページに設けられる少なくとも１つのクリッカブル領域の画像上の座標を表す座標情報が含まれる。 The web page production support system according to an aspect of the present disclosure includes a reception unit, a storage unit, a program creation unit, and a transmission unit. The receiving unit receives design information including at least one image information representing a design design of a web page to be produced and setting information representing settings related to the function of the web page from a web client requesting production of the web page. Is configured to do. Among these, the setting information includes coordinate information representing coordinates on an image of at least one clickable area provided on the web page.
　プログラム作成部は、生成プログラムを作成するように構成されている。この生成プログラムは、保存されたデザイン情報及び設定情報に基づいて生成され得るウェブページを閲覧するウェブクライアント側で、当該ウェブページに対応するデザイン情報及び設定情報に応じたウェブページを自動的に生成して表示するためのものである。このプログラム作成部は、生成プログラムとして、次のような機能を有するウェブページを生成する生成プログラムを作成するように構成されている。 The program creation unit is configured to create a generation program. This generation program automatically generates a web page corresponding to the design information and setting information corresponding to the web page on the web client side browsing the web page that can be generated based on the stored design information and setting information. For display. The program creation unit is configured to create a generation program that generates a web page having the following functions as a generation program.
　そのウェブページは、ウェブブラウザ上にデザイン情報の画像情報を表示する。そして、その表示された画像情報において、設定情報の座標情報で示されるクリッカブル領域に対して所定の操作が行われたときに、ウェブブラウザにクリッカブル領域として認識させる。 The web page displays the image information of the design information on the web browser. In the displayed image information, when a predetermined operation is performed on the clickable area indicated by the coordinate information of the setting information, the web browser recognizes the clickable area.
　送信部は、ウェブページに対するウェブクライアントからの閲覧要求に応じて、当該ウェブページに対応する閲覧用データを、閲覧要求元のウェブクライアントへ送信するように構成されている。この閲覧用データには、当該ウェブページに対応するデザイン情報と、当該ウェブページを生成するための生成プログラムとが含まれる。 The transmission unit is configured to transmit browsing data corresponding to the web page to the browsing request source web client in response to a browsing request from the web client to the web page. The browsing data includes design information corresponding to the web page and a generation program for generating the web page.
　上述のウェブページ制作支援システムによれば、ウェブページの制作を依頼するウェブクライアントから、少なくとも１つの画像情報を含むデザイン情報と設定情報とをアップロードするだけで、クリッカブルな機能を有するウェブページを制作することができる。したがって、ページ制作者がコーディング作業等に必要な専門的な知識を持っていなくても、ページ制作者の意図に沿った独自性のあるウェブページの制作を支援することができる。 According to the above-mentioned web page production support system, a web page having a clickable function can be produced simply by uploading design information and setting information including at least one piece of image information from a web client requesting production of the web page. can do. Therefore, even if the page creator does not have the specialized knowledge necessary for coding work or the like, it is possible to support the creation of a unique web page in accordance with the intention of the page creator.
　本開示のウェブページ制作支援システムにおいては、さらに、以下の構成を採用してもよい。受領部は、前記デザイン情報として、非アクティブ画像情報、及びアクティブ画像を含むデザイン情報を受領するように構成されている。非アクティブ画像情報は、ウェブページに設けられる少なくとも１つのクリッカブル領域に対応する画像領域が全て操作の対象となっていない状態を表す画像情報である。アクティブ画像情報は、非アクティブ画像情報に対応する画像情報であって、クリッカブル領域に対応する画像領域が操作の対象となっている状態を表す画像情報である。 The web page creation support system of the present disclosure may further employ the following configuration. The receiving unit is configured to receive inactive image information and design information including an active image as the design information. The inactive image information is image information representing a state in which all image areas corresponding to at least one clickable area provided on the web page are not targets of operation. Active image information is image information corresponding to inactive image information, and is image information representing a state in which an image area corresponding to a clickable area is a target of operation.
　そして、プログラム作成部は、前記生成プログラムとして、次のような機能を有するウェブページを生成する生成プログラムを作成するように構成されている。そのウェブページは、ウェブブラウザ上に非アクティブ画像情報を表示する。そして、ウェブページは、その表示された非アクティブ画像情報において、設定情報の座標情報で示されるクリッカブル領域に対して所定の操作が行われたときに、次のようにする。すなわち、ウェブページは、非アクティブ画像情報内の当該クリッカブル領域に該当する画像領域を、対応するアクティブ画像情報における当該クリッカブル領域に該当する画像領域に差し替えて表示させる。 The program creation unit is configured to create a generation program that generates a web page having the following functions as the generation program. The web page displays inactive image information on the web browser. Then, when a predetermined operation is performed on the clickable area indicated by the coordinate information of the setting information in the displayed inactive image information, the web page is as follows. That is, the web page is displayed by replacing the image area corresponding to the clickable area in the inactive image information with the image area corresponding to the clickable area in the corresponding active image information.
　上述のウェブページ制作支援システムによれば、クリッカブル領域への操作に対して、ページ制作者の意図に沿った画像の変化を起す機能を有するウェブページを制作することができる。 According to the above-described web page production support system, it is possible to produce a web page having a function of causing an image change in accordance with the intention of the page creator in response to an operation on the clickable area.
　本開示のウェブページ制作支援システムにおいては、公開処理部を更に備えるように構成されていてもよい。公開処理部は、保存部によって保存されたデザイン情報及び設定情報に基づいて生成され得るウェブページを、ワールド・ワイド・ウェブでの公開対象として登録するように構成されている。このような構成によれば、ウェブページの制作を依頼するウェブクライアントからデザイン情報と設定情報とをアップロードするだけで、ウェブページが自動的にＷＷＷに公開される。これにより、閲覧者側のウェブクライアントから容易に検索をすることができるようになるので、ウェブページが閲覧される機会を増すことができる。 The web page production support system of the present disclosure may be configured to further include a public processing unit. The publication processing unit is configured to register a web page that can be generated based on the design information and setting information saved by the saving unit as a publication target on the World Wide Web. According to such a configuration, the web page is automatically published on the WWW only by uploading the design information and the setting information from the web client requesting the production of the web page. Thereby, since it becomes possible to perform a search easily from the web client on the viewer side, it is possible to increase the chances that the web page is browsed.
　本開示のウェブページ制作支援システムにおいては、さらに、以下の構成を採用してもよい。具体的には、受領部は、クリッカブル領域に対する所定の実行操作が入力されたときに実行すべき機能を表す機能情報を更に含む設定情報を受領するように構成されている。そして、プログラム作成部は、生成プログラムとして、次のような機能を更に有するウェブページを生成する生成プログラムを作成するように構成されている。そのウェブページは、表示された画像情報において、設定情報の座標情報で示されるクリッカブル領域に対する実行操作が入力されたときに、設定情報における当該クリッカブル領域の機能情報で示される機能を実行させる機能を更に有する。 The web page creation support system of the present disclosure may further employ the following configuration. Specifically, the receiving unit is configured to receive setting information further including function information indicating a function to be executed when a predetermined execution operation for the clickable area is input. And the program creation part is comprised so that the production | generation program which produces | generates the web page which further has the following functions as a production | generation program may be produced. The web page has a function of executing the function indicated by the function information of the clickable area in the setting information when the execution operation for the clickable area indicated by the coordinate information of the setting information is input in the displayed image information. Also have.
　また、受領部は、ハイパーリンク、入力フォーム、電話アプリケーション、及び電子メールクライアントの少なくとも何れかに関する機能情報を含む設定情報を受領するように構成されているとよい。上述のウェブページ制作支援システムによれば、更に、ウェブページ上のクリッカブル領域が操作された際に実行すべき処理に関して、ページ制作者の意図に沿って様々な機能を有するウェブページの制作を支援することができる。 Also, the receiving unit may be configured to receive setting information including function information regarding at least one of a hyperlink, an input form, a telephone application, and an e-mail client. According to the above-described web page creation support system, further support for the creation of a web page having various functions in accordance with the intention of the page creator regarding the processing to be executed when the clickable area on the web page is operated. can do.
　本開示のウェブページ制作支援システムにおいては、さらに、以下の構成を採用してもよい。具体的には、受領部は、画像情報がウェブブラウザ上でウェブページとして表示されるときに、画像情報の全横幅のうち表示を必須とする横幅方向の範囲を定義する情報であるコンテンツ幅情報を更に取得するように構成されている。また、保存部は、更に、受領部によって受領されたコンテンツ幅情報を当該ウェブページに関する識別情報に対応付けて記憶装置に保存するように構成されている。 The web page creation support system of the present disclosure may further employ the following configuration. Specifically, when the image information is displayed as a web page on the web browser, the receiving unit is content width information that is information that defines a range in the horizontal width direction that must be displayed out of the total width of the image information. Is further acquired. The storage unit is further configured to store the content width information received by the receiving unit in the storage device in association with the identification information regarding the web page.
　そして、プログラム作成部は、生成プログラムとして、次のような機能を更に有するウェブページを生成する生成プログラムを作成するように構成されている。そのウェブページは、ウェブブラウザ上に画像情報を表示する際、当該画像情報に対応するコンテンツ幅情報で表される領域であるコンテンツ領域の横幅全体をウェブブラウザの横幅方向の表示対象に含める。かつ、当該画像情報のうちコンテンツ領域以外の横幅方向の領域であってウェブブラウザの表示領域の横幅を超える部分については、ウェブブラウザの横幅方向の表示対象から除外する。 The program creation unit is configured to create a generation program that generates a web page further having the following functions as a generation program. When the image information is displayed on the web browser, the web page includes the entire width of the content area, which is the area represented by the content width information corresponding to the image information, in the display object in the width direction of the web browser. In addition, a part of the image information in the horizontal width direction other than the content area that exceeds the horizontal width of the display area of the web browser is excluded from the display target in the horizontal width direction of the web browser.
　上述のウェブページ制作支援システムによれば、例えば、アップロードされる画像情報のうち、ウェブページにおいて閲覧者に伝達したいメッセージ等の主要な情報を含む領域をコンテンツ領域として設定できる。このコンテンツ領域については、ウェブブラウザの表示範囲の幅に関わらず必ず表示されるようになっている。一方、コンテンツ領域以外の領域については、ウェブブラウザの表示幅に一致する背景として表示されるようになっている。このように、アップロードされる画像情報に対して、ページ制作者の意図に沿って主要なコンテンツ領域と背景とを使い分けることが可能な態様にてウェブページを制作することができる。 According to the above-described web page production support system, for example, an area including main information such as a message to be transmitted to a viewer on a web page can be set as a content area among uploaded image information. This content area is always displayed regardless of the width of the display range of the web browser. On the other hand, areas other than the content area are displayed as a background that matches the display width of the web browser. In this way, it is possible to produce a web page in a manner that allows the main content area and the background to be properly used according to the intention of the page creator for the uploaded image information.
システム全体の構成を表すブロック図。The block diagram showing the structure of the whole system. 認証処理の手順を表すフローチャート。The flowchart showing the procedure of an authentication process. 制作依頼画面の一例。An example of a production request screen. ウェブページの意匠デザインを表す画像の一例。An example of the image showing the design design of a web page. 制作依頼画面の一例。An example of a production request screen. 制作依頼画面の一例。An example of a production request screen. 制作依頼画面の一例。An example of a production request screen. 制作依頼画面の一例。An example of a production request screen. 制作依頼受付処理の手順を表すフローチャート。The flowchart showing the procedure of a production request reception process. デザイン情報及び設定情報が保存されるテーブルの一例。An example of a table in which design information and setting information are stored. 閲覧要求受付処理の手順を表すフローチャート。The flowchart showing the procedure of a browsing request reception process. ウェブページの表示例。Web page display example. コンテンツ幅の設定手順を表す説明図。Explanatory drawing showing the setting procedure of content width. コンテンツ幅の設定に基づくウェブページの表示手順を表す説明図。Explanatory drawing showing the display procedure of the web page based on the setting of content width.
　１…ウェブページ制作支援システム、１１…ＷＷＷサーバ、１２…デザイン情報データベース、１３…設定情報データベース、２０…クライアント端末（制作側）、３０…クライアント端末（閲覧側）、１００…インターネット。 DESCRIPTION OF SYMBOLS 1 ... Web page production support system, 11 ... WWW server, 12 ... Design information database, 13 ... Setting information database, 20 ... Client terminal (production side), 30 ... Client terminal (viewing side), 100 ... Internet.
　以下、本開示の実施形態を図面に基づいて説明する。なお、本開示は下記の実施形態に限定されるものではなく様々な態様にて実施することが可能である。
　［ネットワークシステムの構成の説明］
　実施形態のウェブページ制作支援システム１を含むネットワークの構成について、図１を参照しながら説明する。 Hereinafter, embodiments of the present disclosure will be described with reference to the drawings. In addition, this indication is not limited to the following embodiment, It is possible to implement in various aspects.
[Description of network system configuration]
A configuration of a network including the web page production support system 1 of the embodiment will be described with reference to FIG.
　ウェブページ制作支援システム１は、ウェブページの制作を支援するサービスを運営する運営者により管理されるコンピュータシステムである。ウェブページ制作支援システム１は、インターネット１００に接続されている。このウェブページ制作支援システム１は、ＷＷＷサーバ１１と、デザイン情報データベース１２と、設定情報データベース１３とを備える。 The web page production support system 1 is a computer system managed by an operator who operates a service that supports web page production. The web page production support system 1 is connected to the Internet 100. The web page production support system 1 includes a WWW server 11, a design information database 12, and a setting information database 13.
　ＷＷＷサーバ１１は、インターネット１００に接続されたウェブクライアントからの要求に応じて各種情報を提供するサーバコンピュータである。ＷＷＷサーバ１１は、図示しないＣＰＵ、ＲＡＭ、ＲＯＭ、補助記憶装置、入出力インタフェース等を中心に構成されている。このＷＷＷサーバ１１は、ウェブページの制作を依頼するウェブクライアント（例えば、クライアント端末２０）から、ウェブページの基となる情報を受領する機能を有する。そして、ＷＷＷサーバ１１は、ウェブクライアントから受領した情報から構築され得るウェブページをＷＷＷに公開する機能を有する。 The WWW server 11 is a server computer that provides various information in response to a request from a web client connected to the Internet 100. The WWW server 11 is mainly configured by a CPU, RAM, ROM, auxiliary storage device, input / output interface and the like (not shown). The WWW server 11 has a function of receiving information that is the basis of a web page from a web client (for example, the client terminal 20) that requests creation of the web page. The WWW server 11 has a function of publishing on the WWW a web page that can be constructed from information received from a web client.
　また、ＷＷＷサーバ１１は、公開したウェブページに対してウェブクライアント（例えば、クライアント端末３０）から閲覧要求を受付けた場合、当該ウェブページを構築するために必要な情報を、閲覧要求元のウェブクライアントに送信する機能を有する。これらの機能は、例えば、ＷＷＷサーバ１１に実装された周知のＰＨＰ：Hypertext Preprocessorスクリプトを実行することにより実現される。 In addition, when the WWW server 11 receives a browsing request from a web client (for example, the client terminal 30) for a published web page, the WWW server 11 obtains information necessary for constructing the web page from the browsing request source web client. It has the function to transmit to. These functions are realized, for example, by executing a well-known PHP: HypertextperPreprocessor script installed in the WWW server 11.
　デザイン情報データベース１２は、ウェブページの制作を依頼したウェブクライアントから受領したウェブページの基となる情報のうち、ウェブページの意匠デザインに関する情報を含むデザイン情報を保存するためのデータベースである。設定情報データベース１３は、ウェブページの制作を依頼したウェブクライアントから受領したウェブページの基となる情報のうち、ウェブページに付与される機能の設定に関する情報を含む設定情報を保存するためのデータベースである。なお、ウェブページ制作支援システム１を構成するＷＷＷサーバ１１、デザイン情報データベース１２、及び設定情報データベース１３は、それぞれ別体の装置であってもよいし一体の装置として構成されていてもよい。 The design information database 12 is a database for storing design information including information related to the design design of the web page among the information that is the basis of the web page received from the web client that requested the creation of the web page. The setting information database 13 is a database for storing setting information including information related to setting of functions assigned to a web page among information that is the basis of the web page received from the web client that requested the creation of the web page. is there. The WWW server 11, the design information database 12, and the setting information database 13 constituting the web page production support system 1 may be separate devices or may be configured as an integrated device.
　また、インターネット１００には、ウェブサイトの閲覧を行うためのウェブブラウザを備えるクライアント端末２０，３０が接続されている。これらのクライアント端末２０，３０は、例えば、パーソナルコンピュータや、いわゆるスマートフォンやタブレットコンピュータ等の携帯端末により具現化される。なお、図１では、説明を簡潔にするためにクライアント端末２０，３０をそれぞれ一台ずつ図示しているが、多数のクライアント端末２０，３０がインターネット１００に接続されていてもよい。 In addition, client terminals 20 and 30 having web browsers for browsing websites are connected to the Internet 100. These client terminals 20 and 30 are embodied by portable terminals, such as a personal computer and what is called a smart phone and a tablet computer, for example. In FIG. 1, for simplicity of explanation, one client terminal 20 and 30 is illustrated, but a large number of client terminals 20 and 30 may be connected to the Internet 100.
　クライアント端末２０は、インターネット１００を介してウェブページ制作支援システム１に対してウェブページの制作を依頼するウェブクライアントとして機能するコンピュータである。クライアント端末３０は、インターネット１００を介してウェブページ制作支援システム１によりＷＷＷに公開されたウェブページを閲覧するウェブクライアントとして機能するコンピュータである。また、クライアント端末２０，３０は、例えば、JavaScript（登録商標）等の特定のスクリプト言語で構築されたクライアントサイド・アプリケーションを実行する機能を有する。 The client terminal 20 is a computer that functions as a web client that requests the web page production support system 1 to produce a web page via the Internet 100. The client terminal 30 is a computer that functions as a web client that browses web pages published on the WWW by the web page production support system 1 via the Internet 100. Further, the client terminals 20 and 30 have a function of executing a client-side application constructed in a specific script language such as JavaScript (registered trademark), for example.
　［認証処理の説明］
　ＷＷＷサーバ１１が実行する認証処理の手順について、図２のフローチャートを参照しながら説明する。この処理は、ウェブページの制作を依頼するクライアント端末２０で動作するウェブブラウザからの要求を受付けたときに実行される。 [Description of authentication processing]
The procedure of authentication processing executed by the WWW server 11 will be described with reference to the flowchart of FIG. This process is executed when a request from a web browser operating on the client terminal 20 requesting production of a web page is received.
　Ｓ１００では、ＷＷＷサーバ１１は、依頼元のクライアント端末２０に係るユーザに対する認証を行う。具体的には、ＷＷＷサーバ１１は、ユーザを識別するための認証コードをクライアント端末２０から受信する。そして、ＷＷＷサーバ１１は、クライアント端末２０から受信した認証コードと、正当なユーザとして予め登録されている認証コードとが一致するか否かを判断することにより、ユーザの認証を行う。 In S100, the WWW server 11 authenticates the user related to the client terminal 20 that is the request source. Specifically, the WWW server 11 receives an authentication code for identifying a user from the client terminal 20. Then, the WWW server 11 authenticates the user by determining whether or not the authentication code received from the client terminal 20 matches the authentication code registered in advance as a valid user.
　Ｓ１０２では、ＷＷＷサーバ１１は、Ｓ１００の結果、ユーザの認証を受理したか否かを判定する。ユーザの認証を受理しない場合（Ｓ１０２：ＮＯ）、ＷＷＷサーバ１１はＳ１００の処理に戻る。一方、ユーザの認証を受理した場合（Ｓ１０２：ＹＥＳ）、ＷＷＷサーバ１１はＳ１０４の処理に進む。 In S102, the WWW server 11 determines whether or not the user authentication is accepted as a result of S100. When the user authentication is not accepted (S102: NO), the WWW server 11 returns to the process of S100. On the other hand, when the user authentication is accepted (S102: YES), the WWW server 11 proceeds to the process of S104.
　Ｓ１０２で肯定判定をした場合に進むＳ１０４では、ＷＷＷサーバ１１は、依頼用アプリケーションのプログラムを、依頼元のクライアント端末２０のウェブブラウザに送信する。この依頼用アプリケーションは、クライアント端末２０のウェブブラウザ上で実行されるクライアントサイド・アプリケーションである。また、依頼用アプリケーションは、例えばJavaScript（登録商標）等のスクリプト言語で構築されている。この依頼用アプリケーションは、制作すべきウェブページの基となる情報をユーザに入力させるためのＧＵＩで構成される制作依頼画面をウェブブラウザの表示画面に表示させる。そして、依頼用アプリケーションは、制作依頼画面のＧＵＩに従って入力された情報をＷＷＷサーバ１１にアップロードする機能を有する。 In S104 that proceeds when an affirmative determination is made in S102, the WWW server 11 transmits the request application program to the web browser of the client terminal 20 that requested the request. This request application is a client-side application executed on the web browser of the client terminal 20. In addition, the request application is constructed in a script language such as JavaScript (registered trademark). This request application displays on the display screen of the web browser a production request screen composed of a GUI for allowing the user to input information that is the basis of the web page to be produced. The request application has a function of uploading information input in accordance with the GUI of the production request screen to the WWW server 11.
　［情報入力処理の説明］
　ウェブページの制作を依頼するクライアント端末２０のウェブブラウザによって行われる情報入力処理の手順について、図３～図８を参照しながら説明する。この処理は、クライアント端末２０のウェブブラウザが、ＷＷＷサーバ１１から受信した依頼用アプリケーションのスクリプトを実行することにより実現する。 [Description of information input processing]
The procedure of the information input process performed by the web browser of the client terminal 20 that requests the production of the web page will be described with reference to FIGS. This process is realized by the web browser of the client terminal 20 executing the request application script received from the WWW server 11.
　クライアント端末２０のウェブブラウザによって情報入力処理が開始されると、初期画面として、図３に例示されるような制作依頼画面４０がウェブブラウザの表示画面上に表示される。図３に例示される制作依頼画面４０の初期画面では、制作すべきウェブページの意匠デザインを表す画像情報や、当該ウェブページの概要を表す基本情報等を入力するためのユーザインタフェースが表示されている。 When the information input process is started by the web browser of the client terminal 20, a production request screen 40 illustrated in FIG. 3 is displayed on the display screen of the web browser as an initial screen. The initial screen of the production request screen 40 illustrated in FIG. 3 displays a user interface for inputting image information representing a design design of a web page to be produced, basic information representing an outline of the web page, and the like. Yes.
　図３に例示されるとおり、制作依頼画面４０には画像表示領域４１が設けられている。この画像表示領域４１は、制作すべきウェブページの意匠デザインを表す画像を取得して表示するためのユーザインタフェースである。図３に例示される初期画面においては、画像表示領域４１には、意匠デザインを表す画像情報、すなわち画像ファイルを入力することを促すメッセージが記述されている。本実施形態では、ユーザがウェブブラウザ上で任意のファイルフォルダを開いて画像ファイルを選択するか、画像ファイルを示すアイコンを画像表示領域４１上にドラッグ・アンド・ドロップする操作を行うことで、画像ファイルを入力できるようになっている。 As illustrated in FIG. 3, the production request screen 40 is provided with an image display area 41. This image display area 41 is a user interface for acquiring and displaying an image representing a design design of a web page to be produced. In the initial screen illustrated in FIG. 3, the image display area 41 describes image information representing a design design, that is, a message prompting to input an image file. In the present embodiment, the user opens an arbitrary file folder on the web browser and selects an image file, or performs an operation of dragging and dropping an icon indicating an image file onto the image display area 41, thereby The file can be input.
　なお、本実施形態では、ウェブページの意匠デザインを表す画像情報として、図４に例示されるような非アクティブ画像５０及びアクティブ画像５１の２種類の画像情報が入力されることを前提としている。これらの非アクティブ画像５０及びアクティブ画像５１は、文書やハイパーテキスト等の仕組みを含まない単純なビットマップ画像で構成されている。 In this embodiment, it is assumed that two types of image information such as an inactive image 50 and an active image 51 as illustrated in FIG. 4 are input as image information representing the design design of a web page. The inactive image 50 and the active image 51 are composed of simple bitmap images that do not include a mechanism such as a document or hypertext.
　非アクティブ画像とは、ウェブページの意匠デザインを表す画像であって、当該ウェブページに設けられる少なくとも１つのクリッカブル領域に対応する画像領域が全て操作の対象となっていない、素の状態を表す画像である。一方、アクティブ画像とは、非アクティブ画像情報に対応する画像であって、クリッカブル領域に対応する画像領域が操作の対象となっている状態を表す画像である。なお、クリッカブル領域とは、ウェブブラウザの表示画面上で、マウスやタッチパッド等のポインティングデバイスによるポイント・アンド・クリックの操作（以下、単に「クリック」という）が入力されたときに、所定の処理を実行する特定の画像領域である。 An inactive image is an image representing a design design of a web page, and an image representing a raw state in which all image areas corresponding to at least one clickable area provided on the web page are not targets of operation. It is. On the other hand, an active image is an image corresponding to inactive image information, and is an image representing a state in which an image region corresponding to a clickable region is an operation target. The clickable area is a predetermined process when a point-and-click operation (hereinafter simply referred to as “click”) by a pointing device such as a mouse or a touchpad is input on the display screen of the web browser. Is a specific image area to execute.
　図４の事例では、素の状態を表す非アクティブ画像５０に対応するアクティブ画像５１として、クリッカブル領域に相当する画像領域５１ａ，５１ｂ，５１ｃ，５１ｄに対して網掛け等の強調表示が施されているものとする。なお、クリッカブル領域以外の画像領域については両者の画像は同一である。 In the example of FIG. 4, as the active image 51 corresponding to the non-active image 50 representing the prime state, the image regions 51a, 51b, 51c, 51d corresponding to the clickable regions are highlighted such as shaded. It shall be. Note that the images in the image area other than the clickable area are the same.
　図３の説明に戻る。さらに、制作依頼画面４０には情報入力領域４２が設けられている。情報入力領域４２は、制作すべきウェブページに関する基本情報を入力するためのユーザインタフェースを有する。この情報入力領域４２には、符号４２ａ～４２ｇ，４３で示される複数種類のテキストボックスやドロップダウンリスト、ボタン等のユーザインタフェースが設けられている。 Returning to the explanation of FIG. Furthermore, the production request screen 40 is provided with an information input area 42. The information input area 42 has a user interface for inputting basic information about a web page to be created. The information input area 42 is provided with user interfaces such as a plurality of types of text boxes, drop-down lists, buttons, and the like indicated by reference numerals 42a to 42g and 43.
　符号４２ａは、ウェブページのタイトルを表すテキスト情報を入力するためのテキストボックスを示す。符号４２ｂは、ウェブページによる情報提供の主体（すなわち、広告主）の名称を表す情報を入力するためのテキストボックスを示す。符号４２ｃは、ウェブページの簡単な要約文や説明文を表す情報を入力するためのテキストボックスを示す。符号４２ｄは、ウェブページの特徴を表す単語であって、インターネット上の情報を検索する周知の検索エンジンによる検索の対象となり得るキーワードを表す情報を入力するためのテキストボックスを示す。符号４２ｅは、ウェブページをＷＷＷに公開する期間を表す情報を入力するためのテキストボックスを示す。 Numeral 42a indicates a text box for inputting text information representing the title of the web page. Reference numeral 42b denotes a text box for inputting information representing the name of an information providing entity (that is, an advertiser) by a web page. Reference numeral 42c denotes a text box for inputting information representing a simple summary sentence or explanatory text of a web page. Reference numeral 42d indicates a text box for inputting information representing a keyword that is a characteristic of a web page and can be searched by a well-known search engine that searches information on the Internet. Reference numeral 42e denotes a text box for inputting information representing a period for publishing a web page on the WWW.
　符号４２ｆは、ウェブページをＷＷＷに公開するか否かを指定する指示を、複数の選択肢の中から１つ選択するプルダウンメニューを示す。符号４２ｇは、ウェブページの表示形式を指定する指示を、複数の選択肢の中から１つ選択するプルダウンメニューを示す。例えば、ウェブページが、パソコンでの表示に専用されるものであるか、スマートフォンでの表示に専用されるものであるか、パソコン及びスマートフォンでの表示に共用されるものであるかを選択できるようになっている。符号４３は、画像情報及び基本情報の入力を完了し、制作依頼画面４０を次の画面に遷移させる指示を与えるボタンを示す。 Numeral 42f indicates a pull-down menu for selecting one of a plurality of options for designating whether to publish a web page on the WWW. Reference numeral 42g indicates a pull-down menu for selecting one of a plurality of options for designating the display format of the web page. For example, it is possible to select whether a web page is dedicated for display on a PC, dedicated for display on a smartphone, or shared for display on a PC and smartphone. It has become. Reference numeral 43 denotes a button that completes the input of the image information and the basic information and gives an instruction to shift the production request screen 40 to the next screen.
　図３に例示される初期画面に従って、ユーザが制作依頼画面４０に画像情報及び基本情報を入力した後の状態を図５に例示する。図５に例示されるとおり、制作依頼画面４０の画像表示領域４１には、ユーザにより入力された画像が表示されている。ただし、画像表示領域４１には、図４に例示される非アクティブ画像５０及びアクティブ画像５１の２つの画像のうち、アクティブ画像５１の上に非アクティブ画像５０が重ねて描画されている。そのため、ユーザには非アクティブ画像５０だけが見える状態になっている。あるいは、非アクティブ画像５０を画像表示領域４１に表示し、その横にアクティブ画像５１を非表示状態で並べて配置してもよい。また、情報入力領域４２の各ボックス４２ａ～４２ｇには、ユーザにより入力又は選択された各種情報が表示されている。 FIG. 5 illustrates a state after the user inputs image information and basic information on the production request screen 40 according to the initial screen illustrated in FIG. As illustrated in FIG. 5, an image input by the user is displayed in the image display area 41 of the production request screen 40. However, in the image display area 41, the inactive image 50 is drawn on the active image 51 out of the two images of the inactive image 50 and the active image 51 illustrated in FIG. Therefore, only the inactive image 50 is visible to the user. Alternatively, the inactive image 50 may be displayed in the image display area 41, and the active image 51 may be arranged side by side in a non-display state. In addition, various types of information input or selected by the user are displayed in the boxes 42a to 42g of the information input area 42.
　図５に例示される状態からボタン４３がクリックされると、これまでに入力された各情報が確定し、制作依頼画面４０は図６～図８に例示される次の入力受付状態に移行する。図６～図８に例示される制作依頼画面４０では、ウェブページに付与される機能の設定に関する情報の入力を受け付ける。 When the button 43 is clicked from the state illustrated in FIG. 5, each piece of information input so far is confirmed, and the production request screen 40 shifts to the next input acceptance state illustrated in FIGS. 6 to 8. . The production request screen 40 illustrated in FIGS. 6 to 8 accepts input of information related to setting of functions given to the web page.
　具体的には、画像表示領域４１に表示された画像上において、マウスやタッチパッド等のポインティングデバイスによりクリッカブル領域に設定すべき領域を指定できるようになっている。例えば、矩形の左上の頂点に相当する座標をクリックし、そのまま右下の座標までドラッグする操作により、矩形のクリッカブル領域の座標範囲を指定することができる。続いて、指定されたクリッカブル領域がクリックされたときに実行すべき処理の内容を設定できるようになっている。これらの操作を繰り返し行うことで、複数のクリッカブル領域の機能を設定することができるようになっている。 Specifically, on the image displayed in the image display area 41, an area to be set as a clickable area can be designated by a pointing device such as a mouse or a touch pad. For example, the coordinate range of the rectangular clickable area can be specified by clicking the coordinates corresponding to the upper left vertex of the rectangle and dragging the coordinates to the lower right coordinates. Subsequently, the contents of processing to be executed when the designated clickable area is clicked can be set. By repeatedly performing these operations, the functions of a plurality of clickable areas can be set.
　図６は、画像表示領域４１に表示されている画像上において、符号５１ａのクリッカブル領域が指定された状況を表している。このとき、アクティブ画像５１の上に重ねて表示されている非アクティブ画像５０のうち、クリッカブル領域５１ａに該当する画像領域が、アクティブ画像５１における対応する画像領域に差し替えられて表示されている。あるいは、非アクティブ画像５０の横にアクティブ画像５１を非表示状態で並べて配置する構成であってもよい。その場合、非アクティブ画像５０上でクリッカブル領域が指定されると、その部分だけ非アクティブ画像５１における対応する画像領域が一定分スライドした画像を表示するように構成される。 FIG. 6 shows a situation where a clickable area 51a is designated on the image displayed in the image display area 41. At this time, the image area corresponding to the clickable area 51 a in the inactive image 50 displayed over the active image 51 is replaced with the corresponding image area in the active image 51 and displayed. Alternatively, the active image 51 may be arranged side by side in a non-display state next to the inactive image 50. In that case, when a clickable area is designated on the inactive image 50, an image obtained by sliding a corresponding image area in the inactive image 51 by a certain amount is displayed.
　また、クリッカブル領域５１ａが指定されることにより、設定ウィンドウ４５ａがクリッカブル領域５１ａの近傍にポップアップ表示される。この設定ウィンドウ４５ａは、クリッカブル領域５１ａに割り当てる機能を設定するためのユーザインタフェースである。設定ウィンドウ４５ａの中には、テキストボックス４６ａが設けられている。このテキストボックス４６ａに実行すべき処理の内容を示す情報が入力され、設定ウィンドウ４５ａの内の適用ボタン４７ａがクリックされることにより、クリッカブル領域５１ａの範囲及び機能が確定するようになっている。 Also, when the clickable area 51a is designated, the setting window 45a pops up in the vicinity of the clickable area 51a. The setting window 45a is a user interface for setting a function assigned to the clickable area 51a. A text box 46a is provided in the setting window 45a. Information indicating the contents of processing to be executed is input to the text box 46a, and the range and function of the clickable area 51a are determined by clicking the apply button 47a in the setting window 45a.
　図６の事例では、設定ウィンドウ４５ａ内のテキストボックス４６ａに、インターネット上のウェブサイトのリソースを指すＵＲＬが入力されている。ここに、ＵＲＬが入力されることで、クリッカブル領域５１ａの機能として、ハイパーリンク機能による移動先のウェブサイトが設定されるようになっている。また、図６に例示されるとおり、制作依頼画面４０の右側領域にはリンク情報表示領域４４が設けられている。このリンク情報表示領域４４には、クリッカブル領域５１ａの機能として設定されたリンク先のＵＲＬを表す情報４４ａが表示されている。 In the example shown in FIG. 6, a URL indicating a website resource on the Internet is entered in a text box 46a in the setting window 45a. When a URL is input here, a destination website by the hyperlink function is set as a function of the clickable area 51a. Further, as illustrated in FIG. 6, a link information display area 44 is provided in the right area of the production request screen 40. In this link information display area 44, information 44a indicating the URL of the link destination set as a function of the clickable area 51a is displayed.
　つぎに、図７は、図６に例示される状況から更に別のクリッカブル領域５１ｂが設定された状況を表している。このとき、アクティブ画像５１の上に重ねて表示されている非アクティブ画像５０のうち、クリッカブル領域５１ｂに相当する画像領域が、アクティブ画像５１における対応する画像領域に差し替えられて表示されている。 Next, FIG. 7 shows a situation in which another clickable area 51b is set from the situation illustrated in FIG. At this time, the image area corresponding to the clickable area 51 b in the inactive image 50 displayed over the active image 51 is replaced with the corresponding image area in the active image 51 and displayed.
　また、クリッカブル領域５１ｂが指定されることにより、設定ウィンドウ４５ｂがクリッカブル領域５１ｂの近傍にポップアップ表示される。この設定ウィンドウ４５ｂは、クリッカブル領域５１ｂに割り当てる機能を設定するためのユーザインタフェースである。設定ウィンドウ４５ｂの中に設けられているフォーム使用ボタン４８がクリックされると、テキストボックス４６ｂ内に「"フォーム使用"」という文字列が自動入力される。ここに、「"フォーム使用"」が入力されることで、クリッカブル領域５１ｂの機能として、入力フォームが起動する機能が設定されるようになっている。そして、設定ウィンドウ４５ｂの内の適用ボタン４７ｂがクリックされることにより、クリッカブル領域５１ｂの範囲及び機能が確定する。また、図７に例示されるとおり、リンク情報表示領域４４には、クリッカブル領域５１ｂの機能として設定された"フォーム使用"を表す情報４４ｂが表示されている。 Also, when the clickable area 51b is designated, the setting window 45b is popped up in the vicinity of the clickable area 51b. The setting window 45b is a user interface for setting a function assigned to the clickable area 51b. When the form use button 48 provided in the setting window 45b is clicked, the character string "" form use "" is automatically entered in the text box 46b. When ““ form use ”” is input here, a function for starting the input form is set as the function of the clickable area 51b. Then, when the apply button 47b in the setting window 45b is clicked, the range and function of the clickable area 51b are determined. Further, as illustrated in FIG. 7, the link information display area 44 displays information 44b indicating “form use” set as a function of the clickable area 51b.
　つぎに、図８は、図６及び図７の事例において説明した手順と同様に、更に別のクリッカブル領域５１ｃ，５１ｄが設定された状況を表している。図８の事例では、クリッカブル領域５１ｃの機能として、指定された電話番号を通話相手として電話かける電話アプリケーションを起動する機能が設定されている。また、クリッカブル領域５１ｄの機能として、指定された電子メールアドレスを宛先として電子メールクライアントを起動する機能が設定されている。 Next, FIG. 8 shows a situation in which further clickable areas 51c and 51d are set in the same manner as the procedure described in the examples of FIGS. In the example of FIG. 8, a function for starting a telephone application for making a call using a designated telephone number as a call partner is set as a function of the clickable area 51c. In addition, as a function of the clickable area 51d, a function of starting an email client with a designated email address as a destination is set.
　また、図８に例示されるとおり、リンク情報表示領域４４には、クリッカブル領域５１ｃの機能として設定された、電話の通話先の電話番号を表す情報４４ｃが表示されている。また、リンク情報表示領域４４には、クリッカブル領域５１ｄの機能として設定された、電子メールの宛先を示す電子メールアドレスを表す情報４４ｄが表示されている。 Further, as illustrated in FIG. 8, the link information display area 44 displays information 44c representing the telephone number of the telephone call destination set as a function of the clickable area 51c. In the link information display area 44, information 44d indicating an e-mail address indicating an e-mail destination set as a function of the clickable area 51d is displayed.
　そして、ウェブページに付与すべき全ての機能について、クリッカブル領域の範囲及び機能をユーザが入力し終えた後、リンク情報表示領域４４内に設けられた公開ボタン４９がクリックされる。公開ボタン４９がクリックされることにより、制作依頼画面４０を通じてユーザから入力された各情報が、ＷＷＷサーバ１１にアップロードされるようになっている。 Then, after the user finishes inputting the range and function of the clickable area for all functions to be added to the web page, the publish button 49 provided in the link information display area 44 is clicked. When the publish button 49 is clicked, each information input from the user through the production request screen 40 is uploaded to the WWW server 11.
　ここでは、ウェブページの意匠デザインを表す画像情報（すなわち、非アクティブ画像及びアクティブ画像のファイル）と、当該ウェブページの基本情報とが、デザイン情報としてＷＷＷサーバ１１にアップロードされる。また、ウェブページ上の各クリッカブル領域の座標範囲を表す座標情報と、各クリッカブル領域の機能を表す情報とが、設定情報としてＷＷＷサーバ１１にアップロードされる。 Here, the image information representing the design design of the web page (that is, the file of the inactive image and the active image) and the basic information of the web page are uploaded to the WWW server 11 as design information. Also, coordinate information indicating the coordinate range of each clickable area on the web page and information indicating the function of each clickable area are uploaded to the WWW server 11 as setting information.
　［制作依頼受付処理の説明］
　ＷＷＷサーバ１１が実行する制作依頼受付処理の手順について、図９のフローチャートを参照しながら説明する。この処理は、図２に例示される認証処理に続いて実行される処理である。 [Description of production request reception processing]
The procedure of the production request reception process executed by the WWW server 11 will be described with reference to the flowchart of FIG. This process is a process executed following the authentication process illustrated in FIG.
　Ｓ２００では、ＷＷＷサーバ１１は、依頼元のクライアント端末２０のウェブブラウザによって実行された情報入力処理においてアップロードされたデザイン情報と設定情報とを受信する。ここで受信するデザイン情報には、ウェブページの意匠デザインを表す画像情報（すなわち、非アクティブ画像及びアクティブ画像のファイル）と、当該ウェブページの基本情報とが含まれる。また、設定情報には、ウェブページ上の各クリッカブル領域の座標範囲を表す座標情報と、各クリッカブル領域の機能を表す情報とが含まれる。 In S200, the WWW server 11 receives the design information and setting information uploaded in the information input process executed by the web browser of the requesting client terminal 20. The design information received here includes image information representing the design design of the web page (that is, files of inactive images and active images) and basic information of the web page. The setting information includes coordinate information indicating the coordinate range of each clickable area on the web page and information indicating the function of each clickable area.
　Ｓ２０２では、ＷＷＷサーバ１１は、Ｓ２００で受信したデザイン情報と設定情報とを、ウェブページを識別するための識別情報に対応付けて、デザイン情報データベース１２及び設定情報データベース１３に保存する。具体的には、ＷＷＷサーバ１１は、ウェブページの基本情報の内容等を記述したテーブルである「ページ」テーブルを作成する。そして、ＷＷＷサーバ１１は、その作成した「ページ」テーブルと、非アクティブ画像及びアクティブ画像のファイルとをデザイン情報データベース１２に保存する。また、ＷＷＷサーバ１１は、設定情報の内容を記述したテーブルである「リンク設定」テーブルを作成し、設定情報データベース１３に保存する。 In S202, the WWW server 11 stores the design information and setting information received in S200 in the design information database 12 and the setting information database 13 in association with identification information for identifying the web page. Specifically, the WWW server 11 creates a “page” table that is a table describing the contents of basic information of a web page. Then, the WWW server 11 stores the created “page” table and inactive image and active image files in the design information database 12. Further, the WWW server 11 creates a “link setting” table that is a table describing the contents of the setting information, and stores it in the setting information database 13.
　ここで、「ページ」テーブル及び「リンク設定」テーブルの具体的な内容について、図１０を参照しながら説明する。図１０に例示されるとおり、「ページ」テーブル６０には、「ＩＤ」、「タイトル」、「会社名・店名」、「タグ」、「説明」、「画像ファイル名」等の項目が設けられている。このうち、「ＩＤ」の項目には、ウェブページを識別するために付与される固有の識別情報が記述される。この「ＩＤ」の項目は、複数桁の数字列で表現される。 Here, specific contents of the “page” table and the “link setting” table will be described with reference to FIG. As illustrated in FIG. 10, the “page” table 60 includes items such as “ID”, “title”, “company name / store name”, “tag”, “description”, and “image file name”. ing. Among these, in the item “ID”, unique identification information given to identify the web page is described. The item “ID” is expressed by a multi-digit numeric string.
　「タイトル」の項目には、ウェブページのタイトルが記述される。この「タイトル」項目は、テキスト情報で表現される。「タイトル」項目に記述される内容は、図５に例示されるテキストボックス４２ａに入力された内容である。「会社名・店名」の項目には、ウェブページの広告主の名称が記述される。この「会社名・店名」の項目は、テキスト情報で表現される。「会社名・店名」の項目に記述される内容は、図５に例示されるテキストボックス４２ｂに入力された内容である。「説明」の項目には、ウェブページの要約や説明文が記述される。この「説明」の項目は、テキスト情報で表現される。「説明」の項目に記述される内容は、図５に例示されるテキストボックス４２ｃに入力された内容である。これらの「タイトル」、「会社名・店名」及び「説明」の各項目に記述された情報は、インターネット上で検索エンジンの機能を提供する周知の検索サイトによる検索結果において、閲覧者に対して提示され得る情報である。 The title of the web page is described in the “Title” item. This “title” item is expressed by text information. The content described in the “title” item is the content input in the text box 42a illustrated in FIG. In the item “company name / store name”, the name of the advertiser of the web page is described. The item “company name / store name” is expressed by text information. The content described in the item “company name / store name” is the content entered in the text box 42b illustrated in FIG. In the “explanation” item, a summary or explanation of the web page is described. The item “explanation” is expressed by text information. The content described in the item “explanation” is the content input in the text box 42c illustrated in FIG. The information described in each item of “title”, “company name / store name”, and “description” is the result of a search by a well-known search site that provides a search engine function on the Internet. Information that can be presented.
　「タグ」の項目には、ウェブページの特徴を表す単語が記述される。この「タグ」の項目は、テキスト情報で表現される。「タグ」の項目に記述される内容は、図５に例示されるテキストボックス４２ｄに入力された内容である。この「タグ」の項目に記述された情報は、検索エンジンによる検索の対象となるキーワードとして用いられ得る情報である。 In the “Tag” item, a word representing the characteristics of the web page is described. The item of “tag” is expressed by text information. The content described in the “tag” item is the content input in the text box 42d illustrated in FIG. Information described in the “tag” item is information that can be used as a keyword to be searched by a search engine.
　「画像ファイル名」の項目には、ウェブページの表示に用いられる非アクティブ画像及びアクティブ画像のファイルのファイル名が記述される。この「タグ」の項目は、テキスト情報で表現される。 In the “image file name” item, the file names of the inactive image and active image files used to display the web page are described. The item of “tag” is expressed by text information.
　この「画像ファイル名」の項目には、デザイン情報データベース１２に保存される非アクティブ画像及びアクティブ画像の各ファイルについて、共通のファイル名が記述される。例えば、共通のファイル名を「aaa.jpg」とする場合、非アクティブ画像のファイル名を「aaa.jpg」とし、アクティブ画像のファイル名を「aaa_activ.jpg」とする。このようにすることで、非アクティブ画像とアクティブ画像とを対応付けるとともに、両者を区別できるようになっている。 In this “image file name” item, a common file name is described for each of the inactive image and active image files stored in the design information database 12. For example, when the common file name is “aaa.jpg”, the file name of the inactive image is “aaa.jpg” and the file name of the active image is “aaa_activ.jpg”. In this way, the inactive image and the active image are associated with each other and can be distinguished from each other.
　つぎに、図１０に例示されるとおり、「リンク設定」テーブル６１には、「ＩＤ」、「ページＩＤ」、「リンク種類」、「値」、「座標」、「削除フラグ」等の項目が設けられている。なお、「リンク設定」テーブル６１は、ウェブページに設定された個々のクリッカブル領域ごとに作成される。つまり、１つのウェブページについて複数のクリッカブル領域が設定されている場合には、個々のクリッカブル領域ごと対応する複数の「リンク設定」テーブル６１が設定情報ＤＢ１３に保存される。 Next, as illustrated in FIG. 10, the “link setting” table 61 includes items such as “ID”, “page ID”, “link type”, “value”, “coordinate”, and “deletion flag”. Is provided. The “link setting” table 61 is created for each clickable area set in the web page. That is, when a plurality of clickable areas are set for one web page, a plurality of “link setting” tables 61 corresponding to each clickable area are stored in the setting information DB 13.
　この「リンク設定」テーブル６１について、「ＩＤ」の項目には、当該クリッカブル領域を識別するために付与される固有の識別情報が記述される。この「ＩＤ」の項目は、複数桁の数字列で表現される。 In the “link setting” table 61, in the “ID” item, unique identification information given to identify the clickable area is described. The item “ID” is expressed by a multi-digit numeric string.
　「ページＩＤ」の項目には、当該「リンク設定」テーブル６１が適用されるウェブページの識別情報が記述される。具体的には、「ページＩＤ」の項目に、「ページ」テーブル６０の「ＩＤ」の項目と同一の識別情報が記述される。このようにすることで、「ページ」テーブル６０と「リンク設定」テーブル６１とが対応付けされるようになっている。これにより、当該「リンク設定」テーブル６１で表されるクリッカブル領域の機能が、対応付けされた「ページ」テーブル６０に関するウェブページに適用される。 In the “page ID” item, identification information of a web page to which the “link setting” table 61 is applied is described. Specifically, the same identification information as the “ID” item in the “page” table 60 is described in the “page ID” item. In this way, the “page” table 60 and the “link setting” table 61 are associated with each other. Thereby, the function of the clickable area represented by the “link setting” table 61 is applied to the web page related to the associated “page” table 60.
　「リンク種類」の項目には、ウェブページ上でクリッカブル領域がクリックされたときに実行すべき機能の種類を表す情報が記述される。この「リンク種類」の項目は、機能の種類ごとに予め割り当てられている識別番号の数字で表現される。具体的には、ハイパーリンク、入力フォーム起動、電話アプリケーション起動、電子メールクライアント起動等といった機能ごとに、１，２，３…等の識別番号が割り当てられている。そして、Ｓ２００で受信した設定情報に含まれるクリッカブル領域の機能を表す情報の内容に応じて、対応する機能の識別情報が「リンク種類」の項目に記述される。 In the “link type” item, information indicating the type of function to be executed when the clickable area is clicked on the web page is described. This item of “link type” is expressed by a number of an identification number assigned in advance for each type of function. Specifically, identification numbers such as 1, 2, 3,... Are assigned for each function such as hyperlink, input form activation, telephone application activation, e-mail client activation, and the like. Then, according to the content of the information indicating the function of the clickable area included in the setting information received in S200, the identification information of the corresponding function is described in the item “link type”.
　「値」の項目には、クリッカブル領域に対応するリンク先を表す情報が記述される。この「値」の項目は、テキスト情報で表現される。「値」の項目に記述される内容は、クリッカブル領域に割り当てられた機能の接続先となるＵＲＬ、電話番号、電子メールアドレス等である。これらのＵＲＬ、電話番号、電子メールアドレス等は、図６，７等に例示されるテキストボックス４６に入力された内容である。 In the “value” item, information indicating the link destination corresponding to the clickable area is described. This “value” item is expressed by text information. The contents described in the “value” item are a URL, a telephone number, an e-mail address, and the like as a connection destination of a function assigned to the clickable area. These URL, telephone number, e-mail address, etc. are the contents entered in the text box 46 exemplified in FIGS.
　「座標」の項目には、非アクティブ画像及びアクティブ画像上におけるクリッカブル領域の座標範囲を表す情報が記述される。この「値」の項目は、テキスト情報で表現される。例えば、クリッカブル領域が矩形として設定されている場合、その矩形の画像領域の左上の頂点の座標と、右下の頂点の座標とを表す座標値が記述される。 In the “coordinate” item, information indicating the coordinate range of the clickable area on the inactive image and the active image is described. This “value” item is expressed by text information. For example, when the clickable area is set as a rectangle, coordinate values representing the coordinates of the upper left vertex and the lower right vertex of the rectangular image area are described.
　「削除フラグ」の項目には、クリッカブル領域を無効にするか否かを指定する情報が記述される。この「値」の項目は、０又は１の数字で表現される。具体的には、この「削除フラグ」の項目に１の数字を記述することで、当該クリッカブル領域を無いものとしてウェブページを表示するように設定できる。 In the “Delete flag” item, information specifying whether or not to invalidate the clickable area is described. This “value” item is represented by a number of 0 or 1. Specifically, by describing the number “1” in this “deletion flag” item, it is possible to set the web page to be displayed with no clickable area.
　図９のフローチャートの説明に戻る。Ｓ２０４では、ＷＷＷサーバ１１は、Ｓ２０２で保存したデザイン情報及び設定情報に基づいて生成され得るウェブページを、ＷＷＷでの公開対象として登録する処理を実行する。具体的には、ＷＷＷサーバ１１は、検索エンジンの機能を提供する周知の検索サイトにアクセスして、ＷＷＷサーバ１１に対して当該ウェブページを指し示す情報を含むＵＲＬを検索の対象として登録する。これにより、閲覧者は、検索サイトを通じて当該ウェブサイトを検索することが可能になる。 Returning to the flowchart of FIG. In S204, the WWW server 11 executes a process of registering a web page that can be generated based on the design information and setting information saved in S202 as a publication target on the WWW. Specifically, the WWW server 11 accesses a well-known search site that provides a search engine function, and registers a URL including information indicating the web page as a search target in the WWW server 11. Thereby, the browsing person can search the said website through a search site.
　また、ウェブページを検索サイトに登録する際、ＷＷＷサーバ１１は、当該ウェブページに関する「ページ」テーブル６０に記述されている「タイトル」、「会社名・店名」、「説明」、「タグ」等の各項目の内容を当該ウェブページのＵＲＬと共に登録してもよい。これにより、「タイトル」、「会社名・店名」、「説明」等の各項目の内容を検索エンジンによる検索結果の内容として閲覧者に対して提示することができる。また、「タグ」の各項目に記述された単語を、当該ウェブページを検索するためのキーワードに設定することができる。 Further, when registering a web page in a search site, the WWW server 11 includes “title”, “company name / store name”, “description”, “tag”, etc. described in the “page” table 60 related to the web page. The contents of each item may be registered together with the URL of the web page. Thereby, the contents of each item such as “title”, “company name / store name”, “explanation” and the like can be presented to the viewer as the contents of the search result by the search engine. Further, words described in each item of “tag” can be set as keywords for searching the web page.
　Ｓ２０６では、ＷＷＷサーバ１１は、ウェブページの公開が完了したことを表す情報を、依頼元のクライアント端末２０のウェブブラウザに送信する。Ｓ２０６の後、ＷＷＷサーバ１１は制作依頼受付処理を終了する。 In S206, the WWW server 11 transmits information indicating that the publication of the web page is completed to the web browser of the client terminal 20 as the request source. After S206, the WWW server 11 ends the production request reception process.
　［閲覧要求受付処理の説明］
　ＷＷＷサーバ１１が実行する閲覧要求受付処理の手順について、図１１のフローチャートを参照しながら説明する。この処理は、ウェブページの閲覧を要求するクライアント端末３０で動作するウェブブラウザからのアクセスを受付けたときに実行される。 [Description of browsing request acceptance processing]
The procedure of the browsing request acceptance process executed by the WWW server 11 will be described with reference to the flowchart of FIG. This process is executed when access from a web browser operating on the client terminal 30 that requests browsing of a web page is received.
　Ｓ３００では、ＷＷＷサーバ１１は、クライアント端末３０からの閲覧要求に該当するウェブページの基となるデザイン情報及び設定情報を、デザイン情報データベース１２及び設定情報データベース１３から読み込む。ここで読み込まれる情報には、当該ウェブページに対応付けられている各テーブル６０，６１の内容と、当該ウェブページに対応付けられている非アクティブ画像及びアクティブ画像のファイルとが含まれる。 In S300, the WWW server 11 reads design information and setting information, which are the basis of the web page corresponding to the browsing request from the client terminal 30, from the design information database 12 and the setting information database 13. The information read here includes the contents of the tables 60 and 61 associated with the web page and the inactive image and active image files associated with the web page.
　Ｓ３０２では、ＷＷＷサーバ１１は、Ｓ３００で読み込んだ各情報に基づいて、ウェブクライアント側でウェブページを自動生成して表示するように構成されたスクリプトを組み込んだＨＴＭＬ文書を作成する。このウェブページ生成用のスクリプトは、例えばJavaScript（登録商標）等のスクリプト言語の仕組みを用いてＷＷＷサーバ１１により作成される。 In S302, the WWW server 11 creates an HTML document incorporating a script configured to automatically generate and display a web page on the web client side based on each information read in S300. The web page generation script is created by the WWW server 11 using a script language mechanism such as JavaScript (registered trademark).
　具体的には、ＷＷＷサーバ１１は、次のような仕組みを有するウェブページを自動生成するスクリプトを組み込んだＨＴＭＬ文書を作成する。そのウェブページは、非アクティブ画像をウェブブラウザの表示画面に前面に表示させるように構成される。その表示された非アクティブ画像のクリッカブル領域に対して、ポインティングデバイスによる所定の操作が入力された場合、次のように振る舞うように構成される。すなわち、非アクティブ画像の当該クリッカブル領域に該当する画像領域を、アクティブ画像における当該クリッカブル領域に該当する画像領域に差し替えてウェブブラウザの表示画面に前面に表示させる。 Specifically, the WWW server 11 creates an HTML document incorporating a script for automatically generating a web page having the following mechanism. The web page is configured to display an inactive image on the display screen of the web browser. When a predetermined operation by the pointing device is input to the clickable area of the displayed inactive image, the following operation is performed. That is, the image area corresponding to the clickable area of the inactive image is replaced with the image area corresponding to the clickable area of the active image, and displayed on the display screen of the web browser.
　なお、クリッカブル領域の座標範囲については、「リンク設定」テーブル６１の「座標」の項目で表される内容のとおりにウェブページが生成されるように、ＷＷＷサーバ１１がスクリプトを組む。また、ここでいう所定の操作とは、例えば、クリッカブル領域内にマウスのポインタを置く、いわゆるマウスオーバーの操作が例示される。一方、クリッカブル領域に対する所定の操作が解除された場合、非アクティブ画像の表示に戻すように構成されている。 For the coordinate range of the clickable area, the WWW server 11 forms a script so that a web page is generated according to the content represented by the item “Coordinate” in the “Link setting” table 61. The predetermined operation here is exemplified by a so-called mouse-over operation in which a mouse pointer is placed in a clickable area. On the other hand, when a predetermined operation on the clickable area is canceled, the display is returned to the display of the inactive image.
　さらに、このウェブページは、クリッカブル領域に対してクリック等の実行操作が入力された場合、当該クリッカブル領域に割り当てられた機能をウェブブラウザに実行させるように構成される。なお、クリッカブル領域に実行操作がなされたときに実行される機能については、当該クリッカブル領域の「リンク設定」テーブル６１の「リンク種類」の項目で表される内容のとおりにウェブページが生成されるように、ＷＷＷサーバ１１がスクリプトを組む。また、クリッカブル領域に実行操作がなされたときに起動するアプリケーションに渡されるパラメータは、当該クリッカブル領域の「リンク設定」テーブル６１の「値」の項目で表される内容のとおりにウェブページが生成されるように、ＷＷＷサーバ１１がスクリプトを組む。 Furthermore, this web page is configured to cause a web browser to execute a function assigned to the clickable area when an execution operation such as a click is input to the clickable area. As for the function executed when the execution operation is performed on the clickable area, a web page is generated according to the content represented by the item “link type” in the “link setting” table 61 of the clickable area. As described above, the WWW server 11 forms a script. In addition, the parameter passed to the application that is started when the execution operation is performed on the clickable area is generated as a web page as indicated by the “value” item in the “link setting” table 61 of the clickable area. As described above, the WWW server 11 forms a script.
　Ｓ３０４では、ＷＷＷサーバ１１は、Ｓ３０２で作成したＨＴＭＬ文書と、ウェブページを構成する画像ファイル（すなわち、非アクティブ画像及びアクティブ画像）とを含む閲覧用データを、閲覧要求元のクライアント端末３０に送信する。Ｓ３０４の後、ＷＷＷサーバ１１は閲覧要求受付処理を終了する。 In S304, the WWW server 11 transmits browsing data including the HTML document created in S302 and the image file (that is, the inactive image and the active image) constituting the web page to the client terminal 30 that is the browsing request source. To do. After S304, the WWW server 11 ends the browsing request acceptance process.
　［ウェブページの表示例］
　ＷＷＷサーバ１１から閲覧用データを受信したクライアント端末３０では、ウェブブラウザによりウェブページ生成用のスクリプトが実行されることで、ウェブページが自動的に生成され、生成されたウェブページがウェブブラウザの表示画面上に表示される。そのウェブページの表示例について、図１２を参照しながら説明する。 [Web page display example]
The client terminal 30 that has received the browsing data from the WWW server 11 automatically generates a web page by executing a web page generation script by the web browser, and the generated web page is displayed on the web browser. Displayed on the screen. A display example of the web page will be described with reference to FIG.
　図１２の事例では、図３～図８の事例において設定された内容に対応するウェブページが、クライアント端末３０のウェブブラウザの表示画面に表示されている状況を想定している。図１２の（１）の段階では、非アクティブ画像だけの状態のウェブページ７０が表示されている。また、ウェブブラウザの表示画面上には、マウス等のポインティングデバイスで操作されるポインタ７１も表示されている。 In the case of FIG. 12, it is assumed that a web page corresponding to the contents set in the cases of FIGS. 3 to 8 is displayed on the display screen of the web browser of the client terminal 30. In the stage of (1) in FIG. 12, the web page 70 in a state of only inactive images is displayed. A pointer 71 operated by a pointing device such as a mouse is also displayed on the display screen of the web browser.
　つぎに、図１２の（２）段階では、ポインタ７１がウェブページ７０の左上部に設定されているクリッカブル領域７２内に置かれ、マウスオーバーの状態になっている状況を想定している。このとき、クリッカブル領域７２には網掛けによる強調表示が施され、このクリッカブル領域が操作の対象になっていることが閲覧者に対して明示される。この強調表示は、非アクティブ画像のクリッカブル領域７２に該当する画像領域が、アクティブ画像のクリッカブル領域７２に該当する画像領域に置き換えられて表示されることにより実現する。 Next, in the stage (2) of FIG. 12, it is assumed that the pointer 71 is placed in the clickable area 72 set at the upper left of the web page 70 and the mouse is over. At this time, the clickable area 72 is highlighted by shading, and it is clearly shown to the viewer that this clickable area is an operation target. This highlighting is realized by replacing the image area corresponding to the clickable area 72 of the inactive image with the image area corresponding to the clickable area 72 of the active image.
　クリッカブル領域７２には、ハイパーリンク機能による移動先のウェブサイトが設定されていること前提とする。したがって、図１２の（２）の段階から、ポインタ７１によりクリッカブル領域７２がクリックされた場合、図１２の（３）に例示されるとおり、ウェブブラウザは、設定されているリンク先のウェブサイトにアクセスし、そのウェブサイトのコンテンツを表示画面に表示する。 Suppose that the clickable area 72 has a destination website set by the hyperlink function. Therefore, when the clickable area 72 is clicked by the pointer 71 from the stage (2) in FIG. 12, the web browser displays the set link destination website as illustrated in FIG. 12 (3). Access and display the contents of the website on the display screen.
　なお、図示は省略するが、入力フォームの起動が設定されたクリッカブル領域がクリックされた場合には、ウェブブラウザは所定の入力フォームを起動して表示する。また、電話アプリケーションの起動が設定されたクリッカブル領域がクリックされた場合には、ウェブブラウザは、設定された電話番号を通話先として電話アプリケーションを起動する。また、電子メールクライアントの起動が設定されたクリッカブル領域がクリックされた場合には、ウェブブラウザは、設定された電子メールアドレスを宛先として電子メールクライアントを起動する。 Although illustration is omitted, when a clickable area where activation of the input form is set is clicked, the web browser activates and displays a predetermined input form. When a clickable area where activation of the telephone application is set is clicked, the web browser activates the telephone application with the set telephone number as the call destination. When a clickable area where activation of the e-mail client is set is clicked, the web browser activates the e-mail client with the set e-mail address as a destination.
　［効果］
　実施形態のウェブページ制作支援システム１によれば、以下の効果を奏する。
　ウェブページの制作を依頼するクライアント端末２０のウェブブラウザから、デザイン情報と設定情報とをＷＷＷサーバ１１にアップロードするだけで、クリッカブルな機能を有するウェブページをＷＷＷに公開することができる。したがって、ページ制作者がコーディング作業等に必要な専門的な知識を持っていなくても、ページ制作者の意図に沿った独自性のあるウェブページの制作を支援することができる。 [effect]
The web page production support system 1 according to the embodiment has the following effects.
By simply uploading design information and setting information to the WWW server 11 from the web browser of the client terminal 20 that requests the creation of a web page, a web page having a clickable function can be made public on the WWW. Therefore, even if the page creator does not have the specialized knowledge necessary for coding work or the like, it is possible to support the creation of a unique web page in accordance with the intention of the page creator.
　また、ウェブページが自動的にＷＷＷに公開されることで、閲覧者が容易に検索をすることができるようになるので、ウェブページが閲覧される機会を増すことができる。また、ページ制作者の意図に沿って、例えば、ハイパーリンク、入力フォーム、電話アプリケーション、及び電子メールクライアント等の様々な機能を有するウェブページの制作を支援することができる。 Also, since the web page is automatically published on the WWW, the viewer can easily perform a search, so that the chances of browsing the web page can be increased. Further, according to the intention of the page creator, it is possible to support the creation of a web page having various functions such as hyperlinks, input forms, telephone applications, and e-mail clients.
　［実施形態の構成の対応関係］
　ＷＷＷサーバ１１のＰＨＰスクリプトにより実行されるＳ１０４及びＳ２００の処理が、受領部としての処理の一例に相当する。ＷＷＷサーバ１１のＰＨＰスクリプトにより実行されるＳ２０２の処理が、保存部としての処理の一例に相当する。ＷＷＷサーバ１１のＰＨＰスクリプトにより実行されるＳ２０４の処理が、公開処理部としての処理の一例に相当する。ＷＷＷサーバ１１のＰＨＰスクリプトにより実行されるＳ３０２の処理が、プログラム作成部としての処理の一例に相当する。ＷＷＷサーバ１１のＰＨＰスクリプトにより実行されるＳ３０４の処理が、送信部としての処理の一例に相当する。 [Correspondence of Configuration of Embodiment]
The processing of S104 and S200 executed by the PHP script of the WWW server 11 corresponds to an example of processing as a receiving unit. The process of S202 executed by the PHP script of the WWW server 11 corresponds to an example of a process as a storage unit. The processing of S204 executed by the PHP script of the WWW server 11 corresponds to an example of processing as a public processing unit. The processing of S302 executed by the PHP script of the WWW server 11 corresponds to an example of processing as a program creation unit. The process of S304 executed by the PHP script of the WWW server 11 corresponds to an example of a process as a transmission unit.
　［変形例］
　上記各実施形態における１つの構成要素が有する機能を複数の構成要素に分担させたり、複数の構成要素が有する機能を１つの構成要素に発揮させたりしてもよい。また、上記各実施形態の構成の一部を省略してもよい。また、上記各実施形態の構成の少なくとも一部を、他の上記実施形態の構成に対して付加、置換等してもよい。なお、特許請求の範囲に記載の文言から特定される技術思想に含まれるあらゆる態様が、本開示の実施形態である。 [Modification]
The functions of one component in each of the above embodiments may be shared by a plurality of components, or the functions of a plurality of components may be exhibited by one component. Moreover, you may abbreviate | omit a part of structure of each said embodiment. In addition, at least a part of the configuration of each of the above embodiments may be added to or replaced with the configuration of the other above embodiments. It should be noted that all aspects included in the technical idea specified from the words described in the claims are embodiments of the present disclosure.
　例えば、上述の実施形態では、非アクティブ画像とアクティブ画像との２種類の画像をアップロードしてウェブページを制作する事例について説明した。これに限らず、更にウェブページの背景として表示される画像がアップロードされることにより、ウェブページの表示に適用可能な構成であってもよい。その場合、ウェブブラウザには、背景画像の前面側に重ねて非アクティブ画像が表示されるように構成することが考えられる。 For example, in the above-described embodiment, a case has been described in which a web page is created by uploading two types of images, an inactive image and an active image. However, the present invention is not limited to this, and an image that is displayed as a background of a web page may be uploaded to be applied to display of a web page. In that case, it is conceivable that the web browser is configured to display an inactive image superimposed on the front side of the background image.
　あるいは、アクティブ画像のアップロードを省略し、非アクティブ画像に相当する画像のアップロードのみでウェブページを制作可能な構成であってもよい。その場合、非アクティブ画像に相当する画像に設定されたクリッカブル領域にマウスオーバー操作が行われたときに、ウェブブラウザにクリッカブル領域として認識されるように構成することが考えられる。例えば、クリッカブル領域にマウスオーバー操作が行われたときに、そのクリッカブル領域を認識したウェブブラウザ側の機能によりマウスのポインタの表示態様が変化することで、画像の変化を伴わずとも閲覧者がクリッカブル領域を認識することができる。あるいは、非アクティブ画像に相当する画像に設定されたクリッカブル領域にマウスオーバー操作が行われたときに、そのクリッカブル領域に相当する画像領域に対して予め定められた画像処理（例えば、白濁や反転表示）を施して表示するように構成することが考えられる。 Alternatively, the configuration may be such that the upload of the active image is omitted and the web page can be produced only by uploading the image corresponding to the inactive image. In this case, it is conceivable that the web browser is recognized as a clickable area when a mouse over operation is performed on the clickable area set to an image corresponding to an inactive image. For example, when a mouse over operation is performed on a clickable area, the display mode of the mouse pointer is changed by the function of the web browser that recognizes the clickable area, so that the viewer can click without changing the image. The area can be recognized. Alternatively, when a mouse-over operation is performed on a clickable area set to an image corresponding to an inactive image, image processing (for example, cloudiness or reverse display) determined in advance for the image area corresponding to the clickable area is performed. ) May be displayed.
　上述の実施形態では、ウェブページの制作を依頼するウェブクライアントに制作依頼画面を表示させるクライアントサイド・アプリケーションを提供することによって、ウェブサーバの基となるデザイン情報や設定情報を入力させる構成について説明した。これに限らず、ＷＷＷサーバ１１側で動作するサーバサイド・アプリケーションに作成される制作依頼画面をウェブクライアントに提供し、その制作依頼画面に沿ってウェブクライアントにデザイン情報や設定情報を入力させる構成であってもよい。 In the above-described embodiment, a configuration has been described in which design information and setting information that is the basis of a web server are input by providing a client-side application that displays a production request screen to a web client that requests web page production. . Not limited to this, a configuration is provided in which a production request screen created in a server-side application that operates on the WWW server 11 side is provided to a web client, and design information and setting information are input to the web client along the production request screen. There may be.
　上述の実施形態の構成に加え、更に、アップロードされる画像情報に対してコンテンツ幅を設定可能にし、設定されたコンテンツ幅を反映した態様にてウェブページが表示されるように構成してもよい。その具体的な手順について、図１３及び図１４を参照しながら説明する。なお、以下の図１３及び図１４の説明において、特に言及しない構成については、上述の実施形態の構成に準ずるものとする。 In addition to the configuration of the above-described embodiment, the content width may be set for the uploaded image information, and the web page may be displayed in a manner that reflects the set content width. . The specific procedure will be described with reference to FIGS. In the following description of FIG. 13 and FIG. 14, configurations that are not particularly mentioned are based on the configurations of the above-described embodiment.
　ここでいうコンテンツ幅とは、制作側のクライアント端末２０からアップロードされる画像情報の全横幅のうち、ウェブページを閲覧するウェブブラウザの表示幅に関わらず、表示を必須とする横幅方向の範囲である。以下、コンテンツ幅を定義する情報をコンテンツ幅情報という。コンテンツ幅情報は、例えば、画像の横幅方向の画素数の範囲等で表現される。 The content width here is a range in the horizontal width direction in which display is essential regardless of the display width of the web browser that browses the web page, out of the total width of the image information uploaded from the client terminal 20 on the production side. is there. Hereinafter, information defining the content width is referred to as content width information. The content width information is expressed by, for example, a range of the number of pixels in the horizontal width direction of the image.
　まず、ウェブページの制作を依頼するクライアント端末２０のウェブブラウザによって行われる情報入力処理において、画像情報の入力後、ウェブブラウザの表示画面上に表示されている制作依頼画面４０が、図１３の（１）に例示されるような内容に遷移する。図１３の（１）の制作依頼画面４０に移行するタイミングとしては、例えば、図３に例示される制作依頼画面４０において画像ファイルや基本情報が入力された直後とすることが挙げられる。 First, in the information input process performed by the web browser of the client terminal 20 that requests the production of the web page, the production request screen 40 displayed on the display screen of the web browser after the input of the image information is shown in FIG. Transition to contents as exemplified in 1). The timing for shifting to the production request screen 40 in (1) of FIG. 13 is, for example, immediately after an image file or basic information is input on the production request screen 40 illustrated in FIG.
　図１３の（１）に例示される制作依頼画面４０には、先の段階で入力された画像情報を表示するための領域や、コンテンツ幅を設定するためのＧＵＩが設けられている。図１３の（１）に例示されるとおり、制作依頼画面４０に設けられている画像表示領域４１には、入力された画像情報全体を表す画像５２が表示されている。 The production request screen 40 illustrated in (1) of FIG. 13 is provided with an area for displaying the image information input at the previous stage and a GUI for setting the content width. As illustrated in (1) of FIG. 13, an image 52 representing the entire input image information is displayed in the image display area 41 provided on the production request screen 40.
　また、制作依頼画面４０には、スライダ８１が設けられている。スライダ８１は、画像表示領域４１に表示されている画像５２に対してコンテンツ幅を指定するためのＧＵＩである。このスライダ８１は、ポインティングデバイスによりつまみを左右に移動させることで、画像５２上でコンテンツ幅の伸縮を操作できるようになっている。また、画像５２上には、スライダ８１のつまみの位置に連動して左右に動いてコンテンツ幅を表示する表示線８２が表示されている。 The production request screen 40 is provided with a slider 81. The slider 81 is a GUI for designating the content width for the image 52 displayed in the image display area 41. The slider 81 can be operated to expand or contract the content width on the image 52 by moving the knob to the left or right using a pointing device. In addition, a display line 82 is displayed on the image 52. The display line 82 moves to the left and right in conjunction with the position of the knob of the slider 81 and displays the content width.
　また、制作依頼画面４０には、設定ボタン８３が設けられている。設定ボタン８３がクリックされると、スライダ８１で指定されているコンテンツ幅が確定し、制作依頼画面４０は次の項目の入力受付状態へと移行する。その後、クライアント端末２０のウェブブラウザによって行われる情報入力処理が完了すると、制作依頼画面４０を通じてユーザから入力された各情報（すなわち、デザイン情報、設定情報、及びコンテンツ幅情報を含む）が、ＷＷＷサーバ１１にアップロードされる。 The production request screen 40 is provided with a setting button 83. When the setting button 83 is clicked, the content width specified by the slider 81 is fixed, and the production request screen 40 shifts to an input acceptance state for the next item. Thereafter, when the information input process performed by the web browser of the client terminal 20 is completed, each piece of information (that is, including design information, setting information, and content width information) input from the user through the production request screen 40 is stored in the WWW server. 11 is uploaded.
　一方、ＷＷＷサーバ１１は、制作依頼受付処理（図９参照）のＳ２００において、依頼元のクライアント端末２０からアップロードされたデザイン情報と、設定情報と、コンテンツ幅情報とを受信する。そして、Ｓ２０２において、ＷＷＷサーバ１１は、Ｓ２００で受信したデザイン情報と設定情報とコンテンツ幅情報とを、ウェブページを識別するための識別情報に対応付けて、デザイン情報データベース１２及び設定情報データベース１３に保存する。 On the other hand, the WWW server 11 receives the design information, the setting information, and the content width information uploaded from the requesting client terminal 20 in S200 of the production request receiving process (see FIG. 9). In step S202, the WWW server 11 associates the design information, setting information, and content width information received in step S200 with identification information for identifying a web page, and stores the design information in the design information database 12 and the setting information database 13. save.
　このうち、コンテンツ幅情報については、例えば、図１３の（２）に例示されるとおり、デザイン情報データベース１２に保存される「ページ」テーブル６０に「コンテンツ幅」の項目を設けて記録することが考えられる。「ページ」テーブル６０における「コンテンツ幅」の項目は、画像の幅方向の画素数の範囲を表す情報が記述される。この「コンテンツ幅」の項目は、テキスト情報で表現される。 Of these, the content width information may be recorded by providing an item “content width” in the “page” table 60 stored in the design information database 12 as illustrated in FIG. Conceivable. The item “content width” in the “page” table 60 describes information indicating the range of the number of pixels in the width direction of the image. This “content width” item is expressed by text information.
　つぎに、ＷＷＷサーバ１１及びウェブクライアントによる一連の手順について、図１４を参照しながら説明する。この一連の手順には、ＷＷＷサーバ１１が、コンテンツ幅に関する情報を含む閲覧用データをウェブクライアントに送信する手順が含まれる。また、ウェブクライアントにおいてコンテンツ幅が制御された態様にてウェブページが表示される手順が含まれる。 Next, a series of procedures by the WWW server 11 and the web client will be described with reference to FIG. The series of procedures includes a procedure in which the WWW server 11 transmits browsing data including information related to the content width to the web client. Moreover, the procedure in which a web page is displayed in the aspect by which the content width was controlled in the web client is included.
　ＷＷＷサーバ１１は、制作依頼受付処理（図１１参照）のＳ３００において、閲覧要求に該当するウェブページの基となるデザイン情報、設定情報、及びコンテンツ幅情報を、デザイン情報データベース１２及び設定情報データベース１３から読み込む。次のＳ３０２では、ＷＷＷサーバ１１は、Ｓ３００で読み込んだ各情報に基づいて、ウェブクライアント側でウェブページを自動生成して表示するように構成されたスクリプトを組み込んだＨＴＭＬ文書を作成する。さらに、ＷＷＷサーバ１１は、図１４の（１）に例示されるとおり、コンテンツ幅を定義するＣＳＳファイルを生成する。ここでいうＣＳＳとは、Cascading Style Sheetsの略語であり、ウェブページのスタイルを指定するための周知のプログラミング言語である。 In S300 of the production request reception process (see FIG. 11), the WWW server 11 receives design information, setting information, and content width information that are the basis of the web page corresponding to the browsing request, the design information database 12 and the setting information database 13. Read from. In the next S302, the WWW server 11 creates an HTML document incorporating a script configured to automatically generate and display a web page on the web client side based on the information read in S300. Further, the WWW server 11 generates a CSS file that defines the content width as illustrated in (1) of FIG. CSS here is an abbreviation of Cascading Style Sheets, and is a well-known programming language for designating the style of a web page.
　ここで生成されるＣＳＳファイルには、次のようにウェブページのレイアウトを定義する情報が含まれる。すなわち、ウェブブラウザ上に画像情報を表示する際、コンテンツ幅情報で定義されたコンテンツ幅に該当する領域の横幅全体をウェブブラウザの横幅方向の表示対象に含む。かつ、当該画像情報のうちコンテンツ幅以外の横幅方向の領域であってウェブブラウザの表示領域の横幅（すなわち表示幅）を超える部分については、ウェブブラウザの横幅方向の表示対象から除外して非表示とする。 The CSS file generated here includes information defining the layout of the web page as follows. That is, when image information is displayed on the web browser, the entire width of the area corresponding to the content width defined by the content width information is included in the display object in the horizontal width direction of the web browser. In addition, a portion of the image information in the width direction other than the content width that exceeds the width of the display area of the web browser (that is, the display width) is excluded from being displayed in the width direction of the web browser and is not displayed. And
　そして、ＷＷＷサーバ１１は、図１４の（２）に例示されるように、コンテンツ幅を定義するＣＳＳファイルと、ＨＴＭＬ文書と、画像ファイルとを含む閲覧用データを、閲覧要求元のクライアント端末３０に送信する。 Then, as illustrated in (2) of FIG. 14, the WWW server 11 receives the browsing data including the CSS file that defines the content width, the HTML document, and the image file, as the client terminal 30 that is the browsing request source. Send to.
　一方、ＷＷＷサーバ１１から閲覧用データを受信したクライアント端末３０では、ウェブブラウザによりウェブページが生成され、生成されたウェブページがウェブブラウザの表示画面上に表示される。図１４の（３）に例示されるように、クライアント端末３０のウェブブラウザは、コンテンツ幅を定義するＣＳＳファイルに基づいて、ウェブページの表示幅を制御する。図１４の（３）の表示例において、符号９０はウェブブラウザにおける画像の表示範囲を表している。 On the other hand, in the client terminal 30 that has received the browsing data from the WWW server 11, a web page is generated by the web browser, and the generated web page is displayed on the display screen of the web browser. As illustrated in FIG. 14 (3), the web browser of the client terminal 30 controls the display width of the web page based on the CSS file that defines the content width. In the display example of (3) in FIG. 14, reference numeral 90 represents an image display range in the web browser.
　図１４の（３）に例示されるとおり、ウェブブラウザの表示範囲９０には、画像ファイルで表される画像情報のうち、ＣＳＳファイルにおいて定義されているコンテンツ幅全体が少なくとも含まれる。その際、コンテンツ幅に該当する画像領域は、ウェブブラウザの表示範囲９０の横幅方向の中央に配置される。また、当該画像情報のうち、コンテンツ幅以外の左右両外側の背景部分については、ウェブブラウザの表示幅に相当する範囲までが表示対象に含まれ、ウェブブラウザの表示幅を超える背景部分は、トリミングされて非表示となっている。 As illustrated in (3) of FIG. 14, the display range 90 of the web browser includes at least the entire content width defined in the CSS file among the image information represented by the image file. At this time, the image area corresponding to the content width is arranged at the center in the horizontal width direction of the display range 90 of the web browser. In addition, in the image information, the background part on both the left and right sides other than the content width includes the range corresponding to the display width of the web browser, and the background part exceeding the display width of the web browser is trimmed. Has been hidden.
　このように、ＣＳＳファイルにより定義されるコンテンツ幅に基づいてウェブページの表示幅を制御することで、ウェブページにおける主要な情報をもれなく表示させつつ、ウェブページの横幅をウェブブラウザの表示幅に一致させることができる。 In this way, by controlling the display width of the web page based on the content width defined by the CSS file, the horizontal width of the web page matches the display width of the web browser while displaying all the main information on the web page. Can be made.
　なお、ＣＳＳファイルにおいて定義されているコンテンツ幅が、ウェブブラウザの表示幅より大きい場合、ウェブブラウザに実装されているスクロールバー等のＧＵＩにより表示領域を移動可能にすることが考えられる。具体的には、コンテンツ幅全体のうち、ウェブブラウザの表示幅に収まる部分領域だけを表示し、スクロールバーにより必要に応じて表示領域を横幅方向に移動させることにより、少なくともコンテンツ幅全体に相当する領域を閲覧可能にする。 If the content width defined in the CSS file is larger than the display width of the web browser, the display area can be moved by a GUI such as a scroll bar installed in the web browser. Specifically, by displaying only the partial area that fits within the display width of the web browser out of the entire content width, and moving the display area in the horizontal width direction as necessary using the scroll bar, at least the entire content width is equivalent. Make the area viewable.
　上述したウェブページ制作支援システム１を構成要件とするシステム、ウェブページ制作支援システム１としてコンピュータを機能させるためのプログラム、このプログラムを記録した半導体メモリ等の非遷移的実態的記録媒体、ウェブページ制作支援方法等の種々の形態で本開示を実現することもできる。 A system having the above-described web page production support system 1 as a configuration requirement, a program for causing a computer to function as the web page production support system 1, a non-transition actual recording medium such as a semiconductor memory in which the program is recorded, and web page production The present disclosure can also be realized in various forms such as a support method.

Claims (6)

  1. 　ウェブページ制作支援システムであって、
    　制作すべきウェブページの意匠デザインを表す少なくとも１つの画像情報を含むデザイン情報と、当該ウェブページの機能に関する設定を表す設定情報であって、前記ウェブページに設けられる少なくとも１つのクリッカブル領域の画像上の座標を表す座標情報を含む設定情報とを、ウェブページの制作を依頼するウェブクライアントから受領するように構成された受領部と、
    　前記受領部によって受領されたデザイン情報と設定情報とを、当該ウェブページに関する識別情報に対応付けて、所定の記憶装置に保存するように構成された保存部と、
    　前記保存部によって保存されたデザイン情報及び設定情報に基づいて生成され得るウェブページを閲覧するウェブクライアント側で、当該ウェブページに対応するデザイン情報及び設定情報に応じたウェブページを自動的に生成して表示するための生成プログラムを作成するように構成されたプログラム作成部と、
    　前記ウェブページに対するウェブクライアントからの閲覧要求に応じて、当該閲覧要求に該当のウェブページに対応するデザイン情報と、当該ウェブページを生成するための前記生成プログラムとを含む閲覧用データを、閲覧要求元のウェブクライアントへ送信するように構成された送信部とを備え、
    　前記プログラム作成部は、前記生成プログラムとして、ウェブブラウザ上に前記画像情報を表示し、その表示された画像情報において、前記設定情報の座標情報で示されるクリッカブル領域に対して所定の操作が行われたときに、前記ウェブブラウザにクリッカブル領域として認識させる機能を有するウェブページを生成する生成プログラムを作成するように構成されている、
    　ウェブページ制作支援システム。     A web page creation support system,
    Design information including at least one image information representing the design design of the web page to be produced, and setting information representing settings related to the function of the web page, on the image of at least one clickable area provided on the web page A receiving unit configured to receive setting information including coordinate information representing the coordinates of a web page from a web client requesting production of the web page;
    A storage unit configured to store the design information and setting information received by the receiving unit in association with identification information related to the web page in a predetermined storage device;
    A web client that browses a web page that can be generated based on the design information and setting information stored by the storage unit automatically generates a web page corresponding to the design information and setting information corresponding to the web page. A program creation unit configured to create a generation program for display
    In response to a browsing request from the web client for the web page, a browsing request including design information corresponding to the web page corresponding to the browsing request and the generation program for generating the web page is requested. A transmission unit configured to transmit to the original web client,
    The program creation unit displays the image information on a web browser as the generation program, and in the displayed image information, a predetermined operation is performed on the clickable area indicated by the coordinate information of the setting information. The web browser is configured to create a generation program that generates a web page having a function of recognizing the web browser as a clickable area.
    Web page production support system.
  2. 　前記受領部は、前記デザイン情報として、前記ウェブページに設けられる少なくとも１つのクリッカブル領域に対応する画像領域が全て操作の対象となっていない状態を表す非アクティブ画像情報、及び前記非アクティブ画像情報に対応する画像情報であって、前記クリッカブル領域に対応する画像領域が操作の対象となっている状態を表すアクティブ画像情報を含むデザイン情報を受領するように構成されており、
    　前記プログラム作成部は、前記生成プログラムとして、ウェブブラウザ上に非アクティブ画像情報を表示し、その表示された非アクティブ画像情報において、前記設定情報の座標情報で示されるクリッカブル領域に対して所定の操作が行われたときに、前記非アクティブ画像情報内の当該クリッカブル領域に該当する画像領域を、対応するアクティブ画像情報における当該クリッカブル領域に該当する画像領域に差し替えて表示させる機能を有するウェブページを生成する生成プログラムを作成するように構成されている、
    　請求項１に記載のウェブページ制作支援システム。     The receiving unit includes, as the design information, inactive image information indicating a state in which an image area corresponding to at least one clickable area provided on the web page is not an operation target, and the inactive image information. The image information corresponding to the clickable region is configured to receive design information including active image information indicating a state in which the image region corresponding to the clickable region is an operation target;
    The program creation unit displays inactive image information on a web browser as the generation program, and in the displayed inactive image information, a predetermined operation is performed on the clickable area indicated by the coordinate information of the setting information. A web page having a function to display an image area corresponding to the clickable area in the inactive image information by replacing the image area corresponding to the clickable area in the corresponding active image information Is configured to create a generator
    The web page production support system according to claim 1.
  3. 　前記保存部によって保存されたデザイン情報及び設定情報に基づいて生成され得るウェブページを、ワールド・ワイド・ウェブでの公開対象として登録するように構成された公開処理部を更に備える、
    　請求項１又は請求項２に記載のウェブページ制作支援システム。     A publication processing unit configured to register a web page that can be generated based on the design information and setting information saved by the saving unit as a publication target on the world wide web;
    The web page production support system according to claim 1 or 2.
  4. 　前記受領部は、前記クリッカブル領域に対する所定の実行操作が入力されたときに実行すべき機能を表す機能情報を更に含む前記設定情報を受領するように構成されおり、
    　前記プログラム作成部は、前記生成プログラムとして、表示された前記画像情報において、前記設定情報の座標情報で示されるクリッカブル領域に対する実行操作が入力されたときに、前記設定情報における当該クリッカブル領域の機能情報で示される機能を実行させる機能を更に有するウェブページを生成する生成プログラムを作成するように構成されている、
    　請求項１ないし請求項３の何れか１項に記載のウェブページ制作支援システム。     The receiving unit is configured to receive the setting information further including function information representing a function to be executed when a predetermined execution operation for the clickable region is input,
    When the execution operation for the clickable area indicated by the coordinate information of the setting information is input as the generation program in the displayed image information, the program creation unit is configured to include the function information of the clickable area in the setting information. Configured to create a generation program for generating a web page further having a function of executing the function indicated by
    The web page production support system according to any one of claims 1 to 3.
  5. 　前記受領部は、前記クリッカブル領域に対する所定の実行操作が入力されたときに実行すべき機能として、ハイパーリンク、入力フォーム、電話アプリケーション、及び電子メールクライアントの少なくとも何れかに関する前記機能情報を含む前記設定情報を受領するように構成されている、
    　請求項４に記載のウェブページ制作支援システム。     The setting includes the function information regarding at least one of a hyperlink, an input form, a telephone application, and an e-mail client as a function to be executed when a predetermined execution operation for the clickable area is input. Configured to receive information,
    The web page production support system according to claim 4.
  6. 　前記受領部は、前記画像情報がウェブブラウザ上でウェブページとして表示されるときに、前記画像情報の全横幅のうち表示を必須とする横幅方向の範囲を定義する情報であるコンテンツ幅情報を更に取得するように構成されており、
    　前記保存部は、更に、前記受領部によって受領されたコンテンツ幅情報を当該ウェブページに関する識別情報に対応付けて前記記憶装置に保存するように構成されており、
    　前記プログラム作成部は、前記生成プログラムとして、ウェブブラウザ上に前記画像情報を表示する際、当該画像情報に対応するコンテンツ幅情報で表される領域であるコンテンツ領域の横幅全体を前記ウェブブラウザの横幅方向の表示対象に含み、かつ、当該画像情報のうち前記コンテンツ領域以外の横幅方向の領域であって前記ウェブブラウザの表示領域の横幅を超える部分については、前記ウェブブラウザの横幅方向の表示対象から除外する機能を有するウェブページを生成する生成プログラムを作成するように構成されている、
    　請求項１ないし請求項５に記載のウェブページ制作支援システム。     When the image information is displayed as a web page on a web browser, the receiving unit further includes content width information that is information that defines a range in a horizontal width direction that must be displayed among all the horizontal widths of the image information. Configured to get and
    The storage unit is further configured to store content width information received by the receiving unit in the storage device in association with identification information related to the web page,
    When displaying the image information on the web browser as the generation program, the program creation unit determines the entire width of the content area, which is an area represented by the content width information corresponding to the image information, to the width of the web browser. A portion that is included in the display target of the direction and that is in the horizontal width direction other than the content region and exceeds the horizontal width of the display region of the web browser is included in the display target of the horizontal direction of the web browser. Configured to create a generating program that generates a web page having a function to be excluded,
    The web page production support system according to claim 1.
PCT/JP2017/018036 2017-02-22 2017-05-12 Web page production support system WO2018154801A1 (en)

Applications Claiming Priority (2)

Application Number Priority Date Filing Date Title
JP2017-031298 2017-02-22
JP2017031298A JP6235744B1 (en) 2017-02-22 2017-02-22 Web page creation support system

Publications (1)

Publication Number Publication Date
WO2018154801A1 true WO2018154801A1 (en) 2018-08-30

Family

ID=60417595

Family Applications (1)

Application Number Title Priority Date Filing Date
PCT/JP2017/018036 WO2018154801A1 (en) 2017-02-22 2017-05-12 Web page production support system

Country Status (2)

Country Link
JP (1) JP6235744B1 (en)
WO (1) WO2018154801A1 (en)

Families Citing this family (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
JP7141589B1 (en) 2022-05-13 2022-09-26 株式会社ニアメロ Terminal device, method and program

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
JPH09237274A (en) * 1996-02-29 1997-09-09 Toshiba Corp Method and device for generating html file for www
JPH09282129A (en) * 1996-04-16 1997-10-31 Nippon Telegr & Teleph Corp <Ntt> Clickable map setting data generating method and its execution device
JP2007018383A (en) * 2005-07-08 2007-01-25 News2U Corp Release information disclosing system
JP2010072764A (en) * 2008-09-16 2010-04-02 Digitalmax Co Ltd Program creation device

Family Cites Families (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
JP2007108994A (en) * 2005-10-13 2007-04-26 Nippon Digital Kenkyusho:Kk Layout editing device and layout editing program

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
JPH09237274A (en) * 1996-02-29 1997-09-09 Toshiba Corp Method and device for generating html file for www
JPH09282129A (en) * 1996-04-16 1997-10-31 Nippon Telegr & Teleph Corp <Ntt> Clickable map setting data generating method and its execution device
JP2007018383A (en) * 2005-07-08 2007-01-25 News2U Corp Release information disclosing system
JP2010072764A (en) * 2008-09-16 2010-04-02 Digitalmax Co Ltd Program creation device

Also Published As

Publication number Publication date
JP6235744B1 (en) 2017-11-22
JP2018136786A (en) 2018-08-30

Similar Documents

Publication Publication Date Title
CN106126514B (en) Method for providing search related message server, server and user terminal
US9753900B2 (en) Universal content referencing, packaging, distribution system, and a tool for customizing web content
JP6130335B2 (en) Information display program, distribution device, information display method, and information display device
CN101578592B (en) Lasting preservation door
US7761781B2 (en) Web browsing method and system, and recording medium thereof
US20210149842A1 (en) System and method for display of document comparisons on a remote device
US20110173569A1 (en) Preview Functionality for Increased Browsing Speed
US11599584B2 (en) Method and system for processing information in social network system
JP5199939B2 (en) Image search apparatus, image search method and program
KR100996037B1 (en) Apparatus and method for providing hyperlink information in mobile communication terminal which can connect with wireless-internet
JP2012064207A (en) Host device and content display method of the same
JP2017073095A (en) Information display device, information display method, information display program, and distribution device
JP5185793B2 (en) Map search system
KR101350525B1 (en) Method and apparatus for using tab corresponding to query to provide additional information
JP5437325B2 (en) Information processing apparatus, system, method, and program
JP2007149016A (en) System, method and server for supporting webpage creation
JP4938589B2 (en) Web page browsing device and web page browsing server
JP6235744B1 (en) Web page creation support system
JP5134639B2 (en) Client apparatus, display method, program, information processing apparatus, and information processing system
WO2010048596A2 (en) A universal content referencing, packaging, distribution system, and a tool for customizing web content
JP2019086931A (en) Information processing apparatus and computer program
JP7206863B2 (en) Display control method, device, and program
JP6113463B2 (en) Information processing program, link management apparatus, display system, and display method
JP2013037513A (en) Information presentation device, information display system, information presentation method, and computer program
JP2009015378A (en) Page browsing device

Legal Events

Date Code Title Description
121 Ep: the epo has been informed by wipo that ep was designated in this application

Ref document number: 17898320

Country of ref document: EP

Kind code of ref document: A1

NENP Non-entry into the national phase

Ref country code: DE

122 Ep: pct application non-entry in european phase

Ref document number: 17898320

Country of ref document: EP

Kind code of ref document: A1