JP6338935B2

JP6338935B2 - Web page providing system, web page providing method, program, and communication apparatus

Info

Publication number: JP6338935B2
Application number: JP2014120704A
Authority: JP
Inventors: 昌弘古市
Original assignee: NTT Data Corp
Current assignee: NTT Data Corp
Priority date: 2014-06-11
Filing date: 2014-06-11
Publication date: 2018-06-06
Anticipated expiration: 2034-06-11
Also published as: JP2016001382A

Description

本発明は、ウェブページを提供する方法に関する。 The present invention relates to a method for providing a web page.

現在のモバイル端末向けのＷｅｂアプリケーションは、デファクトスタンダードになりつつあるjQuery Mobileに代表されるモバイル端末向けのJavaScript（登録商標）のライブラリを利用して開発するのが一般的である。このライブラリを利用してＷｅｂアプリケーションを開発する場合、ライブラリで決められているＨＴＭＬ（HyperText Markup Language）要素や属性を使ってＷｅｂページを記述することになる。このライブラリでは様々なコントロールを追加のライブラリ（すなわち、プラグイン）として使えるようになっており、これらを組み込むことでモバイル端末に適した入力方法を実現できるようになっている。 In general, a web application for a mobile terminal is developed using a JavaScript (registered trademark) library for a mobile terminal represented by jQuery Mobile, which is becoming the de facto standard. When developing a Web application using this library, a Web page is described using HTML (HyperText Markup Language) elements and attributes determined by the library. In this library, various controls can be used as additional libraries (that is, plug-ins). By incorporating these controls, an input method suitable for a mobile terminal can be realized.

また、様々なデバイスの画面サイズに合わせて表示を最適に変更する考え方であるレスポンシブＷｅｂデザインに基づいて、様々な画面サイズごとにＣＳＳ（Cascading Style Sheet）を用意することで１つのＷｅｂアプリケーションで画面サイズの異なるデバイスをサポートできるようにしている（例えば、特許文献１参照）。 Moreover, based on the responsive web design, which is the idea of optimally changing the display according to the screen size of various devices, it is possible to create a single web application with a CSS (Cascading Style Sheet) for each screen size. It is possible to support devices of different sizes (see, for example, Patent Document 1).

特開２００１−２３６２０２号公報JP 2001-236202 A

しかし、従来のＣＳＳを使ったＷｅｂアプリケーションの変更の場合、コントロールの見た目を変更することはできるが、コントロール自体をデバイスごとで変えることはできない。例えば、テキスト入力フィールド、ボタン及びリストボックスは、ＰＣ（Personal Computer）とタブレット端末との間で見た目を変更することはできるが、コントロール自体はそのままである。よって、例えば、ＰＣではテキスト入力フィールドに対してキーボードを使って住所を入力する一方で、タブレット端末では地図を表示してタップした場所の住所を自動入力するといった、デバイスごとに異なるコントロールの適用はできない。 However, in the case of changing the Web application using the conventional CSS, the appearance of the control can be changed, but the control itself cannot be changed for each device. For example, a text input field, a button, and a list box can be changed in appearance between a PC (Personal Computer) and a tablet terminal, but the control itself is not changed. Therefore, for example, while using a PC to input an address using a keyboard in a text input field, a tablet device displays a map and automatically inputs the address of the tapped place. Can not.

本発明は、このような事情に鑑みてなされたものであり、通信装置やそのユーザの属性に応じてウェブページのユーザインタフェース要素を追加、変換又は非表示化することを目的とする。 The present invention has been made in view of such circumstances, and an object of the present invention is to add, convert, or hide a user interface element of a web page in accordance with the attributes of a communication device or its user.

上記の課題を解決するため、本発明は、ユーザインタフェース要素を含むウェブページを通信装置に対して提供するウェブページ提供部と、前記通信装置の属性又は当該通信装置のユーザの属性を示す属性情報を取得する属性情報取得部と、前記ウェブページ提供部により提供されるウェブページに対して、ユーザインタフェース要素の追加、置換又は非表示化を行うための処理が実行される際に参照されるルールであって、前記属性情報取得部により取得された属性情報に対応するルールを前記通信装置に提供するルール提供部とを備えるウェブページ提供システムを提供する。 In order to solve the above problems, the present invention provides a web page providing unit that provides a communication device with a web page including a user interface element, and attribute information indicating an attribute of the communication device or an attribute of a user of the communication device And a rule that is referred to when processing for adding, replacing, or hiding a user interface element is performed on a web page provided by the attribute information obtaining unit and the web page providing unit. And a web page provision system provided with the rule provision part which provides the rule corresponding to the attribute information acquired by the said attribute information acquisition part to the said communication apparatus is provided.

好ましい態様において、前記属性情報は、前記通信装置により表示される画面のサイズを示す情報と、前記通信装置が備える機能の種類を示す情報と、前記通信装置のユーザの性別と、前記通信装置のユーザの当該通信装置の操作の熟練度を示す情報のうちの少なくともいずれか一である。 In a preferred aspect, the attribute information includes information indicating a size of a screen displayed by the communication device, information indicating a function type included in the communication device, a gender of a user of the communication device, and information on the communication device. It is at least any one of the information which shows the skill level of operation of the said communication apparatus of a user.

さらに好ましい態様において、前記処理は、前記通信装置により表示される画面のサイズが変更されるごとに実行される。 In a further preferred aspect, the processing is executed each time the size of the screen displayed by the communication device is changed.

さらに好ましい態様において、前記ウェブページに含まれる一のユーザインタフェース要素が他のユーザインタフェース要素に変換される場合、当該一のユーザインタフェース要素に対してすでに入力されている入力値は、前記他のユーザインタフェース要素に引き継がれる。 In a further preferred aspect, when one user interface element included in the web page is converted into another user interface element, an input value already input to the one user interface element is the other user interface element. Inherit to interface elements.

また、本発明は、ウェブページ提供システムにより実行されるウェブページ提供方法であって、ユーザインタフェース要素を含むウェブページを通信装置に対して提供するステップと、前記通信装置の属性又は当該通信装置のユーザの属性を示す属性情報を取得するステップと、前記提供されるウェブページに対して、ユーザインタフェース要素の追加、置換又は非表示化を行うための処理が実行される際に参照されるルールであって、前記取得された属性情報に対応するルールを前記通信装置に提供するステップとを備えるウェブページ提供方法を提供する。 The present invention is also a web page providing method executed by a web page providing system, the step of providing a web page including a user interface element to a communication device, the attribute of the communication device, or the communication device A step of acquiring attribute information indicating a user attribute and a rule referred to when a process for adding, replacing, or hiding a user interface element is executed on the provided web page; Providing a rule corresponding to the acquired attribute information to the communication device.

また、本発明は、コンピュータに、ユーザインタフェース要素を含むウェブページを通信装置に対して提供するステップと、前記通信装置の属性又は当該通信装置のユーザの属性を示す属性情報を取得するステップと、前記提供されるウェブページに対して、ユーザインタフェース要素の追加、置換又は非表示化を行うための処理が実行される際に参照されるルールであって、前記取得された属性情報に対応するルールを前記通信装置に提供するステップとを実行させるためのプログラムを提供する。 Further, the present invention provides a computer with a web page including a user interface element to a communication device, and acquires attribute information indicating the attribute of the communication device or the user of the communication device; A rule that is referred to when a process for adding, replacing, or hiding a user interface element is performed on the provided web page, the rule corresponding to the acquired attribute information Is provided to the communication device.

また、本発明は、ユーザインタフェース要素を含むウェブページを取得するウェブページ取得部と、自装置の属性又は自装置のユーザの属性を示す属性情報を取得する属性情報取得部と、前記属性情報取得部により取得された属性情報に対応するルールを取得するルール取得部と、前記ルール取得部により取得されたルールに従って、前記ウェブページ取得部により取得されたウェブページに対して、ユーザインタフェース部品の追加、置換又は非表示化を行うための処理を実行する処理実行部と、前記処理実行部により処理を実行されたウェブページを表示部を制御して表示させる表示制御部とを備える通信装置を提供する。 The present invention also provides a web page acquisition unit that acquires a web page including a user interface element, an attribute information acquisition unit that acquires attribute information indicating an attribute of the own device or an attribute of the user of the own device, and the attribute information acquisition. A rule acquisition unit for acquiring a rule corresponding to the attribute information acquired by the unit, and addition of a user interface component to the web page acquired by the web page acquisition unit according to the rule acquired by the rule acquisition unit A communication apparatus comprising: a process execution unit that executes a process for performing replacement or non-display; and a display control unit that controls a display unit to display a web page that has been processed by the process execution unit To do.

本発明によれば、通信装置やそのユーザの属性に応じてウェブページのユーザインタフェース要素を追加、変換又は非表示化することができる。 According to the present invention, a user interface element of a web page can be added, converted, or hidden according to the attributes of a communication device or its user.

