JP2008203908A - Additional information writing method to web page - Google Patents

Abstract

<P>PROBLEM TO BE SOLVED: To provide a system and method for performing writing as a memorandum to a printed matter with a pen, similarly performing writing to a Web page during browsing, and distributing written contents as well as the Web page. <P>SOLUTION: By transmitting URL of the browsed Web page to a program working on a Web server, the Web page including a GUI (Graphical User Interface) for writing additional information is generated, and writing is performed from a Web browser. The Web server has an additional information database, and the additional information written on the Web browser and the URL of the Web page are stored together in the database. Thus, the additional information to the browsed URl can be retrieved, and the additional information having been written together with the Web page can be displayed on the Web browser. <P>COPYRIGHT: (C)2008,JPO&INPIT

Description

  The present invention relates to a system capable of writing additional information such as lines and rectangles, graphics, images and characters on a Web page displayed by a Web browser, and delivering the written additional information together with the Web page. It is.

In recent years, the amount of Web pages has been increasing explosively, and various information can be acquired by a Web browser.
Web pages are not only simple text information by HTML (Hyper Text Markup Language), but also change the style by decorating and changing colors on important parts, and inserting pictures using image files etc. Can be created.
Recently, a Web page that is easy to use and has high usability by a method called AJAX (Asynchronous JavaScript + XML) using JavaScript (registered trademark) or XML (Extensible Markup Language), and a server that distributes Web pages There are an increasing number of Web sites that arrange programs and dynamically generate Web pages according to information input on Web browsers.

  There are many ways to send information using these technologies. Especially in a system called blog, even if you don't have technical knowledge about web pages, you can easily create web pages and send information. A user who can become a caller and who browses a web page writes a comment to the caller of the web page, or follows links to other web pages that are displayed using a mechanism called trackback The browsing user can further easily acquire related information. And there are many opportunities for users to send new comments and trackbacks as additional information based on information obtained.

In addition to inserting characters and image files, there are languages that express graphics on Web pages by further expanding HTML and inputting coordinate information of graphics. The information that can be distributed as Web pages by using them has become richer.
Typical graphics drawing languages include VML (Vector Markup Language) proposed by Microsoft, Hewlett Packard, Macromedia, and Visio, and SVG (Scalable Vector Graphics) proposed by Adobe Systems.
In addition, there exists the following patent document 1 as a well-known technical document relevant to this invention.

JP 2002-222113 A

The work of writing on a paper such as a book or map, which is a printed material, by handwriting with a pen and adding additional information to the original printed material is generally performed.
If you want to do the same thing for a web page, print it on paper using the web browser function
It has been common to add additional information by writing with a pen or the like on the printed one.
However, if you print a Web page and use it as a paper medium, you cannot use the Web distribution function that is the advantage of the Web. If you want to distribute additional information written on paper to other people, mail the written paper. It becomes necessary to use another distribution means such as fax.

  An object of the present invention is to provide a method and system capable of directly writing additional information on a Web page and distributing the written additional information on the Web.

In order to achieve the above object, an information writing system for a Web page according to the present invention includes an additional information Web server provided with an additional information database for holding the written additional information, and additional information from the additional information Web server. It consists of multiple client terminal devices that receive
The additional information Web server includes a storage unit that newly stores additional information in the additional information database, an update unit that updates the additional information that has already been stored, and a Web browser installed in any of the client terminals. In response to the request, search means for reading additional information corresponding to the URL (Web page address information) of the Web page included in the request from the additional information database, and acquiring the Web page of the URL included in the request Means for generating a new Web page to which a new writing means or changing means for additional information is added, and a transmission means for transmitting the generated Web page and additional information of the search result to the requesting Web browser,
The Web browser of the client terminal receives the URL of the Web page to be browsed to the additional information Web server and the Web page generated by the additional information Web server. A means for displaying the added Web page and displaying a new writing means or a changing means for additional information in the Web page, and the newly written additional information or changed additional information are displayed in the additional information Web. Transmission means for transmitting to a server.

