特開 2024-178099 ＣＭＳサーバ装置、ＣＭＳサーバプログラム及び端末プログラム

(19)【発行国】日本国特許庁(JP)

(12)【公報種別】公開特許公報(A)

(11)【公開番号】P2024178099

(43)【公開日】2024-12-24

(54)【発明の名称】ＣＭＳサーバ装置、ＣＭＳサーバプログラム及び端末プログラム

(51)【国際特許分類】

   G06F 40/166 20200101AFI20241217BHJP

   G06F 40/143 20200101ALI20241217BHJP

【ＦＩ】

G06F40/166

G06F40/143

【審査請求】有

【請求項の数】11

【出願形態】ＯＬ

(21)【出願番号】P 2024047399

(22)【出願日】2024-03-25

(31)【優先権主張番号】P 2023096044

(32)【優先日】2023-06-12

(33)【優先権主張国・地域又は機関】JP

【新規性喪失の例外の表示】特許法第３０条第２項適用申請有り 令和５年１２月２５日に自社ウェブサイト及び自社プロダクトサイトにて掲載 ｈｔｔｐｓ：／／ｗｗｗ．ｆｅｎｒｉｒ－ｉｎｃ．ｃｏｍ／ｊｐ／ｎｅｗｓ／２０２３／１２／２５／ｎｉｌｔｏ－２０２３／ ｈｔｔｐｓ：／／ｗｗｗ．ｎｉｌｔｏ．ｃｏｍ／

(71)【出願人】

【識別番号】505410069

【氏名又は名称】フェンリル株式会社

(74)【代理人】

【識別番号】100153246

【弁理士】

【氏名又は名称】伊吹 欽也

(72)【発明者】

【氏名】西田 剛

【テーマコード（参考）】

5B109

【Ｆターム（参考）】

5B109NH01

5B109NH03

5B109NH04

5B109NH11

5B109TB03

5B109VC03

(57)【要約】

【課題】ＣＭＳのウェブページ編集ＵＩにおいて、コンテンツレイアウトの編集性を向上させる。
【解決手段】本発明に係るＣＭＳサーバ装置は、ウェブサイトのコンテンツを管理するＣＭＳサーバ装置であって、一の書式オブジェクトに、複数の書式要素の組み合わせを対応付けて設定する書式設定手段と、ウェブページのテキストを入力するテキスト入力手段と、入力されたテキストに書式オブジェクトが適用された場合、書式オブジェクトに対応付けられた複数の書式要素を組み合わせて、テキストを編集するテキスト編集手段と、を有する。
【選択図】図１７

【特許請求の範囲】

【請求項1】

ウェブサイトのコンテンツを管理するＣＭＳサーバ装置であって、
一の書式オブジェクトに、複数の書式要素の組み合わせを対応付けて設定する書式設定手段と、
ウェブページのテキストを入力するテキスト入力手段と、
入力された前記テキストに前記書式オブジェクトが適用された場合、該書式オブジェクトに対応付けられた前記複数の書式要素を組み合わせて、前記テキストを編集するテキスト編集手段と、
を有することを特徴とするＣＭＳサーバ装置。

【請求項2】

複数の書式要素が対応付けられた第１の書式オブジェクト及び少なくとも一以上の書式要素が対応付けられた第２の書式オブジェクトは、互いに共通の書式要素が対応付けられ、且つ、非共通の書式要素が対応付けられること、
を特徴とする請求項１に記載のＣＭＳサーバ装置。

【請求項3】

前記第１の書式オブジェクトに対応する第１のアイコン及び前記第２の書式オブジェクトに対応する第２のアイコンが配置された書式設定ツールを表示する書式設定ツール表示手段と、
を有することを特徴とする請求項２に記載のＣＭＳサーバ装置。

【請求項4】

前記第１のアイコンは、前記第１の書式オブジェクトに対応付けられた前記複数の書式要素を示すアイコンであること、
を特徴とする請求項３に記載のＣＭＳサーバ装置。

【請求項5】

前記書式設定ツール表示手段は、
特定アイコンが配置された前記書式設定ツールを表示し、
前記特定アイコンが適用された場合に、複数の書式要素が対応付けられた第３の書式オブジェクトに対応する第３のアイコンが配置された特定書式設定ツールを表示し、
前記テキスト編集手段は、
入力された前記テキストに前記第３の書式オブジェクトが適用された場合、該第３の書式オブジェクトに対応付けられた前記複数の書式要素を組み合わせて、前記テキストを編集すること、
を特徴とする請求項３に記載のＣＭＳサーバ装置。

【請求項6】

前記ウェブページのデザインカンプデータを取得する取得手段と、
前記デザインカンプデータのデザインカンプ内に記述されたテキストを解析し、一のテキストに適用されている複数の書式要素の組み合わせを抽出する抽出手段と、
を有し、
前記書式設定手段は、一の書式オブジェクトに、前記抽出手段により抽出された複数の書式要素の組み合わせを対応付けて設定すること、
を特徴とする請求項１に記載のＣＭＳサーバ装置。

【請求項7】

ウェブサイトのコンテンツを管理するＣＭＳサーバ装置であって、
一のコンテンツフィールド毎に、入力言語の種類に応じた複数のコンテンツフィールドを設定する多言語設定手段と、
前記複数のコンテンツフィールド毎に、入力言語の種類に応じたテキストを入力するテキスト入力手段と、
前記複数のコンテンツフィールド毎に入力されたテキストを、入力言語の種類毎に、前記一のコンテンツフィールドに対応付けて記憶する記憶手段と、
を有することを特徴とするＣＭＳサーバ装置。

【請求項8】

コンピュータに、
一の書式オブジェクトに、複数の書式要素の組み合わせを対応付けて設定する書式設定手段と、
ウェブページのテキストを入力するテキスト入力手段と、
入力された前記テキストに前記書式オブジェクトが適用された場合、該書式オブジェクトに対応付けられた前記複数の書式要素を組み合わせて、前記テキストを編集するテキスト編集手段と、
して機能させるためのＣＭＳサーバプログラム。

【請求項9】

コンピュータに、
表示手段に、複数の書式要素が対応付けられた第１のアイコンが配置された書式設定ツールを表示する書式設定ツール表示手段と、
入力手段から、ウェブページのテキストを入力するテキスト入力手段と、
操作手段から、入力された前記テキストに前記書式設定ツールに配置された前記第１のアイコンが適用操作された場合、該第１のアイコンに対応付けられた前記複数の書式要素を組み合わせて、前記テキストを編集するテキスト編集手段と、
を有することを特徴とする端末プログラム。

【請求項10】

前記書式設定ツールは、さらに、少なくとも一以上の書式要素が対応付けられた第２のアイコンが配置され、
前記第１のアイコン及び前記第２のアイコンは、互いに共通の書式要素が対応付けられ、且つ、非共通の書式要素が対応付けられること、
を特徴とする請求項９に記載の端末プログラム。

【請求項11】

前記第１のアイコンは、前記複数の書式要素を示すアイコンであること、
を特徴とする請求項１０に記載の端末プログラム。

【発明の詳細な説明】

【技術分野】

【0001】

本発明は、ＣＭＳサーバ装置、ＣＭＳサーバプログラム及び端末プログラムに関する。

【背景技術】

【0002】

企業のウェブサイトにおいて、例えば製品サービス情報のページはマーケティング部門が管理し、会社概要やIR情報のページは広報部門が管理するといったように、コンテンツページごとに管理担当部門が異なることが少なくない。また、各部門にウェブ制作運用に対する知識を有する社員がいるとは限らないため、ページの更新・追加の際には、ウェブ制作運用を担当するシステム部門や外部制作会社に対して依頼をする企業もある。

【0003】

従来よりウェブサイトの構築・管理・運用を行うためのＣＭＳ（Ｃｏｎｔｅｎｔ Ｍａｎａｇｅｍｅｎｔ Ｓｙｓｔｅｍ）が知られている（例えば、特許文献１参照）。通常ＣＭＳでは、直接コンテンツ編集するためのユーザーインターフェイス（以下編集ＵＩという）を備えており、各管理担当部門などの編集者が専門的な知識を十分にもっていなくとも、ウェブデザイナーやエンジニアを介さずに、ウェブページの編集（更新・追加等）が可能になるため、分業体制で効率的なウェブサイト運用が可能である。特に編集者は、ウェブデザイナーによりデザイン設計されたテンプレート（デザインひな形）をベースに、ウェブページの追加・更新を行うため、ページごとにウェブデザイナーが意図していたデザインやユーザーインターフェイスに大きな乖離が生まれてしまうということも少ない。

