JP4874363B2 - Web page display method using browser plug-in - Google Patents

Description

  The present invention relates to an improvement in technology for displaying a web page.

  As a mode of displaying a web page with a web browser, a screen display using HTML and CSS and a screen display using a plug-in such as a so-called interactive video file player such as Silverlight and Flash (each registered trademark) are known. However, both had advantages and disadvantages, but on the other hand, they were insufficient.

JP 2009-20376 A

  In other words, the former screen display using HTML / CSS is easy to develop and has a high level of technical recognition. However, a large number of image files are required to realize a complicated layout, and the load of server access is large. There was a problem that it took a long time. In addition, there is a limit that is not suitable for realizing various displays such as animation of multiple movements.

  On the other hand, the screen display using the latter plug-in can perform advanced internal processing such as image processing and movement, and can perform complex and diverse display layouts with a small number of image files, and can reduce the number of image files. Although access to the server can be suppressed, there is a problem that the technical recognition is low, and the burden of development is large, including dedicated tools and costs.

  In particular, when placing video elements such as plug-in animation decorations in the HTML / CSS screen layout, the position and size of the video can be changed according to the browser window size change. Complex screen design skills and large CPU load, such as arranging moving images and operating them in parallel, are essential and difficult.

  In addition, when a plug-in program that scrolls and displays a wide range of maps with a plug-in is used to sequentially switch plug-in programs that draw different ranges from the server to the client, the previous display position is embedded in the new program on the server. Although the proposal is known (for example, refer to Patent Document 1), it has not been related to the above-described problem.

  The present invention solves the above-described problems, and its purpose is to easily realize advanced display by dynamically processing and arranging images by plug-ins based on positional information laid out by the browser. It is to be.

  Based on the above object, according to one aspect of the present invention, in a server device that provides a web display to a client system including a web browser, markup data that describes a display object, style sheet data that describes a display format, and a predetermined format Transmission means for transmitting the web page data including the script and a display program operating on a predetermined browser plug-in to the web browser of the client system via a predetermined communication network, It detects that the web browser displayed the web page data, acquires information on the display position of each display target from the web browser, and represents the content and processing mode of the image to be displayed corresponding to the display position Information was acquired from the web page data, and these were acquired The information is passed to the display program as display instruction information, and the display program generates a plug-in display layer in the display window of the web browser and represents the display instruction information in the plug-in display layer. An image is displayed at a position corresponding to the processing mode and the display position.

  Further, not only the above apparatus but also a method and a computer program corresponding to the above apparatus are also aspects of the present invention. Furthermore, the operations and effects of the present invention configured as described above, and the configurations, functions, and effects in other aspects of the present invention are as described later through the embodiments and the like.

  According to the present invention, it is possible to easily realize advanced display by dynamically processing and arranging an image with a plug-in based on position information laid out by a browser.

1 is a functional block diagram showing a configuration of an embodiment of the present invention (hereinafter the same). The flowchart which shows a process sequence. The figure which illustrates display instruction information. The conceptual diagram which shows the positional relationship regarding a display. The conceptual diagram which shows the positional relationship regarding a display. The conceptual diagram which shows the positional relationship regarding a display. The conceptual diagram which shows the positional relationship regarding a display.

  Next, modes for carrying out the present invention (referred to as “embodiments”) will be described with reference to the drawings. It should be noted that assumptions common to those already described in the background art and problems are omitted as appropriate.