Ｗｅｂページ変換システム１の構成の一例を示す図である。1 is a diagram illustrating an example of a configuration of a web page conversion system 1. FIG. 要素変換ルールファイルのフォーマットの一例を示す図である。It is a figure which shows an example of a format of an element conversion rule file. 要素変換ルールファイルの具体例を示す図である。It is a figure which shows the specific example of an element conversion rule file. プレ処理のルール定義の一例を示す図である。It is a figure which shows an example of the rule definition of a pre process. ポスト処理のルール定義の一例を示す図である。It is a figure which shows an example of the rule definition of a post process. 属性削除ルールのルール定義の一例を示す図である。It is a figure which shows an example of the rule definition of an attribute deletion rule. 図６に示される属性削除ルールを用いたＷｅｂページデータの変換の一例を示す図である。It is a figure which shows an example of conversion of the web page data using the attribute deletion rule shown by FIG. 属性削除ルールのルール定義の他の例を示す図である。It is a figure which shows the other example of a rule definition of an attribute deletion rule. 図８に示される属性削除ルールを用いたＷｅｂページデータの変換の一例を示す図である。It is a figure which shows an example of conversion of Web page data using the attribute deletion rule shown by FIG. 属性追加ルールのルール定義の一例を示す図である。It is a figure which shows an example of the rule definition of an attribute addition rule. 図１０に示される属性追加ルールを用いたＷｅｂページデータの変換の一例を示す図である。It is a figure which shows an example of conversion of Web page data using the attribute addition rule shown by FIG. 属性追加ルールのルール定義の他の例を示す図である。It is a figure which shows the other example of a rule definition of an attribute addition rule. 図１２に示される属性追加ルールを用いたＷｅｂページデータの変換の一例を示す図である。It is a figure which shows an example of conversion of Web page data using the attribute addition rule shown by FIG. 要素非表示ルールのルール定義の一例を示す図である。It is a figure which shows an example of the rule definition of an element non-display rule. 図１４に示される要素非表示ルールを用いたＷｅｂページデータの変換の一例を示す図である。It is a figure which shows an example of conversion of the web page data using the element non-display rule shown by FIG. 要素追加ルールのルール定義の一例を示す図である。It is a figure which shows an example of the rule definition of an element addition rule. 図１６に示される要素追加ルールを用いたＷｅｂページデータの変換の一例を示す図である。It is a figure which shows an example of conversion of Web page data using the element addition rule shown by FIG. 要素追加ルールのルール定義の他の例を示す図である。It is a figure which shows the other example of a rule definition of an element addition rule. 図１８に示される要素追加ルールを用いたＷｅｂページデータの変換の一例を示す図である。It is a figure which shows an example of conversion of the web page data using the element addition rule shown by FIG. 要素置換ルールのルール定義の一例を示す図である。It is a figure which shows an example of the rule definition of an element replacement rule. 図２０に示される要素置換ルールを用いたＷｅｂページデータの変換の一例を示す図である。It is a figure which shows an example of conversion of the web page data using the element substitution rule shown by FIG. 要素置換ルールのルール定義の他の例を示す図である。It is a figure which shows the other example of a rule definition of an element replacement rule. 図２２に示される要素置換ルールを用いたＷｅｂページデータの変換の一例を示す図である。It is a figure which shows an example of conversion of the web page data using the element substitution rule shown by FIG. 独自処理ルールのルール定義の一例を示す図である。It is a figure which shows an example of the rule definition of an original process rule. 図２４に示される独自処理ルールを用いたＷｅｂページデータの変換の一例を示す図である。It is a figure which shows an example of conversion of the web page data using the original process rule shown by FIG. 組込処理ルールのルール定義の一例を示す図である。It is a figure which shows an example of the rule definition of a built-in process rule. 図２６に示される組込処理ルールを用いたＷｅｂページデータの変換の一例を示す図である。It is a figure which shows an example of conversion of the web page data using the built-in process rule shown by FIG. Ｗｅｂページ表示処理の一例を示すフローチャートである。It is a flowchart which shows an example of a web page display process. Ｗｅｂページ表示処理の一例を示すフローチャートである。It is a flowchart which shows an example of a web page display process. 要素変換処理の一例を示すフローチャートである。It is a flowchart which shows an example of an element conversion process. 要素変換処理を経ていないＷｅｂページの表示例を示す図である。It is a figure which shows the example of a display of the web page which has not passed element conversion processing. 図３１に示されるＷｅｂページに適用される要素変換ルールファイルの一例を示す図である。It is a figure which shows an example of the element conversion rule file applied to the Web page shown by FIG. 図３２に示される要素変換ルールファイルが、図３１に示されるＷｅｂページに適用された場合に表示されるＷｅｂページの例を示す図である。FIG. 33 is a diagram showing an example of a Web page displayed when the element conversion rule file shown in FIG. 32 is applied to the Web page shown in FIG. 31. 図３１に示されるＷｅｂページに適用される要素変換ルールファイルの一例を示す図である。It is a figure which shows an example of the element conversion rule file applied to the Web page shown by FIG. 図３４に示される要素変換ルールファイルが、図３１に示されるＷｅｂページに適用された場合に表示されるＷｅｂページの例を示す図である。FIG. 35 is a diagram showing an example of a Web page displayed when the element conversion rule file shown in FIG. 34 is applied to the Web page shown in FIG.

１．実施形態
１−１．構成
１−１−１．Ｗｅｂページ変換システム１
図１は、本発明の一実施形態に係るＷｅｂページ変換システム１の構成の一例を示す図である。このＷｅｂページ変換システム１は、同図に示されるように、Ｗｅｂアプリケーションサーバ２と、モバイルデバイス３とを有する。Ｗｅｂアプリケーションサーバ２とモバイルデバイス３とは、インターネットや移動体通信網等により構成されるネットワーク４により接続される。 1. Embodiment 1-1. Configuration 1-1-1. Web page conversion system 1
FIG. 1 is a diagram showing an example of the configuration of a Web page conversion system 1 according to an embodiment of the present invention. The web page conversion system 1 includes a web application server 2 and a mobile device 3 as shown in FIG. The web application server 2 and the mobile device 3 are connected by a network 4 constituted by the Internet, a mobile communication network, or the like.

１−１−２．Ｗｅｂアプリケーションサーバ２
Ｗｅｂアプリケーションサーバ２は、本発明に係る「ウェブページ提供システム」の一例である。Ｗｅｂアプリケーションサーバ２は、図１に示されるように、大略、制御部２１と、記憶部２２と、通信部２３とを備える。 1-1-2. Web application server 2
The web application server 2 is an example of a “web page providing system” according to the present invention. As shown in FIG. 1, the Web application server 2 generally includes a control unit 21, a storage unit 22, and a communication unit 23.

制御部２１は、ＣＰＵ（Central Processing Unit）等の演算処理装置である。制御部２１は、図１に示されるように、Ｗｅｂページ提供部２１１と、属性情報取得部２１２と、要素変換ルール提供部２１３という機能を備える。これらの機能は、制御部２１により、記憶部２２に記憶されるプログラムが実行されることにより実現される。これらの機能については後述する。 The control unit 21 is an arithmetic processing device such as a CPU (Central Processing Unit). As shown in FIG. 1, the control unit 21 includes functions of a Web page providing unit 211, an attribute information acquiring unit 212, and an element conversion rule providing unit 213. These functions are realized by the control unit 21 executing a program stored in the storage unit 22. These functions will be described later.

記憶部２２は、ハードディスク等の記憶装置である。記憶部２２は、制御部２１により実行されるプログラムを記憶する。また、記憶部２２は、複数のＷｅｂページデータと、複数の要素変換ルールのファイルとを記憶する。 The storage unit 22 is a storage device such as a hard disk. The storage unit 22 stores a program executed by the control unit 21. The storage unit 22 stores a plurality of Web page data and a plurality of element conversion rule files.

通信部２３は、例えばネットワークカードである。通信部２３はＷｅｂアプリケーションサーバ２をネットワーク４に接続する。
以下、記憶部２２に記憶される要素変換ルールファイルについて説明する。 The communication unit 23 is, for example, a network card. The communication unit 23 connects the Web application server 2 to the network 4.
Hereinafter, the element conversion rule file stored in the storage unit 22 will be described.

要素変換ルールファイルは、専用のデザインツールを用いて事前に作成されて、記憶部２２に記憶される。各要素変換ルールファイルは、それぞれＷｅｂページの画面番号と、後述するモバイルデバイス３の画面サイズ種別と、後述するテーマとに対応づけて作成される。 The element conversion rule file is created in advance using a dedicated design tool and stored in the storage unit 22. Each element conversion rule file is created in association with the screen number of the Web page, the screen size type of the mobile device 3 described later, and the theme described later.

図２は、要素変換ルールファイルのフォーマットの一例を示す図である。同図に示される要素変換ルールファイルはＪＳＯＮ（JavaScript（登録商標） Object Notation）形式である。同ファイルでは各要素変換ルールを表すオブジェクトが縦方向に配列され、上から順番に各要素変換ルールとプレ処理及びポスト処理がＷｅｂページに適用される。なお、同ファイルの形式は、ＸＭＬ（Extensible Markup Language）形式であってもよい。 FIG. 2 is a diagram illustrating an example of the format of the element conversion rule file. The element conversion rule file shown in the figure is in JSON (JavaScript (registered trademark) Object Notation) format. In the same file, objects representing each element conversion rule are arranged in the vertical direction, and each element conversion rule and pre-processing and post-processing are applied to the Web page in order from the top. The format of the file may be an XML (Extensible Markup Language) format.