【0004】

ＣＭＳにおいて、まずエンジニア（開発者）は、ウェブデザイナーによるページデザインカンプ（デザインの完成見本）を元に、ページレイアウト構成を抽出し、ＣＭＳで管理・編集しやすいようにモデル化された上述のテンプレートを開発する（コンテンツモデリング）。より具体的に、１つのテンプレートにおけるページレイアウト構成において、例えば、タイトル、サブタイトル、説明、関連リンク、メインビジュアル、本文・・といったコンテンツ要素を抽出し、編集者が抽出したコンテンツ要素を直接編集可能とする編集ＵＩを設定する。編集者は、編集ＵＩに沿ってコンテンツモデリングされたコンテンツ要素に対して編集（更新・追加等）を行うことで、ウェブデザイナーが意図していたデザインやユーザーインターフェイスに叶うウェブコンテンツが作成される（図１）。

【0005】

また、近年ではヘッドレスＣＭＳ（Ｈｅａｄｌｅｓｓ ＣＭＳ）と呼ばれる、ヘッドつまりフロントエンド（ビュワー）のないＣＭＳも登場しつつある。ヘッドレスＣＭＳは、コンテンツデータの管理・編集・配信に特化したシステムで、別途構築したフロントエンドとはＡＰＩを介して連携することでウェブサイトを表示する。ヘッドレスＣＭＳは、従来のＣＭＳと比べ技術難易度は高いが、汎用性・セキュリティ・設計の柔軟性に優れている。フロントエンドとバックエンドが完全に切り離されているため、それぞれに影響されることなくシステム変更を行えたり、ＣＭＳ機能を後付けできたり、高速なページ表示やサーバ負担低減などといったメリットがある。またヘッドレスＣＭＳは、ウェブサイトだけでなく、アプリやスマートデバイス、デジタルサイネージなど、フロントエンドの異なる様々なチャネルにデータ配信する用途にも向いている。

【先行技術文献】

【特許文献】

【0006】

【特許文献1】特表２０１９－５３１５２４号公報

【発明の概要】

【発明が解決しようとする課題】

【0007】

ここで、ウェブページにおいて特に「本文」（以下、本文パートという）のように、ページごとに見出しや段落、画像などのコンテンツ構成要素をどう組み合わせるかが異なるレイアウトは、通常リッチテキストで編集される。ＣＭＳはリッチテキストエディタを備えており、編集者が編集ＵＩから本文パート内においてテキストの書式編集を行う場合、書式設定ツールバーから所望の書式要素を選択し、対象のテキストに対して、選択した書式適用する（図２）。しかしながら、従来のＣＭＳにおけるリッチテキストエディタは、ウェブデザイナー、エンジニア及び編集者による効率的な分業体制の下、ページごとにコンテンツ構成要素の組み合わせ方が異なるレイアウトを編集するための機能が、必ずしも十分ではないという問題がある。

【0008】

例えば、従来のリッチテキストエディタは選択できる書式要素が固定化さているため、ウェブページデザインが与えられた書式の組み合わせではカバーできない場合に問題が発生する。例えば、引用ブロックで２種類の書式デザインを使い分けたり、独自のスタイルを適用したりすることはできない（図３（ａ））。こういったリッチテキストの仕様を超えたデザインは諦めるか、意図したデザインやスタイルを強引に実現しようとする場合、直接ＨＴＭＬを記述する運用方法を課すなど、編集者に負担を強いているケースもある。

【0009】

また、デザインをしない編集者に編集ＵＩ（例えば、ＣＭＳのリッチテキストエディタ上の書式設定ツールバー）が最適化されていないという問題もある。例えば本文パート内のテキストを強調するケースを考えたとき、リッチテキストでは太字や下線、文字色など様々な書式手段が用意されている。編集者は、テキストをどのように強調するかについてウェブデザイナーの指示（例えば太字＋下線＋所定文字色）に従う必要があるものの、ＣＭＳ上の編集ＵＩからは指示を判断可能なものではないため、別途用意された資料（デザイン指針等）などを参照する手間がある。

【0010】

そして、ウェブデザイナーの指示が分かりにくかったり曖昧だった場合に、編集者が個々判断で書式設定ツールバーを用いて自由にテキストの書式編集を行った結果、例えば本文パート毎に適用された書式デザインがバラバラとなってしまい、ウェブサイト全体としてもウェブデザイナーのデザイン意図から乖離してしまう（図３（ｂ））。

【0011】

また例えば、編集者がウェブデザイナーの指示に従った強調を行うとしても、まず対象のテキストを選択の上、書式設定ツールバーから太字を選択・適用し、下線を選択・適用し、文字色を選択・適用する編集操作といった複数段階の編集操作が必要となるため、操作性の点からも編集ミスが起こりやすいという問題もある。編集ミスが多発した場合についても、やはり書式デザインがバラバラとなった結果、ウェブデザイナーのデザイン意図から乖離してしまう。

【0012】

本発明は、上記の点に鑑み提案されたものであり、一つの側面から、ＣＭＳのウェブページ編集ＵＩにおいて、コンテンツレイアウトの編集性を向上させることを目的とする。

【課題を解決するための手段】

【0013】

上記の課題を解決するため、本発明に係るＣＭＳサーバ装置は、ウェブサイトのコンテンツを管理するＣＭＳサーバ装置であって、一の書式オブジェクトに、複数の書式要素の組み合わせを対応付けて設定する書式設定手段と、ウェブページのテキストを入力するテキスト入力手段と、入力された前記テキストに前記書式オブジェクトが適用された場合、該書式オブジェクトに対応付けられた前記複数の書式要素を組み合わせて、前記テキストを編集するテキスト編集手段と、を有する。

【発明の効果】

【0014】

本発明の実施の形態によれば、一つに、ＣＭＳのウェブページ編集ＵＩにおいて、コンテンツレイアウトの編集性を向上させることができる。

【図面の簡単な説明】

【0015】

【図1】従来のＣＭＳによるウェブサイト制作フロー例を示す図である。

【図2】従来のテキストの書式編集例を示す図である。

【図3】従来のリッチテキストエディタに係る課題を説明する図である。

【図4】本実施形態に係るＣＭＳのネットワーク構成例を示す図である。

【図5】本実施形態に係るＣＭＳのアーキテクチャ構成例を示す図である。

【図6】本実施形態に係るＣＭＳサーバのハードウェア構成例を示す図である。

【図7】本実施形態に係るＣＭＳサーバのソフトウェア構成例を示す図である。

【図8】本実施形態に係るＣＭＳによるウェブサイト制作フロー例を示す図である。

【図9】本実施形態に係る編集ＵＩ設定例１を示す図である。

【図10】本実施形態に係る編集ＵＩ設定例２を示す図である。

【図11】本実施形態に係る編集ＵＩ設定例３を示す図である。

【図12】本実施形態に係る編集ＵＩ設定例４を示す図である。

【図13】本実施形態に係る編集ＵＩ設定例５を示す図である。

【図14】本実施形態に係る編集ＵＩ設定例６を示す図である。

【図15】本実施形態に係るウェブコンテンツ作成例１を示す図である。

【図16】本実施形態に係るウェブコンテンツ作成例２を示す図である。

【図17】本実施形態に係るウェブコンテンツ作成例３を示す図である。

【図18】本実施形態に係るウェブコンテンツ作成例４を示す図である。

【図19】本実施形態に係る編集ＵＩ設定例１を示す図である。

【図20】本実施形態に係る編集ＵＩ設定例２を示す図である。

【図21】本実施形態に係るウェブコンテンツ作成例１を示す図である。

【図22】本実施形態に係るウェブコンテンツ作成例２を示す図である。

【図23】本実施形態に係る多言語コンテンツ機能例を示す図である。

【図24】別実施形態に係る編集ＵＩ自動設定を説明する図である。

【発明を実施するための形態】

【0016】

