Information processing device, information processing method, and program

Abstract

To display a web page so as to allow a user to scroll the web page without reducing convenience for the user.SOLUTION: An information processing apparatus has: a display control unit that displays a web page having a content that receives input of an instruction operation on a display that receives input of the instruction operation through a touch operation; and a control unit that, when displaying an area including the content of the web page on the display, controls display of the web page on the display so that an operation area for scrolling the web page and different from the area indicating the content has a size equal to or larger than a predetermined size.SELECTED DRAWING: Figure 2

Description

[Technical field]

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

[0002] Mobile devices such as smartphones and tablet terminals are also equipped with web browsers, and it is common to view web pages using the web browsers on mobile devices. When a user specifies the URL of a web page to a web browser, the web browser accesses the specified URL, retrieves web content such as HTML documents, and displays the web page. The resulting HTML document may be larger than the display area of ​​the web browser. In such cases, the web browser on a smartphone or tablet allows the user to scroll the web page by dragging, swiping, or other user operations to view the desired display range of the web page.

[0003] However, depending on the position of dragging or swiping, scrolling of the web page may not be performed. Web pages can display other HTML documents, images, figures, etc. embedded using tags such as "iframe", "img", and "canvas", and user operations on the content can be specified using JavaScript (registered trademark). In this specification, these contents are also referred to as internal content for the base HTML document. When dragging or swiping is performed in the display area of ​​the internal content that specifies the operation for dragging or swiping, it is recognized as an operation on the internal content, not an operation on the web page. For example, if an external site that provides a map is embedded in an HTML document as internal content, swiping or dragging on the map will not scroll the web page, but will result in a process of changing the display position on the map.

[0004] When the internal content occupies most of the display area of ​​the web browser, it may be difficult to scroll the web page. When scrolling by dragging, there is an area for scrolling the web page to a position where the drag is released. However, as with inertial scrolling, when scrolling continues even after the user's finger is released, the display area of ​​the web browser after scrolling may become covered by the internal content. In this state, swiping or dragging is treated as an operation on the internal content, making it difficult to scroll the web page. As a method to deal with this, a technology has been proposed in which operations on the internal content on the web page are disabled, and the internal content is displayed on a separate screen, for example, on a separate tab of the browser, and operations on the internal content are accepted in the separate tab (Patent Document 1). [Prior art documents] [Patent documents]

[0005] [Patent Document 1] International Publication No. 2018 / 025316 Summary of the Invention [Problem to be solved by the invention]

[0006] However, when internal content is displayed in a separate tab as in the technology described in Patent Document 1, handling one Web page in multiple tabs can reduce user convenience. For example, the user may have to switch between multiple tabs more frequently, or if there is a limit to the number of tabs and the maximum number is being used, the display of a tab that was already displaying another Web page may be updated to display the internal content.

[0007] The present invention has been made in consideration of the above circumstances, and has an object to enable a web page to be displayed so that a user can scroll the web page without reducing user convenience. [Means for solving the problem]

[0008] The information processing device according to the present invention includes a display control means for displaying a Web page having content for accepting input of an instruction operation on a display unit that accepts input of the instruction operation by a touch operation, and a control means for controlling display of the Web page on the display unit such that, when an area including the content of the Web page is displayed on the display unit, an operation area for scrolling the Web page is set to a size equal to or larger than a predetermined size, different from an area showing the content. and a determination means for determining whether a first display area of ​​the Web page satisfies a predetermined condition, the determination means determining whether the operation area in the first display area will be a predetermined size or larger based on an area showing the content in the first display area, and the control means controlling the display of the Web page in a second display area including the operation area of ​​the predetermined size or larger when the operation area in the first display area does not become the predetermined size or larger. It is characterized by: Effect of the Invention

[0009] According to the present invention, it is possible to display a Web page so that the user can scroll the Web page without reducing user convenience. [Brief description of the drawings]

[0010] [Figure 1] FIG. 2 is a diagram illustrating an example of a hardware configuration of an information processing device. [Diagram 2] FIG. 2 is a diagram illustrating an example of a functional configuration of an information processing device. [Diagram 3] FIG. 1 is a diagram illustrating a drawing process of a Web browser. [Figure 4] FIG. 1 is a diagram illustrating an example of Web content. [Diagram 5] 11A and 11B are diagrams illustrating an example of a rendering result and a display area of ​​a Web browser. [Figure 6] 11A and 11B are diagrams illustrating an example of a rendering result and a display area of ​​a Web browser. [Figure 7] 11A and 11B are diagrams illustrating an example of a rendering result and a display area of ​​a Web browser. [Figure 8] 13 is a diagram illustrating a coordinate system of a rendering result and a display area of ​​a Web browser. [Figure 9] 13 is a flowchart illustrating an example of processing by the information processing device. DETAILED DESCRIPTION OF THE PREFERRED EMBODIMENTS

[0011] Hereinafter, an embodiment of the present invention will be described with reference to the drawings. Note that the embodiment described below does not limit the present invention related to the scope of the claims, and not all of the combinations of features described in the present embodiment are necessarily essential to the solution of the present invention. Note that the same components will be described with the same reference numerals.

[0012] 1 is a block diagram showing an example of the hardware configuration of an information processing device according to an embodiment of the present invention. The information processing device 100 according to this embodiment includes a controller unit 110, an operation unit 120, a display unit 130, a storage unit 140, and a communication unit 150.