The method for writing information to a Web page according to the present invention is a method for writing to a Web page that writes additional information from the Web browser of the client terminal device to the Web page currently being browsed and stores it in the additional information database of the additional information Web server Because
The Web browser of the client terminal device transmitting the URL of the Web page to be browsed to the additional information Web server;
The additional information Web server reads the additional information corresponding to the URL of the Web page included in the request from the Web browser from the additional information database, acquires the Web page of the URL included in the request, and adds the additional information. A step of newly generating a Web page to which the new writing means or changing means is added, and a step of transmitting the generated Web page and additional information of the search result to the requesting Web browser,
The Web browser of the client terminal device displays the Web page received from the additional information Web server on the display screen, accepts new writing of additional information data or changes in written additional information data, and is newly written Transmitting the additional information data or the additional information data that has been changed to the additional information Web server,
The additional information Web server includes a step of updating the additional information database based on additional information data received from the Web browser.

The present invention has the following effects.
(1) It is possible to write on a Web page, and to add additional information to the original Web page such as underlining important parts on the Web page or writing characters as a memo.
(2) The written Web page with additional information can be distributed to other users.
(3) Due to the effects of (2), the written additional information can be shared with other users, and communication can be performed by distributing the additional information to each other.

Hereinafter, an embodiment of a Web page writing system to which the present invention is applied will be described.
FIG. 1 is a system configuration diagram showing an example of an embodiment of the present invention.
The Web page writing system according to the present embodiment includes a page generation program 7, an additional information processing program 8, an additional information Web server 6 including an additional information database 9, and a plurality of client terminals used by users who browse Web pages. 1a, 1b, 1n, a plurality of Web servers 10a, 10b, 10n to be browsed, and a plurality of Web pages 11a, 11b, 11n distributed by the Web servers 10a, 10b, 10n. , 1b, 1n, additional information Web server 6, and Web servers 10a, 10b, 10n are connected to a network 5 such as the Internet or an intranet.
When the additional information Web server 6 also distributes Web pages, the additional information Web server 6 can also be regarded as a part of the Web servers 10a, 10b, and 10n.

Each of the client terminals 1a, 1b, and 1n is equipped with a Web browser 2, and the URLs of the Web pages 11a, 11b, and 11n included in the Web servers 10a, 10b, and 10n connected to the network 5 are used as the Web browser 2. Can be browsed by the Web browser 2 at the URL of the input URL.
The JavaScript program 4 is a script program included in a Web page generated by the page generation program 7 provided in the additional information Web server 6, and is included in a request transmitted from the Web browser 2 to the page generation program 7. It is generated by including the URL of the Web page to browse.

The page generation program 7 is a program that runs on the additional information Web server 6 and uses a request format called CGI (Common Gateway Interface) when transmitting the URL of a Web page to be viewed from the Web browser 2. The best mode is to send it as a query string.
For example, the URL of the page generation program 7 is “http: // host1 / generate”, the URL of the Web page to be browsed is “http://www.host2.com/”, and the parameter name of the query string is “URL” In order to make a request to the page generation program 7, the URL “http: // host1 / generate URL = http: //www.host2.com” may be input from the Web browser 2.
By inputting this URL, the page generation program 7 generates a Web page including the JavaScript program 4 for the Web page “http://www.host2.com/” to be browsed.
Usually, the URL for the page generation program 7 as described above is not directly input by the user, but a Web page for inputting only the URL of the Web page to be browsed is created, and the program is automatically used by the JavaScript program. It is desirable to make it a mechanism to generate. Further, here, for the sake of explanation, a URL that has not been encoded is shown, but in reality, a process called URL encoding needs to be performed on a query character string.

FIG. 2 is a diagram showing the configuration of the Web page generated by the page generation program 7. The Web page 20 in FIG. 2A is the Web when the URL of the Web page to be browsed is input to the Web browser 2. 2 shows the configuration of the page, and the Web page 21 in FIG. 2B shows the configuration of the Web page generated by making a request including the URL of the Web page 20 to the page generation program 7.
In addition to the contents of the web page 20, the web script 21 is added with the JavaScript program 4, and the image file specified by the relative URL in the web page 20 operates normally. If there is no relative path reference tag (<BASE> tag), a new URL is inserted to solve the relative URL problem, and the web page 21 is moved to another web page while browsing. In this case, the link tag (<A> tag) included in the Web page 20 is changed to the URL for the page generation program 7 so that the Web page generated by the page generation program 7 can be browsed again. The original link destination is converted into a format included in the query character string.