本発明の実施形態について、図面を参照しつつ詳細に説明する。
[実施形態１]
＜システム構成＞
（ネットワーク構成）
図４は、本実施形態に係るＣＭＳのネットワーク構成例を示す図である。また図５は、本実施形態に係るＣＭＳのアーキテクチャ構成例を示す図である。本実施形態に係るＣＭＳ（Ｃｏｎｔｅｎｔ Ｍａｎａｇｅｍｅｎｔ Ｓｙｓｔｅｍ）１００は、ＣＭＳサーバ１０、エンジニア（開発者）又はウェブデザイナーの有するシステム設定端末２０、及びコンテンツ編集者の有する編集者端末３０を含み、ネットワーク５０を介して接続されている。

【0017】

ＣＭＳサーバ１０は、ウェブサイトの構築・管理・運用を行うためのＳａａＳ（Ｓｏｆｔｗａｒｅ ａｓ ａ Ｓｅｒｖｉｃｅ）型コンテンツ管理システムのサーバ装置である。ＣＭＳサーバ１０は、例えば、ユーザ管理、各種のシステム設定、編集ＵＩを介したウェブページのコンテンツ生成、文書や画像等のコンテンツデータ管理、ウェブサイト管理などを行う。ウェブデザイナーによるデザイン監修の下、エンジニアにより構築されたウェブサイトのフロントエンドが、ウェブサーバ（非図示）を介してウェブサイトの訪問者に公開される。

【0018】

但し、ＣＭＳサーバ１０がヘッドレスＣＭＳである場合、ヘッドレスＣＭＳはコンテンツデータの管理・編集・配信に特化したシステムであるため、ＣＭＳ側にフロントエンドを含まない。ウェブデザイナーによるデザイン監修の下、エンジニアにより別途構築されたフロントエンドとＣＭＳサーバ１０側とがＡＰＩ（Ａｐｐｌｉｃａｔｉｏｎ Ｐｒｏｇｒａｍｍｉｎｇ Ｉｎｔｅｒｆａｃｅ）を介して連携し、訪問者にウェブサイトを表示する仕組みである（デカップルド・アーキテクチャ）。

【0019】

システム設定端末２０は、エンジニア又はウェブデザイナーが各種のシステム設定等を行うための情報端末装置である。システム設定端末２０は、例えばスマートフォン、タブレット端末又はパーソナルコンピュータなどにより実現され、ＣＭＳサーバ１０にアクセスするための所定のアプリケーションプログラム（例えば汎用ウェブブラウザや専用アプリ等）が予めインストールされる。

【0020】

編集者端末３０は、編集者がウェブコンテンツの作成や編集を行うための情報端末装置である。編集者端末３０は、例えば表示手段、入力手段、操作手段を有するスマートフォン、タブレット端末又はパーソナルコンピュータなどにより実現され、ＣＭＳサーバ１０にアクセスするための所定のアプリケーションプログラム（例えば汎用ウェブブラウザや専用アプリ等）が予めインストールされる。

【0021】

ネットワーク５０は、有線、無線を含む通信ネットワークである。ネットワーク５０は、例えば、インターネット、公衆回線網、ＷｉＦｉ（登録商標）、Ｂｌｕｅｔｏｏｔｈ（登録商標）などを含む。

【0022】

（ハードウェア構成）
図６は、本実施形態に係るＣＭＳサーバのハードウェア構成例を示す図である。ＣＭＳサーバ１０は、ＣＰＵ（Central Processing Unit）１１、ＲＯＭ（Read Only Memory）１２、ＲＡＭ（Random Access Memory）１３、記憶装置１４、及び通信装置１５を有する。

【0023】

ＣＰＵ１１は、各種プログラムの実行や演算処理を行う。ＲＯＭ１２は、起動時に必要なプログラムなどが記憶されている。ＲＡＭ１３は、ＣＰＵ１１での処理を一時的に記憶したり、データを記憶したりする作業エリアである。記憶装置１４は、各種データ及びプログラムを格納・保存する。通信装置１５は、ネットワーク５０を介して他装置との通信を行う。

【0024】

（ソフトウェア構成）
図７は、本実施形態に係るＣＭＳサーバのソフトウェア構成例を示す図である。ＣＭＳサーバ１０は、主な機能部として、編集ＵＩ設定部１０１、編集ＵＩ部１０２及び記憶部１０３を有する。編集ＵＩ設定部１０１は、コンテンツ要素設定部１０１ａ及び書式設定部１０１ｂを含む。編集ＵＩ部１０２は、テキスト入力部１０２ａ、書式設定ツール表示部１０２ｂ及びテキスト編集部１０２ｃを含む。

【0025】

コンテンツ要素設定部１０１ａは、システム設定端末２０による設定操作に応じて、コンテンツモデリングにより抽出されたコンテンツ要素を、ＣＭＳ内の編集ＵＩにウェブページのページレイアウト構成要素として設定する機能を有している。

【0026】

書式設定部１０１ｂは、システム設定端末２０による設定操作に応じて、一の書式オブジェクトに、複数の書式要素の組み合わせを対応付けて設定する機能を有している。

【0027】

テキスト入力部１０２ａは、編集者端末３０による入力操作に応じて、ウェブページのテキストを入力する機能を有している。

【0028】

書式設定ツール表示部１０２ｂは、編集者端末３０の表示画面に、書式オブジェクトに対応するオブジェクトアイコン（単に、アイコンともいう）が配置された書式設定ツールを表示する機能を有している。

【0029】

テキスト編集部１０２ｃは、編集者端末３０による選択操作に応じて、編集画面に表示されたテキストに書式設定ツール上に配置された一の書式オブジェクトが適用された場合、一の書式オブジェクトに対応付けられた複数の書式要素を組み合わせて、当該テキストを編集する機能を有している。

【0030】

記憶部１０３は、ＣＭＳとしてウェブサイトを構築・管理・運用を行うために必要な各種ＤＢを記憶する機能を有している。

【0031】

なお、これら各機能部は、本発明に係る機能部であって、ＣＭＳサーバ１０がウェブサイトを構築・管理・運用を行うために必要な各種機能部を他にも備えていることは言うまでもない。また各機能部は、ＣＭＳサーバ１０を構成するコンピュータのＣＰＵ、ＲＯＭ、ＲＡＭ等のハードウェア資源上で実行されるプログラムによって実現されるものである。これらの機能部は、「手段」、「モジュール」、「ユニット」、又は「回路」に読替えてもよい。また、ＣＭＳサーバ１０における記憶部１０３の各種ＤＢは、ネットワーク５０上の外部記憶装置に配置することも可能である。また、上記コンピュータプログラム及びアプリケーションプログラムは、コンピュータが読み取り可能な記憶媒体に格納されていてもよい。

【0032】

本実施形態に係るＣＭＳ１００はＳａａＳ型コンテンツ管理システムである。このため、システム設定端末２０及び編集者端末３０側は、例えば汎用ウェブブラウザや専用アプリ等を介してＣＭＳサーバ１０の有する上記機能部による機能サービスが提供される。つまり、例えばウェブブラウザがＣＭＳサーバ１０から表示データを受信し、ウェブブラウザがＣＭＳサーバ１０に入力データや操作データを送信し、またレスポンスデータとしての表示データをウェブブラウザ画面上に表示する。一方、ＳａａＳ型コンテンツ管理システムではなく、スタンドアローン型コンテンツ管理システムとして構成される場合には、システム設定端末２０及び編集者端末３０側が、ＣＭＳサーバ１０の有する上記機能部を有することも可能である。

【0033】

＜ＣＭＳによるウェブサイト制作迄のフロー例＞
図８は、本実施形態に係るＣＭＳによるウェブサイト制作フロー例を示す図である。ウェブサイト制作は、一般にウェブディレクター、ウェブデザイナー、エンジニア、及び編集者等、各担当者間の分業により実現される。但し、例えばウェブディレクター及びウェブデザイナー、ウェブデザイナー及びエンジニアなどは、人員やスキル等に応じて分担作業を兼任する場合もある。

【0034】

Ｓ１「サイト設計」：ウェブディレクターは、ウェブサイト全体の構成や導線を検討し、サイトマップを作成する。

【0035】

Ｓ２「ウェブページデザイン」：ウェブデザイナーは、各ウェブページをデザインし、デザインカンプやリソースを作成する（例えば図１参照）。

【0036】

Ｓ３「インフラ構築」：エンジニアは、サーバやネットワーク環境を準備し、ＣＭＳサーバ１０を設置・構築する（例えば図４参照）。なおヘッドレスＣＭＳの場合には、加えてフロントエンドのためのサーバ（ＣＭＳサーバ１０と同サーバ内又は別サーバ等）を準備する。

