JPWO2013179352A1 - Mobile terminal, conversion program, and conversion method - Google Patents

Abstract

The speed at which the SWF data is converted into data that can be interpreted by the mobile terminal and displayed is improved. A mobile terminal having a Web browser compatible with HTML and Javascript is provided. The mobile terminal extracts the vector shape format data representing SHAPE from the HTML data, the memory storing the first correspondence relationship between the HTML vector shape format data and the javascript function, and the SHAPE is extracted according to the first correspondence relationship. A corresponding JavaScript function is defined based on the first-out vector shape format data to be represented, and a processor for converting the vector shape format data representing the SHAPE into a javascript code.

Description

  The present invention relates to a technique for converting data for indicating a shape into a format in which a browser can output the shape at a higher speed.

  Conventionally, a terminal that downloads SWF data via the Internet or the like and displays a moving image on a display based on the SWF data is known. For example, Japanese Unexamined Patent Application Publication No. 2006-344134 (Patent Document 1) discloses a communication terminal image creation method, apparatus, and service. Specifically, Patent Document 1 includes an information recording unit, an information calculation unit, an information input / output unit, an information display unit, and an information communication unit, and a communication terminal for a user that can reproduce and display a SWF file. A user communication terminal in a system comprising at least a terminal on a network connected to the user communication terminal via the network to exchange information and a network enabling communication between the terminals. In creating an image to be displayed on the information display means, one or a plurality of SWF files that are constituent elements of the image are converted into a program code, combined with a background image file, and then converted into 1 It is described that the files are generated as two SWF files.

JP 2006-344134 A

  However, the mobile terminal may not be equipped with software for directly executing SWF data. Alternatively, since the mobile terminal has less processing capacity and memory capacity of the CPU (Central Processing Unit) than the stationary terminal, the speed at which the SWF data is converted into data that can be interpreted by the mobile terminal is slow. There is. The present invention has been made to solve such a problem, and an object of the present invention is to improve the speed at which the SWF data is converted into data interpretable by the mobile terminal and displayed.

  According to one aspect of the present invention, a mobile terminal compatible with a vector shape format and Javascript is provided. The mobile terminal acquires a vector shape format data representing a SHAPE, a memory for storing the first correspondence relationship between the vector shape format data and the javascript function, and the first SHAPE vector shape format according to the first correspondence relationship A corresponding JavaScript function is defined on the basis of the above data, and a processor for converting the SHAPE vector shape format data into a JavaScript code is provided.

  Preferably, the mobile terminal further includes a display. The processor displays SHAPE on the display based on the converted javascript code.

  Preferably, the mobile terminal further includes a communication interface for receiving FLASH data. The memory stores a second correspondence between FLASH data and HTML data. The processor converts the received FLASH data into HTML data including data in a vector shape format representing SHAPE according to the second correspondence so that data representing the same SHAPE can be recognized.

  According to another aspect of the present invention, a processor of a mobile terminal corresponding to a vector shape format and a javascript obtains data in a vector shape format representing SHAPE, and a SHAPE that appears for the first time according to a predetermined first correspondence relationship. There is provided a conversion program that executes a step of defining a corresponding javascript function based on the vector shape format data and a step of converting the existing SHAPE vector shape format data into a javascript code.

  Preferably, the program causes the mobile terminal to execute a step of causing the display to display SHAPE based on the converted javascript code.

  Preferably, the program receives the FLASH data in the mobile terminal and a vector representing the SHAPE in accordance with a predetermined second correspondence relationship so that the data representing the same SHAPE can be recognized. A step of converting to HTML data including data in a shape format.

  According to another aspect of the present invention, there is provided a conversion method realized by a mobile terminal compatible with a vector shape format and javascript. The conversion method includes a step of acquiring vector shape format data representing SHAPE, a step of defining a corresponding javascript function based on the first SHAPE vector shape format data according to a predetermined first correspondence relationship, Converting the data in the SHAPE vector shape format described above into a javascript code.

  Preferably, the conversion method further includes a step of causing the display to display SHAPE based on the converted JavaScript code.

  Preferably, the conversion method includes a step of receiving the FLASH data, and the received FLASH data in a vector shape format representing the SHAPE according to a predetermined second correspondence so that the data representing the same SHAPE can be recognized. Converting the data into HTML data including the data.

  As described above, according to the present invention, it is possible to improve the speed of converting and displaying SWF data into data that can be interpreted by the mobile terminal.