[0013] The controller unit 110 controls the entire information processing device. The controller unit 110 has a CPU (Central Processing Unit) 111, a ROM (Read Only Memory) 112, and a RAM (Random Access Memory) 113. The CPU 111 executes the processing of each processing unit in the information processing device 100. The ROM 112 stores various programs executed by the CPU 111, data required when executing the programs, and the like. The RAM 113 is composed of, for example, an SRAM, a DRAM, and the like, and is used to store program control variables and the like. Various work buffers are also stored in the RAM 113.

[0014] The operation unit 120 is composed of a keyboard, a touch panel, a mouse, etc., and allows the user to perform various input operations. The display unit 130 is for displaying and notifying the user with an LCD, LED display, etc. The storage unit 140 is composed of a hard disk, etc., and is for storing file data such as documents and images. The communication unit 150 is an interface for connecting to a network. Connection methods include LAN, wireless LAN, etc.

[0015] The information processing device 100 in this embodiment executes a Web browser program that accesses a Web page specified by, for example, a URL (Uniform Resource Locator), acquires, interprets, and renders Web content. The Web content includes HTML documents (HTML files), JavaScript (registered trademark), CSS style sheets, and the like. The Web browser program is stored in the ROM 112 or the storage unit 140, and is read into the RAM 113 and processed by the CPU 111. The GUI and Web content that constitute the Web browser are rendered on the display unit 130, and instructions from the user are accepted in conjunction with input from the operation unit 120. When the Web content is acquired via a network, it is processed via the communication unit 150.

[0016] 2 is a block diagram showing a schematic functional configuration example of the information processing device 100 according to the present embodiment. The information processing device 100 includes a display control unit 201, a determination unit 202, and a control unit 203. Each unit is controlled by a program stored in a ROM 112.

[0017] The display control unit 201 performs a process of displaying a Web page on the display unit 130. The display control unit 201 generates a rendering result from Web content such as an HTML document, a CSS style sheet, and JavaScript obtained by accessing a URL specified by input from the operation unit 120 via the communication unit 150, and displays the result on the Web browser. FIG. 3 shows a flow of the Web browser analyzing the content. The HTML parser 302 performs syntax analysis of the HTML document 301 and generates a DOM tree 303. The CSS parser 305 performs syntax analysis of the CSS style sheet 304 and generates a CSSOM tree 306 that expresses style rules, which are decoration information of the HTML document 301, in a tree format. Next, a render tree 307 is generated based on the DOM tree 303 and the CSSOM tree 306, incorporating visual expressions into the DOM tree 303. Then, a layout process 308 is performed to determine the arrangement of the content included in each HTML document based on the rendering information of the render tree 307. Next, the render tree 307 that has been subjected to the layout process 308 is rendered on a surface that is a buffer area used for displaying the screen of the Web browser, thereby displaying the rendering result (Web page) (drawing 309). Furthermore, the display control unit 201 manages the coordinates of the rendering position of each element included in the HTML document when displaying the Web page.

[0018] The display control unit 201 also controls the display area of ​​the drawing result. When there is a drag input on the Web page from the touch panel that is the operation unit 120, the display control unit 201 changes the display area of ​​the drawing result displayed on the Web browser according to the drag direction and movement amount. When the input from the operation unit 120 is a swipe, the display control unit 201 changes the display area of ​​the drawing result so that scrolling continues even after the user releases contact (touch) with the touch panel. The display control unit 201 acquires the operation speed of the swipe, and sequentially changes the display area in the swipe direction according to the speed, gradually reducing the movement amount of the display area, and finally sets the movement amount to 0 to determine the display area.

[0019] The determination unit 202 determines whether or not the display area to be determined by the display control unit 201 includes an operation area for scrolling a web page with a size equal to or larger than a predetermined size. The operation area for scrolling a web page is an area to which no other processing other than scrolling a web page is assigned by JavaScript or the like for operations for scrolling a web page, such as dragging or swiping here. Dragging or swiping in an area to which other processing is assigned does not cause scrolling of the web page. If the operation area for scrolling a web page is included in a predetermined size or more, the determination unit 202 determines that the display area is to be determined at that display position. Furthermore, if the operation area for scrolling a web page is smaller than a predetermined size, the determination unit 202 determines that a change of the display area is necessary.

[0020] When the determination unit 202 determines that the display area needs to be changed, the control unit 203 calculates a movement direction and a movement amount for changing the display area so that the display area includes a predetermined or larger operation area for scrolling the Web page. The calculated movement direction and movement amount are transmitted to the display control unit 201, and the display control unit 201 changes the display area in the drawing result based on the specified movement direction and movement amount.

[0021] Figure 4 shows examples of web content loaded by a web browser, where (A) shows an example of an HTML document, (B) shows an example of a CSS style sheet, and (C) shows an example of JavaScript.

[0022] The HTML document 400 shown in FIG. 4A is an HTML heading element. <h1> element,< / h1> <h2>Indicates elements and bullet points Element (401), as inner content <canvas>Element (402), and <iframe>This is an example having an element (403). The <canvas> element (402) of the internal content and the <iframe> element (403) are an example of content that receives input of an indication operation. The <canvas> element (402) is defined to operate in JavaScript as shown in FIG. 4(C) described later. The <iframe> element (403) embeds and displays the content specified by the src attribute in a web page. In this example, it is assumed that a map provided by an external map service is embedded and displayed. There are generally web services that provide maps, and such map services enable the specified map range to be embedded and displayed on other websites. By including an HTML element for displaying the specified area in a web page, a map provided by an external map service can be embedded in the web page. It can be embedded using an <iframe> element, a <script> element, etc. Here, it is assumed that the display of the map is embedded using the <iframe> element (403). When swiping on the map displayed on a web browser, the latitude and longitude of the displayed map can be changed, and zoom-in and zoom-out operations of the map can be performed by pinching in and pinching out.