【0037】

Ｓ４「コンテンツモデリング」：エンジニアは、ウェブデザイナーによるページデザインを元に、ＣＭＳで管理するコンテンツの内容を抽出しモデル化する。具体的に、ウェブページのページレイアウト構成において、例えば、タイトル、サブタイトル、説明、関連リンク、メインビジュアル、本文・・といったコンテンツ要素を抽出する（例えば図１参照）。

【0038】

Ｓ５「編集ＵＩ設定」：エンジニアは、上記モデルに従ってＣＭＳ内の編集ＵＩを設定する。具体的に、ウェブページのページレイアウト構成において、抽出したコンテンツ要素を編集者が直接編集可能とする編集ＵＩを設定（定義）する（例えば図１参照）。

【0039】

Ｓ６「フロントエンド開発」：エンジニアは、ウェブデザイナーによるページデザインに沿ったコーディングを行い、ＣＭＳの出力を流し込む処理を実装する。

【0040】

Ｓ７「コンテンツ作成」：編集者は、編集ＵＩに沿って各々のウェブページ編集（更新・追加等）を行い、ウェブコンテンツを作成する（例えば図２参照）。

【0041】

＜編集ＵＩ設定例＞
上記Ｓ５に示したように、エンジニアは、編集者がコンテンツモデリングされたコンテンツ要素を直接編集可能なように、ＣＭＳ内の編集ＵＩを設定する。ここで、ウェブページにおいて特に本文パートのように、ページごとに見出しや段落、画像などのコンテンツ構成要素をどう組み合わせるかが異なるレイアウトは、リッチテキストエディタによりリッチテキストで編集されるが、本実施形態に係る編集ＵＩ設定においては、従来の固定化された書式設定ツールバーとは異なり、リッチテキストエディタにおける書式設定ツールバーの書式構成を柔軟に設定可能としたものである。以下、Ｓ５「編集ＵＩ設定」について詳しく説明する。

【0042】

図９は、本実施形態に係る編集ＵＩ設定例１を示す図である。エンジニアは、システム設定端末２０を用いてＣＭＳサーバ１０にアクセス・ログインし、まずウェブページのページレイアウト構成に適用されるモデル設定画面を表示する。エンジニアは、ウェブページのページレイアウト構成において、ウェブデザイナーによるページデザインを元にコンテンツモデリングされたコンテンツ要素を設定する。

【0043】

具体的に、エンジニアは、入力フィールド一覧１０５の中から各々のコンテンツ要素に合う型の入力フィールド部品（コンテンツ要素の入力欄）を選択し、ドロップアンドドラッグ操作により、ページレイアウト構成フィールド１０６にこれを配置・設定することができる。図９の場合、一例として、タイトル要素に対応した「１行テキスト」、サブタイトル要素に対応した「１行テキスト」、説明要素に対応した「複数行テキスト」、本文要素に対応した「フレキシブルテキスト」が、ページレイアウト構成フィールド１０６に配置・設定されている。

【0044】

ＣＭＳサーバ１０（コンテンツ要素設定部１０１ａ）は、ページレイアウト構成フィールド１０６に配置・設定された入力フィールド部品の情報を、記憶部１０３の所定のＤＢに保存する。

【0045】

図１０は、本実施形態に係る編集ＵＩ設定例２を示す図である。次にエンジニアは、ウェブページのページレイアウト構成を設定した後、各々の入力フィールド部品の書式制御設定、即ち、リッチテキストエディタにおける書式設定ツールバーの書式構成を設定する。例えば各々の入力フィールド部品のうち本文要素に対応した「フレキシブルテキスト」１０７が選択されると、「フレキシブルテキスト」１０７において現在有効設定されている書式構成情報１０８が表示される。エンジニアは、「フレキシブルテキスト」１０７に対して現在有効設定されている書式構成を変更する場合、「ビルダーを開く」１０９を押下する。

【0046】

図１１は、本実施形態に係る編集ＵＩ設定例３を示す図である。エンジニアは、「フレキシブルテキスト」内において有効とする書式要素を、編集者が利用可能なテキストエディタの書式オブジェクトとして設定（追加・削除）することができる。より具体的に、書式要素一覧１１１の中から「フレキシブルテキスト」内において有効とする書式要素を選択し、ドロップアンドドラッグ操作により、書式設定ツールバー１１０の上に当該書式のオブジェクトアイコンとして設定（追加・削除）する。

【0047】

編集者は、編集ＵＩ上において「フレキシブルテキスト」内のテキストに対して書式設定を行う場合、書式設定ツールバー１１０にここで設定された書式を適用することができる。従ってエンジニアは、ウェブデザイナーによるページデザインや別途用意された資料（デザイン指針等）を元に、有効とする書式のみを選択し設定する。逆に、ウェブデザイナーのデザイン意図にそぐわない無効としたい書式については、編集者が利用不可にすべく書式設定ツールバー１１０から除外する。なお、設定（追加・削除）可能な書式は、一例として図１１に示す書式要素一覧１１１の通りである。

【0048】

ＣＭＳサーバ１０（書式設定部１０１ｂ）は、入力フィールド部品（例えば「フレキシブルテキスト」）内における書式設定ツールバー１１０の上に設定（追加・削除）された書式のオブジェクトアイコンの情報を、記憶部１０３の所定ＤＢに保存する。

【0049】

図１２は、本実施形態に係る編集ＵＩ設定例４を示す図である。次に書式設定ツールバー１１０上のオブジェクトアイコンに対応付ける複数の書式設定について説明する。書式設定ツールバー１１０上のオブジェクトアイコン１１５が選択されると、選択されたオブジェクトアイコン１１５の書式要素設定欄１１６が画面右方に表示される。

【0050】

例えば、図１２に示すオブジェクトアイコン１１５は、書式設定ツールバー１１０上デフォルトとしていわゆる通常の「強調」の書式要素が設定されていることから、書式要素設定欄１１６のデザイン書式１１７において、「太字」に有効設定を示すチェックが付いている。これは、編集者が「フレキシブルテキスト」内のテキストを選択し、書式設定ツールバー１１０上のオブジェクトアイコン１１５を適用した場合、当該テキストを「太字」の書式に編集可能を意味している。

【0051】

ここで、書式要素設定欄１１６のデザイン書式１１７において、さらに「アンダーライン」に有効設定を示すチェックが付された場合、オブジェクトアイコン１１５に対して「アンダーライン」の書式要素が対応付けられて設定される。また書式要素設定欄１１６の文字色書式１１８において、さらに「文字色」に有効設定を示すチェックされ且つ指定色が入力された場合、オブジェクトアイコン１１５に対して指定文字色の書式要素が対応付けられて設定される。このような場合、編集者が「フレキシブルテキスト」内のテキストを選択し、書式設定ツールバー１１０上のオブジェクトアイコン１１５を適用した場合、当該テキストは、「太字」、「アンダーライン」及び指定文字色に編集されることを意味している。

【0052】

ここで、ウェブデザイナーのデザイン意図として、例えばテキストを「強調」書式にするには、そのテキストは必ず「太字」、「アンダーライン」及び指定文字色で強調したいというケースを考える。このような場合、通常は編集者がウェブデザイナーの指示に従った強調を行うとしても、まず対象のテキストを選択の上、書式設定ツールバーから太字を選択・適用し、下線を選択・適用し、文字色を選択・適用する編集操作といった複数段階の編集操作が必要となる。

【0053】

しかしながら、本実施形態に係る書式設定ツールバー１１０において、「強調」書式を示すオブジェクトアイコン１１５は、複数の書式「太字」、「アンダーライン」及び指定文字色を同時に組み合わせて対応付けて設定することが可能であるため、編集者はウェブデザイナーのデザイン意図する通りの「強調」書式を、且つ一の操作により適用可能である。操作性の点からも編集者により書式編集ミスも防止可能である。

【0054】

なお、オブジェクトアイコン１１５に複数の書式「太字」、「アンダーライン」及び指定文字色が同時に組み合わせて対応付けて設定された場合、オブジェクトアイコン１１５に設定されたその書式（さらにはデザイナー意図）が編集者にとって視覚的に容易に把握可能とするため、図１２に示すオブジェクトアイコン１１５のように、書式要素設定欄１１６のアイコン１１９の中から例えば「太字」、「アンダーライン」及び指定文字色の書式が適用された「Ｂ（強調マーク）」、即ち設定された書式を反映したアイコンを選択し表示することができる。

