Cms server device, cms server program and terminal program

Abstract

To provide editability of a content layout in a web page editing UI of a CMS.SOLUTION: A CMS server device according to the present invention manages a content of a web site and includes format setting means for associating and setting a combination of a plurality of format elements in one format object, text input means for inputting a text of a web page, and text edition means for combining the plurality of format elements associated with the format object to edit the text in the case that the format object is applied to the inputted text.SELECTED DRAWING: Figure 17

Description

[Technical field]

[0001] The present invention relates to a CMS server device, a CMS server program, and a terminal program. [Background technology]

[0002] In corporate websites, it is not uncommon for different departments to be responsible for managing different content pages, for example pages with product and service information being managed by the marketing department, while pages with company overviews and IR information being managed by the public relations department. Also, since each department does not necessarily have employees with knowledge of web production and operations, some companies outsource the update and addition of pages to the system department in charge of web production and operations or to external production companies.

[0003] CMS (Content Management Systems) for constructing, managing, and operating websites have been known for some time (see, for example, Patent Document 1). A CMS usually has a user interface (hereinafter referred to as an editing UI) for directly editing content, and even if editors in each management department do not have sufficient specialized knowledge, they can edit (update, add, etc.) web pages without the intervention of a web designer or engineer, making it possible to operate a website efficiently with a division of labor. In particular, editors add and update web pages based on templates (design prototypes) designed by web designers, so there is little chance of a large deviation from the design or user interface intended by the web designer for each page.

[0004] In a CMS, first an engineer (developer) extracts a page layout configuration based on a page design comp (a finished design sample) created by a web designer, and develops the above-mentioned template that is modeled so that it can be easily managed and edited in the CMS (content modeling). More specifically, for the page layout configuration in one template, content elements such as the title, subtitle, description, related links, main visuals, body text, etc. are extracted, and an editing UI is set up that enables editors to directly edit the extracted content elements. By editing (updating, adding, etc.) the content elements that have been content modeled in accordance with the editing UI, the editor creates web content that matches the design and user interface intended by the web designer (Figure 1).

[0005] In recent years, CMS without a head, or front end (viewer), known as headless CMS, is also beginning to appear. A headless CMS is a system specialized in managing, editing, and distributing content data, and displays websites by linking with a separately constructed front end via an API. A headless CMS is technically more difficult to implement than a traditional CMS, but it excels in versatility, security, and design flexibility. Because the front end and back end are completely separated, there are benefits such as being able to make system changes without being affected by each other, being able to add CMS functions later, high-speed page display, and reduced server load. In addition, a headless CMS is suitable for distributing data to various channels with different front ends, such as not only websites, but also apps, smart devices, and digital signage. [Prior art documents] [Patent documents]

[0006] [Patent Document 1] Special Publication No. 2019-531524 Summary of the Invention [Problem to be solved by the invention]

[0007] In a web page, the layout of the "main text" (hereafter referred to as the main text part), where the way in which content components such as headings, paragraphs, and images are combined varies from page to page, is usually edited using rich text. A CMS is equipped with a rich text editor, and when an editor edits the format of text within a main text part using the editing UI, the editor selects the desired formatting element from the formatting toolbar and applies the selected format to the target text (Figure 2). However, the rich text editors in conventional CMSs do not necessarily have sufficient functionality for editing layouts where the way in which content components are combined varies from page to page under an efficient division of labor between web designers, engineers, and editors.

[0008] For example, because the formatting elements that can be selected in conventional rich text editors are fixed, problems arise when the web page design cannot be covered by the given formatting combinations. For example, it is not possible to use two different formatting designs in a quote block or to apply a unique style (Figure 3(a)). In some cases, editors have to give up on designs that go beyond the specifications of rich text, or they have to forcefully achieve the intended design or style by imposing a work method of writing HTML directly, which places a burden on the editor.

[0009] Another problem is that the editing UI (for example, the formatting toolbar on a CMS rich text editor) is not optimized for editors who do not do design. For example, when considering the case of emphasizing text in the body part, rich text provides a variety of formatting methods such as bold, underline, and text color. Although editors need to follow the web designer's instructions on how to emphasize the text (for example, bold + underline + specified text color), the instructions cannot be determined from the editing UI on the CMS, so they have to take the time to refer to separately prepared materials (such as design guidelines).

[0010] Furthermore, when the web designer's instructions are unclear or vague, editors may use the formatting toolbar to freely edit the text at their own discretion. As a result, the formatting applied to each body part may be inconsistent, and the website as a whole may deviate from the web designer's design intention (Figure 3(b)).

[0011] Also, for example, even if an editor wants to emphasize text according to the instructions of a web designer, multiple editing steps are required, such as first selecting the target text, then selecting and applying bold from the formatting toolbar, selecting and applying underline, and selecting and applying text color, which can easily lead to editing errors from the viewpoint of operability. Even if editing errors occur frequently, the format design will become inconsistent and will deviate from the design intent of the web designer.

[0012] The present invention has been proposed in view of the above-mentioned points, and has an object, from one aspect, to improve the editability of content layout in a web page editing UI of a CMS. [Means for solving the problem]

[0013] In order to solve the above problems, a CMS server device according to the present invention is a CMS server device that manages website content, and has a format setting means for setting a combination of multiple format elements in association with one format object, a text input means for inputting text of a web page, and a text editing means for editing the text by combining the multiple format elements associated with the format object when the format object is applied to the input text. Effect of the Invention

[0014] According to the embodiment of the present invention, firstly, it is possible to improve the editability of content layout in the web page editing UI of the CMS. [Brief description of the drawings]

