开发支持系统的制作方法

本发明涉及一种web应用的开发技术，特别是涉及一种有效应用于开发支持系统的技术，该开发支持系统支持进行对应于多设备的画面显示的web应用的开发。

背景技术：

近年来，例如平板终端或智能手机等的所谓的智能设备的业务应用系统化，与企业的骨干系统联合的大/中规模的系统的开发案件也有增加的倾向。在这种状况下，用户企业的要件变得复杂，对于it供应商等的开发者来说，开发难度也变大，因此，实现开发的高效化、提高生产效率是重要的。

关于这一点，例如，推进源代码等的开发成果物中的共用部分、通用部分的部件化、开发时的部件的再利用是有效的。并且，通过进行多设备或多平台(以下，有时简单地统称为“多设备”)对应，使每个设备或平台的单独开发部分减少也是有效的。

有关对应于多设备的能够再利用的部件化的技术，例如，在特开2013-235387号公报(专利文献1)中记载了，在根据设备不变更源代码的情况下，动态地变更包含用于显示输入输出项目的控件(control)的外观或属性、控制处理等的用户界面的web服务器系统。该系统例如包括：设备取得部，基于来自客户端的要求，取得有关客户端的设备种类的信息；响应处理部，对于源代码所包含的部件对象，生成对应于由设备取得部取得的客户端的设备的种类的、安装于部分对象的继承源的上级类(class)的、根据显示控件时的调整内容而使对应的控件显示于客户端的画面上的html数据。

现有技术文献

专利文献

专利文献1：特开2013-235387号公报

技术实现要素：

发明所要解决的问题

例如，通过使用专利文献1中所记载的技术，在web应用开发时，能够再利用部件(部件对象)，并且能够通过一个源代码进行多设备对应。

但是，实际上，虽说是通过一个源代码的多设备对应，例如，在源代码中，有时也需要通过if语句等对于每个设备将处理分开写入。并且，在新追加设备的情况下，必须向源代码追加处理等，对于画面开发者来说，难以通过一个源代码进行完全的多设备对应。

并且，作为多设备对应，例如，即使在能够根据设备的画面尺寸切换用户界面的情况下，实际上也仅能够变更在某个画面中显示的控件或部件等的大小或显示形式、配置等，难以进行伴随着多个画面切换的变更。

例如，与pc(个人电脑，personalcomputer)或平板终端相比，智能手机的画面尺寸小、能够显示的信息量存在限制。因此，例如，在菜单等的一览显示中，与在pc或平板终端中总是以全部展开的状态在一个画面中一览显示相对比，在智能手机中，有时采用如下界面：通常时仅显示指示菜单显示的图标等，当经由该图标等指示菜单显示时，将菜单一览作为另一画面显示。在现有技术中，在上述情况下，难以用一个源代码对应于各个模式。因此，在使用能够再利用的部件进行画面开发的情况下，希望一种即使在设备不同的情况下，也能够通过一个源代码进行多设备对应的结构。

另一方面，为了实现如上述那样的结构，需要向画面开发者提供能够再利用的部件，制作、开发这种部件中也追求高效率。能够再利用的部件，由于最终与背景或其他的控件、部件等组合而配置于画面上，因此，特别是在外观上需要与它们的匹配、调和。关于这一点，在单独地开发能够再利用的部件的情况下，将重复进行制作→执行(测试画面上的显示)→外观的确认→外观的再调整这种反复试验，包括测试环境的准备等在内，从而使作业效率大幅降低。

因此，本发明的目的在于提供一种开发支持系统，在通过再利用部件化的要素而能够进行多设备对应的web应用所涉及的画面开发的结构中，实现与画面整体的外观的匹配和调和，并且能够容易地开发能够再利用的部件。

本发明的前述以及其他的目的及新的特征通过本说明书的记载以及附图得以明确。

解决问题的技术方案

在本申请公开的发明中，若简单地说明代表性的内容的概要，则如下所示。

