Cms server device and cms server program

Abstract

To improve editability of a content layout, in a web page editing UI of a CMS.SOLUTION: A CMS server device manages a content of a web site. The CMS server device comprises: 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 where 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 and a CMS server program.

Background Art

[0002] In a company's website, for example, the page of product service information is managed by the marketing department, and the page of company overview and IR information is managed by the public relations department. It is not uncommon that the management responsible department is different for each content page. In addition, since not all departments necessarily have employees with knowledge of web production and operation, some companies request the system department in charge of web production and operation or an external production company when updating or adding pages.

[0003] Conventionally, a CMS (Content Management System) for constructing, managing, and operating a website has been known (see, for example, Patent Document 1). Usually, a CMS is equipped with a user interface for directly editing content (hereinafter referred to as an editing UI). Even if editors such as each management responsible department do not have sufficient specialized knowledge, they can edit (update, add, etc.) web pages without going through web designers or engineers. Therefore, efficient website operation is possible under a division of labor system. In particular, editors add and update web pages based on templates (design prototypes) designed by web designers. Therefore, it is less likely that there will be a large deviation from the design and user interface intended by the web designer for each page.

[0004] In a CMS, first, an engineer (developer) extracts the page layout configuration based on the page design mock-up (final design sample) by a web designer, and develops the above-mentioned template modeled to be easily managed and edited in the CMS (content modeling). More specifically, in the page layout configuration of one template, for example, content elements such as title, subtitle, description, related links, main visual, body text, etc. are extracted, and an editing UI is set up to enable direct editing of the content elements extracted by the editor. By editing (updating, adding, etc.) the content elements modeled in the content modeling along the editing UI, web content that conforms to the design and user interface intended by the web designer is created (Figure 1).

[0005] In recent years, a Headless CMS, which has no head, that is, no front-end (viewer), has also emerged. A Headless CMS is a system specialized in the management, editing, and distribution of content data, and displays a website by collaborating with a separately constructed front-end via an API. Although the technical difficulty of a Headless CMS is higher than that of a conventional CMS, it is excellent in versatility, security, and design flexibility. Since the front-end and the back-end are completely separated, system changes can be made without being affected by each other, CMS functions can be retrofitted, and there are advantages such as fast page display and reduced server load. In addition, a Headless CMS is also suitable for data distribution to various front-ends different from websites, such as apps, smart devices, and digital signage.

Prior Art Documents

Patent Documents

[0006]

Patent Document 1

Summary of the Invention

Problems to be Solved by the Invention

[0007] Here, in a web page, especially in the "main text" (hereinafter referred to as the main text part), layouts that differ in how content components such as headings, paragraphs, and images are combined for each page are usually edited in rich text. The CMS is equipped with a rich text editor. When an editor performs text formatting within the main text part from the editing UI, the desired formatting elements are selected from the formatting toolbar and applied to the target text (Figure 2). However, the rich text editor in the conventional CMS has a problem that the function for editing layouts with different combinations of content components for each page is not always sufficient under an efficient division of labor system by web designers, engineers, and editors.

[0008] For example, since the formatting elements that can be selected in the conventional rich text editor are fixed, problems occur when the formatting combinations given by the web page design cannot be covered. For example, it is not possible to use two types of formatting designs separately in a quote block or apply a unique style (Figure 3(a)). In cases where such designs beyond the specifications of rich text are abandoned or an attempt is made to forcibly realize the intended design or style, there are also cases where the editor is burdened, such as imposing an operation method of directly describing HTML.

[0009] In addition, there is also a problem that the editing UI (for example, the formatting toolbar on the rich text editor of the CMS) is not optimized for editors who do not design. For example, when considering the case of emphasizing text within the main text part, various formatting means such as bold, underline, and text color are provided in rich text. Although the editor needs to follow the instructions of the web designer (for example, bold + underline + a predetermined text color) regarding how to emphasize the text, since the instructions cannot be judged from the editing UI on the CMS, there is a need to refer to separately prepared materials (such as design guidelines).

[0010] And when the instructions from the web designer are difficult to understand or ambiguous, as a result of the editor freely editing the text format using the formatting toolbar based on individual judgment, for example, the format designs applied to each part of the main text become inconsistent, and the website as a whole also deviates from the design intention of the web designer (Fig. 3(b)).