[0015] [Figure 1] FIG. 1 is a diagram showing an example of a website production flow using a conventional CMS. [Diagram 2] FIG. 1 is a diagram showing an example of conventional text formatting; [Diagram 3] 1A and 1B are diagrams illustrating problems associated with a conventional rich text editor. [Figure 4] FIG. 2 is a diagram illustrating an example of a network configuration of a CMS according to the present embodiment. [Diagram 5] FIG. 2 is a diagram illustrating an example of an architecture configuration of a CMS according to the present embodiment. [Figure 6] FIG. 2 is a diagram illustrating an example of a hardware configuration of a CMS server according to the present embodiment. [Figure 7] FIG. 2 is a diagram illustrating an example of the software configuration of a CMS server according to the present embodiment. [Figure 8] FIG. 2 is a diagram showing an example of a website creation flow using a CMS according to the present embodiment. [Figure 9] FIG. 13 is a diagram showing an editing UI setting example 1 according to the embodiment. [Figure 10] FIG. 11 is a diagram showing an edit UI setting example 2 according to the embodiment. [Figure 11] FIG. 11 is a diagram showing an edit UI setting example 3 according to the embodiment. [Figure 12] FIG. 11 is a diagram showing an edit UI setting example 4 according to the embodiment. [Figure 13] FIG. 11 is a diagram showing an editing UI setting example 5 according to the embodiment. [Figure 14] FIG. 13 is a diagram showing an editing UI setting example 6 according to the embodiment. [Figure 15] FIG. 2 is a diagram showing a web content creation example 1 according to the embodiment. [Figure 16] FIG. 11 is a diagram showing a second example of web content creation according to the embodiment. [Figure 17] FIG. 11 is a diagram showing a web content creation example 3 according to the embodiment. [Figure 18] FIG. 11 is a diagram showing a web content creation example 4 according to the embodiment. [Figure 19]FIG. 13 is a diagram showing an editing UI setting example 1 according to the embodiment. [Figure 20] FIG. 11 is a diagram showing an edit UI setting example 2 according to the embodiment. [Figure 21] FIG. 2 is a diagram showing a web content creation example 1 according to the embodiment. [Figure 22] FIG. 11 is a diagram showing a second example of web content creation according to the embodiment. [Figure 23] FIG. 11 is a diagram showing an example of a multilingual content function according to the embodiment. [Figure 24] 13 is a diagram illustrating automatic edit UI setting according to another embodiment. FIG. DETAILED DESCRIPTION OF THE PREFERRED EMBODIMENTS

[0016] DETAILED DESCRIPTION OF THE PREFERRED EMBODIMENTS An embodiment of the present invention will be described in detail with reference to the drawings. [Embodiment 1] <System configuration> (Network Configuration) Fig. 4 is a diagram showing an example of a network configuration of a CMS according to this embodiment. Fig. 5 is a diagram showing an example of an architecture configuration of a CMS according to this embodiment. A CMS (Content Management System) 100 according to this embodiment includes a CMS server 10, a system setting terminal 20 owned by an engineer (developer) or a web designer, and an editor terminal 30 owned by a content editor, which are connected via a network 50.

[0017] The CMS server 10 is a server device of a SaaS (Software as a Service) type content management system for building, managing, and operating websites. The CMS server 10 performs, for example, user management, various system settings, web page content generation via an editing UI, content data management of documents and images, etc., and website management. The front end of the website built by an engineer under the design supervision of a web designer is made available to visitors of the website via a web server (not shown).

[0018] However, if the CMS server 10 is a headless CMS, the CMS does not include a front end because the headless CMS is a system specialized for managing, editing, and distributing content data. Under the design supervision of a web designer, the front end built separately by an engineer and the CMS server 10 work together via an API (Application Programming Interface) to display a website to visitors (decoupled architecture).

[0019] The system setting terminal 20 is an information terminal device for an engineer or web designer to perform various system settings, etc. The system setting terminal 20 is realized by, for example, a smartphone, a tablet terminal, or a personal computer, and a predetermined application program (for example, a general-purpose web browser or a dedicated application) for accessing the CMS server 10 is pre-installed.

[0020] The editor terminal 30 is an information terminal device for an editor to create and edit web content. The editor terminal 30 is realized by, for example, a smartphone, tablet terminal, or personal computer having a display means, an input means, and an operation means, and a predetermined application program (for example, a general-purpose web browser or a dedicated application) for accessing the CMS server 10 is pre-installed.

[0021] The network 50 is a communication network including wired and wireless networks, and includes, for example, the Internet, a public line network, WiFi (registered trademark), Bluetooth (registered trademark), and the like.

[0022] (Hardware configuration) 6 is a diagram showing an example of the hardware configuration of the CMS server according to this embodiment. The CMS server 10 includes a central processing unit (CPU) 11, a read only memory (ROM) 12, a random access memory (RAM) 13, a storage device 14, and a communication device 15.

[0023] The CPU 11 executes various programs and performs arithmetic processing. The ROM 12 stores programs required at startup, etc. The RAM 13 is a work area for temporarily storing the processing by the CPU 11 and for storing data. The storage device 14 stores and preserves various data and programs. The communication device 15 communicates with other devices via a network 50.

[0024] (Software configuration) 7 is a diagram showing an example of the software configuration of the CMS server according to this embodiment. The CMS server 10 has, as main functional units, an edit UI setting unit 101, an edit UI unit 102, and a storage unit 103. The edit UI setting unit 101 includes a content element setting unit 101a and a format setting unit 101b. The edit UI unit 102 includes a text input unit 102a, a format setting tool display unit 102b, and a text editing unit 102c.

[0025] The content element setting unit 101a has a function of setting the content elements extracted by content modeling in response to a setting operation performed by the system setting terminal 20 as page layout components of a web page in an editing UI within the CMS.

[0026] The format setting section 101b has a function of setting a combination of a plurality of format elements in association with one format object in response to a setting operation performed by the system setting terminal 20.

