JP2014191756A - Display change program, display change method and display change device - Google Patents

Abstract

PROBLEM TO BE SOLVED: To change into a style which does not satisfy a condition of a display screen width in the case where a display screen width set as a condition is not suitable for an actual condition and a user feels that the style is not suitable, or the like.SOLUTION: A display change program is adapted to execute processing for acquiring rewrite information in the case where a style change instruction is received in the state where a content screen is displayed by applying a condition satisfaction style satisfying a condition of a display screen width to a computer 1 among a plurality of styles specified with the display screen width as a condition, and rewriting a condition for each of the plurality of styles to "truth" or "false" on the basis of the rewrite information so as to apply any other style than the condition satisfaction style.

Description

  The present invention relates to a display change program, a display change method, and a display change device.

  Conventionally, when developing multi-device websites, HTML (HyperText Markup Language) with different fixed layouts for each terminal on the server side, such as smartphones, tablets, personal computers (PCs), etc. Such a method has been adopted in which contents (resources) such as the above are prepared and contents suitable for each terminal are provided by looking at the user agent. This is called SSD (Server-Side Detection).

In recent years, the types of terminals have increased rapidly, and it has become difficult to optimize for all terminals in terms of both development and operation.
Accordingly, a method has been adopted in which the same content is provided from the server side, and the style (layout or design) of the content is dynamically changed on the terminal side based on the display screen width. This is called Responsive Web Design (RWD).

JP 2004-110427 A JP 2010-152797 A JP 2010-191739 A

  By the way, in the responsive web design described above, the content developer prepares several types of styles (style sheets) such as for smartphones, tablets, and PCs, and sets the display screen width as a condition for applying each style. . Then, on each terminal side, the content screen is displayed by applying a style that satisfies the condition of the display screen width.

  However, the display screen width set by the content developer as a condition for applying each style may not match the actual situation. For example, when a new smartphone that is wider than an existing smartphone appears, it may be recognized as a tablet, and a style for tablets may be applied. Also, for example, when using an original browser other than the standard browser on the tablet, the width of the UI (user interface) component is reduced due to the use of an inline frame, etc., and the display screen width is narrowed and recognized as a smartphone. The style for smartphones may be applied.

In particular, a content developer can set the display screen width as a condition for applying each style assuming an existing terminal or browser. It is difficult to respond, and the display screen width set as a condition may not match the actual situation.
In addition, since the terminal applies a style that satisfies the conditions of the display screen width, the display screen width set as a condition does not match the actual situation, and the user feels that the style is not suitable. However, the style cannot be changed to a style other than the style satisfying the display screen width, that is, the style not satisfying the display screen width condition.

  Therefore, the purpose is to be able to change to a style that does not satisfy the conditions of the display screen width when the display screen width set as a condition does not match the actual situation and the user feels that the style is not suitable. To do.

  This display change program applies a style change instruction to a computer in a state where a content screen is displayed by applying a condition-satisfaction style that satisfies the conditions of the display screen width among a plurality of styles defined on the condition of the display screen width. Process, the rewrite information is acquired, and the condition for each of the multiple styles is rewritten to "true" or "false" based on the rewrite information so that a style other than the condition satisfaction style is applied. Is a requirement.

  In this display change method, the computer is instructed to change the style when the content screen is displayed by applying a condition-satisfaction style that satisfies the conditions of the display screen width, among the multiple styles defined on the condition of the display screen width. Process, the rewrite information is acquired, and the condition for each of the multiple styles is rewritten to "true" or "false" based on the rewrite information so that a style other than the condition satisfaction style is applied. It is a requirement to do.

  The display change device receives a style change instruction in a state where a content screen is displayed by applying a condition satisfying style that satisfies the condition of the display screen width among a plurality of styles defined on the condition of the display screen width. A rewriting unit that rewrites the condition for each of a plurality of styles to `` true '' or `` false '' based on the rewriting information so that a style other than the condition satisfaction style is applied. It is a requirement to prepare.

  Therefore, there is an advantage that the style can be changed to a style that does not satisfy the condition of the display screen width.

It is a figure which shows the structure of a terminal provided with the display change apparatus concerning this embodiment. It is a schematic diagram which shows the outline | summary of the style change in a terminal provided with the display change apparatus concerning this embodiment. (A)-(C) is a figure which shows the style prepared with respect to the content which a terminal provided with the display change apparatus concerning this embodiment acquires, Comprising: (A) shows the style for smart phones. (B) shows the style for tablets, and (C) shows the style for PCs. It is a figure which shows the media query contained in the CSS file of the content which a terminal provided with the display change apparatus concerning this embodiment acquires. (A)-(C) are the schematic diagrams for demonstrating the style change method in a terminal provided with the display change apparatus concerning this embodiment. (A), (B) is a schematic diagram for demonstrating the style preservation | save method in a terminal provided with the display change apparatus concerning this embodiment. It is a figure which shows the hardware constitutions of a terminal provided with the display change apparatus concerning this embodiment. It is a flowchart for demonstrating the screen display process in a terminal provided with the display change apparatus concerning this embodiment. It is a flowchart for demonstrating the rule extraction process in a terminal provided with the display change apparatus concerning this embodiment. (A), (B) is a figure for demonstrating the acquisition method of the conditions contained in the rule in the rule extraction process by the terminal provided with the display change apparatus concerning this embodiment. It is a figure for demonstrating the extraction method of "media", "min-width", and "max-width" in the rule extraction process of a terminal provided with the display change apparatus concerning this embodiment. It is a figure which shows the rule table produced in the rule extraction process of a terminal provided with the display change apparatus concerning this embodiment. It is a flowchart for demonstrating the rewriting information generation process in a terminal provided with the display change apparatus concerning this embodiment. It is a figure which shows the rewriting information table produced by the rewriting information generation process in a terminal provided with the display change apparatus concerning this embodiment. It is a figure which shows the other example of the media query contained in the CSS file of the content which a terminal provided with the display change apparatus concerning this embodiment acquires. It is a figure which shows the other example of the rule table produced in the rule extraction process of a terminal provided with the display change apparatus concerning this embodiment. It is a figure which shows the other example of the rewriting information table produced by the rewriting information generation process in a terminal provided with the display change apparatus concerning this embodiment. It is a flowchart for demonstrating the rule rewriting process in a terminal provided with the display change apparatus concerning this embodiment. (A), (B) is a figure for demonstrating how a rule is rewritten by the rule rewriting process in the terminal provided with the display change apparatus concerning this embodiment, (A) is before rewriting. It shows how it looks, and (B) shows what it looks like after rewriting. It is a figure for demonstrating the rewriting method of the rule in the rule rewriting process by the terminal provided with the display change apparatus concerning this embodiment. It is a flowchart for demonstrating the screen change display process in a terminal provided with the display change apparatus concerning this embodiment. It is a flowchart for demonstrating an example of the style change process in a terminal provided with the display change apparatus concerning this embodiment. It is a flowchart for demonstrating the other example of the style change process in a terminal provided with the display change apparatus concerning this embodiment. It is a flowchart for demonstrating the preservation | save process in a terminal provided with the display change apparatus concerning this embodiment. It is a figure for demonstrating the preservation | save method in the preservation | save process by the terminal provided with the display change apparatus concerning this embodiment. It is a figure which shows the rewriting information table at the time of re-access created by the preservation | save process in a terminal provided with the display change apparatus concerning this embodiment. It is a flowchart for demonstrating the rewriting process at the time of re-access in a terminal provided with the display change apparatus concerning this embodiment. It is a figure for demonstrating the mounting method to the terminal of the display change apparatus concerning this embodiment. It is a figure for demonstrating the mounting method to the terminal of the display change apparatus concerning this embodiment. It is a figure for demonstrating the other mounting method to the terminal of the display change apparatus concerning this embodiment.