[0023] The CSS style sheet 410 shown in FIG. 4(B) shows the decoration for the <h1> element, indicating that it decorates a rectangle with a width of 300 px (pixels) and a height of 50 px surrounded by a 3 px dashed line.

[0024] The JavaScript 420 shown in FIG. 4(C) is an example of JavaScript that defines the operation for the <canvas> element (402) included in the HTML document 400. It defines a function (421) for window.onload, a function (422) for the touchstart event, a function (423) for the touchmove event, and a function (424) for the touchend event. The touchstart event functions as the operation unit 120 and the display unit 130, and is an event that occurs when contact of a user's finger or the like starts on a touch panel that receives input of an indication operation by a touch operation in a region where the operation is defined.A touchmove event is an event that occurs while a user's finger or the like is in contact with an area that defines an operation on a touch panel that functions as operation unit 120 and display unit 130 and accepts input of instruction operations by touch operations. A touchend event is an event that occurs when the contact of a user's finger or the like with an area that defines an operation is ended on a touch panel that functions as operation unit 120 and display unit 130 and accepts input of instruction operations by touch operations.

[0025] In the function for window.onload (421), the id is "canvas1".<canvas> The function to be executed when each operation occurs on the element is registered with addEventListener. In this example, the function to be executed when the operations corresponding to touchstart, touchmove, and touchend occur is registered with addEventListener.<canvas> It gets a 2D context for drawing on the element's area. When a swipe or drag occurs, events such as touchstart, touchmove, and touchend are fired. Therefore,<canvas> When the user swipes or drags within the element's drawing area,<canvas> Events are fired, targeting the element, and a function for each event is called to perform the processing defined in the function.

[0026] The function (422) for the touchstart event obtains the coordinates where touchstart occurred and assigns true to a flag for saving the touchstart state.

[0027] The function (423) for the touchmove event obtains the coordinates of the touchmove as coordinates in the 2D context. Then, the moveTo, lineTo, and stroke functions draw a line between the touchstart coordinates or the previous touchmove coordinates.

[0028] In the function (424) for the touchend event, the flag is set to false to retain the fact that drawing has ended.

[0029] FIG. 5 shows the result of rendering a Web page based on the HTML document 400 shown in FIG. 4(A), the CSS style sheet 410 shown in FIG. 4(B), and the JavaScript 420 shown in FIG. 4(C).

[0030] 500 is the result of rendering the entire HTML document.<h1> element, elements, and The part where the element (401) is drawn is 501.<h1> The element "Web page" will be displayed surrounded by a dashed line in accordance with the CSS style sheet shown in Figure 4(B). The text surrounded by "Sample1" and "Sample2" are displayed as bullet points.<canvas> The element (402) is drawn at a size specified by the attribute values ​​width and height.<iframe> This is the rendering result of element (403), and also<iframe> It is rendered at the size specified by the element's attribute values ​​width and height.

[0031] Area 504 indicates the area of ​​the rendering result that is displayed in the web browser (the display area that is visible to the user at a certain point in time). The display range displayed in the rendering result is changeable, and the display control unit 201 expresses scrolling of the web page by changing the display area 504 in the rendering result. For example, when the user swipes upward in the display area 504, the display control unit 201 changes the display area so as to scroll downward according to the amount of movement and acceleration of the swipe. For example, when the display area is finally determined to be at the position of area 511 as shown in FIG. 5(B), It is possible to make it appear as if scrolling has stopped with the elements displayed in a bulleted list.

[0032] If the display area is area 511,<canvas> Swiping in the display area outside the element drawing portion 502 allows further scrolling.<canvas> When a user swipes on the drawing part 502 of an element, the user cannot scroll the web page because the swiping is interpreted as a line drawing operation as defined by the JavaScript shown in FIG. 4C. If the display area is the area 512,<canvas> From the bottom edge of the element's drawing area 502<iframe> If there is a swipe area up to the top of the element's drawing area 503, the web page can be scrolled by swiping. On the other hand, if there is no swipe area, the web page cannot be scrolled. Similarly, if the display area is area 513,<iframe> If there is no area to swipe in between the bottom end of the element drawing portion 503 and the bottom end of the display area, the web page cannot be scrolled. In this embodiment, the area in which the web page can be scrolled is displayed in the display area, so that the user can always scroll the web page, and the situation in which the web page cannot be scrolled is avoided.

[0033] FIG. 6 is a diagram illustrating the display area normally displayed (FIGS. 6(A) and 6(C)) and the final display area according to this embodiment (FIGS. 6(B) and 6(D)) as a result of scrolling the rendering result (Web page) 500 shown in FIG. 5(A).