【0055】

ＣＭＳサーバ１０（書式設定部１０１ｂ）は、オブジェクトアイコン１１５に対応付けて設定された書式「太字」、「アンダーライン」及び指定文字色の情報を、記憶部１０３の所定ＤＢに保存する。

【0056】

図１３は、本実施形態に係る編集ＵＩ設定例５を示す図である。続いて、書式設定ツールバー１１０上に新たに追加したオブジェクトアイコンに対応付ける複数の書式設定について説明する。上述したように、エンジニアは、書式要素一覧１１１の中から書式要素を選択し、ドロップアンドドラッグ操作により、書式設定ツールバー１１０の上に当該書式のオブジェクトアイコンとして設定（追加・削除）することができる（図１１）。例えば、図１３に示すオブジェクトアイコン１２１は、書式要素一覧１１１の中から、書式設定ツールバー１１０の上に「見出し２（ｈ２）」の書式のオブジェクトアイコン１２１が設定（追加）されたものである。書式設定ツールバー１１０上にオブジェクトアイコン１２１が追加されると、選択されたオブジェクトアイコン１２１の書式要素設定欄１２２が画面右方に表示される。オブジェクトアイコン１２１は、デフォルトとして「見出し２（ｈ２）」の書式のオブジェクトアイコンであることから、書式要素設定欄１２２のＨＴＭＬタグ１２３において、見出しタグの「ｈ２」が初期入力されている。

【0057】

ここで、書式要素設定欄１２２の配置書式１２４において、「配置」及び「中央揃え」に有効設定を示すチェックが付された場合、オブジェクトアイコン１２１に対して「中央揃え」の書式要素が対応付けられて設定される。また、書式要素設定欄１２２のデザイン書式１２５において、さらに「イタリック」及び「アンダーライン」に有効設定を示すチェックされた場合、オブジェクトアイコン１２１に対して「イタリック」及び「アンダーライン」の書式要素が対応付けられて設定される。このような場合、編集者が「フレキシブルテキスト」内のテキストを選択し、書式設定ツールバー１１０上のオブジェクトアイコン１２１を適用した場合、当該テキストは、ＨＴＭＬタグ「ｈ２」、「中央揃え」、「イタリック」及び「アンダーライン」に編集されることを意味している。

【0058】

最後に、エンジニアは、書式要素設定欄１２２の書式名１２６において、初期名「見出し２」を「特別見出し２」などに変更する。書式設定ツールバー１１０の上に、同様のＨＴＭＬタグ「ｈ２」を示すオブジェクトアイコン１２７が他に既に存在するため、オブジェクトアイコン１２１と書式名としても区別させるためである。

【0059】

このように本実施形態に係る書式設定ツールバー１１０のオブジェクトアイコン１２１は、複数の書式ＨＴＭＬタグ「ｈ２」、「中央揃え」、「イタリック」及び「アンダーライン」が同時に組み合わせて対応付けて設定されているため、編集者はウェブデザイナーのデザイン意図する特別な「ｈ２」書式を、一の操作により適用可能である。操作性の点からも編集者により書式編集ミスも防止可能である。また編集者には通常の「ｈ２」書式を適用する場合にはオブジェクトアイコン１２７を選択し、特別な「ｈ２」書式を適用する場合にはオブジェクトアイコン１２１を選択させることができるので、テキストを「ｈ２」書式にする場合には必ずこれら２パターンの何れかの書式デザインにしたいというウェブデザイナーのデザイン意図にも叶う。

【0060】

なお、オブジェクトアイコン１２１に複数の書式ＨＴＭＬタグ「ｈ２」、「中央揃え」「イタリック」及び「アンダーライン」が同時に組み合わせて対応付けて設定された場合、オブジェクトアイコン１２１に設定されたその書式（さらにはデザイナー意図）が編集者にとって視覚的に容易に把握可能とするため、図１３に示すオブジェクトアイコン１２１は、書式要素設定欄１２２のアイコン１２８の中から、「ｈ２」、「中央揃え」、「イタリック」及び「アンダーライン」の書式が適用された「ｈ２（ｈ２マーク）」、即ち設定された書式を反映したアイコン（書式要素を簡単な図柄や記号などで示したもの）を選択し表示することができる。

【0061】

ＣＭＳサーバ１０（書式設定部１０１ｂ）は、オブジェクトアイコン１２１に対応付けて設定された書式「ｈ２」、「中央揃え」「イタリック」及び「アンダーライン」の情報を、記憶部１０３の所定ＤＢに保存する。

【0062】

図１４は、本実施形態に係る編集ＵＩ設定例６を示す図である。続いて、書式設定ツールバー１１０上からのオブジェクトアイコン削除について説明する。上述したように、エンジニアは、ドロップアンドドラッグ操作により、書式設定ツールバー１１０の上に配置されている既存のオブジェクトアイコンを削除することができる。編集者は、「フレキシブルテキスト」内のテキストに対して書式設定を行う場合、書式設定ツールバー１１０にここで設定された書式を適用することができる。従ってエンジニアは、ウェブデザイナーによるページデザインや別途用意された資料（デザイン指針等）を元に、ウェブデザイナーのデザイン意図にそぐわないような書式のオブジェクトアイコンについては、編集者が利用不可にすべく書式設定ツールバー１１０から除外する。

【0063】

＜コンテンツ作成例＞
次にＳ７「コンテンツ作成」について詳しく説明する。編集者は、エンジニアにより設定された編集ＵＩ（レイアウト構成）に沿って各々のウェブページ編集（更新・追加等）を行い、ウェブコンテンツを作成する（例えば図２参照）。

【0064】

図１５は、本実施形態に係るウェブコンテンツ作成例１を示す図である。編集者は、編集者端末３０を用いてＣＭＳサーバ１０にアクセス・ログインし、表示画面上にウェブページのコンテンツ作成画面を表示する。編集者がエンジニアにより予め設定されたウェブページのページ編集ＵＩに沿ってコンテンツ（例えば商品紹介記事）を入力することで、一枚のウェブページが完成する。より具体的に、編集者は、「１行テキスト」にタイトル文、「１行テキスト」にサブタイトル文、「複数行テキスト」に説明文、「フレキシブルテキスト」１３２に本文を記入する。次に編集者は、例えば「フレキシブルテキスト」１３２内に記入した本文テキストを、リッチテキストエディタ（例えば書式設定ツールバー）によりリッチテキストで編集する。

【0065】

図１６は、本実施形態に係るウェブコンテンツ作成例２を示す図である。図１６（ａ）に示されるように、まず編集者は「フレキシブルテキスト」内に記入した本文テキストのうち「２０２３新作ハンドバック」を選択の上、書式設定ツールバー１１０上のオブジェクトアイコン１２７を押下する。上述したように本実施形態に係る書式設定ツールバー１１０のオブジェクトアイコン１２７は、通常の「ｈ２」が設定されている。この結果、図１６（ｂ）に示されるように、テキスト「２０２３新作ハンドバック」は「ｈ２」の書式に編集される。

【0066】

図１７は、本実施形態に係るウェブコンテンツ作成例３を示す図である。図１７（ａ）に示されるように、次いで編集者は「フレキシブルテキスト」内に記入した本文テキストのうち「新作イベントのご案内」を選択の上、書式設定ツールバー１１０上のオブジェクトアイコン１２１を押下する。上述したように本実施形態に係る書式設定ツールバー１１０のオブジェクトアイコン１２１は、特別な「ｈ２」、「中央揃え」「イタリック」及び「アンダーライン」が同時に組み合わせて対応付けて設定されている（記憶部１０３の所定ＤＢの保存情報）。この結果、図１７（ｂ）に示されるように、テキスト「新作イベントのご案内」は「ｈ２」、「中央揃え」「イタリック」及び「アンダーライン」の書式に編集される。

【0067】

また書式設定ツールバー１１０上、オブジェクトアイコン１２１は、「ｈ２」、「中央揃え」、「イタリック」及び「アンダーライン」の書式が適用された「ｈ２（ｈ２マーク）」、即ち設定された書式を反映したアイコンで表示されているため、編集者にとって、オブジェクトアイコン１２１に設定されたその書式（さらにはデザイナー意図）が視覚的に容易に把握可能である。また書式設定ツールバー１１０上にある同じ「ｈ２」を示すオブジェクトアイコン１２７との差異も容易に把握できる。