Hereinafter, a display change program, a display change method, and a display change device according to an embodiment of the present invention will be described with reference to FIGS.
As shown in FIG. 2, the display change device according to the present embodiment is provided in a terminal 1 such as a smartphone, a tablet, or a PC, for example, a CSS (Cascading Style Sheet) file including an HTML file and a media query (Media Query), for example. When acquiring content from a Web site (Web server) 70 that provides responsive Web design compatible content, the display screen width set as a condition does not match the actual situation, and the user is applied according to the media query When the style (layout) is not suitable, the terminal 1 is operated so that the style can be dynamically switched. That is, it is possible to select a suitable style at the time of browsing by the user, not at the time of content development. The content is also referred to as Web content. The content also includes content provided by, for example, a Web application.

  In the present embodiment, the content corresponding to responsive web design is composed of, for example, an HTML file and a CSS file, and the CSS file is a style (style sheet) applied according to conditions such as a display screen width defined as a specification in CSS3. Contains media queries used to switch between. In this media query, a plurality of styles are defined on the condition of the display screen width. That is, in the media query, several types of styles (style sheets) such as those for smartphones, tablets, and PCs are defined in association with display screen widths as conditions for applying each style. This media query is configured as a set of rules (R0,..., Rn). This can be acquired as a JavaScript (registered trademark) object. Each rule of media query is an expression that evaluates to either “True” or “False”, and is a condition (expression) such as media type or display screen width, style (style) Rules; CSS; CSS rules). The browser provided in the terminal that has acquired such responsive web design-compatible content evaluates the true or false of each rule of the media query, and the style evaluated as “true”. Is applied, and the content screen is displayed without applying the style evaluated as “False”. That is, the browser provided in the terminal that has acquired the content corresponding to the responsive web design displays the content screen by applying the style that satisfies the condition of the display screen width. The browser is also referred to as a web browser. The content screen is also referred to as a web page.

For example, as shown in FIG. 3, in the content corresponding to the responsive web design in which three styles of the style S0 for the smartphone, the style S1 for the tablet, and the style S2 for the PC are prepared, the CSS file is shown in FIG. Contains a media query as shown.
Here, the media query is configured as a set of rules described after @media, that is, a rule for the style S0 for smartphones, a rule for the style S1 for tablets, and a rule for the style S2 for PCs. Yes. Here, the case where a media query is described by the @media rule is described as an example, but other media designations such as a media attribute value used in a link element in an @import rule or an HTML document can be specified. A media query may be described at a location.

  Among these, the rules for the smartphone style S0 include “screen” as the media type, “(min-width: 0px) and (max-width: 320px)” as the condition, and “CSS for smartphone” as the style. This rule instructs the browser to apply CSS for smartphones when the display screen width of the browser is 0 pixel or more and 320 pixels or less. The rules for the tablet style S1 include “screen” as the media type, “(min-width: 321px) and (max-width: 768px)” as the condition, and “CSS for tablet” as the style. This rule instructs the browser to apply the tablet-oriented CSS when the display screen width of the browser is not less than 321 pixels and not more than 768 pixels. Further, the rules for the PC style S2 include “screen” as the media type, “(min-width: 769px)” as the condition, and “CSS for PC” as the style. This rule instructs the browser to apply the CSS for PC when the browser display screen width is 769 pixels or more. In this example, the content developer assumes a smartphone having a display screen width of 0 to 320 pixels as a smartphone, assumes a tablet having a display screen width of 321 to 768 pixels as a tablet, and 769 pixels or more. The display screen width is assumed to be a PC, and the style is switched using 320 pixels and 768 pixels as break points (threshold values), respectively. The browser display screen is also referred to as a browser display area or a browser window. Further, in a terminal such as a smartphone or a tablet, the size of the display screen of the browser (mobile browser) is fixed and cannot be arbitrarily resized, so the display screen width of the browser matches the screen width of the terminal. Here, the style is switched based on the display screen width of the browser, but the screen width of the terminal may be used instead of the display screen width of the browser.

  For example, if the display screen width of the browser provided in the terminal that has acquired the content corresponding to such responsive Web design is 330 pixels, this satisfies the condition of 321 to 768 pixels. For this reason, a browser applies CSS for tablets and displays a content screen. That is, the browser evaluates the rule for the style S1 for the tablet as “true”, evaluates the rule for the style S0 for the smartphone and the rule for the style S2 for the PC as “false”, The style S1 for tablets evaluated as “True” is applied to display the content screen.

However, the display screen width set by the content developer as a condition for applying each style may not match the actual situation, and the user may feel that the style of the content screen displayed as described above is not suitable.
In particular, a content developer can set the display screen width as a condition for applying each style assuming an existing terminal or browser. It is difficult to respond, and the display screen width set as a condition is not suitable for the actual situation, and the user may feel that the style is not suitable.

In addition, since the terminal applies a style that satisfies the conditions of the display screen width, the display screen width set as a condition does not match the actual situation, and the user feels that the style is not suitable. However, the style cannot be changed to a style other than the style satisfying the display screen width, that is, the style not satisfying the display screen width condition.
For example, in a terminal such as a smartphone or a tablet, a style that satisfies the condition of the display screen width is uniquely applied based on the display screen width of the browser (or the screen width of the terminal). For this reason, even if the user feels that the style is not suitable, it cannot be changed to a style other than the style that satisfies the condition of the display screen width, that is, the style that does not satisfy the condition of the display screen width.

  In such a terminal such as a smartphone or a tablet, the user cannot arbitrarily change the size (window size) of the browser display screen, whereas in the terminal such as a PC, the user cannot change the browser display screen. The size (window size) can be changed arbitrarily. For this reason, when the user changes the size of the display screen of the browser, the applied style can be switched. In other words, if the user matches the size of the browser display screen to the screen size of the terminal, the PC-oriented style is applied and the browser display screen size is made smaller than the terminal screen size. Depending on the degree, a style for tablets and a style for smartphones can be applied. However, in such a case, only the style that satisfies the display screen width of the browser is applied, and when the user feels that the style is not suitable, the style other than the style that satisfies the display screen width is applied. It is not possible to change to a style that does not satisfy the condition of the display screen width.

Therefore, in this embodiment, when the display screen width set as a condition is not suitable for the actual situation and the user feels that the style applied according to the media query is not suitable, the terminal 1 is operated to The style can be changed to a style that does not satisfy the condition of the display screen width.
Here, as shown in FIG. 5A, in the state where the content screen is displayed on the terminal screen 1A as described above, for example, an instruction from the user such as flick (flicking the screen with a finger) is given. When received, a dialog box 1B including, for example, a “Change” button and a “Save” button is displayed as shown in FIG. When the user feels that the current style is not appropriate and presses the “Change” button in the dialog box 1B, that is, when a style change instruction is received, as shown in FIG. The style is switched to a style that does not satisfy the condition of the display screen width. Here, as described above, as a style satisfying the condition of the display screen width, a content screen to which a style S1 for tablets is applied is changed to a content screen (style change screen) to which a style S2 for PC is applied. I try to switch.

When the user presses the “Change” button again, the content screen to which the style S2 for PC is applied is switched to the content screen (style change screen) to which the style S0 for smartphone is applied, for example. ing.
In this way, each time the user presses the “Change” button, the style S2 for PC, the style S0 for smartphone, and the style S1 for tablet are sequentially applied to switch the style.

  Here, button press is used as a style switching event (style change event). However, the present invention is not limited to this, and an event that can be recognized by the browser of the terminal 1 may be used. For example, a tap or flick may be used, or the style may be switched by an operation of shaking the terminal 1 triggered by a devicemotion event called when the acceleration of the terminal 1 is changed.

  In the present embodiment, as shown in FIG. 6A, the user displays a content screen to which a style S2 for PC, for example, is displayed on the terminal screen 1A, as shown in FIG. When the dialog box 1B is displayed and the “Save” button in the dialog box 1B is pressed, that is, when a style saving instruction is received, information necessary for the style applied at that time is displayed. (Rewriting information to be described later) and a website address are associated with each other and stored in a local storage (hard disk; storage unit).