図３は、要素変換ルールファイルの具体例を示す図である。同図に示される要素変換ルールファイルを用いてＷｅｂページに対して後述する要素変換処理が実行された場合、Ｗｅｂページに対しては、プレ処理、要素非表示ルール、属性削除ルール、属性追加ルール、要素追加ルール、要素置換ルール、ポスト処理の順に適用される。
次に、各要素変換ルールとプレ処理及びポスト処理について説明する。 FIG. 3 is a diagram showing a specific example of the element conversion rule file. When an element conversion process described later is executed on a Web page using the element conversion rule file shown in the figure, pre-processing, element hiding rule, attribute deletion rule, and attribute addition rule are applied to the Web page. , Element addition rules, element replacement rules, and post processing.
Next, each element conversion rule, pre-processing, and post-processing will be described.

（１）プレ処理及びポスト処理
プレ処理は、Ｗｅｂページに対して後述する要素変換処理が実行される前に行われる処理であって、例えば、要素変換処理が完了するまでformを一旦非表示にするという処理である。ポスト処理は、Ｗｅｂページに対して後述する要素変換処理が実行された後に行われる処理であって、例えば、formを再表示して、html要素を初期化する処理である。プレ処理とポスト処理のルールフォーマットを表１に示す。 (1) Pre-processing and post-processing Pre-processing is processing that is performed before element conversion processing (described later) is performed on a Web page. For example, the form is temporarily hidden until the element conversion processing is completed. It is a process to do. The post process is a process that is performed after an element conversion process (to be described later) is executed on the Web page. For example, the post process is displayed again to initialize the html element. Table 1 shows the pre-processing and post-processing rule formats.

図４は、プレ処理のルール定義の一例を示す図である。同図に示されるルール定義は、要素変換処理が完了するまでformを一旦非表示にする処理を定義している。
図５は、ポスト処理のルール定義の一例を示す図である。同図に示されるルール定義は、id=mapviewの要素をXXXマップの要素として初期化する処理を定義している。 FIG. 4 is a diagram illustrating an example of preprocessing rule definition. The rule definition shown in the figure defines a process for temporarily hiding a form until the element conversion process is completed.
FIG. 5 is a diagram illustrating an example of a post processing rule definition. The rule definition shown in the figure defines a process for initializing an id = mapview element as an XXX map element.

（２）属性削除ルール
属性削除ルールは、元の要素（例えば、html要素。以下同じ。）の属性で、指定した属性を削除するためのルールである。または、元の要素の属性で、指定した属性以外を削除するためのルールである。属性削除ルールは、元の要素の属性で、モバイルデバイス３において不要となる属性値を取り除くために使用される。具体的には、style属性に指定される位置指定やサイズ（具体的には、absolute, top, left, bottom, right, width, height等のスタイル）等の属性値や、classに指定される一部のクラス名を削除するために使用される。属性削除ルールのルールフォーマットを表２に示す。 (2) Attribute deletion rule The attribute deletion rule is a rule for deleting a specified attribute of the original element (for example, html element; the same applies hereinafter). Or, it is a rule for deleting the attribute of the original element other than the specified attribute. The attribute deletion rule is an attribute of the original element and is used to remove an attribute value that is unnecessary in the mobile device 3. Specifically, the position specification and size specified in the style attribute (specifically, styles such as absolute, top, left, bottom, right, width, height, etc.) and one specified in the class Used to delete part class name. Table 2 shows the rule format of the attribute deletion rule.

図６は、属性削除ルールのルール定義の一例を示す図である。図７は、図６に示される属性削除ルールを用いたＷｅｂページデータの変換の一例を示す図である。図７（ａ）は変換前のＷｅｂページデータを示し、図７（ｂ）は変換後のＷｅｂページデータを示す。これら図６及び７に示される例は、id=usernameの要素で、type、name、id、class='class1' style='text-align|display'以外の属性を削除する場合について示している。 FIG. 6 is a diagram illustrating an example of the rule definition of the attribute deletion rule. FIG. 7 is a diagram showing an example of Web page data conversion using the attribute deletion rule shown in FIG. FIG. 7A shows Web page data before conversion, and FIG. 7B shows Web page data after conversion. These examples shown in FIGS. 6 and 7 show a case where an attribute other than type, name, id, class = 'class1' style = 'text-align | display' is deleted in the element of id = username.

図８は、属性削除ルールのルール定義の他の例を示す図である。図９は、図８に示される属性削除ルールを用いたＷｅｂページデータの変換の一例を示す図である。図９（ａ）は変換前のＷｅｂページデータを示し、図９（ｂ）は変換後のＷｅｂページデータを示す。これら図８及び９に示される例は、表示状態のすべてのinput要素で、class='ui-*'、data-*の属性を削除する場合について示している。 FIG. 8 is a diagram illustrating another example of the rule definition of the attribute deletion rule. FIG. 9 is a diagram showing an example of Web page data conversion using the attribute deletion rule shown in FIG. FIG. 9A shows Web page data before conversion, and FIG. 9B shows Web page data after conversion. These examples shown in FIGS. 8 and 9 show a case where the attributes of class = 'ui- *' and data- * are deleted from all input elements in the display state.

（３）属性追加ルール
属性追加ルールは、使用しているライブラリが定義している独自の属性や、通常のhtml属性を追加するためのルールである。具体的には、classの追加、data-*属性の追加や、初期値の追加等を行うために使用される。属性追加ルールのルールフォーマットを表３に示す。 (3) Attribute addition rule The attribute addition rule is a rule for adding a unique attribute defined by the library being used or a normal html attribute. Specifically, it is used to add a class, add a data- * attribute, or add an initial value. Table 3 shows the rule format of the attribute addition rule.

図１０は、属性追加ルールのルール定義の一例を示す図である。図１１は、図１０に示される属性追加ルールを用いたＷｅｂページデータの変換の一例を示す図である。図１１（ａ）は変換前のＷｅｂページデータを示し、図１１（ｂ）は変換後のＷｅｂページデータを示す。これら図１０及び１１に示される例は、id=usernameの要素に、class='mobile' data-must-input='1'の属性を追加する場合について示している。 FIG. 10 is a diagram illustrating an example of the rule definition of the attribute addition rule. FIG. 11 is a diagram showing an example of Web page data conversion using the attribute addition rule shown in FIG. FIG. 11A shows Web page data before conversion, and FIG. 11B shows Web page data after conversion. These examples shown in FIGS. 10 and 11 show a case where an attribute of class = “mobile” data-must-input = “1” is added to the element of id = username.

図１２は、属性追加ルールのルール定義の他の例を示す図である。図１３は、図１２に示される属性追加ルールを用いたＷｅｂページデータの変換の一例を示す図である。図１３（ａ）は変換前のＷｅｂページデータを示し、図１３（ｂ）は変換後のＷｅｂページデータを示す。これら図１２及び１３に示される例は、表示状態のすべてのinput要素に、class='ui-custom'の属性を追加する場合について示している。 FIG. 12 is a diagram illustrating another example of the rule definition of the attribute addition rule. FIG. 13 is a diagram showing an example of conversion of Web page data using the attribute addition rule shown in FIG. FIG. 13A shows Web page data before conversion, and FIG. 13B shows Web page data after conversion. These examples shown in FIGS. 12 and 13 show a case where the attribute of class = 'ui-custom' is added to all input elements in the display state.

（４）要素非表示ルール
要素非表示ルールは、指定された要素を非表示にするためのルールである。具体的には、モバイルデバイス３に適していないイメージ、長い説明文言、簡潔でないラベル等を非表示にするために使用される。要素非表示ルールのルールフォーマットを表４に示す。 (4) Element Hiding Rule The element hiding rule is a rule for hiding a specified element. Specifically, it is used for hiding images not suitable for the mobile device 3, long explanation words, non-concise labels, and the like. Table 4 shows the rule format of the element non-display rule.

図１４は、要素非表示ルールのルール定義の一例を示す図である。図１５は、図１４に示される要素非表示ルールを用いたＷｅｂページデータの変換の一例を示す図である。図１５（ａ）は変換前のＷｅｂページデータを示し、図１５（ｂ）は変換後のＷｅｂページデータを示す。これら図１４及び１５に示される例は、すべてのp、span、img要素を非表示にする場合について示している。 FIG. 14 is a diagram illustrating an example of the rule definition of the element non-display rule. FIG. 15 is a diagram showing an example of conversion of Web page data using the element non-display rule shown in FIG. FIG. 15A shows Web page data before conversion, and FIG. 15B shows Web page data after conversion. These examples shown in FIGS. 14 and 15 show a case where all p, span, and img elements are hidden.

（５）要素追加ルール
要素追加ルールは、新しい要素を指定した位置に追加するためのルールである。追加のパターンとしては、親要素としての追加、子要素としての追加、直前に追加、直後に追加のパターンがある。追加する要素としては、例えば、ラベル、イメージ、ヘルプへのリンクがある。要素追加ルールのルールフォーマットを表５に示す。 (5) Element addition rule The element addition rule is a rule for adding a new element to a specified position. As an additional pattern, there are addition as a parent element, addition as a child element, addition immediately before, and additional pattern immediately after. Examples of elements to be added include labels, images, and links to help. Table 5 shows the rule format of the element addition rule.

