布局变换装置、布局变换程序以及布局变换方法

摘要

本发明提供一种布局变换装置、布局变换程序、以及布局变换方法。提供通过绝对坐标配置实现的软件组件用容器的布局定义手法。提供一种布局变换装置，对配置了多个软件组件各自的显示区域的显示画面的布局进行变换，具备：检测部，从多个显示区域中，检测处于预定的配置关系的多个对象显示区域；以及生成部，生成在1个合并显示区域内合并显示多个对象显示区域的显示内容的容器，并添加到显示画面的布局中。

说明书

技术领域

本发明涉及布局(layout)变换装置、布局变换程序以及布局变换方法。

背景技术

已提供了用于通过拖放方式组合控制部件等组件(component)(软件组件)，无需直接进行编程而开发应用程序的应用程序开发环境。

专利文献1：日本特开平9-212350号公报

专利文献2：日本特开平9-237181号公报

专利文献3：日本特开平9-258975号公报

发明内容

应用程序的UI(用户接口)组件的布局的种类多种多样，对于应用程序开发工具的开发者来说，开发对布局的种类专门化了的设计功能是个很大的负担。另外，应用程序开发者需要熟练掌握该设计功能。另一方面，在开发工具中没有安装该设计功能的情况下，对于应用程序开发者而言，对利用该布局的代码进行编码的工夫成为更大的负担。

为了解决所述课题，在本发明的第1方式中，提供一种布局变换装置，对显示画面的布局进行变换，该显示画面配置了多个软件组件各自的显示区域，其特征在于，该布局变换装置具备：检测部，从多个所述显示区域中，检测处于预定的配置关系的多个对象显示区域；以及生成部，生成在1个合并显示区域内合并显示所述多个对象显示区域的显示内容的容器，并添加到显示画面的布局中。

另外，所述发明的概要并未列举出本发明的全部必要的特征。另外，这些特征群的部分结合也能构成本发明。

附图说明

图1示出本实施方式所涉及的系统100的一个例子。

图2A将与第1方式对应的布局变换系统200与编辑装置105、保存装置130、变换装置140、以及显示装置155一起示出。

图2B将与第2方式对应的布局变换系统205与编辑装置105、变换装置120、保存装置130、以及显示装置155一起示出。

图3A示出显示本实施方式所涉及的布局容器的一个例子即分离(split)容器311的显示画面310。

图3B示出显示本实施方式所涉及的布局容器的一个例子即门户(portal)容器321的显示画面320。

图3C示出显示本实施方式所涉及的栈容器的一个例子即可折叠(accordion)容器331的显示画面330。

图3D示出显示本实施方式所涉及的栈容器的一个例子即标签面板(tabpanel)341的显示画面340。

图3E示出显示本实施方式所涉及的栈容器的一个例子即分页(pager)351的显示画面350。

图4示出本实施方式所涉及的与门户容器对应的配置条件的一个例子。

图5A示出本实施方式所涉及的与不可缩放(resize)的分离容器对应的配置条件的一个例子。

图5B示出本实施方式所涉及的与可缩放的分离容器对应的配置条件的一个例子。

图6示出本实施方式所涉及的与分离容器对应的配置条件的一个例子。

图7示出本实施方式所涉及的与可在纵向或者横向上折叠的布局容器的一个例子即分段(section)容器对应的配置条件的一个例子。

图8示出本实施方式所涉及的与可以折叠到画面端而成为非显示状态的布局容器的一个例子即侧栏(sidebar)对应的配置条件的一个例子。

图9示出本实施方式所涉及的与在纵向上重叠组件的显示内容的可折叠容器对应的配置条件的一个例子。

图10示出本实施方式所涉及的与在横向上重叠组件的显示内容的可折叠容器对应的配置条件的一个例子。

图11示出本实施方式所涉及的与在上侧具有标签(tab)的标签面板对应的配置条件的一个例子。

图12示出本实施方式所涉及的与在左侧具有标签的标签面板对应的配置条件的一个例子。

图13示出本实施方式所涉及的检测部230、生成部240、以及输出部250的处理流程的一个例子。

图14A示出图13的步骤S1320中的列表构造的一个例子。

图14B示出图13的步骤S1330中的处理的一个例子。

图14C示出图13的步骤S1340中的处理的一个例子。

图14D示出在图13的步骤S1350中生成的栈容器用的节点的树构造的一个例子。

图15A示出图13的步骤S1360中的向横向进行分割的一个例子。

图15B示出图13的步骤S1370中的处理的一个例子。

图15C示出图13的步骤S1360中的向纵向进行分割的一个例子。

图15D示出图13的步骤S1370中的处理的一个例子。

图16示出本实施方式所涉及的计算机3000的硬件结构的一个例子。

(符号说明)

100：系统；105：编辑装置；110：编辑画面；115：配置信息文件；120：变换装置；130：保存装置；140：变换装置；145：布局信息文件；150：显示画面；155：显示装置；200：布局变换系统；205：布局变换系统；210：编辑部；220：配置信息保存部；230：检测部；240：生成部；250：输出部；260：显示部；270：布局信息保存部；3000：计算机；3010：ROM；3020：RAM；3030：通信接口；3040：硬盘驱动器；3050：软盘驱动器；3060：DVD驱动器；3070：输入输出芯片；3075：图形控制器；3080：显示装置；3082：主机控制器；3084：输入输出控制器；3090：软盘；3095：DVD；3100：CPU。