[0011] Also, for example, even if the editor emphasizes according to the instructions of the web designer, first, the target text needs to be selected, and then multiple-step editing operations such as selecting and applying bold, selecting and applying underline, and selecting and applying text color from the formatting toolbar are required. Therefore, there is also a problem that editing mistakes are likely to occur from the perspective of operability. In the case where editing mistakes occur frequently, as a result, the format designs also become inconsistent, and it deviates from the design intention of the web designer.

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

Means for Solving the Problems

[0013] In order to solve the above problems, a CMS server device according to the present invention is a CMS server device for managing the content of a website, and includes a formatting setting means for associating and setting a combination of a plurality of formatting elements with one formatting object, a text input means for inputting text of a web page, and a text editing means for combining the plurality of formatting elements associated with the formatting object and editing the text when the formatting object is applied to the input text.

Effects of the Invention

[0014] According to an embodiment of the present invention, firstly, the editability of content layout can be improved in the web page editing UI of a CMS.

Brief Description of the Drawings

[0015]

Figure 1

Figure 2

Figure 3

Figure 4

Figure 5

Figure 6

Figure 7

Figure 8

Figure 9

Figure 10

Figure 11

Figure 12

Figure 13

Figure 14

Figure 15

Figure 16

Figure 17

Figure 18

Figure 19

Figure 20

Figure 21

Figure 22

Figure 23

Figure 24

Mode for Carrying Out the Invention

[0016] Embodiments 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 the network configuration of the CMS according to this embodiment. FIG. 5 is a diagram showing an example of the architecture configuration of the CMS according to this embodiment. The 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, and is 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 constructing, managing, and operating a website. The CMS server 10 performs, for example, user management, various system settings, content generation of web pages via an editing UI, content data management such as documents and images, and website management. The front end of the website constructed by an engineer is publicly available to visitors of the website via a web server (not shown) under the design supervision by a web designer.

[0018] However, when the CMS server 10 is a headless CMS, since the headless CMS is a system specialized for the management, editing, and distribution of content data, it does not include a front end on the CMS side. Under the design supervision of a web designer, the front end separately constructed by an engineer and the CMS server 10 side cooperate 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 a web designer to perform various system settings and the like. The system setting terminal 20 is realized by, for example, a smartphone, a tablet terminal, or a personal computer, and a predetermined application program (such as a general-purpose web browser or a dedicated app, etc.) for accessing the CMS server 10 is installed in advance.

