JP6927586B2

JP6927586B2 - Web construction support device and web construction support program

Info

Publication number: JP6927586B2
Application number: JP2018225271A
Authority: JP
Inventors: 相揮金本; 慶太宮本; 和生 ▲高▼松
Original assignee: 株式会社ユニソンプラネット
Priority date: 2018-11-30
Filing date: 2018-11-30
Publication date: 2021-09-01
Anticipated expiration: 2038-11-30
Also published as: JP2020087299A

Description

本発明は、移行先においても編集可能な状態で、かつ移行前と同様のウェブページを表示できるウェブ構築支援装置およびウェブ構築支援プログラムに関する。 The present invention relates to a web construction support device and a web construction support program that can display the same web page as before the migration while being editable even at the migration destination.

一般的に、ウェブページは、ＨＴＴＰ（Hypertext Transfer Protocol）を通信プロトコルとして、ＨＴＭＬ（HyperText Markup Language）などのハイパーテキストなどにより構築される。 Generally, a web page is constructed by hypertext such as HTML (HyperText Markup Language) using HTTP (Hypertext Transfer Protocol) as a communication protocol.

また、テキストだけでなく、予め所定の記憶媒体に画像データや動画データなどを記憶しておき、その記憶されたパスを指定したコードをＨＴＭＬファイルに埋め込むことでテキスト以外の様々なコンテンツをウェブ上で表示させることができる。 In addition to text, image data, video data, etc. are stored in advance in a predetermined storage medium, and various contents other than text can be stored on the web by embedding a code that specifies the stored path in an HTML file. It can be displayed with.

同様に、ＨＴＭＬファイルは、主にウェブページのスタイルを指定するためのＣＳＳ（Cascading Style Sheets）ファイルや、プログラムが記述されたＪａｖａＳｃｒｉｐｔ（登録商標）ファイルなどを読み込みことにより、高度な装飾や機能を実現させることもできる。 Similarly, HTML files can be used for advanced decoration and functions by mainly reading CSS (Cascading Style Sheets) files for specifying web page styles and Javascript (registered trademark) files in which programs are written. It can also be realized.

このようなウェブページは、作成された後においても画面デザインの変更や機能の変更など、様々な変更が加えられる場合が多いので、ウェブページの編集機能のニーズは高い。 Since such web pages are often subject to various changes such as screen design changes and function changes even after they are created, there is a great need for web page editing functions.

そこで、特許文献１には、ＨＴＭＬデータに含まれるＨＴＭＬエレメントに対してエレメントＩＤを付与したＨＴＭＬデータに変換し、プログラムコードにエレメントＩＤを付加したプログラムデータを生成し、ＨＴＭＬデータに対し、エレメントＩＤに基づいてプログラムデータを組み込み、ＨＴＭＬデータ生成プログラムを生成するＨＴＭＬデータ生成プログラム編集支援装置に関する技術が開示されている。 Therefore, in Patent Document 1, the HTML element included in the HTML data is converted into HTML data in which an element ID is assigned, program data in which the element ID is added to the program code is generated, and the element ID is obtained with respect to the HTML data. Discloses a technique relating to an HTML data generation program editing support device that incorporates program data based on the above and generates an HTML data generation program.

また、特許文献２には、ホームページがリンク先の情報を持つ場合に、そのリンク先のアドレスおよびそのアドレスにあるページを構成するオブジェクトの内少なくとも１つのリンク情報を特定し、その特定されたリンク情報を、オブジェクト管理ＩＤを割り当てるために、オブジェクト管理ＩＤ割り当て手段に向けて送るリンク情報処理手段と、編集フォームと共に、リンク情報を表示するリンク情報表示処理手段とを備えるホームページ編集用サーバに関する技術が開示されている。 Further, in Patent Document 2, when the homepage has the information of the link destination, at least one link information among the address of the link destination and the object constituting the page at the link destination is specified, and the specified link is specified. A technology related to a homepage editing server including a link information processing means for sending information to an object management ID assigning means for assigning an object management ID, and a link information display processing means for displaying link information together with an edit form. It is disclosed.

特開２００７−１０８９７８号公報JP-A-2007-108978 特開２００４−２４０６３５号公報Japanese Unexamined Patent Publication No. 2004-240635

ここで、ウェブページは運用されているサーバ内で編集されるだけでなく、他のサーバに移行する場合もある。 Here, the web page is not only edited in the server in which it is operated, but may also be migrated to another server.

このとき、単にＨＴＭＬファイルを他のサーバに保存しただけでは、上述のようにＨＴＭＬファイルにリンクされた画像データやファイルがある場合、適切に画像データやファイルなどが読み込めず、ウェブページを適切に表示できない場合がある。 At this time, if the HTML file is simply saved in another server and there is image data or file linked to the HTML file as described above, the image data or file cannot be read properly and the web page can be properly read. It may not be displayed.

そのため、移行時にパスを変更する必要があるが、移行前のウェブページをウェブ制作会社などに委託して構築した場合、ウェブページの構造についてのドキュメント類が不足しており、移行する際にＨＴＭＬファイルのどの箇所をどのように変更する必要があるのかが分かり難く、移行作業に膨大な時間を要する場合があった。 Therefore, it is necessary to change the path at the time of migration, but if the web page before migration is outsourced to a web production company etc., the documents about the structure of the web page are insufficient, and HTML is required when migrating. It was difficult to understand which part of the file needed to be changed and how, and the migration work sometimes took an enormous amount of time.

そのため、ウェブページの運用会社は、ウェブページを他のサーバに容易に移行すると共に、移行先において容易に編集できるツールを切望していた。 Therefore, the web page management company has longed for a tool that can easily migrate the web page to another server and easily edit it at the migration destination.

しかしながら、特許文献１や特許文献２に記載の技術では、ウェブページを移行した場合については考慮されていない。そのため、いずれの技術においても移行先においても編集可能な状態で、かつ移行前と同様のウェブページを表示できるとは限らなかった。 However, in the techniques described in Patent Document 1 and Patent Document 2, the case where the web page is transferred is not considered. Therefore, it is not always possible to display the same web page as before the migration in an editable state at the migration destination with any of the technologies.

本発明は、上記問題点に鑑みてなされたものであり、移行先においても編集可能な状態で、かつ移行前と同様のウェブページを表示できるウェブ構築支援装置およびウェブ構築支援プログラムを提供することを目的とする。 The present invention has been made in view of the above problems, and provides a web construction support device and a web construction support program that can display the same web page as before the migration in an editable state even at the migration destination. With the goal.

上記目的を解決するため、本発明に係るウェブ構築支援装置の第１の特徴は、
ウェブページが記憶された移行元ウェブサーバと、前記ウェブページの移行先である移行先ウェブサーバとにネットワークを介して接続されたウェブ構築支援装置であって、
前記移行元ウェブサーバから前記ウェブページのＨＴＭＬコードを取得する取得手段と、
前記取得手段により取得されたＨＴＭＬコード内に外部リンク情報がある場合、前記外部リンク情報に基づいて外部リンクされたオブジェクトを取得し、前記移行先ウェブサーバの所定の記憶領域に記憶させると共に、前記記憶させる位置情報に基づいて前記ＨＴＭＬコード内の前記外部リンク情報を変更する変更手段と、
前記変更手段により変更された変更ＨＴＭＬコードの階層構造を示す階層情報を抽出すると共に、前記変更ＨＴＭＬコードに対してタグ毎にエレメントＩＤを割り当てるエレメントＩＤ割当手段と、
前記割り当てられたエレメントＩＤと、タグ毎に分割した変更ＨＴＭＬコードと、前記階層情報とを関連付けてＩＤ割当変更ＨＴＭＬデータとしてデータベースに記憶させる記憶制御手段と、
を備えたことにある。 In order to solve the above object, the first feature of the web construction support device according to the present invention is
A web construction support device connected to a migration source web server in which a web page is stored and a migration destination web server to which the web page is migrated via a network.
An acquisition means for acquiring the HTML code of the web page from the migration source web server, and
When there is external link information in the HTML code acquired by the acquisition means, the externally linked object is acquired based on the external link information, stored in a predetermined storage area of the migration destination web server, and described as described above. A changing means for changing the external link information in the HTML code based on the stored position information, and
An element ID assigning means for extracting the hierarchical information indicating the hierarchical structure of the modified HTML code changed by the changing means and assigning an element ID for each tag to the modified HTML code.
A storage control means for associating the assigned element ID, the modified HTML code divided for each tag, and the hierarchical information and storing the ID allocation modified HTML data in the database.
It is to have.