Accordingly, in the case of the above example, the <BASE> tag shown in FIG. 2B is “<BASE HREF = http: //www.host2.com/>”, and “<A An <A> tag having a link “HREF = http: //www.host2.com/page1.html>” in FIG. 2B is “<A HREF = http: // host1 / generateURL = http: //www.host2.com/page1.html> ”. (In practice, URL encoding is also performed.)
The link in the <A> tag can be changed to a link to the page generation program 7 by performing the above-described processing. However, when the link is made by other means, in particular, the Flash embedded in the Web page or When a special object such as Java Applet is used, the link destination cannot be changed. Therefore, the page generation program 7 uses <OBJECT> tag or <APPLET> tag used when embedding the special object. Is included in the Web page, it is necessary to perform processing such as issuing a message such as “Some link destinations cannot be written”.

  The JavaScript program 4 is a program for handling the additional information written to the Web page, receives the additional information already written on the Web page from the additional information processing program 7 and draws it, and newly adds the additional information. Provide a GUI (Graphical User Interface) that allows the user to select the type of additional information when writing the data, provide a GUI for changing the already written additional information, and add newly drawn additional information It is a program that performs processing for transmitting to the information processing program 7 and processing for transmitting difference information when existing additional information is changed to the additional information processing program 7.

FIG. 3 is a diagram illustrating an example of displaying a Web page on an actual Web browser.
3A shows a case where a Web page to be browsed is directly input as a URL, which corresponds to the page configuration of FIG. 2A. FIG. 3B shows a case where the JavaScript program 4 is added by the page generation program 7. , The GUI 30 for inputting writing and the additional information 31 already written are displayed, which corresponds to the page configuration of FIG.

The additional information database 9 in the additional information Web server 6 includes already written additional information. As shown in FIG. 4, the additional information ID 40 for identifying the additional information, the URL 41 of the Web page including the additional information, Additional information line thickness 42, additional information line color 43, additional information fill color 44, additional information type 45, additional information coordinate value 46, and additional information image URL 47 are registered as essential data. The extended information 48 is also added according to the application. The additional information type 45 stores data for identifying the type of additional information such as “point”, “line”, “polygon” as the coordinate value of the registered additional information, and the vertex information corresponding to the additional information type is stored. The position information is stored in the coordinate value 46. The unit of the coordinate value is a pixel coordinate value in the Web browser 2 and consists of an X coordinate value and a Y coordinate value. When the additional information type 45 is “point”, there is one X coordinate and one Y coordinate. In the case of “line” and “polygon”, a plurality of coordinate values are stored.
When the additional information type 45 is a point or a polygon, image data can be pasted at that position. In this case, the URL where the image data exists is stored in the additional information URL 47.
The extension information 48 is added as additional information as necessary, and the data to be stored is changed depending on the use of the system. For example, by storing the name of the user who has written the additional information, it is possible to perform display / non-display control of the written additional information in accordance with the browsing user.

  The additional information processing program 7 in the additional information Web server 6 includes a storage process for storing additional information data in the additional information database 9, a search process for searching for stored additional information data, and a change in stored data. It has a function to perform edit processing such as deleting and deleting.

The operation of the Web page writing system configured as described above will be described below.
FIG. 5 is an explanatory diagram showing communication relationships between the Web browser 2 in the client terminals 1a, 1b, and 1n, the page generation program 7 of the additional information Web server 6, and the additional information processing program 8.
The URL of the web page to be browsed is transmitted from the web browser 2 to the page generation program 7 and the additional information processing program 8 (steps 50 and 51), and the web page including the JavaScript program 4 is received from the page generation program 7 (step 52). ), The written additional information is received from the additional information processing program 8 (step 53).