図１６は、要素追加ルールのルール定義の一例を示す図である。図１７は、図１６に示される要素追加ルールを用いたＷｅｂページデータの変換の一例を示す図である。図１７（ａ）は変換前のＷｅｂページデータを示し、図１７（ｂ）は変換後のＷｅｂページデータを示す。これら図１６及び１７に示される例は、id=usernameの要素の直前に、<label for='username'>ユーザ名</label>要素を追加する場合について示している。 FIG. 16 is a diagram illustrating an example of the rule definition of the element addition rule. FIG. 17 is a diagram showing an example of conversion of Web page data using the element addition rule shown in FIG. FIG. 17A shows Web page data before conversion, and FIG. 17B shows Web page data after conversion. The examples shown in FIGS. 16 and 17 show a case where a <label for = 'username'> user name </ label> element is added immediately before the element of id = username.

図１８は、要素追加ルールのルール定義の他の例を示す図である。図１９は、図１８に示される要素追加ルールを用いたＷｅｂページデータの変換の一例を示す図である。図１９（ａ）は変換前のＷｅｂページデータを示し、図１９（ｂ）は変換後のＷｅｂページデータを示す。これら図１８及び１９に示される例は、すべての表示状態のinput要素の親要素として、<fieldset/>要素を追加する場合について示している。 FIG. 18 is a diagram illustrating another example of the rule definition of the element addition rule. FIG. 19 is a diagram showing an example of Web page data conversion using the element addition rule shown in FIG. FIG. 19A shows Web page data before conversion, and FIG. 19B shows Web page data after conversion. The examples shown in FIGS. 18 and 19 show a case where a <fieldset /> element is added as a parent element of input elements in all display states.

（６）要素置換ルール
要素置換ルールは、指定した要素をＤＯＭ（Document Object Model）から削除して、削除した位置に新たな要素を追加するためのルールである。または、指定した要素を非表示にして、元の要素の位置に新たな要素を追加するためのルールである。新たな要素は基本的には元の属性を引き継ぐが、属性追加ルールと属性削除ルールに従って属性の追加及び削除が行われる。要素置換ルールのルールフォーマットを表６に示す。 (6) Element replacement rule The element replacement rule is a rule for deleting a specified element from a DOM (Document Object Model) and adding a new element at the deleted position. Or, it is a rule for hiding a specified element and adding a new element at the position of the original element. The new element basically takes over the original attribute, but the attribute is added and deleted according to the attribute addition rule and the attribute deletion rule. Table 6 shows the rule format of the element replacement rule.

図２０は、要素置換ルールのルール定義の一例を示す図である。図２１は、図２０に示される要素置換ルールを用いたＷｅｂページデータの変換の一例を示す図である。図２１（ａ）は変換前のＷｅｂページデータを示し、図２１（ｂ）は変換後のＷｅｂページデータを示す。これら図２０及び２１に示される例は、id="acount-type"の要素をselect要素に変換する場合について示している。 FIG. 20 is a diagram illustrating an example of the rule definition of the element replacement rule. FIG. 21 is a diagram showing an example of Web page data conversion using the element replacement rule shown in FIG. FIG. 21A shows Web page data before conversion, and FIG. 21B shows Web page data after conversion. These examples shown in FIGS. 20 and 21 show a case where an element with id = “acount-type” is converted into a select element.

図２２は、要素置換ルールのルール定義の他の例を示す図である。図２３は、図２２に示される要素置換ルールを用いたＷｅｂページデータの変換の一例を示す図である。図２３（ａ）は変換前のＷｅｂページデータを示し、図２３（ｂ）は変換後のＷｅｂページデータを示す。これら図２２及び２３に示される例は、name='acount-type'のinput type="radio"の要素をselect要素に変換する場合について示している。変換対象の要素がradioのように選択候補をもつ場合には、その選択要素がselectの選択要素として構成される。 FIG. 22 is a diagram illustrating another example of the rule definition of the element replacement rule. FIG. 23 is a diagram showing an example of Web page data conversion using the element replacement rule shown in FIG. FIG. 23A shows Web page data before conversion, and FIG. 23B shows Web page data after conversion. These examples shown in FIGS. 22 and 23 show a case where an element of input type = "radio" of name = 'acount-type' is converted into a select element. When an element to be converted has a selection candidate like radio, the selected element is configured as a selection element of select.

（７）独自処理
独自処理ルールは、指定したスクリプトを実行するためのルールである。スクリプトからは、頻繁に使用する要素変換ルールとして予め用意している関数を呼び出すことも可能である。スクリプトでは、任意の要素変換処理や属性の変更処理を行うことができる。独自処理ルールのルールフォーマットを表７に示す。 (7) Unique process The unique process rule is a rule for executing a specified script. From a script, it is possible to call a function prepared in advance as a frequently used element conversion rule. In the script, arbitrary element conversion processing and attribute change processing can be performed. Table 7 shows the rule format of the unique processing rule.

図２４は、独自処理ルールのルール定義の一例を示す図である。図２５は、図２４に示される独自処理ルールを用いたＷｅｂページデータの変換の一例を示す図である。図２５（ａ）は変換前のＷｅｂページデータを示し、図２５（ｂ）は変換後のＷｅｂページデータを示す。これら図２４及び２５に示される例は、id=account-typeの要素で、配下のoption要素でvalue=12の要素を、初期状態で選択状態とする場合について示している。 FIG. 24 is a diagram illustrating an example of the rule definition of the unique processing rule. FIG. 25 is a diagram showing an example of conversion of Web page data using the unique processing rule shown in FIG. FIG. 25A shows Web page data before conversion, and FIG. 25B shows Web page data after conversion. The examples shown in FIGS. 24 and 25 show a case where the element of id = account-type and the element of value = 12 in the subordinate option element are selected in the initial state.

（８）組込処理
組込処理ルールは、頻繁に使用する要素変換ルールや装飾処理ルールをまとめて、利用しやすくするためのルールである。具体的には、以下のような組込処理がある。
・input要素に対してlabel要素を設定し、fieldset要素でグループ化し、絶対位置指定等の不要な属性を取り除く処理。
・select要素をinput type=''radio"要素に変換する処理。
・select要素をjQuery Mobileのリストビューに変換する処理。
・住所入力用のinput要素に対して、地図表示と地点選択を実現する要素を直前に埋め込み、地図からの地点選択でinput要素に住所が反映されるスクリプトを埋め込む処理。
組込処理ルールのルールフォーマットを表８に示す。 (8) Built-in processing The built-in processing rule is a rule for making it easy to use frequently used element conversion rules and decoration processing rules. Specifically, there are the following built-in processes.
・ Process to set label element for input element, group by fieldset element, and remove unnecessary attributes such as absolute position designation.
・ Process to convert select element to input type = ”radio” element.
・ Process to convert select element to jQuery Mobile list view.
A process for embedding an element that realizes map display and point selection immediately before an input element for address input, and embedding a script that reflects the address in the input element by selecting a point from the map.
Table 8 shows the rule format of the built-in processing rule.

図２６は、組込処理ルールのルール定義の一例を示す図である。図２７は、図２６に示される組込処理ルールを用いたＷｅｂページデータの変換の一例を示す図である。図２７（ａ）は変換前のＷｅｂページデータを示し、図２７（ｂ）は変換後のＷｅｂページデータを示す。これら図２６及び２７に示される例は、labeled処理を使って、id=amountの要素に"入金金額"のラベルを付けて、全体をfieldset要素でまとめる場合について示している。
次に、制御部２１の各機能について説明する。 FIG. 26 is a diagram illustrating an example of the rule definition of the built-in processing rule. FIG. 27 is a diagram showing an example of conversion of Web page data using the built-in processing rule shown in FIG. FIG. 27A shows Web page data before conversion, and FIG. 27B shows Web page data after conversion. The examples shown in FIGS. 26 and 27 show a case where a label “added amount” is attached to the element of id = amount using the labeled process, and the whole is grouped by the fieldset element.
Next, each function of the control unit 21 will be described.

Ｗｅｂページ提供部２１１は、ユーザインタフェース要素を含むウェブページをモバイルデバイス３に対して提供する。ここで、Ｗｅｂページ（又は、ウェブページ）は、例えばＨＴＭＬやＸＨＴＭＬ（Extensible HTML）等のマークアップ言語により記述される文書である。 The web page providing unit 211 provides a web page including user interface elements to the mobile device 3. Here, the Web page (or Web page) is a document described in a markup language such as HTML or XHTML (Extensible HTML).

また、本発明に係る「ユーザインタフェース要素」とは、ユーザが情報を選択するためのユーザインタフェース要素と、ユーザが情報を入力するためのユーザインタフェース要素と、ユーザに情報を通知するためのユーザインタフェース要素の総称である。ここで、ユーザインタフェースとは、より具体的にはＧＵＩ（Graphical User Interface）である。 The “user interface element” according to the present invention is a user interface element for the user to select information, a user interface element for the user to input information, and a user interface for notifying the user of information. A generic term for elements. Here, the user interface is more specifically a GUI (Graphical User Interface).