本発明に係るウェブ構築支援装置の第２の特徴は、
前記データベースに記憶されたＩＤ割当変更ＨＴＭＬデータに基づいて、ＩＤ割当変更ＨＴＭＬコードを生成し、前記生成したＩＤ割当変更ＨＴＭＬコードを独立したフレームの編集画面内で前記エレメントＩＤごとに読み出し、前記読み出したエレメントＩＤ単位で編集可能に表示する表示制御手段と、
ユーザ操作に基づいて前記編集画面上で編集された場合に、前記データベースに記憶された前記編集されたエレメントＩＤに対応するＩＤ割当変更ＨＴＭＬデータを編集する編集手段と、
を備えたことにある。 The second feature of the web construction support device according to the present invention is
An ID allocation change HTML code is generated based on the ID allocation change HTML data stored in the database, and the generated ID allocation change HTML code is read for each element ID in the edit screen of an independent frame, and the read is performed. Display control means that can be edited and displayed in units of element IDs
An editing means for editing the ID assignment change HTML data corresponding to the edited element ID stored in the database when the data is edited on the edit screen based on the user operation.
It is to have.

本発明に係るウェブ構築支援装置の第３の特徴は、
前記エレメントＩＤ割当手段は、
前記編集手段により編集された回数に基づいて、前記エレメントＩＤを割り当てる
ことにある。 The third feature of the web construction support device according to the present invention is
The element ID assigning means
The element ID is assigned based on the number of times edited by the editing means.

本発明に係るウェブ構築支援装置の第４の特徴は、
前記エレメントＩＤ割当手段は、
前記階層情報に基づいて、前記変更ＨＴＭＬコードに対してタグ毎にエレメントＩＤを割り当てる
ことにある。 The fourth feature of the web construction support device according to the present invention is
The element ID assigning means
Based on the hierarchical information, an element ID is assigned to each tag for the modified HTML code.

本発明に係るウェブ構築支援装置の第５の特徴は、
前記編集手段は、
前記編集画面上でオブジェクトの追加が要求された場合に、追加されたオブジェクトのＨＴＭＬコードを生成すると共に、前記エレメントＩＤ割当手段に、前記生成されたＨＴＭＬコードに対してタグ毎に、前記階層情報に基づいて新たにエレメントＩＤを割り当てさせ、前記新たに割り当てられたエレメントＩＤに対応する前記生成されたＨＴＭＬコードとを、前記データベースに記憶されたＩＤ割当変更ＨＴＭＬデータに追加する
ことにある。 The fifth feature of the web construction support device according to the present invention is
The editing means
When the addition of an object is requested on the edit screen, the HTML code of the added object is generated, and the element ID assigning means is provided with the hierarchical information for each tag with respect to the generated HTML code. A new element ID is assigned based on the above, and the generated HTML code corresponding to the newly assigned element ID is added to the ID assignment change HTML data stored in the database.

上記目的を解決するため、本発明に係るウェブ構築支援プログラムの第１の特徴は、
ウェブページが記憶された移行元ウェブサーバと、前記ウェブページの移行先である移行先ウェブサーバとにネットワークを介して接続されたコンピュータが実行するウェブ構築支援プログラムであって、
コンピュータに、
前記移行元ウェブサーバから前記ウェブページのＨＴＭＬコードを取得する取得ステップと、
前記取得ステップにより取得されたＨＴＭＬコード内に外部リンク情報がある場合、前記外部リンク情報に基づいて外部リンクされたオブジェクトを取得し、前記移行先ウェブサーバの所定の記憶領域に記憶させると共に、前記記憶させる位置情報に基づいて前記ＨＴＭＬコード内の前記外部リンク情報を変更する変更ステップと、
前記変更ステップにより変更された変更ＨＴＭＬコードの階層構造を示す階層情報を抽出すると共に、前記変更ＨＴＭＬコードに対してタグ毎にエレメントＩＤを割り当てるエレメントＩＤ割当ステップと、
前記割り当てられたエレメントＩＤと、タグ毎に分割した変更ＨＴＭＬコードと、前記階層情報とを関連付けてＩＤ割当変更ＨＴＭＬデータとしてデータベースに記憶させる記憶制御ステップと、
を実行させることにある。 In order to solve the above object, the first feature of the web construction support program according to the present invention is
A web construction support program executed by a computer connected to the migration source web server in which the web page is stored and the migration destination web server to which the web page is migrated via a network.
On the computer
The acquisition step of acquiring the HTML code of the web page from the migration source web server, and
When there is external link information in the HTML code acquired by the acquisition step, the externally linked object is acquired based on the external link information, stored in a predetermined storage area of the migration destination web server, and described above. A change step of changing the external link information in the HTML code based on the stored position information, and
An element ID assignment step that extracts the hierarchical information indicating the hierarchical structure of the modified HTML code changed by the modification step and assigns an element ID for each tag to the modified HTML code.
A storage control step in which the assigned element ID, the modified HTML code divided for each tag, and the hierarchical information are associated and stored in the database as ID assigned modified HTML data.
Is to be executed.

本発明に係るウェブ構築支援装置およびウェブ構築支援プログラムによれば、移設先においても編集可能な状態で、かつ移行前と同様のウェブページを表示できる。 According to the web construction support device and the web construction support program according to the present invention, it is possible to display the same web page as before the migration in an editable state even at the relocation destination.

本発明の一実施形態であるウェブ構築支援装置の概略構成を示した概略構成図である。It is a schematic block diagram which showed the schematic structure of the web construction support device which is one Embodiment of this invention. 本発明の一実施形態であるウェブ構築支援装置におけるＨＴＭＬ読み込み処理の処理内容を示したフローチャートである。It is a flowchart which showed the processing content of the HTML reading process in the web construction support apparatus which is one Embodiment of this invention. 図２に示したＨＴＭＬ読み込み処理におけるステップＳ１０３のローカライズ処理の処理内容を示したフローチャートである。It is a flowchart which showed the processing content of the localization processing of step S103 in the HTML reading processing shown in FIG. 図２に示したＨＴＭＬ読み込み処理におけるステップＳ１０５〜Ｓ１０７の処理を示した説明図である。（ａ）は、変更ＨＴＭＬコードの一例を示した図であり、（ｂ）は、変更ＨＴＭＬコードの要素ごとに階層構造を示した図であり、（ｃ）は、ウェブページ記憶部のデータベースに記憶されたＩＤ割当変更ＨＴＭＬデータを示した図である。It is explanatory drawing which showed the process of steps S105-S107 in the HTML reading process shown in FIG. (A) is a diagram showing an example of the modified HTML code, (b) is a diagram showing a hierarchical structure for each element of the modified HTML code, and (c) is a diagram in the database of the web page storage unit. It is a figure which showed the stored ID allocation change HTML data. 本発明の一実施形態であるウェブ構築支援装置における編集画面表示処理の処理内容を示したフローチャートである。It is a flowchart which showed the processing content of the edit screen display processing in the web construction support apparatus which is one Embodiment of this invention. （ａ）は、選択画面の一例を示した図であり、（ｂ）は、選択された編集対象のウェブページのＩＤ割当変更ＨＴＭＬコードの一例を示した図である。(A) is a diagram showing an example of a selection screen, and (b) is a diagram showing an example of an HTML code for changing the ID assignment of the selected web page to be edited. 本発明の一実施形態であるウェブ構築支援装置における変更処理の処理内容を示したフローチャートである。It is a flowchart which showed the processing content of the change processing in the web construction support apparatus which is one Embodiment of this invention. 本発明の一実施形態であるウェブ構築支援装置における編集画面の一例を示した図である。It is a figure which showed an example of the editing screen in the web construction support apparatus which is one Embodiment of this invention. 本発明の一実施形態であるウェブ構築支援装置における追加処理の処理内容を示したフローチャートである。It is a flowchart which showed the processing content of the additional processing in the web construction support apparatus which is one Embodiment of this invention. （ａ）は、要素を追加した場合のＩＤ割当変更ＨＴＭＬコードの階層構造を示した図であり、（ｂ）は、ウェブページ記憶部のデータベースに記憶されたＩＤ割当変更ＨＴＭＬデータを示した図である。(A) is a diagram showing the hierarchical structure of the ID allocation change HTML code when an element is added, and (b) is a diagram showing the ID assignment change HTML data stored in the database of the web page storage unit. Is.

以下、本発明の実施の形態について、図面を参照して説明する。各図面を通じて同一若しくは同等の部位や構成要素には、同一若しくは同等の符号を付している。ただし、図面は模式的なものであり、現実のものとは異なることに留意すべきである。また、図面相互間においても互いの寸法の関係や比率が異なる部分が含まれている。 Hereinafter, embodiments of the present invention will be described with reference to the drawings. The same or equivalent parts and components are designated by the same or equivalent reference numerals throughout the drawings. However, it should be noted that the drawings are schematic and differ from the actual ones. In addition, there are parts in which the relations and ratios of the dimensions of the drawings are different from each other.