[0027] The text input unit 102a has a function of inputting the text of a web page in response to an input operation on the editor terminal 30.

[0028] The formatting tool display section 102b has a function of displaying, on the display screen of the editor terminal 30, a formatting tool in which object icons (also simply referred to as icons) corresponding to format objects are arranged.

[0029] The text editing unit 102c has a function of editing the text by combining multiple format elements associated with a format object placed on a format setting tool when the format object is applied to text displayed on the editing screen in response to a selection operation by the editor terminal 30.

[0030] The storage unit 103 has a function of storing various DBs necessary for constructing, managing, and operating a website as a CMS.

[0031] It goes without saying that each of these functional units is a functional unit according to the present invention, and the CMS server 10 also includes various other functional units necessary for constructing, managing, and operating a website. Each functional unit is realized by a program executed on hardware resources such as the CPU, ROM, and RAM of the computer constituting the CMS server 10. These functional units may be read as "means," "module," "unit," or "circuit." The various DBs in the storage unit 103 in the CMS server 10 may also be placed in an external storage device on the network 50. The computer programs and application programs may be stored in a computer-readable storage medium.

[0032] The CMS100 according to this embodiment is a SaaS-based content management system. Therefore, on the system setting terminal 20 and editor terminal 30 sides, functional services provided by the above functional units of the CMS server 10 are provided via, for example, a general-purpose web browser, a dedicated application, or the like. That is, for example, the web browser receives display data from the CMS server 10, the web browser transmits input data and operation data to the CMS server 10, and also displays the display data as response data on the web browser screen. On the other hand, when configured as a stand-alone content management system instead of a SaaS-based content management system, it is also possible for the system setting terminal 20 and editor terminal 30 sides to have the above functional units of the CMS server 10.

[0033] <Example of the flow until website production by CMS> FIG. 8 is a diagram showing an example of a website production flow by the CMS according to this embodiment. Website production is generally realized through division of labor among various persons in charge such as a web director, a web designer, an engineer, and an editor. However, for example, a web director and a web designer, a web designer and an engineer, etc. may兼任分担作業 depending on personnel, skills, etc.

[0034] S1 "Site design": The web director examines the overall configuration and wiring of the website and creates a site map.

[0035] S2 "Web page design": The web designer designs each web page and creates design comps and resources (see, for example, FIG. 1).

[0036] S3 "Infrastructure construction": The engineer prepares the server and network environment and installs and constructs the CMS server 10 (see, for example, FIG. 4). In the case of a headless CMS, in addition, a server for the front end (within the same server as the CMS server 10 or a separate server, etc.) is prepared.

[0037] S4 "Content Modeling": Engineers extract and model the content to be managed by the CMS based on the page design by the web designer. Specifically, in the page layout configuration of a web page, content elements such as the title, subtitle, description, related links, main visuals, body text, etc. are extracted (see Figure 1 for an example).

[0038] S5 "Editing UI setting": The engineer sets up the editing UI in the CMS according to the above model. Specifically, the engineer sets (defines) the editing UI that allows editors to directly edit the extracted content elements in the page layout configuration of the web page (see, for example, Figure 1).

[0039] S6 "Front-end development": Engineers write coding based on the page design by the web designer and implement the process of inputting the output from the CMS.

[0040] S7 "Create content": The editor edits (updates, adds, etc.) each web page according to the editing UI and creates web content (see, for example, FIG. 2).

[0041] <Editing UI setting example> As shown in S5 above, the engineer sets the editing UI in the CMS so that the editor can directly edit the content elements that have been content modeled. Here, the layout of a web page, particularly the body part, where the combination of content components such as headings, paragraphs, and images varies from page to page, is edited in rich text by a rich text editor. Unlike the conventional fixed formatting toolbar, the editing UI setting according to this embodiment allows the format configuration of the formatting toolbar in the rich text editor to be flexibly set. S5 "Editing UI setting" will be described in detail below.

[0042] 9 is a diagram showing an edit UI setting example 1 according to the present embodiment. An engineer uses the system setting terminal 20 to access and log in to the CMS server 10, and first displays a model setting screen that is applied to the page layout configuration of a web page. In the page layout configuration of the web page, the engineer sets content elements that have been content modeled based on the page design by the web designer.

[0043] Specifically, an engineer can select an input field component (content element input column) of a type that suits each content element from the input field list 105, and place and set it in the page layout configuration field 106 by a drop-and-drag operation. In the case of Fig. 9, as an example, "single line text" corresponding to the title element, "single line text" corresponding to the subtitle element, "multiple lines of text" corresponding to the description element, and "flexible text" corresponding to the body element are placed and set in the page layout configuration field 106.

[0044] The CMS server 10 (content element setting unit 101 a ) stores information on the input field components arranged and set in the page layout configuration field 106 in a predetermined DB of the storage unit 103 .

[0045] 10 is a diagram showing an edit UI setting example 2 according to this embodiment. Next, the engineer sets the page layout configuration of the webpage, and then sets the format control settings of each input field component, i.e., the format configuration of the formatting toolbar in the rich text editor. For example, when "Flexible Text" 107 corresponding to the body element is selected from among the input field components, the format configuration information 108 currently set as valid for "Flexible Text" 107 is displayed. When the engineer wants to change the format configuration currently set as valid for "Flexible Text" 107, he or she presses "Open Builder" 109.

[0046] 11 is a diagram showing an editing UI setting example 3 according to this embodiment. An engineer can set (add / delete) format elements to be valid in "flexible text" as format objects of a text editor available to an editor. More specifically, a format element to be valid in "flexible text" is selected from a format element list 111, and set (add / delete) the selected format object icon on the format setting toolbar 110 by a drop-and-drag operation.

