JP6235744B1 - Web page creation support system - Google Patents
Web page creation support system Download PDFInfo
- Publication number
- JP6235744B1 JP6235744B1 JP2017031298A JP2017031298A JP6235744B1 JP 6235744 B1 JP6235744 B1 JP 6235744B1 JP 2017031298 A JP2017031298 A JP 2017031298A JP 2017031298 A JP2017031298 A JP 2017031298A JP 6235744 B1 JP6235744 B1 JP 6235744B1
- Authority
- JP
- Japan
- Prior art keywords
- information
- web page
- image
- web
- area
- Prior art date
- Legal status (The legal status 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 status listed.)
- Active
Links
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
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Artificial Intelligence (AREA)
- Health & Medical Sciences (AREA)
- Audiology, Speech & Language Pathology (AREA)
- Computational Linguistics (AREA)
- General Health & Medical Sciences (AREA)
- Human Computer Interaction (AREA)
- Information Transfer Between Computers (AREA)
- Document Processing Apparatus (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
【課題】ページ制作者の意図に沿った独自性のあるウェブページの制作を支援する。【解決手段】WWWサーバ11は、ウェブページの意匠デザインを表すデザイン情報と、ウェブページの機能に関する設定情報とをクライアント端末20から受領し、受領したデザイン情報と設定情報とをデータベース12,13に保存する。WWWサーバ11は、保存されたデザイン情報及び設定情報に基づいて生成され得るウェブページを閲覧側のウェブクライアントにおいて自動的に生成して表示するための生成プログラムを作成する。WWWサーバ11は、閲覧要求に該当のウェブページに対応するデザイン情報と、当該ウェブページを生成するための生成プログラムとを含む閲覧用データを、閲覧要求元のクライアント端末30へ送信する。【選択図】 図1[PROBLEMS] To support the creation of a unique web page in line with the intention of a page creator. A WWW server 11 receives design information representing a design design of a web page and setting information regarding the function of the web page from a client terminal 20, and stores the received design information and setting information in databases 12 and 13. save. The WWW server 11 creates a generation program for automatically generating and displaying a web page that can be generated based on the stored design information and setting information on a web client on the browsing side. The WWW server 11 transmits browsing data including design information corresponding to the web page corresponding to the browsing request and a generation program for generating the web page to the client terminal 30 that is the browsing request source. [Selection] Figure 1
Description
本開示は、ウェブページの制作を支援するウェブページ制作支援システムに関する。 The present disclosure relates to a web page production support system that supports production of a web page.
インターネット上のワールド・ワイド・ウェブ(略名:WWW又はウェブ)で公開・閲覧されるウェブページには、例えば、マウスオーバーやクリックといった閲覧者による操作に反応して何らかの処理を実行する機能を有するものが知られている。また、特許文献1には、予め準備された特定のデータに基づいて、定型のウェブページを自動制作する技術が記載されている。 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.
閲覧者からの操作に対応する処理を実行する機能を持つウェブページを制作するにあたって、元となるデザイン画像から、HTML、XHTML、CSS等のプログラミング言語を駆使して、当該ウェブページを構成するデータを制作するコーディング作業が必要であった。この種のコーディング作業は、専門的な知識や多大な手間が必要であり、専門的な知識や経験の乏しい人には敷居が高いという問題がある。 When creating a web page with a function to execute a process corresponding to the operation from the viewer, the data constituting the web page using a programming language such as HTML, XHTML, CSS, etc. from the original design image The coding work to produce was necessary. This type of coding work requires specialized knowledge and a great deal of labor, and there is a problem that a threshold is high for those who lack specialized knowledge and experience.
一方、特許文献1には、ウェブページを自動制作する技術が記載されているものの、定型のフォーマットに沿ったウェブページに限られ、デザインの自由度が低い。そのため、ウェブページを制作してこれをWWWで公開しようとする人(以下、ページ制作者という)の意図に沿った独自性のあるウェブページを制作することには適していない。 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).
本開示は、上記問題を解決するためになされたものである。本開示は、ページ制作者の意図に沿った独自性のあるウェブページの制作を支援するための技術を提供する。 The present disclosure has been made to solve the above problems. The present disclosure provides a technique for supporting the creation of a unique web page in accordance with the intention of the page creator.
本開示の一態様にかかるウェブページ制作支援システムは、受領部と、保存部と、プログラム作成部と、送信部とを備える。受領部は、制作すべきウェブページの意匠デザインを表す少なくとも1つの画像情報を含むデザイン情報と、当該ウェブページの機能に関する設定を表す設定情報とを、ウェブページの制作を依頼するウェブクライアントから受領するように構成されている。このうち、設定情報には、ウェブページに設けられる少なくとも1つのクリッカブル領域の画像上の座標を表す座標情報が含まれる。 A 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 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. And generating a generation program 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 image information of design information on a 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.
上述のウェブページ制作支援システムによれば、ウェブページの制作を依頼するウェブクライアントから、少なくとも1つの画像情報を含むデザイン情報と設定情報とをアップロードするだけで、クリッカブルな機能を有するウェブページを制作することができる。したがって、ページ制作者がコーディング作業等に必要な専門的な知識を持っていなくても、ページ制作者の意図に沿った独自性のあるウェブページの制作を支援することができる。 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.
本開示のウェブページ制作支援システムにおいては、さらに、以下の構成を採用してもよい。受領部は、前記デザイン情報として、非アクティブ画像情報、及びアクティブ画像を含むデザイン情報を受領するように構成されている。非アクティブ画像情報は、ウェブページに設けられる少なくとも1つのクリッカブル領域に対応する画像領域が全て操作の対象となっていない状態を表す画像情報である。アクティブ画像情報は、非アクティブ画像情報に対応する画像情報であって、クリッカブル領域に対応する画像領域が操作の対象となっている状態を表す画像情報である。 The web page production 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, in the displayed inactive image information, when a predetermined operation is performed on the clickable area indicated by the coordinate information of the setting information, an image area corresponding to the clickable area in the inactive image information is displayed. The image area corresponding to the clickable area in the corresponding active image information is displayed for replacement.
上述のウェブページ制作支援システムによれば、クリッカブル領域への操作に対して、ページ制作者の意図に沿った画像の変化を起す機能を有するウェブページを制作することができる。 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 region.
本開示のウェブページ制作支援システムにおいては、公開処理部を更に備えるように構成されていてもよい。公開処理部は、保存部によって保存されたデザイン情報及び設定情報に基づいて生成され得るウェブページを、ワールド・ワイド・ウェブでの公開対象として登録するように構成されている。このような構成によれば、ウェブページの制作を依頼するウェブクライアントからデザイン情報と設定情報とをアップロードするだけで、ウェブページが自動的にWWWに公開される。これにより、閲覧者側のウェブクライアントから容易に検索をすることができるようになるので、ウェブページが閲覧される機会を増すことができる。 The web page creation 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 production 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.
また、受領部は、ハイパーリンク、入力フォーム、電話アプリケーション、及び電子メールクライアントの少なくとも何れかに関する機能情報を含む設定情報を受領するように構成されているとよい。上述のウェブページ制作支援システムによれば、更に、ウェブページ上のクリッカブル領域が操作された際に実行すべき処理に関して、ページ制作者の意図に沿って様々な機能を有するウェブページの制作を支援することができる。 Further, the receiving unit may be configured to receive setting information including functional information related to 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 production 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.
そして、プログラム作成部は、生成プログラムとして、次のような機能を更に有するウェブページを生成する生成プログラムを作成するように構成されている。そのウェブページは、ウェブブラウザ上に画像情報を表示する際、当該画像情報に対応するコンテンツ幅情報で表される領域であるコンテンツ領域の横幅全体をウェブブラウザの横幅方向の表示対象に含める。かつ、当該画像情報のうちコンテンツ領域以外の横幅方向の領域であってウェブブラウザの表示領域の横幅を超える部分については、ウェブブラウザの横幅方向の表示対象から除外する。 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. 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 in the 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.
以下、本開示の実施形態を図面に基づいて説明する。なお、本開示は下記の実施形態に限定されるものではなく様々な態様にて実施することが可能である。
[ネットワークシステムの構成の説明]
実施形態のウェブページ制作支援システム1を含むネットワークの構成について、図1を参照しながら説明する。
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.
ウェブページ制作支援システム1は、ウェブページの制作を支援するサービスを運営する運営者により管理されるコンピュータシステムであり、インターネット100に接続されている。このウェブページ制作支援システム1は、WWWサーバ11と、デザイン情報データベース12と、設定情報データベース13とを備える。 The web page production support system 1 is a computer system managed by an operator who operates a service that supports production of a web page, and 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.
WWWサーバ11は、インターネット100に接続されたウェブクライアントからの要求に応じて各種情報を提供するサーバコンピュータであり、図示しないCPU、RAM、ROM、補助記憶装置、入出力インタフェース等を中心に構成されている。このWWWサーバ11は、ウェブページの制作を依頼するウェブクライアント(例えば、クライアント端末20)から、ウェブページの基となる情報を受領し、これらの情報から構築され得るウェブページをWWWに公開する機能を有する。 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 configured with a CPU, RAM, ROM, auxiliary storage device, input / output interface, etc., not shown. ing. 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 production of the web page, and publishing a web page that can be constructed from the information to the WWW. Have
また、WWWサーバ11は、公開したウェブページに対してウェブクライアント(例えば、クライアント端末30)から閲覧要求を受付けた場合、当該ウェブページを構築するために必要な情報を、閲覧要求元のウェブクライアントに送信する機能を有する。これらの機能は、例えば、WWWサーバ11に実装された周知のPHP: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: Hypertext Preprocessor script installed in the WWW server 11.
デザイン情報データベース12は、ウェブページの制作を依頼したウェブクライアントから受領したウェブページの基となる情報のうち、ウェブページの意匠デザインに関する情報を含むデザイン情報を保存するためのデータベースである。設定情報データベース13は、ウェブページの制作を依頼したウェブクライアントから受領したウェブページの基となる情報のうち、ウェブページに付与される機能の設定に関する情報を含む設定情報を保存するためのデータベースである。なお、ウェブページ制作支援システム1を構成するWWWサーバ11、デザイン情報データベース12、及び設定情報データベース13は、それぞれ別体の装置であってもよいし一体の装置として構成されていてもよい。 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.
また、インターネット100には、ウェブサイトの閲覧を行うためのウェブブラウザを備えるクライアント端末20,30が接続されている。これらのクライアント端末20,30は、例えば、パーソナルコンピュータや、いわゆるスマートフォンやタブレットコンピュータ等の携帯端末により具現化される。なお、図1では、説明を簡潔にするためにクライアント端末20,30をそれぞれ一台ずつ図示しているが、多数のクライアント端末20,30がインターネット100に接続されていてもよい。 In addition, client terminals 20 and 30 having a web browser for browsing a website 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.
クライアント端末20は、インターネット100を介してウェブページ制作支援システム1に対してウェブページの制作を依頼するウェブクライアントとして機能するコンピュータである。クライアント端末30は、インターネット100を介してウェブページ制作支援システム1によりWWWに公開されたウェブページを閲覧するウェブクライアントとして機能するコンピュータである。また、クライアント端末20,30は、例えば、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.
[認証処理の説明]
WWWサーバ11が実行する認証処理の手順について、図2のフローチャートを参照しながら説明する。この処理は、ウェブページの制作を依頼するクライアント端末20で動作するウェブブラウザからの要求を受付けたときに実行される。
[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.
S100では、WWWサーバ11は、依頼元のクライアント端末20に係るユーザに対する認証を行う。具体的には、WWWサーバ11は、ユーザを識別するための認証コードをクライアント端末20から受信し、この受信した認証コードと、正当なユーザとして予め登録されている認証コードとが一致するか否かを判断することにより、ユーザの認証を行う。 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, and whether or not the received authentication code matches an authentication code registered in advance as a valid user. By determining whether or not, the user is authenticated.
S102では、WWWサーバ11は、S100の結果、ユーザの認証を受理したか否かを判定する。ユーザの認証を受理しない場合(S102:NO)、WWWサーバ11はS100の処理に戻る。一方、ユーザの認証を受理した場合(S102:YES)、WWWサーバ11はS104の処理に進む。 In S102, the WWW server 11 determines whether or not 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.
S102で肯定判定をした場合に進むS104では、WWWサーバ11は、依頼用アプリケーションのプログラムを、依頼元のクライアント端末20のウェブブラウザに送信する。この依頼用アプリケーションは、クライアント端末20のウェブブラウザ上で実行されるクライアントサイド・アプリケーションであり、例えばJavaScript等のスクリプト言語で構築されている。この依頼用アプリケーションは、制作すべきウェブページの基となる情報をユーザに入力させるためのGUIで構成される制作依頼画面をウェブブラウザの表示画面に表示させ、そのGUIに従って入力された情報をWWWサーバ11にアップロードする機能を有する。 In S104, which proceeds when an affirmative determination is made in S102, the WWW server 11 transmits the request application program to the web browser of the requesting client terminal 20. This request application is a client-side application executed on the web browser of the client terminal 20, and is constructed by a script language such as JavaScript, for example. The 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, and the information entered according to the GUI is displayed on the WWW. It has a function of uploading to the server 11.
[情報入力処理の説明]
ウェブページの制作を依頼するクライアント端末20のウェブブラウザによって行われる情報入力処理の手順について、図3〜図8を参照しながら説明する。この処理は、クライアント端末20のウェブブラウザが、WWWサーバ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.
クライアント端末20のウェブブラウザによって情報入力処理が開始されると、初期画面として、図3に例示されるような制作依頼画面40がウェブブラウザの表示画面上に表示される。図3に例示される制作依頼画面40の初期画面では、制作すべきウェブページの意匠デザインを表す画像情報や、当該ウェブページの概要を表す基本情報等を入力するためのユーザインタフェースが表示されている。 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.
図3に例示されるとおり、制作依頼画面40には画像表示領域41が設けられている。この画像表示領域41は、制作すべきウェブページの意匠デザインを表す画像を取得して表示するためのユーザインタフェースである。図3に例示される初期画面においては、画像表示領域41には、意匠デザインを表す画像情報、すなわち画像ファイルを入力することを促すメッセージが記述されている。本実施形態では、ユーザがウェブブラウザ上で任意のファイルフォルダを開いて画像ファイルを選択するか、画像ファイルを示すアイコンを画像表示領域41上にドラッグ・アンド・ドロップする操作を行うことで、画像ファイルを入力できるようになっている。 As illustrated in FIG. 3, an image display area 41 is provided on the production request screen 40. 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.
なお、本実施形態では、ウェブページの意匠デザインを表す画像情報として、図4に例示されるような非アクティブ画像50及びアクティブ画像51の2種類の画像情報が入力されることを前提としている。これらの非アクティブ画像50及びアクティブ画像51は、文書やハイパーテキスト等の仕組みを含まない単純なビットマップ画像で構成されている。 In the present 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.
非アクティブ画像とは、ウェブページの意匠デザインを表す画像であって、当該ウェブページに設けられる少なくとも1つのクリッカブル領域に対応する画像領域が全て操作の対象となっていない、素の状態を表す画像である。一方、アクティブ画像とは、非アクティブ画像情報に対応する画像であって、クリッカブル領域に対応する画像領域が操作の対象となっている状態を表す画像である。なお、クリッカブル領域とは、ウェブブラウザの表示画面上で、マウスやタッチパッド等のポインティングデバイスによるポイント・アンド・クリックの操作(以下、単に「クリック」という)が入力されたときに、所定の処理を実行する特定の画像領域である。 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.
図4の事例では、素の状態を表す非アクティブ画像50に対応するアクティブ画像51として、クリッカブル領域に相当する画像領域51a,51b,51c,51dに対して網掛け等の強調表示が施されているものとする。なお、クリッカブル領域以外の画像領域については両者の画像は同一である。 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.
図3の説明に戻る。さらに、制作依頼画面40には情報入力領域42が設けられている。情報入力領域42は、制作すべきウェブページに関する基本情報を入力するためのユーザインタフェースを有する。この情報入力領域42には、符号42a〜42g,43で示される複数種類のテキストボックスやドロップダウンリスト、ボタン等のユーザインタフェースが設けられている。 Returning to the description 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 and buttons indicated by reference numerals 42a to 42g and 43.
符号42aは、ウェブページのタイトルを表すテキスト情報を入力するためのテキストボックスである。符号42bは、ウェブページによる情報提供の主体(すなわち、広告主)の名称を表す情報を入力するためのテキストボックスである。符号42cは、ウェブページの簡単な要約文や説明文を表す情報を入力するためのテキストボックスである。符号42dは、ウェブページの特徴を表す単語であって、インターネット上の情報を検索する周知の検索エンジンによる検索の対象となり得るキーワードを表す情報を入力するためのテキストボックスである。符号42eは、ウェブページをWWWに公開する期間を表す情報を入力するためのテキストボックスである。 Reference numeral 42a is a text box for inputting text information representing the title of the web page. Reference numeral 42b is a text box for inputting information representing the name of a main body (that is, an advertiser) of information provision by the web page. Reference numeral 42c is a text box for inputting information representing a simple summary sentence or explanatory text of a web page. Reference numeral 42d is a text box for inputting information representing a keyword representing a characteristic of a web page and a keyword that can be searched by a known search engine for searching information on the Internet. Reference numeral 42e is a text box for inputting information representing a period for publishing a web page on the WWW.
符号42fは、ウェブページをWWWに公開するか否かを指定する指示を、複数の選択肢の中から1つ選択するプルダウンメニューである。符号42gは、ウェブページの表示形式を指定する指示を、複数の選択肢の中から1つ選択するプルダウンメニューである。例えば、ウェブページが、パソコンでの表示に専用されるものであるか、スマートフォンでの表示に専用されるものであるか、パソコン及びスマートフォンでの表示に共用されるものであるかを選択できるようになっている。符号43は、画像情報及び基本情報の入力を完了し、制作依頼画面40を次の画面に遷移させる指示を与えるボタンである。 Reference numeral 42f is 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 is 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 gives an instruction to complete the input of the image information and the basic information and to change the production request screen 40 to the next screen.
図3に例示される初期画面に従って、ユーザが制作依頼画面40に画像情報及び基本情報を入力した後の状態を図5に例示する。図5に例示されるとおり、制作依頼画面40の画像表示領域41には、ユーザにより入力された画像が表示されている。ただし、画像表示領域41には、図4に例示される非アクティブ画像50及びアクティブ画像51の2つの画像のうち、アクティブ画像51の上に非アクティブ画像50が重ねて描画されており、ユーザには非アクティブ画像50だけが見える状態になっている。あるいは、非アクティブ画像50を画像表示領域41に表示し、その横にアクティブ画像51を非表示状態で並べて配置してもよい。また、情報入力領域42の各ボックス42a〜42gには、ユーザにより入力又は選択された各種情報が表示されている。 FIG. 5 illustrates a state after the user inputs image information and basic information to 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 of the two images of the inactive image 50 and the active image 51 illustrated in FIG. Is in a state where only the inactive image 50 is visible. 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 42 a to 42 g of the information input area 42.
図5に例示される状態からボタン43がクリックされると、これまでに入力された各情報が確定し、制作依頼画面40は図6〜図8に例示される次の入力受付状態に移行する。図6〜図8に例示される制作依頼画面40では、ウェブページに付与される機能の設定に関する情報の入力を受け付ける。 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 reception state illustrated in FIGS. 6 to 8. . In the production request screen 40 illustrated in FIGS. 6 to 8, input of information related to setting of functions given to the web page is accepted.
具体的には、画像表示領域41に表示された画像上において、マウスやタッチパッド等のポインティングデバイスによりクリッカブル領域に設定すべき領域を指定できるようになっている。例えば、矩形の左上の頂点に相当する座標をクリックし、そのまま右下の座標までドラッグする操作により、矩形のクリッカブル領域の座標範囲を指定することができる。続いて、指定されたクリッカブル領域がクリックされたときに実行すべき処理の内容を設定できるようになっている。これらの操作を繰り返し行うことで、複数のクリッカブル領域の機能を設定することができるようになっている。 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.
図6は、画像表示領域41に表示されている画像上において、符号51aのクリッカブル領域が指定された状況を表している。このとき、アクティブ画像51の上に重ねて表示されている非アクティブ画像50のうち、クリッカブル領域51aに該当する画像領域が、アクティブ画像51における対応する画像領域に差し替えられて表示されている。あるいは、非アクティブ画像50の横にアクティブ画像51を非表示状態で並べて配置し、非アクティブ画像50上でクリッカブル領域が指定されると、その部分だけ非アクティブ画像51における対応する画像領域が一定分スライドした画像を表示する構成であってもよい。 FIG. 6 shows a situation where a clickable area 51a is designated on the image displayed in the image display area 41. FIG. 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, when the active images 51 are arranged side by side in a non-display state next to the inactive image 50 and a clickable area is designated on the inactive image 50, the corresponding image area in the inactive image 51 is only a certain amount. It may be configured to display a slide image.
また、クリッカブル領域51aが指定されることにより、設定ウィンドウ45aがクリッカブル領域51aの近傍にポップアップ表示される。この設定ウィンドウ45aは、クリッカブル領域51aに割り当てる機能を設定するためのユーザインタフェースである。設定ウィンドウ45aの中には、テキストボックス46aが設けられている。このテキストボックス46aに実行すべき処理の内容を示す情報が入力され、設定ウィンドウ45aの内の適用ボタン47aがクリックされることにより、クリッカブル領域51aの範囲及び機能が確定するようになっている。 Further, when the clickable area 51a is designated, the setting window 45a is popped 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.
図6の事例では、設定ウィンドウ45a内のテキストボックス46aに、インターネット上のウェブサイトのリソースを指すURLが入力されている。ここに、URLが入力されることで、クリッカブル領域51aの機能として、ハイパーリンク機能による移動先のウェブサイトが設定されるようになっている。また、図6に例示されるとおり、制作依頼画面40の右側領域にはリンク情報表示領域44が設けられている。このリンク情報表示領域44には、クリッカブル領域51aの機能として設定されたリンク先のURLを表す情報44aが表示されている。 In the example of 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.
つぎに、図7は、図6に例示される状況から更に別のクリッカブル領域51bが設定された状況を表している。このとき、アクティブ画像51の上に重ねて表示されている非アクティブ画像50のうち、クリッカブル領域51bに相当する画像領域が、アクティブ画像51における対応する画像領域に差し替えられて表示されている。 Next, FIG. 7 shows a situation where another clickable region 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.
また、クリッカブル領域51bが指定されることにより、設定ウィンドウ45bがクリッカブル領域51bの近傍にポップアップ表示される。この設定ウィンドウ45bは、クリッカブル領域51bに割り当てる機能を設定するためのユーザインタフェースである。設定ウィンドウ45bの中に設けられているフォーム使用ボタン48がクリックされると、テキストボックス46b内に「"フォーム使用"」という文字列が自動入力される。ここに、「"フォーム使用"」が入力されることで、クリッカブル領域51bの機能として、入力フォームが起動する機能が設定されるようになっている。そして、設定ウィンドウ45bの内の適用ボタン47bがクリックされることにより、クリッカブル領域51bの範囲及び機能が確定する。また、図7に例示されるとおり、リンク情報表示領域44には、クリッカブル領域51bの機能として設定された"フォーム使用"を表す情報44bが表示されている。 In addition, 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.
つぎに、図8は、図6及び図7の事例において説明した手順と同様に、更に別のクリッカブル領域51c,51dが設定された状況を表している。図8の事例では、クリッカブル領域51cの機能として、指定された電話番号を通話相手として電話かける電話アプリケーションを起動する機能が設定されている。また、クリッカブル領域51dの機能として、指定された電子メールアドレスを宛先として電子メールクライアントを起動する機能が設定されている。 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.
また、図8に例示されるとおり、リンク情報表示領域44には、クリッカブル領域51cの機能として設定された、電話の通話先の電話番号を表す情報44cが表示されている。また、リンク情報表示領域44には、クリッカブル領域51dの機能として設定された、電子メールの宛先を示す電子メールアドレスを表す情報44dが表示されている。 In addition, 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.
そして、ウェブページに付与すべき全ての機能について、クリッカブル領域の範囲及び機能をユーザが入力し終えた後、リンク情報表示領域44内に設けられた公開ボタン49がクリックされることにより、制作依頼画面40を通じてユーザから入力された各情報が、WWWサーバ11にアップロードされるようになっている。 For all the functions to be added to the web page, after the user finishes inputting the range and functions of the clickable area, the user clicks on the publish button 49 provided in the link information display area 44, thereby requesting the production. Each information input from the user through the screen 40 is uploaded to the WWW server 11.
ここでは、ウェブページの意匠デザインを表す画像情報(すなわち、非アクティブ画像及びアクティブ画像のファイル)と、当該ウェブページの基本情報とが、デザイン情報としてWWWサーバ11にアップロードされる。また、ウェブページ上の各クリッカブル領域の座標範囲を表す座標情報と、各クリッカブル領域の機能を表す情報とが、設定情報としてWWWサーバ11にアップロードされる。 Here, the image information representing the design design of the web page (that is, the files 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.
[制作依頼受付処理の説明]
WWWサーバ11が実行する制作依頼受付処理の手順について、図9のフローチャートを参照しながら説明する。この処理は、図2に例示される認証処理に続いて実行される処理である。
[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.
S200では、WWWサーバ11は、依頼元のクライアント端末20のウェブブラウザによって実行された情報入力処理においてアップロードされたデザイン情報と設定情報とを受信する。ここで受信するデザイン情報には、ウェブページの意匠デザインを表す画像情報(すなわち、非アクティブ画像及びアクティブ画像のファイル)と、当該ウェブページの基本情報とが含まれる。また、設定情報には、ウェブページ上の各クリッカブル領域の座標範囲を表す座標情報と、各クリッカブル領域の機能を表す情報とが含まれる。 In S <b> 200, 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.
S202では、WWWサーバ11は、S200で受信したデザイン情報と設定情報とを、ウェブページを識別するための識別情報に対応付けて、デザイン情報データベース12及び設定情報データベース13に保存する。具体的には、WWWサーバ11は、ウェブページの基本情報の内容等を記述したテーブルである「ページ」テーブルを作成し、その「ページ」テーブルと、非アクティブ画像及びアクティブ画像のファイルとをデザイン情報データベース12に保存する。また、WWWサーバ11は、設定情報の内容を記述したテーブルである「リンク設定」テーブルを作成し、設定情報データベース13に保存する。 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 a web page. Specifically, the WWW server 11 creates a “page” table, which is a table describing the contents of basic information of a web page, and designs the “page” table and inactive image and active image files. Save in the 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.
ここで、「ページ」テーブル及び「リンク設定」テーブルの具体的な内容について、図10を参照しながら説明する。図10に例示されるとおり、「ページ」テーブル60には、「ID」、「タイトル」、「会社名・店名」、「タグ」、「説明」、「画像ファイル名」等の項目が設けられている。このうち、「ID」の項目には、ウェブページを識別するために付与される固有の識別情報が記述される。この「ID」の項目は、複数桁の数字列で表現される。 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.
「タイトル」の項目には、ウェブページのタイトルが記述される。この「タイトル」項目は、テキスト情報で表現される。「タイトル」項目に記述される内容は、図5に例示されるテキストボックス42aに入力された内容である。「会社名・店名」の項目には、ウェブページの広告主の名称が記述される。この「会社名・店名」の項目は、テキスト情報で表現される。「会社名・店名」の項目に記述される内容は、図5に例示されるテキストボックス42bに入力された内容である。「説明」の項目には、ウェブページの要約や説明文が記述される。この「説明」の項目は、テキスト情報で表現される。「説明」の項目に記述される内容は、図5に例示されるテキストボックス42cに入力された内容である。これらの「タイトル」、「会社名・店名」及び「説明」の各項目に記述された情報は、インターネット上で検索エンジンの機能を提供する周知の検索サイトによる検索結果において、閲覧者に対して提示され得る情報である。 In the “title” item, the title of the web page is described. 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.
「タグ」の項目には、ウェブページの特徴を表す単語が記述される。この「タグ」の項目は、テキスト情報で表現される。「タグ」の項目に記述される内容は、図5に例示されるテキストボックス42dに入力された内容である。この「タグ」の項目に記述された情報は、検索エンジンによる検索の対象となるキーワードとして用いられ得る情報である。 In the “tag” item, a word representing the feature 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, file names of inactive image files and active image files used to display a web page are described. The item of “tag” is expressed by text information.
この「画像ファイル名」の項目には、デザイン情報データベース12に保存される非アクティブ画像及びアクティブ画像の各ファイルについて、共通のファイル名が記述される。例えば、共通のファイル名を「aaa.jpg」とする場合、非アクティブ画像のファイル名を「aaa.jpg」とし、アクティブ画像のファイル名を「aaa_activ.jpg」とする。このようにすることで、非アクティブ画像とアクティブ画像とを対応付けるとともに、両者を区別できるようになっている。 In the item “image file name”, a common file name is described for each file of the inactive image and the active image 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.
つぎに、図10に例示されるとおり、「リンク設定」テーブル61には、「ID」、「ページID」、「リンク種類」、「値」、「座標」、「削除フラグ」等の項目が設けられている。なお、「リンク設定」テーブル61は、ウェブページに設定された個々のクリッカブル領域ごとに作成される。つまり、1つのウェブページについて複数のクリッカブル領域が設定されている場合には、個々のクリッカブル領域ごと対応する複数の「リンク設定」テーブル61が設定情報DB13に保存される。 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.
この「リンク設定」テーブル61について、「ID」の項目には、当該クリッカブル領域を識別するために付与される固有の識別情報が記述される。この「ID」の項目は、複数桁の数字列で表現される。 In the “link setting” table 61, the “ID” item describes unique identification information given to identify the clickable area. The item “ID” is expressed by a multi-digit numeric string.
「ページID」の項目には、当該「リンク設定」テーブル61が適用されるウェブページの識別情報が記述される。具体的には、この「ページID」の項目に、「ページ」テーブル60の「ID」の項目と同一の識別情報が記述されることで、その「ページ」テーブル60と「リンク設定」テーブル61とが対応付けされるようになっている。これにより、当該「リンク設定」テーブル61で表されるクリッカブル領域の機能が、対応付けされた「ページ」テーブル60に関するウェブページに適用される。 In the item “page ID”, 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, so that the “page” table 60 and the “link setting” table 61 are described. 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.
「リンク種類」の項目には、ウェブページ上でクリッカブル領域がクリックされたときに実行すべき機能の種類を表す情報が記述される。この「リンク種類」の項目は、機能の種類ごとに予め割り当てられている識別番号の数字で表現される。具体的には、ハイパーリンク、入力フォーム起動、電話アプリケーション起動、電子メールクライアント起動等といった機能ごとに、1,2,3…等の識別番号が割り当てられている。そして、S200で受信した設定情報に含まれるクリッカブル領域の機能を表す情報の内容に応じて、対応する機能の識別情報が「リンク種類」の項目に記述される。 The item “link type” describes 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”.
「値」の項目には、クリッカブル領域に対応するリンク先を表す情報が記述される。この「値」の項目は、テキスト情報で表現される。「値」の項目に記述される内容は、クリッカブル領域に割り当てられた機能の接続先となるURL、電話番号、電子メールアドレス等であり、図6,7等に例示されるテキストボックス46に入力された内容である。 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 the function assigned to the clickable area, and are input in the text box 46 illustrated in FIGS. It is the contents that were done.
「座標」の項目には、非アクティブ画像及びアクティブ画像上におけるクリッカブル領域の座標範囲を表す情報が記述される。この「値」の項目は、テキスト情報で表現される。例えば、クリッカブル領域が矩形として設定されている場合、その矩形の画像領域の左上の頂点の座標と、右下の頂点の座標とを表す座標値が記述される。 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.
「削除フラグ」の項目には、クリッカブル領域を無効にするか否かを指定する情報が記述される。この「値」の項目は、0又は1の数字で表現される。具体的には、この「削除フラグ」の項目に1の数字を記述することで、当該クリッカブル領域を無いものとしてウェブページを表示するように設定できる。 In the “deletion flag” item, information for designating 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.
図9のフローチャートの説明に戻る。S204では、WWWサーバ11は、S202で保存したデザイン情報及び設定情報に基づいて生成され得るウェブページを、WWWでの公開対象として登録する処理を実行する。具体的には、WWWサーバ11は、検索エンジンの機能を提供する周知の検索サイトにアクセスして、WWWサーバ11に対して当該ウェブページを指し示す情報を含むURLを検索の対象として登録する。これにより、閲覧者は、検索サイトを通じて当該ウェブサイトを検索することが可能になる。 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.
また、ウェブページを検索サイトに登録する際、WWWサーバ11は、当該ウェブページに関する「ページ」テーブル60に記述されている「タイトル」、「会社名・店名」、「説明」、「タグ」等の各項目の内容を当該ウェブページのURLと共に登録してもよい。これにより、「タイトル」、「会社名・店名」、「説明」等の各項目の内容を検索エンジンによる検索結果の内容として閲覧者に対して提示することができる。また、「タグ」の各項目に記述された単語を、当該ウェブページを検索するためのキーワードに設定することができる。 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.
S206では、WWWサーバ11は、ウェブページの公開が完了したことを表す情報を、依頼元のクライアント端末20のウェブブラウザに送信する。S206の後、WWWサーバ11は制作依頼受付処理を終了する。 In S <b> 206, the WWW server 11 transmits information indicating that the publication of the web page is completed to the web browser of the requesting client terminal 20. After S206, the WWW server 11 ends the production request reception process.
[閲覧要求受付処理の説明]
WWWサーバ11が実行する閲覧要求受付処理の手順について、図11のフローチャートを参照しながら説明する。この処理は、ウェブページの閲覧を要求するクライアント端末30で動作するウェブブラウザからのアクセスを受付けたときに実行される。
[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.
S300では、WWWサーバ11は、クライアント端末30からの閲覧要求に該当するウェブページの基となるデザイン情報及び設定情報を、デザイン情報データベース12及び設定情報データベース13から読み込む。ここで読み込まれる情報には、当該ウェブページに対応付けられている各テーブル60,61の内容と、当該ウェブページに対応付けられている非アクティブ画像及びアクティブ画像のファイルとが含まれる。 In S <b> 300, the WWW server 11 reads design information and setting information as a basis of a web page corresponding to a 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.
S302では、WWWサーバ11は、S300で読み込んだ各情報に基づいて、ウェブクライアント側でウェブページを自動生成して表示するように構成されたスクリプトを組み込んだHTML文書を作成する。このウェブページ生成用のスクリプトは、例えばJavaScript等のスクリプト言語の仕組みを用いてWWWサーバ11により作成される。 In S302, the WWW server 11 creates an HTML document including a script configured to automatically generate and display a web page on the web client side based on the information read in S300. The web page generation script is created by the WWW server 11 using a script language mechanism such as JavaScript.
具体的には、WWWサーバ11は、次のような仕組みを有するウェブページを自動生成するスクリプトを組み込んだHTML文書を作成する。そのウェブページは、非アクティブ画像をウェブブラウザの表示画面に前面に表示させるように構成される。その表示された非アクティブ画像のクリッカブル領域に対して、ポインティングデバイスによる所定の操作が入力された場合、次のように振る舞うように構成される。すなわち、非アクティブ画像の当該クリッカブル領域に該当する画像領域を、アクティブ画像における当該クリッカブル領域に該当する画像領域に差し替えてウェブブラウザの表示画面に前面に表示させる。 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.
なお、クリッカブル領域の座標範囲については、「リンク設定」テーブル61の「座標」の項目で表される内容のとおりにウェブページが生成されるように、WWWサーバ11がスクリプトを組む。また、ここでいう所定の操作とは、例えば、クリッカブル領域内にマウスのポインタを置く、いわゆるマウスオーバーの操作が例示される。一方、クリッカブル領域に対する所定の操作が解除された場合、非アクティブ画像の表示に戻すように構成されている。 For the clickable area coordinate range, the WWW server 11 forms a script so that a web page is generated in accordance with 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.
さらに、このウェブページは、クリッカブル領域に対してクリック等の実行操作が入力された場合、当該クリッカブル領域に割り当てられた機能をウェブブラウザに実行させるように構成される。なお、クリッカブル領域に実行操作がなされたときに実行される機能については、当該クリッカブル領域の「リンク設定」テーブル61の「リンク種類」の項目で表される内容のとおりにウェブページが生成されるように、WWWサーバ11がスクリプトを組む。また、クリッカブル領域に実行操作がなされたときに起動するアプリケーションに渡されるパラメータは、当該クリッカブル領域の「リンク設定」テーブル61の「値」の項目で表される内容のとおりにウェブページが生成されるように、WWWサーバ11がスクリプトを組む。 Further, the web page is configured to cause the 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.
S304では、WWWサーバ11は、S302で作成したHTML文書と、ウェブページを構成する画像ファイル(すなわち、非アクティブ画像及びアクティブ画像)とを含む閲覧用データを、閲覧要求元のクライアント端末30に送信する。S304の後、WWWサーバ11は閲覧要求受付処理を終了する。 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.
[ウェブページの表示例]
WWWサーバ11から閲覧用データを受信したクライアント端末30では、ウェブブラウザによりウェブページ生成用のスクリプトが実行されることで、ウェブページが自動的に生成され、生成されたウェブページがウェブブラウザの表示画面上に表示される。そのウェブページの表示例について、図12を参照しながら説明する。
[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.
図12の事例では、図3〜図8の事例において設定された内容に対応するウェブページが、クライアント端末30のウェブブラウザの表示画面に表示されている状況を想定している。図12の(1)の段階では、非アクティブ画像だけの状態のウェブページ70が表示されている。また、ウェブブラウザの表示画面上には、マウス等のポインティングデバイスで操作されるポインタ71も表示されている。 In the example of FIG. 12, it is assumed that a web page corresponding to the content set in the examples 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.
つぎに、図12の(2)段階では、ポインタ71がウェブページ70の左上部に設定されているクリッカブル領域72内に置かれ、マウスオーバーの状態になっている状況を想定している。このとき、クリッカブル領域72には網掛けによる強調表示が施され、このクリッカブル領域が操作の対象になっていることが閲覧者に対して明示される。この強調表示は、非アクティブ画像のクリッカブル領域72に該当する画像領域が、アクティブ画像のクリッカブル領域72に該当する画像領域に置き換えられて表示されることにより実現する。 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 is in a mouse-over state. 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.
クリッカブル領域72には、ハイパーリンク機能による移動先のウェブサイトが設定されていること前提とする。したがって、図12の(2)の段階から、ポインタ71によりクリッカブル領域72がクリックされた場合、図12の(3)に例示されるとおり、ウェブブラウザは、設定されているリンク先のウェブサイトにアクセスし、そのウェブサイトのコンテンツを表示画面に表示する。 It is assumed 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.
[効果]
実施形態のウェブページ制作支援システム1によれば、以下の効果を奏する。
ウェブページの制作を依頼するクライアント端末20のウェブブラウザから、デザイン情報と設定情報とをWWWサーバ11にアップロードするだけで、クリッカブルな機能を有するウェブページをWWWに公開することができる。したがって、ページ制作者がコーディング作業等に必要な専門的な知識を持っていなくても、ページ制作者の意図に沿った独自性のあるウェブページの制作を支援することができる。
[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.
また、ウェブページが自動的にWWWに公開されることで、閲覧者が容易に検索をすることができるようになるので、ウェブページが閲覧される機会を増すことができる。また、ページ制作者の意図に沿って、例えば、ハイパーリンク、入力フォーム、電話アプリケーション、及び電子メールクライアント等の様々な機能を有するウェブページの制作を支援することができる。 In addition, since the web page is automatically published on the WWW, the viewer can easily perform a search, so that the chance 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.
[特許請求の範囲に記載の構成との対応]
実施形態の各構成と、特許請求の範囲に記載の構成との対応は次のとおりである。
WWWサーバ11のPHPスクリプトにより実行されるS104及びS200の処理が、受領部としての処理に相当する。WWWサーバ11のPHPスクリプトにより実行されるS202の処理が、保存部としての処理に相当する。WWWサーバ11のPHPスクリプトにより実行されるS204の処理が、公開処理部としての処理に相当する。WWWサーバ11のPHPスクリプトにより実行されるS302の処理が、プログラム作成部としての処理に相当する。WWWサーバ11のPHPスクリプトにより実行されるS304の処理が、送信部としての処理に相当する。
[Correspondence with configuration described in claims]
The correspondence between each configuration of the embodiment and the configuration described in the claims is as follows.
The processing of S104 and S200 executed by the PHP script of the WWW server 11 corresponds to processing as a receiving unit. The process of S202 executed by the PHP script of the WWW server 11 corresponds to a process as a storage unit. The processing of S204 executed by the PHP script of the WWW server 11 corresponds to processing as a public processing unit. The processing of S302 executed by the PHP script of the WWW server 11 corresponds to processing as a program creation unit. The process of S304 executed by the PHP script of the WWW server 11 corresponds to the process as the transmission unit.
[変形例]
上記各実施形態における1つの構成要素が有する機能を複数の構成要素に分担させたり、複数の構成要素が有する機能を1つの構成要素に発揮させたりしてもよい。また、上記各実施形態の構成の一部を省略してもよい。また、上記各実施形態の構成の少なくとも一部を、他の上記実施形態の構成に対して付加、置換等してもよい。なお、特許請求の範囲に記載の文言から特定される技術思想に含まれるあらゆる態様が、本開示の実施形態である。
[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.
例えば、上述の実施形態では、非アクティブ画像とアクティブ画像との2種類の画像をアップロードしてウェブページを制作する事例について説明した。これに限らず、更にウェブページの背景として表示される画像がアップロードされることにより、ウェブページの表示に適用可能な構成であってもよい。その場合、ウェブブラウザには、背景画像の前面側に重ねて非アクティブ画像が表示されるように構成することが考えられる。 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 uploading 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.
上述の実施形態では、ウェブページの制作を依頼するウェブクライアントに制作依頼画面を表示させるクライアントサイド・アプリケーションを提供することによって、ウェブサーバの基となるデザイン情報や設定情報を入力させる構成について説明した。これに限らず、WWWサーバ11側で動作するサーバサイド・アプリケーションに作成される制作依頼画面をウェブクライアントに提供し、その制作依頼画面に沿ってウェブクライアントにデザイン情報や設定情報を入力させる構成であってもよい。 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.
上述の実施形態の構成に加え、更に、アップロードされる画像情報に対してコンテンツ幅を設定可能にし、設定されたコンテンツ幅を反映した態様にてウェブページが表示されるように構成してもよい。その具体的な手順について、図13及び図14を参照しながら説明する。なお、以下の図13及び図14の説明において、特に言及しない構成については、上述の実施形態の構成に準ずるものとする。 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.
ここでいうコンテンツ幅とは、制作側のクライアント端末20からアップロードされる画像情報の全横幅のうち、ウェブページを閲覧するウェブブラウザの表示幅に関わらず、表示を必須とする横幅方向の範囲である。以下、コンテンツ幅を定義する情報をコンテンツ幅情報という。コンテンツ幅情報は、例えば、画像の横幅方向の画素数の範囲等で表現される。 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.
まず、ウェブページの制作を依頼するクライアント端末20のウェブブラウザによって行われる情報入力処理において、画像情報の入力後、ウェブブラウザの表示画面上に表示されている制作依頼画面40が、図13の(1)に例示されるような内容に遷移する。図13の(1)の制作依頼画面40に移行するタイミングとしては、例えば、図3に例示される制作依頼画面40において画像ファイルや基本情報が入力された直後とすることが挙げられる。 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.
図13の(1)に例示される制作依頼画面40には、先の段階で入力された画像情報を表示するための領域や、コンテンツ幅を設定するためのGUIが設けられている。図13の(1)に例示されるとおり、制作依頼画面40に設けられている画像表示領域41には、入力された画像情報全体を表す画像52が表示されている。 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.
また、制作依頼画面40には、スライダ81が設けられている。このスライダ81は、画像表示領域41に表示されている画像52に対してコンテンツ幅を指定するためのGUIであり、ポインティングデバイスによりつまみを左右に移動させることで、画像52上でコンテンツ幅の伸縮を操作できるようになっている。また、画像52上には、スライダ81のつまみの位置に連動して左右に動いてコンテンツ幅を表示する表示線82が表示されている。 The production request screen 40 is provided with a slider 81. The slider 81 is a GUI for designating the content width with respect to the image 52 displayed in the image display area 41, and the content width is expanded or contracted on the image 52 by moving the knob to the left or right using a pointing device. Can be operated. 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.
また、制作依頼画面40には、設定ボタン83が設けられている。設定ボタン83がクリックされると、スライダ81で指定されているコンテンツ幅が確定し、制作依頼画面40は次の項目の入力受付状態へと移行する。その後、クライアント端末20のウェブブラウザによって行われる情報入力処理が完了すると、制作依頼画面40を通じてユーザから入力された各情報(すなわち、デザイン情報、設定情報、及びコンテンツ幅情報を含む)が、WWWサーバ11にアップロードされる。 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.
一方、WWWサーバ11は、制作依頼受付処理(図9参照)のS200において、依頼元のクライアント端末20からアップロードされたデザイン情報と、設定情報と、コンテンツ幅情報とを受信する。そして、S202において、WWWサーバ11は、S200で受信したデザイン情報と設定情報とコンテンツ幅情報とを、ウェブページを識別するための識別情報に対応付けて、デザイン情報データベース12及び設定情報データベース13に保存する。 On the other hand, the WWW server 11 receives design information, setting information, and 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.
このうち、コンテンツ幅情報については、例えば、図13の(2)に例示されるとおり、デザイン情報データベース12に保存される「ページ」テーブル60に「コンテンツ幅」の項目を設けて記録することが考えられる。「ページ」テーブル60における「コンテンツ幅」の項目は、画像の幅方向の画素数の範囲を表す情報が記述される。この「コンテンツ幅」の項目は、テキスト情報で表現される。 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.
つぎに、WWWサーバ11が、コンテンツ幅に関する情報を含む閲覧用データをウェブクライアントに送信し、ウェブクライアントにおいてコンテンツ幅が制御された態様にてウェブページが表示される一連の手順について、図14を参照しながら説明する。 Next, FIG. 14 shows a series of procedures in which the WWW server 11 transmits browsing data including information related to the content width to the web client, and the web page is displayed in a manner in which the content width is controlled in the web client. The description will be given with reference.
WWWサーバ11は、制作依頼受付処理(図11参照)のS300において、閲覧要求に該当するウェブページの基となるデザイン情報、設定情報、及びコンテンツ幅情報を、デザイン情報データベース12及び設定情報データベース13から読み込む。次のS302では、WWWサーバ11は、S300で読み込んだ各情報に基づいて、ウェブクライアント側でウェブページを自動生成して表示するように構成されたスクリプトを組み込んだHTML文書を作成する。さらに、WWWサーバ11は、図14の(1)に例示されるとおり、コンテンツ幅を定義するCSSファイルを生成する。ここでいうCSSとは、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 for Cascading Style Sheets, and is a well-known programming language for designating web page styles.
ここで生成されるCSSファイルには、次のようにウェブページのレイアウトを定義する情報が含まれる。すなわち、ウェブブラウザ上に画像情報を表示する際、コンテンツ幅情報で定義されたコンテンツ幅に該当する領域の横幅全体をウェブブラウザの横幅方向の表示対象に含む。かつ、当該画像情報のうちコンテンツ幅以外の横幅方向の領域であってウェブブラウザの表示領域の横幅(すなわち表示幅)を超える部分については、ウェブブラウザの横幅方向の表示対象から除外して非表示とする。 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
そして、WWWサーバ11は、図14の(2)に例示されるように、コンテンツ幅を定義するCSSファイルと、HTML文書と、画像ファイルとを含む閲覧用データを、閲覧要求元のクライアント端末30に送信する。 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.
一方、WWWサーバ11から閲覧用データを受信したクライアント端末30では、ウェブブラウザによりウェブページが生成され、生成されたウェブページがウェブブラウザの表示画面上に表示される。図14の(3)に例示されるように、クライアント端末30のウェブブラウザは、コンテンツ幅を定義するCSSファイルに基づいて、ウェブページの表示幅を制御する。図14の(3)の表示例において、符号90はウェブブラウザにおける画像の表示範囲を表している。 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.
図14の(3)に例示されるとおり、ウェブブラウザの表示範囲90には、画像ファイルで表される画像情報のうち、CSSファイルにおいて定義されているコンテンツ幅全体が少なくとも含まれる。その際、コンテンツ幅に該当する画像領域は、ウェブブラウザの表示範囲90の横幅方向の中央に配置される。また、当該画像情報のうち、コンテンツ幅以外の左右両外側の背景部分については、ウェブブラウザの表示幅に相当する範囲までが表示対象に含まれ、ウェブブラウザの表示幅を超える背景部分は、トリミングされて非表示となっている。 As illustrated in FIG. 14 (3), 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.
このように、CSSファイルにより定義されるコンテンツ幅に基づいてウェブページの表示幅を制御することで、ウェブページにおける主要な情報をもれなく表示させつつ、ウェブページの横幅をウェブブラウザの表示幅に一致させることができる。 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.
なお、CSSファイルにおいて定義されているコンテンツ幅が、ウェブブラウザの表示幅より大きい場合、ウェブブラウザに実装されているスクロールバー等のGUIにより表示領域を移動可能にすることが考えられる。具体的には、コンテンツ幅全体のうち、ウェブブラウザの表示幅に収まる部分領域だけを表示し、スクロールバーにより必要に応じて表示領域を横幅方向に移動させることにより、少なくともコンテンツ幅全体に相当する領域を閲覧可能にする。 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.
上述したウェブページ制作支援システム1を構成要件とするシステム、ウェブページ制作支援システム1としてコンピュータを機能させるためのプログラム、このプログラムを記録した半導体メモリ等の非遷移的実態的記録媒体、ウェブページ制作支援方法等の種々の形態で本開示を実現することもできる。 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.
1…ウェブページ制作支援システム、11…WWWサーバ、12…デザイン情報データベース、13…設定情報データベース、20…クライアント端末(制作側)、30…クライアント端末(閲覧側)、100…インターネット。 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.
Claims (6)
前記受領部によって受領されたデザイン情報と設定情報とを、当該ウェブページに関する識別情報に対応付けて、所定の記憶装置に保存するように構成された保存部と、
前記保存部によって保存されたデザイン情報及び設定情報に基づいて生成され得るウェブページを閲覧するウェブクライアント側で、当該ウェブページに対応するデザイン情報及び設定情報に応じたウェブページを自動的に生成して表示するための生成プログラムを作成するように構成されたプログラム作成部と、
前記ウェブページに対するウェブクライアントからの閲覧要求に応じて、当該閲覧要求に該当のウェブページに対応するデザイン情報と、当該ウェブページを生成するための前記生成プログラムとを含む閲覧用データを、閲覧要求元のウェブクライアントへ送信するように構成された送信部とを備え、
前記プログラム作成部は、前記生成プログラムとして、ウェブブラウザ上に前記画像情報を表示し、その表示された画像情報において、前記設定情報の座標情報で示されるクリッカブル領域に対して所定の操作が行われたときに、前記ウェブブラウザにクリッカブル領域として認識させる機能を有するウェブページを生成する生成プログラムを作成するように構成されている、
ウェブページ制作支援システム。 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.
前記プログラム作成部は、前記生成プログラムとして、ウェブブラウザ上に非アクティブ画像情報を表示し、その表示された非アクティブ画像情報において、前記設定情報の座標情報で示されるクリッカブル領域に対して所定の操作が行われたときに、前記非アクティブ画像情報内の当該クリッカブル領域に該当する画像領域を、対応するアクティブ画像情報における当該クリッカブル領域に該当する画像領域に差し替えて表示させる機能を有するウェブページを生成する生成プログラムを作成するように構成されている、
請求項1に記載のウェブページ制作支援システム。 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 the 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.
請求項1又は請求項2に記載のウェブページ制作支援システム。 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.
前記プログラム作成部は、前記生成プログラムとして、表示された前記画像情報において、前記設定情報の座標情報で示されるクリッカブル領域に対する実行操作が入力されたときに、前記設定情報における当該クリッカブル領域の機能情報で示される機能を実行させる機能を更に有するウェブページを生成する生成プログラムを作成するように構成されている、
請求項1ないし請求項3の何れか1項に記載のウェブページ制作支援システム。 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.
請求項4に記載のウェブページ制作支援システム。 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.
前記保存部は、更に、前記受領部によって受領されたコンテンツ幅情報を当該ウェブページに関する識別情報に対応付けて前記記憶装置に保存するように構成されており、
前記プログラム作成部は、前記生成プログラムとして、ウェブブラウザ上に前記画像情報を表示する際、当該画像情報に対応するコンテンツ幅情報で表される領域であるコンテンツ領域の横幅全体を前記ウェブブラウザの横幅方向の表示対象に含み、かつ、当該画像情報のうち前記コンテンツ領域以外の横幅方向の領域であって前記ウェブブラウザの表示領域の横幅を超える部分については、前記ウェブブラウザの横幅方向の表示対象から除外する機能を有するウェブページを生成する生成プログラムを作成するように構成されている、
請求項1ないし請求項5に記載のウェブページ制作支援システム。 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.
Priority Applications (2)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
JP2017031298A JP6235744B1 (en) | 2017-02-22 | 2017-02-22 | Web page creation support system |
PCT/JP2017/018036 WO2018154801A1 (en) | 2017-02-22 | 2017-05-12 | Web page production support system |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
JP2017031298A JP6235744B1 (en) | 2017-02-22 | 2017-02-22 | Web page creation support system |
Publications (2)
Publication Number | Publication Date |
---|---|
JP6235744B1 true JP6235744B1 (en) | 2017-11-22 |
JP2018136786A JP2018136786A (en) | 2018-08-30 |
Family
ID=60417595
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
JP2017031298A Active JP6235744B1 (en) | 2017-02-22 | 2017-02-22 | Web page creation support system |
Country Status (2)
Country | Link |
---|---|
JP (1) | JP6235744B1 (en) |
WO (1) | WO2018154801A1 (en) |
Families Citing this family (1)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
JP7141589B1 (en) | 2022-05-13 | 2022-09-26 | 株式会社ニアメロ | Terminal device, method and program |
Citations (5)
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 |
JP2007108994A (en) * | 2005-10-13 | 2007-04-26 | Nippon Digital Kenkyusho:Kk | Layout editing device and layout editing program |
JP2010072764A (en) * | 2008-09-16 | 2010-04-02 | Digitalmax Co Ltd | Program creation device |
-
2017
- 2017-02-22 JP JP2017031298A patent/JP6235744B1/en active Active
- 2017-05-12 WO PCT/JP2017/018036 patent/WO2018154801A1/en active Application Filing
Patent Citations (5)
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 |
JP2007108994A (en) * | 2005-10-13 | 2007-04-26 | Nippon Digital Kenkyusho:Kk | Layout editing device and layout editing program |
JP2010072764A (en) * | 2008-09-16 | 2010-04-02 | Digitalmax Co Ltd | Program creation device |
Also Published As
Publication number | Publication date |
---|---|
JP2018136786A (en) | 2018-08-30 |
WO2018154801A1 (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 | |
US10853319B2 (en) | System and method for display of document comparisons on a remote device | |
KR102340228B1 (en) | Message service providing method for message service linking search service and message server and user device for performing the method | |
US11599584B2 (en) | Method and system for processing information in social network system | |
JP5199939B2 (en) | Image search apparatus, image search method and program | |
US11386184B2 (en) | Information processing apparatus, search server, web server, and non-transitory computer readable storage medium | |
JP4430598B2 (en) | Information sharing system and information sharing method | |
US20140108919A1 (en) | Information providing device, information providing method, information providing program, information display program, and computer-readable recording medium storing information providing 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 | |
JP5185793B2 (en) | Map search system | |
KR101350525B1 (en) | Method and apparatus for using tab corresponding to query to provide additional information | |
JP6235744B1 (en) | Web page creation support system | |
JP5134639B2 (en) | Client apparatus, display method, program, information processing apparatus, and information processing system | |
JP2003131988A (en) | Home page update device, home page update method, home page update program recording medium and home page update program | |
CA2741633A1 (en) | A universal content referencing, packaging, distribution system, and a tool for customizing web content | |
JP2009266188A (en) | Display control method and program | |
JP2007025753A (en) | Weblog server and weblog service providing system | |
KR20070110953A (en) | System for personalized providing portal service | |
JPWO2006064573A1 (en) | WEB information providing apparatus, method thereof, and program | |
JP2020042660A (en) | Electronic file management device, electronic file management program and electronic file management system | |
JP7501066B2 (en) | Information processing device and program | |
JP2013037513A (en) | Information presentation device, information display system, information presentation method, and computer program | |
US11120207B2 (en) | Information processing apparatus, information processing method, and storage medium |
Legal Events
Date | Code | Title | Description |
---|---|---|---|
TRDD | Decision of grant or rejection written | ||
A01 | Written decision to grant a patent or to grant a registration (utility model) |
Free format text: JAPANESE INTERMEDIATE CODE: A01 Effective date: 20171003 |
|
A61 | First payment of annual fees (during grant procedure) |
Free format text: JAPANESE INTERMEDIATE CODE: A61 Effective date: 20171026 |
|
R150 | Certificate of patent or registration of utility model |
Ref document number: 6235744 Country of ref document: JP Free format text: JAPANESE INTERMEDIATE CODE: R150 |
|
S533 | Written request for registration of change of name |
Free format text: JAPANESE INTERMEDIATE CODE: R313533 |
|
R350 | Written notification of registration of transfer |
Free format text: JAPANESE INTERMEDIATE CODE: R350 |
|
R250 | Receipt of annual fees |
Free format text: JAPANESE INTERMEDIATE CODE: R250 |
|
R250 | Receipt of annual fees |
Free format text: JAPANESE INTERMEDIATE CODE: R250 |
|
R250 | Receipt of annual fees |
Free format text: JAPANESE INTERMEDIATE CODE: R250 |