JP2020166668A - Native application development support program - Google Patents

Abstract

To automatically generate functional source codes for screens, screen linkage processing, data processing, etc. on a selected platform from an application setting file.SOLUTION: A development support program includes: a screen layout generation unit equipped with a screen layout generator that can generate a screen layout source code sd from a design file fd; a linkage processing implementation unit equipped with a screen linkage process generator that can generate a source code sv for screen linkage processing from a view definition file fv; and a functional state implementation unit equipped with a function state generator that can generate a source code sf for a data processing function logic from a function definition file ff. The screen layout generation unit can generate a context loader CL that generates an intermediate file ft, which is a text file, from the design file fd, and the screen layout generation unit generates a screen layout source code sd from the intermediate file ft.SELECTED DRAWING: Figure 1

Description

The present invention relates to a program that supports the development of a native application that operates on a smartphone or a personal computer. More specifically, the present invention is a native application from a setting file including a design file (ai file) created by Adobe Illustrator (registered trademark). Defines the screen layout and its source code, the source code of screen linkage processing instructions that transition between multiple screens defined based on the specifications of the native application, and the instructions that realize the functional state such as data processing on each screen. Regarding a program that automatically generates source code.

It is described as a native application of a smartphone or a program for an Internet browser (hereinafter, "Java (registered trademark) file, etc."). ) WEB application development can be broadly divided into three types: (1) View (screen configuration), (2) Controller (screen transition), and (3) Model (function implementation). In the conventional application development process, a programmer creates a source code such as a Java file line by line based on a screen design ai file or psd file created by a designer and a design specification.

However, in general, designers with little programming knowledge tend to create screen designs that lack consideration for how to implement functions, while programmers with little design knowledge generally tend to implement functions. There was also a tendency for the screen design to not be displayed as the designer intended. In addition, when customizing such as updating or modifying an application, the source code must be created / changed based on a new design file and specifications each time, and it corresponds to a specific platform (operation system). When trying to port an application to a different platform, there is a problem that it takes time and effort because it is necessary to program different source code.

In response to this problem, for example, in the Web screen development support system disclosed in Patent Document 1, HTML components that are step layouts and various image components are selected on the edit screen of the screen generation base file composed of HTML files. By associating the control function (business logic) of each HTML component with the function and event that activates it by the component function definition file, it is possible to develop an application without the need for programming individual source code. It is supposed to be. However, in such prior art, it is not easy to change the pre-prepared step layout and the HTML parts themselves, so that the degree of freedom in screen layout and design must be limited.

On the other hand, in the WEB application development support device disclosed in Patent Document 2, the HTML file that defines the screen design and the XML file that is described in the original format that defines the screen transition and the business logic are put together by the source program generator. It generates a source program such as a Java file. Not only is it compatible with multiple platforms, but business logic can be described in an XML file that is simpler than a Java file, and this can be reflected in the source program, making it possible to provide a user-friendly customization environment. However, in such advanced technology, the designer needs to create the screen design as an HTML file and the business logic as an XML file, which requires a certain coding skill. Therefore, when the screen design is an ai file or a psd file, The source program was not always generated so that the design was finally displayed as intended, and the above problem was not solved.
Japanese Unexamined Patent Publication No. 2016-110206 JP-A-2002-366352

By the way, in the field of graphic design, vector image editing software (drawing software), Adobe Illustrator (registered trademark: hereinafter referred to as "Illustrator"), has become widespread and has become the de facto standard. On the other hand, in the field of WEB design, software such as Photoshop (registered trademark) and Fireworks (registered trademark) has been widely used in the past. Photoshop is software specialized in image processing, and it has many advantages in WEB design where images are important, but it cannot handle vector images, it is not suitable for illustration and layout definition, and there is also a problem that the file size becomes large. It was. Further, Fireworks has an advantage that it can handle vector images and image data at the same time, but has a problem that the penetration rate among designers is low.

On the other hand, Illustrator has the advantages that layout definition and mojikumi are easy, handling of illustration data is excellent, and operation is light. In addition, the artboard function makes it possible to create and manage a plurality of designs in one file, and it is also easy to create responsive designs corresponding to different platforms, and the ai file can be saved as an SVG file.