ユーザが情報を選択するためのユーザインタフェース要素とは、具体的には、チェックボックスや、コマンドボタンや、コマンドリンクや、コンボボックスや、グループボックスや、リストボックスや、リストビューや、ラジオボタンや、スライダや、スピンコントロール等である。 Specifically, user interface elements for the user to select information include check boxes, command buttons, command links, combo boxes, group boxes, list boxes, list views, radio buttons, , Sliders, spin control, etc.

ユーザが情報を入力するためのユーザインタフェース要素とは、具体的には、検索ボックスや、テキストボックス等である。
ユーザに情報を通知するためのユーザインタフェース要素とは、具体的には、バルーンや、プログレスバーや、ステータスバーや、タブ等である。 Specifically, the user interface element for the user to input information is a search box, a text box, or the like.
Specifically, the user interface elements for notifying the user of information include a balloon, a progress bar, a status bar, a tab, and the like.

属性情報取得部２１２は、モバイルデバイス３の属性を示す属性情報を取得する。ここで、属性情報とは、本実施形態において、モバイルデバイス３により表示される画面のサイズを示す情報である。具体的には、属性情報取得部２１２は、本実施形態において、モバイルデバイス３から送信される、要素変換ルールファイルのファイル名情報を取得して、要素変換ルール提供部２１３に引き渡す。 The attribute information acquisition unit 212 acquires attribute information indicating the attributes of the mobile device 3. Here, the attribute information is information indicating the size of the screen displayed by the mobile device 3 in the present embodiment. Specifically, the attribute information acquisition unit 212 acquires the file name information of the element conversion rule file transmitted from the mobile device 3 in this embodiment, and passes it to the element conversion rule provision unit 213.

要素変換ルール提供部２１３は、Ｗｅｂページ提供部２１１により提供されるウェブページに対して、ユーザインタフェース要素の追加、置換又は非表示化を行うための処理が実行される際に参照されるルールであって、前記属性情報取得部２１２により取得された属性情報に対応するルールをモバイルデバイス３に提供する。ここで、ユーザインタフェース要素の追加、置換又は非表示化を行うための処理は、後述する要素変換処理（特に、要素追加、要素置換又は要素非表示の処理）に相当する。また、当該ルールは、本実施形態において要素変換ルール（特に、要素追加ルール、要素置換ルール又は要素非表示ルール）に相当する。 The element conversion rule providing unit 213 is a rule that is referred to when a process for adding, replacing, or hiding a user interface element is executed on a web page provided by the web page providing unit 211. Then, a rule corresponding to the attribute information acquired by the attribute information acquisition unit 212 is provided to the mobile device 3. Here, processing for adding, replacing, or hiding user interface elements corresponds to element conversion processing (particularly, element addition, element replacement, or element non-display). Further, the rule corresponds to an element conversion rule (particularly, an element addition rule, an element replacement rule, or an element non-display rule) in the present embodiment.

１−１−３．モバイルデバイス３
モバイルデバイス３は、本発明に係る「通信装置」の一例である。モバイルデバイス３は、具体的には、スマートフォンやタブレット端末等の携帯端末である。モバイルデバイス３は、図１に示されるように、大略、制御部３１と、記憶部３２と、タッチパネル３３と、通信部３４とを備える。 1-1-3. Mobile device 3
The mobile device 3 is an example of a “communication device” according to the present invention. Specifically, the mobile device 3 is a mobile terminal such as a smartphone or a tablet terminal. As shown in FIG. 1, the mobile device 3 generally includes a control unit 31, a storage unit 32, a touch panel 33, and a communication unit 34.

制御部３１は、ＣＰＵ等の演算処理装置である。制御部３１は、図１に示されるように、Ｗｅｂページ取得部３１１と、画面サイズ種別特定部３１２と、テーマ特定部３１３と、ファイル名決定部３１４と、要素変換ルール取得部３１５と、要素変換部３１６と、表示制御部３１７という機能を有する。これらの機能は、制御部３１により、記憶部３２に記憶されるプログラム（具体的には、Ｗｅｂブラウザ）が実行されることにより実現される。これらの機能については後述する。 The control unit 31 is an arithmetic processing device such as a CPU. As shown in FIG. 1, the control unit 31 includes a Web page acquisition unit 311, a screen size type identification unit 312, a theme identification unit 313, a file name determination unit 314, an element conversion rule acquisition unit 315, an element It has functions of a conversion unit 316 and a display control unit 317. These functions are realized by the control unit 31 executing a program (specifically, a Web browser) stored in the storage unit 32. These functions will be described later.

記憶部３２は、フラッシュメモリ等の記憶装置である。記憶部３２は、制御部３１により実行されるプログラム（具体的には、Ｗｅｂブラウザ）を記憶する。また、記憶部３２は、jQuery Mobile等のライブラリと、各種プラグインとを記憶する。jQuery Mobile等のライブラリと各種プラグインとは、Ｗｅｂアプリケーションサーバ２からダウンロードされて記憶部３２に記憶される。 The storage unit 32 is a storage device such as a flash memory. The storage unit 32 stores a program (specifically, a web browser) executed by the control unit 31. The storage unit 32 stores a library such as jQuery Mobile and various plug-ins. Libraries such as jQuery Mobile and various plug-ins are downloaded from the Web application server 2 and stored in the storage unit 32.

タッチパネル３３は、本発明に係る「表示部」の一例である。タッチパネル３３は、液晶ディスプレイと、液晶ディスプレイ上に配置されたタッチセンサとを備え、Ｗｅｂページを表示するとともに、ユーザからの入力操作を受け付ける。
通信部３４は、例えばネットワークカードである。通信部３４はモバイルデバイス３をネットワーク４に接続する。
次に、制御部３１の各機能について説明する。 The touch panel 33 is an example of the “display unit” according to the present invention. The touch panel 33 includes a liquid crystal display and a touch sensor disposed on the liquid crystal display, displays a web page, and accepts an input operation from a user.
The communication unit 34 is a network card, for example. The communication unit 34 connects the mobile device 3 to the network 4.
Next, each function of the control unit 31 will be described.

Ｗｅｂページ取得部３１１は、ユーザインタフェース要素を含むウェブページを取得する。 The web page acquisition unit 311 acquires a web page including user interface elements.

画面サイズ種別特定部３１２は、モバイルデバイス３により表示される画面のサイズを示す情報を取得する。具体的には、画面サイズ種別特定部３１２は、Ｗｅｂページ取得部３１１により取得されたＷｅｂページにその識別情報が記述されているプログラムを実行することにより、当該情報を取得する。 The screen size type identification unit 312 acquires information indicating the size of the screen displayed by the mobile device 3. Specifically, the screen size type identification unit 312 acquires the information by executing a program in which the identification information is described in the Web page acquired by the Web page acquisition unit 311.

テーマ特定部３１３は、モバイルデバイス３のユーザが所望するユーザインタフェース要素の種類を示すテーマを特定する。 The theme specifying unit 313 specifies a theme indicating the type of user interface element desired by the user of the mobile device 3.

ファイル名決定部３１４は、Ｗｅｂページ取得部３１１により取得されたＷｅｂページの画面番号と、画面サイズ種別特定部３１２により特定された画面サイズ種別と、テーマ特定部３１３により特定されたテーマとに基づいて、要素変換ルールファイルのファイル名を決定する。 The file name determination unit 314 is based on the screen number of the Web page acquired by the Web page acquisition unit 311, the screen size type specified by the screen size type specifying unit 312, and the theme specified by the theme specifying unit 313. To determine the file name of the element conversion rule file.

要素変換ルール取得部３１５は、画面サイズ種別特定部３１２により特定された画面サイズ種別に対応するルールを取得する。より具体的には、ファイル名決定部３１４により決定されたファイル名を有する要素変換ルールファイルを取得する。 The element conversion rule acquisition unit 315 acquires a rule corresponding to the screen size type specified by the screen size type specification unit 312. More specifically, the element conversion rule file having the file name determined by the file name determination unit 314 is acquired.

要素変換部３１６は、要素変換ルール取得部３１５により取得されたルールに従って、Ｗｅｂページ取得部３１１により取得されたウェブページに対して、ユーザインタフェース部品の追加、置換又は非表示化を行うための処理を実行する。ここで、当該ルールは、本実施形態において要素変換ルール（特に、要素追加ルール、要素置換ルール又は要素非表示ルール）に相当する。また、ユーザインタフェース要素の追加、置換又は非表示化を行うための処理は、後述する要素変換処理（特に、要素追加、要素置換又は要素非表示の処理）に相当する。 The element conversion unit 316 performs processing for adding, replacing, or hiding user interface components for the web page acquired by the web page acquisition unit 311 in accordance with the rule acquired by the element conversion rule acquisition unit 315. Execute. Here, the rule corresponds to an element conversion rule (particularly, an element addition rule, an element replacement rule, or an element non-display rule) in the present embodiment. The process for adding, replacing, or hiding user interface elements corresponds to an element conversion process (particularly, an element addition, element replacement, or element non-display process) described later.