根据本发明的代表性实施方式的开发支持系统，其支持web应用的画面开发，所述web应用接收来自客户端的请求，并响应与所述客户端设备的种类相应的处理结果画面，所述开发支持系统具有以下的特征。

也就是说，开发支持系统，包括：组件开发控制器，具有由一个以上的画面部件的组合构成的模板，所述模板按照所述设备的每个种类规定各个所述画面部件被画面显示时的外观，所述组件开发控制器对于能够再用于所述web应用的画面开发的组件，经由开发者终端接收该开发所涉及的要求；组件开发模型，基于来自所述组件开发控制器的指示，取得包含关于所述组件的源代码的信息；组件开发视图，基于来自所述组件开发控制器的指示，使与所述开发者终端指定的设备种类对应的预定背景图像显示于所述开发者终端，并且使组件开发区域与所述背景图像重叠地显示于所述开发者终端，所述组件开发区域用于显示开发对象的所述组件的外观。

并且，在编辑开发对象的所述组件的源代码的情况下，基于该源代码，使开发对象的所述组件根据由与所述开发者终端指定的设备的种类对应的所述模板所规定的外观而显示于所述组件开发区域。

发明效果

在本申请公开的发明中，如果简单地说明通过代表性的内容而取得的效果，则如下所示。

也就是说，根据本发明的代表性的实施方式，在通过再利用部件化的要素而能够进行多设备对应的web应用所涉及的画面开发的结构中，实现与画面整体的外观的匹配和调和，并且能够容易地开发能够再利用的部件。

附图说明

图1为关于本发明的实施方式一即web服务器系统的构成例示出概要的图。

图2的(a)、(b)为关于本发明的实施方式一中的各个设备的布局的不同的示例示出概要的图。

图3的(a)、(b)为关于本发明的实施方式一中的各个设备的布局的不同的其他示例示出概要的图。

图4的(a)、(b)为关于本发明的实施方式一中的各个设备的组件显示的不同的示例示出概要的图。

图5的(a)、(b)为关于本发明的实施方式一中的各个设备的组件显示的不同的其他示例示出概要的图。

图6为关于在本发明的实施方式一中的编辑视图中的指定内容、与之伴随的画面显示时的处理的流程的示例示出概要的图。

图7为关于本发明的实施方式二即开发支持系统的构成例示出概要的图。

图8为关于本发明的实施方式二中的组件的开发画面的示例示出概要的图。

图9为关于本发明的实施方式二中的组件的开发画面的示例示出概要的图。

图10为关于本发明的实施方式二中的组件的开发画面的示例示出概要的图。

图11为关于进行本发明的实施方式二中的画面开发的情况下的处理的流程的示例示出概要的图。

具体实施方式

以下，根据附图，对本发明的实施方式进行详细说明。此外，在用于说明实施方式的全图中，对于同一部分原则上采用相同的附图标记，省略其重复说明。

(实施方式一)

<系统构成>

图1为关于本发明的实施方式一即web服务器系统的构成例示出概要的图。本发明的实施方式一即web服务器系统100，包括将画面部分组件化而形成的组件190的一览、以及作为由配置有组件190的一个以上的画面区域构成的布局的图案的布局180的一览。并且，各布局180及各组件190分别包括以进行最适合各个设备的画面输出的方式制作的模板，web服务器系统100基于此自动地进行最适合每个设备的画面输出。

web服务器系统100例如为由构筑于服务器设备或云计算服务之上的虚拟服务器构成的服务器系统，例如作为未图示的os(操作系统，operatingsystem)，或者在web服务器程序110、语言处理系统120、框架130等的中间件或基盘等上工作的或利用它们的软件，包括：基于mvc(模型视图控制器，modelviewcontroller)模型开发、安装的控制器140、模型150、编辑视图160、组件视图170、布局(layout)180及组件190等的各部(模块)。