具体实施方式

以下，通过发明的实施方式说明本发明，但权利要求所述的发明不限于以下的实施方式。另外，在实施方式中说明的所有特征的组合并不都是发明的解决手段所必须的。

图1示出本实施方式所涉及的系统100的一个例子。系统100具备编辑装置105、变换装置120和/或140、保存装置130、显示装置155。系统100根据由应用程序开发者提供的各显示区域的配置，不由应用程序开发者直接进行编辑或者编码，而可以制作包括用于将多个软件组件的显示区域合并显示的容器在内的应用程序的布局。此处，容器是指，例如，提供以使应用程序利用者可以通过共同的UI参照的方式，将多个软件组件的显示内容合并显示的画面的软件组件。容器既可以具有1个或者多个软件组件作为子，也可以具有如何显示该1个或者多个组件的显示内容、即关于UI的种类等的信息。

在第1方式中，系统100具备编辑装置105、保存装置130、变换装置140、显示装置155。编辑装置105也可以是用于应用程序开发者配置构成应用程序的各组件的显示区域的计算机或者终端等。编辑装置105具备应用程序开发者可以使用GUI对组件的显示区域例如进行绝对坐标配置的编辑画面110。

应用程序开发者以满足与容器对应的配置条件的方式在编辑画面110上配置了多个组件的显示区域，根据该配置，编辑装置105将该多个组件的显示区域的配置信息输出到保存装置130。配置信息也可以是由应用程序开发者在编辑画面110上配置的各组件的显示区域的位置、大小等信息。

保存装置130输入并保存编辑装置105输出的配置信息。保存装置130也可以生成并保存与该配置信息对应的配置信息文件115。配置信息文件115保存多个组件的显示区域的配置信息。保存装置130也可以是在与编辑装置105相同的计算机装置上或者在网络上连接的其他计算机上。接下来，保存装置130将该配置信息输出到变换装置140。

变换装置140从保存装置130输入配置信息，将该配置信息变换为对应的布局信息而输出到显示装置155。布局信息也可以是记述包括至少1个组件和/或容器的显示画面的布局的信息。

显示装置155从变换装置140输入布局信息，根据该布局信息中记述的包括至少1个组件和/或容器的显示区域的显示画面的布局，显示显示画面150。显示装置155也可以是用于应用程序利用者将构成应用程序的各组件的显示区域显示在显示画面150中的计算机或者终端等。

在第2方式中，系统100具备编辑装置105、变换装置120、保存装置130、显示装置155。编辑装置105是用于应用程序开发者配置构成应用程序的各组件的显示区域的计算机或者终端等。编辑装置105具备应用程序开发者可以使用GUI对组件的显示区域进行例如绝对坐标配置的编辑画面110。

应用程序开发者以满足与容器对应的配置条件的方式在编辑画面110上配置了多个组件的显示区域，根据该配置，编辑装置105将该多个组件的配置信息输出到变换装置120。变换装置120从编辑装置105输入配置信息，将该配置信息变换为对应的布局信息而输出到保存装置130。

保存装置130输入并保存变换装置120输出的布局信息。保存装置130也可以生成并保存与该布局信息对应的布局信息文件145。布局信息文件145是包括显示画面的布局的信息的文件，该显示画面包含至少1个组件和/或容器的显示区域。接下来，保存装置130将该布局信息输出到显示装置155。

显示装置155从保存装置130输入布局信息，根据该布局信息中记述的包括至少1个组件和/或容器的显示区域的显示画面的布局，显示显示画面150。显示装置155也可以是用于应用程序利用者将构成应用程序的各组件的显示区域显示在显示画面150中的计算机或者终端等。

图2A将与第1方式对应的布局变换系统200与编辑装置105、保存装置130、变换装置140、以及显示装置155一起示出。布局变换系统200也可以是用于对使多个软件组件联合了的应用程序的显示画面的布局进行编辑的编辑装置。布局变换系统200根据例如保存装置130从显示装置155要求了该显示画面的布局信息的情况，将配置了多个软件组件各自的显示区域的配置信息变换为与该配置信息对应的布局信息，输出到显示装置155。

编辑装置105具有编辑部210。编辑部210根据应用程序开发者的指示，在编辑画面内配置多个显示区域，生成该多个显示区域的配置信息，并输出到保存装置130。

保存装置130具有配置信息保存部220。配置信息保存部220从编辑部210输入多个组件的显示区域的配置信息，保存为例如配置信息文件115。配置信息保存部220将配置信息输出到变换装置140。

变换装置140具有检测部230、生成部240、输出部250。检测部230从配置信息保存部220输入配置信息，从该配置信息中包含的多个显示区域中，检测处于预定的配置关系的多个对象显示区域。以后，将检测部230检测出的处于预定的配置关系的多个显示区域表示为“多个对象显示区域”。例如，检测部230参照各组件的显示区域的X坐标以及Y坐标，检测例如多个组件的显示区域处于重叠的关系、多个组件的显示区域邻接、多个组件的显示区域与编辑画面的上端/下端/左端/右端相接地配置、多个组件的显示区域的上边/下边/左边/右边形成矩形区域、多个组件的显示区域的上边和/或下边对齐、右边/左边对齐中的至少1个，作为多个组件的显示区域之间的位置关系。