【0068】

また編集者は、テキストを「ｈ２」の書式に編集したい場合、書式設定ツールバー１１０上に通常の「ｈ２」書式を示すオブジェクトアイコン１２７及び特別な「ｈ２」書式を示すオブジェクトアイコン１２１の何れから選択可能であるため、同じ同系の「ｈ２」書式でも異なる２種類の書式デザインを使い分けることができる。同時に書式デザインはウェブデザイナーの意図するデザインを妨げない。またオブジェクトアイコン１２１は、複数の書式ＨＴＭＬタグ「ｈ２」、「中央揃え」、「イタリック」及び「アンダーライン」が同時に組み合わせて対応付けて設定されているため、編集者はウェブデザイナーのデザイン意図する特別な「ｈ２」書式を、一の操作により適用可能である。操作性の点からも編集者により書式編集ミスも防止可能である。

【0069】

なお、通常の「ｈ２」書式を示すオブジェクトアイコン１２７及び特別な「ｈ２」書式を示すオブジェクトアイコン１２１は、同じ同系の「ｈ２」書式であるため、共通の書式要素「ｈ２」を有すると共に、非共通の書式要素「中央揃え」、「イタリック」及び「アンダーライン」を有する。これにより書式設定ツールバー１１０上に同系書式であっても適用書式が異なったオブジェクトアイコンが併存可能となり、２種類の書式デザインを使い分けたり、独自のスタイルを適用したりすることができる。

【0070】

図１８、本実施形態に係るウェブコンテンツ作成例４を示す図である。次いで図１８（ａ）に示されるように、編集者は「フレキシブルテキスト」内に記入した本文テキストのうち「開催日：２０２３／４／１ 於：弊社大会議ホール 時間：１０－１７時」を選択の上、書式設定ツールバー１１０上のオブジェクトアイコン１１５を押下する。上述したように本実施形態に係る書式設定ツールバー１１０のオブジェクトアイコン１１５は、「太字」、「アンダーライン」及び指定文字色が同時に組み合わせて対応付けて設定されている（記憶部１０３の所定ＤＢの保存情報）。この結果、図１８（ｂ）に示されるように、テキスト「新作イベントのご案内」は「太字」、「アンダーライン」及び指定文字色の書式に編集される。

【0071】

なお、書式設定ツールバー１１０上、オブジェクトアイコン１１５は、「太字」、「アンダーライン」及び指定文字色の書式が適用された「Ｂ（強調）」、即ち設定された書式を反映したアイコンで表示されているため、編集者にとって、オブジェクトアイコン１１５に設定されたその書式（さらにはデザイナー意図）が視覚的に容易に把握可能である。同時に書式デザインはウェブデザイナーの意図するデザインを妨げない。またオブジェクトアイコン１２１は、複数の書式「太字」、「アンダーライン」及び指定文字色が同時に組み合わせて対応付けて設定されているため、編集者はウェブデザイナーのデザイン意図する強調書式を、一の操作により適用可能である。操作性の点からも編集者により書式編集ミスも防止可能である。

【0072】

[実施形態２]
上述したように「フレキシブルテキスト」内においては、「フレキシブルテキスト」内にのみ有効とする書式要素を、編集者が利用可能なテキストエディタの書式オブジェクトとして設定（追加・削除）することができた。本実施形態においては、編集者が「フレキシブルテキスト」（親フレキシブルテキスト）の中にさらに「フレキシブルテキスト」（子フレキシブルテキスト）を設定可能とするとともに、設定した「フレキシブルテキスト」（子フレキシブルテキスト）内においてのみ有効とする書式要素を、編集者が利用可能なテキストエディタの書式オブジェクトとして設定（追加・削除）することができる（ネスト機能という）。以下詳しく説明する。

【0073】

（ネスト機能の利用例１）
ウェブページにヒント表示や注意表示のためのボックスを配置し、配置したボックスの中でのみ適用可能な専用の書式要素（書式オブジェクト）を用意する。即ち配置したボックスの種類ごとに、それぞれボックス内でのみ有効な専用の書式ツールバーを設定する。

【0074】

＜編集ＵＩ設定例＞
図１９は、本実施形態に係る編集ＵＩ設定例１を示す図である。図１１と比較すると、本実施形態に係る書式要素一覧１１１－２の中には、「ネスト」書式要素１４１が追加されている。ネスト（nest）とは、あるものの中に、それと同じ形や種類の（一回り小さい）ものが入っている状態、ある構造の内部に同じ構造が含まれている構造をいう。

【0075】

「フレキシブルテキスト」（親フレキシブルテキスト）内においてさらに「フレキシブルテキスト」（子フレキシブルテキスト）を設定可能にする場合、エンジニアは、書式要素一覧１１１－２の中から「ネスト」書式要素１４１を選択し、ドロップアンドドラッグ操作により、書式設定ツールバー１１０－２の上に当該書式のオブジェクトアイコン１４２、及び、オブジェクトアイコン１４３を設定（追加）する。

【0076】

書式設定ツールバー１１０－２の上に当該書式のオブジェクトアイコン１４２、及び、オブジェクトアイコン１４３が設定されると、オブジェクトアイコン１４２に対応する書式設定ツールバー１４４、及び、オブジェクトアイコン１４３に対応する書式設定ツールバー１４５が表示される。

【0077】

図２０は、本実施形態に係る編集ＵＩ設定例２を示す図である。なお、非図示の画面において、書式のオブジェクトアイコン１４２、及び、オブジェクトアイコン１４３のデフォルト要素プロパティを「コールアウト」に、そしてそれぞれの要素名「ネスト」を「コールアウト（ヒント）」、「コールアウト（注意）」を変更してある。

【0078】

エンジニアは、書式要素一覧１１１－２の中から「フレキシブルテキスト」（子フレキシブルテキスト）内において有効とする任意の書式要素を選択し、ドロップアンドドラッグ操作により、書式設定ツールバー１４４の上に、例えば書式要素「ｈ２」のオブジェクトアイコン１４６、及び、書式要素「番号なしリスト」のオブジェクトアイコン１４７を、設定（追加）することができる。また書式設定ツールバー１４５の上に、例えば書式要素「ｈ２」のオブジェクトアイコン１４６、及び、書式要素「番号付きリスト」のオブジェクトアイコン１４８を、設定（追加）することができる。即ち、書式設定ツールバー１１０の特定書式要素（「ネスト」書式要素１４１）に、書式設定ツールバー１４４、１４５に設定（追加）された複数のオブジェクトアイコン１４６、１４７、１４８の情報が対応付けられる。

【0079】

なお言うまでもなく、書式設定ツールバー１４４、１４５のオブジェクトアイコン１４６、１４７、１４８には複数の書式が同時に組み合わせて対応付けて設定されることも可能である。例えば書式設定ツールバー１４４のオブジェクトアイコン１４６には「ｈ２」「番号なしリスト」に加え、「中央揃え」「イタリック」及び「アンダーライン」が同時に組み合わせて対応付けて設定されうる。

【0080】

ＣＭＳサーバ１０（書式設定部１０１ｂ）は、入力フィールド部品「フレキシブルテキスト」内における書式設定ツールバー１１０－２の上に設定（追加）された書式のオブジェクトアイコン１４２、及び、オブジェクトアイコン１４３の情報を、記憶部１０３の所定ＤＢに保存する。さらにＣＭＳサーバ１０（書式設定部１０１ｂ）は、書式のオブジェクトアイコン１４２に対応付けて書式設定ツールバー１４４の上に設定（追加）された書式のオブジェクトアイコン１４６、及び、オブジェクトアイコン１４７の情報を、記憶部１０３の所定ＤＢに保存する。またＣＭＳサーバ１０（書式設定部１０１ｂ）は、書式のオブジェクトアイコン１４３に対応付けて書式設定ツールバー１４５の上に設定（追加）された書式のオブジェクトアイコン１４６、及び、オブジェクトアイコン１４８の情報を、記憶部１０３の所定ＤＢに保存する。

【0081】

＜コンテンツ作成例＞
図２１は、本実施形態に係るウェブコンテンツ作成例１を示す図である。編集者は、上述したように編集ＵＩ上において「フレキシブルテキスト」１５０内のテキストに対して書式設定を行う場合、書式設定ツールバー１１０－２に設定された書式を適用することができる。また図２１（ａ）に示される書式設定ツールバー１１０－２の場合には、オブジェクトアイコン１４２、及び、オブジェクトアイコン１４３が設定（追加）されている。