[0047] When an editor formats text in "flexible text" on the editing UI, the editor can apply the format set here to the formatting toolbar 110. Therefore, the engineer selects and sets only the formats to be valid based on the page design by the web designer and separately prepared materials (design guidelines, etc.). Conversely, for formats that do not match the web designer's design intention and that the editor wants to disable, the editor removes them from the formatting toolbar 110 to make them unavailable. Note that formats that can be set (added / deleted) are, for example, as shown in the format element list 111 in FIG. 11.

[0048] The CMS server 10 (format setting unit 101b) stores information on the object icon of the format that has been set (added / deleted) on the format setting toolbar 110 in an input field component (e.g., “flexible text”) in a specified DB of the storage unit 103.

[0049] 12 is a diagram showing an editing UI setting example 4 according to this embodiment. Next, a description will be given of a plurality of format settings associated with object icons on the format setting toolbar 110. When an object icon 115 on the format setting toolbar 110 is selected, a format element setting field 116 for the selected object icon 115 is displayed on the right side of the screen.

[0050] 12, the so-called normal "emphasis" format element is set as the default on the formatting toolbar 110, and therefore "bold" is checked to indicate a valid setting in the design format 117 of the format element setting field 116. This means that when an editor selects text in "flexible text" and applies the object icon 115 on the formatting toolbar 110, the text can be edited to the "bold" format.

[0051] Here, if a check mark is added to "underline" in the design format 117 of the format element setting field 116 to indicate that it is a valid setting, the format element of "underline" is set in correspondence with the object icon 115. If a check mark is added to "character color" in the character color format 118 of the format element setting field 116 to indicate that it is a valid setting and a specified color is input, the format element of the specified character color is set in correspondence with the object icon 115. In such a case, when an editor selects text in "flexible text" and applies the object icon 115 on the formatting toolbar 110, this means that the text will be edited to "bold", "underline" and the specified character color.

[0052] Here, consider a case where the design intent of a web designer is, for example, to format text in "emphasis," the text must be emphasized in "bold," "underlined," and with a specified character color. In such a case, even if an editor were to emphasize the text according to the web designer's instructions, multiple editing steps would be required, such as first selecting the target text, then selecting and applying bold from the formatting toolbar, selecting and applying underline, and selecting and applying a character color.

[0053] However, in the formatting toolbar 110 according to this embodiment, the object icon 115 indicating the "emphasis" format can be set by simultaneously combining and associating multiple formats, such as "bold" and "underline," and a specified character color, so that the editor can apply the "emphasis" format as intended by the web designer with a single operation. From the viewpoint of operability, errors in editing the format by the editor can also be prevented.