Then, when the user accesses the website again with the terminal 1, information necessary for making the style received the save instruction from the local storage based on the address of the website (rewrite information described later) And applying a style based on this to display the content screen.
In order to realize these, in the present embodiment, for example, a terminal 1 such as a smartphone, a tablet, or a PC is provided with a display change device described later. Note that the terminal 1 is also referred to as a use terminal, a communication terminal, an information terminal, or the like.

Here, the terminal 1 provided with the display change apparatus mentioned later is comprised as follows.
First, the hardware configuration of the terminal 1 will be described with reference to FIG.
The terminal 1 is a computer, and its hardware configuration is, for example, as shown in FIG. 7, a CPU (Central Processing Unit) 102, a memory 101, a communication control unit 109, an input device 106, a display control unit 103, and a display device 104. , A storage device 105, and a drive device 107 for a portable recording medium 108, which are connected to each other via a bus 110. Note that the hardware configuration of the present apparatus is not limited to this. For example, the portable recording medium 108 may not include the drive device 107.

Here, the CPU 102 controls the entire computer, reads the program into the memory 101 and executes it, and performs processing necessary for the terminal 1 including the display change device.
The memory 101 is a main storage device such as a RAM, and temporarily stores a program or data when executing a program, rewriting data, or the like.

The communication control unit 109 (communication interface) is used to communicate with other devices via a network such as a LAN or the Internet. The communication control unit 109 may be incorporated in the computer from the beginning, or may be a NIC (Network Interface Card) attached to the computer later.
The input device 106 is, for example, a touch panel, a push button, a pointing device such as a mouse, a keyboard, or the like.

The display device 104 is a display device such as a liquid crystal display.
The display control unit 103 performs control for displaying, for example, a content screen on the display device 104.
The storage device 105 is an auxiliary storage device such as a hard disk drive (HDD) or an SSD, and stores various programs and various data. In particular, in the present embodiment, the storage device 105 stores a browser program and a display change program. As the memory 101, for example, a ROM (Read Only Memory) may be provided, and various programs and various data may be stored therein.

The drive device 107 is for accessing the storage contents of a portable recording medium 108 such as a semiconductor memory such as a flash memory, an optical disk, or a magneto-optical disk.
In the terminal 1 having such a hardware configuration, the CPU 102 reads out, for example, a browser program stored in the storage device 105 to the memory 101 and executes it, whereby each function of the browser, that is, the screen display shown in FIG. Part 2 is realized. Further, in the terminal 1, the CPU 102 reads out and executes, for example, the display change program stored in the storage device 105 into the memory 101, so that each function of the display change device, that is, the style change unit 3 shown in FIG. Realized. Here, the display change program is described in a language (JavaScript here) that can be interpreted by the browser. The browser has a Javascript engine.

  That is, in the present embodiment, the terminal 1 includes a screen display unit (browser) 2 and a style change unit (display change device) 3 as shown in FIG. Display change method). Here, the screen display process is a process executed by the CPU 102 in accordance with the browser program read into the main memory 101, and the display change process is a process (display change) executed by the CPU 102 in accordance with the display change program read into the main memory 101. Method).

Here, the screen display unit 2 includes an analysis unit 4 and a drawing unit 5, and each of the following processes is performed.
The analysis unit 4 analyzes the content acquired from the website. Here, the analysis unit 4 analyzes the HTML file and the CSS file acquired from the website, and stores them in the memory 101 as a DOM (Document Object Model) tree and a style rule (see step S10 in FIG. 8). Here, the part holding the DOM tree on the memory 101 is called a DOM tree holding unit 101A, and the part holding the style rule on the memory 101 is called a style rule holding unit 101B. Note that the specifications of the DOM tree and style rules are defined in W3C Document Object Model Level 2 Style Specification (DOM2SS).

  The drawing unit 5 draws the content screen based on the DOM tree and style rules held on the memory 101 (see step S20 in FIG. 8). That is, the drawing unit 5 draws the content screen by applying the style rule to the DOM tree. When the style rule is rewritten, the drawing unit 5 again applies the rewritten style rule to the DOM tree to draw the content screen (see steps S30 and S40 in FIG. 8).

In the present embodiment, the CSS file includes a media query as described above (see FIG. 4), for example. Here, the display screen width of the browser provided in the terminal 1 is, for example, 330 pixels.
For this reason, when the screen display unit 2 analyzes the media query included in the CSS file and applies the style rule stored in the memory 101 to the DOM tree, the display pixel width 330 pixels of the browser is Assuming that the condition of 321 pixels or more and 768 pixels or less is satisfied, the content screen is displayed by applying CSS for tablets. In other words, the screen display unit 2 evaluates the rule for the style S1 for tablets as “True”, and evaluates the rule for the style S0 for smartphones and the rule for the style S2 for PC as “False”. Then, the style S1 for tablets evaluated as “True” is applied to display the content screen.

As described above, the screen display unit 2 applies the condition satisfaction style (here, the style S1 for a tablet) that satisfies the condition of the display screen width among the plurality of styles defined on the condition of the display screen width as a content screen. Is displayed.
The style changing unit 3 changes the applied style when receiving a style change instruction. In other words, the style changing unit 3 issues a style change instruction in a state where the content screen is displayed by applying a condition satisfying style that satisfies the condition of the display screen width among a plurality of styles defined on the condition of the display screen width. When received, the condition for each of the plurality of styles is rewritten to “true” or “false” so that a style other than the condition satisfaction style is applied.