また、以下に示す実施の形態は、この発明の技術的思想を具体化するための装置等を例示するものであって、この発明の技術的思想は、各構成部品の配置等を下記のものに特定するものでない。この発明の技術的思想は、特許請求の範囲において、種々の変更を加えることができる。 Further, the embodiments shown below exemplify an apparatus or the like for embodying the technical idea of the present invention, and the technical idea of the present invention describes the arrangement of each component and the like as follows. It is not specific to. The technical idea of the present invention can be modified in various ways within the scope of claims.

＜ウェブ構築支援装置の概略構成＞
図１は、本発明の一実施形態であるウェブ構築支援装置の概略構成を示した概略構成図である。本実施形態では、移行元移行元ウェブサーバ２に記憶されているウェブページを、編集可能な状態で、かつ移行前と同様のウェブページを表示できる状態で移行先ウェブサーバ４へ移行するウェブ構築支援装置１を例に挙げて説明する。 <Outline configuration of web construction support device>
FIG. 1 is a schematic configuration diagram showing a schematic configuration of a web construction support device according to an embodiment of the present invention. In the present embodiment, a web construction that migrates the web page stored in the migration source migration source web server 2 to the migration destination web server 4 in a state in which the web page can be edited and the same web page as before the migration can be displayed. The support device 1 will be described as an example.

図１に示すように、ウェブ構築支援装置１は、ネットワーク５を介して、移行元ウェブサーバ２と接続されている。移行元ウェブサーバ２は、ＨＴＭＬ（HyperText Markup Language）で記述されたウェブページを記憶しており、この記憶したウェブページに基づいて、ＨＴＴＰ（Hypertext Transfer Protocol）を通信プロトコルとして、ウェブ表示を提供する。 As shown in FIG. 1, the web construction support device 1 is connected to the migration source web server 2 via the network 5. The migration source web server 2 stores a web page described in HTML (HyperText Markup Language), and based on the stored web page, provides a web display using HTTP (Hypertext Transfer Protocol) as a communication protocol. ..

また、ウェブ構築支援装置１は、移行先ウェブサーバ４とも接続されている。移行先ウェブサーバ４とは、インターネットを介して接続してもよいし、直接ネットワーク接続してもよい。 The web construction support device 1 is also connected to the migration destination web server 4. The migration destination web server 4 may be connected via the Internet or may be directly connected to the network.

移行先ウェブサーバ４は、ウェブページ記憶部４１を有している。ウェブ構築支援装置１により、移行元ウェブサーバ２に記憶されていたウェブページが、編集可能な状態で、かつ移行前と同様のウェブページを表示できる状態でウェブページ記憶部４１に記憶される。ウェブページ記憶部４１は、データベース形式でウェブページを記憶する。 The migration destination web server 4 has a web page storage unit 41. The web construction support device 1 stores the web page stored in the migration source web server 2 in the web page storage unit 41 in an editable state and in a state in which the same web page as before the migration can be displayed. The web page storage unit 41 stores web pages in a database format.

ウェブページ記憶部４１にウェブページが記憶されると、移行先ウェブサーバ４は、ウェブページ記憶部４１に記憶されたウェブページに基づいて、ＨＴＴＰ（Hypertext Transfer Protocol）を通信プロトコルとして、ウェブ表示を提供する。 When the web page is stored in the web page storage unit 41, the migration destination web server 4 displays the web using HTTP (Hypertext Transfer Protocol) as a communication protocol based on the web page stored in the web page storage unit 41. offer.

ウェブ構築支援装置１には、キーボードやマウス等から構成された入力部７と、液晶ディスプレイ等から構成された表示部８が接続されている。 The web construction support device 1 is connected to an input unit 7 composed of a keyboard, a mouse, or the like, and a display unit 8 composed of a liquid crystal display or the like.

表示部８は、後述するように、ウェブページの選択画面や編集画面などを表示する。 The display unit 8 displays a web page selection screen, an edit screen, and the like, as will be described later.

入力部７は、表示部８により表示された選択画面に対するウェブページの選択操作を受け付けたり、表示された編集画面からウェブページ編集・追加を指示する操作を受け付けたりする。 The input unit 7 accepts a web page selection operation for the selection screen displayed by the display unit 8, or accepts an operation for instructing a web page edit / addition from the displayed edit screen.

ウェブ構築支援装置１は、コンピュータであり、ＣＰＵ１０と、ＲＡＭ１１と、ＲＯＭ１２と、ハードディスク１３とを備えている。 The web construction support device 1 is a computer, and includes a CPU 10, a RAM 11, a ROM 12, and a hard disk 13.

ＲＡＭ１１は、揮発性半導体等で構成され、ＣＰＵ１０が各種処理を実行する上で必要な各種データを一時的に記憶する。 The RAM 11 is composed of a volatile semiconductor or the like, and temporarily stores various data necessary for the CPU 10 to execute various processes.

ＲＯＭ１２は、不揮発性半導体等で構成され、ＣＰＵ１０が実行する各種プログラム等を記憶している。 The ROM 12 is composed of a non-volatile semiconductor or the like, and stores various programs or the like executed by the CPU 10.

ハードディスク１３は、ウェブ構築支援処理を実行するためのウェブ構築支援プログラムや、その他各種アプリケーションプログラムの格納領域が確保されている。 The hard disk 13 secures a storage area for a web construction support program for executing the web construction support process and other various application programs.

ＣＰＵ１０は、プロセッサやメモリその他の周辺装置によって構成される演算装置であり、入力部７から入力される起動要求に従ってハードディスク１３に記憶されたウェブ構築支援プログラムやその他のアプリケーションプログラムを起動させる。 The CPU 10 is an arithmetic unit composed of a processor, a memory, and other peripheral devices, and activates a web construction support program and other application programs stored in the hard disk 13 in accordance with a startup request input from the input unit 7.

また、ＣＰＵ１０は、その機能上、ウェブ構築支援装置１の中枢的な制御を行う。また、ウェブ構築支援プログラムを実行することにより、取得部１０１と、変更部１０３と、エレメントＩＤ割当部１０４と、記憶制御部１０５と、表示制御部１０６と、編集部１０７とを実装する。 Further, the CPU 10 centrally controls the web construction support device 1 in terms of its function. Further, by executing the web construction support program, the acquisition unit 101, the change unit 103, the element ID allocation unit 104, the storage control unit 105, the display control unit 106, and the editorial unit 107 are implemented.

取得部１０１は、移行元ウェブサーバ２に記憶されたウェブページのＨＴＭＬコードを取得する。 The acquisition unit 101 acquires the HTML code of the web page stored in the migration source web server 2.

変更部１０３は、取得部１０１により取得されたＨＴＭＬコード内に外部リンク情報がある場合、外部リンク情報に基づいて外部リンクされたオブジェクトを取得する。ここで、外部リンク情報とは、例えば、ＵＲＬなどのパスである。 When the HTML code acquired by the acquisition unit 101 contains the external link information, the change unit 103 acquires the externally linked object based on the external link information. Here, the external link information is, for example, a path such as a URL.

ウェブページは、ＨＴＭＬで記述されている。そのため、主にウェブページのスタイルを指定するためのＣＳＳ（Cascading Style Sheets）ファイルや、プログラムが記述されたＪａｖａＳｃｒｉｐｔ（登録商標）ファイルなどを読み込みことにより、高度な装飾や機能を実現させることができる。また、ＪＰＥＧなどの画像ファイルや、ＭＰＥＧなどの動画ファイルを読み込むこともできる。ここでは、ＣＳＳファイル、ＪａｖａＳｃｒｉｐｔ（登録商標）ファイル、画像ファイル、動画ファイルなどを総称してオブジェクト（オブジェクトファイル）という。 Web pages are written in HTML. Therefore, advanced decoration and functions can be realized mainly by reading a CSS (Cascading Style Sheets) file for specifying the style of a web page or a Javascript (registered trademark) file in which a program is described. .. It is also possible to read an image file such as JPEG or a moving image file such as MPEG. Here, CSS files, Javascript (registered trademark) files, image files, moving image files, etc. are collectively referred to as objects (object files).

例えば、移行元ウェブサーバ２内や他のウェブサーバ（図示しない）内に、オブジェクトを記憶しておき、ウェブページ内に読み込む先のパスを外部リンク情報として埋め込むことにより、移行元ウェブサーバ２は、高度な装飾や機能を実現したウェブページを提供する。ここでは、移行元ウェブサーバ２内にオブジェクトが記憶されているとする。 For example, by storing an object in the migration source web server 2 or another web server (not shown) and embedding the path to be read in the web page as external link information, the migration source web server 2 can be used. , Providing web pages with advanced decoration and functions. Here, it is assumed that the object is stored in the migration source web server 2.