生成部240根据检测部230检测出的配置关系，生成在1个合并显示区域内合并显示多个对象显示区域的显示内容的容器，并添加到显示画面的布局中。作为一个例子，生成部240使用树构造生成作为子而包括1个或者多个组件的容器。生成部240也可以生成后述的分离容器、门户容器、可折叠容器、标签面板、分页、分段容器、以及侧栏中的至少1个。

输出部250将用于显示显示画面的布局的信息输出到显示装置155，该显示画面包括生成部240生成的容器。输出部250也可以将应用程序的代码作为布局信息文件145而输出。

显示装置155具有显示部260。显示部260根据从输出部250输入的信息执行应用程序的代码，根据包含生成部240生成的容器的布局，显示显示画面150。

图2B将与第2方式对应的布局变换系统205与编辑装置105、变换装置120、保存装置130、以及显示装置155一起示出。布局变换系统205根据例如配置了该显示区域，将配置了多个软件组件各自的显示区域的配置信息变换为与该配置信息对应的布局信息，输出到保存装置130。

编辑装置105具有编辑部210。编辑部210根据应用程序开发者的指示，在编辑画面内配置多个显示区域，生成该多个显示区域的配置信息，并输出到变换装置120。

变换装置120具有检测部230、生成部240、输出部250。检测部230从编辑部210输入配置信息，从该配置信息中包含的多个显示区域中，检测处于预定的配置关系的多个对象显示区域。生成部240根据检测部230检测出的配置关系，生成在1个合并显示区域内中合并显示多个对象显示区域的显示内容的容器，并添加到显示画面的布局中。输出部250将用于显示显示画面的布局的信息输出到保存装置130，该显示画面包括生成部240生成的容器。

保存装置130具有布局信息保存部270。布局信息保存部270从输出部250输入用于显示显示画面的布局的信息，作为例如布局信息文件145进行保存，该显示画面包含生成部240生成的容器。布局信息保存部270将该布局信息输出到显示装置155。

显示装置155具有显示部260。显示部260根据从布局信息保存部270输入的信息执行应用程序，根据包含生成部240生成的容器的布局，显示显示画面150。

图3A、图3B、图3C、图3D、以及图3E示出本实施方式所涉及的容器的例子。生成部240也可以根据多个对象显示区域的配置关系，从多个种类的容器中选择显示多个对象显示区域的显示内容的容器。例如，在容器中有布局容器和栈容器。布局容器是用于如图3A所示的分离容器311以及图3B所示的门户容器321那样，将1个显示画面分割为多个显示部分，将多个组件的各显示内容同时显示在各显示部分中的容器。栈容器是如图3C所示的可折叠容器331、图3D所示的标签面板341、以及图3E所示的分页351那样，将多个组件的显示内容例如堆积(堆栈)到相同的位置，将与各组件对应的标签部以及指定的1个组件的显示内容显示在前面，使其他组件的显示内容成为非显示的容器。

图3A示出显示本实施方式所涉及的布局容器的一个例子即分离容器311的显示画面310。分离容器311的显示区域即合并显示区域与多个组件分别对应地，具备例如组件的显示部分312、314、及316、以及分隔器318及319。组件的显示部分312、314、以及316是用于显示部260分别显示对应的组件的显示内容的部分。分隔器318以及319是显示部260分别明示地显示1个或者多个组件的显示部分312、314、以及316的边界的部分。

横向分割显示区域的分隔器318也可以在分离容器311中横向移动。纵向分割显示区域的分隔器319也可以在分离容器311中纵向移动。在分隔器318以及319可移动的情况下，使用具备显示部260的显示装置155的应用程序利用者通过经由GUI使分隔器318或者319移动，可以在该1个合并显示区域中，变更组件的显示部分312、314、以及316的纵向或者横向的分割比例。

图3B示出显示本实施方式所涉及的布局容器的一个例子即门户容器321的显示画面320。门户容器321的显示区域即合并显示区域与多个组件对应地，例如具备组件的显示区域322、323、324、325、326、以及327。组件的显示区域322、323、324、325、326、以及327是分别显示对应的组件的显示内容的显示部分。显示部260在1个合并显示区域内在多个列中排列显示各组件的显示内容。

应用程序利用者通过在门户容器321中将1个组件的显示区域拖放到新的显示区域，可以使该组件的显示区域在列间和/或列内移动。例如，通过将组件的显示区域322拖放到新的显示区域328，应用程序利用者可以使与显示区域322对应的组件移动到新的显示区域328。

图3C示出显示本实施方式所涉及的栈容器的一个例子即可折叠容器331的显示画面330。可折叠容器331与多个组件对应地，例如具备组件的显示内容332(未图示)、334、及336(未图示)以及标签部337、338、及339。组件的显示内容332、334、以及336是分别显示对应的组件的显示内容的显示部分。显示部260以将组件的显示内容332、334、以及336堆积在相同的位置，而看得见与标签部338对应的组件的显示内容334的显示内容的方式进行显示。