It is a block diagram showing the hardware constitutions of the smart phone 100 which concerns on this Embodiment. It is a flowchart which shows the operation | movement outline | summary of the conversion process which concerns on this Embodiment. It is an image figure which shows the operation | movement outline | summary of the conversion process which concerns on this Embodiment. It is an image figure which shows the marker of the javascript function which concerns on this Embodiment, a parameter, and description. It is an image figure which shows the conversion process from the HTML5 data showing SHAPE which concerns on this Embodiment to a javascript function. It is an image figure which shows the conversion process from the HTML5 data showing several SHAPE which concerns on this Embodiment to several javascript functions. It is a flowchart which shows the conversion process (step S121) from the HTML5 data showing SHAPE which concerns on this Embodiment to a javascript function. It is an image figure which shows 1st SHAPE and its source code. It is an image figure which shows 2nd SHAPE and its source code. It is an image figure which shows 3rd SHAPE and its source code. It is an image figure which shows 4th SHAPE and its source code. It is an image figure which shows 5th SHAPE and its source code. It is an image figure which shows 6th SHAPE and its source code. It is an image figure which shows 7th SHAPE and its source code. It is an image figure which shows 8th SHAPE and its source code. It is an image figure which shows the SHAPE drawing process after the definition of the javascript function which concerns on this Embodiment. It is a flowchart which shows the SHAPE drawing process after conversion into the javascript code based on this Embodiment. It is an image figure which shows SHAPE finally displayed on the touch panel 130 in a specific example. It is an example of the source code of the input data in a specific example. It is an example of source code for creating (defining) a javascript function in a specific example. It is an example of the source code of the created javascript function in a specific example. It is a flowchart which shows general conversion and a display process. An example of a source code of general conversion and display processing is shown. It is an image figure which shows general conversion and a display process. It is an image figure which shows a part of conversion and display process in this Embodiment. It is an image figure which shows the conversion and display process of this Embodiment, and general conversion and a display process. It is an image figure which shows the difference in the step of conversion and a display process of this Embodiment regarding general SHAPE data, and a general conversion and a display process.

100 Smartphone 110 CPU
120 Memory 121 SWF Data 122 CANVAS Data Representing SHAPE 123 Javascript Code 124 Javascript Function 130 Touch Panel 140 Speaker 150 Microphone 160 Communication Interface 170 Button

  Hereinafter, embodiments of the present invention will be described with reference to the drawings. In the following description, the same parts are denoted by the same reference numerals. Their names and functions are also the same. Therefore, detailed description thereof will not be repeated.

  Hereinafter, the smartphone 100 will be described as a representative example of the “mobile terminal”. However, the “mobile terminal” can be realized by other information terminals having a display such as other mobile phones, electronic notebooks, electronic books, and notebook personal computers.

<Hardware configuration of smartphone 100>
Next, the hardware configuration of the smartphone 100 will be described. FIG. 1 is a block diagram showing a hardware configuration of smartphone 100 according to the present embodiment.

  Referring to FIG. 1, smartphone 100 includes a CPU 110, a memory 120, a touch panel 130, a speaker 140, a microphone 150, a communication interface 160, and a button 170 as main components.

  The memory 120 is realized by various types of RAM (Random Access Memory), ROM (Read-Only Memory), a hard disk, and the like. The memory 120 stores a control program executed by the CPU 110. The memory 120 stores SWF data, HTML data, and the like for displaying moving images or still images. The memory 120 also stores data 127 indicating the correspondence between the vector shape format and the javascript code. The memory 120 stores data 128 indicating the correspondence between FLASH data and HTML data (for example, CANVAS data).

  Touch panel 130 includes a display and a pointing device. The touch panel 130 may be any type such as a resistance film method, a surface acoustic wave method, an infrared method, an electromagnetic induction method, and a capacitance method. The touch panel 130 may include an optical sensor liquid crystal.

  The touch panel 130 displays characters and images based on commands (signals) from the CPU 110. CPU 110 displays characters and images on touch panel 130 based on various data. For example, the CPU 110 displays various software buttons on the touch panel 130 based on the control program, and displays a moving image or a still image based on the HTML data or the Javascript code.

  The touch panel 130 detects a touch operation on the touch panel 130 by an external object every predetermined time, and inputs touch coordinates (contact coordinates) to the CPU 110. In other words, the CPU 110 sequentially acquires touch coordinates from the touch panel 130. CPU110 receives the input of the command from a user based on a touch coordinate.

  The speaker 140 outputs sound based on a signal from the CPU 110. That is, CPU 110 causes speaker 140 to output sound based on the received sound data or the converted sound data.

  The microphone 150 receives sound and inputs a sound signal to the CPU 110. CPU 110 transmits an audio signal to another telephone or the like via communication interface 160 based on the audio signal from microphone 150.

  The communication interface 160 is realized by an antenna or a connector. The communication interface 160 exchanges data with other devices by wired communication or wireless communication. In other words, the CPU 110 receives a program, image data, text data, or the like from another device via the communication interface 160, or transmits image data or text data to another device.

  The button 170 is disposed on the surface of the smartphone 100. A plurality of buttons such as a power key, a home key, a character key, a numeric keypad, a cross key, and an enter key may be arranged on the smartphone 100. The button 170 receives a command from the user. The button 170 inputs a command from the user to the CPU 110.

  CPU110 controls each part of the smart phone 100 by running the control program memorize | stored in the memory 120. FIG. That is, the CPU 110 executes the various processes described below by executing the control program stored in the memory 120.