そこで、変更部１０３は、取得部１０１により取得されたＨＴＭＬコード内に外部リンク情報がある場合、外部リンク情報に基づいて移行元ウェブサーバ２内に記憶されたオブジェクトを取得する。 Therefore, when the HTML code acquired by the acquisition unit 101 contains the external link information, the change unit 103 acquires the object stored in the migration source web server 2 based on the external link information.

そして、変更部１０３は、取得したオブジェクトを移行先ウェブサーバ４のウェブページ記憶部４１内の所定の記憶領域に記憶させると共に、記憶させる位置情報に基づいてＨＴＭＬコード内の外部リンク情報を変更する。具体的には、変更部１０３は、ＨＴＭＬコード内の外部リンク情報を、それぞれウェブページ記憶部４１内に記憶させたパスへ変更する。 Then, the changing unit 103 stores the acquired object in a predetermined storage area in the web page storage unit 41 of the migration destination web server 4, and changes the external link information in the HTML code based on the stored position information. .. Specifically, the change unit 103 changes the external link information in the HTML code to the path stored in the web page storage unit 41, respectively.

エレメントＩＤ割当部１０４は、変更部１０３により変更された変更ＨＴＭＬコードの階層構造を示す階層情報を抽出すると共に、変更ＨＴＭＬコードに対してタグ毎にエレメントＩＤを割り当てる。ここでは、エレメントＩＤは、英数字を用いてユニークな番号として付与される。また、階層情報は、タグ毎にその親のエレメントＩＤを示すペアレントＩＤと、階層を示す世代番号と、同一世代（同一階層）での表示順を示す兄弟番号とを含んでいる。 The element ID assigning unit 104 extracts the hierarchical information indicating the hierarchical structure of the modified HTML code changed by the changing unit 103, and assigns the element ID to the modified HTML code for each tag. Here, the element ID is assigned as a unique number using alphanumeric characters. Further, the hierarchy information includes a parent ID indicating the element ID of the parent for each tag, a generation number indicating the hierarchy, and a sibling number indicating the display order in the same generation (same hierarchy).

記憶制御部１０５は、エレメントＩＤ割当部１０４により割り当てられたエレメントＩＤと、タグ毎に分割した変更ＨＴＭＬコードと、階層情報とを関連付けてＩＤ割当変更ＨＴＭＬデータとしてウェブページ記憶部４１のデータベースに記憶させる。後述するように、ＩＤ割当変更ＨＴＭＬデータはテーブル形式で記憶されるので、タグ毎に割り当てられたエレメントＩＤと、エレメントＩＤに対応するタグ毎に分割された変更ＨＴＭＬコード、すなわちタグで囲まれた部分的な変更ＨＴＭＬコードと、階層情報とが関連づけられて記憶される。このように関連付けられて記憶されることにより、ウェブページ記憶部４１に記憶されたＩＤ割当変更ＨＴＭＬデータに基づいて、ＩＤ割当変更ＨＴＭＬコードを生成することができる。 The storage control unit 105 stores the element ID assigned by the element ID allocation unit 104, the change HTML code divided for each tag, and the hierarchical information in association with each other and stores the ID allocation change HTML data in the database of the web page storage unit 41. Let me. As will be described later, since the ID assignment change HTML data is stored in the table format, the element ID assigned to each tag and the change HTML code divided for each tag corresponding to the element ID, that is, surrounded by tags. The partially modified HTML code and the hierarchical information are associated and stored. By being associated and stored in this way, the ID allocation change HTML code can be generated based on the ID assignment change HTML data stored in the web page storage unit 41.

表示制御部１０６は、ウェブページ記憶部４１のデータベースに記憶されたＩＤ割当変更ＨＴＭＬデータに基づいて、ＩＤ割当変更ＨＴＭＬコードを生成する。そして、表示制御部１０６は、生成した変更ＨＴＭＬコードを独立したフレームの編集画面内でエレメントＩＤごとに読み出し、読み出したエレメントＩＤ単位で編集可能に表示部８に表示する。ここで、独立したフレームとは、フレーム内の処理とフレーム外の処理とが干渉しないように設けられたフレームをいう。例えば、ウェブ構築支援プログラムを実行することにより、表示部８に表示させる際に用いられるＣＳＳファイルの機能と、変更ＨＴＭＬコードに含まれるＣＳＳファイルの機能とが干渉しないように、ｉ−Ｆｒａｍｅの機能を用いている。 The display control unit 106 generates an ID allocation change HTML code based on the ID assignment change HTML data stored in the database of the web page storage unit 41. Then, the display control unit 106 reads the generated modified HTML code for each element ID in the editing screen of the independent frame, and displays it on the display unit 8 so that it can be edited in the read element ID unit. Here, the independent frame means a frame provided so that the processing inside the frame and the processing outside the frame do not interfere with each other. For example, the function of the i-frame so that the function of the CSS file used when displaying on the display unit 8 and the function of the CSS file included in the modified HTML code do not interfere with each other by executing the web construction support program. Is used.

編集部１０７は、入力部７へのユーザ操作に基づいて表示部８に表示された編集画面上で編集された場合に、ウェブページ記憶部４１のデータベースに記憶された編集されたエレメントＩＤに対応するＩＤ割当変更ＨＴＭＬデータを編集する。 The editorial unit 107 corresponds to the edited element ID stored in the database of the web page storage unit 41 when edited on the edit screen displayed on the display unit 8 based on the user operation to the input unit 7. Edit the ID assignment change HTML data to be performed.

＜ウェブ構築支援装置の作用＞
次に、本発明の一実施形態であるウェブ構築支援装置１の作用について説明する。ウェブ構築支援装置１は、主に、ＨＴＭＬ読み込み処理と、編集画面表示処理と、変更処理と、追加処理を実行する。そのため、それぞれの処理について具体的に説明する。なお、変更処理と追加処理とを総称して編集処理という。 <Action of web construction support device>
Next, the operation of the web construction support device 1 according to the embodiment of the present invention will be described. The web construction support device 1 mainly executes HTML reading processing, editing screen display processing, change processing, and additional processing. Therefore, each process will be described in detail. The change process and the add process are collectively called an edit process.

＜ＨＴＭＬ読み込み処理＞
図２は、本発明の一実施形態であるウェブ構築支援装置１におけるＨＴＭＬ読み込み処理の処理内容を示したフローチャートである。 <HTML reading process>
FIG. 2 is a flowchart showing the processing content of the HTML reading process in the web construction support device 1 according to the embodiment of the present invention.

図２に示すように、まず、取得部１０１は、移行元ウェブサーバ２に記憶されたウェブページのＨＴＭＬコードを取得する（ステップＳ１０１）。 As shown in FIG. 2, first, the acquisition unit 101 acquires the HTML code of the web page stored in the migration source web server 2 (step S101).

次に、変更部１０３は、パスを変更しながらローカライズ処理を実行する（ステップＳ１０３）。このローカライズ処理により、移行先ウェブサーバ４においてリンク切れなどの不具合を生じさせることなく、適切にウェブページを記憶させることができる。ローカライズ処理は図３に示しており、詳細は後述する。 Next, the change unit 103 executes the localization process while changing the path (step S103). By this localization process, the web page can be appropriately stored without causing a problem such as a broken link in the migration destination web server 4. The localization process is shown in FIG. 3, and the details will be described later.

次に、エレメントＩＤ割当部１０４は、変更部１０３により変更された変更ＨＴＭＬコードの階層構造を示す階層情報を抽出すると共に、変更ＨＴＭＬコードに対してタグ毎にエレメントＩＤを割り当てる（ステップＳ１０５）。 Next, the element ID assigning unit 104 extracts the hierarchical information indicating the hierarchical structure of the changed HTML code changed by the changing unit 103, and assigns the element ID to the changed HTML code for each tag (step S105).

そして、記憶制御部１０５は、エレメントＩＤ割当部１０４により割り当てられたエレメントＩＤと、タグ毎に分割した変更ＨＴＭＬコードと、階層情報とを関連付けてＩＤ割当変更ＨＴＭＬデータとしてウェブページ記憶部４１のデータベースに記憶させる（ステップＳ１０７）。 Then, the storage control unit 105 associates the element ID assigned by the element ID allocation unit 104, the modified HTML code divided for each tag, and the hierarchical information with the ID allocation modified HTML data as the database of the web page storage unit 41. Is stored in (step S107).

図４は、ステップＳ１０５〜Ｓ１０７の処理を示した説明図である。図４（ａ）は、変更ＨＴＭＬコードの一例を示した図であり、図４（ｂ）は、変更ＨＴＭＬコードの要素ごとに階層構造を示した図であり、図４（ｃ）は、ウェブページ記憶部４１のデータベースに記憶されたＩＤ割当変更ＨＴＭＬデータを示した図である。 FIG. 4 is an explanatory diagram showing the processing of steps S105 to S107. FIG. 4A is a diagram showing an example of the modified HTML code, FIG. 4B is a diagram showing a hierarchical structure for each element of the modified HTML code, and FIG. 4C is a web. It is a figure which showed the ID allocation change HTML data stored in the database of a page storage part 41.