[0034] In the example shown in FIG. 6A, the display area 601 is mostly<canvas> The Web page is covered by the drawing portion 502 of the element, making it difficult to scroll the Web page. As a result of inertial scrolling, a display area 601 like this may be displayed. For example, when a user swipes upward within the display area 504 shown in FIG. 5A, inertial scrolling is started according to the speed of the swipe. Then, the displacement of the display area finally decreases as the speed gradually decreases, and the drawing result may be displayed in the display area 601 that has almost no area to swipe.In this state, it becomes difficult to scroll further through the web page.<canvas> When you swipe on the drawing part 502 of the element,<canvas> Another operation assigned to the element is executed.<canvas> The touchstart, touchmove, and touchend events are fired for the element.<canvas> A process of drawing a line is executed in the drawing part 502 of the element. No matter how many times you swipe, it only gives an instruction to draw a line, so you need to swipe to scroll the web page.<canvas> It is necessary to swipe in an area other than the drawing part 502 of the element. However, from the top edge of the display area 601<canvas> The area between the top edges of the element's drawing portions 502 is too narrow to allow for swiping, so the web page cannot be scrolled.

[0035] Therefore, in this embodiment, the display area is controlled to include an area where, for example, a swipe can be performed to scroll a Web page. The information processing device 100 analyzes the state of the display area at the position where the scrolling of the Web page is stopped, and determines whether or not an area of ​​a predetermined size (height x width) where an operation on the Web page can be performed exists within the display area. If it is determined that an area of ​​a predetermined size (height x width) where an operation on the Web page can be performed does not exist within the display area, the display area is corrected to a position where an area of ​​a predetermined size where a swipe can be performed to scroll the Web page is secured.

[0036] In the example shown in FIG. 6A, the information processing device 100 moves the display area upward or downward.<canvas> It is possible to include the area for swiping the web page at the top or bottom of the drawing part 502 of the element. To secure the area for swiping the web page with a small amount of correction, correct the display area 602 upward as shown in FIG. 6(B),<canvas> The display area is determined to be a position that includes a swipeable area of ​​the Web page above the element drawing portion 502. Also, when the inertial scrolling is about to stop at the position of the display area 603 as shown in Fig. 6(C), the amount of correction of the display area is smaller when the display area is corrected downward.Therefore, the information processing device 100 corrects the display area 604 downward as shown in FIG.<canvas> The display area is determined to be a position including a region where the web page can be swiped below the element drawing portion 502. In this way, by controlling the display area to include the region where the web page can be swiped, the user can always scroll the web page, and it is possible to avoid a state where the web page cannot be scrolled.

[0037] The display area may be corrected after the position where normal inertial scrolling stops is displayed, or the position where scrolling stops during inertial scrolling may be predicted and scrolling may finally be made to appear to stop at the corrected display area. Once inertial scrolling has stopped, if the display area is corrected based on the calculated correction amount, the user will be able to visually see that the display area has been corrected. On the other hand, if the position of the display area when normal inertial scrolling stops during inertial scrolling and the correction amount based on that are calculated, and the display area when scrolling stops at a position taking the correction amount into account is determined, a display can be created that does not make the user aware of the correction.

[0038] Figure 7 shows the display area<canvas> element,<iframe> The following figure shows an example of a display area that includes two renderings of an element, but does not have a swipeable area between them to scroll the web page. Figure 7(A) shows the display area where inertial scrolling would normally stop. Figures 7(B) and 7(C) show examples of a display area that has been corrected to provide a swipeable area for scrolling the web page.

[0039] 700 is the result of drawing the entire HTML document. 701 is the result of drawing the entire HTML document shown in FIG.<h1> element, elements, and In FIG. 7A, the display area 704 is a portion in which elements are drawn.<canvas> A drawing part 702 of an element<iframe> The element is largely covered by the drawing part 703. When you swipe on this display area 704,<canvas> Elements and<iframe> Processing assigned to the elements, such as drawing lines and moving the map, is carried out.To scroll a web page,<canvas> The drawing part 702 of the element<iframe> An area that is not the drawing part 703 of the element is necessary.<canvas> A drawing part 702 of an element<iframe> There is no sufficient area between the element's drawing part 703 for scrolling the Web page, in other words, no area in which a user operation is treated as an operation on the Web page. Therefore, when the display area becomes the display area 704 shown in FIG. 7A, the Web page cannot be scrolled.

[0040] To avoid this state, in this embodiment, a swipeable area for scrolling the Web page is secured by correcting the display area to the position of, for example, display area 711 or display area 712 shown in Fig. 7B. When the information processing device 100 determines that there is no swipe area for instructing scrolling of the Web page in the display area where the inertial scrolling normally stops, in this example, display area 704, the information processing device 100 corrects the position to display area 702 or display area 703.

[0041] The display area 711 is<canvas> This is an example in which the display area is corrected so that an area of ​​a predetermined size for swiping a web page is secured above the top end of the element drawing portion 702. Also, the display area 712 is<iframe> This is an example in which the display area is corrected so that an area of ​​a predetermined size for swiping a Web page is secured below the bottom end of the drawing portion 703 of the element.

[0042] Whether to correct to display area 711 or display area 712 may be determined based on the amount of correction from display area 704 where the inertial scrolling would normally stop. Since a smaller distance from the position where the inertial scrolling would normally stop looks more natural to the user, for example, the amount of correction to move display area 704 to the position of display area 711 or display area 712 is calculated, and the display area is corrected to the position with the smaller amount of correction. Also, the display area to be corrected may be determined by giving priority to the scroll direction performed in advance.When the inertial scroll is stopped once in the display area 704 and then the display area is made to appear to the user as if it has shifted to a corrected position, the display area is corrected to the position of the display area 712 since the correction in the direction in which the scroll advances looks more natural to the user.