SVG (Scalable Vector Graphics) is an XML-based two-dimensional vector format format developed by the W3C (World Wide Web Consortium) and recommended as an open standard. Because of the vector format, it can be scaled freely without distortion of figures and characters, and the layer function allows bitmap data such as photographs and illustrations and vector data such as figures to be handled individually, and can be displayed on the screen in coexistence. It has features. In addition, the format itself has various elements such as rotation, movement, and enlargement, and has a high affinity with Javascript, so it is suitable for various expressions such as interactive interactive screen change display and animation. Therefore, with the generalization of web browsers and operation systems that support SVG files, Illustrator is becoming widespread in the field of design production of native applications. However, in the production of native applications, the work itself in which the programmer codes the source code of the Java file one by one based on the ai file created by the designer and the specifications does not change, so the screen design as intended is not displayed. The fundamental problem remained, such as the time and effort required for programming in updating, customizing, and supporting multi-platforms.

The present invention has been created to solve the above problems, and displays a screen layout corresponding to an arbitrarily selected platform from a native application setting file including a design file saved as an SVG file, and screen linkage processing. An object of the present invention is to provide a native application development support program that can automatically generate a source code that defines an instruction and an instruction that realizes a functional state such as data processing on each screen.

In order to solve the above problems, the invention according to claim 1 applies to a platform selected from a design file that is an SVG file, a view definition file that is a text file, and a setting file that includes a function definition file that is a text file. A screen layout generator that is a native application development support program that can generate the source code of the corresponding native application, and has a screen layout generator for each platform that can generate the source code of the screen layout from the design file, and the view definition. A cooperative processing implementation unit that has a screen linkage processing generator for each platform that can generate the source code for screen linkage processing from a file, and a functional status generator for each platform that can generate the source code for the data processing functional logic from the function definition file. The functional state mounting unit is provided, and the cooperative processing mounting unit automatically installs the source code of the screen cooperation processing and the functional state mounting unit automatically stores the source code of the data processing function logic in the source code of the screen layout. The feature is that it can be generated.

Of the design files, view definition files, and function definition files included in the configuration file, the design file consists of SVG files that are data of individual design elements such as images on each screen of the native application and layout definition information data. The view definition file and model definition file, which are text files, are files selected and set from the existing libraries based on the specifications of the native application. The "text file" in the present invention is, for example, an XML file, but is not necessarily limited to this. The platforms include Java, Kotlin, Swift, Objective-C, Javascript (registered trademark), etc., which are widely used in the development of iOS and Android, but are not necessarily limited to these and can be applied to native application development. Object-oriented compiler Programming language platform can be added.

The invention according to claim 2 is the native application development support program according to claim 1, wherein the screen layout generation unit generates a context loader capable of generating an intermediate file which is an editable text file from a design file. It is characterized in that the screen layout generation unit can automatically generate the source code of the screen layout from the intermediate file.

A context loader, also called a context class loader, is an object that is generally responsible for loading classes and searching resources (files) in object-oriented development languages such as Java, and loads classes into the internal memory structure of the program. Then, perform the process of passing to the generator that generates the source code. The context loader according to the present invention reads a design file and a view definition file from a setting file, serves as a launcher for activating a screen layout generator corresponding to a predetermined platform, and reads a design file which is an XML file. , XML functions as a layout analyzer that can generate an intermediate file that is a text file based on tag information obtained by recursively parsing tags from the top level.

The invention according to claim 3 is the native application development support program according to claim 2, wherein the design file is a screen layout design that is an ai file converted into an SVG file and saved. And.

The invention according to claim 4 is the native application development support program according to claim 3, wherein a marker can be set in the description of the intermediate file, and the intermediate file is created when the source code of the screen layout is automatically generated. It is characterized in that only the range defined by the marker is reflected in the source code in the edited part of.

The invention according to claim 5 is a native application including a source code generated by the native application development support program according to any one of claims 1 to 4.

In screen layout production in Illustrator, it is common to set an artboard as a work area and create artwork. An artboard is a layer of multiple artwork groups, and the created artboard is saved as an ai file, but in Illustrator, it can be exported and saved as an SVG file by the function of a plug-in. Since the SVG format is XML compliant, you can edit the XML code to change / add image effects, and by defining an event that executes the Javascript command, you can use it for linked processing such as screen transitions and user actions. It is possible to add interactivity such as the operation of the corresponding object.