For this reason, the style changing unit 3 includes a rule extracting unit 6, a rewriting information generating unit 7, and a rule rewriting unit 8, each of which performs the following processing.
The rule extraction unit 6 acquires conditions included in the rules for all styles obtained by analyzing the media query of the CSS file from the memory 101 (here, the style rule holding unit 101B), and sets the conditions regarding the display screen width. Extract and store in the rule table (see FIG. 12).

  Here, first, the rule extraction unit 6 acquires conditions included in the rules for all the styles obtained by analyzing the media query of the CSS file from the memory 101 (here, the style rule holding unit 101B) (see FIG. 9 step A10). Here, CSS object model and interface are defined in DOM2SS of W3C, and this specification is implemented in the browser of terminal 1 that can handle media queries. The condition included in the rule can be acquired by access based on this specification. Here, when the media query of the CSS file includes a rule for the style S0 for the smartphone as shown in FIG. 10A, the rule for the style S0 for the smartphone included in the media query of the CSS file is analyzed. The conditions included in the rule obtained here (here, MediaText of the cssRule object set whose type specified by DOM2SS is MEDIA_RULE) can be obtained by a code as shown in FIG. Here, as a condition included in the rule obtained by analyzing the rule for the style S0 for smartphones included in the media query of the CSS file, “only screen and (min-width: 0px) and (max-width : 320px) "is acquired. In FIG. 10B, the log output is also displayed on the lower side for reference. Similarly, the conditions included in the rules obtained by analyzing the rules for the style S1 for tablets included in the media query of the CSS file and the rules obtained by analyzing the rules for the style S2 for PCs Conditions can also be obtained. Here, as a condition included in the rule obtained by analyzing the rule for the style S1 for tablets included in the media query of the CSS file, “only screen and (min-width: 321px) and (max-width : 768px) ”is acquired, and“ only screen and (min-width: 769px) ”is acquired as a condition included in the rule obtained by analyzing the rule for the style S2 for PC. The conditions included in these rules are acquired in association with index numbers (index number of cssRule object set; rule_num) (see step A10 in FIG. 9). Here, the condition included in the rule obtained by analyzing the rule for the style S0 for smartphones is acquired in association with the index number “0”. The condition included in the rule obtained by analyzing the rule for the style S1 for tablets is acquired in association with the index number “1”. Further, the condition included in the rule obtained by analyzing the rule for the style S2 for PC is acquired in association with the index number “2”. In this way, the conditions included in the rules for all styles obtained by analyzing the media query of the CSS file can be acquired. That is, it is possible to acquire all the rules for a plurality of styles that are defined by the display screen width as a condition in the media query of the CSS file, that is, all the rules for the styles that can be switched based on the display screen width.

  Next, the rule extraction unit 6 uses “regular expressions” from among the conditions included in the rules for all the styles acquired as described above to perform “media”, “min-width”, “max-width”. Each value (attribute value) is extracted (see step A20 in FIG. 9). For example, the values of “media”, “min-width”, and “max-width” out of the conditions included in the rules for the smartphone style acquired as described above are as shown in FIG. Can be extracted by simple code. In FIG. 11, the log output is also displayed on the lower side for reference.

  Next, the rule extraction unit 6 sequentially determines whether or not the value of “media” extracted from the conditions included in the rules for all styles as described above is “screen” ( When it is determined that the value of “media” is “screen”, the process proceeds to the YES route, and the values of “rule_num”, “min-width”, and “max-width” are set. Store in the rule table (see step A40 in FIG. 9). On the other hand, when it is determined that the value of “media” is not “screen”, these values are not stored in the rule table. In this way, as shown in FIG. 12, a rule table is created in which the index number (rule_num) is associated with the condition related to the display screen width (minimum width “min-width”, maximum width “max-width”). Is done.

  As shown in FIG. 1, the rewrite information generation unit 7 occurs as a combination of evaluations (“true” or “false”) as to whether or not a condition regarding each display screen width is satisfied for various display screen widths. All the obtained items are extracted, and by using this, a rewrite code for rewriting the condition relating to the display screen width included in the rule held in the style rule holding unit 101B on the memory 101 is generated, and the rewrite information table on the memory 101 is generated. Store in 101C. The rewrite information table 101C is also referred to as a rewrite information holding unit.

First, the rewrite information generation unit 7 uses the rule table (see FIG. 12) created as described above to determine whether or not a condition for each display screen width is satisfied for various display screen widths. All possible combinations (rule sets; rule sets) of evaluation (“true” or “false”) are extracted (see step B10 in FIG. 13). That is, a power set of conditions related to the display screen width associated with each of the index numbers “0” to “2” stored in the rule table (see FIG. 12) created as described above, The evaluation (“true” or “false”) of whether or not the condition regarding the display screen width associated with each of the index numbers “0” to “2” is satisfied with respect to various display screen widths (2) Extract all possible combinations of the ^three combinations.

  For example, first, the minimum width “min-width” and the maximum width “max-” of the index numbers “0”, “1”, and “2” are determined from the rule table (see FIG. 12) created as described above. Get the value set as “width” and set the minimum width “min-width” for each of index numbers “0”, “1” and “2” while changing the value of display screen width x (variable) Satisfies the logical expression defined by the value set and the value set as the maximum width “max-width”, that is, is equal to or greater than the value set as the minimum width and set as the maximum width. By evaluating whether or not the condition that the value is less than or equal to a certain value is satisfied, it is possible to evaluate whether or not the condition relating to each display screen width is satisfied (“true” or “false”). ) All possible combinations It can be out.

  In the present embodiment, there is no display screen width that satisfies the conditions regarding each display screen width at the same time. For this reason, (1) the condition relating to the display screen width associated with the index number “0” is satisfied (that is, the evaluation is “true”), and the index numbers “1” and “2” are associated with each. (2) the condition regarding the display screen width associated with the index number “1” is satisfied (that is, the evaluation is “true”), and , The condition regarding the display screen width associated with each of the index numbers “0” and “2” is not satisfied (that is, the evaluation is “false”), and (3) the display is associated with the index number “2”. The condition regarding the screen width is satisfied (that is, the evaluation is “true”), and the condition regarding the display screen width associated with each of the index numbers “0” and “1” is not satisfied (that is, the evaluation is performed). False "), three combinations of (the ensemble) is extracted. These three combinations are expressed as {0}, {1}, and {2}, respectively, using an index number (rule_num) of evaluation “true”. Here, {0}, {1}, and {2} mean a set of index numbers with an evaluation of “true” and are referred to as ruleset indexes. Then, the three combinations {0}, {1}, {2} extracted in this way are index numbers (set_index) of the rewrite information table 101C (see FIG. 14) held in the memory 101, respectively. Stored in the “rule_index (rule set index)” column of the row designated by “0”, “1”, “2” (see step B20 in FIG. 13). Here, the ruleset indexes (rule_index) {0}, {1}, {2} extracted as described above are stored in the rewrite information table 101C. Since it is only used to generate the rewrite code, it may not be retained after the rewrite code is generated.

  Next, the rewrite information generation unit 7 uses the ruleset index (rule_index) {0}, {1}, {2} extracted as described above to index the style rule holding unit 101B on the memory 101. A rewrite code for rewriting a condition relating to the display screen width included in the rule associated with the number (rule_num) is generated (see step B30 in FIG. 13). That is, the index numbers (rule_num) “0”, “1”, “1” described in each of the indexes (rule_index) {0}, {1}, {2} of the rule set extracted as described above. 2 ”is used to rewrite the condition relating to the display screen width associated with these to“ true ”and the condition relating to the display screen width associated with the undescribed index number (rule_num) to“ false ”. Generate rewrite code. Here, as shown in FIG. 14, by using the index number (rule_num) “0” described in the rule set index (rule_index) {0} extracted as described above as the rewrite code, applyMQ ( {{0: true}, {1: false}, {2: false}}) and using the index number (rule_num) “1” described in the rule set index (rule_index) {1} , ApplyMQ ({{0: false}, {1: true}, {2: false}}) is generated, and the index number (rule_num) “2” described in the rule set index (rule_index) {2} Is used to generate applyMQ ({{0: false}, {1: false}, {2: true}}). Then, the rewrite code generated in this way is replaced with the “rewrite code” of the row specified by the index number (set_index) “0”, “1”, “2” of the rewrite information table (see FIG. 14), respectively. (See step B40 in FIG. 13). The rewrite code is also referred to as an application code or an execution code.

  Next, the rewrite information generation unit 7 converts information indicating the current state, that is, authenticity information (true or false), which is information indicating which rule set index (rule_index) is valid, into the rewrite information. Stored in the “status” column of the row specified by the index number (set_index) “0”, “1”, “2” of the table (see FIG. 14) (see step B50 in FIG. 13). Here, the rewrite information generation unit 7 stores the information indicating the current state in the rewrite information table (see FIG. 14) when the content screen is first displayed. In the present embodiment, when the content screen is first displayed, the screen display unit 2 evaluates the rule for the style S1 for tablets as “True” as described above, and the style S0 for smartphones. The rule for and the rule for the style S2 for PC are evaluated as “False”, and the content screen is displayed by applying the style S1 for tablets evaluated as “True”. For this reason, in this embodiment, as shown in FIG. 14, “true” is displayed as information indicating the current state in the “state” column of the row specified by the index number (set_index) “1” of the rewrite information table. ”(True) and“ false ”(false) as information indicating the current state in the“ state ”column of the row specified by the index number (set_index)“ 0 ”,“ 2 ”of the rewrite information table. ).

  Note that, here, the case where the CSS file includes a media query as shown in FIG. 4 has been described as an example. Therefore, there is no display screen width that satisfies the conditions regarding each display screen width at the same time, and the CSS file is extracted. The rule set index (rule_index) includes one index number (rule_num), such as {0}, {1}, {2}, and the generated rewrite code is Each contains one true, but is not limited to this.

  For example, the CSS file may include a media query as shown in FIG. In this media query, max-width is not set in the rules for any style. That is, in this media query, the rules for the style S0 for smartphones include “screen” as the media type, “(min-width: 0px)” as the condition, and “CSS for smartphones” as the style. This rule instructs the browser to apply CSS for smartphones when the display screen width of the browser is 0 pixel or more. The rules for the tablet style S1 include “screen” as the media type, “(min-width: 320px)” as the condition, and “CSS for tablet” as the style. This rule instructs the browser to apply the CSS for tablets when the display screen width of the browser is 320 pixels or more. The rules for the PC style S2 include “screen” as the media type, “(min-width: 768px)” as the condition, and “CSS for PC” as the style. This rule instructs the browser to apply the CSS for PC when the browser display screen width is 768 pixels or more. In this case, as in the above-described embodiment, when the conditions included in the rules for all the styles obtained by analyzing such a media query are acquired, the conditions regarding the display screen width are extracted and stored in the rule table The rule table is as shown in FIG. Then, as in the above-described embodiment, using this rule table, for all display screen widths, extract all possible occurrences of combinations of evaluations as to whether or not the conditions related to the respective display screen widths are satisfied. When the condition regarding the display screen width associated with the index number “2” is satisfied, the condition regarding the display screen width associated with the index number “1” is always satisfied, and the condition is associated with the index number “1”. When the condition regarding the display screen width being satisfied is satisfied, the condition regarding the display screen width associated with the index number “0” is always satisfied, so the index (rule_index) of the extracted rule set is {0}, {0 , 1}, {0, 1, 2}. When rewrite codes are generated using indexes (rule_index) {0}, {0, 1}, {0, 1, 2} of these rule sets, applyMQ ({{0: true}, {1: false, respectively) }, {2: false}}), applyMQ ({{0: true}, {1: true}, {2: false}}), applyMQ ({{0: true}, {1: true}, {2 : true}}). The rewrite information table is as shown in FIG. In this way, the extracted rule set index (rule_index) does not contain one index number (rule_num), and the generated rewrite codes do not contain true one by one. is there. In addition, when the conditions regarding two or three display screen widths are satisfied, the styles described in the media query are applied in order from the top (here, CSS for smartphones, CSS for tablets, and CSS for PCs are applied in this order), It is overwritten and the style which combined these styles is applied.

  As shown in FIG. 1, the rule rewriting unit 8 applies a condition satisfaction style that satisfies the condition of the display screen width among a plurality of styles defined with the display screen width as a condition, and displays the content screen. When a style change instruction is received, the rewrite information is acquired, and the condition for each of the plurality of styles is rewritten to “true” or “false” based on the rewrite information so that a style other than the condition satisfaction style is applied. . In other words, in the present embodiment, a style change instruction is received in a state where a content screen is displayed by applying a condition satisfying style that satisfies the condition of the display screen width among a plurality of styles defined with the display screen width as a condition. The acquisition unit 8A for acquiring the rewrite information, and the rewrite unit for rewriting the condition for each of the plurality of styles to “true” or “false” based on the rewrite information so that a style other than the condition satisfaction style is applied. 8B.

  In the present embodiment, when the rule rewriting unit 8 receives a style change instruction, the rule rewriting unit 8 acquires a rewrite code using the index number (set_index) from the above-described rewrite information table (see FIG. 14) as rewrite information. The rewrite code is executed by the Javascript engine provided in the browser, and is included in the rules for all the styles obtained by analyzing the media query of the CSS file held on the memory 101 (style rule holding unit 101B). Rewrite the condition to “true” or “false”. The rewrite code is rewrite information for rewriting conditions (application conditions) for each of a plurality of styles. Here, the rewrite code is used as the rewrite information. However, the rewrite information is not limited to this, and may be information necessary to rewrite the conditions for each of the plurality of styles.

  That is, as a condition included in the rules for all styles obtained by analyzing the media query of the CSS file, a condition as shown in FIG. 19A is held on the memory 101 (style rule holding unit 101B). ing. Here, as a condition included in the rule obtained by analyzing the rule for the style S0 for smartphones included in the media query of the CSS file, document.styleSheet [ The condition “only screen and (min-width: 0px) and (max-width: 320px)” is held as the value of 0] .cssRule [0]. Further, as a condition included in the rule obtained by analyzing the rule for the style S1 for the tablet included in the media query of the CSS file, document.styleSheet [0 is stored in the memory 101 (style rule holding unit 101B). ] .cssRule [1] holds the condition “only screen and (min-width: 321px) and (max-width: 768px)”. In addition, as a condition included in the rule obtained by analyzing the rule for the style S2 for PC, as a value of document.styleSheet [0] .cssRule [2] on the memory 101 (style rule holding unit 101B), The condition “only screen and (min-width: 769px)” is retained.

  In the present embodiment, when the content screen is first displayed, the screen display unit 2 evaluates the rule for the style S1 for tablets as “True” as described above, and the style S0 for smartphones. The rule for and the rule for the style S2 for PC are evaluated as “False”, and the content screen is displayed by applying the style S1 for tablets evaluated as “True”. For this reason, in this embodiment, as shown in FIG. 14, “true” is stored in the “state” column of the row specified by the index number (set_index) “1” of the rewrite information table. In the rewrite information table, “false” is stored in the “status” column of the row specified by the index numbers (set_index) “0” and “2”.

  When receiving a style change instruction in such a state, the rule rewriting unit 8 uses the index number (set_index) other than the index number (set_index) “1” using “0” or “2”. A rewrite code is acquired from (see FIG. 14) (step C10 in FIG. 18). Here, for example, using the index number (set_index) “0”, from the rewrite information table (see FIG. 14), applyMQ ({{0: true}, {1: false}, {2: false} }). Then, the rewriting code is executed by the Javascript engine provided in the browser to rewrite the conditions included in the rules for each style (step C20 in FIG. 18). Here, FIG. 20 shows an example of the applyMQ method. As a result, document.styleSheet [as a condition included in the rule obtained by analyzing the rule for the style S0 for the smartphone included in the media query of the CSS file on the memory 101 (style rule holding unit 101B). “Only screen and (min-width: 0px) and (max-width: 320px)” (see FIG. 19A) held as the value of 0] .cssRule [0] is shown in FIG. 19B. As shown, it is rewritten to “true”. In addition, it is held as the value of document.styleSheet [0] .cssRule [1] as a condition included in the rule obtained by analyzing the rule for the style S1 for tablets included in the media query of the CSS file. “Only screen and (min-width: 321px) and (max-width: 768px)” (see FIG. 19A) is rewritten to “false” as shown in FIG. 19B. Further, as a condition included in the rule obtained by analyzing the rule for the style S2 for PC, “only screen and (min-width) held as the value of document.styleSheet [0] .cssRule [2] : 769px) "(see FIG. 19A) is rewritten to" false "as shown in FIG. 19B. Here, the conditions included in the rules held on the style rule holding unit 101B on the memory 101 are rewritten, but the present invention is not limited to this, and each style included in the media query is not limited to this. The condition (media query information) for each style obtained by analyzing the rule for “” may be rewritten to “true” or “false”.

  Then, the rule rewriting unit 8 stores information indicating the current state, that is, authenticity information (true or false) indicating which rule set index (rule_index) is valid, in the rewriting information table. The index number (set_index) is stored in the “status” column of the row designated by “0”, “1”, “2” (step C30 in FIG. 18). That is, the rule rewriting unit 8 rewrites the authenticity information stored in the “state” column of the row specified by the index number (set_index) “0”, “1”, “2” of the rewriting information table. Here, “true” is stored as information indicating the current state in the “state” column of the row specified by the index number (set_index) “0” of the rewrite information table, “False” (false) is stored as information indicating the current state in the “state” column of the row specified by the index numbers (set_index) “1” and “2”.

  In this way, when a style change instruction is received in a state where the content screen is displayed by applying a condition satisfying style that satisfies the conditions of the display screen width among a plurality of styles defined with the display screen width as a condition When the rule rewriting unit 8 rewrites the conditions included in the rules for each style obtained by analyzing the media query of the CSS file as described above, the above-described drawing unit 5 again rewrites the rewritten style. Apply the rule to the DOM tree and draw the content screen.

  In other words, in the present embodiment, a style change instruction is received in a state where a content screen is displayed by applying a condition satisfying style that satisfies the condition of the display screen width among a plurality of styles defined with the display screen width as a condition. In this case, the rule rewriting unit 8 obtains rewriting information for rewriting the conditions for each of the plurality of styles, and based on this rewriting information, the condition satisfaction style that satisfies the condition of the display screen width (here, the style S1 for tablets). ) Is set to “false”, and the condition for at least one condition-unsatisfied style (here, style S0 for smartphones) that does not satisfy the display screen width condition is rewritten to “true”. In other words, the rule rewriting unit 8 acquires the rewriting information for rewriting the conditions for each of the plurality of styles, and the condition satisfying style that satisfies the condition of the display screen width based on the rewriting information (here, for the tablet) A rewriting unit 8B that rewrites the condition for the style S1) to “false” and rewrites the condition for at least one condition unsatisfied style (here, the style S0 for smartphones) that does not satisfy the condition of the display screen width to “true”. Then, the drawing unit 5 displays a style change screen in which the style of the content screen is changed by applying at least one condition unsatisfied style among a plurality of styles (here, three styles S0 to S2). That is, the drawing unit 5 displays the content screen by applying the style in which the condition is rewritten to “true”. For this reason, the rule rewriting unit 8 and the drawing unit 5 are collectively referred to as a screen change display unit.

  As described above, in the present embodiment, the screen display unit 2 displays the content screen by applying the condition satisfying style that satisfies the condition of the display screen width among the plurality of styles defined on the condition of the display screen width ( When the screen change display unit receives the style change instruction, the screen change display unit acquires the rewrite information and sets the condition for each of the plurality of styles to “true” or “false” based on the rewrite information. The content screen is displayed by applying the style that is rewritten and the condition is rewritten to “true” (see steps D20 and D30 in FIG. 21).

  When the CSS file includes a media query as shown in FIG. 15, the content screen is applied by applying a condition satisfying style that satisfies the condition of the display screen width among a plurality of styles defined on the condition of the display screen width. When a style change instruction is received in a state where is displayed, the rule rewriting unit 8 obtains rewriting information for rewriting conditions for each of the plurality of styles, and based on the rewriting information, the rule rewriting unit 8 The condition may be rewritten to “false”, or the condition for at least one condition unsatisfied style that does not satisfy the display screen width condition may be rewritten to “true”. Then, the drawing unit 5 applies the at least one condition non-satisfaction style among the plurality of styles (here, three styles) or does not apply at least one condition satisfaction style to the style of the content screen. It is sufficient to display a style change screen that has been changed.

  For example, when the index number (set_index) “1” in the rewrite information table shown in FIG. 17 is switched to “0”, the conditions associated with the index numbers (rule_num) “0” and “1”, that is, the smartphone The condition for style S0 for tablet and style S1 for tablet is “true”, and the condition associated with index number (rule_num) “2”, that is, the condition for style S2 for PC is “false”. From this state, the condition associated with the index number (rule_num) “1”, that is, the condition for the style S1 for tablets is rewritten to “false”. That is, the condition for at least one condition satisfaction style is rewritten to “false”. Then, the drawing unit displays a style change screen in which the style of the content screen is changed without applying at least one condition satisfaction style among a plurality of styles (here, three styles).

  For example, when the index number (set_index) “1” in the rewrite information table shown in FIG. 17 is switched to “2”, the conditions associated with the index numbers (rule_num) “0” and “1”, that is, The condition for the smartphone style S0 and the tablet style S1 is “true”, and the condition associated with the index number (rule_num) “2”, that is, the condition for the PC style S2 is “ From the state of “false”, the condition associated with the index number (rule_num) “2”, that is, the condition for the style S2 for PC is rewritten to “true”. That is, the condition for at least one condition unsatisfied style is rewritten to “true”. Then, the style changing screen is displayed in which the drawing unit 5 changes the style of the content screen by applying at least one condition unsatisfied style among a plurality of styles (here, three styles S0 to S2).

  For this reason, in the present embodiment, the style change instruction is issued in a state in which the content screen is displayed by applying the condition satisfaction style that satisfies the condition of the display screen width among the plurality of styles defined on the condition of the display screen width. When receiving, the acquisition unit 8A for acquiring rewrite information for rewriting the conditions for each of the plurality of styles, and rewriting the condition for at least one condition satisfaction style to “false” based on the rewrite information, or the display screen width And a rewriting unit 8B that rewrites the condition for at least one condition unsatisfied style that does not satisfy the above condition to “true”. In other words, in the present embodiment, a style change instruction is received in a state where a content screen is displayed by applying a condition satisfying style that satisfies the condition of the display screen width among a plurality of styles defined with the display screen width as a condition. In this case, based on the rewriting information, the condition for each of the plurality of styles is rewritten to “true” or “false” so that the acquisition unit 8A that acquires the rewriting information and a style other than the condition satisfaction style is applied. The rewriting unit 8B is provided.

  In the present embodiment, when the user feels that the style satisfying the condition of the display screen width is not suitable and presses the “Change” button in the dialog box 1B (see FIG. 5), that is, the user receives a style change instruction. In this case, the processing by the rule rewriting unit 8 and the processing by the drawing unit 5 are executed via a style change event handler (style switching event handler), and a style other than the style satisfying the display screen width, Changed to a style that does not satisfy the display screen width condition.

  The style change unit 3 applies a style change instruction in a state in which the content screen is displayed by applying a condition satisfying style that satisfies the condition of the display screen width among a plurality of styles defined on the condition of the display screen width. If received, rewrite information is acquired, and processing for rewriting the conditions for each of the multiple styles to “true” or “false” based on the rewrite information so that a style other than the condition satisfaction style is applied. At least the processing by the rule rewriting unit 8 described above may be performed. For example, before receiving the style change instruction, the style change unit 3 performs the process by the rule extraction unit 6 and the process by the rewrite information generation unit 7 before displaying the content screen for the first time, for example. If the style change instruction is received, the processing by the rule rewriting unit 8 may be performed. That is, as the style change process by the style change unit 3, first, the process by the rule extraction unit 6 is performed (see step E10 in FIG. 22), and then the process by the rewrite information generation unit 7 is performed (see FIG. 22). Next, it is determined whether or not a style change instruction has been received (see step S30 in FIG. 22). When the style change instruction has been received, the processing by the rule rewriting unit 8 described above (step E40 in FIG. 22). Reference) may be performed. In this case, when the content screen is displayed for the first time, the process by the above-described rule extraction unit 6 (see step E10 in FIG. 22) and the above-described rewrite information via an event handler that is automatically called when loading is completed. What is necessary is just to make it the process (refer step E20 of FIG. 22) by the production | generation part 7 performed. Further, the style change unit 3 determines whether or not a style change instruction has been received (see step F10 in FIG. 23). When the style change instruction has been received, the process by the rule extraction unit 6 described above (see step F20 in FIG. 23). ), All of the processing by the above-described rewrite information generation unit 7 (see step F30 in FIG. 23) and the above-described processing by the rule rewriting unit 8 (see step F40 in FIG. 23) may be performed.