図４（ａ）に示すように、変更ＨＴＭＬコードには、タグごとにエレメントＩＤが付与される。図４（ａ）に示した例では、説明のため、エレメントＩＤを、（１）〜（２１）で示している。例えば、＜ｂｏｄｙ＞のタグ（符号４０１）には、エレメントＩＤとして１番が割り当てられている。 As shown in FIG. 4A, an element ID is assigned to each tag in the modified HTML code. In the example shown in FIG. 4 (a), the element IDs are shown by (1) to (21) for the sake of explanation. For example, the <body> tag (reference numeral 401) is assigned the first element ID.

図４（ｂ）に示すように、変更ＨＴＭＬコードは階層構造を有している。その階層に応じて世代番号Ｇ１〜Ｇ９が割り当てられている。例えば、＜ｂｏｄｙ＞タグは、世代番号Ｇ１が割り当てられており、＜ｈｅａｄｅｒ＞タグは、＜ｂｏｄｙ＞タグの子要素となるので、世代番号Ｇ２が割り当てられている。 As shown in FIG. 4B, the modified HTML code has a hierarchical structure. Generation numbers G1 to G9 are assigned according to the hierarchy. For example, the <body> tag is assigned the generation number G1, and the <header> tag is a child element of the <body> tag, so that the generation number G2 is assigned.

なお、世代番号Ｇ９の（１２）、（１５）、（１８）、（２１）は、説明上、「ｔｅｘｔ」と記述しているが、それぞれ「トップページ」などのコンテンツ自体が位置づけられる。 The generation numbers G9 (12), (15), (18), and (21) are described as "text" for the sake of explanation, but the contents themselves such as the "top page" are positioned respectively.

図４（ｃ）に示すように、ウェブページ記憶部４１のデータベースには、変更ＨＴＭＬコードがテーブル形式でＩＤ割当変更ＨＴＭＬデータとして記憶されている。具体的には、エレメントＩＤと、ペアレントＩＤと、世代ＩＤと、兄弟ＩＤと、コンテンツとが関連付けられて記憶されている。 As shown in FIG. 4C, the modified HTML code is stored in the database of the web page storage unit 41 as ID allocation modified HTML data in a table format. Specifically, the element ID, the parent ID, the generation ID, the sibling ID, and the content are associated and stored.

なお、＜ｄｉｖ＃ｍａｉｎ−ｌｏｇｏ＞タグと、＜ｄｉｖ＃ｈｅａｄｅｒ−ｍｅｎｕ＞タグには、世代番号Ｇ５が割り当てられている。このような世代番号が同一である同世代（同階層）に複数のタグがある場合には、表示順に兄弟番号が割り当てられる。 A generation number G5 is assigned to the <div # main-logo> tag and the <div # header-menu> tag. When there are a plurality of tags in the same generation (same layer) having the same generation number, sibling numbers are assigned in the display order.

例えば、＜ｄｉｖ＃ｍａｉｎ−ｌｏｇｏ＞タグには、兄弟番号Ｓ１が割り当てられており、＜ｄｉｖ＃ｈｅａｄｅｒ−ｍｅｎｕ＞タグには、兄弟番号Ｓ２が割り当てられている。 For example, the <div # header-logo> tag is assigned the sibling number S1, and the <div # header-menu> tag is assigned the sibling number S2.

このように、パスを変更しながらローカライズする処理と、エレメントＩＤを付与する処理とを実行するので、移行先ウェブサーバの適切な位置にエレメントＩＤが付与された状態でウェブページが記憶される。そのため、移行先ウェブサーバにおいても移行前と同様のウェブページを表示できる。また、エレメントＩＤにより要素単位で編集可能な状態で記憶されているので、元のウェブページと同様の状態で、かつ要素ごとに編集可能な状態で表示される。そのため、ユーザにとって元のウェブページと見た目が同様の状態でウェブページの編集が可能となるので、編集が容易となる。 In this way, since the process of localizing while changing the path and the process of assigning the element ID are executed, the web page is stored in a state where the element ID is assigned at an appropriate position of the migration destination web server. Therefore, the same web page as before the migration can be displayed on the migration destination web server. Further, since it is stored in an editable state for each element by the element ID, it is displayed in the same state as the original web page and in an editable state for each element. Therefore, the user can edit the web page in the same state as the original web page, which facilitates editing.

＜ローカライズ処理＞
図３は、図２に示したＨＴＭＬ読み込み処理におけるステップＳ１０３のローカライズ処理の処理内容を示したフローチャートである。 <Localization process>
FIG. 3 is a flowchart showing the processing content of the localization process in step S103 in the HTML reading process shown in FIG.

図３に示すように、変更部１０３は、取得部１０１により取得されたＨＴＭＬコードをタグごとにピックアップする（ステップＳ５０１）。 As shown in FIG. 3, the change unit 103 picks up the HTML code acquired by the acquisition unit 101 for each tag (step S501).

そして、変更部１０３は、タグごとにピックアップしたＨＴＭＬコードにパス変換対象があるか否かを判定する（ステップＳ５０３）。ここで、ＨＴＭＬコード内に外部リンク情報（パス）がある場合、パス変換対象があると判定する。 Then, the changing unit 103 determines whether or not the HTML code picked up for each tag has a path conversion target (step S503). Here, if there is external link information (path) in the HTML code, it is determined that there is a path conversion target.

タグごとにピックアップしたＨＴＭＬコード内にパス変換対象があると判定した場合（ステップＳ５０３；ＹＥＳ）、変更部１０３は、パスにより示されたオブジェクトを取得した後（ステップＳ５０５）、ＨＴＭＬコード内の外部リンク情報（パス）を変換する（ステップＳ５０７）。具体的には、変更部１０３は、ＨＴＭＬコード内の外部リンク情報を、それぞれウェブページ記憶部４１内に記憶させるパスへ変更する。 When it is determined that there is a path conversion target in the HTML code picked up for each tag (step S503; YES), the changing unit 103 obtains the object indicated by the path (step S505) and then externally in the HTML code. Convert the link information (path) (step S507). Specifically, the change unit 103 changes the external link information in the HTML code to a path to be stored in the web page storage unit 41, respectively.

次に、変更部１０３は、取得したオブジェクト内にパス変換対象があるか否かを判定する（ステップＳ５０９）。例えば、ＣＳＳファイルやＪａｖａＳｃｒｉｐｔ（登録商標）ファイルは、さらに別のＣＳＳファイルやＪａｖａＳｃｒｉｐｔ（登録商標）ファイル等を読み込むようにコーディングされていることがある。そこで、変更部１０３は、ステップＳ５０９においてパス変換対象がなくなるまでステップＳ５０５〜Ｓ５０９の処理を繰り返し実行する。 Next, the change unit 103 determines whether or not there is a path conversion target in the acquired object (step S509). For example, a CSS file or a Javascript® file may be coded to read yet another CSS file, a Javascript® file, or the like. Therefore, the changing unit 103 repeatedly executes the processes of steps S505 to S509 until there are no path conversion targets in step S509.

そして、全タグのピックアップが終了するまで（ステップＳ５１１；ＹＥＳ）、変更部１０３は、ステップＳ５０１〜Ｓ５１１の処理を繰り返し実行する。 Then, the change unit 103 repeatedly executes the processes of steps S501 to S511 until the pickup of all tags is completed (step S511; YES).

このローカライズ処理により、移行先ウェブサーバ４においてリンク切れなどの不具合を生じさせることなく、適切にウェブページを記憶させることができる。 By this localization process, the web page can be appropriately stored without causing a problem such as a broken link in the migration destination web server 4.

なお、本実施形態では、図２の示したフローチャートにおけるパスを変更しながらローカライズする処理（ステップＳ１０３）を実行した後に、エレメントＩＤを付与する処理（ステップＳ１０５）を実行したが、これに限らず、ステップＳ１０３の処理を実行しながら、ステップＳ１０５を実行するようにしてもよい。具体的には、図３に示したフローチャートにおけるステップＳ５０３；ＮＯの後であって、ステップＳ５０９の後に、タグごとに、ステップＳ１０５の処理を実行するようにしてもよい。 In the present embodiment, after executing the process of localizing while changing the path in the flowchart shown in FIG. 2 (step S103), the process of assigning the element ID (step S105) is executed, but the present invention is not limited to this. , Step S105 may be executed while executing the process of step S103. Specifically, the process of step S105 may be executed for each tag after step S503; NO in the flowchart shown in FIG. 3 and after step S509.