[0043] FIG. 7(C) shows<canvas> A drawing part 702 of an element<iframe> 7 shows an example in which the rendering result is changed so as to secure a swipeable area for scrolling a Web page between the rendering part 703 of the element.<iframe> The drawing result in which the start position of the drawing part 703 of the element is shifted downward, and the display area 721 are shown. If the display area 704 shown in FIG. 7B is corrected to the position of the display area 711 or the display area 712, the amount of correction will be large. Alternatively, in the case of Web content in which multiple internal contents are displayed without gaps, internal contents other than those displayed at the top and bottom ends of the drawing result cannot be displayed. For example,<iframe> Consider a web content with 10 elements arranged vertically with no gaps. When the display area when inertial scrolling normally stops is one that spans the fifth and sixth maps, the display area will be corrected by moving the display area to include the first map and the area above it, or the tenth map and the area below it. Therefore, the final display area will never be in a position that includes other maps.

[0044] In such a case, the information processing device 100 redraws the display area so that a swipeable area for scrolling the web page is included in the display area, recreates the drawing result, and determines the display area. For example,<canvas> Elements and<iframe> The information processing device 100 redraws the element by expanding the area other than the drawing parts 702 and 703.<canvas> A drawing part 702 of an element<iframe> The HTML document is modified and redrawn so that an area of ​​a predetermined size for swiping the Web page is provided between the drawing parts 703 of the elements.Based on the size required to swipe the web page, calculate the size of the missing area between the drawing part 702 of the <canvas> element and the drawing part 703 of the <iframe> element. Then, create a drawing result based on the HTML document with an element for displaying the area of that size inserted between the <canvas> element and the <iframe> element, for example, . Then, for the newly created drawing result, determine the display area at the same coordinates as the display area 704. As a result, as shown in FIG. 7(C), a display area 721 with a swipeable area for scrolling the web page is formed between the drawing part 702 of the <canvas> element and the drawing part 703 of the <iframe> element.

[0045] FIG. 8 is a diagram for explaining the drawing result of the web page, the display area, and the coordinates of the internal content. It shows a state where one internal content is included in the drawing result of the web page. In FIG. 8, 801 is the drawing result of the web page having a width Wp and a height Hp. 802 is the display area having a width Wd and a height Hd. The display area 802 is expressed with the upper left corner of the rectangle as (xd, yd) and the lower right corner as (xd + Wd, yd + Hd) in a coordinate system where the upper left corner of the drawing result 801 is the origin and the right direction and the downward direction are the positive directions of the x coordinate and the y coordinate, respectively. 803 is the internal content having a width Wc and a height Hc. The internal content 803 is expressed with the upper left corner of the rectangle as (xc, yc) and the lower right corner as (xc + Wc, yc + Hc) in a coordinate system where the upper left corner of the display area 802 is the origin and the right direction and the downward direction are the positive directions of the x coordinate and the y coordinate, respectively.Furthermore, when expressing the movement of display area 802 in the drawing result, the amount of movement in the x direction is represented as dx , and the amount of movement in the y direction is represented as dy . The width and height of rectangle 804, which is the minimum area required to scroll a Web page, are represented as Ws and Hs , respectively. Hereinafter, correction of the display area will be explained using this coordinate system.

[0046] A processing example of the information processing device 100 in this embodiment will be described with reference to the flowchart shown in FIG. 9. The processing shown in FIG. 9 is executed when the display area in the drawing result changes. For example, the processing shown in FIG. 9 is executed when the Web content of a Web page is read for the first time, the drawing result is generated, and the display area is determined, or when the display area is recalculated after redrawing in response to a user's instruction to reload the Web page. Alternatively, the processing shown in FIG. 9 is executed when the display area is changed by the user performing inertial scrolling or a zoom operation of the drawing result. Note that scrolling may be instructed by a JavaScript scroll function, scrollBy function, scrollTo function, or the like, other than a user's swipe operation.

[0047] In step S901, the display control unit 201 extracts internal content that performs a process different from scrolling the web page by swiping on the web page, and then proceeds to step S902. The display control unit 201 determines whether the internal content performs a process different from scrolling the web page by swiping, based on information on each element included in the web page. For example, the display control unit 201 analyzes JavaScript to determine whether an event generated by swiping is assigned to a different process. For example,<canvas> The JavaScript shown in Figure 4(C), which specifies the processing for elements, describes how to obtain the touchstart, touchmove, and touchend events that occur when a user swipes. Then, the coordinates for the obtained events are used to draw a line with lineTo and stroke.In this case, the display control unit 201<canvas> The element is determined to be an internal content that operates by swiping and performs a process different from web page scrolling in response to the swipe operation. In this way, by grasping the events that occur in response to the swipe operation, it is determined whether the internal content performs a process different from web page scrolling in response to the swipe depending on whether the process for the event is separately specified.

[0048] In addition, the display control unit 201 determines, for example, an element with a specific URL specified by the src attribute as an internal content that performs an operation other than scrolling a Web page by swiping.<iframe> The element specifies the URL of a map service in the src attribute value. Each map service defines operations to change the latitude and longitude displayed on the map, and to zoom in and out. For example, some map services assign swiping to change the latitude and longitude. When such a map service is specified in the src attribute,<iframe> Swiping in the drawing area of ​​an element is not treated as scrolling the web page, but as changing the latitude or longitude of a map, for example. In this way, a list of URLs of services that assign different operations to swipe operations is stored in advance,<iframe> Determine whether the URL specified by the src attribute of is in this list. This determines whether it is internal content that performs processing other than web page scrolling by swiping.