标签部337、338、以及339是示出识别对应的组件的显示内容的信息，并且使应用程序利用者选择1个组件的部分。显示部260在可折叠容器331中显示所指定的1个组件的显示内容334，使其他组件的显示内容332以及336成为非显示。此处，如果应用程序利用者点击指定了标签部337，则可折叠容器331将与该标签部337对应的组件的显示内容332显示在前面，使其他组件的显示内容334以及336成为非显示。

图3D示出显示本实施方式所涉及的栈容器的一个例子即标签面板341的显示画面340。标签面板341与多个组件对应地，例如具备组件的显示内容342(未图示)、344、及346(未图示)以及标签部347、348、及349。组件的显示内容342、344、以及346是分别显示对应的组件的显示内容的显示部分。显示部260以将多个组件的显示内容332、334、以及336堆积在相同的位置，并看得见与标签部338对应的组件的显示内容334的显示内容的方式进行显示。

标签部347、348、以及349是示出识别对应的组件的显示内容的信息，并且使应用程序利用者选择1个组件的部分。显示部260在标签面板341中显示所指定的1个组件的显示内容344，使其他组件的显示内容342以及346成为非显示。此处，如果应用程序利用者点击指定了标签部349，则标签面板341将与标签部349对应的组件的显示内容346显示在前面，使其他组件的显示内容342以及344成为非显示。

图3E示出显示本实施方式所涉及的栈容器的一个例子即分页351的显示画面350。分页351例如具备多个组件的显示内容352(未图示)、354及356(未图示)、页面指定部357、358及359、以及左按钮362及右按钮364。组件的显示内容352、354、以及356是用于分别显示对应的组件的显示内容的部分。显示部260以将组件的显示内容352、354、以及356堆积在相同的位置，并看得见与页面指定部358对应的组件的显示内容352的显示内容的方式进行显示。

页面指定部357、358、以及359是示出识别对应的组件的显示内容的信息，并且使应用程序利用者选择1个组件的部分。显示部260在分页351中显示所指定的1个组件的显示内容352，使其他组件的显示内容354以及356成为非显示。此处，如果应用程序利用者点击指定了页面指定部359，则分页351将与页面指定部359对应的组件的显示内容356显示在前面，使其他组件的显示内容352以及354成为非显示。另外，如果应用程序利用者点击指定了左按钮362/右按钮364，则分页351将与当前在前面显示的显示内容对应的组件的前一/下一组件所对应的显示内容显示在前面，使其他组件的显示内容成为非显示。

检测部230也可以与以上所示那样的多个种类的容器分别对应地，保持应选择各个容器的2个以上的显示区域的配置关系的条件，确定与多个对象显示区域的配置关系一致的条件。例如，检测部230与图3A、图3B、图3C、图3D、或者图3E所示的容器分别对应地，保持应选择该容器的组件的显示区域的配置关系的条件，确定与多个组件的显示区域的配置关系一致的条件。接下来，生成部240也可以选择与所确定的条件对应起来的种类的容器。

图4示出本实施方式所涉及的与门户容器对应的配置条件的一个例子。检测部230也可以从多个显示区域中，检测处于预定的位置关系的多个对象显示区域。

当检测部230检测到使成为显示区域的边界的左右的边对齐而形成纵向排列的多个列、且多个列的上端在横向上对齐而排列的多个对象显示区域的情况下，生成部240也可以生成门户容器，而将与所检测出的多个对象显示区域对应的各组件的显示内容添加到显示画面的布局中。例如，检测部230在编辑画面410内，检测多个组件的显示区域422、424、以及426的左边以及右边分别对齐而构成列420、多个组件的显示区域432以及434的左边以及右边分别对齐而构成列430、多个组件的显示区域442以及444的左边以及右边分别对齐而构成列440、以及列420、430、以及440的上端对齐、列420、430、以及440的下端没有对齐。与其对应地，生成部240也可以生成在多个列中排列显示用于分别显示对应的组件的显示内容的组件的显示区域472、474、476、482、484、492、以及494的门户容器460，并添加到显示画面450的布局中。

图5A示出本实施方式所涉及的与不可缩放的分离容器对应的配置条件的一个例子。检测部230也可以从多个显示区域中，检测使成为显示区域的边界的边的至少一部分彼此对齐配置的多个对象显示区域。检测部230在以2个以上的组件的显示区域充满矩形的区域、并且使成为边界的边与相邻的显示区域的边几乎相接的方式配置的情况下，也可以将该2个以上的显示区域检测为处于预定的位置关系的多个对象显示区域。在该情况下，生成部240也可以生成分离容器，添加到显示画面的布局中，该分离容器在与矩形的区域对应的合并显示区域内，将与多个对象显示区域对应的各软件组件的显示内容分成与多个对象显示区域分别对应的各显示部分而显示。

生成部240也可以在分离容器中，针对多个对象显示区域的边中的、与相邻的对象显示区域的边相接地配置的边所对应的边界线，将显示部分的边界位置设定为不可变更。例如，检测部230在编辑画面510中，检测到组件的显示区域512、514、以及516相互邻接的情况下，生成部240也可以生成具有无法移动的分隔器532以及534的分离容器530，并添加到显示画面520的布局中。此处，检测部230也可以预先保存判定为边部邻接的间隙的宽度的范围，根据相邻的组件的显示区域的绝对坐标求出边部之间的间隙的宽度，在判定为所求出的间隙的宽度包含于该范围中的情况下，设成该相邻的组件的显示区域的边部相接，对应生成边界位置无法移动的分隔器的情况进行检测。