[1. Constitution〕
In the present embodiment, as shown in FIG. 1 (configuration diagram), a client system (hereinafter also referred to as “terminal”) 1 provided with a web browser B via a communication network N represented by the Internet or a mobile phone network. And a web page display method for providing web display from the server 2 to such a terminal 1 or a computer program. It is possible to grasp.

  As shown in FIG. 1, the terminal 1 and the server 2 include, as a general computer configuration, at least an arithmetic control unit 5 such as a CPU, a storage device 6 such as an external storage device (HDD or the like) and a main memory, A communication means 7 (LAN adapter or the like) with the communication network N, and a predetermined computer program (not shown) stored in advance (installed) in the storage device 6 controls the arithmetic control unit 5 to 1 is realized (including the web browser B and the plug-in F of the terminal 1).

  Among these elements, the means for storing information is realized in an arbitrary format such as a file, various databases (hereinafter referred to as “DB”), a variable such as an array, a system setting value, or the like in the storage device 6. Each element that performs information processing is a processing means that implements and executes the following functions and processes. The plug-in F is a plug-in program that is a player that reproduces a so-called interactive moving image file such as Silverlight or Flash (registered trademark). In the following description, the same symbols B and F are used for display areas of the browser B and the plug-in F in order to make the description easy to understand.

[2. Basic action and effect)
[2-1. Server processing)
In the present embodiment configured as described above, when a certain web page is to be displayed, the transmission means 10 of the server device 2 sends the distribution data D, that is, the web page data 8 representing the web page and the plug-in F. The display program P for screen display that operates in the above is transmitted to the web browser B of the client system 1 via the communication network N (transmission processing step).

  For such web page data 8, the fixed content may be stored in advance in the storage unit 20, and the transmission unit 10 may simply read and transmit it, or the web page stored in the storage unit 20 in advance. You may transmit what the CGI means 30 processed the prototype of the data 8, the model, etc. according to the interaction (exchange) with a user.

  In any case, the transmission means 10 first transmits the web page data 8, and this web page data 8 is HTML (HyperText Markup Language) data (hereinafter simply referred to as “HTML”) which is markup data describing a display target. ”, CSS (Cascading Style Sheets) data (hereinafter simply referred to as“ CSS ”) that is a style sheet data describing the display format of each display object, and a predetermined script S. The HTML or script S is configured to call and start the program P by URL designation or the like.

  Of these, the script S controls the program P and is described in javascript or the like, and the HTML specifies information indicating drawing contents such as image display entrusted to the program P in any given tag or format. It is described in. The receiving unit 50 of the terminal 1 stores the received distribution data D as described above in the storage unit 60.

[2-2. Processing on the client system)
A processing procedure for displaying a screen on the client system 1 based on the distribution data D as described above is shown in the flowchart of FIG. That is, first, when displaying the web page data 8, HTML or script S starts the display program P (steps S1 and S11), and the display program P first generates a plug-in display layer in the display window of the web browser B. (Step S12). Here, the plug-in display layer, that is, the plug-in display area is transparent in the initial state, and is displayed on the entire back surface of the browser display area in the display window.

  Here, as an implementation, when a hierarchical order is controlled using a so-called zIndex in a typical web browser, an HTML layer of only the background color is the backmost (zIndex = 0), and a transparent plug-in display layer ( An example is conceivable in which zIndex = 1), and the HTML layer on which an actual character or the like is placed is controlled to the front (zIndex = 2).

  When the script S detects or determines that the web page data 8 has been read and displayed by the web browser B (step S3), the script S determines the display position of each display target such as a character string described in HTML. Display position information to be displayed is acquired from the web browser B (step S4), and information indicating the content and processing mode of the image to be displayed corresponding to the display position (for example, around the display position) is displayed on the web page data. 8 (step S5). In addition, the script S passes the acquired information (that is, the information indicating the display position information and the contents and processing mode of the image) to the display program P as display instruction information (step S6).

  Here, the display detected by the script (step S3) is not limited to the case where a page is newly displayed, but also includes re-display by changing the window size. Such change and re-display are performed in a typical web browser. , “Onresize”, and the like, can be detected with a predetermined reserved word. Moreover, the display object from which the script S acquires the display position information from the web browser B is, for example, all HTML tags described for the display program P of the present invention (for example, the style described in the tag) on HTML. Information with a predetermined reserved word).

  Here, FIG. 3 shows an example of several sets (several lines) of display instruction information related to a certain web page. That is, the display instruction information includes display position information, image designation information, and processing information. Among these, the display position information is acquired from the web browser B. For example, for each display target, the start point coordinates (x, y) of the range occupied in the browser display area (that is, assigned by the browser B), and the width (W) and height (h). The display instruction information is information representing the contents of an image to be displayed, for example, a URL for designating an image file to be displayed, and is hereinafter referred to as “image designation information”.

  Here, FIG. 4 is a conceptual diagram showing an example of such a positional relationship. In the coordinate system in this example, the coordinate value x increases in the right direction with the upper left corner as the origin (0, 0), The coordinate value y increases in the downward direction. In this example, the browser display area B and the plug-in display area F have the same range and coordinate values, and the display position of a display target H is the start point coordinates HZ (400, 500) and the width w with the number of pixels as the unit. A drawing range T for displaying an image corresponding to the display position in a range of = 500 and a height h = 300 is a range up to 100 pixels around the display position in the vertical and horizontal directions (shown in gray by dotted points in the figure). As an example, border decoration is performed by drawing predetermined image contents in the plug-in display area F (the range starting from the start point TZ in the figure) which is the back layer.

  Further, the processing information is information representing a processing mode (FIG. 3) and is a set of parameters and the like, and is freely determined such as the type of processing such as enlargement / reduction, constants and attributes used for processing, etc. It can be implemented by freely combining elements such as the presence / absence of enlargement / reduction in each direction and the vertical direction, the enlargement / reduction ratio, the rotation angle, the speed of movement, the type of applied filter in color processing, RGB designation, and options such as movement.

  Then, the display program P obtains the image indicated by the image designation information from the display instruction information for each received display target, performs processing such as enlargement / reduction in the processing mode indicated by the processing information, and then displays the image. The position is displayed in the position of the plug-in display area F corresponding to the position information, that is, the drawing range T (step S17).

  When the resizing or display position of the display window of the browser B is changed, the script S detects this (step S3), transmits a reset command to the display program P (step S8), and the display program P When this reset command is received (step S18), everything currently displayed in the plug-in display area F is erased (step S19), and then the display content is updated by performing re-display in the same processing as above. .