＜編集画面表示処理＞
図５は、本発明の一実施形態であるウェブ構築支援装置１における編集画面表示処理の処理内容を示したフローチャートである。 <Edit screen display processing>
FIG. 5 is a flowchart showing the processing content of the editing screen display processing in the web construction support device 1 according to the embodiment of the present invention.

図５に示すように、ユーザ操作により選択画面から編集対象のウェブページが選択されると（ステップＳ２０１；ＹＥＳ）、編集部１０７は、選択されたウェブページの要素と、選択された要素の子要素とをウェブページ記憶部４１のデータベースから取得する（ステップＳ２０３）。 As shown in FIG. 5, when the web page to be edited is selected from the selection screen by the user operation (step S201; YES), the editorial unit 107 has an element of the selected web page and a child of the selected element. The elements and the elements are acquired from the database of the web page storage unit 41 (step S203).

そして、編集部１０７は、取得した要素のタグにエレメントＩＤを記述して、ＩＤ割当変更ＨＴＭＬコードを生成する（ステップＳ２０５）。 Then, the editorial unit 107 describes the element ID in the tag of the acquired element and generates the ID allocation change HTML code (step S205).

そして、編集部１０７は、ウェブページ記憶部４１のデータベースから、エレメントＩＤ、ペアレントＩＤ、世代番号、兄弟番号に基づいて、変更ＨＴＭＬコードを生成し、生成したＩＤ割当変更ＨＴＭＬコードに基づいて、ｉ−Ｆｒａｍｅの編集画面上に選択された編集対象のウェブページを表示させる（ステップＳ２０７）。 Then, the editorial unit 107 generates a change HTML code from the database of the web page storage unit 41 based on the element ID, the parent ID, the generation number, and the sibling number, and based on the generated ID assignment change HTML code, i -Display the selected web page to be edited on the frame edit screen (step S207).

図６（ａ）は、選択画面の一例を示した図であり、図６（ｂ）は、選択された編集対象のウェブページのＩＤ割当変更ＨＴＭＬコードの一例を示した図である。 FIG. 6A is a diagram showing an example of a selection screen, and FIG. 6B is a diagram showing an example of an HTML code for changing the ID assignment of the selected web page to be edited.

図６（ａ）に示すように、階層的に関係つけられているウェブページが選択可能に表示部８に表示されている。ユーザは、入力部７を用いて編集対象のウェブページを選択する操作を行うと、編集部１０７は、図６（ｂ）に示すようなＩＤ割当変更ＨＴＭＬコードを生成する。ここでは、図６（ａ）に示した選択画面から、ウェブページ２０１が選択された場合において、生成されたＩＤ割当変更ＨＴＭＬコードの一例を図６（ｂ）に示している。 As shown in FIG. 6A, the hierarchically related web pages are displayed on the display unit 8 so as to be selectable. When the user performs an operation of selecting a web page to be edited using the input unit 7, the editorial unit 107 generates an ID assignment change HTML code as shown in FIG. 6 (b). Here, an example of the generated ID assignment change HTML code when the web page 201 is selected from the selection screen shown in FIG. 6 (a) is shown in FIG. 6 (b).

図６（ｂ）に示すように、各タグには、エレメントＩＤがＩＤ割当変更ＨＴＭＬコードに記述されている。例えば、＜ｂｏｄｙ＞のタグには、ｄａｔａｅｌｅｍｅｎｔｉｄ＝‘１’ が記述され、＜ｂｏｄｙｄａｔａｅｌｅｍｅｎｔｉｄ＝‘１’＞となっている。 As shown in FIG. 6B, an element ID is described in the ID assignment change HTML code in each tag. For example, in the tag of <body>, data element id = '1' is described, and <body data element id = '1'>.

このように、編集部１０７は、取得した要素のタグにエレメントＩＤを記述する。 In this way, the editorial unit 107 describes the element ID in the tag of the acquired element.

これにより、ＩＤ割当変更ＨＴＭＬコードに記述されたエレメントＩＤに基づいて、ユーザが編集可能な要素を色枠で表示させることもできる。例えば、ユーザが入力部７の一つであるマウスを操作することで、表示部８に表示されたカーソルが編集可能な要素に基づいて表示された編集可能領域を横断した場合（マウスオーバーした場合）、編集部１０７は、要素に基づいて表示された編集可能領域を緑色の枠で表示させる。これにより、ユーザは、編集画面のうち、どの部分が編集可能であるかを視覚的に把握することができる。 As a result, the elements that can be edited by the user can be displayed in a color frame based on the element ID described in the ID assignment change HTML code. For example, when the user operates a mouse, which is one of the input units 7, the cursor displayed on the display unit 8 crosses the editable area displayed based on the editable element (when the mouse is over). ), The editorial unit 107 displays the editable area displayed based on the element with a green frame. As a result, the user can visually grasp which part of the edit screen can be edited.

＜変更処理＞
図７は、本発明の一実施形態であるウェブ構築支援装置１における変更処理の処理内容を示したフローチャートである。 <Change process>
FIG. 7 is a flowchart showing the processing content of the change processing in the web construction support device 1 according to the embodiment of the present invention.

図７に示すように、編集部１０７は、表示部８に表示された編集画面に表示された要素が編集対象として選択されたか否かを判定する（ステップＳ３０１）。具体的には、ユーザは、緑色の枠で表示された編集可能領域をクリック操作すると、編集部１０７は、編集対象として選択されたと判定する。 As shown in FIG. 7, the editing unit 107 determines whether or not the element displayed on the editing screen displayed on the display unit 8 has been selected as the editing target (step S301). Specifically, when the user clicks the editable area displayed in the green frame, the editorial unit 107 determines that the editable area has been selected as the edit target.

要素が編集対象として選択された場合（ステップＳ３０１；ＹＥＳ）、編集部１０７は、選択された編集可能領域を赤色の枠で表示させる（ステップＳ３０３）。 When the element is selected as an edit target (step S301; YES), the editorial unit 107 displays the selected editable area in a red frame (step S303).

編集可能領域が赤色の枠で表示されると編集可能な状態に遷移したことを示しているので、ユーザは入力部７から編集可能領域内の変更操作を行う。 When the editable area is displayed in the red frame, it indicates that the editable state has been entered, so that the user performs a change operation in the editable area from the input unit 7.

そして、ユーザが変更した要素の保存が要求されると（ステップＳ３０５；ＹＥＳ）、編集部１０７は、選択された要素について変更内容を、ウェブページ記憶部４１のデータベースに保存する（ステップＳ３０７）。 Then, when the user is requested to save the changed element (step S305; YES), the editorial unit 107 saves the changed content of the selected element in the database of the web page storage unit 41 (step S307).

図８は、編集画面の一例を示した図である。 FIG. 8 is a diagram showing an example of an editing screen.

図８に示すように、編集可能な要素に基づいて表示された編集可能領域３０２は、マウスオーバーされると、緑色の枠で表示され、選択操作されると赤色の枠で表示される。 As shown in FIG. 8, the editable area 302 displayed based on the editable element is displayed in a green frame when the mouse is over, and is displayed in a red frame when the selection operation is performed.

さらに、編集可能領域３０２が選択操作されると赤色の枠で表示されると、編集可能領域３０２の近傍にサブウィンドウ３０１が表示される。 Further, when the editable area 302 is selected and displayed in a red frame, the sub-window 301 is displayed in the vicinity of the editable area 302.

サブウィンドウ３０１は様々なコマンドを命じるためのボタンが複数配置されている。例えば、ボタン３０１ａが押下操作されると、編集部１０７は、変更内容をウェブページ記憶部４１のデータベースに保存するコマンドを要求する。 A plurality of buttons for commanding various commands are arranged in the sub window 301. For example, when the button 301a is pressed, the editorial unit 107 requests a command to save the changed contents in the database of the web page storage unit 41.

このように、ｉ−Ｆｒａｍｅの編集画面上に選択された編集対象のウェブページがエレメントＩＤ単位で編集可能に表示されているので、ｉ−Ｆｒａｍｅ外の処理がｉ−Ｆｒａｍｅ内の処理に影響を及ぼすことないため、ユーザはウェブページの見たままの状態で要素ごとに編集することが可能となる。 In this way, since the selected web page to be edited is displayed editably in the element ID unit on the edit screen of the i-frame, the processing outside the i-frame affects the processing inside the i-frame. Since it has no effect, the user can edit each element as it is on the web page.

＜追加処理＞
図９は、本発明の一実施形態であるウェブ構築支援装置１における追加処理の処理内容を示したフローチャートである。図９に示すステップＳ３０１、Ｓ３０３の処理は、図７に示したステップＳ３０１、Ｓ３０３の処理と同一であるので、説明を省略する。 <Additional processing>
FIG. 9 is a flowchart showing the processing content of the additional processing in the web construction support device 1 according to the embodiment of the present invention. Since the processing of steps S301 and S303 shown in FIG. 9 is the same as the processing of steps S301 and S303 shown in FIG. 7, description thereof will be omitted.