图5B示出本实施方式所涉及的与可缩放的分离容器对应的配置条件的一个例子。生成部240也可以在分离容器中，针对多个对象显示区域的边部中的与相邻的对象显示区域的边部重叠配置的边部所对应的边界线，将显示部分的边界位置设定为可变更。检测部230在编辑画面540中，检测多个组件的显示区域542、544、以及546在边部以重叠部分548以及549邻接。与其对应地，生成部240也可以生成具有可移动的分隔器562以及564的、对应的分离容器560，并添加到显示画面550的布局中。此处，检测部230也可以预先保存边部的重叠部分的宽度的范围，根据相邻的组件的显示区域的绝对坐标求出边部的重叠部分的宽度，在判定为所求出的重叠部分的宽度包含于该范围中的情况下，设成该相邻的组件的显示区域的边部重叠，而对应生成边界位置可移动的分隔器的情况进行检测。

图6示出本实施方式所涉及的与分离容器对应的配置条件的一个例子。在维持绝对坐标配置的同时将编辑画面610中的多个组件的显示区域612、614、以及616配置于显示画面中的情况下，即使应用程序利用者变更了该显示画面的窗口尺寸，显示部260也不使对应的多个组件的显示部分追随窗口尺寸而显示，所以该显示画面对于应用程序利用者来说不方便。

在本例子中，检测部230在编辑画面610中，检测多个组件的显示区域612、614、以及616处于与相邻的组件的显示区域大致相接的位置关系。生成部240生成分离容器，并添加到显示画面的布局中，该分离容器用于使编辑画面610中的多个组件的显示区域612、614、以及616的尺寸的比例、与对应的组件的显示部分622、624、以及626的比例一致，并且分成组件的显示部分622、624、以及626而显示于显示画面的一部分或者整体中。

分离容器621是用于将组件的显示部分622、624、以及626显示于显示画面620的一部分中的分离容器。在显示画面630中，示出将组件的显示部分622、624、以及626显示于显示画面630的整体中的分离容器。显示部260使多个组件的显示部分的尺寸追随显示画面620或者630的窗口尺寸而缩放，分别显示为组件的显示部分632、634、以及636，所以可以提供对于应用程序利用者来说方便的显示画面620或者630。

图7示出本实施方式所涉及的与可在纵向或者横向上折叠的布局容器的一个例子即分段容器对应的配置条件的一个例子。检测部230也可以检测纵向的长度相对横向的长度的比例、或者横向的长度相对纵向的长度的比例小于预定的比例的显示区域。在该情况下，生成部240生成通过应用程序利用者点击标签部而切换显示内容的显示/非显示(折叠)的分段容器，并添加到显示画面的布局中。

例如，在编辑画面710内，检测部230检测组件的显示区域712的纵向的长度相对横向的长度的比例小于预定的比例。与其对应地，生成部240生成对应的分段容器722，添加到显示画面720的布局中。另外，例如，在编辑画面710内，检测部230在检测到组件的显示区域714的横向的长度相对纵向的长度的比例小于预定的比例的情况下，生成部240生成与组件的显示区域714对应的分段容器724，添加到显示画面720的布局中。当应用程序利用者在显示画面720内点击了标签部732的情况下，显示部260显示将与标签部732对应的分段容器722的显示内容折叠了的显示画面740。

图8示出本实施方式所涉及的与可以折叠到画面端而成为非显示状态的布局容器的一个例子即侧栏对应的配置条件的一个例子。检测部230也可以检测某一个边与画面的上端/下端/右端/左端中的某一个相接，并且短边的长度相对长边的长度的比例是预定的比例以下的显示区域。

例如，在编辑画面810内，检测部230分别检测左边、下边、右边与编辑画面810的左端、下端、右端相接，并且短边的长度相对长边的长度的比例小于预定的比例的组件的显示区域812、814、以及816。生成部240生成与组件的显示区域812、814、以及816分别对应的侧栏822、824、以及826，添加到显示画面820的布局中。例如，在应用程序利用者操作了侧栏822、824、以及826的情况下，显示部260使822、824、以及826折叠到画面的端而设成非显示状态。

图9/图10示出本实施方式所涉及的与在纵/横向上重叠组件的显示内容的可折叠容器对应的配置条件的一个例子。检测部230从多个显示区域中，检测处于预定的重叠的关系的多个对象显示区域。例如，检测部230将在纵向或者横向中的一个方向上偏移、并且重叠了预定的第1基准比例以上的2个以上的显示区域，检测为多个对象显示区域。在该情况下，生成部240也可以生成可折叠容器，而添加到显示画面的布局中，该可折叠容器与多个对象显示区域对应地，在纵向或者横向中的与显示区域的偏移方向不同的方向上延伸的长度的多个标签部在一个方向上排列，当选择了某一个标签部则在所选择的标签部与接下来的标签部之间显示对应的对象显示区域的显示内容，并隐藏与非选择的标签部对应的对象显示区域的显示内容的。此处，也可以针对横/纵向分别定义第1基准比例。