[2-3. How to obtain x, y, w, h coordinates on HTML]
Further, the display position information of each display target as described above is acquired as follows, for example. That is, taking a typical web browser as an example, a description example used to acquire coordinate information such as a display position in which a browser lays out a tag (corresponding to a character string or image) corresponding to a certain ID on the display area. It is shown below.

First, get the tags that are on HTML:
"
var t = document. getElementById ("ID described on HTML tag");
"
Get tag display area height (relative to t):
t. scrollHeight
"
Get tag display area width (for t):
t. scrollWidth
"
Also, get the apparent x-coordinate from the top left of the browser on the tag screen:
t. clientX
"
Get the visual y coordinate from the top left of the browser on the tag screen:
t. clientY
"

Also, it is common for some inline elements to be subordinate to block elements, but get the Xth tag directly under a certain tag:
t. childNodes [X]
"
Get the number of tags directly under a tag:
t. childNodes. length
"
Get Y style information for a tag:
t. style [Y]
"
Get a plug-in program:
var f = window. [ID described on the HTML tag];
"
Call function Z on the plug-in program:
f. z (argument1, argument2, ...);
"
Set the call function Z from the plug-in program:
ExternalInterface. addCallback ("function name", calling function);
"

[2-4. Basic effect)
In the present embodiment, the plug-in such as Flash performs advanced animation and image processing based on the information on the arrangement position where the browser has determined the layout from the description of HTML and CSS mainly including the display contents by the above processing. Because it supports the part of the layout process that includes, dynamic layout changes, even in the case of complex web page designs, are fast, and it is excellent in advanced display that exceeds the rendering performance of the browser without special advanced design skills Expressive power can be realized.