なお、要素変換部３１６によりウェブページに含まれる一のユーザインタフェース要素が他のユーザインタフェース要素に変換される場合、当該一のユーザインタフェース要素に対してすでに入力されている入力値は、他のユーザインタフェース要素に引き継がれてもよい。 In addition, when one user interface element included in the web page is converted into another user interface element by the element conversion unit 316, an input value already input to the one user interface element is another user interface element. It may be carried over to the interface element.

また、ユーザインタフェース要素の追加、置換又は非表示化を行うための処理は、ウェブページのダウンロード時に限らず、モバイルデバイス３に表示される画面のサイズが変更されるごとに実行されてもよい。 Further, the process for adding, replacing, or hiding user interface elements is not limited to when a web page is downloaded, but may be executed every time the size of the screen displayed on the mobile device 3 is changed.

表示制御部３１７は、要素変換部３１６により処理を実行されたウェブページをタッチパネル３３を制御して表示させる。 The display control unit 317 controls the touch panel 33 to display the web page processed by the element conversion unit 316.

１−２．動作
次に、Ｗｅｂページ変換システム１の動作について説明する。具体的には、モバイルデバイス３がＷｅｂアプリケーションサーバ２からＷｅｂページをダウンロードして表示するＷｅｂページ表示処理について説明する。 1-2. Operation Next, the operation of the Web page conversion system 1 will be described. Specifically, a web page display process in which the mobile device 3 downloads and displays a web page from the web application server 2 will be described.

図２８及び２９は、Ｗｅｂページ表示処理の一例を示すフローチャートである。本処理のステップＳ１においてモバイルデバイス３のＷｅｂページ取得部３１１は、Ｗｅｂアプリケーションサーバ２からＷｅｂページをダウンロードして取得する。 28 and 29 are flowcharts showing an example of the Web page display process. In step S <b> 1 of this process, the web page acquisition unit 311 of the mobile device 3 downloads and acquires a web page from the web application server 2.

次に、モバイルデバイス３の画面サイズ種別特定部３１２は、Ｗｅｂページ取得部３１１により取得されたＷｅｂページにそのリンクが埋め込まれているスクリプトを実行して、画面サイズ種別を特定する（ステップＳ２）。具体的には、画面サイズ種別特定部３１２は、ＣＳＳのMedia Queryのwindow.matchMediaメソッドを利用して、画面サイズ種別を特定する。画面サイズ種別は、例えば「横幅≦480px」の場合はカテゴリＡに分類され、「480px＜横幅≦800px」の場合はカテゴリＢに分類され、「800px＜横幅」の場合はカテゴリＣに分類される。 Next, the screen size type specifying unit 312 of the mobile device 3 executes a script in which the link is embedded in the Web page acquired by the Web page acquiring unit 311 to specify the screen size type (step S2). . Specifically, the screen size type specifying unit 312 specifies the screen size type by using the window.matchMedia method of CSS Media Query. For example, the screen size type is classified into category A when “horizontal width ≦ 480 px”, is classified into category B when “480 px <horizontal width ≦ 800 px”, and is classified into category C when “800 px <horizontal width”. .

次に、モバイルデバイス３のテーマ特定部３１３は、Cookie又はローカルストレージに保存されている情報に基づいて、ユーザが所望するテーマを特定する（ステップＳ３）。 Next, the theme specifying unit 313 of the mobile device 3 specifies a theme desired by the user based on information stored in the cookie or the local storage (step S3).

次に、モバイルデバイス３のファイル名決定部３１４は、Ｗｅｂページ取得部３１１により取得されたＷｅｂページの画面番号と、画面サイズ種別特定部３１２により特定された画面サイズ種別と、テーマ特定部３１３により特定されたテーマとに基づいて、要素変換ルールファイルのファイル名を決定する（ステップＳ４）。例えば、画面番号が「0001」であり、画面サイズ種別が「カテゴリＡ」であり、テーマが「Ａ」である場合には、要素変換ルールファイルのファイル名は「page0001/categoryA/themeA.json」となる。 Next, the file name determination unit 314 of the mobile device 3 uses the screen number of the Web page acquired by the Web page acquisition unit 311, the screen size type specified by the screen size type specifying unit 312, and the theme specifying unit 313. Based on the identified theme, the file name of the element conversion rule file is determined (step S4). For example, when the screen number is “0001”, the screen size type is “category A”, and the theme is “A”, the file name of the element conversion rule file is “page0001 / categoryA / themeA.json” It becomes.

次に、モバイルデバイス３の要素変換ルール取得部３１５は、ファイル名決定部３１４により決定されたファイル名を有する要素変換ルールファイルをＷｅｂアプリケーションサーバ２に対して要求する（ステップＳ５）。 Next, the element conversion rule acquisition unit 315 of the mobile device 3 requests the Web application server 2 for an element conversion rule file having the file name determined by the file name determination unit 314 (step S5).

Ｗｅｂアプリケーションサーバ２の要素変換ルール提供部２１３は、このモバイルデバイス３からの要求を受けて（ステップＳ６）、当該要求に係る要素変換ルールファイルをモバイルデバイス３に対して提供する（ステップＳ７）。 The element conversion rule providing unit 213 of the Web application server 2 receives the request from the mobile device 3 (step S6), and provides the element conversion rule file related to the request to the mobile device 3 (step S7).

モバイルデバイス３の要素変換ルール取得部３１５は、当該要素変換ルールファイルをＷｅｂアプリケーションサーバ２からAjaxでダウンロードして取得する（ステップＳ８）。 The element conversion rule acquisition unit 315 of the mobile device 3 downloads and acquires the element conversion rule file from the web application server 2 using Ajax (step S8).

次に、モバイルデバイス３の要素変換部３１６は、要素変換ルール取得部３１５により取得された要素変換ルールファイルを読み込み（ステップＳ９）、当該ファイルに記述されているプレ処理を実行する（ステップＳ１０）。例えば、要素変換部３１６は、formを一旦非表示にする。 Next, the element conversion unit 316 of the mobile device 3 reads the element conversion rule file acquired by the element conversion rule acquisition unit 315 (step S9), and executes pre-processing described in the file (step S10). . For example, the element conversion unit 316 temporarily hides the form.

次に、要素変換部３１６は、この要素変換ルールファイルに記述されている各要素変換ルールに従ってＷｅｂページに対して要素変換処理を実行する（ステップＳ１１〜Ｓ１３）。 Next, the element conversion unit 316 performs element conversion processing on the Web page according to each element conversion rule described in the element conversion rule file (steps S11 to S13).

図３０は、要素変換処理の一例を示すフローチャートである。本処理のステップＳ１２１において要素変換部３１６は、要素変換ルールで指定されているセレクタに基づいて変換対象の要素を選択する。 FIG. 30 is a flowchart illustrating an example of the element conversion process. In step S121 of this process, the element conversion unit 316 selects an element to be converted based on the selector specified by the element conversion rule.

次に、要素変換部３１６は、要素変換ルールで指定されている変換の種類を特定し（ステップＳ１２２）、その種類が「属性削除」である場合には（ステップＳ１２２：「属性削除」）、要素変換ルールで指定されている属性を削除する（ステップＳ１２３）。 Next, the element conversion unit 316 identifies the type of conversion specified by the element conversion rule (step S122), and when the type is “attribute deletion” (step S122: “attribute deletion”), The attribute specified by the element conversion rule is deleted (step S123).

特定された種類が「属性追加」である場合には（ステップＳ１２２：「属性追加」）、要素変換部３１６は、要素変換ルールで指定されている属性を追加する（ステップＳ１２４）。特定された種類が「要素非表示」である場合には（ステップＳ１２２：「要素非表示」）、要素変換部３１６は、要素変換ルールで指定されている要素を非表示にする（ステップＳ１２５）。 If the identified type is “add attribute” (step S122: “add attribute”), the element conversion unit 316 adds the attribute specified by the element conversion rule (step S124). When the identified type is “element non-display” (step S122: “element non-display”), the element conversion unit 316 hides the element specified by the element conversion rule (step S125). .

特定された種類が「要素追加」である場合には（ステップＳ１２２：「要素追加」）、要素変換部３１６は、要素変換ルールで指定されている要素の直後に新たな要素を追加する（ステップＳ１２６）。特定された種類が「要素置換」である場合には（ステップＳ１２２：「要素置換」）、要素変換部３１６は、要素変換ルールで指定されている要素を他の要素で置換する（ステップＳ１２７）。 If the identified type is “element addition” (step S122: “element addition”), the element conversion unit 316 adds a new element immediately after the element specified in the element conversion rule (step S122). S126). If the identified type is “element replacement” (step S122: “element replacement”), the element conversion unit 316 replaces the element specified by the element conversion rule with another element (step S127). .

特定された種類が「独自処理」である場合には（ステップＳ１２２：「独自処理」）、要素変換部３１６は、要素変換ルールにおいて独自処理として指定されているスクリプトを実行することにより要素の編集を行う（ステップＳ１２８）。特定された種類が「組込処理」である場合には（ステップＳ１２２：「組込処理」）、要素変換部３１６は、要素変換ルールにおいて定義されている組込処理を実行する（ステップＳ１２９）。 When the identified type is “unique process” (step S122: “unique process”), the element conversion unit 316 edits the element by executing a script specified as the unique process in the element conversion rule. Is performed (step S128). When the identified type is “embedding process” (step S122: “embedding process”), the element converting unit 316 executes the incorporating process defined in the element conversion rule (step S129). .