<Overview of operation>
Below, the conversion process performed by CPU110 of the smart phone 100 is demonstrated. FIG. 2 is a flowchart showing an outline of the operation of the conversion process according to the present embodiment. FIG. 3 is an image diagram showing an outline of the operation of the conversion process according to the present embodiment.

  Referring to FIGS. 2 and 3, CPU 110 receives SWF data 121 via communication interface 160 (step S102).

  The CPU 110 expands the SWF data 121 in the memory 120 and converts each FLASH structure into an HTML5 structure (step S110). For example, the CPU 110 converts data representing the SHAPE of the FLASH structure into the CANVAS data 122 of HTML5 (step S111). More specifically, the CPU 110 stores an identification number for each SHAPE in the CABVAS data 122 representing the SHAPE included in the HTML5 data so that the data indicating the same SHAPE can be identified based on the SWF data 121. The CPU 110 converts the data of other FLASH structures into HTML5 data.

  In the present embodiment, CPU 110 also creates an engine program that is executed on a Web browser for interpreting the converted HTML5 data and displaying a moving image and a still image on touch panel 130.

  The CPU 110 converts the CAN5 data 122 of HTML5 representing SHAPE into the Javascript code 123 (step S120). Specifically, based on the SHAPE identification number, the CPU 110 defines the javascript function 124 based on the first SHAPE CANVAS data 122 in the HTML5 data (step S121). As a result, the javascript function 124 for each SHAPE is stored in the memory 120 so that it can be used immediately by the CPU 110. Based on the SHAPE identification number, the CPU 110 converts the SHAPE CANVAS data 122 (including the first and previously described SHAPE data) in the HTML5 data into the Javascript code 123 (step S121).

  The CPU 110 displays the moving image or the still image on the touch panel 130 based on the HTML5 data and the javascript code by executing the created engine program (step S130).

  As described above, by converting the normal vector shape format into the Javascript code, the processing speed of the analysis of the structured data when displaying moving images and still images is increased, and the displayed SHAPE is also beautiful. .

  Specifically, the merit of using the definition and conversion of the javascript code is that if a javascript function is created (defined) once, the same SHAPE is displayed without selecting the corresponding javascript code for each marker. It becomes possible to convert the data into the JavaScript code. As a result, it is not necessary to search for the corresponding javascript code for each mark every time the SHAPE is drawn even though they are the same, and the time required for the SHAPE drawing process can be shortened.

Hereinafter, a technique for realizing such a function will be described in detail.
<Specific Example of Javascript Function Creation Processing>

  The method for creating a javascript function according to this embodiment is applied when data describing the procedure for drawing a shape is structured, the shape is reconstructed using the structure data, and a line is drawn on an HTML CANVAS element. Is done. The object is to combine the advantages of structured data, such as efficient space (low memory) requirements for shape data, with increased execution speed of Javascript code for drawing shapes.

  In general, to draw a shape from data contained in a shape data structure, the structure is passed to a general-purpose drawing function. Usually, the general drawing function repeats the elements of the shape data structure and performs the requested drawing operation.

  If an equivalent javascript CANVAS drawing command group is generated, a javascript function for drawing a requested shape can be created. This function has several advantages. In other words, it can be generated as needed when required, the JavaScript execution engine may be able to optimize the code more efficiently, and there are no repetitive steps or branch steps from general-purpose drawing functions Therefore, processing can be performed at higher speed.

  Hereinafter, a process for generating a runtime drawing javascript code will be described. Pre-generated runtime javascript code is better optimized than runtime parsing of structured data and has better overall speed and shape drawing performance. This performance improvement is possible by calling a pre-generated javascript function that can be executed faster than parsing structured data at runtime.

  Also, the purpose of generating Javascript code for shape drawing is to configure an optimal approach for the engine to draw a shape during runtime execution. By calling the generated function and executing the pre-generated Javascript code, it is possible to execute the data at a higher speed than when the data array or the object is iterated at the time of runtime parsing or shape drawing.