ステップＳ３０３において編集可能領域が赤色の枠で表示されると、編集可能な状態に遷移したことを示しているので、ユーザは入力部７から編集可能領域に対して要素の追加操作を行う。ユーザは、サブウィンドウ３０１のボタン操作により、追加位置（選択している編集可能領域の前に追加するのか、後ろに追加するのか）を指定し、追加する内容を入力する。 When the editable area is displayed in the red frame in step S303, it indicates that the editable state has been entered. Therefore, the user performs an operation of adding an element to the editable area from the input unit 7. The user specifies the addition position (whether to add before or after the selected editable area) by operating the button of the sub window 301, and inputs the content to be added.

ユーザ入力により、追加位置と追加内容とが指定されると（ステップＳ４０１；ＹＥＳ）、編集部１０７は、追加した要素の基準となる要素（基準要素）のエレメントＩＤと、追加した要素の基準要素からの位置（追加位置）と、追加内容とを取得する（ステップＳ４０３）。 When the additional position and the additional content are specified by the user input (step S401; YES), the editorial unit 107 determines the element ID of the element (reference element) that is the reference of the added element and the reference element of the added element. The position from (additional position) and the additional content are acquired (step S403).

編集部１０７は、取得した情報に基づいて、追加した要素に、新たにエレメントＩＤ、ペアレントＩＤ、世代番号、兄弟番号を付与する（ステップＳ４０５）。 The editorial unit 107 newly assigns an element ID, a parent ID, a generation number, and a sibling number to the added element based on the acquired information (step S405).

そして、編集部１０７は、エレメントＩＤ、ペアレントＩＤ、世代番号、兄弟番号、および追加内容を関連付けて、ウェブページ記憶部４１のデータベースに保存する（ステップＳ４０７）。 Then, the editorial unit 107 associates the element ID, the parent ID, the generation number, the sibling number, and the additional contents, and saves them in the database of the web page storage unit 41 (step S407).

次に、編集部１０７は、ウェブページ記憶部４１のデータベースから、追加された要素を読み込み、ＩＤ割当変更ＨＴＭＬコードを生成し、生成したＩＤ割当変更ＨＴＭＬコードに基づいて、ｉ−Ｆｒａｍｅの編集画面上に追加された要素のウェブページを表示させる（ステップＳ４０９）。 Next, the editorial unit 107 reads the added element from the database of the web page storage unit 41, generates an ID allocation change HTML code, and based on the generated ID allocation change HTML code, the i-frame edit screen. Display the web page of the element added above (step S409).

図１０（ａ）は、要素を追加した場合のＩＤ割当変更ＨＴＭＬコードの階層構造を示した図であり、図１０（ｂ）は、ウェブページ記憶部４１のデータベースに記憶されたＩＤ割当変更ＨＴＭＬデータを示した図である。 FIG. 10A is a diagram showing a hierarchical structure of the ID assignment change HTML code when an element is added, and FIG. 10B is an ID assignment change HTML stored in the database of the web page storage unit 41. It is a figure which showed the data.

図１０（ａ）では、世代番号がＧ７で兄弟番号がＳ４でエレメントＩＤが（１９）である＜ｌｉ＞タグを基準要素として、基準要素からの位置（追加位置）を「後ろ」、追加するテキストを「ブログ」とする要素が追加された例を挙げて説明する。 In FIG. 10A, the position (additional position) from the reference element is added “behind” with the <li> tag having the generation number G7, the sibling number S4, and the element ID (19) as the reference element. An example will be given with the addition of an element that makes the text a "blog".

このとき、世代番号Ｇ７に、エレメントＩＤが（１９）である＜ｌｉ＞タグの兄弟番号Ｓ４の後ろを示す兄弟番号Ｓ５の位置に、エレメントＩＤを（２２）として、＜ｌｉ＞タグが追加されている。 At this time, the <li> tag is added to the generation number G7 with the element ID set to (22) at the position of the sibling number S5 indicating the back of the sibling number S4 of the <li> tag having the element ID (19). ing.

そして、追加内容に基づいて、世代番号Ｇ８、兄弟番号Ｓ１、エレメントＩＤを（２３）として、＜ａｈｒｅｆ＝‘／ｂｌｏｇ’＞タグが追加され、世代番号Ｇ９、兄弟番号Ｓ１、エレメントＩＤを（２４）として、表示するテキスト自体となる「ブログ」が追加されている。 Then, based on the added contents, the <a ref ='/ blog'> tag is added with the generation number G8, the sibling number S1, and the element ID as (23), and the generation number G9, the sibling number S1, and the element ID are set as (23). As 24), a "blog" that is the text itself to be displayed has been added.

ウェブページ記憶部４１のデータベースには、図１０（ｂ）に示すように、エレメントＩＤが、（２２）、（２３）、（２４）として割り当てられて、それぞれペアレントＩＤ、世代番号、兄弟番号、およびコンテンツ（追加内容）が関連付けられて記憶される。 As shown in FIG. 10B, element IDs are assigned as (22), (23), and (24) in the database of the web page storage unit 41, and the parent ID, generation number, and sibling number, respectively. And the content (additional content) are associated and stored.

ウェブページ記憶部４１への記憶が完了すると、編集部１０７は、ウェブページ記憶部４１のデータベースから、追加された要素を読み込み、下記のようなＩＤ割当変更ＨＴＭＬコードを生成する。 When the storage in the web page storage unit 41 is completed, the editorial unit 107 reads the added element from the database of the web page storage unit 41 and generates the following ID assignment change HTML code.

target Element ID :19
position: after
src:
<li data-element-id=‘22’><a href=‘blog’ data-element-id=’23’>ブログ</a></li>
そして、編集部１０７は、生成したＩＤ割当変更ＨＴＭＬコードに基づいて、ｉ−Ｆｒａｍｅの編集画面上に追加された要素のウェブページを表示させる。 target Element ID: 19
position: after
src:
<li data-element-id = '22'><ahref='blog'data-element-id='23'> Blog </a></li>
Then, the editorial unit 107 displays the web page of the added element on the edit screen of the i-Frame based on the generated ID assignment change HTML code.

このように、追加処理においても、変更処理と同様に、ｉ−Ｆｒａｍｅの編集画面上に選択された編集対象のウェブページがエレメントＩＤ単位で編集可能に表示されているので、ユーザはウェブページの見たままの状態で要素を追加することが可能となる。 In this way, in the addition process as well as the change process, the selected web page to be edited is displayed editably on the i-Frame edit screen for each element ID, so that the user can edit the web page. It is possible to add elements as they are seen.

以上のように、本発明の一実施形態であるウェブ構築支援装置１によれば、移行元ウェブサーバ２からウェブページのＨＴＭＬコードを取得する取得部１０１と、取得部１０１により取得されたＨＴＭＬコード内に外部リンク情報がある場合、外部リンク情報に基づいて外部リンクされたオブジェクトを取得し、移行先ウェブサーバ４のウェブページ記憶部４１に記憶させると共に、記憶させる位置情報に基づいてＨＴＭＬコード内の外部リンク情報を変更する変更部１０３と、変更部１０３により変更された変更ＨＴＭＬコードの階層構造を示す階層情報を抽出すると共に、変更ＨＴＭＬコードに対してタグ毎にエレメントＩＤを割り当てるエレメントＩＤ割当部１０４と、割り当てられたエレメントＩＤと、タグ毎に分割した変更ＨＴＭＬコードと、階層情報とを関連付けてＩＤ割当変更ＨＴＭＬデータとしてデータベースに記憶させる記憶制御部１０５とを備える。 As described above, according to the web construction support device 1 according to the embodiment of the present invention, the acquisition unit 101 that acquires the HTML code of the web page from the migration source web server 2 and the HTML code acquired by the acquisition unit 101. If there is external link information inside, the externally linked object is acquired based on the external link information, stored in the web page storage unit 41 of the migration destination web server 4, and in the HTML code based on the stored position information. Element ID assignment that extracts the hierarchical information indicating the hierarchical structure of the modified HTML code changed by the modified unit 103 and the modified HTML code that changes the external link information of the above, and assigns the element ID to each tag to the modified HTML code. The unit 104 includes a storage control unit 105 that associates the assigned element ID, the modified HTML code divided for each tag, and the hierarchical information and stores the ID allocation modified HTML data in the database.

これにより、移行先ウェブサーバにおいても、移行前のウェブページと同様の状態で、かつ要素ごとに編集可能な状態で表示される。そのため、ユーザにとって元のウェブページと見た目が同様の状態でウェブページの編集が可能となるので、編集が容易となる。 As a result, even on the migration destination web server, it is displayed in the same state as the web page before migration and in a state where each element can be edited. Therefore, the user can edit the web page in the same state as the original web page, which facilitates editing.