By the way, in this embodiment, the style change part 3 is further provided with the preservation | save process part 9 and the rewriting part 10 at the time of re-access.
Here, when receiving the style saving instruction, the saving processing unit 9 performs processing for associating the rewriting information applied at that time with the address of the Web site and storing it in the hard disk (storage unit) 105.

  In this embodiment, when the user presses the “Save” button in the dialog box 1B in a state where a content screen to which a certain style is applied is displayed (see FIG. 6), When a style storage instruction is received, the local storage as the storage unit 105 is associated with the rewrite code as the rewrite information applied at that time via the style storage event handler and the URL as the website address. Processing to be stored in (hard disk; browser storage area).

  For example, on a terminal having a browser with a display screen width of 330 pixels, a website with URL “http://example.com/index.html” is accessed, and a content screen to which style S2 for PC is applied is displayed. When the user presses the “Save” button in the dialog box 1B in the state (see FIG. 6), that is, when receiving a style saving instruction, the saving processing unit 9 performs the following processing. . That is, the storage processing unit 9 first determines whether a style storage instruction has been received (see step G10 in FIG. 24). When the style storage instruction has been received, the rewrite information table 101C on the memory 101 (see FIG. 14). The rule set index (rule_index) (here {2}) and the rewrite code [here applyMQ ({here) that are currently valid, that is, the “state” column is “true” {0: false}, {1: false}, {2: true}})] (see step G20 in FIG. 24). Next, the storage processing unit 9 sends the URL of the Web site currently accessed from the browser (here, “http://example.com/index.html”) and the display screen width of the browser (here, 330 pixels). (See step G30 in FIG. 24). Then, the storage processing unit 9 acquires the rule set index (rule_index) (here {2}), the rewrite code [here applyMQ ({{0: false}, {1: false}, {2: true}})], the URL of the website (here "http://example.com/index.html") and the display screen width of the browser (here 330 pixels), for example, in FIG. For example, as shown in FIG. 26, a save process (write process) is executed by a code as shown in FIG. 26. In the URL field of the re-access information table 105A on the hard disk 105 as the local storage, “http: // example.com/index.html ”, 330 in the display screen width field, {2} in the rule set index (rule_index) field, applyMQ ({{0: false}, {1: false}, {2: true}}) are stored (see step G40 in FIG. 24).The re-access time rewriting information table 105A stored in the hard disk 105 as the local storage in this way is retained even after the browser is closed. The reaccess time rewrite information table 105A is also referred to as a reaccess time rewrite information holding unit or saved information.

  If the index number (set_index) used to acquire the rewrite code when receiving the style change instruction is held, the index number (rule_index) of the rule set using the index number (set_index) And a rewrite code may be acquired. Also, here, the re-access time rewrite information table 105A stored in the hard disk 105 as the local storage includes a browser display screen width (width) column and a rule set index (rule_index) column. However, these may not be included.

  As shown in FIG. 1, when the website address is stored in the hard disk (storage unit) 105, the re-access-time rewriting unit 10 rewrites information (in this case, rewriting based on the website address from the hard disk 105. Code) is acquired, and the condition for each of the plurality of styles is rewritten to “true” or “false” based on the rewriting information.

  In the present embodiment, when the user accesses the same website again with the same terminal (browser), the re-access information at the time of re-access stored in the local storage 105 as the storage unit based on the address of the website. A rewrite code as rewrite information is acquired from the table 105A, and a condition for each style is rewritten to “true” or “false” based on the rewrite code.