要素変換ルールファイルに記述されるすべての要素変換ルールに従って要素変換処理が実行されると、次に要素変換部３１６は、当該ファイルに記述されているポスト処理を実行する（ステップＳ１４）。例えば、要素変換部３１６は、formの非表示を解除する。 When element conversion processing is executed according to all element conversion rules described in the element conversion rule file, the element conversion unit 316 next executes post processing described in the file (step S14). For example, the element conversion unit 316 cancels the non-display of the form.

次に、要素変換部３１６は、利用しているライブラリで初期化イベントが必要なものについて初期化イベントをトリガする（ステップＳ１５）。 Next, the element conversion unit 316 triggers an initialization event for a library in use that requires an initialization event (step S15).

次に、表示制御部３１７は、要素変換部３１６による要素変換処理等を経たＷｅｂページをタッチパネル３３を制御して表示させる（ステップＳ１６）。
以上がＷｅｂページ表示処理の説明である。 Next, the display control unit 317 controls the touch panel 33 to display a Web page that has undergone element conversion processing by the element conversion unit 316 (step S16).
The above is the description of the web page display process.

以上説明したＷｅｂページ表示処理によれば、Ｗｅｂページが提供されるモバイルデバイス３に対して当該デバイスの画面サイズ種別に対応する要素変換ルールファイルが提供され、その要素変換ルールファイルに基づいて当該Ｗｅｂページに対する要素変換処理が実行される。すなわち、モバイルデバイス３の画面サイズに応じたＷｅｂページの要素及び属性の変換が可能となる。
以下、このＷｅｂページ表示処理の効果について具体例を挙げて説明する。 According to the Web page display process described above, an element conversion rule file corresponding to the screen size type of the device is provided to the mobile device 3 to which the Web page is provided, and the Web is displayed based on the element conversion rule file. Element conversion processing for the page is executed. That is, it is possible to convert Web page elements and attributes according to the screen size of the mobile device 3.
Hereinafter, the effect of this Web page display process will be described with a specific example.

図３１は、上記の要素変換処理を経ていないＷｅｂページの表示例を示す図である。
図３２は、モバイルデバイス３の画面が比較的小さい場合（例えば、モバイルデバイス３がスマートフォンである場合）に、図３１に示されるＷｅｂページに適用される要素変換ルールファイルの一例を示す図である。図３３は、図３２に示される要素変換ルールファイルが、図３１に示されるＷｅｂページに適用された場合に表示されるＷｅｂページの例を示す図である。
図３１乃至３３によれば、特に、図３２に示される独自処理ルール３がＷｅｂページに適用されることにより、図３１に示されるテキストボックスＴＢが、図３３においてラジオボタンＲＢに変更されていることがわかる。 FIG. 31 is a diagram showing a display example of a Web page that has not undergone the above element conversion processing.
FIG. 32 is a diagram showing an example of an element conversion rule file applied to the Web page shown in FIG. 31 when the screen of the mobile device 3 is relatively small (for example, when the mobile device 3 is a smartphone). . FIG. 33 is a diagram showing an example of a Web page displayed when the element conversion rule file shown in FIG. 32 is applied to the Web page shown in FIG.
31 to 33, the text box TB shown in FIG. 31 is changed to the radio button RB in FIG. 33 by applying the unique processing rule 3 shown in FIG. 32 to the Web page. I understand that.

これに対して、図３４は、モバイルデバイス３の画面が比較的大きい場合（例えば、モバイルデバイス３がタブレット端末である場合）に、図３１に示されるＷｅｂページに適用される要素変換ルールファイルの一例を示す図である。図３５は、図３４に示される要素変換ルールファイルが、図３１に示されるＷｅｂページに適用された場合に表示されるＷｅｂページの例を示す図である。
図３１、３４及び３５によれば、特に、図３４に示される独自処理ルール６がＷｅｂページに適用されることにより、図３１に示されるテキストボックスＴＢが、図３３に示される場合とは異なり、図３５においてセレクトボックスＳＢに変更されていることがわかる。 On the other hand, FIG. 34 shows an element conversion rule file applied to the Web page shown in FIG. 31 when the screen of the mobile device 3 is relatively large (for example, when the mobile device 3 is a tablet terminal). It is a figure which shows an example. FIG. 35 is a diagram showing an example of a Web page displayed when the element conversion rule file shown in FIG. 34 is applied to the Web page shown in FIG.
According to FIGS. 31, 34 and 35, the text box TB shown in FIG. 31 is different from the case shown in FIG. 33 because the unique processing rule 6 shown in FIG. 34 is applied to the Web page. FIG. 35 shows that the selection box SB has been changed.

２．変形例
上記の実施形態は、以下のように変形してもよい。また、以下の変形例は互いに組み合わせてもよい。 2. Modifications The above embodiment may be modified as follows. Further, the following modifications may be combined with each other.

２−１．変形例１
上記の実施形態においてＷｅｂアプリケーションサーバ２の属性情報取得部２１２は、モバイルデバイス３により表示される画面のサイズを示す情報に代えて、モバイルデバイス３が備える機能の種類を示す情報を属性情報として取得してもよい。具体的には、音声入力機能の有無を示す情報を取得してもよい。 2-1. Modification 1
In the above embodiment, the attribute information acquisition unit 212 of the Web application server 2 acquires, as attribute information, information indicating the type of function of the mobile device 3 instead of information indicating the size of the screen displayed by the mobile device 3. May be. Specifically, information indicating the presence or absence of the voice input function may be acquired.

また、属性情報取得部２１２は、モバイルデバイス３の属性情報に代えて、モバイルデバイス３のユーザの属性情報を取得してもよい。具体的には、当該ユーザの性別や、当該ユーザのモバイルデバイス３の操作の熟練度を示す情報を取得してもよい。 Further, the attribute information acquisition unit 212 may acquire the attribute information of the user of the mobile device 3 instead of the attribute information of the mobile device 3. Specifically, information indicating the gender of the user and the skill level of the user's operation of the mobile device 3 may be acquired.

２−２．変形例２
上記の実施形態又は変形例１に係るＷｅｂアプリケーションサーバ２の制御部２１により実行されるプログラムは、コンピュータ装置が読み取り可能な記録媒体を介して提供されてもよい。ここで、記録媒体とは、例えば、磁気テープや磁気ディスクなどの磁気記録媒体や、光ディスクなどの光記録媒体や、光磁気記録媒体や、半導体メモリ等である。また、このプログラムは、インターネット等のネットワークを介して提供されてもよい。 2-2. Modification 2
The program executed by the control unit 21 of the Web application server 2 according to the above-described embodiment or modification 1 may be provided via a computer-readable recording medium. Here, the recording medium is, for example, a magnetic recording medium such as a magnetic tape or a magnetic disk, an optical recording medium such as an optical disk, a magneto-optical recording medium, or a semiconductor memory. In addition, this program may be provided via a network such as the Internet.

同様に、上記の実施形態又は変形例１に係るモバイルデバイス３の制御部３１により実行されるプログラムは、コンピュータ装置が読み取り可能な記録媒体を介して提供されてもよい。また、同プログラムはネットワークを介して提供されてもよい。 Similarly, the program executed by the control unit 31 of the mobile device 3 according to the above-described embodiment or modification 1 may be provided via a computer-readable recording medium. The program may be provided via a network.

同プログラムによれば、例えば、ユーザインタフェース要素を含むウェブページを取得するウェブページ取得部と、自装置の属性又は自装置のユーザの属性を示す属性情報を取得する属性情報取得部と、前記属性情報取得部により取得された属性情報に対応するルールを取得するルール取得部と、前記ルール取得部により取得されたルールに従って、前記ウェブページ取得部により取得されたウェブページに対して、ユーザインタフェース部品の追加、置換又は非表示化を行うための処理を実行する処理実行部と、前記処理実行部により処理を実行されたウェブページを表示部を制御して表示させる表示制御部とを備える通信装置が実現される。 According to the program, for example, a web page acquisition unit that acquires a web page including a user interface element, an attribute information acquisition unit that acquires attribute information indicating an attribute of the own device or an attribute of a user of the own device, and the attribute A rule acquisition unit that acquires a rule corresponding to the attribute information acquired by the information acquisition unit, and a user interface component for the web page acquired by the web page acquisition unit according to the rule acquired by the rule acquisition unit Communication unit comprising: a process execution unit that executes a process for performing addition, replacement, or non-display, and a display control unit that controls a display unit to display a web page that has been processed by the process execution unit Is realized.

２−３．その他の変形例
上記の実施形態において、モバイルデバイス３に代えて、据え置き型のコンピュータを採用してもよい。
また、上記の実施形態において、Ｗｅｂアプリケーションサーバ２は、複数のサーバにより構成されるサーバシステムであってもよい。 2-3. Other Modifications In the above embodiment, a stationary computer may be employed instead of the mobile device 3.
In the above embodiment, the Web application server 2 may be a server system including a plurality of servers.