[0049] Note that the processing of step S901 does not have to be executed every time a swipe occurs and the display area changes, but may be performed by analyzing the HTML document, JavaScript, etc. when the web content is initially loaded to extract the target internal content.

[0050] In step S902, the determination unit 202 determines, based on the internal content information and display area information obtained from the display control unit 201, whether or not there is internal content within the display area that performs processing other than scrolling the web page by swiping.If the determination unit 202 determines that there is internal content in the display area that performs a process other than web page scrolling by swiping (YES in step S902), the process proceeds to step S903. If the determination unit 202 determines that there is no internal content in the display area that performs a process other than web page scrolling by swiping (NO in step S902), the process proceeds to step S904.

[0051] A specific example will be described based on the coordinates shown in FIG. 8. The top left and bottom right coordinates of rectangular internal content 803 are used to determine whether it is within display area 802. For internal content 803, it is determined whether "top y coordinate ( yc )≦ Hd ", "0≦bottom y coordinate ( yc + Hc )", "left x coordinate ( xc )≦ Wd ", and "0≦right x coordinate ( xc + Wc )". If so, it is determined that internal content 803 is within display area 802. For example, in the case of display area 601 shown in FIG. 6(A), internal content<canvas> The y coordinate (y c ) of the upper end of element 502 is equal to or less than Hd , and the y coordinate (y c +H c ) of the lower end is a positive value. The x coordinate (x c ) of the left end is 0, which is equal to or less than Wd , and the x coordinate (x c +W c ) of the right end is Wc , which is a positive value. Therefore, it is the inner content.<canvas> Since the upper left coordinate and the lower right coordinate of the element 502 satisfy the condition, the determination unit 202 determines<canvas> It is determined that the element 502 is within the display area 601 .

[0052] In step S903, the determination unit 202 determines whether or not a swipe area for instructing scrolling of a Web page is included in the display area.If the determination unit 202 determines that the display area includes a swipe area for instructing scrolling of a Web page (YES in step S903), the process proceeds to step S904. If the determination unit 202 determines that the display area does not include a swipe area for instructing scrolling of a Web page (NO in step S903), the process proceeds to step S905.

[0053] In the case of the coordinates shown in FIG. 8, it is determined whether or not a rectangular area with a width of Ws or more and a height of Hs or more, which are the minimum required for scrolling a Web page, exists within the display area 802 as an area other than the internal contents determined to be within the display area in step S902. When one internal content 803 is included as in the example shown in FIG. 8 , the determination unit 202 determines whether or not an area with a size of ( Ws × Hs ) is included in any of the areas on the top, bottom, left, or right of the internal content 803. In other words, the determination unit 202 determines whether or not any of the conditions " yc ≧ Hs ", " Hd - ( yc + Hc ) ≧ Hs ", " xc ≧ Ws ", or " Wd - ( xc + Wc ) ≧ Ws " is satisfied. In the case of the display area 601 shown in FIG. 6(A), there is an area other than the internal contents at the top of the display area 601, but there is no area with a size of (Ws × Hs) . <H Since this is an example of s, it is determined that there is no minimum area required for scrolling the Web page.

[0054] In step S904, the control unit 203 determines the display area at the finally determined position. In the case of the coordinates shown in Fig. 8, a rectangle with the upper left coordinates set to ( xd , yd ) and width Wd and height Hd is set as the display area. Then, the display control unit 201 displays the display area of ​​the drawing result on the Web browser.

[0055] In step S905, control unit 203 calculates the correction amount of the display area for displaying the minimum area required for scrolling the Web page within the display area, and proceeds to step S906. Control unit 203 calculates how much the normally displayed display area needs to be moved in each direction (up, down, left, right) in order to display a rectangular area with width Ws and height Hs that is the minimum area required for scrolling the Web page within the display area.

[0056] 8, when one internal content 803 is included, the control unit 203 calculates the following values: The amount of correction in the x direction is dx , and the amount of correction in the y direction is dy . - To secure an area of ​​width W d and height H d or more at the top of the display area: d y ≦(y c -H s ) - To secure an area of ​​width W d and height H d or more at the bottom of the display area: d y ≧(H s -H d +y c +H c ) - To secure an area of ​​width W d and height H d or more on the left edge of the display area: d x ≦(x c -W s ) - To secure an area of ​​width W d and height H d or more on the right edge of the display area: dx ≧( Ws -Wd + xc + Wc )

[0057] Furthermore, the control unit 203 selects a correction value for the calculated correction amount that satisfies the condition that when the display area is moved, the display area fits within the drawing result, and the area of ​​internal content that performs another processing by swiping does not enter the display area obtained by the correction.For example, in the case of the display area 601 shown in FIG. 6A, the width of the display area and the rendering result are almost the same, so if correction is made to obtain a width of Ws in the left and right direction, it will exceed the rendering result of the Web page.<canvas> Element 502 and<iframe> If there is no height Hs between element 503, an area with width Wd and height Hd or more cannot be secured at the bottom edge of the display area after correction. Therefore, in this case, the only candidate for the correction amount to be adopted is the upward direction. Also, for example, even if two internal contents 702 and 703 exist adjacent to each other, as in the display area 704 shown in FIG. 7(A), the correction amount is calculated in the same way and a correction value that meets the conditions is selected. In this case, the display area 711 or the display area 712 shown in FIG. 7(B) becomes a candidate for display area correction. Note that even if the correction amount calculation result shows that no correction value that meets the conditions is selected as a candidate, the process proceeds to step S906.