＜変形例＞
本発明の一実施形態であるウェブ構築支援装置１では、エレメントＩＤは、英数字を用いてユニークな番号として付与したが、これに限らない。 <Modification example>
In the web construction support device 1 according to the embodiment of the present invention, the element ID is assigned as a unique number using alphanumeric characters, but the element ID is not limited to this.

エレメントＩＤ割当部１０４は、編集部１０７により変更および追加などの編集された回数に基づいて、エレメントＩＤを変更するようにしてもよい。具体的には、ユニークな番号と、下３桁を編集回数として組み合わせた数字をエレメントＩＤとする。例えば、ユニークな番号が“１２３４５６７”であり、５回編集された場合、編集回数を“５”として、エレメントＩＤを、“１２３４５６７００５”とする。 The element ID assigning unit 104 may change the element ID based on the number of times of editing such as change and addition by the editorial unit 107. Specifically, the element ID is a number that combines a unique number and the last three digits as the number of edits. For example, if the unique number is "1234567" and it is edited 5 times, the number of edits is "5" and the element ID is "123456705".

これにより、エレメントＩＤ自体が編集された回数を表すので、このエレメントＩＤを表示させることにより、ユーザはエレメントＩＤにより過去の編集された箇所を特定することができる。 As a result, since the element ID itself represents the number of times edited, by displaying this element ID, the user can specify the past edited part by the element ID.

また、エレメントＩＤ割当部１０４は、ペアレントＩＤと、世代番号と、兄弟番号のうち少なくともいずれか１つを含む階層情報に基づいて、変更ＨＴＭＬコードに対してタグ毎にエレメントＩＤを割り当てるようにしてもよい。 Further, the element ID assigning unit 104 assigns an element ID for each tag to the changed HTML code based on the hierarchical information including at least one of the parent ID, the generation number, and the sibling number. May be good.

具体的には、ユニークな番号に、ペアレントＩＤ、世代番号（２桁）、兄弟番号（２桁）として、組み合わせた数字をエレメントＩＤとする。例えば、ユニークな番号が“１２３４５６７”であり、ペアレントＩＤが、“９８７６５４”で、世代番号が、“２”で、兄弟番号が“４”の場合、エレメントＩＤを、“１２３４５６７９８７６５４０２０４”とする。 Specifically, the element ID is a combination of a unique number, a parent ID, a generation number (2 digits), and a sibling number (2 digits). For example, when the unique number is "1234567", the parent ID is "987654", the generation number is "2", and the sibling number is "4", the element ID is "123456798876540204".

これにより、エレメントＩＤ自体が階層構造、すなわち親のエレメントＩＤ、世代番号、兄弟番号などを表すので、エレメントＩＤにより位置を特定することができる。 As a result, since the element ID itself represents a hierarchical structure, that is, the parent element ID, generation number, sibling number, and the like, the position can be specified by the element ID.

さらに、編集部１０７が、編集画面上でオブジェクトの追加が要求された場合に、追加されたオブジェクトのＨＴＭＬコードを生成すると共に、エレメントＩＤ割当部１０４に、生成されたＨＴＭＬコードに対してタグ毎に、階層情報に基づいて新たにエレメントＩＤを割り当てさせ、新たに割り当てられたエレメントＩＤに対応する生成されたＨＴＭＬコードとを、データベースに記憶されたＩＤ割当変更ＨＴＭＬデータに追加するようにしてもよい。 Further, when the editorial unit 107 is requested to add an object on the edit screen, the HTML code of the added object is generated, and the element ID assigning unit 104 generates the HTML code for each tag for the generated HTML code. Even if a new element ID is assigned based on the hierarchical information and the generated HTML code corresponding to the newly assigned element ID is added to the ID assignment change HTML data stored in the database. good.

これにより、要素を追加した場合においても、エレメントＩＤ自体が階層構造、すなわち親のエレメントＩＤ、世代番号、兄弟番号などを表すので、エレメントＩＤにより位置を特定することができる。 As a result, even when an element is added, the element ID itself represents a hierarchical structure, that is, a parent element ID, a generation number, a sibling number, and the like, so that the position can be specified by the element ID.

なお、上述した実施形態では、移行元ウェブサーバ２に記憶されているウェブページを、編集可能な状態で、かつ移行前と同様のウェブページを表示できる状態で移行先ウェブサーバ４へ移行するウェブ構築支援装置１を例に挙げて説明したが、ウェブ構築支援装置１が移行先ウェブサーバ４の機能を有するようにしてもよい。 In the above-described embodiment, the web page stored in the migration source web server 2 is migrated to the migration destination web server 4 in a state in which the web page can be edited and the same web page as before the migration can be displayed. Although the construction support device 1 has been described as an example, the web construction support device 1 may have the function of the migration destination web server 4.

すなわち、ウェブ構築支援装置１がウェブページ記憶部４１を備え、ウェブページ記憶部４１に記憶されたウェブページに基づいて、ＨＴＴＰ（Hypertext Transfer Protocol）を通信プロトコルとして、ウェブ表示を提供する機能を有するようにしてもよい。 That is, the web construction support device 1 includes a web page storage unit 41, and has a function of providing a web display using HTTP (Hypertext Transfer Protocol) as a communication protocol based on the web page stored in the web page storage unit 41. You may do so.

また、上述した実施形態は、コンピュータにインストールしたウェブ構築支援プログラムを実行させることにより実現することができる。 Further, the above-described embodiment can be realized by executing a web construction support program installed on a computer.

１ウェブ構築支援装置
２移行元ウェブサーバ
４移行先ウェブサーバ
５ネットワーク
７入力部
８表示部
１１ＲＡＭ
１２ＲＯＭ
１３ハードディスク
４１ウェブページ記憶部
１０１取得部
１０３変更部
１０４エレメントＩＤ割当部
１０５記憶制御部
１０６表示制御部
１０７編集部
1 Web construction support device 2 Migration source web server 4 Migration destination web server 5 Network 7 Input unit 8 Display unit 11 RAM
12 ROM
13 Hard disk 41 Web page storage unit 101 Acquisition unit 103 Change unit 104 Element ID allocation unit 105 Storage control unit 106 Display control unit 107 Editorial unit

Claims

A web construction support device connected to a migration source web server in which a web page is stored and a migration destination web server to which the web page is migrated via a network.
An acquisition means for acquiring the HTML code of the web page from the migration source web server, and
When there is external link information in the HTML code acquired by the acquisition means, the externally linked object is acquired based on the external link information, stored in a predetermined storage area of the migration destination web server, and described as described above. A changing means for changing the external link information in the HTML code based on the stored position information, and
An element ID assigning means for extracting the hierarchical information indicating the hierarchical structure of the modified HTML code changed by the changing means and assigning an element ID for each tag to the modified HTML code.
A storage control means for associating the assigned element ID, the modified HTML code divided for each tag, and the hierarchical information and storing the ID allocation modified HTML data in the database.
A web construction support device characterized by being equipped with.

An ID allocation change HTML code is generated based on the ID allocation change HTML data stored in the database, and the generated ID allocation change HTML code is read for each element ID in the edit screen of an independent frame, and the read is performed. Display control means that can be edited and displayed in units of element IDs
An editing means for editing the ID assignment change HTML data corresponding to the edited element ID stored in the database when the data is edited on the edit screen based on the user operation.
The web construction support device according to claim 1, wherein the web construction support device is provided.

The element ID assigning means
The web construction support device according to claim 2, wherein the element ID is assigned based on the number of times edited by the editing means.

The element ID assigning means
The web construction support device according to any one of claims 1 to 3, wherein an element ID is assigned to each tag for the modified HTML code based on the hierarchical information.

The editing means
When the addition of an object is requested on the edit screen, the HTML code of the added object is generated, and the element ID assigning means is provided with the hierarchical information for each tag with respect to the generated HTML code. A new element ID is assigned based on the above, and the generated HTML code corresponding to the newly assigned element ID is added to the ID assignment change HTML data stored in the database. The web construction support device according to claim 2.

A web construction support program executed by a computer connected to the migration source web server in which the web page is stored and the migration destination web server to which the web page is migrated via a network.
On the computer
The acquisition step of acquiring the HTML code of the web page from the migration source web server, and
When there is external link information in the HTML code acquired by the acquisition step, the externally linked object is acquired based on the external link information, stored in a predetermined storage area of the migration destination web server, and described above. A change step of changing the external link information in the HTML code based on the stored position information, and
An element ID assignment step that extracts the hierarchical information indicating the hierarchical structure of the modified HTML code changed by the modification step and assigns an element ID for each tag to the modified HTML code.
A storage control step of associating the assigned element ID, the modified HTML code divided for each tag, and the hierarchical information and storing the ID allocation modified HTML data in the database.
Web construction support program to execute.