The screen layout generator in the present invention generates a context loader, then once generates an intermediate file in which the context loader is a text file from an arbitrary SVG file in the read setting file, and a predetermined screen is generated from the intermediate file. The layout generator is configured to automatically generate the source code. Since the intermediate file is a text file, the edited result is automatically reflected in the generated source code by editing it with a text editor as needed.

On the other hand, to implement the cooperation processing between screens of the native application, the cooperation processing implementation part reads the view definition file in the configuration file, and the screen cooperation processing generator generates the source code of the screen cooperation processing directly from the view definition file. Implement in the source code of the screen layout design. Regarding the data processing function logic, the function state implementation part converts the function definition file in the configuration file into a context file and reads it, and the function state generator generates the source code directly from the context file, which is the source of the screen layout design. Implement in code.

According to the configuration of the native application development support program according to the present invention, the following effects are obtained.
(1) Since the screen layout generator can automatically generate the source code of the native application for each platform from the design file created as an ai file, the coding work of the source code by the programmer can be greatly simplified. , It is possible to significantly reduce the labor and time required for development.
(2) Minor modifications and screen effects on the created native application screen by going through the process of once generating an intermediate file that is a text file, instead of creating the source code directly from the ai file and specifications. When it is necessary to change / add, the correction / change / addition can be easily reflected by editing the intermediate file without modifying the ai file itself. The burden can also be reduced.
(3) By generating the screen design source code from the object that converted the ai file into an SVG file, the screen design elements can be faithfully reproduced in the original ai file, so compared to coding by a programmer with little design knowledge. It is possible to reduce the discomfort of the designer after implementation.
(4) Various screen design elements can be classified in the form of an intermediate file that is easy to edit, and even those who do not have advanced programming knowledge can easily change the instance. Therefore, the screen design elements once created are versatile. It can be used as a high-value asset.

Hereinafter, embodiments of the present invention will be described in detail with reference to the drawings. The native application development support program according to the embodiment (hereinafter referred to as “development support program 1”) is composed of a single object-oriented language represented by Java, for example. FIG. 1 is a schematic diagram showing modules constituting the development support program 1 and each file generated or processed by each module. Note that each module in the figure shows the concept of functional configuration, and is not necessarily limited to physically independent program modules. Multiple modules can be integrated into a single module, or individual functions can be combined. It does not exclude what is achieved by multiple modules.

The setting file F is composed of at least a design file fd which is an SVG file, a view definition file fv which is a text file, and a function definition file ff which is a text file. The design file fd is created by creating each screen layout design constituting the native application with Illustrator, converting the artboard of the created ai file into an SVG file, and saving it. The view definition file fv and the function definition file ff are based on the specifications of the native application, such as screen specifications such as screen configuration and its transition and behavior, individual functions and their processing contents, table data structure, relationships between entities, etc. A text file that defines the settings.

The development support program 1 is roughly divided into a screen layout generation unit 10, a cooperative processing mounting unit 20, and a functional state mounting unit 30. The screen layout generation unit 10 includes a screen layout generator 11, the cooperation processing mounting unit 20 includes a screen cooperation processing generator 21, the functional state mounting unit 30 includes a functional state generator 31, and the generators 11, 21, and 31 are predetermined. It is possible to read the file and generate the source code of the Java file. Note that the generators 11, 21, and 31 are defined in advance as actual classes for each platform.

FIG. 2 is a processing flow diagram showing an outline of a processing procedure from starting the development support program 1 according to the embodiment, reading the setting file F, and generating the source code sd of the screen layout. The development support program 1 searches for and reads a predetermined setting file F (100), specifies an arbitrary platform (101), and causes the screen layout generation unit 10 to generate the screen layout source code generation logic (200). Start. Here, the actual class of the generator to be started is determined by specifying the platform. The relationship between the platform and the generator to be activated is shown in Table 1, for example.

In the generation logic (200), the screen layout generation unit 10 first generates an instance (View :: DSLContextLoader) of the context loader CL, and the context loader CL first generates the design file fd and the view definition file fv in the source directory of the setting file F. Is read and processing is executed sequentially for each file. The processing executed by the context loader CL differs depending on the file type. When the read file is the design file df (201), the context loader CL processes the SVG file and generates the screen layout source code sd (300). On the other hand, when the read file is the view definition file fv (202), this is sent to the cooperation processing implementation unit 20, and the screen cooperation processing generator 21 generates the source code sv of the cooperation processing in the source code sd of the screen layout. Then, the object that defines the screen linkage process is implemented. Then, when the processing of all the files is completed, the generation logic (200) ends.