For example, when the terminal 1 having a browser with a display screen width of 330 pixels is accessed again with the URL “http://example.com/index.html”, the re-access time rewriting unit 10 Perform the following process.
That is, first, the re-access time rewriting unit 10 from the browser, the URL of the currently accessed website (here, “http://example.com/index.html”) and the browser display screen width (here, 330 pixels) is acquired (see step H10 in FIG. 27). Next, the re-access time rewrite unit 10 acquires the URL and the display screen width of the browser from the re-access time rewrite information table 105A on the local storage 105 (see step H20 in FIG. 27).

  Next, the re-access time rewriting unit 10 determines whether or not they match (see step H30 in FIG. 27). If there is a match as a result of this determination, the re-access time rewriting unit 10 determines the URL (here “http://example.com/index.html”) and the browser display screen width (here. 330 pixels), the rewrite code [here applyMQ ({{0: false}, {1: false}, {2: true}) from the re-access time rewrite information table 105A (see FIG. 26) on the local storage 105 is used. })] (See step H40 in FIG. 27), and the rewrite code [here applyMQ ({{0: false}, {1: false}, {2: true}})] is Javascript provided in the browser Run on the engine. As a result, document.styleSheet [as a condition included in the rule obtained by analyzing the rule for the style S0 for the smartphone included in the media query of the CSS file on the memory 101 (style rule holding unit 101B). “Only screen and (min-width: 0px) and (max-width: 320px)” held as the value of 0] .cssRule [0] is rewritten to “false” and included in the media query of the CSS file As a condition included in the rule obtained by analyzing the rule for the style S1 for tablets, “only screen and (min--) stored as the value of document.styleSheet [0] .cssRule [1] width.321px) and (max-width: 768px) ”is rewritten to“ false ”, and the condition included in the rule obtained by analyzing the rule for the style S2 for PC is document.styleSheet [0] .cssRule With the value of [2] "Only screen and (min-width: 769px)" held in this way is rewritten to "true" (see step H50 in FIG. 27). Here, not only the URL but also the display screen width of the browser is acquired and used to determine whether or not they match. However, only the URL is acquired and whether or not only the URL matches is determined. You may make it use for.

  Then, the re-access time rewriting unit 10 rewrites information indicating the current state, that is, authenticity information (true or false) indicating which rule set index (rule_index) is valid. It is stored in the “status” column of the row specified by the index number (set_index) “0”, “1”, “2” of the table 101C (see FIG. 14) (see step H60 in FIG. 27). That is, the re-access time rewriting unit 10 authenticates the authenticity information stored in the “status” column of the row specified by the index number (set_index) “0”, “1”, “2” of the rewriting information table 101C. Rewrite. Here, “true” is stored as information indicating the current state in the “state” column of the row specified by the index number (set_index) “2” of the rewrite information table 101C. “False” (false) is stored as information indicating the current state in the “state” column of the row designated by the index numbers (set_index) “0” and “1” of 101C.

  In this way, when the user accesses the same Web site with the same terminal (browser), the re-access rewriting unit 10 is included in the rules for each style obtained by analyzing the media query of the CSS file. When the condition is rewritten, the drawing unit 5 draws the content screen by applying the rewritten style rule to the DOM tree. As a result, when the user accesses the same website using the same terminal (browser), the content screen to which the style that the user has determined to be suitable when accessed previously is applied is immediately displayed. Become.

Therefore, according to the display change device and the display change method according to the present embodiment, when the display screen width set as a condition is not suitable for the actual situation and the user feels that the style is not suitable, That is, there is an advantage that it can be changed to a style that does not satisfy the condition of the display screen width.
In addition, this invention is not limited to the structure described in embodiment mentioned above, A various deformation | transformation is possible in the range which does not deviate from the meaning of this invention.

  For example, in the above-described embodiment, a function (browser; screen display unit) realized by executing a browser program and a function (display change device; style change unit) realized by executing a display change program However, the present invention is not limited to this, and for example, it may be configured as a browser having a function realized by executing a display change program. In this case, the terminal includes a screen display unit and a style change unit as functions realized by executing the browser program, and screen display processing and display change processing (display change method) are performed by these.

Further, for example, in the above-described embodiment, the terminal 1 that is a computer is described as including a display change program that causes the computer to execute each process in the above-described embodiment. There are various methods as follows.
For example, as shown in FIG. 28, a relay server 60 (such as a proxy server) that relays a request from the browser 50 or a response from the server 70 uses a program insertion function (program insertion unit) 60A to convert the display change program to the response content. Insert it inside. Specifically, when the user accesses the responsive web design-compatible website 70 via the relay server 60, the relay server 60 analyzes the structure of the response HTML, for example, as shown in FIG. A script tag including the address (access destination URL) of the server in which the display change program is stored may be inserted into the response HTML. Instead of inserting a script tag, a display change program (script) may be directly embedded in HTML. This is called a relay server method.

Further, for example, as shown in FIG. 30, after the browser 50 receives the response content by the program insertion function (program insertion unit) 50A as a browser extension function such as a plug-in, the display change program is included in the response content. It may be inserted. This is called a browser plug-in method.
By these methods, the display change program can be incorporated without depending on the content, and can be applied to content provided by an existing Web site.

In addition, for example, the display change program (or the browser including the display change program) may be provided via a network (for example, the Internet, a communication line such as a public line or a dedicated line) as a transmission medium, for example.
For example, the display change program provided by the program provider on another computer such as a server may be installed or downloaded to the storage device via a network such as the Internet or a LAN and a communication interface. As a result, the display change device and the display change method described in the above-described embodiment are realized, and the CPU reads the display change program installed or downloaded in the storage device into the memory as in the above-described embodiment. As a result, each process of the above-described embodiment is performed.

For example, the display change program (or the browser including the display change program) may be provided in a state of being stored in a computer-readable recording medium.
Here, examples of the recording medium include a memory such as a semiconductor memory, a magnetic disk, an optical disk [for example, a CD (Compact Disc) -ROM, a DVD (Digital Versatile Disk), a Blu-ray Disc, etc.], a magneto-optical disk (MO). ) Etc. can be recorded. A magnetic disk, an optical disk, a magneto-optical disk, etc. are also referred to as a portable recording medium.

  In this case, the display change program is read from the portable recording medium via the drive device, and the read display change program is installed in the storage device. As a result, the display change device and the display change method described in the above embodiment are realized, and the CPU reads and executes the display change program installed in the storage device in the same manner as in the above embodiment. As a result, each process of the above-described embodiment is performed. The computer can also read the program directly from the portable recording medium and execute processing according to the program.

Hereinafter, additional notes will be disclosed regarding the above-described embodiment and modifications.
(Appendix 1)
On the computer,
Of the multiple styles that are defined with the display screen width as a condition, rewrite information is displayed when a style change instruction is received in a state where the content screen is displayed by applying a condition satisfaction style that satisfies the conditions of the display screen width. Obtaining and rewriting the condition for each of the plurality of styles to "true" or "false" based on the rewriting information so that a style other than the condition satisfaction style is applied,
A display change program characterized by causing a process to be executed.

(Appendix 2)
The supplementary note 1, wherein when the style saving instruction is received, the computer executes a process of associating the rewriting information applied at that time with the address of the website and storing it in the storage unit. Display change program.
(Appendix 3)
When the address of the website is stored in the storage unit, the rewrite information is acquired from the storage unit based on the address of the website, and the condition for each of the plurality of styles is set based on the rewrite information. The display change program according to appendix 2, wherein the computer is caused to execute a process of rewriting to “true” or “false”.

(Appendix 4)
4. The display change program according to any one of appendices 1 to 3, wherein the computer is caused to execute a process of displaying a content screen by applying a style in which the condition is rewritten to “true”.
(Appendix 5)
Computer
Of the multiple styles that are defined with the display screen width as a condition, rewrite information is displayed when a style change instruction is received in a state where the content screen is displayed by applying a condition satisfaction style that satisfies the conditions of the display screen width. Obtaining and rewriting the condition for each of the plurality of styles to "true" or "false" based on the rewriting information so that a style other than the condition satisfaction style is applied,
A display change method characterized by executing processing.

(Appendix 6)
The appendix 5 is characterized in that, when a style saving instruction is received, the computer executes a process of storing the rewriting information applied at that time and the address of the Web site in association with each other in the storage unit. How to change the display.
(Appendix 7)
When the address of the website is stored in the storage unit, the rewrite information is acquired from the storage unit based on the address of the website, and the condition for each of the plurality of styles is set based on the rewrite information. The display change method according to appendix 6, wherein the computer executes a process of rewriting to “true” or “false”.

(Appendix 8)
The display change method according to any one of appendices 5 to 7, wherein the computer executes a process of displaying a content screen by applying a style in which the condition is rewritten to "true".
(Appendix 9)
Of the multiple styles that are defined with the display screen width as a condition, rewrite information is displayed when a style change instruction is received in a state where the content screen is displayed by applying a condition satisfaction style that satisfies the conditions of the display screen width. An acquisition unit to acquire;
And a rewriting unit that rewrites a condition for each of the plurality of styles to “true” or “false” based on the rewriting information so that a style other than the condition satisfaction style is applied. .

(Appendix 10)
The display change according to appendix 9, further comprising: a storage processing unit that stores the rewriting information applied at that time and the address of the website in association with each other when the style storage instruction is received. apparatus.
(Appendix 11)
When the address of the website is stored in the storage unit, the rewrite information is acquired from the storage unit based on the address of the website, and the condition for the style is set to “true” or based on the rewrite information. The display change device according to appendix 10, further comprising a re-access rewriting unit for rewriting to “false”.

(Appendix 12)
The display change device according to any one of appendices 9 to 11, further comprising a drawing unit that displays a content screen by applying a style in which the condition is rewritten to "true".

1 terminal 1A terminal screen 1B dialog box 2 screen display (browser)
3 Style change section (display change device)
DESCRIPTION OF SYMBOLS 4 Analysis part 5 Drawing part 6 Rule extraction part 7 Rewriting information generation part 8 Rule rewriting part 8A Acquisition part 8B Rewriting part 9 Storage processing part 10 Re-access time rewriting part 50 Browser 50A Program insertion function (program insertion part)
60 relay server 60A program insertion function (program insertion part)
70 Website (Web server)
101 Memory 101A DOM Tree Holding Unit 101B Style Rule Holding Unit 101C Rewrite Information Table 102 CPU
103 Display Control Unit 104 Display Device 105 Storage Device (Local Disk; Hard Disk; Storage Unit)
105A Reaccess information table at re-access 106 Input device 107 Drive device 108 Portable recording medium 109 Communication control unit 110 Bus

Claims (6)

On the computer,
Of the multiple styles that are defined with the display screen width as a condition, rewrite information is displayed when a style change instruction is received in a state where the content screen is displayed by applying a condition satisfaction style that satisfies the conditions of the display screen width. Obtaining and rewriting the condition for each of the plurality of styles to "true" or "false" based on the rewriting information so that a style other than the condition satisfaction style is applied,
A display change program characterized by causing a process to be executed.   2. The computer according to claim 1, wherein when receiving an instruction to save a style, the computer is caused to execute a process of associating the rewriting information applied at that time with the address of the Web site and storing the information in the storage unit. Display change program.   When the address of the website is stored in the storage unit, the rewrite information is acquired from the storage unit based on the address of the website, and the condition for each of the plurality of styles is set based on the rewrite information. The display change program according to claim 2, which causes the computer to execute a process of rewriting “true” or “false”.   The display change program according to any one of claims 1 to 3, wherein the computer is caused to execute a process of displaying a content screen by applying a style in which the condition is rewritten to "true". Computer
Of the multiple styles that are defined with the display screen width as a condition, rewrite information is displayed when a style change instruction is received in a state where the content screen is displayed by applying a condition satisfaction style that satisfies the conditions of the display screen width. Obtaining and rewriting the condition for each of the plurality of styles to "true" or "false" based on the rewriting information so that a style other than the condition satisfaction style is applied,
A display change method characterized by executing processing. Of the multiple styles that are defined with the display screen width as a condition, rewrite information is displayed when a style change instruction is received in a state where the content screen is displayed by applying a condition satisfaction style that satisfies the conditions of the display screen width. An acquisition unit to acquire;
And a rewriting unit that rewrites a condition for each of the plurality of styles to “true” or “false” based on the rewriting information so that a style other than the condition satisfaction style is applied. .

Images