In order to generate Javascript code, a generator function (generator
a specific data structure is required to pass to (function). The data structure consists of the following collection of objects and properties.
-Paths inside the shape-Position of each point in the shape-Start point and end point of the line-Movement of the canvas context-Line type (straight line or curve)
-Fill type for shape Stroke Single color fill Linear gradient or radial gradient fill Image pattern repeated or non-repetitive fill Clipping mask-Area clipping applied-Others

  The javascript code for each shape is generated in the form of a function. These functions can be called by the engine any number of times during runtime execution to draw shapes on CANVAS. Below, a simple example showing the flow of a process is shown.

  Next, a specific example of a Javascript function creation process will be described. FIG. 4 is an image diagram showing markers, parameters, and descriptions of the javascript function according to the present embodiment. FIG. 5 is an image diagram showing a conversion process from HTML5 data representing SHAPE to a javascript function according to the present embodiment. FIG. 6 is an image diagram showing a conversion process from HTML5 data representing a plurality of SHAPEs to a plurality of javascript functions according to the present embodiment. FIG. 7 is a flowchart showing conversion processing (step S121) from HTML5 data representing SHAPE to a javascript function according to the present embodiment.

  Referring to FIGS. 4 to 7 (and FIG. 20), CPU 110 declares a javascript function for each data (for example, CANVAS data) representing SHAPE among input HTML5 data (step S122). That is, the CPU 110 creates an outline of the function. The generated javascript function has unique identification information for each SHAPE. As a result, the CPU 110 can immediately call the generated javascript function.

  Specifically, CPU 110 receives SHAPE data having a specific vector shape format. For example, the SHAPE data includes information indicating whether the path is within a shape, information indicating the position of each point in the shape, information indicating the position of the start and end points of the line, and CANVAS. Information indicating context movement, information indicating the type of line (straight or curved), information indicating the type of fill, information indicating linear or radial gradient, information indicating repetition of the image pattern, and mask Information indicating that the file is to be cut off is included.

  After the function is declared, the CPU 110 repeats adding a javascript code to the javascript function based on each data indicating SHAPE. Specifically, CPU 110 extracts a mark from input data (step S123).

  CPU110 judges whether a parameter is required for every mark (step S124). If no parameter is required (NO in step S124), CPU 110 executes the processing from step S126. If a parameter is required (YES in step S124), the parameter is extracted from the input data (step S125).

  The CPU 110 identifies the corresponding JavaScript code for each mark and adds it to the JavaScript function (step S126). CPU 110 determines whether or not other marks are included in the input data (step S128). CPU110 repeats the process from step S123, when another mark is contained in input data (when it is YES in step S127). If the input data does not contain another mark (NO in step S127), CPU 110 proceeds to the data conversion process for the next SHAPE.

<Specific example of Javascript code used for Javascript function>
Next, a specific example of the Javascript code used for the Javascript function will be described.

For example, assuming that a CANVAS context already exists, the generated code performs all actions related to the CANVAS context. In the examples in this document, the context is referred to as “ctx” and is generated by the following code:
var canvas =
document.createElement ('canvas');
var ctx = canvas.getContext ('2d');

  Code generation begins by creating a function declaration and configuring the function outline. Each generated function is appropriately assigned a unique ID. Thus, for each shape there is exactly one function corresponding to the shape that can be easily called whenever needed.

  After the code for function declaration is generated, the iteration with shape data begins. An appropriate javascript code block is inserted into the generated code according to the parameters read from the data. Depending on the data, the generator function creates a new path, closes the already started path, creates a gradient, clipping, clip, fill, stroke, Appropriate to perform, such as applying a save, restore or transform, drawing a line or quadratic curve, or performing any other appropriate action Determine the action.

All paths within the shape begin with the following code:
ctx.beginPath ();

If only a line stroke without a fill is required, it can be executed without closing the path in advance, but if a fill is required, the CPU 110 closes the path before applying the fill () command. The source code for closing an open path is as follows:
ctx.closePath ();

  A path is a sequence of lines that outlines a part inside a shape that can have its own fill, line, color, and transformation properties. is there. ClosePath means connecting the end point to the start point. This completely closes the path and allows filling to be performed as needed.

  After the path starts, a sequence of source code lines is generated. This sequence is used to perform canvas context movement and line drawing as needed to generate an exact path as defined by the input data.

  The lines can be straight lines or curved lines. Straight lines are drawn by connecting the current context point position and the x and y coordinates of the end point. Curved lines are drawn as a quadratic curve defined by context points, control points and end points. A quadratic curve is drawn by connecting the current context point position and the x and y coordinates of the end point, but the x and y coordinates of the control point are also used to calculate the curvature of the line. This curvature calculation is performed inside the html5 canvas.

  When a move marker is encountered in the input data, the x and y coordinates are read from the input data and the javascript code is added to the generated source code. Thereby, the movement of the canvas context is executed so that the context pointer is set to an appropriate x, y coordinate.

The following is an example of generated code for moving the canvas context to the x and y coordinates (100, 100).
ctx.moveTo (100,100);

  When the CPU 110 encounters the straight line marker, the end point coordinates (x, y) of the straight line are read from the input data structure, and the Javascript code is generated and added to the generated code. As a result, a line connecting the point position of the current context and the end point coordinates (x, y) is drawn on the canvas.

FIG. 8 is an image diagram showing the first SHAPE and its source code. Referring to FIG. 8, there is an example of generated code for drawing a straight line connecting the pointer position of the current context and the x and y coordinates (200, 100) on the canvas.
ctx.lineTo (200, 100);
The above image is an example of a straight line

  FIG. 9 is an image diagram showing the second SHAPE and its source code. Referring to FIG. 9, when the CPU 110 encounters a curved line marker, the x and y coordinates representing the control point and the x and y coordinates representing the end point of the line are read from the input data structure, and the point position ( A JavaScript code for drawing a quadratic curve connecting the x and y coordinates of P0) and the end point (P2) on the canvas using the control point (P1) having the coordinates x and y is added. For example, FIG. 9 shows generated code for drawing a curve connecting the current context pointer position and x, y coordinates (200,200) on the canvas using control points having x, y coordinates (100,0). Indicates.

  FIG. 10 is an image diagram showing the third SHAPE and its source code. Referring to FIG. 10, when a path is closed, a fill can be applied to the area outlined by the path. Filling is performed by filling a region with a single color, gradient or pattern. The type of fill used is described in the input data. FIG. 10 is an example of a drawing code that fills a square.

  FIG. 11 is an image diagram showing the fourth SHAPE and its source code. Referring to FIG. 11, the stroke is executed by making the line visible on the canvas with the color and line width described in the input data.

  FIG. 12 is an image diagram showing the fifth SHAPE and its source code. Referring to FIG. 12, when CPU 110 encounters a solid color setup marker, it reads red, green, and blue color values and alpha values from the input data to set the style that fills the canvas to the desired color value. Javascript code is generated.

  FIG. 13 is an image diagram showing a sixth SHAPE and its source code. CPU110 produces | generates a source code like FIG. 13, when the marker which shows the coating of transparent color is extracted.

FIG. 14 is an image diagram showing the seventh SHAPE and its source code. Referring to FIG. 14, when CPU 110 encounters a linear gradient marker, CPU 110 detects a new linear gradient (linear gradient).
Add code to create gradient. Thereafter, a color sequence is read from the input data, and an appropriate JavaScript code is generated at the end point of each color and added to the generated code. A linear gradient is defined by an imaginary straight line that defines the direction of the gradient. To set this direction in the generated code, read the transformation matrix from the input data and add code to apply this transformation matrix to the canvas context before the gradient fill is applied.

FIG. 15 is an image diagram showing the eighth SHAPE and its source code. Referring to FIG. 15, when the CPU 110 encounters a radial gradient marker, the CPU 110 starts a new radial gradient (radial gradient).
Add code to create gradient. Thereafter, the color sequence is read from the input data, and an appropriate JavaScript code is generated at the end point of each color and added to the generated code.

  A radial gradient is defined by two fictitious circles (start circle and end circle) that define the direction of the gradient. To set this direction in the generated code, read the transformation matrix from the input data and add code to apply this transformation matrix to the canvas context before the gradient fill is applied.

When the CPU 110 encounters a pattern fill marker, the source image, repeat flag or no repeat flag, and transformation matrix are read from the input data, and Javascript code is generated that creates a pattern used for path fill.
The following is an example of code for repeating the filling of an image pattern.
ctx.createPattern (img,
"repeat");
The following is an example of a code that does not repeat the fill of the image pattern.
ctx.createPattern (img,
"no-repeat");
When the CPU 110 encounters a clip marker, the code for clipping the context is generated and added to the generated Javascript code. The following is an example of a line for clipping a context.
ctx.clip ();

  In conclusion, the process of this embodiment has achieved a more efficient and optimized performance approach towards real-time runtime shape drawing. By transferring the pre-generated data structure, unnecessary overhead of transferring additional data is avoided. Examples of data that may need to be transferred can include various canvas contexts, objects, and accompanying methods and properties.

  A further advantage of this type of data structure transfer can be a simplification of the overall process flow. The advantage of pre-generated Javascript runtime code is that the code is generated just once and can be called at runtime as many times as needed to quickly draw the shape in the required context. This greatly improves performance compared to having to parse the data each time the runtime is run in order to draw the shape.

<SHAPE drawing process after defining the javascript function>
Next, the SHAPE drawing process after the definition of the javascript function (after conversion into the javascript code) will be described.

  As described above, when SHAPE data in a specific vector shape format is input, the CPU 110 defines a javascript function based on the first SHAPE data for each SHAPE, and converts the existing SHAPE data into a javascript code. . Therefore, with respect to the already-described SHAPE data, the CPU 110 does not need to convert the SHAPE data into a javascript code for each marker.

  FIG. 16 is an image diagram showing a SHAPE drawing process after the definition of the javascript function according to the present embodiment. Referring to FIG. 16, CPU 110 directly converts SHAPE data in which a javascript function is defined based on identification information for specifying SHAPE into a corresponding JavaScript code, and based on the JavaScript code, SHAPE Can be displayed.

  FIG. 17 is a flowchart showing the SHAPE drawing process after conversion to the javascript code according to the present embodiment. Referring to FIG. 17, the javascript engine of CPU 110 starts drawing a path based on the converted javascript code (step S131).

  The javascript engine of the CPU 110 moves the context position to coordinates (10, 50) based on the converted javascript code (step S132). The javascript engine of the CPU 110 draws a straight line at coordinates (10, 90) based on the converted javascript code (step S133). The javascript engine of the CPU 110 draws a straight line at coordinates (90, 90) based on the converted javascript code (step S134). The javascript engine of CPU 110 draws a straight line at coordinates (90, 50) based on the converted javascript code (step S135).

  The javascript engine of the CPU 110 draws a curve based on the control coordinates (50, 80) and the end point coordinates (10, 50) based on the converted javascript code (step S136). The javascript engine of the CPU 110 finishes drawing the path based on the converted javascript code (step S137). The Javascript engine of the CPU 110 paints the RGB value (20, 60, 255) in the closed space inside the path based on the converted javascript code (step S138). The CPU 110 draws a line on the path having the bright line width (step S139).

<Specific examples of source code>
Next, an example of input data source code according to the present embodiment, an example of a source code for creating (defining) a javascript function, and an example of a source code of the generated javascript function will be described. FIG. 18 is an image diagram showing SHAPE finally displayed on the touch panel 130 in this specific example. FIG. 19 shows an example of input data source code in this example. FIG. 20 is an example of a source code for creating (defining) a javascript function in this specific example. FIG. 21 is an example of the source code of the created javascript function in this specific example.

  That is, in order to display the SHAPE shown in FIG. 18, the CPU 110 receives the input data shown in FIG. Here, “bp”, “m”, “l”, “q”, “cp”, “ss”, “s”, “fs”, “f” are marker identifiers for specifying the action to be executed. It is.

  If a parameter is required, the parameter is input continuously to the marker. For example, the marker “m” for moving the reference position requires two parameters. However, these rules can be modified or expanded according to the actual usage mode.

  The CPU 110 defines a javascript function from input data according to the source code shown in FIG. Specifically, referring to FIG. 7 and FIG. 20, CPU 110 declares a javascript function. The CPU 110 extracts a predetermined mark from the input data, and converts the mark into a corresponding JavaScript code. The CPU 110 adds the converted javascript code to the javascript function. In this way, the CPU 110 creates a javascript function including a function declaration as shown in FIG. 21 and stores it in the memory 120.

<General conversion processing>
Here, general conversion and display processing, that is, processing that requires more time for conversion and display processing than the above embodiment will be described. FIG. 22 is a flowchart showing general conversion and display processing. FIG. 23 shows an example of a source code for general conversion and display processing.

  Referring to FIGS. 22 and 23, CPU 110 reads input data (step S1301). CPU110 extracts a mark and judges whether the said mark corresponds to "Begin" (step S1311). If the mark corresponds to “Begin” (YES in step S1311), CPU 110 starts drawing SHAPE (step S1312).

  If the mark does not correspond to “Begin” (NO in step S1311), CPU 110 determines whether or not the mark corresponds to “Move to” (step S1321). If the mark corresponds to “Move to” (YES in step S1321), CPU 110 extracts a parameter following the mark (step S1322). The CPU 110 moves the reference position to the coordinates corresponding to the extracted parameter (step S1323).

  If the mark does not correspond to “Move to” (NO in step S1321), CPU 110 determines whether or not the mark corresponds to “Line to” (step S1331). If the mark corresponds to “Line to” (YES in step S1331), CPU 110 extracts a parameter following the mark (step S1332). The CPU 110 draws a straight line from the reference position to the coordinates corresponding to the parameter (step S1333).

  If the mark does not correspond to “Line to” (NO in step S1331), CPU 110 determines whether or not the mark corresponds to “Qline to” (step S1341). When the mark corresponds to “Qline to” (YES in step S1341), CPU 110 extracts a parameter following the mark (step S1342). The CPU 110 draws a curve from the reference position based on the parameter (step S1343).

  If the mark does not correspond to “Qline to” (NO in step S 1343), CPU 110 determines whether or not the mark corresponds to “End” (step S 1350). If the mark does not correspond to “End” (NO in step S1350), CPU 110 advances the process to the next SHAPE.

  If the mark corresponds to “End” (YES in step S1350), CPU 110 determines whether or not the mark corresponds to “Stroke color” (step S1351). CPU110 reads an RGB value, when the said mark corresponds to "Stroke coloe" (when it is YES in step S1351) (step S1352). The CPU 110 paints colors based on the RGB values (step S1353).

  If the mark does not correspond to “Stroke color” (NO in step S1351), CPU 110 determines whether or not the mark corresponds to “Stroke” (step S1361). If the mark corresponds to “Stroke” (YES in step S 1361), CPU 110 adds a color to the line (step S 1362). CPU110 continues the process regarding another mark, when the said mark does not correspond to "Stroke" (when it is NO in 1361).

  FIG. 24 is an image diagram showing general conversion and display processing. As shown in FIG. 24, regarding general conversion and display processing, the CPU 110 extracts data each time it is input, even when vector shape format data indicating the same SHAPE is repeatedly input. Since it is necessary to repeat the process shown in FIG. 22 for each mark (see also FIG. 23), the conversion and display process takes time.

<Comparison of Conversion and Display Processing of the Embodiment and General Conversion and Display Processing>
Next, a comparison between the conversion and display processing of the above embodiment and general conversion and display processing will be described. FIG. 25 is an image diagram showing a part of the conversion and display processing in the above embodiment.

  Referring to FIG. 25, regarding the conversion and display processing in the embodiment, the processing shown in FIG. 22 is repeated for each extracted mark only when vector shape format data indicating the first SHAPE is input (FIG. 20). See also). That is, it is necessary to execute Step S1310, Step S1320, Step S1330, and Step S1340 of FIG. 25 only for the first SHAPE data.

  However, when data indicating the previously described SHAPE is input, the CPU 110 only needs to call the javascript function based on the SHAPE identification number. That is, the CPU 110 only needs to execute step S131, step S132, step S133, and step S134 of FIG. 25 based on the read javascript code.

  FIG. 26 is an image diagram showing the conversion and display processing and general conversion and display processing of the above embodiment. Specifically, FIG. 26A is an image diagram showing general conversion and display processing. FIG. 26B is an image diagram showing the conversion and display processing of the above embodiment. FIG. 27 is an image diagram showing the difference in steps between the conversion and display processing of the above-described embodiment and the general conversion and display processing related to the previously described SHAPE data.

  Referring to FIG. 26 (A) and FIG. 27, with regard to general conversion and display processing, it is necessary to perform the processing of FIG. End up. On the other hand, with reference to FIG. 26B and FIG. 27, regarding the conversion and display processing of the above-described embodiment, it is not necessary to perform the processing of FIG. Time can be reduced.