また、上記の実施形態に係るＷｅｂページ表示処理において、モバイルデバイス３の側で要素変換ルールファイルのファイル名を決定してＷｅｂアプリケーションサーバ２に通知せず、Ｗｅｂアプリケーションサーバ２の側でモバイルデバイス３から通知される画面番号と画面サイズ種別とテーマとに基づいて要素変換ルールファイルのファイル名を特定するようにしてもよい。この際、モバイルデバイス３は、画面番号や画面サイズ種別やテーマといった情報をＧＥＴメソッドやＰＯＳＴメソッドによりＷｅｂアプリケーションサーバ２に通知してもよい。 In the Web page display processing according to the above embodiment, the mobile device 3 determines the file name of the element conversion rule file and does not notify the Web application server 2, and the mobile application 3 on the Web application server 2 side. The file name of the element conversion rule file may be specified on the basis of the screen number, the screen size type, and the theme notified from. At this time, the mobile device 3 may notify the web application server 2 of information such as a screen number, a screen size type, and a theme by a GET method or a POST method.

１…Ｗｅｂページ変換システム、２…Ｗｅｂアプリケーションサーバ、３…モバイルデバイス、４…ネットワーク、２１…制御部、２２…記憶部、２３…通信部、３１…制御部、３２…記憶部、３３…タッチパネル、３４…通信部、２１１…Ｗｅｂページ提供部、２１２…属性情報取得部、２１３…要素変換ルール提供部、３１１…Ｗｅｂページ取得部、３１２…画面サイズ種別特定部、３１３…テーマ特定部、３１４…ファイル名決定部、３１５…要素変換ルール取得部、３１６…要素変換部、３１７…表示制御部 DESCRIPTION OF SYMBOLS 1 ... Web page conversion system, 2 ... Web application server, 3 ... Mobile device, 4 ... Network, 21 ... Control part, 22 ... Storage part, 23 ... Communication part, 31 ... Control part, 32 ... Storage part, 33 ... Touch panel 34, communication unit 211, Web page providing unit, 212, attribute information acquiring unit, 213, element conversion rule providing unit, 311, Web page acquiring unit, 312, screen size type specifying unit, 313, theme specifying unit, 314 ... file name determination unit, 315 ... element conversion rule acquisition unit, 316 ... element conversion unit, 317 ... display control unit

Claims

ユーザインタフェース要素を含むウェブページを通信装置に対して提供するウェブページ提供部と、
前記通信装置の属性又は当該通信装置のユーザの属性を示す属性情報を取得する属性情報取得部と、
前記ウェブページ提供部により提供されるウェブページに対して、ユーザインタフェース要素の追加、置換又は非表示化を行うための処理が実行される際に参照されるルールであって、前記属性情報取得部により取得された属性情報に対応するルールを前記通信装置に提供するルール提供部と
を備え、
前記ウェブページに含まれる一のユーザインタフェース要素が他のユーザインタフェース要素に変換される場合、当該一のユーザインタフェース要素に対してすでに入力されている入力値は、前記他のユーザインタフェース要素に引き継がれることを特徴とするウェブページ提供システム。 A web page providing unit for providing a web page including a user interface element to a communication device;
An attribute information acquisition unit for acquiring attribute information indicating an attribute of the communication device or an attribute of a user of the communication device;
A rule that is referred to when a process for adding, replacing, or hiding a user interface element is performed on a web page provided by the web page providing unit, the attribute information acquiring unit a rule corresponding to the acquired attribute information and a rule providing unit for providing to the communication device by,
When one user interface element included in the web page is converted into another user interface element, an input value already input to the one user interface element is carried over to the other user interface element. A web page providing system characterized by that .

前記処理は、前記通信装置により表示される画面のサイズが変更されるごとに実行されることを特徴とする請求項１に記載のウェブページ提供システム。 The web page providing system according to claim 1, wherein the process is executed each time a size of a screen displayed by the communication device is changed.

ウェブページ提供システムにより実行されるウェブページ提供方法であって、
ユーザインタフェース要素を含むウェブページを通信装置に対して提供するステップと、
前記通信装置の属性又は当該通信装置のユーザの属性を示す属性情報を取得するステップと、
前記提供されるウェブページに対して、ユーザインタフェース要素の追加、置換又は非表示化を行うための処理が実行される際に参照されるルールであって、前記取得された属性情報に対応するルールを前記通信装置に提供するステップと
を備え、
前記ウェブページに含まれる一のユーザインタフェース要素が他のユーザインタフェース要素に変換される場合、当該一のユーザインタフェース要素に対してすでに入力されている入力値は、前記他のユーザインタフェース要素に引き継がれることを特徴とするウェブページ提供方法。 A web page providing method executed by a web page providing system,
Providing a web page including a user interface element to a communication device;
Obtaining attribute information indicating an attribute of the communication device or an attribute of a user of the communication device;
A rule that is referred to when a process for adding, replacing, or hiding a user interface element is performed on the provided web page, the rule corresponding to the acquired attribute information Providing the communication device with :
When one user interface element included in the web page is converted into another user interface element, an input value already input to the one user interface element is carried over to the other user interface element. A method for providing a web page.

コンピュータに、
ユーザインタフェース要素を含むウェブページを通信装置に対して提供するステップと、
前記通信装置の属性又は当該通信装置のユーザの属性を示す属性情報を取得するステップと、
前記提供されるウェブページに対して、ユーザインタフェース要素の追加、置換又は非表示化を行うための処理が実行される際に参照されるルールであって、前記取得された属性情報に対応するルールを前記通信装置に提供するステップと
を実行させるためのプログラムであって、
前記ウェブページに含まれる一のユーザインタフェース要素が他のユーザインタフェース要素に変換される場合、当該一のユーザインタフェース要素に対してすでに入力されている入力値は、前記他のユーザインタフェース要素に引き継がれることを特徴とするプログラム。 On the computer,
Providing a web page including a user interface element to a communication device;
Obtaining attribute information indicating an attribute of the communication device or an attribute of a user of the communication device;
A rule that is referred to when a process for adding, replacing, or hiding a user interface element is performed on the provided web page, the rule corresponding to the acquired attribute information the a program for executing a step of providing to said communication device,
When one user interface element included in the web page is converted into another user interface element, an input value already input to the one user interface element is carried over to the other user interface element. A program characterized by that.

ユーザインタフェース要素を含むウェブページを取得するウェブページ取得部と、
自装置の属性又は自装置のユーザの属性を示す属性情報を取得する属性情報取得部と、
前記属性情報取得部により取得された属性情報に対応するルールを取得するルール取得部と、
前記ルール取得部により取得されたルールに従って、前記ウェブページ取得部により取得されたウェブページに対して、ユーザインタフェース部品の追加、置換又は非表示化を行うための処理を実行する処理実行部と、
前記処理実行部により処理を実行されたウェブページを表示部を制御して表示させる表示制御部と
を備え、
前記ウェブページに含まれる一のユーザインタフェース要素が他のユーザインタフェース要素に変換される場合、当該一のユーザインタフェース要素に対してすでに入力されている入力値は、前記他のユーザインタフェース要素に引き継がれることを特徴とする通信装置。 A web page acquisition unit for acquiring a web page including a user interface element;
An attribute information acquisition unit for acquiring attribute information indicating an attribute of the own device or an attribute of a user of the own device;
A rule acquisition unit for acquiring a rule corresponding to the attribute information acquired by the attribute information acquisition unit;
In accordance with the rule acquired by the rule acquisition unit, a process execution unit that executes processing for adding, replacing, or hiding user interface components for the web page acquired by the web page acquisition unit;
A display control unit for controlling the display unit to display the web page processed by the processing execution unit ,
When one user interface element included in the web page is converted into another user interface element, an input value already input to the one user interface element is carried over to the other user interface element. A communication device.

コンピュータに、On the computer,
ユーザインタフェース要素を含むウェブページを取得するステップと、Obtaining a web page including user interface elements;
自装置の属性又は自装置のユーザの属性を示す属性情報を取得するステップと、Obtaining attribute information indicating an attribute of the own device or an attribute of a user of the own device;
前記取得された属性情報に対応するルールを取得するステップと、Obtaining a rule corresponding to the obtained attribute information;
前記取得されたルールに従って、前記取得されたウェブページに対して、ユーザインタフェース部品の追加、置換又は非表示化を行うための処理を実行するステップと、Performing a process for adding, replacing, or hiding user interface components on the acquired web page according to the acquired rules;
前記処理を実行されたウェブページを表示部を制御して表示させるステップとControlling the display unit to display the web page that has been subjected to the processing;
を実行させるためのプログラムであって、A program for executing
前記ウェブページに含まれる一のユーザインタフェース要素が他のユーザインタフェース要素に変換される場合、当該一のユーザインタフェース要素に対してすでに入力されている入力値は、前記他のユーザインタフェース要素に引き継がれることを特徴とするプログラム。When one user interface element included in the web page is converted into another user interface element, an input value already input to the one user interface element is carried over to the other user interface element. A program characterized by that.