FIG. 3 is a flow chart showing the step (300) of the SVG file processing by the context loader CL. In the SVG file processing step (300), first, an SVG File Paser (design file analyzer), which is an instance that performs parsing processing for converting an XML file into an SVG object in Java, is generated. SVGFilePaser reads the tag of SVG file fd, acquires the tag name and attribute (301), recursively parses the child elements sandwiched between the tags from the top level tag as XML, and creates the object (SVGPaserContext) of the parse result. Generate (302). SVGFilePaser repeats this process to process the tag information and add it to the SVGPaserContext. If PNG images or JPG images exist in the design file fd, the list of those image files is added to the SVGPaserContext as it is. When the parsing process of all SVG files is completed by repeating the above steps, the process is terminated and the process returns to the process of the context loader CL. After that, the context loader CL generates the intermediate file ft described in Java from the parsing result of the SVGPaserContext (303), and the screen layout generator 11 reads the intermediate file ft and generates the source code sd of the screen layout (304).

Whether or not to generate an intermediate file for each SVG file can be selected by providing an identifier in the ai file that is the source of the SVG file. For example, if the artboard name when saving the artwork starts with "@", enter the manual mode that automatically opens the text editor when the intermediate file ft is generated, and manually enter this after editing the intermediate file ft. After saving as a view definition file (305), the screen linkage processing generator 21 is started to generate the source code sv of the screen linkage processing. On the other hand, if the artboard name does not start with "@", the intermediate file ft is not generated, and the screen layout generator 11 is configured to automatically generate the screen layout source code sd. When the view definition file fv is included in the design file fd, the contents of the file are read as they are by the context loader CL, and the screen linkage processing generator 21 is configured to generate the source code sv of the screen linkage processing.

The feature of the development support program 1 according to the present invention is that the source code of Java is not directly generated from the SVG file in the read design file fd, but is once converted into the form of the intermediate file ft, and then the screen layout generator 11 The point is to generate the source code sd of the screen layout by passing it to. First, since the screen layout generator 11 automatically generates the source code, the developer does not have to write a Java file line by line, which can significantly reduce the development time. Further, since the screen layout generator 11 generates the source code sd of the screen layout from the intermediate file ft obtained by parsing the SVG file into the SVG object in Java, the design file fd is faithfully reproduced. As a result, the screen layout design of the native application that is finally implemented will not feel uncomfortable compared to the one originally created by the designer in Illustrator. Furthermore, even if the screen layout design is modified after the release of the native application, there is no need to directly rewrite the source code. By simply reading the modified ai file, the modification is automatically reflected in the source code, and by directly editing the intermediate file ft, the modification result can be reflected in the source code, so the modification work is quick. It is possible to reduce the burden on developers.

FIG. 4 shows an outline of a processing procedure from starting the function mounting unit 30 of the development support program 1 according to the embodiment, reading the function definition file ff in the setting file F, and generating the source code sf of the function logic. It is a flow diagram.
The development support program 1 starts the function state generator 31 of the function implementation unit 30 (401), reads the function definition file ff in the setting file F (402), and generates the source code sf of the data processing function logic (403). ). When the function implementation unit 30 is started, the actual class of the generator to be started is determined by specifying the platform. The relationship between the platform and the generator to be activated is shown in Table 2, for example.

Further, the function implementation unit 30 creates an instance of GeneratorDot for creating a state transition diagram related to the data processing function logic. The state transition diagram has a graph structure, and nodes (figures) and edges (relationships between figures and figures) are described in the Dot language, which is plain text, and defines the processing procedure of the data processing function of the native application. An existing tool (layout engine) can be used as an instance of GeneratorDot.

In the generation logic (402), if the source code sd of the screen layout where the source code is implemented does not have a source code file as the generation destination, a rough skeleton is first generated, and then for each function definition file ff. The source code sf of the individual data processing function logic is generated. On the other hand, if a source code file exists, only individual source code is generated.