[3. (Specify the cutting range)
It is also possible to cut out and display a desired range from the image by the display program P. In this case, the script S includes information representing the cutout range from the original image in the processing information. As shown in the conceptual diagram of FIG. 5, the information representing the cut-out range is typically the start point (x1, y1) coordinates of the cut-out range viewed from the origin (0, 0) in the coordinate system of the original image, and the cut-out size. The information of the width w1 and the height h1 is, for example, a set of start point coordinates and end point coordinates and other representation formats.

  Then, based on the image of the cutout area as described above, the processing specified by the processing information is performed, and the drawing range (in the example of FIG. 5, the start points x2 and y2 and the width of the browser display area B). (range specified by w2, height h2).

  In this way, the script specifies the cutout range from the original image as a processing mode based on the description of the HTML tag, etc., so that the display contents using a large number of images can be individually received from the server for each file. Without acquisition, it becomes possible to synthesize various parts and decoration elements into a single or a small number of images and transfer them together easily and quickly from the server, further reducing the communication load for display.

[4. (Limitation of plug-in display area)
The plug-in display area is not limited to the entire browser display area displayed in the display window, and may be a part of the browser display area. In this case, as shown in FIG. 6, the display program P generates the plug-in display layer as a plug-in display area F2 at a portion starting from a predetermined relative origin coordinate F2Z in the browser display area B. Information representing the range in which the display area F2 is arranged, that is, the coordinate values of the relative limited coordinates that are the starting point viewed from the origin coordinates B (0, 0) of the browser display area, and the width and height representing the width (end point) For example, the script S notifies the display program P of such information.

  For example, in the example shown in FIG. 6, the plug-in display area F2 is arranged starting from the relative origin coordinate F2Z (200, 100) in the browser display area B. In the drawing, “B (200, 100) F (0, 0)” indicates that the coordinate value of the coordinate (for example, the relative origin coordinate F2Z) is (200, 100) in the coordinate system of the browser display area B. ) Represents (0, 0) in the coordinate system of the plug-in display area F2.

  In the example of FIG. 6, the display program P uses the browser coordinate value (for example, B (300, 400)) of the drawing range origin TZ passed from the script S to notify the relative origin coordinate F2Z (200, By subtracting each value of 100), the display processing is performed by converting into the coordinate value F (100, 300) in the plug-in display area F2. In any case, if the drawing range is outside the plug-in display area in the display program P, it is not displayed.

  In this way, in the display program, a plug-in display layer is generated in a part of the browser display area, and the difference (offset) of the relative origin coordinates viewed from the origin coordinates of the browser display area is reflected in the display position coordinates from the script. By displaying the image, it is possible to configure the web page data without being aware of that while limiting the coordinate range of the plug-in display layer according to the purpose and situation. A plurality of plug-in display areas may be provided in different position ranges.

Further, as shown by the thick broken line rectangle in FIG. 6, in consideration of the window display range W by scrolling the browser, the browser scroll state at each time point is added to the coordinate value in order to add the current vertical scroll amount of the browser: "
document. body. scrollTop
"
Current horizontal scroll amount of browser: “
document. body. scrollLeft
"
And the position coordinates of the display target can be added, that is, the x coordinate from the upper left of the browser display area of the tag is acquired: “
t. clientX + document. body. scrollTop
"
Get the y coordinate from the upper left of the browser display area of the tag:
t. clientY + document. body. scrollLeft
"
And it is sufficient.

  In other words, the logo displayed at the upper left of the page initially has “t.clientY” close to zero, but after scrolling down the screen and acquiring “t.clientY” again, the negative value is I will come back. For example, in the example of FIG. 6, the plug-in display area F2 has a coordinate value of the start point in the coordinate system of the browser display area B, B (200, 100), and the y coordinate is 100. As shown by the rectangle, when the screen is scrolled by 200 pixels, it is out of the range of the display window W, and the y coordinate is reduced by 200 to -100.

[5. Example〕
According to the embodiment as described above, as illustrated in FIG. 7, the single plug-in display area F3 in the browser display area B is used for positioning the so-called screen modification integrated parts, and titles, texts, etc. For each display target H1, H2, H3, and H4, not only animation decoration but also animation advertisement can be displayed easily and freely in the individual drawing ranges T1, T2, T3, and T4.
[6. Other embodiments]
In addition, the said embodiment is only an illustration and this invention includes what is illustrated below and other embodiment other than that. For example, the configuration, processing procedure, data and information, screen configuration, and the like shown in the above description and each drawing are merely examples, and the presence / absence of each element, its order, specific contents, and the like can be changed as appropriate. In the present invention, elements such as each means may be realized by an electronic circuit based on a wired logic or the like without being limited to an arithmetic control unit of a computer.

N Communication network 1 Server device (server)
2 Client system (terminal)
5 Arithmetic Control Unit 6 Storage Device 7 Communication Unit 10 Transmission Unit 20, 60 Storage Unit 30 CGI Unit 50 Reception Unit D Display Unit M Input Device B Web Browser F Plug-in D Distribution Data P Display Program S Script

Claims (4)

In a server device that provides a web display to a client system equipped with a web browser,
Markup data describing a display object, style sheet data describing a display style, web page data including a predetermined script, and a display program operating on a predetermined browser plug-in via the predetermined communication network Transmission means for transmitting to the web browser of
The script detects that the web browser has displayed the web page data, acquires information on the display position of each display target from the web browser, and the content of the image to be displayed corresponding to the display position And information representing the processing mode is acquired from the web page data, each of the acquired information is configured to be passed to the display program as display instruction information,
The display program generates a plug-in display layer in the display window of the web browser, and displays an image on the plug-in display layer at a position corresponding to the processing mode and the display position represented by the display instruction information. A server device that is configured as described above.   The server apparatus according to claim 1, wherein the script includes information representing a cut-out range from an original image in information representing the processing mode. The display program generates the plug-in display layer in a portion starting from a predetermined relative origin coordinate in a browser display area displayed in the display window, and uses the relative value from the display position coordinate value passed from the script. The server apparatus according to claim 1, wherein the image to be displayed is displayed with respect to a position coordinate obtained by subtracting a coordinate value of an origin coordinate. In a web page display method for providing a web display from a server device to a client system having a web browser,
From the server device, markup data describing a display object, style sheet data describing a display style, web page data including a predetermined script, and a display program operating on a predetermined browser plug-in, a predetermined communication network A transmission processing step for transmitting to the web browser of the client system via
In the client system,
Detecting that the script has displayed the web page data by the web browser;
The script acquires processing position information of each display target from the web browser,
The script acquires information representing the content and processing mode of the image to be displayed corresponding to the display position from the web page data;
A process in which the script passes the acquired information on the display position and information representing the content and processing mode of the image to the display program as display instruction information;
The display program generating a plug-in display layer in a display window of the web browser;
The display program displaying an image on the plug-in display layer at a position corresponding to the processing mode and the display position represented by the display instruction information;
A method for displaying a web page, comprising:

Images