[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, a tablet terminal, or a personal computer having a display means, an input means, and an operation means, and a predetermined application program (such as a general-purpose web browser or a dedicated app, etc.) for accessing the CMS server 10 is installed in advance.

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

[0022] (Hardware Configuration) FIG. 6 is a diagram showing an example of the hardware configuration of the CMS server according to the present embodiment. The CMS server 10 includes a CPU (Central Processing Unit) 11, a ROM (Read Only Memory) 12, a RAM (Random Access Memory) 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 necessary at startup. The RAM 13 is a working area that temporarily stores processing by the CPU 11 and stores data. The storage device 14 stores and saves various data and programs. The communication device 15 communicates with other devices via the network 50.

[0024] (Software Configuration) FIG. 7 is a diagram showing an example of the software configuration of the CMS server according to the present embodiment. The CMS server 10 mainly includes an editing UI setting unit 101, an editing UI unit 102, and a storage unit 103. The editing UI setting unit 101 includes a content element setting unit 101a and a format setting unit 101b. The editing 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, as page layout components of a web page, content elements extracted by content modeling in the editing UI within the CMS in response to a setting operation by the system setting terminal 20.

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

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

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

[0029] When a single formatting object arranged on the formatting tool is applied to the text displayed on the editing screen in response to a selection operation by the editor terminal 30, the text editing unit 102c has a function of editing the text by combining a plurality of formatting elements associated with the single formatting object.

[0030] The storage unit 103 has a function of storing various databases 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 has 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 a computer constituting the CMS server 10. These functional units may be read as "means", "module", "unit", or "circuit". Also, the various databases of the storage unit 103 in the CMS server 10 can be arranged in an external storage device on the network 50. Further, the computer program and the application program may be stored in a computer-readable storage medium.

[0032] The CMS 100 according to this embodiment is a SaaS-type content management system. Therefore, the system setting terminal 20 and the editor terminal 30 are provided with functional services by the above-mentioned functional units of the CMS server 10 via, for example, a general-purpose web browser or a dedicated application. That is, for example, the web browser receives display data from the CMS server 10, transmits input data or operation data to the CMS server 10, and displays display data as response data on the web browser screen. On the other hand, when configured as a standalone content management system rather than a SaaS-type content management system, the system setting terminal 20 and the editor terminal 30 can also have the above-mentioned functional units of the CMS server 10.

[0033] <CMSによるウェブサイト制作迄のフロー例> Fig. 8 is a diagram showing an example of a website production flow using the CMS according to this embodiment. Website production is generally achieved by dividing the work among various personnel, such as a web director, web designer, engineer, and editor. However, for example, a web director and a web designer, or a web designer and an engineer, may share the same tasks depending on the number of personnel, skills, etc.

[0034] S1 "Site Design": The web director considers the overall structure and flow of the website and creates a site map.

[0035] S2 "Web page design": Web designers design each web page and create design comps and resources (see Figure 1 for an example).

[0036] S3 "Infrastructure construction": Engineers prepare the server and network environment, and install and construct the CMS server 10 (see, for example, FIG. 4). In the case of a headless CMS, a server for the front end (either on the same server as the CMS server 10 or on a separate server, etc.) is also prepared.

[0037] S4 "Content Modeling": Based on the page design by the web designer, the engineer extracts and models the content of the content to be managed by the CMS. Specifically, in the page layout configuration of the web page, for example, content elements such as titles, subtitles, descriptions, related links, main visuals, and body text are extracted (see Figure 1 for reference).

[0038] S5 "Edit UI Settings": The engineer configures the edit UI within the CMS according to the above model. Specifically, in the page layout configuration of the web page, an edit UI is set (defined) that allows the extracted content elements to be directly editable by the editor (see Figure 1 for reference).

[0039] S6 "Front - End Development": The engineer performs coding according to the page design by the web designer and implements the process of flowing in the output of the CMS.

[0040] S7 "Content Creation": The editor edits each web page (updates, adds, etc.) along with the edit UI to create web content (see Figure 2 for reference).

[0041] <Example of Edit UI Settings> As shown in S5 above, the engineer configures the edit UI within the CMS so that the editor can directly edit the content elements modeled in the content. Here, in the web page, for layouts where the combination of content components such as headings, paragraphs, and images for each page is different, especially in the body text part, it is edited in rich text by a rich text editor. However, in the edit UI settings according to this embodiment, different from the conventional fixed formatting toolbar, the format configuration of the formatting toolbar in the rich text editor can be flexibly set. Hereinafter, S5 "Edit UI Settings" will be described in detail.

[0042] FIG. 9 is a diagram showing an example of an edit UI setting according to the present embodiment. An engineer accesses and logs in to the CMS server 10 using the system setting terminal 20, and first displays a model setting screen applied to the page layout configuration of the web page. The engineer sets content elements modeled based on the page design by the web designer in the page layout configuration of the web page.

[0043] Specifically, the engineer can select an input field component (input field for the content element) of a type suitable for each content element from the input field list 105, and arrange and set it in the page layout configuration field 106 by a drag-and-drop operation. In the case of FIG. 9, as an example, "one-line text" corresponding to the title element, "one-line text" corresponding to the subtitle element, "multi-line text" corresponding to the description element, and "flexible text" corresponding to the body text element are arranged and set in the page layout configuration field 106.

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

[0045] FIG. 10 is a diagram showing an example of an edit UI setting according to the present embodiment. Next, after the engineer sets the page layout configuration of the web page, the engineer sets the format control setting of each input field component, that is, the format configuration of the format setting toolbar in the rich text editor. For example, when the "flexible text" 107 corresponding to the body text element among each input field component is selected, the format configuration information 108 currently set to be valid in the "flexible text" 107 is displayed. When the engineer changes the format configuration currently set to be valid for the "flexible text" 107, the engineer presses "Open Builder" 109.

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

[0047] When an editor performs formatting on the text within "flexible text" on the editing UI, the editor can apply the format set here to the format setting toolbar 110. Therefore, based on the page design by a web designer or separately prepared materials (design guidelines, etc.), an engineer selects and sets only the enabled formats. Conversely, for formats that are to be made invalid and do not conform to the design intent of the web designer, they are excluded from the format setting toolbar 110 so that the editor cannot use them. Note that the formats that can be set (added / delete) are as shown in the list 111 of formatting elements in FIG. 11 as an example.

[0048] The CMS server 10 (format setting unit 101b) stores information on the object icons of the formats set (added / delete) above the format setting toolbar 110 within an input field component (for example, "flexible text") in a predetermined DB of the storage unit 103.

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

[0050] For example, since the object icon 115 shown in FIG. 12 has a so-called normal "emphasis" formatting element set as the default on the formatting toolbar 110, in the design format 117 of the format element setting column 116, a check indicating an effective setting for "bold" is attached. This means that when an editor selects text within "flexible text" and applies the object icon 115 on the formatting toolbar 110, the text can be edited to the "bold" format.

[0051] Here, in the design format 117 of the format element setting column 116, when a check indicating an effective setting for "underline" is further attached, the "underline" format element is associated with and set for the object icon 115. Also, in the character color format 118 of the format element setting column 116, when a check indicating an effective setting for "character color" is further checked and a specified color is input, the format element of the specified character color is associated with and set for the object icon 115. In such a case, when an editor selects text within "flexible text" and applies the object icon 115 on the formatting toolbar 110, it means that the text is edited to "bold", "underline", and the specified character color.

[0052] Here, as the design intention of a web designer, consider a case where, for example, to format text in an "emphasis" format, the text must be emphasized in "bold", "underline", and a specified character color. In such a case, usually, even if an editor performs the emphasis according to the instructions of the web designer, first, the target text needs to be selected, and then a multi-step editing operation such as selecting and applying bold, selecting and applying underline, and selecting and applying character color from the formatting toolbar is required.

[0053] However, in the formatting toolbar 110 according to this embodiment, since the object icon 115 indicating the "emphasis" format can be set by combining and associating a plurality of formats, namely "bold", "underline", and a specified character color simultaneously, an editor can apply the "emphasis" format as intended by a web designer with a single operation. From the perspective of operability, it is also possible to prevent formatting editing errors by the editor.

[0054] In addition, when a plurality of formats, namely "bold", "underline", and a specified character color, are simultaneously combined and associated with the object icon 115, in order to make the format (and further the designer's intention) set for the object icon 115 easily visually understandable to the editor, like the object icon 115 shown in FIG. 12, for example, from the icons 119 in the format element setting column 116, an icon with the formats of "bold", "underline", and a specified character color applied, that is, the "B (emphasis mark)" reflecting the set format, can be selected and displayed.

[0055] The CMS server 10 (formatting unit 101b) stores the information on the formats of "bold", "underline", and a specified 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 example of editing UI settings according to this embodiment. Next, a plurality of format settings associated with the object icon newly added on the format setting toolbar 110 will be described. As described above, the engineer can select a format element from the format element list 111 and set (add / delete) it as an object icon of the format on the format setting toolbar 110 by a drag-and-drop operation (FIG. 11). For example, the object icon 121 shown in FIG. 13 is one in which the object icon of the format of "heading 2 (h2)" is 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, the format element setting column 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 of "heading 2 (h2)" by default, the "h2" of the heading tag is initially input in the HTML tag 123 of the format element setting column 122.

[0057] Here, in the layout format 124 of the format element setting column 122, when checks indicating valid settings are attached to "layout" and "center alignment", the format element of "center alignment" is associated with and set for the object icon 121. Also, in the design format 125 of the format element setting column 122, when further checks indicating valid settings are attached to "italic" and "underline", the format elements of "italic" and "underline" are associated with and set for the object icon 121. In such a case, when the editor selects the text in the "flexible text" and applies the object icon 121 on the format setting toolbar 110, it means that the text is edited into the HTML tags "h2", "center alignment", "italic", 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 object icon 121 from the format name because there is already another object icon 127 showing the same HTML tag "h2" above the format setting toolbar 110.

[0059] As described above, since the object icon 121 of the format setting toolbar 110 according to this embodiment is set by combining a plurality of format HTML tags "h2", "centered", "italic", and "underlined" at the same time, the editor can apply a special "h2" format intended by the web designer with a single operation. From the perspective of operability, it is also possible to prevent format editing mistakes by the editor. In addition, when the editor applies the normal "h2" format, the object icon 127 can be selected, and when applying the special "h2" format, the object icon 121 can be selected, so it also meets the design intention of the web designer to always use one of these two format designs when formatting text to the "h2" format.

[0060] In addition, when a plurality of format HTML tags "h2", "centered", "italic", and "underlined" are combined and set in the object icon 121 at the same time, in order for the format (and further the designer's intention) set in the object icon 121 to be visually easy for the editor to grasp, the object icon 121 shown in FIG. 13 can select and display, from among the icons 128 in the format element setting field 122, the "h2 (h2 mark)" to which the formats of "h2", "centered", "italic", and "underlined" are applied, that is, an icon reflecting the set format (a format element shown by a simple drawing or symbol).

[0061] The CMS server 10 (format setting unit 101b) stores the information of the formats "h2", "centered", "italic", and "underlined" 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 example 6 of the editing UI settings according to the present embodiment. Next, the deletion of object icons from the formatting toolbar 110 will be described. As described above, the engineer can delete the existing object icons arranged on the formatting toolbar 110 by a drag-and-drop operation. When the editor formats the text in the "flexible text", the editor can apply the format set here to the formatting toolbar 110. Therefore, based on the page design by the web designer or separately prepared materials (such as design guidelines), the engineer excludes from the formatting toolbar 110 the object icons with formats that do not conform to the design intention of the web designer so that the editor cannot use them.

[0063] <Content creation example> Next, S7 "Content Creation" will be described in detail. The editor creates web content by performing each web page editing (update, addition, etc.) along the editing UI (layout configuration) set by the engineer (see, for example, FIG. 2).

[0064] FIG. 15 is a diagram showing an example 1 of web content creation according to the present embodiment. The editor accesses and logs in to the CMS server 10 using the editor terminal 30, and displays a web page content creation screen on the display screen. By inputting content (for example, a product introduction article) along the page editing UI of the web page preset by the engineer, a single web page is completed. More specifically, the editor enters the title sentence in the "one-line text", the subtitle sentence in the "one-line text", the explanatory text in the "multi-line text", and the main text in the "flexible text" 132. Next, the editor edits the main text entered in the "flexible text" 132, for example, in rich text using a rich text editor (such as a formatting toolbar).

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

[0066] FIG. 17 is a diagram showing an example of web content creation according to this embodiment. As shown in FIG. 17(a), next, the editor selects "Notice of New Event" from the text entered in the "Flexible Text", and then presses the object icon 121 on the formatting toolbar 110. As described above, the object icon 121 of the formatting toolbar 110 according to this embodiment has a special "h2", "centered", "italic", and "underlined" set in combination (the stored information in the predetermined DB of the storage unit 103). As a result, as shown in FIG. 17(b), the text "Notice of New Event" is edited in the format of "h2", "centered", "italic", and "underlined".

[0067] Also, on the formatting toolbar 110, the object icon 121 is displayed as an "h2 (h2 mark)" to which the formats of "h2", "centered", "italic", and "underlined" are applied, that is, an icon reflecting the set formats. Therefore, for the editor, the formats (and further the designer's intention) set for the object icon 121 can be easily grasped visually. Also, the difference from the object icon 127 showing the same "h2" on the formatting toolbar 110 can be easily grasped.

[0068] In addition, when the editor wants to format the text as "h2", since the editor can select either the object icon 127 indicating the normal "h2" format or the object icon 121 indicating the special "h2" format on the formatting toolbar 110, two different format designs of the same "h2" format can be used appropriately. At the same time, the format design does not interfere with the design intended by the web designer. Also, since the object icon 121 has a plurality of format HTML tags "h2", "centered", "italic", and "underlined" simultaneously combined and associated, the editor can apply the special "h2" format intended by the web designer's design intention with a single operation. Formatting errors by the editor can also be prevented from an operational perspective.

[0069] Note that the object icon 127 indicating the normal "h2" format and the object icon 121 indicating the special "h2" format are of the same "h2" format system. Therefore, they have the common format element "h2" and non-common format elements "centered", "italic", and "underlined". As a result, object icons with different applicable formats can coexist on the formatting toolbar 110 even if they are of the same format system, enabling the appropriate use of two types of format designs or the application of unique styles.

[0070] FIG. 18 is a diagram showing a web content creation example 4 according to the present embodiment. Next, as shown in FIG. 18(a), the editor selects "Date of event: April 1, 2023 at: Our company's conference hall Time: 10 - 17:00" from the text entered in the "Flexible text" and presses the object icon 115 on the formatting toolbar 110. As described above, the object icon 115 on the formatting toolbar 110 according to the present embodiment has "bold", "underlined", and a specified text color simultaneously combined and associated (saved information in a predetermined DB of the storage unit 103). As a result, as shown in FIG. 18(b), the text "Notice of new event" is formatted with "bold", "underlined", and the specified text color.

[0071] On the formatting toolbar 110, the object icon 115 is displayed as an icon with the formats of "bold", "underline", and "B (emphasis)" with the specified character color applied, that is, an icon reflecting the set formats. Therefore, for the editor, the formats (and further the designer's intention) set for the object icon 115 can be visually grasped easily. At the same time, the format design does not interfere with the design intended by the web designer. Also, since multiple formats "bold", "underline", and the specified character color are set in combination for the object icon 121, the editor can apply the emphasized format intended by the web designer's design with a single operation. Formatting errors by the editor can also be prevented from the perspective of operability.

[0072] [Embodiment 2] As described above, in the "flexible text", the formatting elements that are only valid within the "flexible text" can be set (added / deleted) as the formatting objects of the text editor available to the editor. In this embodiment, the editor can set a further "flexible text" (child flexible text) within the "flexible text" (parent flexible text), and the formatting elements that are only valid within the set "flexible text" (child flexible text) can be set (added / deleted) as the formatting objects of the text editor available to the editor (referred to as the nesting function). This will be described in detail below.

[0073] [Example of using the nesting function 1] Arrange boxes for hint display and caution display on the web page, and prepare dedicated formatting elements (formatting objects) that are only applicable within the arranged boxes. That is, for each type of arranged box, a dedicated formatting toolbar that is only valid within the box is set respectively.

[0074] [Editor UI setting example] FIG. 19 is a diagram showing an example of an editing UI setting according to the present embodiment. Comparing with FIG. 11, in the list 111-2 of formatting elements according to the present embodiment, a "nest" formatting element 141 is added. Nest means a state where something of the same shape or type (slightly smaller) is contained within something, or a structure in which the same structure is included inside a certain structure.

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

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

[0077] FIG. 20 is a diagram showing an example of an editing UI setting according to the present embodiment. In a screen (not shown), the default element properties of the object icon 142 of the format and the object icon 143 are changed to "callout", and the respective element names "nest" are changed to "callout (hint)" and "callout (caution)".

[0078] Engineers can select any formatting element that is valid within "Flexible Text" (child flexible text) from the list of formatting elements 111-2, and through a drag-and-drop operation, set (add) object icons 146 of the formatting element "h2" and object icon 147 of the formatting element "unordered list" on the formatting toolbar 144. Also, on the formatting toolbar 145, object icons 146 of the formatting element "h2" and object icon 148 of the formatting element "ordered list" can be set (added). That is, information on the multiple object icons 146, 147, 148 set (added) to the formatting toolbars 144 and 145 is associated with the specific formatting element ("nested" formatting element 141) of the formatting toolbar 110.

[0079] Needless to say, it is also possible to set a combination of multiple formats to the object icons 146, 147, 148 of the formatting toolbars 144 and 145 at the same time. For example, in addition to "h2" and "unordered list", "centered alignment", "italic", and "underline" can be set in combination to the object icon 146 of the formatting toolbar 144.

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

[0081] <Example of content creation> FIG. 21 is a diagram showing Example 1 of web content creation according to the present embodiment. When an editor formats the text within "Flexible Text" 150 on the editing UI as described above, the formats set in the format toolbar 110-2 can be applied. Also, in the case of the format toolbar 110-2 shown in FIG. 21(a), object icons 142 and 143 are set (added).

[0082] When the editor presses the object icon 142 on the format toolbar 110-2, "Flexible Text" (child flexible text) 151 can be created within "Flexible Text" (parent flexible text) 150 on the editing UI. And when the editor formats the text within "Flexible Text" 151, the formats set in the format toolbar 144 corresponding to the object icon 142 can be applied.

[0083] Here, the object icon 142 on the format toolbar 110-2 is an object icon (nested element) set for creating a "callout (hint)" (box layout flexible text for hint display). And the format elements of the format toolbar 144 that are only effective within "Flexible Text" 151 have the object icon 146 of the format element "h2" and the object icon 147 of the format element "unordered list". In other words, in the "callout (hint)" (box layout flexible text for hint display), it is set by an engineer so that only the formats of the format element "h2" and the format element "unordered list" are made effective according to the design intention of the web designer.

[0084] As shown in FIG. 21(a), the editor selects the body text entered in the "Flexible Text" 151 and then presses the object icon 146 on the formatting toolbar 144 and the object icon 147. In the formatting toolbar 144 according to this embodiment, "h2" is set in association with the object icon 146, and "unordered list" is set in association with the 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 hint display is edited to the formats of "h2" and "unordered list".

[0085] Also, when the editor presses the object icon 143 on the formatting toolbar 110-2, a "Flexible Text" 152 can be created within the "Flexible Text" 150 on the editing UI. When the editor formats the text within the "Flexible Text" 152, the formats set in the formatting toolbar 145 corresponding to the object icon 143 can be applied.

[0086] Here, the object icon 143 on the formatting toolbar 110-2 is an object icon (nested element) set to create a "callout (attention)" (box layout for attention display · flexible text). And the format elements of the formatting toolbar 145 that are only valid within the "Flexible Text" 152 include the object icon 146 of the format element "h2" and the object icon 148 of the format element "ordered list". In other words, in the "callout (attention)" (box layout for attention display · flexible text), it is set by the engineer so that only the formats of the format element "h2" and the format element "ordered list" are valid according to the design intention of the web designer.

[0087] As shown in Fig. 21(a), the editor selects the body text entered in the "Flexible Text" 152, and then presses the object icon 146 on the formatting toolbar 145 and the object icon 148. In the object icon 146 of the formatting toolbar 145 according to this embodiment, "h2" is set in association, and in the object icon 148, "numbered list" is set in association (the stored information in a predetermined DB of the 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 attention display is edited to the formats of "h2" and "numbered list".

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

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

[0090] When the editor presses the object icon 155 on the formatting toolbar 110-3, a "Flexible Text" (child flexible text) 157 can be created within the "Flexible Text" (parent flexible text) 150 on the editing UI. Also, when the editor presses the object icon 156 on the formatting toolbar 110-3, a "Flexible Text" (child flexible text) 158 can be created within the "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)" (conversation-style layout · flexible text). And it is only valid within the "Flexible Text" 157 The formatting elements of the formatting toolbar 159 have an object icon 160 for the formatting element "Emphasis" and an object icon 161 for the formatting element "Italic". Also, the object icon 156 on the formatting toolbar 110-3 is an object icon (nested element) set to create "Conversation (Tanaka)" (conversation-style layout · flexible text). And the formatting elements of the formatting toolbar 162 that are only valid within the "Flexible Text" 158 have an object icon 160 for the formatting element "Emphasis" and an object icon 161 for the formatting element "Italic". That is, in "Conversation (Nishida)" and "Conversation (Tanaka)" (conversation-style layout · flexible text), engineers have set it so that only the formatting of the formatting elements "Emphasis" and "Italic" is valid according to the design intention of the web designer.

[0092] As shown in Fig. 22(a), the editor selects the body text entered in the "Flexible Text" 157 and presses the object icon 160 and the object icon 161 on the formatting toolbar 159. The object icon 146 of the formatting toolbar 159 according to this embodiment is set with "Emphasis" associated, and the object icon 147 is set with "Italic" associated. As a result of applying these formats to the body text, as shown in Fig. 22(b), the body text entered in the conversation-style layout is edited to the formats of "Emphasis" and "Italic".

[0093] Also, as shown in FIG. 22(a), the editor selects the text entered in the "Flexible Text" 158 and presses the object icon 160 and the object icon 161 on the formatting toolbar 162. As a result of applying these formats to the text, as shown in FIG. 22(b), the text entered in the (dialogue-style layout) is edited to the formats of "emphasis" and "italic".

[0094] [Embodiment 3] (Multilingual Content Function) Engineers make multilingual input settings in advance for each content field (input field component). When creating content, the editor inputs data into the content field to create page content. For content fields with multilingual input settings, multiple types of language data (translation data) can be input in association with the content field.

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

[0096] The CMS server 10 stores Japanese data, English data, and Chinese data in a predetermined DB of the storage unit 103 as multilingual content data corresponding to content fields. When the CMS server 10 is a headless CMS, the CMS server 10 transmits Japanese data, English data, and Chinese data to a separately constructed front-end via an API as multilingual content data corresponding to the content field of the one-line text, so that the one-line text corresponding to three languages, Japanese, English, and Chinese, can be displayed to visitors.

[0097] Thus, when creating a multilingual website, · When it is desired to express specific words (especially important words, etc.) with accurate translated words, language data (translation data) more appropriate than automatic translation can be displayed. · Since it is possible to set (specify) the necessity of multiple language inputs for each content field, the editor only needs to translate the words of the content (field) for which the language input is required (required to be specified), and there is no need to translate other languages (for example, all language words in the website page), so the translation burden on the editor can be reduced.

[0098] <Summary> In the CMS 100 according to this embodiment, the format configuration of the rich text editor (for example, the format setting toolbar) in the editing UI can be set flexibly. Also, a plurality of format elements can be associated and set in advance for a format object (for example, an object icon on the format setting toolbar). Also, on the format setting toolbar of the editing UI, the object icon is displayed as an icon reflecting one or more set formats. What is necessary for an editor who is not a designer is not an editing UI that can flexibly realize any styling, but an editing UI that can design and style with one button as intended by the designer.

[0099] As a result, the editor can apply a combination of formatting designs as intended by the web designer with a single operation. Also, the editor can use two types of formatting designs separately in the same type of formatting or apply their own styles. Also, the editor can exclude formats that do not conform to the design intent of the web designer so that they cannot be used. Also, the formatting design by the editor does not deviate from the design intent of the web designer. Also, the editability of the editor is improved and formatting editing mistakes can be reduced. Also, the editor can easily visually grasp the formatting (and further the designer's intent) set for the object icon at a glance.

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

[0101] (Supplementary) · As shown in the above embodiment (for example, see FIGS. 10-14), the engineer first arranged and set the input field component in the page layout configuration field 106 to arrange the format object icon on the format setting toolbar. Also, a plurality of format elements were combined and set for one object icon. Here, as another embodiment, it is also possible to automate these settings. This further reduces the engineer's burden.

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

[0103] Finally, the CMS server 10 arranges object icons of the formatting elements on the format setting toolbar, and associates and sets the extracted formatting elements with the object icons. When a combination of a plurality of formats is extracted, the object icon is set by associating a combination of the plurality of formats. Furthermore, it is desirable that the icons arranged on the format setting toolbar are icons reflecting the set format as described above.

[0104] Note that the design concept data is preferably data in tag format, but may be image data as long as it can be analyzed. If it is data in tag format, the format applied by the tag can be easily specified, and if it is image data, the format applied to the text can be specified by image analysis processing.

[0105] · In the case of a headless CMS, since the front end is separated, the format edited by the editing UI according to the present embodiment may not necessarily exactly match the format on the website viewed by the visitor (there may be a case where the display on the rich text in the headless CMS does not link to the final display). Therefore, in the case of a headless CMS, the editing UI according to the present embodiment functions as a format editing UI that enables the editor to easily and intuitively edit, but since it can approach the front-end display to a certain extent, the editing UX in the headless CMS can be improved.

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

[0107] (Appendix) A CMS server device for managing the content of a website, Format setting means (for example, FIGS. 12 and 13) for associating and setting a combination of a plurality of format elements (for example, "h2", "center alignment", "italic", and "underline") with one format object (for example, the object icon of the format on the format setting toolbar); Content input means for inputting the content of the web page; 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 Signs

[0108] 10 CMS server 20 System setting terminal 30 Editor terminal 50 Network 100 CMS 101 Editing UI setting section 101a Content element setting section 101b Format setting section 102 Editing UI section 102a Text input section 102c Format setting tool display section 102d Text Editing Department 103 Memory Department

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 a format object to be valid in text editing; a format exclusion means for excluding format objects that are to be invalid in text editing; a formatting tool display means for displaying a formatting tool on which icons corresponding to the format objects to be enabled in text editing are arranged; 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 icons are icons indicating the plurality of format elements associated with the format object; 2. The CMS server device according to claim 1,

3. Computer, a format setting means for setting a combination of a plurality of format elements in association with a format object to be valid in text editing; a format exclusion means for excluding format objects that are to be invalid in text editing; a formatting tool display means for displaying a formatting tool on which icons corresponding to the format objects to be enabled in text editing are arranged; 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; CMS server program to function as a CMS server.

Images