[0058] In step S906, the control unit 203 determines whether the correction amount selected in step S905 has the smallest absolute value equal to or less than a predetermined value. If the control unit 203 determines that the correction amount is greater than the predetermined value (NO in step S906), the process proceeds to step S907. If the control unit 203 determines that the correction amount is equal to or less than the predetermined value (YES in step S906), the process proceeds to step S908. Note that the process also proceeds to step S907 if no correction value was selected as a candidate in step S905.

[0059] If the position of the display area to be finally determined is significantly different from the display area normally displayed, the display may be unnatural to the user. Therefore, for the display area with the smallest absolute value of the correction amount selected in step S905, it is determined whether or not it is equal to or less than a predetermined value. For example, in the case of the display area 601 shown in FIG. 6(A), the amount of correction in the upward direction is small, and it is determined to be equal to or less than the predetermined value, and the process proceeds to step S908.Also, for example, in the case of the display area 704 shown in FIG. 7(A), as a result of calculating correction values for each internal content, the candidate for the correction amount to be adopted is a binary choice of moving upward to the position of the display area 711 or moving downward to the position of the display area 712. For example, if the absolute value of the correction amount is compared with a predetermined value for the correction amount to the display area 711 where the absolute value of the correction amount is small and it is determined that it is larger than the predetermined value, the process proceeds to step S907.

[0060] In step S907, the control unit 203 changes the drawing result so as to have a rectangular area with a width Ws or more and a height Hs or more, which is the minimum required for scrolling the web page within the display area. When the normal display area is the display area 704 shown in FIG. 7(A), the control unit 203 changes the drawing result so as to have a rectangular area with a width Ws or more and a height Hs or more between the <canvas> element 702 and the <iframe> element 703, or at the left and right positions. In the case of the display area 704 shown in FIG. 7(A), it is sufficient to make a smaller change by creating a rectangular area with a width Ws or more and a height Hs or more between the <canvas> element 702 and the <iframe> element 703 than by creating new areas with a width Ws or more and a height Hs or more on the left and right of the internal content. Therefore, the control unit 203 calculates the height that is insufficient to secure the area for scrolling the web page based on the distance between the drawing results of the <canvas> element 702 and the <iframe> element, the width Ws, and the height Hs. Then, an HTML document is generated by inserting an element for displaying that area, , between the <canvas> element and the <iframe> element, and the display control unit 201 creates the drawing result. In this way, the display area is determined on the new drawing result.Since an area of ​​width Ws and height Hs is allocated between the internal contents displayed in the display area, the display area is determined to have the top left coordinates ( xd , yd ) without changing the coordinates of the normal display area. If<canvas> If the HTML document has been modified so that a new area of ​​at least width Ws and height Hs is added to the right of the element, the display area is determined to have the upper left coordinates ( xd + Ws , yd ). That is, the control unit 203 creates a new HTML document to which tags not described in the HTML document for drawing the Web page are added (or the contents of the tags are rewritten). Then, the control unit 203 draws a Web page according to the generated HTML document in order to display an operation area of ​​a predetermined size or larger.

[0061] In step S908, the display control unit 201 determines the display area using the correction amount determined by the control unit 203 in step S906, or the coordinates of the drawing result and the display area newly generated in step S908. When the display control unit 201 is instructed by the control unit 203 to correct the display area, it determines an area obtained by adding the correction amount to the display area that is normally displayed, as the display area. When the display control unit 201 is instructed by the control unit 203 to provide new drawing results and the coordinates of the display area, it takes the display area at the instructed coordinates with the new drawing results as the display target. Then, in step S904, the display control unit 201 displays the display area of ​​the drawing results on the Web browser.

[0062] With the above processing, when the display state of the Web page does not satisfy the predetermined conditions, a rectangular area of ​​at least width Ws and height Hs , which is the minimum required size for scrolling the Web page, is secured in the display area, making it possible to always scroll the Web page.

[0063] In step S907, In this example, a rectangular area with a width of at least Ws and a height of at least Hs , which is the minimum required area for scrolling a Web page, is secured in the display area by adding an element. However, this is not limiting, and the minimum required area for scrolling a Web page may be secured by reducing the internal content.

[0064] For example, in the case of the display area 601 shown in FIG. 6(A), the internal content<canvas> The drawing area of ​​element 502 is reduced so that the display area has a rectangular area with a width of Ws or more and a height of Hs or more , which is the minimum required for scrolling a Web page. For example,<canvas> Using an element, a display area of ​​width W d and height H d , and a rectangular area of ​​width W s and height H s required for scrolling the web page,<canvas> Calculate the shrink ratio of the element.· The magnification s x (starting point of top and left) when creating a rectangular area with a width of at least W s and a height of at least H s required for scrolling a web page to the right of the internal content in the x direction: s x ≦(W d -W s -x c ) / W c The magnification s x (starting from top and right) when creating a rectangular area with a width of at least W s and a height of at least H s required to scroll a web page to the left of the internal content in the x direction: sx ≦( Wc - Ws + xc ) / Wc · The magnification s y (starting point of top and left) when creating a rectangular area with a width of at least W s and a height of at least H s that is the minimum required to scroll a web page below the internal content in the y direction: s y ≦(H d -H s -y c ) / H c · The magnification s y (bottom, left origin) when creating a rectangular area with a width of at least W s and a height of at least H s required for scrolling a web page on the top of the internal content in the y direction: s y ≦(H c -H s +y c ) / H c