FIG. 6 is a flowchart showing an overview of page generation processing in the page generation program 7.
The page generation program 7 receives the URL to be browsed from the Web browser 2 (step 60), performs processing to acquire the Web page indicated by the received URL (step 61), and if the acquisition fails, the transmission source An error is returned to the Web browser (step 63).
If the Web page is successfully acquired, it is checked whether the <BASE> tag is included in the Web page. If not included, a process of adding the <BASE> tag based on the URL received in step 60 is performed. (Step 64), processing for inserting the JavaScript script 4 together with the <SCRIPT> tag (step 65), and processing for changing the link destination included in the <A> tag in the Web page to the page generation program 7 (Step 66), and a process of returning the web page to the web browser 2 as the transmission source is performed (step 67).

FIG. 7 is a flowchart showing an outline of additional information search processing of the additional information processing program 8 in step 53 of FIG.
The additional information processing program 8 receives the URL to be browsed from the Web browser 2 (step 70), and selects all the additional information having the same URL as the URL 41 from the data shown in FIG. 3 using the received URL as a search condition. A search process is performed (step 71), the selected data is extracted one by one (steps 72 and 74), and the additional information is converted into a format that can be read by the JavaScript program 4 and output (step 73). Return to a certain web browser 2 (step 75).
As the output format of the additional information in step 73, a JSON (JavaScript Object Notation) format, an XML format, or the like can be considered.

FIG. 8 is a flowchart showing an outline of processing when the JavaScript program 4 in the Web page in the Web browser in Step 53 receives additional information from the additional information processing program 8.
After receiving the additional information data (step 80), the presence / absence of the additional information is confirmed (step 81), whether the image URL 47 data in the additional information data is stored (step 82), and the image URL 47 is stored. If not, a graphic drawing language such as SVG or VML is used to generate a graphic element corresponding to the additional information type 45, the line thickness 42, the line color 43, and the fill color 44, If the image URL 47 is stored, the image is acquired from the stored URL, a <DIV> element in HTML is generated, and the image specified in the image URL 47 is used as a background image (step 85). The position information stored in the coordinate value 46 is set for the selected graphic element or <DIV> element (step 86). Proceeds to the additional information (step 88), the additional information if still present again repeated from step 81 for the next additional information, and ends After performing the processing for all the additional information (step 89).

FIG. 9 is a flowchart showing an outline of processing of the JavaScript program 4 when new writing is performed from the Web browser 2.
The type of additional information to be drawn from the GUI in the JavaScript program 4, the line color, the line thickness, and the fill color are determined to generate additional information (step 90), and the coordinates of the additional information set by mouse input or the like The value is set to the generated additional information and displayed on the Web browser 2 (step 91), the URL 41 of the Web page being browsed, the line thickness 42 and the line color 43 which are the information set in the additional information The additional information data such as the fill color 44, the additional information type 45, the coordinate value 46, and the image URL 47 and, if necessary, the data of the extended information 48 are transmitted to the additional information processing program 8 (step 92). The information processing program 8 assigns the additional information ID 40 to the received data and stores it in the additional information database 9. Success "or" failure "Kano execution result and, if it is" success "to return the additional information ID that was numbered (step 93).
When receiving “success”, the JavaScript program 4 as the transmission source records the numbered additional information ID and ends the processing (step 94). When receiving “failure”, the drawn additional information is recorded. Is deleted and a message such as “Failed to save” is displayed on the Web browser 2 (step 95).

FIG. 10 shows the processing of the JavaScript program 4 when the additional information is moved on the Web browser 2 to change the coordinate value, when the coordinate value is deleted, or when an editing operation for changing the line thickness or color is performed. It is a flowchart which shows the outline | summary.
The edited additional information is acquired (step 100), and the additional information ID 40 of the acquired additional information and the newly set additional information are transmitted to the additional information processing program 8 (step 101).
The additional information processing program 8 changes the received information to the additional information database 9, and returns “success” or “failure” to the transmission source after the change (step 102).
The JavaScript script 4 which is the transmission source ends the process when “success” is received, but when “failure” is received, the modified additional information is restored to the original and a message such as “edit failed” is displayed. It is displayed on the Web browser 2 (step 103).