作为web服务器程序110例如能够适当使用apache(注册商标)http服务器等的、在web服务器中通常使用的程序。并且，作为在web服务器程序110上工作的应用系统的基盘即语言处理系统120及框架130，例如能够适当使用用于制作动态网页而使用的php等的脚本语言以及通过php安装的zend框架(zendframework)等。

控制器140具有作为mvc模型中的控制器(c)的功能，接收来自客户端200上的未图示的web浏览器等的请求、对于模型150进行数据的操作要求而取得数据，或对于编辑视图160要求画面显示。模型150具有作为mvc模型中的模型(m)的功能，具有执行事务逻辑、进行数据的操作或取得的功能。事务逻辑(bl)例如可以对于具有数据库等的其他bl服务器300进行要求而使其执行。

编辑视图160及组件视图170具有作为mvc模型中的视图(v)的功能，具有基于模型150的数据进行画面生成并显示的功能。编辑视图160具有进行画面的构成的功能，如后所述，指定画面中使用的布局180，并且分别调出配置于由布局180显示的区域的组件190而进行设定。组件视图170，基于该布局180及组件190的信息进行渲染并制作html(超文本链接标识语言，hypertextmarkuplanguage)数据，并向客户端200输出。

此时，组件视图170，如后所述，根据客户端200的设备通过模板引擎171处理对于布局180及组件190设定的用于画面显示的web模板，进行最适合对象的设备的画面输出。

如图所示，web模板针对各个客户端200的种类(pc、智能手机(智能手机)、平板终端)，作为对于布局180的模板分别包括：模板(pc用)181p、模板(智能手机用)181s、模板(平板用)181t(有时将它们总称而记载为模板181)；以及作为对于组件190的模板分别包括：模板(pc用)191p、模板(智能手机用)191s、模板(平板用)191t(有时将它们总称而记载为模板191)。在图1的示例中，针对pc、智能手机以及平板终端而分别准备了模板181及191，但不限于此，也可以包括其他设备，或者即使为相同种类而画面尺寸不同或os或web浏览器不同的设备。

模板引擎171具有基于由模板181及191等的web模板规定的设计或外观的内容而制作实际的画面的功能。此外，在模板引擎171中例如能够适当使用主要在php中使用的smarty等的一般的模板引擎。

控制器140或组件视图170作为web服务器系统100而能够通用地提供。并且，作为画面部件的布局180或组件190(也包含模板181及191)，可以再利用在其他开发案件中制作的，或可以使用在对象的开发案件中预先制作的。并且，关于模型150，也可以使用在对象的开发案件等中额外制作的模型。另一方面，编辑视图160由画面开发者作为源代码而制作，由于每个设备的不同由模板181或191(以及模板引擎171)吸收，因此，画面开发者不需要注意每个设备的不同。

<布局和组件>

图2为关于本实施方式中的各个设备的布局的不同的示例示出概要的图。作为布局，将画面整体区分为一个以上的区域，指出该区域的配置的图案，在图2的(a)中示出在平板终端的布局的示例，在图2的(b)中示出在智能手机的布局的示例。

在图2的示例中，示出选择“一览、明细型布局”作为布局180的情况，示出包括如下的布局：除了页眉区域(页眉区域401、410)以及页脚区域(页脚区域404、414)之外，一览显示多个项目的一览区域(一览区域402、412)、从其中选择特定的项目时显示其详细的内容的内容区域(内容区域403、413)。

如图所示，在图2的(a)的布局中，四个区域全部配置在一个画面内。另一方面，在图2的(b)的布局中示出，在一览区域412显示于左侧的画面的状态下，当从一览区域412中选择特定的项目时，切换至右侧的画面，取代一览区域412而用于显示选择的项目的内容区域413。同一布局180中的上述各个设备的不同，如上所述，由模板181(这种情况下为模板(平板用)181t以及模板(智能手机用)181s)规定，由组件视图170的模板引擎171反映于实际的画面。

这样，不仅在显示于画面上的部件或控件的单位中，而且在画面整体的布局(也包含伴随画面切换)的单位中，通过布局180以及模板181来吸收/隐藏各个设备的不同。由此，即使根据设备而具有伴随画面切换的布局的情况下，无需注意设备也能够开发编辑视图160，。