【0082】

編集者が書式設定ツールバー１１０－２上のオブジェクトアイコン１４２を押下すると、編集ＵＩ上において「フレキシブルテキスト」（親フレキシブルテキスト）１５０内に「フレキシブルテキスト」（子フレキシブルテキスト）１５１を作成することができる。そして編集者は「フレキシブルテキスト」１５１内のテキストに対して書式設定を行う場合には、オブジェクトアイコン１４２に対応する書式設定ツールバー１４４に設定された書式を適用することができる。

【0083】

ここで、書式設定ツールバー１１０－２上のオブジェクトアイコン１４２は、「コールアウト（ヒント）」（ヒント表示用のボックスレイアウト・フレキシブルテキスト）を作成するために設定されたオブジェクトアイコン（ネスト要素）である。そして「フレキシブルテキスト」１５１内でのみ有効な書式設定ツールバー１４４の書式要素は、書式要素「ｈ２」のオブジェクトアイコン１４６、及び、書式要素「番号なしリスト」のオブジェクトアイコン１４７を有する。言い換えれば「コールアウト（ヒント）」（ヒント表示用のボックスレイアウト・フレキシブルテキスト）においては、ウェブデザイナーのデザイン意図に従って書式要素「ｈ２」、及び、書式要素「番号なしリスト」の書式のみを有効とするようエンジニアにより設定されたものである。

【0084】

図２１（ａ）に示されるように、編集者は「フレキシブルテキスト」１５１内に記入した本文テキストを選択の上、書式設定ツールバー１４４上のオブジェクトアイコン１４６、及び、オブジェクトアイコン１４７を押下する。本実施形態に係る書式設定ツールバー１４４のオブジェクトアイコン１４６には「ｈ２」が対応付けて設定され、オブジェクトアイコン１４７には「番号なしリスト」が対応付けて設定されている。本文テキストにこれら書式が適用された結果、図２１（ｂ）に示されるように、ヒント表示用のボックスレイアウト内に記入された本文テキストは、「ｈ２」及び「番号なしリスト」の書式に編集される。

【0085】

また、編集者が書式設定ツールバー１１０－２上のオブジェクトアイコン１４３を押下すると、編集ＵＩ上において「フレキシブルテキスト」１５０内に「フレキシブルテキスト」１５２を作成することができる。また編集者は「フレキシブルテキスト」１５２内のテキストに対して書式設定を行う場合、オブジェクトアイコン１４３に対応する書式設定ツールバー１４５に設定された書式を適用することができる。

【0086】

ここで、書式設定ツールバー１１０－２上のオブジェクトアイコン１４３は、「コールアウト（注意）」（注意表示用のボックスレイアウト・フレキシブルテキスト）を作成するために設定されたオブジェクトアイコン（ネスト要素）である。そして「フレキシブルテキスト」１５２内でのみ有効な書式設定ツールバー１４５の書式要素は、書式要素「ｈ２」のオブジェクトアイコン１４６、及び、書式要素「番号付きリスト」のオブジェクトアイコン１４８を有する。言い換えれば「コールアウト（注意）」（注意表示用のボックスレイアウト・フレキシブルテキスト）においては、ウェブデザイナーのデザイン意図に従って書式要素「ｈ２」、及び、書式要素「番号付きリスト」の書式のみを有効とするようエンジニアにより設定されたものである。

【0087】

図２１（ａ）に示されるように、編集者は「フレキシブルテキスト」１５２内に記入した本文テキストを選択の上、書式設定ツールバー１４５上のオブジェクトアイコン１４６、及び、オブジェクトアイコン１４８を押下する。本実施形態に係る書式設定ツールバー１４５のオブジェクトアイコン１４６には「ｈ２」が対応付けて設定され、オブジェクトアイコン１４８には「番号付きリスト」が対応付けて設定されている（記憶部１０３の所定ＤＢの保存情報）。本文テキストにこれら書式が適用された結果、図２１（ｂ）に示されるように、注意表示用のボックスレイアウト内に記入された本文テキストは、「ｈ２」及び「番号付きリスト」の書式に編集される。

【0088】

（ネスト機能の利用例２）
会話形式のレイアウトを実現するため、会話の登場人物ごとに会話形式のレイアウトを配置し、配置した会話の登場人物ごとに、それぞれレイアウト内でのみ有効な専用の書式ツールバーを設定する。

【0089】

＜コンテンツ作成例＞
図２２は、本実施形態に係るウェブコンテンツ作成例２を示す図である。図２２（ａ）に示される書式設定ツールバー１１０－３の場合には、書式設定ツールバー１１０－３上のオブジェクトアイコン１５５、及び、オブジェクトアイコン１５６が設定（追加）されている。

【0090】

編集者は書式設定ツールバー１１０－３上のオブジェクトアイコン１５５を押下すると、編集ＵＩ上において「フレキシブルテキスト」（親フレキシブルテキスト）１５０内に「フレキシブルテキスト」（子フレキシブルテキスト）１５７を作成することができる。また編集者は書式設定ツールバー１１０－３上のオブジェクトアイコン１５６を押下すると、編集ＵＩ上において「フレキシブルテキスト」（親フレキシブルテキスト）１５０内に「フレキシブルテキスト」（子フレキシブルテキスト）１５８を作成することができる。

【0091】

書式設定ツールバー１１０－３上のオブジェクトアイコン１５５は、「会話（西田）」（会話形式のレイアウト・フレキシブルテキスト）を作成するために設定されたオブジェクトアイコン（ネスト要素）である。そして「フレキシブルテキスト」１５７内でのみ有効な
書式設定ツールバー１５９の書式要素は、書式要素「強調」のオブジェクトアイコン１６０、及び、書式要素「斜体」のオブジェクトアイコン１６１を有する。また書式設定ツールバー１１０－３上のオブジェクトアイコン１５６は、「会話（田中）」（会話形式のレイアウト・フレキシブルテキスト）を作成するために設定されたオブジェクトアイコン（ネスト要素）である。そして「フレキシブルテキスト」１５８内でのみ有効な書式設定ツールバー１６２の書式要素は、書式要素「強調」のオブジェクトアイコン１６０、及び、書式要素「斜体」のオブジェクトアイコン１６１を有する。つまり「会話（西田）」及び「会話（田中）」（会話形式のレイアウト・フレキシブルテキスト）においては、ウェブデザイナーのデザイン意図に従って書式要素「強調」、及び、書式要素「斜体」の書式のみを有効とするようエンジニアにより設定されている。

【0092】

図２２（ａ）に示されるように、編集者は「フレキシブルテキスト」１５７内に記入した本文テキストを選択の上、書式設定ツールバー１５９上のオブジェクトアイコン１６０、及び、オブジェクトアイコン１６１を押下する。本実施形態に係る書式設定ツールバー１５９のオブジェクトアイコン１４６には「強調」が対応付けて設定され、オブジェクトアイコン１４７には「斜体」が対応付けて設定されている。本文テキストにこれら書式が適用された結果、図２２（ｂ）に示されるように、（会話形式のレイアウト内に記入された本文テキストは、「強調」及び「斜体」の書式に編集される。

【0093】

また図２２（ａ）に示されるように、編集者は「フレキシブルテキスト」１５８内に記入した本文テキストを選択の上、書式設定ツールバー１６２上のオブジェクトアイコン１６０、及び、オブジェクトアイコン１６１を押下する。本文テキストにこれら書式が適用された結果、図２２（ｂ）に示されるように、（会話形式のレイアウト内に記入された本文テキストは、「強調」及び「斜体」の書式に編集される。

【0094】

[実施形態３]
（多言語コンテンツ機能）
エンジニアは１つのコンテンツフィールド（入力フィールド部品）毎ごとに、予め多言語入力設定をしておく。コンテンツ作成時において、編集者はコンテンツフィールドにデータを入力してページコンテンツを作成していくが、多言語入力設定されたコンテンツフィールドについては、当該コンテンツフィールドに対応付けて複数種類の言語データ（翻訳データ）を入力することができる。

【0095】

