WO2016059677A1 - Ｗｅｂサーバシステム - Google Patents

Ｗｅｂサーバシステム Download PDF

Info

Publication number
WO2016059677A1
WO2016059677A1 PCT/JP2014/077363 JP2014077363W WO2016059677A1 WO 2016059677 A1 WO2016059677 A1 WO 2016059677A1 JP 2014077363 W JP2014077363 W JP 2014077363W WO 2016059677 A1 WO2016059677 A1 WO 2016059677A1
Authority
WO
WIPO (PCT)
Prior art keywords
layout
screen
component
template
components
Prior art date
Application number
PCT/JP2014/077363
Other languages
English (en)
French (fr)
Inventor
祐介 塩川
英子 宮前
護 清水
Original Assignee
株式会社野村総合研究所
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by 株式会社野村総合研究所 filed Critical 株式会社野村総合研究所
Priority to PCT/JP2014/077363 priority Critical patent/WO2016059677A1/ja
Priority to JP2016553778A priority patent/JP6318261B2/ja
Publication of WO2016059677A1 publication Critical patent/WO2016059677A1/ja

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F13/00—Interconnection of, or transfer of information or other signals between, memories, input/output devices or central processing units

Definitions

  • the present invention relates to a web application development technology, and in particular to a technology that is effective when applied to a web server system that executes a web application that performs screen display compatible with multiple devices.
  • multi-device it is effective to promote the use of common parts and general-purpose parts in development products such as source code, and reuse of parts in development. Furthermore, it is also effective to reduce individual development parts for each device or platform by performing multi-device or multi-platform (which may be simply referred to as "multi-device” in the following).
  • Patent Document 1 has a user interface including the appearance and attributes of a control for displaying input / output items, control processing, and the like according to the device.
  • a web server system that changes dynamically without changing source code is described.
  • the system includes, for example, a device acquisition unit that acquires information related to the type of device of the client terminal based on a request from the client terminal, and a client terminal acquired by the device acquisition unit for a part object included in the source code.
  • a response that generates HTML data to display the corresponding control on the screen of the client terminal, based on the adjustment content when displaying the control, implemented in the upper class of the inheritance source of the part object according to the type of device
  • a processing unit is described.
  • parts can be reused in developing a Web application, and multi-device compatibility can be achieved with one source code. Become.
  • the screen size of a smartphone is smaller than that of a PC (Personal Computer) or a tablet terminal, and the amount of information that can be displayed is restricted. Therefore, for example, while displaying a list of menus and the like in a state in which all are always expanded on one screen on a PC or a tablet terminal, in the case of a smartphone, usually only icons etc. for instructing menu display are displayed. In some cases, an interface may be adopted in which a menu list is displayed as a separate screen when menu display is instructed via the icon or the like. In the prior art, it is difficult to be able to correspond to each pattern with one source code in these cases.
  • a web server system executes a business logic in response to a request from a client terminal, and responds with a processing result screen according to a type of a device of the client terminal. It has the following features.
  • the Web server system comprises a combination of one or more screen parts, and a component having a first template that defines the appearance when each screen part is displayed on each screen of the device, and the process A layout having a second template that defines an arrangement pattern of one or more areas in which the component is arranged on the result screen, and the appearance when each area is displayed on the screen is defined for each type of device; Have.
  • the layout to be applied to the processing result screen and the component to be arranged in the layout are acquired, and data obtained by execution of the business logic is set for the acquired component, and the acquired layout is An edit view is positioned to be arranged in the predetermined area.
  • the process is performed according to an appearance defined by the second template and the first template corresponding to the type of the device of the client terminal. It has a component view that creates a result screen.
  • a screen transition may be involved.
  • FIG. 7 is a diagram showing an outline of an example of a designated content in an edit view according to an embodiment of the present invention and an exemplary flow of processing when displaying a screen according to the content.
  • FIG. 1 is a diagram showing an outline of a configuration example of a Web server system according to an embodiment of the present invention.
  • the Web server system 100 according to an embodiment of the present invention has a screen part as a component and has a list of the components 190, and the layout 180 as a layout pattern including one or more screen areas in which the components 190 are arranged. I have a list.
  • Each layout 180 and each component 190 respectively have a template created so as to output an optimized screen for each device, and the Web server system 100 is optimized for each device based on these. Automaticized screen output.
  • the web server system 100 is, for example, a server system composed of a server device and a virtual server built on a cloud computing service, and, for example, an operating system (OS) (not shown), a web server program 110, a language processing system 120, A controller 140, a model 150, an edit view 160, a component view 170, developed and implemented by a model view controller (MVC) model, as software operating on or using middleware or a framework such as the framework 130. It has parts (modules) such as a layout 180 and a component 190.
  • OS operating system
  • MVC model view controller
  • the web server program 110 for example, one commonly used in a web server such as Apache (registered trademark) HTTP Server can be appropriately used.
  • a web server such as Apache (registered trademark) HTTP Server
  • the language processing system 120 and the framework 130 that are the foundation of the application system that runs on the Web server program 110 for example, a script language such as PHP used to create a dynamic Web page, and PHP The implemented Zend Framework can be used as appropriate.
  • the controller 140 has a function as a controller (C) in the MVC model, receives a request from a web browser or the like (not shown) on the client terminal 200, makes a data manipulation request to the model 150, and acquires data. Request the screen display to the edit view 160.
  • the model 150 has a function as a model (M) in the MVC model, and has a function of executing business logic and performing data manipulation and acquisition.
  • the business logic (BL) may, for example, issue a request to another BL server 300 having a database or the like for execution.
  • the edit view 160 and the component view 170 have a function as a view (V) in the MVC model, and have a function to perform screen generation and display based on data of the model 150.
  • the edit view 160 has a function of configuring the screen, and as described later, designates the layout 180 used on the screen, and calls the components 190 arranged in the area displayed by the layout 180 to make settings.
  • the component view 170 performs rendering based on the information of the layout 180 and the component 190 to create HTML (Hyper Text Markup Language) data, and outputs the data to the client terminal 200.
  • HTML Hyper Text Markup Language
  • the component view 170 processes the Web template for screen display set for the layout 180 and the component 190 according to the device of the client terminal 200 by the template engine 171 as described later. Perform screen output optimized for the target device.
  • the web template is a template (for PC) 181p and a template (for smartphone) 181s, for each type (PC, smartphone (smartphone), tablet terminal) of the client terminal 200 as the layout 180, as shown.
  • Template (for tablet) 181t (these may be generically referred to as template 181) and for component 190, template (for PC) 191p, template (for smartphone) 191s, template (for tablet), respectively.
  • 191t (these may be collectively referred to as a template 191).
  • the templates 181 and 191 are prepared separately for the PC, the smartphone, and the tablet terminal, but the present invention is not limited to this.
  • the browser may have different devices.
  • the template engine 171 has a function of creating an actual screen based on the contents of the design and appearance defined in the web template such as the templates 181 and 191.
  • a general template engine such as Smarty mainly used in PHP can be used as appropriate.
  • the controller 140 and the component view 170 can be provided generically as the web server system 100. Also, as the layout 180 and component 190 (including the templates 181 and 191) as screen parts, those created in other development cases are reused, or those created in advance in the target development case are used. be able to. In addition, as for the model 150, it is possible to use one that is separately created in the target development project or the like. On the other hand, the screen view developer creates the edit view 160 as source code, but since the differences between the devices are absorbed by the templates 181 and 191 (and the template engine 171), the screen developers differ between the devices. It is not necessary to be conscious of
  • FIG. 2 is a diagram schematically showing an example of the difference in layout between devices in the present embodiment.
  • the layout divides the whole screen into one or more areas, and indicates the pattern of the arrangement of the areas.
  • FIG. 2A the layout on the tablet terminal, and in FIG. 2B, the smartphone An example of the layout of is shown.
  • FIG. 2 shows the case where “list, detailed layout” is selected as the layout 180, and a plurality of header areas (header areas 401 and 411) and footer areas (footer areas 404 and 414) are displayed. Show a layout having a list area (list areas 402 and 412) for displaying items in a list, and a content area (content areas 403 and 413) for displaying the detailed contents when a specific item is selected from them. There is.
  • FIG. 3 is a diagram schematically showing another example of the difference in layout between devices in the present embodiment. Similar to FIG. 2, FIG. 3A shows an example of the layout of the tablet terminal, and FIG. 3B shows an example of the layout of the smartphone.
  • the example of FIG. 3 shows the case where “search condition, result display type layout” is selected as the layout 180, and in addition to the header area (header areas 401 and 411) and footer area (footer areas 404 and 414), A search condition area (search condition areas 405 and 415) for displaying a part or the like for which a condition for search is input and designated and a search result area (search result area 406 and 416) for displaying a search result based on the search condition It shows about the layout which has.
  • the design of each area is performed by the template engine 171 of the component view 170.
  • the appearance can be switched automatically.
  • FIG. 4 is a diagram schematically showing an example of the difference in component display for each device according to the present embodiment. Similar to FIG. 2, FIG. 4 (a) shows an example of a layout on a tablet terminal, and FIG. 4 (b) shows an example of a layout on a smartphone, and “lists and details shown in the example of FIG. In the “type layout”, the case is shown where the component 190 of “menu” is displayed in the header areas 401 and 411.
  • the layout of the tablet terminal in FIG. 4A four menu buttons are displayed side by side in the header area 401.
  • the icon for displaying the menu is displayed in the header area 411 in the screen on the left side.
  • the screen changes to the screen on the right and the header area 411 is expanded (header area 411 '), indicating that menu buttons are displayed vertically in this area.
  • Such a device-to-device difference in the same component 190 is defined in the template 191 (in this case, the template (for tablet) 191t and the template (for smartphone) 191s) in the component view 170, as in the layout 180.
  • the template engine 171 reflects the actual screen.
  • the component 190 in the present embodiment is not limited to one including screen parts and controls, but as illustrated, by a set or combination of a plurality of parts and controls (four menu buttons in the example of FIG. 4) It may be configured.
  • FIG. 5 is a diagram schematically showing another example of the difference in component display for each device according to the present embodiment. Similar to FIG. 3, FIG. 5 (a) shows the layout on the tablet terminal, and FIG. 5 (b) shows an example of the layout on the smartphone, and “search conditions,” shown in the example of FIG. In the result display type layout, the case where the component 190 of “search result list” is displayed in the search result areas 406 and 416 is shown. As illustrated, in the layout of the tablet terminal in FIG. 5A, a search result list is displayed in a table form in the search result area 406. On the other hand, the layout of the smartphone shown in FIG. 5B indicates that the search result list is displayed vertically in the form of a list in the search result area 416 of the right screen after transition.
  • FIG. 6 is a diagram showing an outline of an example of the designated content in the edit view 160 and the flow of processing upon screen display associated therewith.
  • the screen developer creates the edit view 160 that performs the following processing as source code, in which the layout 180 and the component 190 are specified without being aware of the differences among the devices. All you have to do is place and set.
  • the screen display optimized for each device is dynamically performed at runtime by the component view 170 (and the template engine 171) based on the contents defined in the templates 181 and 191.
  • the layout 180 used for screen display is acquired from the list of layouts 180 created in advance (S01). At this point in time, there are no components 190 to be displayed in each area set in the layout 180 yet. Next, among the list of components 190 created in advance, one or more components 190 to be arranged in the layout 180 acquired in step S01 are acquired (S02). At this point in time, no setting such as data to be displayed has been made in the component 190.
  • each component 190 acquired in step S190 is set as data to be displayed for each component 190 acquired in step S190 (S03). Acquisition of data by the model 150 is executed by an instruction via the controller 140. Next, each component 190 for which data is set is designated so as to be arranged in an appropriate area in the layout 180 acquired in step S01 (S04). Then, the layout 180 specifying the arrangement position of each component 190 is passed to the component view 170 to instruct screen drawing (S05).
  • information related to the type of device of the client terminal 200 is also passed to the component view 170 (or the component view 170 itself is acquired from the content of the request message).
  • the information related to the type of device can be acquired by a known technique, such as acquisition from the User-Agent header of the request message from the client terminal 200, for example.
  • the information on the type of device here includes, for example, information such as an OS, a web browser, and its version.
  • the component view 170 acquires templates 181 and 191 corresponding to the type of device for the passed layout 180 and each component 190, and performs screen drawing including data according to the design specified in the template. For example, for each component 190, a template (for smartphone) 191s corresponding to the type of device (smartphone in the example of FIG. 6) is acquired, and the component 190 is included including data based on the design defined therein. Screen drawing is performed (in the example of FIG. 6, a list of search results is displayed). In addition, for the layout 180, the template 181s is acquired, and each area is drawn based on the design defined in this, and each component 190 drawn on the screen is arranged at the position of the specified area (see FIG. In the example of 6, a list display of search results is arranged in the search result area 416).
  • the pattern of the layout 180 consisting of one or more areas in which the component 190 is arranged while the screen parts are componentized.
  • each layout 180 and each component 190 respectively have the templates 181 and 191 created so that the screen output optimized for every device may be performed, and the Web server system 100 processes these templates.
  • Component view 170 having a template engine 171.
  • the screen layout and components are componentized, and by calling these in the source code of the edit view 160, it is possible to dynamically perform screen display optimized according to the device. That is, the screen developer can create the source code of the edit view 160 without being aware of the differences between the devices. Furthermore, the result of development by the designer can be achieved by separating the function for controlling data processing and behavior in the layout 180 and component 190 and the design (HTML, CSS (Cascading Style Sheets), etc.) defined by the templates 181 and 191. It becomes possible to easily capture an object as a screen part.
  • HTML HyperText Markup Language
  • CSS CSS
  • the present invention is not limited to the above-mentioned embodiment, and can be variously changed in the range which does not deviate from the summary. It goes without saying.
  • the above embodiments have been described in detail in order to explain the present invention in an easy-to-understand manner, and are not necessarily limited to those having all the described configurations.
  • the present invention is applicable to a web server system that executes a web application that performs screen display compatible with multiple devices.

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Human Computer Interaction (AREA)
  • Information Transfer Between Computers (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

　部品化された要素を再利用することで画面開発できるようにするとともに、画面遷移を伴う場合でも１つのソースコードによってマルチデバイス対応を可能とする。代表的な実施の形態によれば、画面パーツが表示される際の外観をデバイスの種類毎に規定したテンプレートを有するコンポーネントと、コンポーネントが配置される領域が画面表示される際の外観をデバイスの種類毎に規定したテンプレートを有するレイアウトと、処理結果画面に適用するレイアウトと配置するコンポーネントを取得し、コンポーネントに対してデータを設定してレイアウトの所定の領域に位置指定するエディットビューと、レイアウトおよびコンポーネントの内容に基づいて、クライアント端末のデバイスの種類に対応したテンプレートによって規定される外観により処理結果画面を作成するコンポーネントビューとを有する。

Description

Ｗｅｂサーバシステム
　本発明は、Ｗｅｂアプリケーションの開発技術に関し、特に、マルチデバイスに対応した画面表示を行うＷｅｂアプリケーションを実行するＷｅｂサーバシステムに適用して有効な技術に関するものである。
　近年、例えば、タブレット端末やスマートフォンなどのいわゆるスマートデバイスの業務活用が本格化しており、企業の基幹システムと連携するような中・大規模なシステムの開発案件も増える傾向にある。このような状況で、ユーザ企業の要件は複雑となり、ＩＴベンダー等の開発者にとって開発難易度も高くなってきていることから、開発の効率化を図って生産性を向上させることが重要となる。
　この点につき、例えば、ソースコードなどの開発成果物における共通部分・汎用部分の部品化や、開発時の部品の再利用を推進することが効果的である。さらに、マルチデバイスやマルチプラットフォーム（以下では単に「マルチデバイス」と総称する場合がある）対応を行うことで、デバイスやプラットフォーム毎の個別の開発部分を低減させることも有効である。
　これに関連して、例えば、特開２０１３－２３５３８７号公報（特許文献１）には、入出力項目を表示するためのコントロールの外観や属性、制御処理などを含むユーザインタフェースを、デバイスに応じてソースコードを変更することなく動的に変更するＷｅｂサーバシステムが記載されている。当該システムは、例えば、クライアント端末からの要求に基づいて、クライアント端末のデバイスの種類に係る情報を取得するデバイス取得部と、ソースコードに含まれるパーツオブジェクトについて、デバイス取得部により取得したクライアント端末のデバイスの種類に応じた、パーツオブジェクトの承継元の上位クラスに実装された、コントロールを表示する際の調整内容に基づいて、クライアント端末の画面上に対応するコントロールを表示させるＨＴＭＬデータを生成する応答処理部とを有する。
特開２０１３－２３５３８７号公報
　例えば、特許文献１に記載されたような技術を用いることで、Ｗｅｂアプリケーションの開発に際して、部品（パーツオブジェクト）を再利用可能とするとともに、１つのソースコードでマルチデバイス対応をすることが可能となる。
　しかしながら、実際は、１つのソースコードによるマルチデバイス対応といっても、例えば、ソースコード中でｉｆ文などによりデバイス毎に処理を書き分けることが必要となる場合もある。また、新たにデバイスが追加された場合にソースコードに処理を追記しなければならないなど、画面開発者にとって１つのソースコードによって完全なマルチデバイス対応をすることは困難である。
　また、マルチデバイス対応として、例えば、デバイスの画面サイズに応じてユーザインタフェースを切り替えることができる場合でも、実際は、ある画面において表示されるコントロールやパーツなどの大きさや表示形式、配置などを変更できるのみであり、複数画面の遷移を伴った変更を行うことは困難である。
　例えば、ＰＣ（Personal Computer）やタブレット端末に比べてスマートフォンの画面サイズは小さく、表示できる情報量に制約がある。そのため、例えば、メニューなどの一覧表示について、ＰＣやタブレット端末では１つの画面に常時全て展開した状態で一覧表示するのに対し、スマートフォンでは、通常時はメニュー表示を指示するアイコン等のみを表示しておき、当該アイコン等を介してメニュー表示が指示された際に別画面としてメニュー一覧を表示する、というようなインタフェースが採用される場合がある。従来技術ではこれらの場合に１つのソースコードで各パターンに対応できるようにすることは困難である。
　そこで本発明の目的は、Ｗｅｂアプリケーションの開発の際に、部品化された要素を再利用することで画面開発できるようにするとともに、デバイスによっては画面遷移を伴う場合でも、１つのソースコードによってマルチデバイス対応を可能とするＷｅｂサーバシステムを提供することにある。
　本発明の前記ならびにその他の目的と新規な特徴は、本明細書の記述および添付図面から明らかになるであろう。
　本願において開示される発明のうち、代表的なものの概要を簡単に説明すれば、以下のとおりである。
　本発明の代表的な実施の形態によるＷｅｂサーバシステムは、クライアント端末からのリクエストを受けて、ビジネスロジックを実行し、前記クライアント端末のデバイスの種類に応じた処理結果画面を応答するＷｅｂサーバシステムであって、以下の特徴を有するものである。
　すなわち、Ｗｅｂサーバシステムは、１つ以上の画面パーツの組み合わせからなり、前記各画面パーツが画面表示される際の外観を前記デバイスの種類毎に規定した第１のテンプレートを有するコンポーネントと、前記処理結果画面上において前記コンポーネントが配置される１つ以上の領域の配置パターンからなり、前記各領域が画面表示される際の外観を前記デバイスの種類毎に規定した第２のテンプレートを有するレイアウトと、を有する。
　さらに、前記処理結果画面に適用する前記レイアウトと、前記レイアウトに配置する前記コンポーネントを取得し、取得した前記コンポーネントに対して前記ビジネスロジックの実行により得られるデータを設定して、取得した前記レイアウトの所定の前記領域に配置されるよう位置指定するエディットビューを有する。また、前記エディットビューにより取得された前記レイアウトおよび前記コンポーネントの内容に基づいて、前記クライアント端末の前記デバイスの種類に対応した前記第２のテンプレートおよび前記第１のテンプレートによって規定される外観により前記処理結果画面を作成するコンポーネントビューを有する。
　本願において開示される発明のうち、代表的なものによって得られる効果を簡単に説明すれば以下のとおりである。
　すなわち、本発明の代表的な実施の形態によれば、Ｗｅｂアプリケーションの開発の際に、部品化された要素を再利用することで画面開発できるようにするとともに、デバイスによっては画面遷移を伴う場合でも、１つのソースコードによってマルチデバイス対応をすることが可能となる。これにより、Ｗｅｂアプリケーションの画面開発の生産性や保守の効率性を大幅に向上させることが可能となる。
本発明の一実施の形態であるＷｅｂサーバシステムの構成例について概要を示した図である。 （ａ）、（ｂ）は、本発明の一実施の形態におけるデバイス毎のレイアウトの相違の例について概要を示した図である。 （ａ）、（ｂ）は、本発明の一実施の形態におけるデバイス毎のレイアウトの相違の他の例について概要を示した図である。 （ａ）、（ｂ）は、本発明の一実施の形態におけるデバイス毎のコンポーネント表示の相違の例について概要を示した図である。 （ａ）、（ｂ）は、本発明の一実施の形態におけるデバイス毎のコンポーネント表示の相違の他の例について概要を示した図である。 本発明の一実施の形態におけるエディットビューでの指定内容と、これに伴う画面表示時の処理の流れの例について概要を示した図である。
　以下、本発明の実施の形態を図面に基づいて詳細に説明する。なお、実施の形態を説明するための全図において、同一部には原則として同一の符号を付し、その繰り返しの説明は省略する。
　＜システム構成＞
　図１は、本発明の一実施の形態であるＷｅｂサーバシステムの構成例について概要を示した図である。本発明の一実施の形態であるＷｅｂサーバシステム１００は、画面パーツをコンポーネント化してコンポーネント１９０の一覧として有するとともに、コンポーネント１９０が配置される１つ以上の画面領域からなるレイアウトのパターンとしてレイアウト１８０の一覧を有している。そして、各レイアウト１８０および各コンポーネント１９０は、それぞれ、デバイス毎に最適化された画面出力をするように作成されたテンプレートを有しており、Ｗｅｂサーバシステム１００は、これらに基づいてデバイス毎に最適化された画面出力を自動的に行う。
　Ｗｅｂサーバシステム１００は、例えば、サーバ機器やクラウドコンピューティングサービス上に構築された仮想サーバからなるサーバシステムであり、例えば、図示しないＯＳ（Operating System）や、Ｗｅｂサーバプログラム１１０、言語処理系１２０、フレームワーク１３０などのミドルウェアや基盤等の上で稼働する、もしくはこれらを利用するソフトウェアとして、ＭＶＣ（Model View Controller）モデルによって開発、実装されたコントローラ１４０、モデル１５０、エディットビュー１６０、コンポーネントビュー１７０、レイアウト１８０およびコンポーネント１９０などの各部（モジュール）を有する。
　Ｗｅｂサーバプログラム１１０としては、例えば、Ａｐａｃｈｅ（登録商標）　ＨＴＴＰ　Ｓｅｒｖｅｒなど、Ｗｅｂサーバにおいて一般的に用いられているものを適宜用いることができる。また、Ｗｅｂサーバプログラム１１０上で稼働するアプリケーションシステムの基盤となる言語処理系１２０およびフレームワーク１３０としては、例えば、動的なＷｅｂページを作成するために用いられるＰＨＰなどのスクリプト言語、およびＰＨＰで実装されたＺｅｎｄ　Ｆｒａｍｅｗｏｒｋなどを適宜用いることができる。
　コントローラ１４０は、ＭＶＣモデルにおけるコントローラ（Ｃ）としての機能を有し、クライアント端末２００上の図示しないＷｅｂブラウザ等からのリクエストを受けて、モデル１５０に対してデータの操作要求を行ってデータを取得したり、エディットビュー１６０に対して画面表示を要求したりする。モデル１５０は、ＭＶＣモデルにおけるモデル（Ｍ）としての機能を有し、ビジネスロジックを実行してデータの操作や取得を行う機能を有する。ビジネスロジック（ＢＬ）は、例えば、データベースなどを有する他のＢＬサーバ３００に対して要求を行って実行させるようにしてもよい。
　エディットビュー１６０およびコンポーネントビュー１７０は、ＭＶＣモデルにおけるビュー（Ｖ）としての機能を有し、モデル１５０のデータに基づいて画面生成を行って表示する機能を有する。エディットビュー１６０は、画面の構成を行う機能を有し、後述するように、画面において用いるレイアウト１８０を指定するとともに、レイアウト１８０によって表示される領域に配置するコンポーネント１９０をそれぞれ呼び出して設定を行う。コンポーネントビュー１７０は、このレイアウト１８０およびコンポーネント１９０の情報に基づいてレンダリングを行ってＨＴＭＬ（HyperText Markup Language）データを作成し、クライアント端末２００に対して出力する。
　このとき、コンポーネントビュー１７０は、後述するように、クライアント端末２００のデバイスに応じてレイアウト１８０およびコンポーネント１９０に対して設定されている画面表示のためのＷｅｂテンプレートをテンプレートエンジン１７１により処理することで、対象のデバイスに最適化された画面出力を行う。
　Ｗｅｂテンプレートは、図示するように、クライアント端末２００の種別（ＰＣ、スマートフォン（スマホ）、タブレット端末）毎に、レイアウト１８０に対するものとして、それぞれ、テンプレート（ＰＣ用）１８１ｐ、テンプレート（スマホ用）１８１ｓ、テンプレート（タブレット用）１８１ｔ（これらを総称してテンプレート１８１と記載する場合がある）、およびコンポーネント１９０に対するものとして、それぞれ、テンプレート（ＰＣ用）１９１ｐ、テンプレート（スマホ用）１９１ｓ、テンプレート（タブレット用）１９１ｔ（これらを総称してテンプレート１９１と記載する場合がある）を有する。図１の例では、ＰＣ、スマートフォン、およびタブレット端末の別にテンプレート１８１および１９１を用意しているが、これに限らず、他のデバイスのものや、同じ種類でも画面サイズが異なったり、ＯＳやＷｅｂブラウザが異なるデバイスのものを有していてもよい。
　テンプレートエンジン１７１は、テンプレート１８１および１９１などのＷｅｂテンプレートに規定されたデザインや外観の内容に基づいて実際の画面を作成する機能を有する。なお、テンプレートエンジン１７１には、例えば、ＰＨＰにおいて主に用いられているＳｍａｒｔｙなどの一般的なテンプレートエンジンを適宜用いることができる。
　コントローラ１４０やコンポーネントビュー１７０は、Ｗｅｂサーバシステム１００として汎用的に提供することができる。また、画面部品としてのレイアウト１８０やコンポーネント１９０（テンプレート１８１および１９１も含む）は、他の開発案件で作成されたものを再利用したり、対象の開発案件において予め作成されたものを用いたりすることができる。また、モデル１５０についても、対象の開発案件等において別途作成されたものを用いることができる。一方、エディットビュー１６０は、画面開発者がソースコードとして作成することになるが、デバイス毎の相違は、テンプレート１８１や１９１（およびテンプレートエンジン１７１）が吸収するため、画面開発者がデバイス毎の相違を意識することは不要である。
　＜レイアウトとコンポーネント＞
　図２は、本実施の形態におけるデバイス毎のレイアウトの相違の例について概要を示した図である。レイアウトとは、画面全体を１つ以上の領域に区分し、その領域の配置のパターンを指すものであり、図２（ａ）では、タブレット端末でのレイアウト、図２（ｂ）では、スマートフォンでのレイアウトの例をそれぞれ示している。
　図２の例では、レイアウト１８０として「一覧、明細型レイアウト」を選択した場合を示しており、ヘッダ領域（ヘッダ領域４０１、４１１）およびフッタ領域（フッタ領域４０４、４１４）の他に、複数の項目を一覧表示する一覧領域（一覧領域４０２、４１２）と、その中から特定の項目を選択した際にその詳細な内容を表示するコンテンツ領域（コンテンツ領域４０３、４１３）とを有するレイアウトについて示している。
　図示するように、図２（ａ）のレイアウトでは、１つの画面内に４つの領域が全て配置されている。一方、図２（ｂ）のレイアウトでは、左側の画面において一覧領域４１２が表示されている状態で、一覧領域４１２の中から特定の項目を選択すると、右側の画面に遷移して、一覧領域４１２に代って、選択された項目を表示するためのコンテンツ領域４１３が表示されることを示している。同一のレイアウト１８０におけるこのようなデバイス毎の相違は、上述したように、テンプレート１８１（この場合はテンプレート（タブレット用）１８１ｔおよびテンプレート（スマホ用）１８１ｓ）に規定され、コンポーネントビュー１７０のテンプレートエンジン１７１によって実際の画面に反映される。
　このように、画面上に表示される部品やコントロールの単位だけではなく、画面全体のレイアウト（画面遷移を伴うものも含む）の単位でも、レイアウト１８０およびテンプレート１８１によりデバイス毎の相違を吸収・隠蔽する。これにより、デバイスによっては画面遷移を伴うレイアウトを有しているような場合であっても、エディットビュー１６０についてはデバイスを意識することなく開発することができる。
　図３は、本実施の形態におけるデバイス毎のレイアウトの相違の他の例について概要を示した図である。図２と同様に、図３（ａ）では、タブレット端末でのレイアウト、図３（ｂ）では、スマートフォンでのレイアウトの例をそれぞれ示している。図３の例では、レイアウト１８０として「検索条件、結果表示型レイアウト」を選択した場合を示しており、ヘッダ領域（ヘッダ領域４０１、４１１）およびフッタ領域（フッタ領域４０４、４１４）の他に、検索の際の条件を入力、指定するパーツ等を表示する検索条件領域（検索条件領域４０５、４１５）と、その検索条件に基づく検索結果を表示する検索結果領域（検索結果領域４０６、４１６）とを有するレイアウトについて示している。
　例えば、図３（ａ）と図２（ａ）において各領域の配置が異なるように、エディットビュー１６０において指定するレイアウト１８０を変更することで、コンポーネントビュー１７０のテンプレートエンジン１７１によって各領域のデザイン、外観を自動的に切り替えることができる。
　図４は、本実施の形態におけるデバイス毎のコンポーネント表示の相違の例について概要を示した図である。図２と同様に、図４（ａ）では、タブレット端末でのレイアウト、図４（ｂ）では、スマートフォンでのレイアウトの例を示しており、それぞれ、図２の例で示した「一覧、明細型レイアウト」において「メニュー」のコンポーネント１９０をヘッダ領域４０１、４１１に表示させた場合を示している。
　図示するように、図４（ａ）のタブレット端末でのレイアウトでは、ヘッダ領域４０１に４つのメニューボタンが横並びに表示されている。一方、図４（ｂ）のスマートフォンのレイアウトでは、左側の画面において、ヘッダ領域４１１にはメニューを表示させるアイコンのみが表示されており、このアイコンをタップすると右側の画面に遷移して、ヘッダ領域４１１が拡張され（ヘッダ領域４１１’）、この領域にメニューボタンが縦並びに表示されることを示している。同一のコンポーネント１９０におけるこのようなデバイス毎の相違は、レイアウト１８０の場合と同様に、テンプレート１９１（この場合はテンプレート（タブレット用）１９１ｔおよびテンプレート（スマホ用）１９１ｓ）に規定され、コンポーネントビュー１７０のテンプレートエンジン１７１によって実際の画面に反映される。
　なお、本実施の形態におけるコンポーネント１９０は、１つの画面パーツやコントロールからなるものに限らず、図示するように、複数のパーツやコントロール（図４の例では４つのメニューボタン）の集合や組み合わせによって構成してもよい。
　図５は、本実施の形態におけるデバイス毎のコンポーネント表示の相違の他の例について概要を示した図である。図３と同様に、図５（ａ）では、タブレット端末でのレイアウト、図５（ｂ）では、スマートフォンでのレイアウトの例を示しており、それぞれ、図３の例で示した「検索条件、結果表示型レイアウト」において「検索結果一覧」のコンポーネント１９０を検索結果領域４０６、４１６に表示させた場合を示している。図示するように、図５（ａ）のタブレット端末でのレイアウトでは、検索結果領域４０６に検索結果一覧が表形式で表示されている。一方、図５（ｂ）のスマートフォンのレイアウトでは、遷移した右側の画面の検索結果領域４１６に検索結果一覧がリスト形式で縦並びに表示されることを示している。
　＜処理の流れ＞
　図６は、エディットビュー１６０での指定内容と、これに伴う画面表示時の処理の流れの例について概要を示した図である。上述したように、画面開発者は、ソースコードとして以下の処理を行うようなエディットビュー１６０を作成するが、その中では、デバイス毎の相違を意識することなくレイアウト１８０およびコンポーネント１９０を指定して配置、設定するだけでよい。デバイス毎に最適化された画面表示は、テンプレート１８１や１９１に規定された内容に基づいてコンポーネントビュー１７０（およびテンプレートエンジン１７１）が実行時に動的に行う。
　エディットビュー１６０では、まず、予め作成されているレイアウト１８０の一覧の中から、画面表示に用いるレイアウト１８０を取得する（Ｓ０１）。この時点ではレイアウト１８０に設定された各領域にはまだ何も表示すべきコンポーネント１９０は配置されていない。次に、予め作成されているコンポーネント１９０の一覧の中から、ステップＳ０１で取得したレイアウト１８０に配置する１つ以上のコンポーネント１９０を取得する（Ｓ０２）。この時点ではまだコンポーネント１９０には表示すべきデータなどの設定は何もされていない。
　その後、ステップＳ１９０で取得した各コンポーネント１９０に対して、表示すべきデータとして、モデル１５０から取得したデータを設定する（Ｓ０３）。なお、モデル１５０によるデータの取得は、コントローラ１４０を介した指示により実行される。次に、データを設定した各コンポーネント１９０を、ステップＳ０１で取得したレイアウト１８０における適当な領域に配置されるよう位置指定する（Ｓ０４）。そして、各コンポーネント１９０の配置位置を指定したレイアウト１８０をコンポーネントビュー１７０に渡して画面描画を指示する（Ｓ０５）。
　このとき、クライアント端末２００のデバイスの種類に係る情報も併せてコンポーネントビュー１７０に渡す（もしくはコンポーネントビュー１７０自身がリクエストメッセージの内容から取得する）。デバイスの種類に係る情報は、例えば、クライアント端末２００からのリクエストメッセージのＵｓｅｒ－Ａｇｅｎｔヘッダから取得するなど、公知の技術により取得することができる。なお、ここでのデバイスの種類に係る情報には、機器の種別の他に、例えば、ＯＳ、Ｗｅｂブラウザやそのバージョン等の情報も含まれるものとする。
　コンポーネントビュー１７０では、渡されたレイアウト１８０および各コンポーネント１９０について、それぞれ、デバイスの種類に対応したテンプレート１８１および１９１を取得して、テンプレートに規定されているデザインに従ってデータを含めた画面描画を行う。例えば、各コンポーネント１９０については、デバイスの種類（図６の例ではスマートフォン）に対応したテンプレート（スマホ用）１９１ｓを取得して、これに規定されているデザインに基づいてデータを含めてコンポーネント１９０を画面描画する（図６の例では検索結果の一覧表示）。また、レイアウト１８０については、テンプレート１８１ｓを取得して、これに規定されているデザインに基づいて各領域を描画するとともに、指定された領域の位置に画面描画された各コンポーネント１９０を配置する（図６の例では検索結果領域４１６に検索結果の一覧表示を配置する）。
　以上に説明したように、本発明の一実施の形態であるＷｅｂサーバシステム１００によれば、画面パーツをコンポーネント化するとともに、コンポーネント１９０が配置される１つ以上の領域からなるレイアウト１８０のパターンを有している。そして、各レイアウト１８０および各コンポーネント１９０は、それぞれ、デバイス毎に最適化された画面出力をするように作成されたテンプレート１８１、１９１を有しており、Ｗｅｂサーバシステム１００は、これらのテンプレートを処理するテンプレートエンジン１７１を有するコンポーネントビュー１７０を備える。
　これにより、画面のレイアウトおよびコンポーネントが部品化され、エディットビュー１６０のソースコードにおいてこれらを呼び出すことにより、デバイスに応じて最適化された画面表示を動的に行うことが可能となる。すなわち、画面開発者は、デバイス毎の相違を意識することなくエディットビュー１６０のソースコードを作成することができる。さらに、レイアウト１８０やコンポーネント１９０におけるデータの処理や振る舞いを制御する機能と、テンプレート１８１、１９１によって規定されるデザイン（ＨＴＭＬやＣＳＳ（Cascading Style Sheets）など）とを分離することで、デザイナーによる開発成果物を画面パーツとして容易に取り込むことが可能となる。
　以上、本発明者によってなされた発明を実施の形態に基づき具体的に説明したが、本発明は上記の実施の形態に限定されるものではなく、その要旨を逸脱しない範囲で種々変更可能であることはいうまでもない。例えば、上記の実施の形態は本発明を分かりやすく説明するために詳細に説明したものであり、必ずしも説明した全ての構成を備えるものに限定されるものではない。また、上記の実施の形態の構成の一部について、他の構成の追加・削除・置換をすることが可能である。
　本発明は、マルチデバイスに対応した画面表示を行うＷｅｂアプリケーションを実行するＷｅｂサーバシステムに利用可能である。
１００…Ｗｅｂサーバシステム、１１０…Ｗｅｂサーバプログラム、１２０…言語処理系、１３０…フレームワーク、１４０…コントローラ、１５０…モデル、１６０…エディットビュー、１７０…コンポーネントビュー、１７１…テンプレートエンジン、１８０…レイアウト、１８１ｐ…テンプレート（ＰＣ用）、１８１ｓ…テンプレート（スマホ用）、１８１ｔ…テンプレート（タブレット用）、１９０…コンポーネント、１９１ｐ…テンプレート（ＰＣ用）、１９１ｓ…テンプレート（スマホ用）、１９１ｔ…テンプレート（タブレット用）、
２００…クライアント端末、
３００…ＢＬサーバ
４０１…ヘッダ領域、４０２…一覧領域、４０３…コンテンツ領域、４０４…フッタ領域、４０５…検索条件領域、４０６…検索結果領域、４１１、４１１’…ヘッダ領域、４１２…一覧領域、４１３…コンテンツ領域、４１４…フッタ領域、４１５…検索条件領域、４１６…検索結果領域
 
 
 
 
 
 
 
 

Claims (2)

  1. 　クライアント端末からのリクエストを受けて、ビジネスロジックを実行し、前記クライアント端末のデバイスの種類に応じた処理結果画面を応答するＷｅｂサーバシステムであって、
    　１つ以上の画面パーツの組み合わせからなり、前記各画面パーツが画面表示される際の外観を前記デバイスの種類毎に規定した第１のテンプレートを有するコンポーネントと、
    　前記処理結果画面上において前記コンポーネントが配置される１つ以上の領域の配置パターンからなり、前記各領域が画面表示される際の外観を前記デバイスの種類毎に規定した第２のテンプレートを有するレイアウトと、
    　前記処理結果画面に適用する前記レイアウトと、前記レイアウトに配置する前記コンポーネントを取得し、取得した前記コンポーネントに対して前記ビジネスロジックの実行により得られるデータを設定して、取得した前記レイアウトの所定の前記領域に配置されるよう位置指定するエディットビューと、
    　前記エディットビューにより取得された前記レイアウトおよび前記コンポーネントの内容に基づいて、前記クライアント端末の前記デバイスの種類に対応した前記第２のテンプレートおよび前記第１のテンプレートによって規定される外観により前記処理結果画面を作成するコンポーネントビューと、を有する、Ｗｅｂサーバシステム。
  2. 　請求項１に記載のＷｅｂサーバシステムにおいて、
    　前記レイアウトには、複数の画面の遷移にわたる前記領域の配置パターンを含む、Ｗｅｂサーバシステム。
PCT/JP2014/077363 2014-10-14 2014-10-14 Ｗｅｂサーバシステム WO2016059677A1 (ja)

Priority Applications (2)

Application Number Priority Date Filing Date Title
PCT/JP2014/077363 WO2016059677A1 (ja) 2014-10-14 2014-10-14 Ｗｅｂサーバシステム
JP2016553778A JP6318261B2 (ja) 2014-10-14 2014-10-14 Ｗｅｂサーバシステム

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
PCT/JP2014/077363 WO2016059677A1 (ja) 2014-10-14 2014-10-14 Ｗｅｂサーバシステム

Publications (1)

Publication Number Publication Date
WO2016059677A1 true WO2016059677A1 (ja) 2016-04-21

Family

ID=55746247

Family Applications (1)

Application Number Title Priority Date Filing Date
PCT/JP2014/077363 WO2016059677A1 (ja) 2014-10-14 2014-10-14 Ｗｅｂサーバシステム

Country Status (2)

Country Link
JP (1) JP6318261B2 (ja)
WO (1) WO2016059677A1 (ja)

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
WO2018123182A1 (ja) * 2016-12-26 2018-07-05 パナソニックＩｐマネジメント株式会社 表示システム
JP6464408B1 (ja) * 2017-11-02 2019-02-06 株式会社リクルート 順番管理システム

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
JP2002259283A (ja) * 2001-03-01 2002-09-13 Sanyo Electric Co Ltd データ提供装置及びデータ提供方法並びにプログラム
JP2003186794A (ja) * 2001-12-13 2003-07-04 Fujitsu Ltd 情報提供プログラム，情報提供プログラムを記録したコンピュータ読取可能な記録媒体及び情報提供装置
JP2005064755A (ja) * 2003-08-08 2005-03-10 Canon Inc リモート制御システム、リモート制御装置、リモート制御端末、被制御装置、リモート制御方法及びプログラム
JP2012247927A (ja) * 2011-05-26 2012-12-13 Hitachi Ltd 画面生成システム、画面生成方法、および画面生成プログラム

Family Cites Families (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
JP4854260B2 (ja) * 2005-10-18 2012-01-18 キヤノン株式会社 リモート操作端末装置

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
JP2002259283A (ja) * 2001-03-01 2002-09-13 Sanyo Electric Co Ltd データ提供装置及びデータ提供方法並びにプログラム
JP2003186794A (ja) * 2001-12-13 2003-07-04 Fujitsu Ltd 情報提供プログラム，情報提供プログラムを記録したコンピュータ読取可能な記録媒体及び情報提供装置
JP2005064755A (ja) * 2003-08-08 2005-03-10 Canon Inc リモート制御システム、リモート制御装置、リモート制御端末、被制御装置、リモート制御方法及びプログラム
JP2012247927A (ja) * 2011-05-26 2012-12-13 Hitachi Ltd 画面生成システム、画面生成方法、および画面生成プログラム

Cited By (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
WO2018123182A1 (ja) * 2016-12-26 2018-07-05 パナソニックＩｐマネジメント株式会社 表示システム
JPWO2018123182A1 (ja) * 2016-12-26 2019-10-31 パナソニックＩｐマネジメント株式会社 表示システム
US10838593B2 (en) 2016-12-26 2020-11-17 Panasonic Intellectual Property Management Co., Ltd. Display system
JP6464408B1 (ja) * 2017-11-02 2019-02-06 株式会社リクルート 順番管理システム
WO2019088236A1 (ja) * 2017-11-02 2019-05-09 株式会社リクルート 順番管理システム
JP2019086882A (ja) * 2017-11-02 2019-06-06 株式会社リクルート 順番管理システム

Also Published As

Publication number Publication date
JPWO2016059677A1 (ja) 2017-05-18
JP6318261B2 (ja) 2018-04-25

Similar Documents

Publication Publication Date Title
JP6263282B2 (ja) 開発支援システム
US10185819B2 (en) Extension configuration and interaction
US20200326914A1 (en) Creating an app method and system
KR101416104B1 (ko) 하이브리드 웹 어플리케이션의 네이티브 기능을 수행하는 자바스크립트 코드의 동적 로딩 장치와 방법
US9460230B1 (en) Method and system for visual styling of visual elements for applications
CN104866327A (zh) 一种php开发方法及框架
JP6750124B2 (ja) 端末装置、ｕｉ拡張方法及びｕｉ拡張プログラム
CN108664242B (zh) 生成可视化界面的方法、装置、电子设备和可读存储介质
JP6318261B2 (ja) Ｗｅｂサーバシステム
CN113778405A (zh) 一种跨平台app构建方法、装置、系统及介质
US20210271458A1 (en) Managing an app method and system
JP6212657B2 (ja) 開発支援システム
JP7294609B2 (ja) ソフトウェアの操作シナリオの生成を支援するプログラム、方法およびソフトウェアの操作シナリオの生成を支援する装置
KR102385381B1 (ko) 카메라 이펙트를 위한 스크립트 생성 방법 및 시스템
JP6676122B2 (ja) 高速のローディング速度を有するコンポーネント生成方法
Pham React Concurrent Mode: mechanisms, patterns and application
CN117591115A (zh) 一种用户界面生成方法、装置、设备及介质
Kmjetin et al. Scripting framework for graphical configuration tool for embedded devices
KR20150097201A (ko) 애플리케이션 개발 환경 제공 시스템
CN116932391A (zh) 一种嵌入html5的第三方应用程序调试方法及系统
Xu et al. The Technique of GIS Desktop Secondary Development
CN110837402A (zh) 终端屏幕编排方法和系统
JP2016153997A (ja) ソフトウェア開発システム
KR20150097200A (ko) 애플리케이션 개발 환경 제공 시스템
KR20150097198A (ko) 애플리케이션 개발 환경 제공 시스템

Legal Events

Date Code Title Description
121 Ep: the epo has been informed by wipo that ep was designated in this application

Ref document number: 14903933

Country of ref document: EP

Kind code of ref document: A1

ENP Entry into the national phase

Ref document number: 2016553778

Country of ref document: JP

Kind code of ref document: A

NENP Non-entry into the national phase

Ref country code: DE

122 Ep: pct application non-entry in european phase

Ref document number: 14903933

Country of ref document: EP

Kind code of ref document: A1