[0065] Then, for example, using the larger magnification value,<canvas> Modify the HTML document so that the elements are displayed at a reduced size, then recreate the rendering result. Use the maximum reduction ratio among the four reduction ratios.If s x (top, left origin), then<canvas> Add a style attribute to the element to scale it.<canvas> The rendering part of the element is reduced to secure the minimum area required for scrolling the web page. This is an example of multiplying the area by s x in the x and y directions, starting from the top and left. <canvas width="W1" height="H1" style="transform: scale(s x , s x );transform-origin: top left;">< / canvas> Since top and left are the starting points<canvas> Displays a web page scrolling area to the right of the element's drawing area.

[0066] In step S907, the HTML document is modified to handle the rendering result, but if the display area changes due to scrolling or the like, and the rendering result of the original HTML document is positioned to have an area for swiping the web page, the rendering result after the HTML document is modified becomes unnecessary. Therefore, when the HTML document is modified, the original rendering result is also stored. If the display area moves while the rendering result after the modification is being displayed, the movement state of the display area relative to the rendering result before the modification is managed, and the flow shown in FIG. 9 is started based on that information. In this way, the rendering result after the HTML document is modified in step S907 is limited to situations where there is no area on the web page to scroll.

[0067] (Another embodiment of the present invention) The present invention can also be realized by a process in which a program for implementing one or more of the functions of the above-described embodiment is supplied to a system or device via a network or a storage medium, and one or more processors in a computer of the system or device read and execute the program. The present invention can also be realized by a circuit (e.g., ASIC) for implementing one or more of the functions.

[0068] It should be noted that the above-mentioned embodiments are merely examples of the implementation of the present invention, and the technical scope of the present invention should not be interpreted as being limited by these embodiments. In other words, the present invention can be implemented in various forms without departing from its technical concept or main features. [Explanation of symbols]

[0069] 100: Information processing device 110: Controller unit 111: CPU 112: ROM 113: RAM 120: Operation unit 130: Display unit 140: Memory unit 150: Communication unit 201: Display control unit 202: Determination unit 203: Control unit.< / iframe> < / canvas> < / h2>

Claims

1. a display control means for displaying a web page having a content for accepting input of an instruction operation on a display unit for accepting input of the instruction operation by a touch operation; a control means for controlling display of the web page on the display unit so that, when an area including the content of the web page is displayed on the display unit, an operation area for scrolling the web page is set to a size equal to or larger than a predetermined size, which is different from an area showing the content; a determination means for determining whether a first display area of ​​the Web page on the display unit in response to a user operation of the Web page satisfies a predetermined condition; the determining means determines whether or not the operation area in the first display area has a size equal to or larger than a predetermined size based on an area showing the content in the first display area; The information processing device is characterized in that the control means controls the web page to be displayed in a second display area including the operation area of ​​a size equal to or larger than the specified size when the operation area in the first display area does not become a size equal to or larger than the specified size.

2. The information processing apparatus according to claim 1 , wherein the operation area is an area other than the content on the Web page.

3. The information processing device according to claim 1 or 2, characterized in that when the control means controls the display of the Web page on the display unit so as to make the operation area a size equal to or larger than the specified size, the control means calculates a movement direction and amount of movement in which the operation area of ​​the specified size or larger is displayed, and moves the display area of ​​the Web page in a direction among multiple movement directions with the smallest amount of movement.

4. 2. The information processing apparatus according to claim 1, wherein the control means displays the operation area having a size equal to or larger than the predetermined size by performing drawing that is not defined in an HTML file for drawing the Web page.

5. 5. The information processing apparatus according to claim 1, wherein the control means reduces and displays the content to display the operation area having a size equal to or larger than a predetermined size.

6. An information processing method for an information processing device having a display unit that accepts input of an instruction operation by a touch operation, comprising: a display control step of causing the display unit to display a web page having content for accepting input of an instruction operation; a control step of controlling display of the web page on the display unit so that, when an area including the content of the web page is displayed on the display unit, an operation area for scrolling the web page is set to a size equal to or larger than a predetermined size, which is different from an area showing the content; a determination step of determining whether a first display area of ​​the Web page on the display unit in response to a user operation of the Web page satisfies a predetermined condition, In the determining step, it is determined whether or not the operation area in the first display area has a size equal to or larger than a predetermined size based on an area showing the content in the first display area; An information processing method characterized in that, in the control process, if the operation area in the first display area does not become a size larger than the specified size, the web page is controlled to be displayed in a second display area including the operation area of ​​a size larger than the specified size.

7. A computer of an information processing device having a display unit that accepts input of an instruction operation by a touch operation, a display control step of displaying, on the display unit, a web page having content for accepting input of an instruction operation; a control step of controlling display of the web page on the display unit so that, when an area including the content of the web page is displayed on the display unit, an operation area for scrolling the web page is set to a size equal to or larger than a predetermined size, which is different from an area showing the content; a determination step of determining whether a first display area of ​​the Web page on the display unit in response to a user operation of the Web page satisfies a predetermined condition; In the determining step, it is determined whether or not the operation area in the first display area has a size equal to or larger than a predetermined size based on an area showing the content in the first display area; A program that controls, in the control step, to display the web page in a second display area that includes an operation area of ​​a size equal to or larger than the specified size if the operation area in the first display area does not become a size equal to or larger than the specified size.

Images