图3为关于本实施方式中的各个设备的布局的不同的其他示例示出概要的图。与图2同样地，在图3的(a)中示出在平板终端的布局的示例，在图3的(b)中示出在智能手机的布局的示例。在图3的示例中，示出选择“检索条件、结果显示型布局”作为布局180的情况，示出包括如下的布局：除了页眉区域(页眉区域401、411)以及页脚区域(页脚区域404、414)之外，显示输入、指定检索时的条件的部件等的检索条件区域(检索条件区域405、415)、基于该检索条件显示检索结果的检索结果区域(检索结果区域406、416)。

例如，如各区域的配置在图3的(a)和图2的(a)中不同一样，通过变更在编辑视图160中指定的布局180，从而由组件视图170的模板引擎171而能够自动地切换各区域的设计、外观。

图4为关于本实施方式中的各个设备的组件显示的不同的示例示出概要的图。与图2同样地，在图4的(a)中示出在平板终端的布局的示例，在图4的(b)中示出在智能手机的布局的示例，分别示出在图2的示例中示出的“一览、明细型布局”中使“菜单”的组件190显示于页眉区域401、411的情况。

如图所示，在图4的(a)的平板终端的布局中，在页眉区域401中横列显示四个菜单按钮。另一方面，在图4的(b)的智能手机的布局中示出，在左侧的画面中，在页眉区域411仅显示用于使菜单显示的图标，当点击该图标时切换至右侧的画面，页眉区域411扩展(页眉区域411’)，菜单按钮纵列显示于该区域。同一组件190中的上述各个设备的不同，与布局180的情况同样地，由模板191(这种情况下为模板(平板用)191t以及模板(智能手机用)191s)规定，由组件视图170的模板引擎171反映于实际的画面。

此外，本实施方式中的组件190不限于由一个画面部件或控件构成，如图所示，可以由多个部件或控件(在图4的示例中为四个菜单按钮)的集合或组合构成。

图5为关于本实施方式中的各个设备的组件显示的不同的其他示例示出概要的图。与图3同样地，在图5的(a)中示出在平板终端的布局的示例，在图5的(b)中示出在智能手机的布局的示例，分别示出在图3的示例中示出的“检索条件、结果显示型布局”中使“检索结果一览”的组件190显示于检索结果区域406、416的情况。如图所示，在图5的(a)的平板终端的布局中，在检索结果区域406中以表格形式显示检索结果一览。另一方面，在图5的(b)的智能手机的布局中，示出检索结果一览以列表形式纵列显示于切换的右侧的画面的检索结果区域416。

<处理的流程>

图6为关于在编辑视图160中的指定内容、与之伴随的画面显示时的处理的流程的示例示出概要的图。如上所述，画面开发者作为源代码制作进行以下处理的编辑视图160，其中，无需注意每个设备的不同而仅指定布局180及组件190进行配置、设定即可。最适合每个设备的画面显示，在组件视图170(以及模板引擎171)基于由模板181或191规定的内容执行时动态地进行。

在编辑视图160中，首先从预先制作的布局180的一览中取得用于画面显示的布局180(s01)。在该时间点，在设定于布局180的各区域中还没有配置应该显示的组件190。接着，从预先制作的组件190的一览之中，取得配置于在步骤s01中取得的布局180的一个以上的组件190(s02)。在该时间点，还没有进行任何应该显示于组件190的数据等的设定。

此后，对于在步骤s02中取得的各组件190，作为应该显示的数据，设定从模型150取得的数据(s03)。此外，通过模型150进行的数据的取得，通过经由控制器140的指示来执行。接着，以将设定数据的各组件190配置于由步骤s01取得的布局180中的适当区域的方式进行位置指定(s04)。然后，将指定各组件190的配置位置的布局180交至组件视图170而指示画面描绘(s05)。

此时，将有关客户端200的设备的种类的信息也一并交至组件视图170(或者，组件视图170自身从请求信息的内容取得)。有关设备的种类的信息，例如可以通过从来自客户端200的请求信息的用户代理(user-agent)页眉取得等公知的技术来取得。此外，在此的有关设备的种类的信息中，除了设备的种类之外，例如也包含os、web浏览器或其版本等的信息。

在组件视图170中，关于被交至的布局180及各组件190，分别取得对应于设备的种类的模板181及191，根据由模板规定的设计进行包含数据的画面描绘。例如，关于各组件190，取得对应于设备的种类(在图6的示例中为智能手机)的模板(智能手机用)191s，基于由其规定的设计来包含数据并对组件190进行画面描绘(在图6的示例中为检索结果的一览显示)。并且，关于各组件180，取得模板181s，基于由其规定的设计来描绘各区域，并且将画面描绘的各组件190配置于指定的区域的位置(在图6的示例中将检索结果的一览显示配置于检索结果区域416)。

如上所述，根据本发明的实施方式一即web服务器系统100，包括将画面部件组件化，并且由配置有组件190的一个以上的区域构成的布局180的图案。并且，各布局180及各组件190分别包括以进行最适合各个设备的画面输出的方式制作的模板181、191，web服务器系统100包括具备处理上述模板的模板引擎171的组件视图170。

因此，将画面的布局及组件部件化，通过在编辑视图160的源代码中调出它们，能够根据设备动态地进行最适合的画面显示。也就是说，画面开发者无需注意每个设备的不同就能够制作编辑视图160的源代码。进而，通过将控制布局180或组件190中的数据的处理或表现的功能和由模板181、191规定的设计(html或css(层叠样式表，cascadingstylesheets)等)进行分离，能够容易地将设计者的开发成果物作为画面部件而引入。

(实施方式二)

在上述实施方式一中，画面开发者能够通过从编辑视图160的源代码中调出部件化的组件190而进行画面开发。但是，为此需要预先制作、开发部件化的组件190并向画面开发者提供，在制作、开发组件190的作业中也追求高效率。组件190，由于最终与背景或其他的组件190等组合而根据布局180配置于画面上，因此，特别是在色彩、大小等的外观上需要实现与上述周边环境的匹配、调合并进行开发。

因此，作为本发明的实施方式二的开发支持系统，以能够实现与画面整体的外观的匹配或调合并且容易地开发画面开发者能够利用的组件190的方式提供组件开发功能。具体而言，通过如下方式实现：将如在显示画面整体的外观的背景图像上确认外观的匹配、调合并进行开发画面开发者能够利用的组件190那样的web应用，利用上述实施方式一中的web服务器系统100，作为在网络服务器系统100上工作的一个应用安装。

<系统构成>

图7为关于本发明的实施方式二即开发支持系统的构成例示出概要的图。本实施方式的开发支持系统101，如上所述，其为在实施方式一中以图1所示的web服务器系统100为基础而构成的开发环境，其为对于画面开发者所使用的pc等的开发者终端201，提供能够在显示画面整体的外观的背景图像上能够开发能够再利用的组件190的组件开发功能的系统。

关于开发支持系统101中的网络服务器程序110、语言处理系统120以及框架130与实施方式一的图1中所示的网络服务器系统100相同，因此，省略说明。

组件开发控制器141具有作为mvc模型中的控制器(c)的功能，在本实施方式中，接收来自开发者终端201上的未图示的web浏览器等的请求，经由后述的组件开发模型151，使用开发者终端201取得开发者所开发的组件190的源代码的文本信息。也可以具有源代码的保存或更新功能。并且，关于开发对象的组件190，对于后述的组件开发视图161以画面显示源代码的文本或执行时的外观的方式进行要求。

组件开发模型151，具有作为mvc模型中的模型(m)的功能，在本实施方式中，取得开发对象的组件190的信息，响应组件开发控制器141。为了实现它们，在本实施方式中，全部的组件190(实际上为记录有该组件190的源代码的文件)配置于规定的文件夹或路径(directory)。

组件开发视图161具有作为mvc模型中的视图(v)的功能，具有基于组件开发模型151的数据进行画面生成并显示的功能。也就是说，在本实施方式中，基于组件开发模型151取得的开发对象的组件190的信息，以能够编辑源代码的文本的方式显示，或与背景图像一并地将执行时的外观显示在画面上。

背景图像的显示由背景显示部162进行，组件190的源代码的文本显示以及执行时的外观的显示由开发区域显示部163进行。在组件190的执行时的外观的画面显示时，与实施方式一的情况同样地，模板引擎171通过调出以进行最适合各个设备的画面输出的方式制作的模板并对其进行处理来显示。

通过能够在显示于开发者终端201的画面中指定设备的种类，而能够使用对应于指定的设备的模板以及背景图像来切换组件190的画面显示。由此，能够在同一开发者终端201上对于各个设备动态地切换画面显示，从而确认组件190的外观等。

此外，在实施方式一中，根据显示包含组件190的画面的客户端200的设备，使用布局180而使画面显示最适合化，在本实施方式中，由于使开发中的未完成的组件190显示，因此，在使组件190的外观显示时不进行利用布局180的画面的构成，而使其显示于固定的背景图像上。从而，在图7的构成例中，形成不具有实施方式一的图1所示的构成例中的布局180的一览的构成。另一方面，并不限于此，也可以在开发对象的组件190的外观的确认时，与实施方式一同样地，使用布局180进行画面上的配置和显示。

并且，在本实施方式中，以与作为执行环境的实施方式一的图1所示的web服务器系统100分开独立地安装web应用的开发环境即开发支持系统101的情况为例，也能够形成将它们作为同一服务器系统而使其共存的构成。并且，也能够在开发者终端201上构筑该服务器系统，构成独立的开发环境。

<画面例>

图8～图10为关于由开发支持系统101显示于开发者终端201的画面上的组件190的开发画面的示例示出概要的图。在开发画面中，能够在画面上部选择开发对象的设备(在图8的示例中选择“pc”)。开发支持系统101，与开发者终端201的实际的设备种类无关地，在此，通过形成对应于选择的设备的显示形式，仿真设备。为了能够实现上述动作，例如，在从开发者终端201向开发支持系统101发送开发画面显示的请求时，进行通过在此选择的设备来更新请求所包含的特定设备的信息等的对应。

图8所示的示例为初始画面，显示背景图像164和与此重叠作为组件开发区域165的白底的框。在图8的示例中，省略了背景图像164的详细内容，通过阴影框表示关于帧、控件、部件等的显示单位或分隔的示例。此外，在本实施方式中，背景图像164例如可以使用将开发对象的网站的主页等截屏的静态的图像数据，但不限于此。例如，也可以通过与实施方式一中说明的同样的构成，基于布局180配置各组件190，使用根据设备的种类动态地进行画面描绘的画面。

开发者能够通过鼠标等对于组件开发区域165进行尺寸变更，或通过拖拽与拖放(drag&drop)使其移动至适当的位置。在此设定的尺寸，可以以成为开发的组件190实际显示时的尺寸的方式自动地设定于源代码。此外，关于位置，在实际使用该组件190时，如在实施方式一中所示，通过布局180规定配置位置。

组件开发区域165在初始状态的开发模式下以能够文本编辑的方式构成，开发者在设定了组件开发区域165的尺寸及位置之后，如图9的示例所示，在组件开发区域165内直接编辑源代码。编辑的源代码例如通过经由未图示的保存按钮等的来自开发者的指示/操作，能够在服务器端即开发支持系统101上作为组件190的源代码直接保存。

为了基于开发的源代码确认组件190的外观等，基于来自开发者的指示/操作，组件开发区域165从开发模式被切换为确认模式。在确认模式下，组件开发区域165调出对象的组件190，如图10的示例所示，能够经由模板引擎171使执行时的外观实际显示在画面上。开发者，关于组件190的动作或外观确认了与背景图像164的匹配、调合之后，返回图9的画面所示的开发模式，能够再次进行源代码的修正等。