在图9的例子中，检测部230将在纵向上偏移，并且重叠了预定的第1基准比例以上的2个以上的显示区域检测为多个对象显示区域。检测部230在编辑画面910中，通过判定组件的显示区域912以及914的纵向的重叠的宽度相对组件的显示区域912的纵向的长度的比例是第1基准比例以上，组件的显示区域914以及916的纵向的重叠的宽度相对组件的显示区域914的纵向的长度的比例是第1基准比例以上，组件的显示区域916以及918的纵向的重叠的宽度相对组件的显示区域916的纵向的长度的比例是第1基准比例以上，进而判定组件的显示区域912、914、916、以及918的横向的偏移量小于基准比例，从而检测在编辑画面910内组件的对象显示区域912、914、916、以及918朝下充分重叠。与其对应地，生成部240生成对应的可折叠容器930而添加到显示画面920的布局中。

在图10的例子中，检测部230将在横向上偏移、并且重叠了预定的第1基准比例以上的2个以上的显示区域，检测为多个对象显示区域。检测部230在编辑画面1010中，通过判定组件的显示区域1012以及1014的横向的重叠的宽度相对组件的显示区域1012的横向的长度的比例是第1基准比例以上，组件的显示区域1014以及1016的横向的重叠的宽度相对组件的显示区域1014的横向的长度的比例是第1基准比例以上，组件的显示区域1016以及1018的横向的重叠的宽度相对组件的显示区域1016的横向的长度的比例是第1基准比例以上，进而判定组件的显示区域1012、1014、1016、以及1018的纵向的偏移量小于基准比例，从而检测在编辑画面1010内组件的显示区域1012、1014、1016、以及1018是朝右充分重叠的多个对象显示区域。与其对应地，生成部240生成对应的可折叠容器1030而添加到显示画面1020的布局中。

图11示出本实施方式所涉及的与在上侧或者下侧具有标签的标签面板对应的配置条件的一个例子。检测部230也可以将重叠预定的第2基准比例以上并且偏移配置的2个以上的显示区域检测为多个对象显示区域。在该情况下，生成部240也可以生成标签容器(标签面板)，而添加到显示画面的布局中，该标签容器具有与多个对象显示区域对应的多个标签部、和显示与多个标签部中的所选择的标签部对应的对象显示区域的显示内容的显示部分。生成部240在偏移配置了多个对象显示区域的配置的方向更接近横向的情况下，也可以在横向上排列多个标签部。

例如，检测部230在编辑画面1110内，判定组件的显示区域1112、1114、1116、以及1118的下方向的偏移量相对右方向的偏移量的比例是基准比例以下，来检测组件的显示区域1112、1114、1116、以及1118是向右方向少许斜下地重叠的多个对象显示区域。与其对应地，生成部240也可以生成在左上具有横向排列的标签的标签面板1130，而添加到显示画面1120的布局中。

生成部240也可以按照多个对象显示区域的重叠顺序，决定多个标签部的顺序。生成部240也可以根据多个组件的Z-index的顺序，决定多个标签部的顺序。例如，针对与多个组件的显示区域1112、1114、1116、以及1118分别对应的标签部1132、1134、1136、以及1138，生成部240既可以按照该多个组件的Z-index从大到小的顺序排列，或者也可以按照Z-index从小到大的顺序排列。

图12示出本实施方式所涉及的与在左侧具有标签的标签面板对应的配置条件的一个例子。例如，检测部230在编辑画面1210中，判定多个组件的显示区域1212、1214、1216、以及1218的右方向的偏移量相对下方向的偏移量的比例是基准比例以下，来检测多个组件的显示区域1212、1214、1216、以及1218是向下方向朝右稍微倾斜地充分重叠的对象显示区域。与其对应地，生成部240也可以生成在左上具有纵向排列的标签的标签面板1230，添加到显示画面1220的布局中。

同样地，如果多个组件的显示区域的配置方向比左方向少许朝下，则生成部240也可以生成在右上具有横向排列的标签的标签面板。<表1>示出多个组件的对象显示区域的配置方向以及配置方向的朝向、与标签部的位置以及标签部的方向的关系的一个例子。

【表1】

<表1>配置方向与标签部的位置以及方向的关系的一个例子

进而，在检测部230检测到多个组件的显示区域的重叠的宽度相对纵向以及横向的长度的比例大于预定的基准值的情况下，生成部240也可以生成分页代替标签面板。另外，在检测部230检测到相互重叠的多个组件的显示区域的数量大于预定的数量的情况下，生成部240也可以生成分页代替标签面板。另外，检测部230在检测出多个组件的显示区域的横向的偏移相对纵向的偏移的比例包含于预定的范围中的情况下，生成部240也可以生成分页代替标签面板。

图13示出本实施方式所涉及的检测部230、生成部240、以及输出部250的处理流程的一个例子。最初，检测部230从保存装置105或者保存装置130取得各组件的显示区域的配置信息(S1310)。