As described above, the Web page writing system according to the present embodiment has the following effects.
(1) By writing to the Web page, additional information can be added to the original Web page, such as underlining important parts on the Web page or writing characters as a memo. .
(2) By inputting the URL of the written web page from the web browser, it is possible to refer to the writing as with a normal web page, and the written content is also distributed on the web. You can also communicate by sharing with each other and writing to each other.
(3) By adding the extended information 48 to the written additional information, it is possible to create a system according to various uses.

As specific practical examples, for example, the following effects are expected in the education field.
(1) Educational teaching materials are created on a Web page, and teachers can use a large screen display or projector instead of a blackboard to conduct classes while writing on the teaching materials.
(2) “Class name” and “Date / time” are stored as additional information performed by the teacher during the class, and the application is written by the teacher after the class ends by combining applications that search for these additional information. You can refer to the contents.
(3) Furthermore, effective classes can be performed by handling multimedia such as audio and video as additional information.
(4) By changing from paper teaching materials to electronic data handled on a Web page, paperlessness is achieved.

1 is a system configuration diagram showing an embodiment of the present invention. It is explanatory drawing of the web page produced | generated by the additional information server. It is a figure which shows the example of a screen of the web page produced | generated by the additional information server. It is a block diagram of the data stored in the additional information database. It is explanatory drawing which shows communication of a client terminal and an additional information Web server. It is a flow chat which shows the outline | summary of the process which produces | generates a web page. It is a flowchart which shows the outline | summary of the search process of the written additional information. It is a flowchart which shows the outline | summary of the display process of the written additional information. It is a flowchart which shows the storage process of the newly written additional information. It is a flowchart which shows the edit process of the additional information already written.

Explanation of symbols

  DESCRIPTION OF SYMBOLS 1a, 1b, 1n ... Client terminal, 2 ... Web browser, 3 ... Web page under browsing, 4 ... JavaScript program, 5 ... Network, 6 ... Additional information Web server, 7 ... Page generation program, 8 ... Additional information processing program 9 ... Additional information database, 10a, 10b, 10n ... General Web server, 11a, 11b, 11n ... Web page, 20 ... General Web page to browse, 30 ... Write input GUI, 31 ... Written additional information

Claims (2)

An additional information Web server provided with an additional information database for holding the written additional information, and a plurality of client terminal devices receiving additional information from the additional information Web server,
The additional information Web server includes a storage unit that newly stores additional information in the additional information database, an update unit that updates the additional information that has already been stored, and a Web browser installed in any of the client terminals. In response to the request, search means for reading additional information corresponding to the URL of the Web page included in the request from the additional information database, and acquiring the Web page of the URL of the Web page included in the request A means for newly generating a Web page to which a new writing means or a changing means is added, and a transmission means for transmitting the generated Web page and additional information of the search result to the requesting Web browser,
The Web browser of the client terminal receives the URL of the Web page to be browsed to the additional information Web server and the Web page generated by the additional information Web server. A means for displaying the added web page and displaying a new writing means or a changing means for the additional information in the web page; the newly written additional information or the changed additional information; A system for transmitting additional information to a Web page, comprising: A method for writing to a Web page that writes additional information data from a Web browser of a client terminal device to a Web page currently being browsed and stores the additional information data in an additional information database of an additional information Web server,
The Web browser of the client terminal device transmitting the URL of the Web page to be browsed to the additional information Web server;
The additional information Web server reads the additional information corresponding to the URL of the Web page included in the request from the Web browser from the additional information database, and acquires the Web page URL of the Web page included in the request. A step of newly generating a Web page to which a new writing means or changing means of additional information is added, and a step of transmitting the generated Web page and additional information of the search result to the requesting Web browser,
The Web browser of the client terminal device displays the Web page received from the additional information Web server on the display screen, accepts new writing of additional information or changes in written additional information, and newly written additional information Sending the data or additional information that has been changed to the additional information Web server,
A method for writing additional information on a Web page, the additional information Web server comprising: updating the additional information database based on additional information received from the Web browser.

Images