<Other application examples>
In the above embodiment, the CPU 110 creates a javascript function based on CANVAS data representing SHAPE of HTML5 data. However, the data before conversion is not limited to CANVAS data representing SHAPE of HTML5 data, but may be data in a vector shape format.

  It goes without saying that the present invention can also be applied to a case where it is achieved by supplying a program to a system or apparatus. Then, an external storage medium (memory 120) storing a program represented by software for achieving the present invention is supplied to the system or apparatus, and the computer (or CPU or MPU) of the system or apparatus is externally supplied. The effects of the present invention can also be enjoyed by reading and executing the program code stored in the storage medium (memory 120).

  In this case, the program code itself read from the external storage medium (memory 120) realizes the functions of the above-described embodiment, and the external storage medium (memory 120) storing the program code is the present invention. Will be configured.

  Further, by executing the program code read by the computer, not only the functions of the above-described embodiments are realized, but also an OS (operating system) running on the computer based on the instruction of the program code However, it is needless to say that a case where the function of the above-described embodiment is realized by performing part or all of the actual processing and the processing is included.

  Further, the program code read from the external storage medium (memory 120) is written to another storage medium provided in a function expansion board inserted in the computer or a function expansion unit connected to the computer, and then the program is written. It is also included that the CPU of the function expansion board or function expansion unit performs part or all of the actual processing based on the code instruction and the functions of the above-described embodiments are realized by the processing. Needless to say.

  The embodiment disclosed this time should be considered as illustrative in all points and not restrictive. The scope of the present invention is defined by the terms of the claims, rather than the description above, and is intended to include any modifications within the scope and meaning equivalent to the terms of the claims.