检测部230制作记录配置信息的节点，设成列表构造(S1320)。此处，列表构造是指，节点连成一条直线的数据构造。检测部230也可以生成可以表现连成一条直线的节点的其他数据构造、例如数组代替列表构造。

检测部230找到在横向上相互重叠的多个对象显示区域(S1330)。接下来，检测部230找到在纵向上相互重叠的多个对象显示区域(S1340)。S1330以及S1340的顺序也可以倒过来。

生成部240针对相互重叠的多个对象显示区域，制作栈容器用的节点(S1350)。这样，生成部240利用树构造，来生成包括栈容器的布局信息。

检测部230调查上位节点的位置关系，在横或者纵向上分割多个对象显示区域(S1360)。接下来，生成部240制作布局容器用的节点，将所分割出的多个对象显示区域分别作为子节点(S1370)。这样，生成部240利用树构造，生成包括布局容器的布局信息。

检测部230判定所分割出的多个对象显示区域的各个可否进一步进行分割(S1380)。在可分割的情况下，检测部230从多个显示区域中检测处于预定的重叠的关系的2个以上的显示区域而进行分组，从形成组的2个以上的显示区域以及其他显示区域中检测出处于预定的位置关系的多个对象显示区域而进一步进行分组。接下来，生成部240生成针对各组在合并显示区域内合并显示多个对象显示区域的显示内容的容器，添加到显示画面的布局中。

输出部250根据节点中汇集的信息，输出实际的容器以及组件的布局信息(S1390)。由此，显示部260可以根据从输出部250输入的布局信息，显示组合了多个种类的容器的容器。

图14A示出图13的步骤S1320中的列表构造的一个例子。检测部230根据与多个显示区域对应的节点1412、节点1414、节点1416、节点1418、以及节点1419生成列表构造。

图14B示出图13的步骤S1330中的处理的一个例子。检测部230检测与节点1414以及1416等对应的多个对象显示区域1430在横向上相互重叠。

图14C示出图13的步骤S1340中的处理的一个例子。检测部230检测与节点1418以及节点1419对应的多个对象显示区域1450在纵向上相互重叠。

图14D示出在图13的步骤S1350中生成的栈容器用的节点的树构造的一个例子。生成部240针对与相互重叠的对象显示区域对应的节点1414以及节点1416，生成与标签面板对应的节点1472，将节点1414以及节点1416作为节点1472的子节点。同样地，生成部240针对与相互重叠的对象显示区域对应的节点1418以及节点1419，生成与可折叠容器对应的节点1474，将节点1418以及节点1419作为节点1474的子节点。

图15A示出图13的步骤S1360中的向横向进行分割的一个例子。检测部230检测可以以纵线1518横向分割由对象显示区域1512构成的组、和由对象显示区域1514以及1516构成的组。

图15B示出图13的步骤S1370中的处理的一个例子。生成部240生成具有横向分开的显示部分的布局容器用的节点1522，将节点1524以及节点1526作为节点1522的子节点。

图15C示出图13的步骤S1360中的向纵向进行分割的一个例子。检测部230检测可以以横线1542纵向分割由对象显示区域1514构成的组、和由对象显示区域1516构成的组。

图15D示出图13的步骤S1370中的处理的一个例子。生成部240生成具有纵向分开的显示部分的布局容器用的节点1552，将节点1526以及节点1528作为节点1552的子节点。

图16示出本实施方式所涉及的计算机3000的硬件结构的一个例子。本实施方式所涉及的计算机3000具备：CPU外围部，具有通过主机控制器3082相互连接的CPU3100、RAM3020、图形控制器3075、以及显示装置3080；输入输出部，具有通过输入输出控制器3084与主机控制器3082连接的通信接口3030、硬盘驱动器3040、以及DVD驱动器3060；以及保留(legacy)输入输出部，具有与输入输出控制器3084连接的ROM3010、软盘驱动器3050、以及输入输出芯片3070。

主机控制器3082连接RAM3020、和以高的传送速率访问RAM3020的CPU3100以及图形控制器3075。CPU3100根据ROM3010以及RAM3020中保存的程序进行动作，进行各部分的控制。图形控制器3075取得CPU3100等在RAM3020内设置的帧缓冲器上生成的图像数据，并显示在显示装置3080上。取而代之是，图形控制器3075也可以在内部包括保存CPU3100等生成的图像数据的帧缓冲器。

输入输出控制器3084连接主机控制器3082、和比较高速的输入输出装置即通信接口3030、硬盘驱动器3040、DVD驱动器3060。通信接口3030经由网络与其他装置进行通信。硬盘驱动器3040保存计算机3000内的CPU3100使用的程序以及数据。DVD驱动器3060从DVD3095读取程序或者数据，经由RAM3020提供给硬盘驱动器3040。

另外，对输入输出控制器3084，连接ROM3010、软盘驱动器3050、以及输入输出芯片3070的比较低速的输入输出装置。ROM3010保存计算机3000在起动时执行的引导程序、和/或依存于计算机3000的硬件的程序等。软盘驱动器3050从软盘3090读取程序或者数据，经由RAM3020提供给硬盘驱动器3040。输入输出芯片3070将软盘驱动器3050连接到输入输出控制器3084，并且例如经由并行端口、串行端口、键盘端口、鼠标端口等，将各种输入输出装置连接到输入输出控制器3084。

经由RAM3020提供给硬盘驱动器3040的程序保存在软盘3090、DVD3095、或者IC卡等记录介质中而由利用者提供。程序从记录介质读出，经由RAM3020安装到计算机3000内的硬盘驱动器3040中，在CPU3100中执行。

安装到计算机3000中而使计算机3000作为布局变换系统200发挥功能的程序具备编辑模块、配置信息保存模块、检测模块、生成模块、输出模块、显示模块、布局信息保存模块。这些程序或者模块推动CPU3100等，而使计算机3000分别作为编辑部210、配置信息保存部220、检测部230、生成部240、输出部250、显示部260、布局信息保存部270发挥功能。

这些程序中记述的信息处理通过读入到计算机3000中，作为软件和所述各种硬件资源协作的具体的单元即编辑部210、配置信息保存部220、检测部230、生成部240、输出部250、显示部260、布局信息保存部270发挥功能。于是，通过利用这些具体的单元实现与本实施方式中的计算机3000的使用目的相应的信息的运算或者加工，构筑与使用目的相应的特有的布局变换系统200。

作为一个例子，在计算机3000与外部的装置等之间进行通信的情况下，CPU3100执行在RAM3020上载入的通信程序，根据通信程序中记述的处理内容，对通信接口3030指示通信处理。通信接口3030接收CPU3100的控制，读出在RAM3020、硬盘驱动器3040、软盘3090、或者DVD3095等存储装置上设置的发送缓冲区域等中存储的发送数据而发送到网络、或者将从网络接收到的接收数据写入到在存储装置上设置的接收缓冲器区域等。这样，通信接口3030既可以通过DMA(存储器直接存取)方式在与存储装置之间传送发送接收数据，也可以代替它，而通过CPU3100从传送源的存储装置或者通信接口3030读出数据，并向传送目的地的通信接口3030或者存储装置写入数据，来传送发送接收数据。

另外，CPU3100从硬盘驱动器3040、DVD驱动器3060(DVD3095)、软盘驱动器3050(软盘3090)等外部存储装置中保存的文件或者数据库等中，将全部或者必要的部分通过DMA传送等读入到RAM3020，对RAM3020上的数据进行各种处理。然后，CPU3100将结束了处理的数据通过DMA传送等写回到外部存储装置。在这样的处理中，RAM3020被视为临时保持外部存储装置的内容，所以在本实施方式中将RAM3020以及外部存储装置等总称为存储器、存储部、或者存储装置等。本实施方式中的各种程序、数据、表、数据库等各种信息保存在这样的存储装置上，而成为信息处理的对象。另外，CPU3100还可以将RAM3020的一部分保持在高速缓存存储器中，并在高速缓存存储器上进行读写。即使在这样的方式中，高速缓存存储器也承担RAM3020的功能的一部分，所以在本实施方式中，除了区别示出的情况以外，高速缓存存储器也包含在RAM3020、存储器、和/或存储装置中。

另外，CPU3100对从RAM3020读出的数据，进行通过程序的命令列指定的包括本实施方式中记载的各种运算、信息的加工、条件判断、信息的检索和置换等的各种处理，写回到RAM3020。例如，CPU3100在进行条件判断的情况下，判断是否满足在本实施方式中示出的各种变量大于、小于、大于等于、小于等于、等于其他变量或者常数等条件，在条件成立的情况(或者不成立的情况)下，分支到不同的命令列，或者调出子例程。

另外，CPU3100可以检索存储装置内的文件或者数据库等中保存的信息。例如，在对第1属性的属性值分别对应起来第2属性的属性值的多个条目保存于存储装置中的情况下，CPU3100从存储装置内保存的多个条目中检索与指定了第1属性的属性值的条件一致的条目，读出在该条目中保存的第2属性的属性值，从而可以得到对满足规定的条件的第1属性对应起来的第2属性的属性值。

以上所示的程序或者模块也可以保存在外部的记录介质中。作为记录介质，除了软盘3090、DVD3095以外，还可以使用DVD或者CD等光学记录介质、MO等光磁记录介质、带介质、IC卡等半导体存储器等。另外，也可以将与专用通信网络或者因特网连接的服务器系统中设置的硬盘或者RAM等存储装置用作记录介质，经由网络而将程序提供给计算机3000。

以上，使用实施方式说明了本发明，但本发明的技术范围不限于所述实施方式记载的范围。本领域技术人员很明显可以对所述实施方式追加多种变更或者改良。根据权利要求书的记载可知，施加这样的变更或者改良而得到的方式也包含在本发明的技术的范围中。例如，在本实施方式中，检测部230也可以不将基于多个组件的显示区域的重叠的宽度以及偏移的量等的量与基准比例进行比较，而与基准像素数等进行比较。

只要没有将在权利要求书、说明书、以及附图中示出的装置、系统、程序、以及方法中的动作、工序、步骤、以及阶段等各处理的执行顺序特别明示为“更前”、“之前”等，并且，将前面的处理的输出用于后面的处理中，则可以按照任意的顺序实现。关于权利要求书、说明书、以及附图中的动作流程，即使为便于说明而使用“首先”、“接下来”等措词进行了说明，也并不意味着一定要按照该顺序来实施。