[0054] When multiple formats such as “bold”, “underline” and a specified character color are simultaneously associated and set in the object icon 115, in order to enable the editor to visually easily grasp the format (and further the designer's intention) set in the object icon 115, for example, “B (emphasis mark)” to which the formats of “bold”, “underline” and a specified character color have been applied, that is, an icon reflecting the set format, can be selected and displayed from the icons 119 in the format element setting field 116, as in the object icon 115 shown in FIG. 12.

[0055] The CMS server 10 (format setting unit 101b) stores information on the format “bold”, “underline” and designated character color set in association with the object icon 115 in a predetermined DB of the storage unit 103.

[0056] FIG. 13 is a diagram showing an edit UI setting example 5 according to the present embodiment. Next, a description will be given of a plurality of format settings associated with an object icon newly added to the format setting toolbar 110. As described above, an engineer can select a format element from the format element list 111 and set (add / delete) the selected format as an object icon on the format setting toolbar 110 by a drop-and-drag operation (FIG. 11). For example, the object icon 121 shown in FIG. 13 is an object icon 121 of the format "heading 2 (h2)" set (added) on the format setting toolbar 110 from the format element list 111. When the object icon 121 is added to the format setting toolbar 110, a format element setting field 122 of the selected object icon 121 is displayed on the right side of the screen. Since the object icon 121 is an object icon of the format "heading 2 (h2)" as a default, the heading tag "h2" is initially input in the HTML tag 123 of the format element setting field 122.

[0057] Here, when "alignment" and "center alignment" are checked in the alignment format 124 of the format element setting field 122 to indicate that they are valid, the format element "center alignment" is set in correspondence with the object icon 121. When "italics" and "underline" are checked in the design format 125 of the format element setting field 122 to indicate that they are valid, the format elements "italics" and "underline" are set in correspondence with the object icon 121. In this case, when an editor selects text in "flexible text" and applies the object icon 121 on the format setting toolbar 110, this means that the text is edited to the HTML tags "h2", "center alignment", "italics" and "underline".

[0058] Finally, the engineer changes the initial name "Heading 2" to "Special Heading 2" or the like in the format name 126 of the format element setting field 122. This is to distinguish the format name from the object icon 121, since another object icon 127 indicating a similar HTML tag "h2" already exists on the format setting toolbar 110.

[0059] In this way, the object icon 121 of the formatting toolbar 110 according to this embodiment is set to simultaneously combine and correspond to multiple format HTML tags "h2", "centered", "italics" and "underline", so that the editor can apply the special "h2" format intended by the web designer with a single operation. From the viewpoint of operability, it is also possible to prevent the editor from making mistakes in editing the format. In addition, since the editor can select the object icon 127 when applying the normal "h2" format and the object icon 121 when applying the special "h2" format, it is possible to meet the design intention of the web designer to always use one of these two format designs when formatting text with "h2".

[0060] When multiple formatting HTML tags "h2," "centered," "italics," and "underline" are simultaneously associated and set in the object icon 121, in order to enable an editor to visually easily grasp the format (and further the designer's intention) set in the object icon 121, the object icon 121 shown in FIG. 13 can select and display "h2 (h2 mark)" to which the formats of "h2," "centered," "italics," and "underline" are applied, that is, an icon reflecting the set format (a formatting element shown as a simple pattern or symbol, etc.), from among the icons 128 in the format element setting field 122.

[0061] The CMS server 10 (format setting unit 101b) stores information on the formats “h2”, “centered”, “italics”, and “underline” set in association with the object icon 121 in a predetermined DB of the storage unit 103.

[0062] FIG. 14 is a diagram showing an editing UI setting example 6 according to this embodiment. Next, the deletion of an object icon from the formatting toolbar 110 will be described. As described above, an engineer can delete an existing object icon arranged on the formatting toolbar 110 by a drop-and-drag operation. When an editor formats text in the "flexible text", the editor can apply the format set here to the formatting toolbar 110. Therefore, the engineer removes from the formatting toolbar 110 object icons whose format does not match the design intention of the web designer based on the page design by the web designer and materials prepared separately (design guidelines, etc.) so that the editor cannot use them.

[0063] <Content creation example> Next, we will explain S7 "Content Creation" in detail. Editors edit (update, add, etc.) each web page according to the editing UI (layout configuration) set by engineers to create web content (see Figure 2 for an example).

[0064] FIG. 15 is a diagram showing a web content creation example 1 according to this embodiment. An editor uses an editor terminal 30 to access and log in to the CMS server 10, and displays a web page content creation screen on the display screen. The editor inputs content (e.g., a product introduction article) according to a web page page editing UI previously set by an engineer, thereby completing a web page. More specifically, the editor enters a title in "single line text", a subtitle in "single line text", an explanatory text in "multiple line text", and a body text in "flexible text" 132. Next, the editor edits the body text entered in "flexible text" 132, for example, in rich text using a rich text editor (e.g., a formatting toolbar).

[0065] FIG. 16 is a diagram showing a second example of web content creation according to the present embodiment. As shown in FIG. 16(a), the editor first selects "2023 New Release Handbag" from the main text entered in "Flexible Text" and then presses the object icon 127 on the formatting toolbar 110. As described above, the object icon 127 on the formatting toolbar 110 according to the present embodiment is set to the normal "h2". As a result, as shown in FIG. 16(b), the text "2023 New Release Handbag" is edited to the "h2" format.

[0066] FIG. 17 is a diagram showing a web content creation example 3 according to this embodiment. As shown in FIG. 17(a), the editor then selects "Information on new event" from the main text entered in "Flexible text" and presses the object icon 121 on the formatting toolbar 110. As described above, the object icon 121 on the formatting toolbar 110 according to this embodiment is set to a combination of special "h2", "centered", "italics" and "underline" (information stored in a specific DB of the storage unit 103). As a result, as shown in FIG. 17(b), the text "Information on new event" is edited to a format of "h2", "centered", "italics" and "underline".

[0067] Furthermore, since object icon 121 on the formatting toolbar 110 is displayed as "h2 (h2 mark)" to which the formats "h2", "centered", "italics" and "underline" are applied, that is, as an icon reflecting the set format, an editor can visually and easily grasp the format (and further the designer's intention) set in object icon 121. Also, the difference between object icon 121 and object icon 127 on the formatting toolbar 110 that indicates the same "h2" can be easily grasped.

[0068] Furthermore, when an editor wishes to edit text into the "h2" format, the editor can select from either the object icon 127, which indicates the normal "h2" format, or the object icon 121, which indicates the special "h2" format, on the formatting toolbar 110, so that two different format designs can be used even for the same "h2" format. At the same time, the format design does not interfere with the design intended by the web designer. Furthermore, the object icon 121 is set by simultaneously combining and corresponding multiple format HTML tags "h2", "centered", "italics" and "underline", so that the editor can apply the special "h2" format intended by the web designer with a single operation. In terms of operability, it is also possible to prevent the editor from making formatting edits.

[0069] In addition, since the object icon 127 indicating the normal "h2" format and the object icon 121 indicating the special "h2" format are the same "h2" format, they have the common format element "h2" and also have the non-common format elements "centered", "italics" and "underline". This allows object icons with different applied formats to coexist on the format setting toolbar 110 even if they are in the same format, making it possible to use two different format designs or apply a unique style.

[0070] FIG. 18 is a diagram showing a fourth example of web content creation according to this embodiment. Next, as shown in FIG. 18(a), the editor selects "Date: 2023 / 4 / 1 Location: Our Company's Conference Hall Time: 10:00-17:00" from the main text entered in "Flexible Text", and then presses the object icon 115 on the formatting toolbar 110. As described above, the object icon 115 on the formatting toolbar 110 according to this embodiment is set in such a manner that "bold", "underline", and a designated character color are simultaneously combined and associated (information stored in a specified DB in the storage unit 103). As a result, as shown in FIG. 18(b), the text "Information on new events" is edited to a format of "bold", "underline", and a designated character color.

[0071] In addition, since the object icon 115 on the format setting toolbar 110 is displayed as "B (emphasis)" with the formatting of "bold", "underline" and a specified character color applied, i.e., as an icon reflecting the set format, the editor can easily visually grasp the format set in the object icon 115 (and further the designer's intention). At the same time, the format design does not interfere with the design intended by the web designer. Furthermore, since the object icon 121 is set in such a way that multiple formats "bold", "underline" and a specified character color are simultaneously combined and associated with each other, the editor can apply the emphasis format intended by the web designer with a single operation. In terms of operability, it is also possible to prevent format editing errors by the editor.

[0072] [Embodiment 2] As described above, within "flexible text", the editor can set (add / delete) format elements that are valid only within "flexible text" as format objects of a text editor that can be used by the editor. In this embodiment, the editor can further set "flexible text" (child flexible text) within "flexible text" (parent flexible text), and can set (add / delete) format elements that are valid only within the set "flexible text" (child flexible text) as format objects of a text editor that can be used by the editor (this is called the nesting function). This will be explained in detail below.

[0073] (Example 1 of using the nesting function) Boxes for displaying hints or warnings are placed on a web page, and dedicated formatting elements (formatting objects) that can be applied only in the placed boxes are prepared. In other words, for each type of placed box, a dedicated formatting toolbar that is valid only in the box is set.

[0074] <Editing UI setting example> Fig. 19 is a diagram showing an edit UI setting example 1 according to this embodiment. Compared to Fig. 11, a "nested" format element 141 is added to the format element list 111-2 according to this embodiment. Nesting refers to a state in which something has the same shape or type (slightly smaller) inside it, or a structure in which the same structure is contained inside a certain structure.

[0075] When making it possible to set "flexible text" (child flexible text) within "flexible text" (parent flexible text), the engineer selects the "nested" format element 141 from the format element list 111-2, and by using a drop-and-drag operation, sets (adds) the object icon 142 and object icon 143 of that format onto the formatting toolbar 110-2.

[0076] When object icon 142 and object icon 143 of the format are set on formatting toolbar 110-2, formatting toolbar 144 corresponding to object icon 142 and formatting toolbar 145 corresponding to object icon 143 are displayed.

[0077] 20 is a diagram showing an edit UI setting example 2 according to this embodiment. In addition, in a screen not shown, the default element property of the format object icon 142 and the object icon 143 is changed to "callout", and the respective element names "nested" are changed to "callout (hint)" and "callout (caution)".

[0078] The engineer can select any format element to be enabled in the "flexible text" (child flexible text) from the format element list 111-2, and set (add) for example an object icon 146 of the format element "h2" and an object icon 147 of the format element "unordered list" on the formatting toolbar 144 by a drop-and-drag operation. Also, for example, an object icon 146 of the format element "h2" and an object icon 148 of the format element "numbered list" can be set (added) on the formatting toolbar 145. That is, the information of the multiple object icons 146, 147, and 148 set (added) to the formatting toolbars 144 and 145 is associated with a specific format element (the "nested" format element 141) on the formatting toolbar 110.

[0079] Needless to say, a plurality of formats can be simultaneously associated and set to the object icons 146, 147, and 148 of the formatting toolbars 144 and 145. For example, in addition to "h2" and "unordered list," "centered," "italics," and "underline" can be simultaneously associated and set to the object icon 146 of the formatting toolbar 144.

[0080] The CMS server 10 (format setting unit 101b) stores information on the format object icon 142 and the object icon 143 set (added) on the format setting toolbar 110-2 in the input field component "flexible text" in a predetermined DB of the storage unit 103. Furthermore, the CMS server 10 (format setting unit 101b) stores information on the format object icon 146 and the object icon 147 set (added) on the format setting toolbar 144 in association with the format object icon 142 in a predetermined DB of the storage unit 103. Furthermore, the CMS server 10 (format setting unit 101b) stores information on the format object icon 146 and the object icon 148 set (added) on the format setting toolbar 145 in association with the format object icon 143 in a predetermined DB of the storage unit 103.

[0081] <Content creation example> Fig. 21 is a diagram showing a first example of web content creation according to this embodiment. When an editor formats text in "flexible text" 150 on the editing UI as described above, the editor can apply the format set in the formatting toolbar 110-2. In the case of the formatting toolbar 110-2 shown in Fig. 21(a), object icons 142 and 143 are set (added).

[0082] When an editor presses an object icon 142 on the formatting toolbar 110-2, a "flexible text" (child flexible text) 151 can be created in a "flexible text" (parent flexible text) 150 on the editing UI. When the editor formats the text in the "flexible text" 151, the editor can apply the format set in the formatting toolbar 144 corresponding to the object icon 142.

[0083] Here, object icon 142 on formatting toolbar 110-2 is an object icon (nested element) set to create a "callout (hint)" (box layout and flexible text for hint display). Format elements on formatting toolbar 144 that are valid only in "flexible text" 151 include object icon 146 of format element "h2" and object icon 147 of format element "unordered list". In other words, in "callout (hint)" (box layout and flexible text for hint display), the engineer has set it so that only the format of format element "h2" and format element "unordered list" are valid according to the design intention of the web designer.

[0084] As shown in Fig. 21(a), the editor selects the body text entered in "flexible text" 151, and then presses object icon 146 and object icon 147 on formatting toolbar 144. In this embodiment, "h2" is associated with object icon 146 on formatting toolbar 144, and "unordered list" is associated with object icon 147. As a result of applying these formats to the body text, as shown in Fig. 21(b), the body text entered in the box layout for displaying hints is edited to the format of "h2" and "unordered list".

[0085] Furthermore, when an editor presses an object icon 143 on the formatting toolbar 110-2, a "flexible text" 152 can be created within "flexible text" 150 on the editing UI. Furthermore, when the editor formats the text within "flexible text" 152, the editor can apply the format set in the formatting toolbar 145 corresponding to the object icon 143.

[0086] Here, object icon 143 on formatting toolbar 110-2 is an object icon (nested element) set to create a "callout (attention)" (box layout / flexible text for displaying a notice). The format elements of formatting toolbar 145 that are valid only in "flexible text" 152 include object icon 146 of format element "h2" and object icon 148 of format element "numbered list". In other words, in "callout (attention)" (box layout / flexible text for displaying a notice), the engineer has set it so that only the format elements "h2" and "numbered list" are valid in accordance with the design intent of the web designer.

[0087] As shown in FIG. 21(a), the editor selects the body text entered in "flexible text" 152, and then presses object icon 146 and object icon 148 on formatting toolbar 145. "h2" is set in association with object icon 146 on formatting toolbar 145 according to this embodiment, and "numbered list" is set in association with object icon 148 (information stored in a specific DB in storage unit 103). As a result of applying these formats to the body text, as shown in FIG. 21(b), the body text entered in the box layout for displaying a notice is edited to the format of "h2" and "numbered list".

[0088] (Example 2 of using the nesting function) To achieve a conversation-style layout, a conversation-style layout is arranged for each character in the conversation, and a dedicated formatting toolbar that is effective only within the layout is set for each character in the conversation.

[0089] <Content creation example> 22A and 22B are diagrams showing a web content creation example 2 according to this embodiment. In the case of the formatting toolbar 110-3 shown in Fig. 22A, object icons 155 and 156 are set (added) on the formatting toolbar 110-3.

[0090] When an editor presses an object icon 155 on the formatting toolbar 110-3, the editor can create "flexible text" (child flexible text) 157 within "flexible text" (parent flexible text) 150 on the editing UI. Also, when an editor presses an object icon 156 on the formatting toolbar 110-3, the editor can create "flexible text" (child flexible text) 158 within "flexible text" (parent flexible text) 150 on the editing UI.

[0091] The object icon 155 on the formatting toolbar 110-3 is an object icon (nested element) set to create "Conversation (Nishida)" (layout flexible text in conversation format). And it is valid only within the "flexible text" 157. The formatting elements of the formatting toolbar 159 include an object icon 160 for the formatting element "emphasis" and an object icon 161 for the formatting element "italics". The object icon 156 on the formatting toolbar 110-3 is an object icon (nested element) set to create "Conversation (Tanaka)" (layout-flexible text in conversational style). The formatting elements of the formatting toolbar 162 that are valid only in the "flexible text" 158 include an object icon 160 for the formatting element "emphasis" and an object icon 161 for the formatting element "italics". In other words, in "Conversation (Nishida)" and "Conversation (Tanaka)" (layout-flexible text in conversational style), the engineers have set the formatting to be valid only for the formatting elements "emphasis" and "italics" in accordance with the design intention of the web designer.

[0092] As shown in FIG. 22(a), the editor selects the body text entered in "flexible text" 157, and then presses object icon 160 and object icon 161 on formatting toolbar 159. In this embodiment, "emphasis" is set to correspond to object icon 146 on formatting toolbar 159, and "italics" is set to correspond to object icon 147. As a result of applying these formats to the body text, as shown in FIG. 22(b), the body text (entered in the conversational layout) is edited to the format of "emphasis" and "italics."

[0093] 22(a), the editor selects the body text entered in "flexible text" 158, and then clicks object icon 160 and object icon 161 on formatting toolbar 162. As a result of applying these formats to the body text, the body text entered in the conversational layout is edited to the "emphasis" and "italics" formats, as shown in FIG. 22(b).

[0094] [Embodiment 3] (Multilingual content function) Engineers set up multilingual input in advance for each content field (input field component). When creating content, editors enter data into the content fields to create page content, but for content fields that have been set up for multilingual input, multiple types of language data (translated data) can be entered in association with the content field.

[0095] Fig. 23 is a diagram showing an example of a multilingual content function according to this embodiment. In the case of Fig. 23, three multilingual input settings are set in advance in a content field of one line of text, as shown in a "Japanese" tab 171, an "English" tab 172, and a "Chinese" tab 173. First, the editor inputs Japanese data into the content field 174 of the "Japanese" tab 171, and then switches to and displays a content field 175 using the "English" tab 172. Next, the editor inputs data in English (English translation data of Japanese data) into the content field 175 of the "English" tab 172. The editor also inputs data in Chinese (Chinese translation data of Japanese data) into the content field (not shown) of the "Chinese" tab 173.

[0096] The CMS server 10 stores the Japanese data, English data, and Chinese data as multilingual content data corresponding to the content field in a specified DB in the storage unit 103. If the CMS server 10 is a headless CMS, the CMS server 10 transmits the Japanese data, English data, and Chinese data as multilingual content data corresponding to the content field of the one-line text to a separately constructed front end via an API, thereby displaying the one-line text in three languages, Japanese, English, and Chinese, to visitors.

[0097] This makes it easier to create multilingual websites. When you want to express specific words (especially important words, etc.) in accurate translation, you can display language data (translation data) that is more appropriate than automatic translation. - It is possible to set (designate) whether or not multiple languages ​​are required for each content field, so editors only need to translate the words in the content (fields) that have been set (designated) to require language input. There is no need to translate other languages ​​(for example, all the words in a website page), reducing the translation burden on editors.

[0098] <Summary> In the CMS 100 according to this embodiment, the format configuration of the rich text editor (for example, the formatting toolbar) in the editing UI can be flexibly set. In addition, multiple format elements can be set in advance in association with a format object (for example, an object icon on the formatting toolbar). In addition, on the formatting toolbar of the editing UI, the object icon is displayed as an icon reflecting one or more formats that have been set. What is needed by editors who are not designers is not an editing UI that can flexibly realize any styling, but an editing UI that allows design and styling according to the instructions intended by the designer with the press of a button.

[0099] This allows the editor to apply the format design combination intended by the web designer with a single operation. The editor can also use two different format designs for similar formats, or apply a unique style. The editor can also exclude formats that do not match the web designer's design intentions by making them unusable. The editor will not cause the format design to deviate from the web designer's design intentions. This also improves the editor's editing capabilities and reduces format editing errors. The editor can also easily grasp the format (and even the designer's intentions) set in the object icon at a glance.

[0100] According to the present embodiment, it is possible to improve the editability of content layout in the web page editing UI of the CMS. Note that, although the present invention has been described by showing specific examples according to the preferred embodiment of the present invention, it is clear that various modifications and changes can be made to these examples without departing from the broad spirit and scope of the present invention as defined in the claims. In other words, the present invention should not be construed as being limited by the details of the examples and the accompanying drawings.

[0101] (supplement) As shown in the above embodiment (see, for example, Figs. 10-14), the engineer first places and configures an input field component in the page layout configuration field 106, thereby arranging a format object icon on the format setting toolbar. In addition, multiple format elements are combined and configured for one object icon. In another embodiment, it is also possible to automate these settings, which further reduces the burden on the engineer.

[0102] FIG. 24 is a diagram for explaining the automatic setting of the editing UI according to this embodiment. First, the CMS server 10 acquires design comp data by a designer. Next, the CMS server 10 analyzes the acquired design comp data and extracts format elements applied to each text described in the design comp. In particular, when multiple formats are simultaneously applied to one text, the CMS server 10 extracts format elements as a combination of multiple formats. In addition, format elements that are not applied to each text in the design comp are not extracted.

[0103] Finally, the CMS server 10 places object icons of the format elements on the format setting toolbar and sets the extracted format elements in association with the object icons. If multiple format combinations are extracted, the object icons are set in association with the multiple format combinations. Furthermore, it is desirable that the icons placed on the format setting toolbar are icons that reflect the set format, as described above.

[0104] It should be noted that while tag-formatted data is preferable for the design comp data, image data may also be used as long as it is analyzable. In the case of tag-formatted data, the format applied by the tag can be easily identified, and in the case of image data, the format applied to the text can be identified by image analysis processing.

[0105] In the case of a headless CMS, since the front end is separate, the format edited by the editing UI according to this embodiment may not necessarily match the format on the website viewed by the visitor (the display in rich text in the headless CMS may not link with the final display). Therefore, in the case of a headless CMS, the editing UI according to this embodiment functions only as a format editing UI that allows editors to edit in an easy-to-see and intuitive manner, but since it can be made to approximate the front end display to a certain extent, the editing UX in the headless CMS can be improved.

[0106] In this embodiment, the target to which the format is applied is "text", but according to the format element list 111 in Fig. 11, there are also format elements such as "image" and "video". "Image" and "video" are arranged on the formatting toolbar as function buttons for inserting "image" and "video", and it is possible to apply multiple formats to the inserted "image" and "video", such as the position of the image (left, center, and right alignment), size, etc. Therefore, in this case, the CMS server 10 can set a combination of multiple format elements for the content (text, image, video, etc.) input as the content of the web page.

[0107] (Additional Note) A CMS server device that manages website content, A formatting means (e.g., Figs. 12 and 13) for associating a combination of multiple format elements (e.g., "h2", "center alignment", "italics" and "underline") with one format object (e.g., an object icon of the format on a formatting toolbar) and setting the combination; a content input means for inputting the content of a web page; a content editing means for editing the content by combining the plurality of format elements associated with the format object when the format object is applied to the input content; A CMS server device characterized by the above. [Explanation of symbols]

[0108] 10 CMS Server 20 System setting terminal 30 Editor's terminal 50 Network 100 CMS 101 Editing UI Settings 101a Content element setting section 101b Formatting section 102 Editing UI Department 102a Text input section 102c Formatting Tools Display 102d Text Editing Department 103 Storage section

Claims

1. A CMS server device that manages website content, A format setting means for setting a combination of a plurality of format elements in association with one format object; a text input means for inputting text of a web page; a text editing means for editing the input text by combining the plurality of format elements associated with the format object when the format object is applied to the input text; A CMS server device comprising:

2. The first format object to which a plurality of format elements are associated and the second format object to which at least one format element is associated are mutually associated with common format elements and non-common format elements; 2. The CMS server device according to claim 1,

3. a formatting tool display means for displaying a formatting tool on which a first icon corresponding to the first format object and a second icon corresponding to the second format object are arranged; 3. The CMS server device according to claim 2, further comprising:

4. the first icon is an icon indicating the plurality of format elements associated with the first format object; 4. The CMS server device according to claim 3,

5. The formatting tool display means includes: Displaying the formatting tool with a particular icon arranged thereon; When the specific icon is applied, a specific formatting tool is displayed in which a third icon corresponding to a third format object to which a plurality of format elements are associated is arranged; The text editing means includes: When the third format object is applied to the input text, editing the text by combining the plurality of format elements associated with the third format object; 4. The CMS server device according to claim 3,

6. An acquisition means for acquiring design comp data of the web page; an extraction means for analyzing a text described in a design comp of the design comp data and extracting a combination of a plurality of format elements applied to one text; having the format setting means sets a combination of the plurality of format elements extracted by the extraction means in association with one format object; 2. The CMS server device according to claim 1,

7. A CMS server device that manages website content, a multilingual setting means for setting a plurality of content fields corresponding to the types of input languages ​​for each content field; a text input means for inputting text corresponding to an input language type for each of the plurality of content fields; a storage means for storing the text inputted for each of the plurality of content fields in association with the one content field for each type of input language; A CMS server device comprising:

8. On the computer, A format setting means for setting a combination of a plurality of format elements in association with one format object; a text input means for inputting text of a web page; a text editing means for editing the input text by combining the plurality of format elements associated with the format object when the format object is applied to the input text; A CMS server program to function as a CMS server.

9. On the computer, a formatting tool display means for displaying, on a display means, a formatting tool on which first icons corresponding to a plurality of format elements are arranged; a text input means for inputting text of a web page from the input means; a text editing means for editing the text by combining the plurality of format elements associated with the first icon when the first icon arranged on the formatting tool is applied to the input text from an operation means; A terminal program comprising:

10. The formatting tool further includes a second icon associated with at least one format element, The first icon and the second icon are associated with a common format element and a non-common format element; 10. The terminal program according to claim 9,

11. the first icon is an icon representing the plurality of form elements; 11. The terminal program according to claim 10,

Images