Claims (9)

A mobile terminal that supports vector shape format and javascript,
A memory for storing a first correspondence between data in a vector shape format and a javascript function;
Vector shape format data representing SHAPE is acquired, and the corresponding javascript function is defined based on the first SHAPE vector shape format data according to the first correspondence relationship, and the previously described SHAPE vector shape format data is A mobile terminal comprising a processor for converting into a javascript code. The mobile terminal further comprises a display,
The mobile terminal according to claim 1, wherein the processor causes the display to display the SHAPE based on the converted JavaScript code. The mobile terminal further comprises a communication interface for receiving FLASH data;
The memory stores a second correspondence between FLASH data and HTML data;
The processor converts the received FLASH data into HTML data including data in a vector shape format representing the SHAPE according to the second correspondence relationship so that data representing the same SHAPE can be recognized. Or the mobile terminal of 2. In the processor of the mobile terminal that supports the vector shape format and Javascript,
Obtaining vector shape format data representing SHAPE;
Defining a corresponding javascript function on the basis of data in a first SHAPE vector shape format according to a predetermined first correspondence relationship;
A conversion program for executing the above-described step of converting the data in the SHAPE vector shape format into the javascript code.   The conversion program according to claim 4, wherein the program further causes the mobile terminal to execute a step of displaying the SHAPE on a display based on the converted JavaScript code. The program is stored in the mobile terminal.
Receiving FLASH data;
Further executing the step of converting the received FLASH data into HTML data including data in a vector shape format representing the SHAPE according to a second predetermined correspondence so that data representing the same SHAPE can be recognized. The conversion program according to claim 4 or 5, wherein: A conversion method realized by a mobile terminal supporting vector shape format and javascript,
Obtaining vector shape format data representing SHAPE;
Defining a corresponding javascript function on the basis of data in a first SHAPE vector shape format according to a predetermined first correspondence relationship;
Converting the data in the SHAPE vector shape format described above into the javascript code.   The conversion method according to claim 7, further comprising a step of causing the display to display the SHAPE based on the converted javascript code. Receiving FLASH data;
Converting the received FLASH data into HTML data including data in a vector shape format representing the SHAPE according to a predetermined second correspondence so that data representing the same SHAPE can be recognized. The conversion method according to claim 7 or 8, further comprising: