本發(fā)明涉及一種web應(yīng)用的開發(fā)技術(shù)，特別是涉及一種有效應(yīng)用于開發(fā)支持系統(tǒng)的技術(shù)，該開發(fā)支持系統(tǒng)支持進(jìn)行對(duì)應(yīng)于多設(shè)備的畫面顯示的web應(yīng)用的開發(fā)。

背景技術(shù)：

近年來，例如平板終端或智能手機(jī)等的所謂的智能設(shè)備的業(yè)務(wù)應(yīng)用系統(tǒng)化，與企業(yè)的骨干系統(tǒng)聯(lián)合的大/中規(guī)模的系統(tǒng)的開發(fā)案件也有增加的傾向。在這種狀況下，用戶企業(yè)的要件變得復(fù)雜，對(duì)于it供應(yīng)商等的開發(fā)者來說，開發(fā)難度也變大，因此，實(shí)現(xiàn)開發(fā)的高效化、提高生產(chǎn)效率是重要的。

關(guān)于這一點(diǎn)，例如，推進(jìn)源代碼等的開發(fā)成果物中的共用部分、通用部分的部件化、開發(fā)時(shí)的部件的再利用是有效的。并且，通過進(jìn)行多設(shè)備或多平臺(tái)(以下，有時(shí)簡(jiǎn)單地統(tǒng)稱為“多設(shè)備”)對(duì)應(yīng)，使每個(gè)設(shè)備或平臺(tái)的單獨(dú)開發(fā)部分減少也是有效的。

有關(guān)對(duì)應(yīng)于多設(shè)備的能夠再利用的部件化的技術(shù)，例如，在特開2013-235387號(hào)公報(bào)(專利文獻(xiàn)1)中記載了，在根據(jù)設(shè)備不變更源代碼的情況下，動(dòng)態(tài)地變更包含用于顯示輸入輸出項(xiàng)目的控件(control)的外觀或?qū)傩?、控制處理等的用戶界面的web服務(wù)器系統(tǒng)。該系統(tǒng)例如包括：設(shè)備取得部，基于來自客戶端的要求，取得有關(guān)客戶端的設(shè)備種類的信息；響應(yīng)處理部，對(duì)于源代碼所包含的部件對(duì)象，生成對(duì)應(yīng)于由設(shè)備取得部取得的客戶端的設(shè)備的種類的、安裝于部分對(duì)象的繼承源的上級(jí)類(class)的、根據(jù)顯示控件時(shí)的調(diào)整內(nèi)容而使對(duì)應(yīng)的控件顯示于客戶端的畫面上的html數(shù)據(jù)。

現(xiàn)有技術(shù)文獻(xiàn)

專利文獻(xiàn)

專利文獻(xiàn)1：特開2013-235387號(hào)公報(bào)

技術(shù)實(shí)現(xiàn)要素：

發(fā)明所要解決的問題

例如，通過使用專利文獻(xiàn)1中所記載的技術(shù)，在web應(yīng)用開發(fā)時(shí)，能夠再利用部件(部件對(duì)象)，并且能夠通過一個(gè)源代碼進(jìn)行多設(shè)備對(duì)應(yīng)。

但是，實(shí)際上，雖說是通過一個(gè)源代碼的多設(shè)備對(duì)應(yīng)，例如，在源代碼中，有時(shí)也需要通過if語(yǔ)句等對(duì)于每個(gè)設(shè)備將處理分開寫入。并且，在新追加設(shè)備的情況下，必須向源代碼追加處理等，對(duì)于畫面開發(fā)者來說，難以通過一個(gè)源代碼進(jìn)行完全的多設(shè)備對(duì)應(yīng)。

并且，作為多設(shè)備對(duì)應(yīng)，例如，即使在能夠根據(jù)設(shè)備的畫面尺寸切換用戶界面的情況下，實(shí)際上也僅能夠變更在某個(gè)畫面中顯示的控件或部件等的大小或顯示形式、配置等，難以進(jìn)行伴隨著多個(gè)畫面切換的變更。

例如，與pc(個(gè)人電腦，personalcomputer)或平板終端相比，智能手機(jī)的畫面尺寸小、能夠顯示的信息量存在限制。因此，例如，在菜單等的一覽顯示中，與在pc或平板終端中總是以全部展開的狀態(tài)在一個(gè)畫面中一覽顯示相對(duì)比，在智能手機(jī)中，有時(shí)采用如下界面：通常時(shí)僅顯示指示菜單顯示的圖標(biāo)等，當(dāng)經(jīng)由該圖標(biāo)等指示菜單顯示時(shí)，將菜單一覽作為另一畫面顯示。在現(xiàn)有技術(shù)中，在上述情況下，難以用一個(gè)源代碼對(duì)應(yīng)于各個(gè)模式。因此，在使用能夠再利用的部件進(jìn)行畫面開發(fā)的情況下，希望一種即使在設(shè)備不同的情況下，也能夠通過一個(gè)源代碼進(jìn)行多設(shè)備對(duì)應(yīng)的結(jié)構(gòu)。

另一方面，為了實(shí)現(xiàn)如上述那樣的結(jié)構(gòu)，需要向畫面開發(fā)者提供能夠再利用的部件，制作、開發(fā)這種部件中也追求高效率。能夠再利用的部件，由于最終與背景或其他的控件、部件等組合而配置于畫面上，因此，特別是在外觀上需要與它們的匹配、調(diào)和。關(guān)于這一點(diǎn)，在單獨(dú)地開發(fā)能夠再利用的部件的情況下，將重復(fù)進(jìn)行制作→執(zhí)行(測(cè)試畫面上的顯示)→外觀的確認(rèn)→外觀的再調(diào)整這種反復(fù)試驗(yàn)，包括測(cè)試環(huán)境的準(zhǔn)備等在內(nèi)，從而使作業(yè)效率大幅降低。

因此，本發(fā)明的目的在于提供一種開發(fā)支持系統(tǒng)，在通過再利用部件化的要素而能夠進(jìn)行多設(shè)備對(duì)應(yīng)的web應(yīng)用所涉及的畫面開發(fā)的結(jié)構(gòu)中，實(shí)現(xiàn)與畫面整體的外觀的匹配和調(diào)和，并且能夠容易地開發(fā)能夠再利用的部件。

本發(fā)明的前述以及其他的目的及新的特征通過本說明書的記載以及附圖得以明確。

解決問題的技術(shù)方案

在本申請(qǐng)公開的發(fā)明中，若簡(jiǎn)單地說明代表性的內(nèi)容的概要，則如下所示。

根據(jù)本發(fā)明的代表性實(shí)施方式的開發(fā)支持系統(tǒng)，其支持web應(yīng)用的畫面開發(fā)，所述web應(yīng)用接收來自客戶端的請(qǐng)求，并響應(yīng)與所述客戶端設(shè)備的種類相應(yīng)的處理結(jié)果畫面，所述開發(fā)支持系統(tǒng)具有以下的特征。

也就是說，開發(fā)支持系統(tǒng)，包括：組件開發(fā)控制器，具有由一個(gè)以上的畫面部件的組合構(gòu)成的模板，所述模板按照所述設(shè)備的每個(gè)種類規(guī)定各個(gè)所述畫面部件被畫面顯示時(shí)的外觀，所述組件開發(fā)控制器對(duì)于能夠再用于所述web應(yīng)用的畫面開發(fā)的組件，經(jīng)由開發(fā)者終端接收該開發(fā)所涉及的要求；組件開發(fā)模型，基于來自所述組件開發(fā)控制器的指示，取得包含關(guān)于所述組件的源代碼的信息；組件開發(fā)視圖，基于來自所述組件開發(fā)控制器的指示，使與所述開發(fā)者終端指定的設(shè)備種類對(duì)應(yīng)的預(yù)定背景圖像顯示于所述開發(fā)者終端，并且使組件開發(fā)區(qū)域與所述背景圖像重疊地顯示于所述開發(fā)者終端，所述組件開發(fā)區(qū)域用于顯示開發(fā)對(duì)象的所述組件的外觀。

并且，在編輯開發(fā)對(duì)象的所述組件的源代碼的情況下，基于該源代碼，使開發(fā)對(duì)象的所述組件根據(jù)由與所述開發(fā)者終端指定的設(shè)備的種類對(duì)應(yīng)的所述模板所規(guī)定的外觀而顯示于所述組件開發(fā)區(qū)域。

發(fā)明效果

在本申請(qǐng)公開的發(fā)明中，如果簡(jiǎn)單地說明通過代表性的內(nèi)容而取得的效果，則如下所示。

也就是說，根據(jù)本發(fā)明的代表性的實(shí)施方式，在通過再利用部件化的要素而能夠進(jìn)行多設(shè)備對(duì)應(yīng)的web應(yīng)用所涉及的畫面開發(fā)的結(jié)構(gòu)中，實(shí)現(xiàn)與畫面整體的外觀的匹配和調(diào)和，并且能夠容易地開發(fā)能夠再利用的部件。

附圖說明

圖1為關(guān)于本發(fā)明的實(shí)施方式一即web服務(wù)器系統(tǒng)的構(gòu)成例示出概要的圖。

圖2的(a)、(b)為關(guān)于本發(fā)明的實(shí)施方式一中的各個(gè)設(shè)備的布局的不同的示例示出概要的圖。

圖3的(a)、(b)為關(guān)于本發(fā)明的實(shí)施方式一中的各個(gè)設(shè)備的布局的不同的其他示例示出概要的圖。

圖4的(a)、(b)為關(guān)于本發(fā)明的實(shí)施方式一中的各個(gè)設(shè)備的組件顯示的不同的示例示出概要的圖。

圖5的(a)、(b)為關(guān)于本發(fā)明的實(shí)施方式一中的各個(gè)設(shè)備的組件顯示的不同的其他示例示出概要的圖。

圖6為關(guān)于在本發(fā)明的實(shí)施方式一中的編輯視圖中的指定內(nèi)容、與之伴隨的畫面顯示時(shí)的處理的流程的示例示出概要的圖。

圖7為關(guān)于本發(fā)明的實(shí)施方式二即開發(fā)支持系統(tǒng)的構(gòu)成例示出概要的圖。

圖8為關(guān)于本發(fā)明的實(shí)施方式二中的組件的開發(fā)畫面的示例示出概要的圖。

圖9為關(guān)于本發(fā)明的實(shí)施方式二中的組件的開發(fā)畫面的示例示出概要的圖。

圖10為關(guān)于本發(fā)明的實(shí)施方式二中的組件的開發(fā)畫面的示例示出概要的圖。

圖11為關(guān)于進(jìn)行本發(fā)明的實(shí)施方式二中的畫面開發(fā)的情況下的處理的流程的示例示出概要的圖。

具體實(shí)施方式

以下，根據(jù)附圖，對(duì)本發(fā)明的實(shí)施方式進(jìn)行詳細(xì)說明。此外，在用于說明實(shí)施方式的全圖中，對(duì)于同一部分原則上采用相同的附圖標(biāo)記，省略其重復(fù)說明。

(實(shí)施方式一)

<系統(tǒng)構(gòu)成>

圖1為關(guān)于本發(fā)明的實(shí)施方式一即web服務(wù)器系統(tǒng)的構(gòu)成例示出概要的圖。本發(fā)明的實(shí)施方式一即web服務(wù)器系統(tǒng)100，包括將畫面部分組件化而形成的組件190的一覽、以及作為由配置有組件190的一個(gè)以上的畫面區(qū)域構(gòu)成的布局的圖案的布局180的一覽。并且，各布局180及各組件190分別包括以進(jìn)行最適合各個(gè)設(shè)備的畫面輸出的方式制作的模板，web服務(wù)器系統(tǒng)100基于此自動(dòng)地進(jìn)行最適合每個(gè)設(shè)備的畫面輸出。

web服務(wù)器系統(tǒng)100例如為由構(gòu)筑于服務(wù)器設(shè)備或云計(jì)算服務(wù)之上的虛擬服務(wù)器構(gòu)成的服務(wù)器系統(tǒng)，例如作為未圖示的os(操作系統(tǒng)，operatingsystem)，或者在web服務(wù)器程序110、語(yǔ)言處理系統(tǒng)120、框架130等的中間件或基盤等上工作的或利用它們的軟件，包括：基于mvc(模型視圖控制器，modelviewcontroller)模型開發(fā)、安裝的控制器140、模型150、編輯視圖160、組件視圖170、布局(layout)180及組件190等的各部(模塊)。

作為web服務(wù)器程序110例如能夠適當(dāng)使用apache(注冊(cè)商標(biāo))http服務(wù)器等的、在web服務(wù)器中通常使用的程序。并且，作為在web服務(wù)器程序110上工作的應(yīng)用系統(tǒng)的基盤即語(yǔ)言處理系統(tǒng)120及框架130，例如能夠適當(dāng)使用用于制作動(dòng)態(tài)網(wǎng)頁(yè)而使用的php等的腳本語(yǔ)言以及通過php安裝的zend框架(zendframework)等。

控制器140具有作為mvc模型中的控制器(c)的功能，接收來自客戶端200上的未圖示的web瀏覽器等的請(qǐng)求、對(duì)于模型150進(jìn)行數(shù)據(jù)的操作要求而取得數(shù)據(jù)，或?qū)τ诰庉嬕晥D160要求畫面顯示。模型150具有作為mvc模型中的模型(m)的功能，具有執(zhí)行事務(wù)邏輯、進(jìn)行數(shù)據(jù)的操作或取得的功能。事務(wù)邏輯(bl)例如可以對(duì)于具有數(shù)據(jù)庫(kù)等的其他bl服務(wù)器300進(jìn)行要求而使其執(zhí)行。

編輯視圖160及組件視圖170具有作為mvc模型中的視圖(v)的功能，具有基于模型150的數(shù)據(jù)進(jìn)行畫面生成并顯示的功能。編輯視圖160具有進(jìn)行畫面的構(gòu)成的功能，如后所述，指定畫面中使用的布局180，并且分別調(diào)出配置于由布局180顯示的區(qū)域的組件190而進(jìn)行設(shè)定。組件視圖170，基于該布局180及組件190的信息進(jìn)行渲染并制作html(超文本鏈接標(biāo)識(shí)語(yǔ)言，hypertextmarkuplanguage)數(shù)據(jù)，并向客戶端200輸出。

此時(shí)，組件視圖170，如后所述，根據(jù)客戶端200的設(shè)備通過模板引擎171處理對(duì)于布局180及組件190設(shè)定的用于畫面顯示的web模板，進(jìn)行最適合對(duì)象的設(shè)備的畫面輸出。

如圖所示，web模板針對(duì)各個(gè)客戶端200的種類(pc、智能手機(jī)(智能手機(jī))、平板終端)，作為對(duì)于布局180的模板分別包括：模板(pc用)181p、模板(智能手機(jī)用)181s、模板(平板用)181t(有時(shí)將它們總稱而記載為模板181)；以及作為對(duì)于組件190的模板分別包括：模板(pc用)191p、模板(智能手機(jī)用)191s、模板(平板用)191t(有時(shí)將它們總稱而記載為模板191)。在圖1的示例中，針對(duì)pc、智能手機(jī)以及平板終端而分別準(zhǔn)備了模板181及191，但不限于此，也可以包括其他設(shè)備，或者即使為相同種類而畫面尺寸不同或os或web瀏覽器不同的設(shè)備。

模板引擎171具有基于由模板181及191等的web模板規(guī)定的設(shè)計(jì)或外觀的內(nèi)容而制作實(shí)際的畫面的功能。此外，在模板引擎171中例如能夠適當(dāng)使用主要在php中使用的smarty等的一般的模板引擎。

控制器140或組件視圖170作為web服務(wù)器系統(tǒng)100而能夠通用地提供。并且，作為畫面部件的布局180或組件190(也包含模板181及191)，可以再利用在其他開發(fā)案件中制作的，或可以使用在對(duì)象的開發(fā)案件中預(yù)先制作的。并且，關(guān)于模型150，也可以使用在對(duì)象的開發(fā)案件等中額外制作的模型。另一方面，編輯視圖160由畫面開發(fā)者作為源代碼而制作，由于每個(gè)設(shè)備的不同由模板181或191(以及模板引擎171)吸收，因此，畫面開發(fā)者不需要注意每個(gè)設(shè)備的不同。

<布局和組件>

圖2為關(guān)于本實(shí)施方式中的各個(gè)設(shè)備的布局的不同的示例示出概要的圖。作為布局，將畫面整體區(qū)分為一個(gè)以上的區(qū)域，指出該區(qū)域的配置的圖案，在圖2的(a)中示出在平板終端的布局的示例，在圖2的(b)中示出在智能手機(jī)的布局的示例。

在圖2的示例中，示出選擇“一覽、明細(xì)型布局”作為布局180的情況，示出包括如下的布局：除了頁(yè)眉區(qū)域(頁(yè)眉區(qū)域401、410)以及頁(yè)腳區(qū)域(頁(yè)腳區(qū)域404、414)之外，一覽顯示多個(gè)項(xiàng)目的一覽區(qū)域(一覽區(qū)域402、412)、從其中選擇特定的項(xiàng)目時(shí)顯示其詳細(xì)的內(nèi)容的內(nèi)容區(qū)域(內(nèi)容區(qū)域403、413)。

如圖所示，在圖2的(a)的布局中，四個(gè)區(qū)域全部配置在一個(gè)畫面內(nèi)。另一方面，在圖2的(b)的布局中示出，在一覽區(qū)域412顯示于左側(cè)的畫面的狀態(tài)下，當(dāng)從一覽區(qū)域412中選擇特定的項(xiàng)目時(shí)，切換至右側(cè)的畫面，取代一覽區(qū)域412而用于顯示選擇的項(xiàng)目的內(nèi)容區(qū)域413。同一布局180中的上述各個(gè)設(shè)備的不同，如上所述，由模板181(這種情況下為模板(平板用)181t以及模板(智能手機(jī)用)181s)規(guī)定，由組件視圖170的模板引擎171反映于實(shí)際的畫面。

這樣，不僅在顯示于畫面上的部件或控件的單位中，而且在畫面整體的布局(也包含伴隨畫面切換)的單位中，通過布局180以及模板181來吸收/隱藏各個(gè)設(shè)備的不同。由此，即使根據(jù)設(shè)備而具有伴隨畫面切換的布局的情況下，無(wú)需注意設(shè)備也能夠開發(fā)編輯視圖160，。

圖3為關(guān)于本實(shí)施方式中的各個(gè)設(shè)備的布局的不同的其他示例示出概要的圖。與圖2同樣地，在圖3的(a)中示出在平板終端的布局的示例，在圖3的(b)中示出在智能手機(jī)的布局的示例。在圖3的示例中，示出選擇“檢索條件、結(jié)果顯示型布局”作為布局180的情況，示出包括如下的布局：除了頁(yè)眉區(qū)域(頁(yè)眉區(qū)域401、411)以及頁(yè)腳區(qū)域(頁(yè)腳區(qū)域404、414)之外，顯示輸入、指定檢索時(shí)的條件的部件等的檢索條件區(qū)域(檢索條件區(qū)域405、415)、基于該檢索條件顯示檢索結(jié)果的檢索結(jié)果區(qū)域(檢索結(jié)果區(qū)域406、416)。

例如，如各區(qū)域的配置在圖3的(a)和圖2的(a)中不同一樣，通過變更在編輯視圖160中指定的布局180，從而由組件視圖170的模板引擎171而能夠自動(dòng)地切換各區(qū)域的設(shè)計(jì)、外觀。

圖4為關(guān)于本實(shí)施方式中的各個(gè)設(shè)備的組件顯示的不同的示例示出概要的圖。與圖2同樣地，在圖4的(a)中示出在平板終端的布局的示例，在圖4的(b)中示出在智能手機(jī)的布局的示例，分別示出在圖2的示例中示出的“一覽、明細(xì)型布局”中使“菜單”的組件190顯示于頁(yè)眉區(qū)域401、411的情況。

如圖所示，在圖4的(a)的平板終端的布局中，在頁(yè)眉區(qū)域401中橫列顯示四個(gè)菜單按鈕。另一方面，在圖4的(b)的智能手機(jī)的布局中示出，在左側(cè)的畫面中，在頁(yè)眉區(qū)域411僅顯示用于使菜單顯示的圖標(biāo)，當(dāng)點(diǎn)擊該圖標(biāo)時(shí)切換至右側(cè)的畫面，頁(yè)眉區(qū)域411擴(kuò)展(頁(yè)眉區(qū)域411’)，菜單按鈕縱列顯示于該區(qū)域。同一組件190中的上述各個(gè)設(shè)備的不同，與布局180的情況同樣地，由模板191(這種情況下為模板(平板用)191t以及模板(智能手機(jī)用)191s)規(guī)定，由組件視圖170的模板引擎171反映于實(shí)際的畫面。

此外，本實(shí)施方式中的組件190不限于由一個(gè)畫面部件或控件構(gòu)成，如圖所示，可以由多個(gè)部件或控件(在圖4的示例中為四個(gè)菜單按鈕)的集合或組合構(gòu)成。

圖5為關(guān)于本實(shí)施方式中的各個(gè)設(shè)備的組件顯示的不同的其他示例示出概要的圖。與圖3同樣地，在圖5的(a)中示出在平板終端的布局的示例，在圖5的(b)中示出在智能手機(jī)的布局的示例，分別示出在圖3的示例中示出的“檢索條件、結(jié)果顯示型布局”中使“檢索結(jié)果一覽”的組件190顯示于檢索結(jié)果區(qū)域406、416的情況。如圖所示，在圖5的(a)的平板終端的布局中，在檢索結(jié)果區(qū)域406中以表格形式顯示檢索結(jié)果一覽。另一方面，在圖5的(b)的智能手機(jī)的布局中，示出檢索結(jié)果一覽以列表形式縱列顯示于切換的右側(cè)的畫面的檢索結(jié)果區(qū)域416。

<處理的流程>

圖6為關(guān)于在編輯視圖160中的指定內(nèi)容、與之伴隨的畫面顯示時(shí)的處理的流程的示例示出概要的圖。如上所述，畫面開發(fā)者作為源代碼制作進(jìn)行以下處理的編輯視圖160，其中，無(wú)需注意每個(gè)設(shè)備的不同而僅指定布局180及組件190進(jìn)行配置、設(shè)定即可。最適合每個(gè)設(shè)備的畫面顯示，在組件視圖170(以及模板引擎171)基于由模板181或191規(guī)定的內(nèi)容執(zhí)行時(shí)動(dòng)態(tài)地進(jìn)行。

在編輯視圖160中，首先從預(yù)先制作的布局180的一覽中取得用于畫面顯示的布局180(s01)。在該時(shí)間點(diǎn)，在設(shè)定于布局180的各區(qū)域中還沒有配置應(yīng)該顯示的組件190。接著，從預(yù)先制作的組件190的一覽之中，取得配置于在步驟s01中取得的布局180的一個(gè)以上的組件190(s02)。在該時(shí)間點(diǎn)，還沒有進(jìn)行任何應(yīng)該顯示于組件190的數(shù)據(jù)等的設(shè)定。

此后，對(duì)于在步驟s02中取得的各組件190，作為應(yīng)該顯示的數(shù)據(jù)，設(shè)定從模型150取得的數(shù)據(jù)(s03)。此外，通過模型150進(jìn)行的數(shù)據(jù)的取得，通過經(jīng)由控制器140的指示來執(zhí)行。接著，以將設(shè)定數(shù)據(jù)的各組件190配置于由步驟s01取得的布局180中的適當(dāng)區(qū)域的方式進(jìn)行位置指定(s04)。然后，將指定各組件190的配置位置的布局180交至組件視圖170而指示畫面描繪(s05)。

此時(shí)，將有關(guān)客戶端200的設(shè)備的種類的信息也一并交至組件視圖170(或者，組件視圖170自身從請(qǐng)求信息的內(nèi)容取得)。有關(guān)設(shè)備的種類的信息，例如可以通過從來自客戶端200的請(qǐng)求信息的用戶代理(user-agent)頁(yè)眉取得等公知的技術(shù)來取得。此外，在此的有關(guān)設(shè)備的種類的信息中，除了設(shè)備的種類之外，例如也包含os、web瀏覽器或其版本等的信息。

在組件視圖170中，關(guān)于被交至的布局180及各組件190，分別取得對(duì)應(yīng)于設(shè)備的種類的模板181及191，根據(jù)由模板規(guī)定的設(shè)計(jì)進(jìn)行包含數(shù)據(jù)的畫面描繪。例如，關(guān)于各組件190，取得對(duì)應(yīng)于設(shè)備的種類(在圖6的示例中為智能手機(jī))的模板(智能手機(jī)用)191s，基于由其規(guī)定的設(shè)計(jì)來包含數(shù)據(jù)并對(duì)組件190進(jìn)行畫面描繪(在圖6的示例中為檢索結(jié)果的一覽顯示)。并且，關(guān)于各組件180，取得模板181s，基于由其規(guī)定的設(shè)計(jì)來描繪各區(qū)域，并且將畫面描繪的各組件190配置于指定的區(qū)域的位置(在圖6的示例中將檢索結(jié)果的一覽顯示配置于檢索結(jié)果區(qū)域416)。

如上所述，根據(jù)本發(fā)明的實(shí)施方式一即web服務(wù)器系統(tǒng)100，包括將畫面部件組件化，并且由配置有組件190的一個(gè)以上的區(qū)域構(gòu)成的布局180的圖案。并且，各布局180及各組件190分別包括以進(jìn)行最適合各個(gè)設(shè)備的畫面輸出的方式制作的模板181、191，web服務(wù)器系統(tǒng)100包括具備處理上述模板的模板引擎171的組件視圖170。

因此，將畫面的布局及組件部件化，通過在編輯視圖160的源代碼中調(diào)出它們，能夠根據(jù)設(shè)備動(dòng)態(tài)地進(jìn)行最適合的畫面顯示。也就是說，畫面開發(fā)者無(wú)需注意每個(gè)設(shè)備的不同就能夠制作編輯視圖160的源代碼。進(jìn)而，通過將控制布局180或組件190中的數(shù)據(jù)的處理或表現(xiàn)的功能和由模板181、191規(guī)定的設(shè)計(jì)(html或css(層疊樣式表，cascadingstylesheets)等)進(jìn)行分離，能夠容易地將設(shè)計(jì)者的開發(fā)成果物作為畫面部件而引入。

(實(shí)施方式二)

在上述實(shí)施方式一中，畫面開發(fā)者能夠通過從編輯視圖160的源代碼中調(diào)出部件化的組件190而進(jìn)行畫面開發(fā)。但是，為此需要預(yù)先制作、開發(fā)部件化的組件190并向畫面開發(fā)者提供，在制作、開發(fā)組件190的作業(yè)中也追求高效率。組件190，由于最終與背景或其他的組件190等組合而根據(jù)布局180配置于畫面上，因此，特別是在色彩、大小等的外觀上需要實(shí)現(xiàn)與上述周邊環(huán)境的匹配、調(diào)合并進(jìn)行開發(fā)。

因此，作為本發(fā)明的實(shí)施方式二的開發(fā)支持系統(tǒng)，以能夠?qū)崿F(xiàn)與畫面整體的外觀的匹配或調(diào)合并且容易地開發(fā)畫面開發(fā)者能夠利用的組件190的方式提供組件開發(fā)功能。具體而言，通過如下方式實(shí)現(xiàn)：將如在顯示畫面整體的外觀的背景圖像上確認(rèn)外觀的匹配、調(diào)合并進(jìn)行開發(fā)畫面開發(fā)者能夠利用的組件190那樣的web應(yīng)用，利用上述實(shí)施方式一中的web服務(wù)器系統(tǒng)100，作為在網(wǎng)絡(luò)服務(wù)器系統(tǒng)100上工作的一個(gè)應(yīng)用安裝。

<系統(tǒng)構(gòu)成>

圖7為關(guān)于本發(fā)明的實(shí)施方式二即開發(fā)支持系統(tǒng)的構(gòu)成例示出概要的圖。本實(shí)施方式的開發(fā)支持系統(tǒng)101，如上所述，其為在實(shí)施方式一中以圖1所示的web服務(wù)器系統(tǒng)100為基礎(chǔ)而構(gòu)成的開發(fā)環(huán)境，其為對(duì)于畫面開發(fā)者所使用的pc等的開發(fā)者終端201，提供能夠在顯示畫面整體的外觀的背景圖像上能夠開發(fā)能夠再利用的組件190的組件開發(fā)功能的系統(tǒng)。

關(guān)于開發(fā)支持系統(tǒng)101中的網(wǎng)絡(luò)服務(wù)器程序110、語(yǔ)言處理系統(tǒng)120以及框架130與實(shí)施方式一的圖1中所示的網(wǎng)絡(luò)服務(wù)器系統(tǒng)100相同，因此，省略說明。

組件開發(fā)控制器141具有作為mvc模型中的控制器(c)的功能，在本實(shí)施方式中，接收來自開發(fā)者終端201上的未圖示的web瀏覽器等的請(qǐng)求，經(jīng)由后述的組件開發(fā)模型151，使用開發(fā)者終端201取得開發(fā)者所開發(fā)的組件190的源代碼的文本信息。也可以具有源代碼的保存或更新功能。并且，關(guān)于開發(fā)對(duì)象的組件190，對(duì)于后述的組件開發(fā)視圖161以畫面顯示源代碼的文本或執(zhí)行時(shí)的外觀的方式進(jìn)行要求。

組件開發(fā)模型151，具有作為mvc模型中的模型(m)的功能，在本實(shí)施方式中，取得開發(fā)對(duì)象的組件190的信息，響應(yīng)組件開發(fā)控制器141。為了實(shí)現(xiàn)它們，在本實(shí)施方式中，全部的組件190(實(shí)際上為記錄有該組件190的源代碼的文件)配置于規(guī)定的文件夾或路徑(directory)。

組件開發(fā)視圖161具有作為mvc模型中的視圖(v)的功能，具有基于組件開發(fā)模型151的數(shù)據(jù)進(jìn)行畫面生成并顯示的功能。也就是說，在本實(shí)施方式中，基于組件開發(fā)模型151取得的開發(fā)對(duì)象的組件190的信息，以能夠編輯源代碼的文本的方式顯示，或與背景圖像一并地將執(zhí)行時(shí)的外觀顯示在畫面上。

背景圖像的顯示由背景顯示部162進(jìn)行，組件190的源代碼的文本顯示以及執(zhí)行時(shí)的外觀的顯示由開發(fā)區(qū)域顯示部163進(jìn)行。在組件190的執(zhí)行時(shí)的外觀的畫面顯示時(shí)，與實(shí)施方式一的情況同樣地，模板引擎171通過調(diào)出以進(jìn)行最適合各個(gè)設(shè)備的畫面輸出的方式制作的模板并對(duì)其進(jìn)行處理來顯示。

通過能夠在顯示于開發(fā)者終端201的畫面中指定設(shè)備的種類，而能夠使用對(duì)應(yīng)于指定的設(shè)備的模板以及背景圖像來切換組件190的畫面顯示。由此，能夠在同一開發(fā)者終端201上對(duì)于各個(gè)設(shè)備動(dòng)態(tài)地切換畫面顯示，從而確認(rèn)組件190的外觀等。

此外，在實(shí)施方式一中，根據(jù)顯示包含組件190的畫面的客戶端200的設(shè)備，使用布局180而使畫面顯示最適合化，在本實(shí)施方式中，由于使開發(fā)中的未完成的組件190顯示，因此，在使組件190的外觀顯示時(shí)不進(jìn)行利用布局180的畫面的構(gòu)成，而使其顯示于固定的背景圖像上。從而，在圖7的構(gòu)成例中，形成不具有實(shí)施方式一的圖1所示的構(gòu)成例中的布局180的一覽的構(gòu)成。另一方面，并不限于此，也可以在開發(fā)對(duì)象的組件190的外觀的確認(rèn)時(shí)，與實(shí)施方式一同樣地，使用布局180進(jìn)行畫面上的配置和顯示。

并且，在本實(shí)施方式中，以與作為執(zhí)行環(huán)境的實(shí)施方式一的圖1所示的web服務(wù)器系統(tǒng)100分開獨(dú)立地安裝web應(yīng)用的開發(fā)環(huán)境即開發(fā)支持系統(tǒng)101的情況為例，也能夠形成將它們作為同一服務(wù)器系統(tǒng)而使其共存的構(gòu)成。并且，也能夠在開發(fā)者終端201上構(gòu)筑該服務(wù)器系統(tǒng)，構(gòu)成獨(dú)立的開發(fā)環(huán)境。

<畫面例>

圖8～圖10為關(guān)于由開發(fā)支持系統(tǒng)101顯示于開發(fā)者終端201的畫面上的組件190的開發(fā)畫面的示例示出概要的圖。在開發(fā)畫面中，能夠在畫面上部選擇開發(fā)對(duì)象的設(shè)備(在圖8的示例中選擇“pc”)。開發(fā)支持系統(tǒng)101，與開發(fā)者終端201的實(shí)際的設(shè)備種類無(wú)關(guān)地，在此，通過形成對(duì)應(yīng)于選擇的設(shè)備的顯示形式，仿真設(shè)備。為了能夠?qū)崿F(xiàn)上述動(dòng)作，例如，在從開發(fā)者終端201向開發(fā)支持系統(tǒng)101發(fā)送開發(fā)畫面顯示的請(qǐng)求時(shí)，進(jìn)行通過在此選擇的設(shè)備來更新請(qǐng)求所包含的特定設(shè)備的信息等的對(duì)應(yīng)。

圖8所示的示例為初始畫面，顯示背景圖像164和與此重疊作為組件開發(fā)區(qū)域165的白底的框。在圖8的示例中，省略了背景圖像164的詳細(xì)內(nèi)容，通過陰影框表示關(guān)于幀、控件、部件等的顯示單位或分隔的示例。此外，在本實(shí)施方式中，背景圖像164例如可以使用將開發(fā)對(duì)象的網(wǎng)站的主頁(yè)等截屏的靜態(tài)的圖像數(shù)據(jù)，但不限于此。例如，也可以通過與實(shí)施方式一中說明的同樣的構(gòu)成，基于布局180配置各組件190，使用根據(jù)設(shè)備的種類動(dòng)態(tài)地進(jìn)行畫面描繪的畫面。

開發(fā)者能夠通過鼠標(biāo)等對(duì)于組件開發(fā)區(qū)域165進(jìn)行尺寸變更，或通過拖拽與拖放(drag&drop)使其移動(dòng)至適當(dāng)?shù)奈恢?。在此設(shè)定的尺寸，可以以成為開發(fā)的組件190實(shí)際顯示時(shí)的尺寸的方式自動(dòng)地設(shè)定于源代碼。此外，關(guān)于位置，在實(shí)際使用該組件190時(shí)，如在實(shí)施方式一中所示，通過布局180規(guī)定配置位置。

組件開發(fā)區(qū)域165在初始狀態(tài)的開發(fā)模式下以能夠文本編輯的方式構(gòu)成，開發(fā)者在設(shè)定了組件開發(fā)區(qū)域165的尺寸及位置之后，如圖9的示例所示，在組件開發(fā)區(qū)域165內(nèi)直接編輯源代碼。編輯的源代碼例如通過經(jīng)由未圖示的保存按鈕等的來自開發(fā)者的指示/操作，能夠在服務(wù)器端即開發(fā)支持系統(tǒng)101上作為組件190的源代碼直接保存。

為了基于開發(fā)的源代碼確認(rèn)組件190的外觀等，基于來自開發(fā)者的指示/操作，組件開發(fā)區(qū)域165從開發(fā)模式被切換為確認(rèn)模式。在確認(rèn)模式下，組件開發(fā)區(qū)域165調(diào)出對(duì)象的組件190，如圖10的示例所示，能夠經(jīng)由模板引擎171使執(zhí)行時(shí)的外觀實(shí)際顯示在畫面上。開發(fā)者，關(guān)于組件190的動(dòng)作或外觀確認(rèn)了與背景圖像164的匹配、調(diào)合之后，返回圖9的畫面所示的開發(fā)模式，能夠再次進(jìn)行源代碼的修正等。

此外，作為源代碼的編輯/保存或版本管理等的開發(fā)功能，例如也可以使用eclipse等的一般能夠使用的外部的開發(fā)環(huán)境。這種情況下，開發(fā)者既可以在eclipse上直接進(jìn)行源代碼的編輯或保存等，也可以將組件開發(fā)區(qū)域165作為外部編輯區(qū)在此進(jìn)行編輯等。

圖11為關(guān)于通過開發(fā)支持系統(tǒng)101在開發(fā)者終端201上進(jìn)行畫面開發(fā)的情況下的處理的流程的示例示出概要的圖。在此，示出在圖8～圖10的畫面例中示出的處理的流程的概略，首先，開發(fā)支持系統(tǒng)101的組件開發(fā)視圖161中的背景顯示部162使背景圖像164顯示于開發(fā)者終端201的未圖示的web瀏覽器上。背景圖像164的數(shù)據(jù)，例如可以預(yù)先注冊(cè)于開發(fā)支持系統(tǒng)101，也可以由開發(fā)者隨時(shí)指定。進(jìn)而，組件開發(fā)視圖161中的開發(fā)區(qū)域顯示部163將白底的組件開發(fā)區(qū)域165與背景圖像重疊顯示而形成開發(fā)模式。

此外，組件開發(fā)區(qū)域165，例如作為通過iframe標(biāo)簽的內(nèi)聯(lián)框架，能夠在開發(fā)者終端201上相對(duì)于顯示該開發(fā)畫面的未圖示的web瀏覽器作為插入的瀏覽器要素而形成。并且，在上述的示例中，作為新開發(fā)組件190的區(qū)域，使白底的組件開發(fā)區(qū)域165顯示，也可以根據(jù)來自開發(fā)者的指示為了修正而調(diào)出已有的組件190并使其源代碼顯示。

如圖8所示，開發(fā)者在設(shè)定組件開發(fā)區(qū)域165的尺寸及位置上，如圖9所示，制作源代碼并保存。組件190的源代碼保存于開發(fā)支持系統(tǒng)101上的規(guī)定的文件夾或路徑。并且，當(dāng)通過來自開發(fā)者的指示等從開發(fā)模式切換至確認(rèn)模式時(shí)，組件開發(fā)視圖161調(diào)出對(duì)象的組件190，通過模板引擎171形成外觀，如圖10所示，使其顯示在組件開發(fā)區(qū)域165上。

作為源代碼的開發(fā)環(huán)境，在使用eclipse等的外部的開發(fā)環(huán)境的情況下，例如，組件開發(fā)區(qū)域165總是成為確認(rèn)模式，能夠通過由組件開發(fā)視圖161的開發(fā)區(qū)域顯示部163監(jiān)視在eclipse上進(jìn)行的源代碼的更新/保存等，來調(diào)出被更新的對(duì)象的組件190，使外觀動(dòng)態(tài)地顯示于組件開發(fā)區(qū)域165。

如以上所說明的，根據(jù)本發(fā)明的實(shí)施方式二即開發(fā)支持系統(tǒng)101，開發(fā)者在于開發(fā)者終端201上重疊在背景圖像164上顯示的組件開發(fā)區(qū)域165上，能夠隨時(shí)切換組件190的源代碼的開發(fā)和通過執(zhí)行的外觀顯示而進(jìn)行。由此，適當(dāng)確認(rèn)畫面整體上的外觀的匹配/調(diào)合等，并且能夠高效地進(jìn)行組件190的開發(fā)。

以上基于實(shí)施方式具體地說明了由本發(fā)明人完成的發(fā)明，本發(fā)明不限于上述實(shí)施方式，在不脫離其主旨的范圍內(nèi)能夠進(jìn)行各種變更，這一點(diǎn)自不必說。例如，上述實(shí)施方式為了簡(jiǎn)明易懂地說明本發(fā)明而進(jìn)行了詳細(xì)的說明，但不必限于包括所說明的全部的構(gòu)成。并且，能夠?qū)⒛硞€(gè)實(shí)施方式的構(gòu)成的一部分置換為其他實(shí)施方式的構(gòu)成，并且，也可以將其他實(shí)施方式的構(gòu)成添加至某個(gè)實(shí)施方式的構(gòu)成中。并且，關(guān)于各實(shí)施方式的構(gòu)成的一部分，能夠進(jìn)行其他構(gòu)成的追加/刪除/置換。

產(chǎn)生上的可利用性

本發(fā)明能夠應(yīng)用于支持進(jìn)行對(duì)應(yīng)于多設(shè)備的畫面顯示的web應(yīng)用的開發(fā)的開發(fā)支持系統(tǒng)。

附圖標(biāo)記說明

100…web服務(wù)器系統(tǒng)、101…開發(fā)支持系統(tǒng)、110…web服務(wù)器程序、120…語(yǔ)言處理系統(tǒng)、130…框架、140…控制器、141…組件開發(fā)控制器、150…模型、151…組件開發(fā)模型、160…編輯視圖、161…組件開發(fā)視圖、162…背景顯示部、163…開發(fā)區(qū)域顯示部、164…背景圖像、165…組件開發(fā)區(qū)域、170…組件視圖、171…模板引擎、180…布局、181p…模板(pc用)、181s…模板(智能手機(jī)用)、181t…模板(平板用)、190…組件、191p…模板(pc用)、191s…模板(智能手機(jī)用)、191t…模板(平板用)、200…客戶端、201…開發(fā)者終端、300…bl服務(wù)器、401…頁(yè)眉區(qū)域、402…一覽區(qū)域、403…內(nèi)容區(qū)域、404…頁(yè)腳區(qū)域、405…檢索條件區(qū)域、406…檢索結(jié)果區(qū)域、411、411’…頁(yè)眉區(qū)域、412…一覽區(qū)域、413…內(nèi)容區(qū)域、414…頁(yè)腳區(qū)域、415…檢索條件區(qū)域、416…檢索結(jié)果區(qū)域。