此外，作为源代码的编辑/保存或版本管理等的开发功能，例如也可以使用eclipse等的一般能够使用的外部的开发环境。这种情况下，开发者既可以在eclipse上直接进行源代码的编辑或保存等，也可以将组件开发区域165作为外部编辑区在此进行编辑等。

图11为关于通过开发支持系统101在开发者终端201上进行画面开发的情况下的处理的流程的示例示出概要的图。在此，示出在图8～图10的画面例中示出的处理的流程的概略，首先，开发支持系统101的组件开发视图161中的背景显示部162使背景图像164显示于开发者终端201的未图示的web浏览器上。背景图像164的数据，例如可以预先注册于开发支持系统101，也可以由开发者随时指定。进而，组件开发视图161中的开发区域显示部163将白底的组件开发区域165与背景图像重叠显示而形成开发模式。

此外，组件开发区域165，例如作为通过iframe标签的内联框架，能够在开发者终端201上相对于显示该开发画面的未图示的web浏览器作为插入的浏览器要素而形成。并且，在上述的示例中，作为新开发组件190的区域，使白底的组件开发区域165显示，也可以根据来自开发者的指示为了修正而调出已有的组件190并使其源代码显示。

如图8所示，开发者在设定组件开发区域165的尺寸及位置上，如图9所示，制作源代码并保存。组件190的源代码保存于开发支持系统101上的规定的文件夹或路径。并且，当通过来自开发者的指示等从开发模式切换至确认模式时，组件开发视图161调出对象的组件190，通过模板引擎171形成外观，如图10所示，使其显示在组件开发区域165上。

作为源代码的开发环境，在使用eclipse等的外部的开发环境的情况下，例如，组件开发区域165总是成为确认模式，能够通过由组件开发视图161的开发区域显示部163监视在eclipse上进行的源代码的更新/保存等，来调出被更新的对象的组件190，使外观动态地显示于组件开发区域165。

如以上所说明的，根据本发明的实施方式二即开发支持系统101，开发者在于开发者终端201上重叠在背景图像164上显示的组件开发区域165上，能够随时切换组件190的源代码的开发和通过执行的外观显示而进行。由此，适当确认画面整体上的外观的匹配/调合等，并且能够高效地进行组件190的开发。

以上基于实施方式具体地说明了由本发明人完成的发明，本发明不限于上述实施方式，在不脱离其主旨的范围内能够进行各种变更，这一点自不必说。例如，上述实施方式为了简明易懂地说明本发明而进行了详细的说明，但不必限于包括所说明的全部的构成。并且，能够将某个实施方式的构成的一部分置换为其他实施方式的构成，并且，也可以将其他实施方式的构成添加至某个实施方式的构成中。并且，关于各实施方式的构成的一部分，能够进行其他构成的追加/删除/置换。

产生上的可利用性

本发明能够应用于支持进行对应于多设备的画面显示的web应用的开发的开发支持系统。

附图标记说明

100…web服务器系统、101…开发支持系统、110…web服务器程序、120…语言处理系统、130…框架、140…控制器、141…组件开发控制器、150…模型、151…组件开发模型、160…编辑视图、161…组件开发视图、162…背景显示部、163…开发区域显示部、164…背景图像、165…组件开发区域、170…组件视图、171…模板引擎、180…布局、181p…模板(pc用)、181s…模板(智能手机用)、181t…模板(平板用)、190…组件、191p…模板(pc用)、191s…模板(智能手机用)、191t…模板(平板用)、200…客户端、201…开发者终端、300…bl服务器、401…页眉区域、402…一览区域、403…内容区域、404…页脚区域、405…检索条件区域、406…检索结果区域、411、411’…页眉区域、412…一览区域、413…内容区域、414…页脚区域、415…检索条件区域、416…检索结果区域。