図２３は、本実施形態に係る多言語コンテンツ機能例を示す図である。図２３の場合、１行テキストのコンテンツフィールドには予め「日本語」タブ１７１、「Ｅｎｇｌｉｓｈ」タブ１７２、「中国語」タブ１７３に示されるように、３つの多言語入力設定がなされている。まず編集者は「日本語」タブ１７１のコンテンツフィールド１７４に、日本語データを入力の上、「Ｅｎｇｌｉｓｈ」タブ１７２によりコンテンツフィールド１７５に切り替え表示する。次に編集者は「Ｅｎｇｌｉｓｈ」タブ１７２のコンテンツフィールド１７５に、英語によるデータ（日本語データの英翻訳データ）を入力する。また編集者は「中国語」タブ１７３のコンテンツフィールド（非図示）に、中国語によるデータ（日本語データの中国語翻訳データ）を入力する。

【0096】

ＣＭＳサーバ１０は、コンテンツフィールドに対応する多言語コンテンツデータとして、それぞれ日本語データ、英語によるデータ、及び中国語によるデータを、記憶部１０３の所定ＤＢに保存する。ＣＭＳサーバ１０がヘッドレスＣＭＳである場合には、ＣＭＳサーバ１０は当該１行テキストのコンテンツフィールドに対応する多言語コンテンツデータとして、日本語データ、英語によるデータ、及び中国語によるデータを、別途構築されたフロントエンドにＡＰＩを介して送信することで、訪問者に日本語、英語、及び中国語の３言語対応の当該１行テキストを表示する。

【0097】

これにより、多言語対応のウェブサイト作成に際し、
・特定のワード（特に重要なワード等）については正確な翻訳ワードで表現したい場合に、自動翻訳よりも適切な言語データ（翻訳データ）を表示することができる。
・コンテンツフィールド毎に複数の言語入力の要否設定（指定）が可能なので、編集者は言語入力の要設定（要指定）されたコンテンツ（フィールド）のワードのみ翻訳すればよく、それ以外の言語（例えばウェブサイトページ内の全言語ワード）を翻訳する必要はないため、編集者の翻訳負担を軽減できる。

【0098】

＜総括＞
本実施形態に係るＣＭＳ１００において、編集ＵＩにおけるリッチテキストエディタ（例えば書式設定ツールバー）の書式構成を柔軟に設定可能である。また書式オブジェクト（例えば書式設定ツールバー上のオブジェクトアイコン）に、予め複数の書式要素を対応付けて設定できる。また編集ＵＩの書式設定ツールバー上、オブジェクトアイコンは、設定された一以上の書式を反映したアイコンで表示されている。デザイナーではない編集者にとって必要なのは、どんなスタイリングでも柔軟に実現できる編集ＵＩではなく、ワンボタンでデザイナーの意図する指示通りにデザイン・スタイリングできる編集ＵＩである。

【0099】

これにより、編集者はウェブデザイナーの意図する通りの書式デザインの組み合わせを、且つ一の操作により適用可能である。また編集者は同系書式でも２種類の書式デザインを使い分けたり、独自のスタイルを適用したりすることができる。またウェブデザイナーのデザイン意図にそぐわないような書式は編集者が利用不可とすべく除外することができる。また編集者により書式デザインがウェブデザイナーのデザイン意図から乖離することもない。また編集者の編集性が向上し、書式編集ミスも低減できる。また編集者はオブジェクトアイコンに設定されたその書式（さらにはデザイナー意図）を視覚的に一見して容易に把握可能である。

【0100】

以上本実施形態によれば、ＣＭＳのウェブページ編集ＵＩにおいて、コンテンツレイアウトの編集性を向上させることが可能である。なお、本発明の好適な実施の形態により、特定の具体例を示して本発明を説明したが、特許請求の範囲に定義された本発明の広範な趣旨および範囲から逸脱することなく、これら具体例に様々な修正および変更を加えることができることは明らかである。即ち具体例の詳細および添付の図面により本発明が限定されるものと解釈してはならない。

【0101】

（補足）
・上述の実施形態に示したように（例えば図１０－１４参照）、エンジニアは、まずページレイアウト構成フィールド１０６に入力フィールド部品を配置・設定することで、書式設定ツールバー上に書式のオブジェクトアイコンを配置した。また、一のオブジェクトアイコンに対して複数の書式要素を組み合わせて設定した。ここで別の実施形態として、これら設定を自動化することも可能である。これによりエンジニア負担をより低減させる。

【0102】

図２４は、本実施形態に係る編集ＵＩ自動設定を説明する図である。まずＣＭＳサーバ１０は、デザイナーによるデザインカンプデータを取得する。次にＣＭＳサーバ１０は、取得したデザインカンプデータを解析し、デザインカンプ内に記述された各々のテキストに適用されている書式要素を抽出する。また特に一のテキストに対して複数の書式が同時に適用されている場合には、複数の書式の組み合わせとして書式要素を抽出する。またデザインカンプ内の各々のテキストに適用されていない書式要素は抽出しない。

【0103】

最後にＣＭＳサーバ１０は、書式設定ツールバー上に、書式要素のオブジェクトアイコンを配置するとともに、オブジェクトアイコンに抽出した書式要素を対応付けて設定する。複数の書式の組み合わせが抽出されている場合には、オブジェクトアイコンには複数の書式の組み合わせを対応付けて設定する。更に書式設定ツールバー上に配置されるアイコンは、上述の通り、設定された書式を反映したアイコンであることが望ましい。

【0104】

なお、デザインカンプデータは、タグ形式のデータが望ましいが、画像データであっても解析可能であればよい。タグ形式のデータであれば、タグにより適用されている書式が容易に特定可能であり、画像データであれば、画像解析処理によりテキストに適用されている書式が特定可能である。

【0105】

・ヘッドレスＣＭＳの場合には、フロントエンドが分離しているため、本実施形態に係る編集ＵＩにより編集された書式が、訪問者が閲覧するウェブサイト上の書式とそのまま必ずしも完全一致しない場合もある（ヘッドレスＣＭＳにおけるリッチテキスト上での表示と最終的な表示がリンクしない場合もある）。従ってヘッドレスＣＭＳの場合に、本実施形態に係る編集ＵＩは、あくまで編集者が見やすく直感的に編集できるようにした書式編集のＵＩとして機能するものであるが、一定以上程度まではフロントエンドの表示に近づけことができるため、ヘッドレスＣＭＳにおける編集ＵＸは改善しえる。

【0106】

・本実施形態において、書式適用される対象は「テキスト」であるが、図１１の書式要素一覧１１１によれば、書式要素として、「画像」「動画」などもある。「画像」「動画」は、書式設定ツールバー上、「画像」「動画」を挿入するための機能ボタンとして配置されるが、挿入された「画像」「動画」に対しても、例えば、画像等の配置位置（左、中央及び右揃え）、サイズなど、複数の書式を適用することが可能である。従ってこの場合、ＣＭＳサーバ１０は、ウェブページのコンテンツとして入力されたコンテンツ（テキスト、画像、動画等）に対して複数の書式要素を組み合わせて設定することができる。

【0107】

（付記）
ウェブサイトのコンテンツを管理するＣＭＳサーバ装置であって、
一の書式オブジェクト（例えば書式設定ツールバーの上に当該書式のオブジェクトアイコン）に、複数の書式要素（例えば「ｈ２」、「中央揃え」、「イタリック」及び「アンダーライン」）の組み合わせを対応付けて設定する書式設定手段（例えば、図１２、１３）と、
ウェブページのコンテンツを入力するコンテンツ入力手段と、
入力された前記コンテンツに前記書式オブジェクトが適用された場合、該書式オブジェクトに対応付けられた前記複数の書式要素を組み合わせて、前記コンテンツを編集するコンテンツ編集手段と、
を特徴とするＣＭＳサーバ装置。

【符号の説明】

【0108】

１０ ＣＭＳサーバ
２０ システム設定端末
３０ 編集者端末
５０ ネットワーク
１００ ＣＭＳ
１０１ 編集ＵＩ設定部
１０１ａ コンテンツ要素設定部
１０１ｂ 書式設定部
１０２ 編集ＵＩ部
１０２ａ テキスト入力部
１０２ｃ 書式設定ツール表示部
１０２ｄ テキスト編集部
１０３ 記憶部

【図1】

【図2】

【図3】

【図4】

【図5】

【図6】

【図7】

【図8】

【図9】

【図10】

【図11】

【図12】

【図13】

【図14】

【図15】

【図16】

【図17】

【図18】

【図19】

【図20】

【図21】

【図22】

【図23】

【図24】