The source code sf of the individual data processing function logic may be configured so that the description of the code is separated by a marker. The marker is described as, for example, "// %%" (the space before and after and in the center may be any number). By using such a marker, the description of the part below the line that becomes this marker in one text file is automatically overwritten and updated when the source code is generated even if it is manually edited. Human-written descriptions above the marker can be preserved.

Such markers are also applicable to the intermediate file ft generated from the design file fd. For example, if you want to move the image of the character (person, etc.) to be displayed on the native application (for example, blinking eyes or movement of the mouth), the outline of the character, the shape of the eyes, and the shape of the mouth itself can be found in the screen layout generator from the design file fd. 11 is automatically generated. On the other hand, animations of blinking eyes and mouth movements (for example, "pucking" movements of the mouth) can be freely added by manually editing the description above the line that becomes the marker of the intermediate file ft. Can be changed. In addition, it is possible to add or change commands that allow the character to react interactively depending on the timing of tapping the screen from the user and the coordinates on the screen.

That is, by applying the marker to the intermediate file ft, the effect is as if one function is generated for each layer of Illustrator, so the design file does not necessarily have to be defined in advance in the function definition file ft. It is possible to generate a source code that realizes the operation and response of a character or the like only with fd. It is also possible to generate only a "frame" for drawing at the stage of the design file fd so that the implementer can manually code the contents of the "frame" after the fact.

As described above, the development support program 1 according to the embodiment temporarily converts the ai file created by Illustrator into an SVG file in the process of automatically generating the source code of the native application, and creates an intermediate file ft in which markers can be set. By providing a process to generate, it is possible to select "not all automatically generated". By providing a marker, the predetermined source code after the marker is always overwritten and automatically generated, but the part above the marker can be manually coded by the implementer, so customization and proactive design are possible. It becomes. As a result, the automatically generated part and the manually coded part can be used properly based on the intention of the implementer, which not only enables flexible implementation, but also makes it possible to utilize the screen design element once created as a highly versatile asset. It becomes.

Although the embodiments of the present invention have been described above with reference to the accompanying drawings, the present invention is not necessarily limited to the configuration of the above-described embodiments, and the object of the present invention is achieved and the effects are achieved. It is possible to make appropriate changes within the range of possession.

The present invention can be applied to the development of native applications that operate on smartphones and personal computers.

Schematic diagram of development support program 1 Processing flow diagram showing the process of generating the source code of the screen layout in the screen layout generator Flow chart showing the process of SVG file processing in the screen layout generator Process flow diagram showing the process of generating the source code of the function logic in the function implementation part

F Setting file 1 Development support program 10 Screen layout generator 11 Screen layout generator 20 Linkage processing implementation section 21 Screen linkage processing generator 30 Function implementation section 31 Function status generator ai ai file ft Design file fv View definition file ff Function definition file ft Intermediate File S source code (native application)
sd source code (screen layout)
sv source code (screen linkage processing)
sf source code (functional logic)

Claims (5)

A native application development support program that can generate the source code of the native application corresponding to the selected platform from the setting file including the design file that is the SVG file, the view definition file that is the text file, and the function definition file that is the text file. A screen layout generator including a screen layout generator for each platform that can generate the source code of the screen layout from the design file, and a screen for each platform that can generate the source code for the screen linkage process from the view definition file. The cooperation processing implementation unit including the cooperation processing generator and the function state implementation unit including the function state generator for each platform capable of generating the source code of the data processing function logic from the function definition file are provided. A native application development support program characterized in that the source code of screen linkage processing and the source code of the data processing function logic can be automatically generated in the source code of the screen layout by the functional state implementation unit. The screen layout generation unit can generate a context loader capable of generating an intermediate file which is an editable text file from a design file, and the screen layout generation unit can automatically generate a screen layout source code from the intermediate file. The native application development support program according to claim 1, which is characterized by the above. The native application development support program according to claim 2, wherein the design file is obtained by converting a screen layout design, which is an ai file, into an SVG file and saving the file. The intermediate file is configured so that a marker can be set in the description, and when the source code of the screen layout is automatically generated, only the range specified by the marker in the edited part of the intermediate file is reflected in the source code. The native application development support program according to claim 3, which is characterized by the above. A native application including the source code generated by the native application development support program according to any one of claims 1 to 4.

Images