JP6785524B2 - Display device, display method and display program - Google Patents

Display device, display method and display program Download PDF

Info

Publication number
JP6785524B2
JP6785524B2 JP2016174363A JP2016174363A JP6785524B2 JP 6785524 B2 JP6785524 B2 JP 6785524B2 JP 2016174363 A JP2016174363 A JP 2016174363A JP 2016174363 A JP2016174363 A JP 2016174363A JP 6785524 B2 JP6785524 B2 JP 6785524B2
Authority
JP
Japan
Prior art keywords
application
native application
web
display
web browser
Prior art date
Legal status (The legal status 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 status listed.)
Active
Application number
JP2016174363A
Other languages
Japanese (ja)
Other versions
JP2018041240A (en
Inventor
康弘 持田
康弘 持田
藤井　竜也
竜也 藤井
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Nippon Telegraph and Telephone Corp
Original Assignee
Nippon Telegraph and Telephone Corp
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 Nippon Telegraph and Telephone Corp filed Critical Nippon Telegraph and Telephone Corp
Priority to JP2016174363A priority Critical patent/JP6785524B2/en
Publication of JP2018041240A publication Critical patent/JP2018041240A/en
Application granted granted Critical
Publication of JP6785524B2 publication Critical patent/JP6785524B2/en
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Landscapes

  • User Interface Of Digital Computer (AREA)

Description

本開示は、ネイティブアプリケーションをウェブアプリケーションに連携させるための表示装置、表示方法及び表示プログラムに関する。 The present disclosure relates to display devices, display methods and display programs for linking native applications with web applications.

アプリケーションをウェブブラウザ上で実行可能なウェブアプリケーションとして実装することで、専用ソフトウェアをインストールする必要がなくなり、利便性が向上する。非特許文献１には、遠隔協調作業システムをウェブアプリケーションとして実装する方法が記載されている。ユーザの端末から所定のＵＲＬにウェブブラウザでアクセスすることによって、ドキュメント・画像・映像等を閲覧・編集するための機能を配置する共有作業スペースをウェブブラウザ上に表示することができる。ドキュメント等の配置や内容の変更は、協調作業に参加する全ユーザの端末にリアルタイムに反映される。 By implementing the application as a web application that can be executed on a web browser, it is not necessary to install dedicated software, and convenience is improved. Non-Patent Document 1 describes a method of implementing a remote collaborative work system as a web application. By accessing a predetermined URL from the user's terminal with a web browser, a shared workspace in which functions for viewing / editing documents, images, videos, etc. are arranged can be displayed on the web browser. Changes in the arrangement and contents of documents, etc. are reflected in real time on the terminals of all users participating in the collaborative work.

ウェブアプリケーションは、専用ソフトウェアのインストールが不要であるという利点があるが、ウェブアプリケーションで実現可能な機能は限定的である。例えば、現在ポストスクリプト形式のファイルの内容をウェブブラウザ上で表示することはできない。ウェブブラウザでサポートされていないファイルをウェブアプリケーション上で扱うためには、そのような機能をウェブアプリケーションとして開発する必要があるが、これには多大な労力を要する。一方で、Ｃ＋＋等で実装されたネイティブアプリケーションには、ポストスクリプト形式のファイルの内容を表示できるものが存在する。 Web applications have the advantage that they do not require the installation of dedicated software, but the functions that can be realized by web applications are limited. For example, it is currently not possible to view the contents of a PostScript file on a web browser. In order to handle files that are not supported by a web browser on a web application, it is necessary to develop such a function as a web application, which requires a great deal of effort. On the other hand, some native applications implemented in C ++ or the like can display the contents of a PostScript format file.

Ｔ． Ｍａｒｒｉｎａｎ， Ｊ． Ａｕｒｉｓａｎｏ， Ａ． Ｎｉｓｈｉｍｏｔｏ， Ｋ． Ｂｈａｒａｄｗａｊ， Ｖ． Ｍａｔｅｅｖｉｔｓｉ， Ｌ． Ｒｅｎａｍｂｏｔ， Ｌ． Ｌｏｎｇ， Ａ． Ｊｏｈｎｓｏｎ， ａｎｄ Ｊ． Ｌｅｉｇｈ， “ＳＡＧＥ２： Ａ Ｎｅｗ Ａｐｐｒｏａｃｈ ｆｏｒ Ｄａｔａ Ｉｎｔｅｎｓｉｖｅ Ｃｏｌｌａｂｏｒａｔｉｏｎ Ｕｓｉｎｇ Ｓｃａｌａｂｌｅ Ｒｅｓｏｌｕｔｉｏｎ Ｓｈａｒｅｄ Ｄｉｓｐｌａｙｓ”， ＣｏｌｌａｂｏｒａｔｅＣｏｍ． ２０１４．T. Marlinan, J.M. Aurisano, A. Nishimoto, K.K. Baradwaj, V.I. Matevitsi, L.M. Renambot, L. et al. Long, A. Johnson, and J. Leeg, "SAGE2: A New Application for Data Collaboration Collaboration Using Scalable Resolution Shared Displays", CollaborateCom. 2014.

前記課題を解決するために、本開示は、ウェブアプリケーションでは実現できない機能を持つネイティブアプリケーションを、ウェブアプリケーションに連携させることを目的とする。 In order to solve the above problems, the present disclosure aims to link a native application having a function that cannot be realized by a web application with the web application.

本開示は、ウェブブラウザ上で実行されるウェブアプリケーションと、ネイティブアプリケーションを連携させることによって、ウェブアプリケーションの機能拡張を可能にするものである。具体的には、ウェブアプリケーションでは実現できない機能を持つネイティブアプリケーションを、ウェブアプリケーションと位置・サイズを合わせて表示し、ユーザからの操作を伝える。 The present disclosure enables the function extension of a web application by linking the web application executed on the web browser with the native application. Specifically, a native application with functions that cannot be realized by a web application is displayed in the same position and size as the web application, and the operation from the user is transmitted.

具体的には、本開示に係る表示装置は、
ウェブアプリケーションでは実行できないネイティブアプリケーションを実行するネイティブアプリケーション部と、
ネイティブアプリケーションを表示するための領域がウェブアプリケーションの表示領域において透明になるように、ウェブアプリケーションを表示するウェブブラウザ部と、
前記ウェブブラウザ部からの要求に従ってネイティブアプリケーション部を起動させ、ネイティブアプリケーションの表示を前記ウェブブラウザ部が透明にした領域に重ねる端末制御部と、
を備え、
前記ウェブブラウザ部は、前記ネイティブアプリケーションの表示領域内においてユーザ入力を受けると、ユーザ入力を受けた位置及び操作内容を検出し、
前記端末制御部は、前記ネイティブアプリケーションにおけるユーザ入力を受けた位置及び操作内容を、自装置のＯＳのＡＰＩを用いて前記ネイティブアプリケーション部に発生させる。 Specifically, the display device according to the present disclosure is
The native application part that executes native applications that cannot be executed by web applications,
The web browser section that displays the web application and the web browser section that displays the web application so that the area for displaying the native application is transparent in the display area of the web application.
A terminal control unit that starts the native application unit in response to a request from the web browser unit and superimposes the display of the native application on the area made transparent by the web browser unit.
With
When the web browser unit receives the user input in the display area of the native application, the web browser unit detects the position where the user input is received and the operation content, and detects the position and the operation content.
The terminal control unit generates the position and operation content received by the user in the native application in the native application unit using the API of the OS of the own device .

前記ウェブブラウザ部は、ウェブアプリケーションの表示領域においてネイティブアプリケーションの使用の要求を取得すると、使用の要求のあったネイティブアプリケーション及び表示領域を含む情報をサーバ装置に送信し、前記情報を前記サーバ装置から受信すると、当該表示領域を透明にする。 When the web browser unit acquires a request for using a native application in the display area of the web application, the web browser unit transmits information including the native application and the display area requested to be used to the server device, and the information is transmitted from the server device. Upon receipt, the display area is made transparent.

具体的には、本開示に係る表示方法は、表示装置が実行する表示方法であって、
ウェブブラウザ部がウェブアプリケーションを表示するステップと、
ウェブブラウザ部がネイティブアプリケーションを表示するための領域をウェブアプリケーションの表示領域において透明にし、端末制御部がネイティブアプリケーションを実行するネイティブアプリケーション部を起動させ、ネイティブアプリケーションの表示を前記ウェブブラウザ部が透明にした領域に重ねるステップと、
を有し、
前記ウェブブラウザ部は、前記ネイティブアプリケーションの表示領域内においてユーザ入力を受けると、ユーザ入力を受けた位置及び操作内容を検出し、
前記端末制御部は、前記ネイティブアプリケーションにおけるユーザ入力を受けた位置及び操作内容を、自装置のＯＳのＡＰＩを用いて前記ネイティブアプリケーション部に発生させる。 Specifically, the display method according to the present disclosure is a display method executed by a display device.
The steps that the web browser section displays the web application,
The area for the web browser section to display the native application is made transparent in the display area of the web application, the terminal control section starts the native application section that executes the native application, and the web browser section makes the display of the native application transparent. Steps to overlap with the area
Have a,
When the web browser unit receives the user input in the display area of the native application, the web browser unit detects the position where the user input is received and the operation content, and detects the position and the operation content.
The terminal control unit generates the position and operation content received by the user in the native application in the native application unit using the API of the OS of the own device .

本開示に係る表示プログラムは、本開示に係る表示装置に備わる各機能部としてコンピュータを機能させ、本開示に係る表示方法に備わる各ステップをコンピュータに実行させる。本開示に係る表示プログラムは、記録媒体に記録することも、ネットワークを通して提供することも可能である。 The display program according to the present disclosure causes the computer to function as each functional unit provided in the display device according to the present disclosure, and causes the computer to execute each step provided in the display method according to the present disclosure. The display program according to the present disclosure can be recorded on a recording medium or provided through a network.

本開示によれば、ウェブアプリケーションでは実現できない機能を持つネイティブアプリケーションを、ウェブアプリケーションと連携させることができる。 According to the present disclosure, a native application having functions that cannot be realized by a web application can be linked with the web application.

本開示の第１のシステム構成例を示す。The first system configuration example of this disclosure is shown. 本開示の第２のシステム構成例を示す。A second system configuration example of the present disclosure is shown. 表示装置が複数ある場合の第１のシステム構成例を示す。A first system configuration example when there are a plurality of display devices is shown. 表示装置が複数ある場合の第２のシステム構成例を示す。A second system configuration example when there are a plurality of display devices is shown. 表示装置における代表的な画面構成例を示す。An example of a typical screen configuration in a display device is shown. ＯＰＥＮリクエストのフォーマットの一例を示す。An example of the format of the OPEN request is shown. 管理テーブルの一例を示す。An example of the management table is shown. 端末制御部の設定情報の一例を示す。An example of the setting information of the terminal control unit is shown. Ｍｏｖｅリクエストのフォーマットの一例を示す。An example of the Move request format is shown. ユーザ入力イベントの相対座標の一例を示す。An example of the relative coordinates of the user input event is shown. ユーザ入力イベントの通知例を示す。An example of notification of a user input event is shown. 実施形態１に係る表示装置の画面構成例を示す。An example of the screen configuration of the display device according to the first embodiment is shown. 実施形態２に係る表示装置の画面構成例を示す。An example of the screen configuration of the display device according to the second embodiment is shown.

以下、本開示の実施形態について、図面を参照しながら詳細に説明する。なお、本開示は、以下に示す実施形態に限定されるものではない。これらの実施の例は例示に過ぎず、本開示は当業者の知識に基づいて種々の変更、改良を施した形態で実施することができる。なお、本明細書及び図面において符号が同じ構成要素は、相互に同一のものを示すものとする。 Hereinafter, embodiments of the present disclosure will be described in detail with reference to the drawings. The present disclosure is not limited to the embodiments shown below. Examples of these implementations are merely examples, and the present disclosure can be implemented in various modifications and improvements based on the knowledge of those skilled in the art. In this specification and drawings, the components having the same reference numerals shall indicate the same components.

本開示の基本的な構成例を図１に示す。本開示に係るシステムは、サーバ装置９１と表示装置９２を備える。サーバ装置９１はウェブサーバとして機能する。表示装置９２は、ウェブブラウザ部２１、ネイティブアプリケーション部２３、端末制御部２２を備える。サーバ装置９１と表示装置９２のウェブブラウザ部２１は、ネットワークを介して通信が可能である。本開示の装置は、コンピュータを各機能部として機能させることで実現してもよい。 A basic configuration example of the present disclosure is shown in FIG. The system according to the present disclosure includes a server device 91 and a display device 92. The server device 91 functions as a web server. The display device 92 includes a web browser unit 21, a native application unit 23, and a terminal control unit 22. The server device 91 and the web browser unit 21 of the display device 92 can communicate with each other via a network. The apparatus of the present disclosure may be realized by making a computer function as each functional unit.

ウェブブラウザ部２１は、サーバ装置９１からウェブアプリケーションをダウンロードして実行する。これにより、ウェブブラウザ部２１は、ウェブページを表示装置９２上に表示することができる。ここでの通信には、ＨＴＴＰ（Ｈｙｐｅｒｔｅｘｔ Ｔｒａｎｓｆｅｒ Ｐｒｏｔｏｃｏｌ）を用いてもよい。さらに、通信のリアルタイム性を高めるためにＷｅｂＳｏｃｋｅｔを用いてもよい。ウェブアプリケーションは、ＨＴＭＬ、ＣＳＳ、ＪａｖａＳｃｒｉｐｔ（登録商標）等のスクリプトに挙動を記述されたアプリケーションであることが一般的であるが、ウェブブラウザ部２１上で実行可能であれば他の形式で挙動を記述してもよい。 The web browser unit 21 downloads and executes a web application from the server device 91. As a result, the web browser unit 21 can display the web page on the display device 92. For the communication here, HTTP (Hypertext Transfer Protocol) may be used. Further, WebSocket may be used to enhance the real-time property of communication. A web application is generally an application whose behavior is described in a script such as HTML, CSS, or Javascript (registered trademark), but if it can be executed on the web browser unit 21, the behavior is described in another format. It may be described.

ネイティブアプリケーション部２３は、ウェブアプリケーションでは実現できない機能を持つアプリケーションを実行する。既存のネイティブアプリケーションをそのまま使用してもよい。ネイティブアプリケーション部２３を使用せず、ウェブブラウザ部２１だけを使用する表示装置９２があってもよい。また、ネイティブアプリケーション部２３の使用するネイティブアプリケーションは複数であってもよい。 The native application unit 23 executes an application having a function that cannot be realized by a web application. You can use the existing native application as it is. There may be a display device 92 that uses only the web browser unit 21 without using the native application unit 23. Further, the number of native applications used by the native application unit 23 may be plural.

ウェブブラウザ部２１と端末制御部２２の間の通信は、図１のようにサーバ装置９１を経由してもよい。あるいは、図２及び図４のように、端末制御部２２がＨＴＴＰやＷｅｂＳｏｃｋｅｔに対応したサーバ機能を備え、ウェブブラウザ部２１と直接通信してもよい。 Communication between the web browser unit 21 and the terminal control unit 22 may go through the server device 91 as shown in FIG. Alternatively, as shown in FIGS. 2 and 4, the terminal control unit 22 may have a server function corresponding to HTTP or WebSocket and directly communicate with the web browser unit 21.

また、表示装置９２が複数あってもよい。その場合には、全ての表示装置９２で同じ画面表示を行う。図１の構成で表示装置９２が複数ある場合には、図３のように各表示装置９２のウェブブラウザ部２１と端末制御部２２がサーバ装置９１とネットワークを介して通信する。図２の構成で表示装置９２が複数ある場合には、図４のように、ひとつのウェブブラウザ部２１が全ての表示装置９２に備わる端末制御部２２と直接通信する。以降では、ウェブブラウザ部２１と端末制御部２２の間の通信は、両方の場合を含むものとする。また、ウェブブラウザ部２１同士の通信は、サーバ装置９１を経由するものとする。 Further, there may be a plurality of display devices 92. In that case, the same screen display is performed on all the display devices 92. When there are a plurality of display devices 92 in the configuration of FIG. 1, the web browser unit 21 and the terminal control unit 22 of each display device 92 communicate with the server device 91 via the network as shown in FIG. When there are a plurality of display devices 92 in the configuration of FIG. 2, one web browser unit 21 directly communicates with the terminal control unit 22 provided in all the display devices 92 as shown in FIG. Hereinafter, the communication between the web browser unit 21 and the terminal control unit 22 includes both cases. Further, the communication between the web browser units 21 shall be via the server device 91.

図５に、表示装置９２における本開示の代表的な画面構成を示す。例えばＷｉｎｄｏｗｓ（登録商標） ＯＳを搭載したコンピュータを表示装置として用いて、デスクトップ上でウェブアプリケーションＡＷの下に位置を合わせてネイティブアプリケーションＡＮを表示することで、統合されたアプリケーションのように表示する。ネイティブアプリケーションＡＮの表示領域と重なるウェブアプリケーションＡＷ上の領域では、バックグラウンドを透明化する。ウェブアプリケーションＡＷ上の透明領域と、ネイティブアプリケーションＡＮの位置及びサイズの整合は端末制御部２２が管理する。 FIG. 5 shows a typical screen configuration of the present disclosure in the display device 92. For example Windows using a computer equipped with (R) OS as the display device, by displaying a native application A N Align below the web application A W on the desktop, displayed as integrated applications To do. In the area of on the web application A W which overlaps with the display area of the native application A N, clearing the background. A transparent area on the web application A W, the position and alignment of the size of the native application A N terminal control unit 22 manages.

ネイティブアプリケーションＡＮを表示するまでの手順は以下の通りである。ウェブアプリケーションは、これに対応した振る舞いをするように作成する必要がある。
まず、ウェブブラウザ部２１が所定のＵＲＬにアクセスしウェブアプリケーションをダウンロードする。ウェブアプリケーション上でユーザがネイティブアプリケーションＡＮの使用を要求すると、当該ウェブブラウザ部２１がＯＰＥＮリクエストをサーバ装置９１に送る。サーバ装置９１は、受け取ったＯＰＥＮリクエストを各表示装置９２のウェブブラウザ部２１に送信する。 Procedure before showing native application A N is as follows. Web applications need to be written to behave accordingly.
First, the web browser unit 21 accesses a predetermined URL and downloads the web application. When a user requests a use of native applications A N on the web application, the web browser 21 sends an OPEN request to the server device 91. The server device 91 transmits the received OPEN request to the web browser unit 21 of each display device 92.

ＯＰＥＮリクエストには、図６に示すようなフォーマットのＪａｖａＳｃｒｉｐｔ（登録商標） Ｏｂｊｅｃｔ Ｎｏｔａｔｉｏｎ （ＪＳＯＮ）を使用してもよい。ＯＰＥＮリクエストには、使用したい機能を示す識別番号（”ａｐｐ”）と、表示する位置（”ｐｏｓｉｔｉｏｎ”）を含む。図６の例では”ｐｏｓｉｔｉｏｎ”に、順に始点水平位置座標ｘ、始点垂直位置座標ｙ、水平方向サイズｗ、垂直方向サイズｈを含んでいる。 For the OPEN request, Javascript (registered trademark) Object Notification (JSON) in the format shown in FIG. 6 may be used. The OPEN request includes an identification number (“app”) indicating the function to be used and a position (“position”) to be displayed. In the example of FIG. 6, "position" includes the start point horizontal position coordinate x, the start point vertical position coordinate y, the horizontal size w, and the vertical size h in this order.

ＯＰＥＮリクエストを受け取ったウェブブラウザ部２１は、”ｐｏｓｉｔｉｏｎ”で指定された領域のバックグラウンドを透明化する。透明化する領域は、機能の識別番号ごとに定められる。さらにこのときウェブブラウザ部２１は、図７のような管理テーブルにエントリを追加して位置とサイズ、さらに上下の重なりを表すためのレイヤ情報を保持する。ここでは、レイヤは数字が小さいほど上にあることを表すものとし、最も上にあるときのレイヤの値を１とする。レイヤの値の更新タイミングは、ウェブアプリケーションの実装に依存する。新しくネイティブアプリケーションが配置されたときや、位置・サイズが変更されたときに、レイヤの値を１に設定してもよい。このような仕組みにより、ウェブブラウザ部２１はネイティブアプリケーションａｐｐ１及びネイティブアプリケーションａｐｐ２の上下関係を把握する。 The web browser unit 21 that has received the OPEN request makes the background of the area specified by "position" transparent. The area to be made transparent is defined for each function identification number. Further, at this time, the web browser unit 21 adds an entry to the management table as shown in FIG. 7 and holds layer information for expressing the position and size, and the upper and lower overlap. Here, it is assumed that the smaller the number is, the higher the layer is, and the value of the layer at the top is 1. The timing of updating the layer value depends on the implementation of the web application. The layer value may be set to 1 when a new native application is placed or when the position / size is changed. With such a mechanism, the web browser unit 21 grasps the hierarchical relationship between the native application application 1 and the native application application 2.

ネイティブアプリケーションを動作させるため、ウェブブラウザ部２１の送信したＯＰＥＮリクエストは端末制御部２２に送信される。ＯＰＥＮリクエストを受け取った端末制御部２２は、ＯＳのＡＰＩ（Ａｐｐｌｉｃａｔｉｏｎ Ｐｒｏｇｒａｍｍｉｎｇ Ｉｎｔｅｒｆａｃｅ）を利用してネイティブアプリケーションＡＮを透明領域の下に重ねて配置する。ＡＰＩは、例えば、Ｗｉｎｄｏｗｓ（登録商標）におけるＳｅｔＷｉｎｄｏｗＰｏｓである。端末制御部２２は、予め機能識別番号”ａｐｐ”と、表示装置９２におけるネイティブアプリケーションＡＮのパス（”ｐａｔｈ”）を対応付ける情報を有しており、ＯＰＥＮリクエストに含まれる”ａｐｐ”から、どのネイティブアプリケーションＡＮを起動するかを決定する。対応付けのために端末制御部２２に与える設定情報の例を図８に示す。 In order to operate the native application, the OPEN request transmitted by the web browser unit 21 is transmitted to the terminal control unit 22. Terminal controller 22 which has received the OPEN request is arranged to overlap underneath the transparent area native application A N by using the OS of API (Application Programming Interface). The API is, for example, SetWindowPos in Windows®. The terminal control unit 22 includes a pre-function identification number "app", has information associating the path of native application A N ( "path") in the display device 92, a Included "app" to OPEN request, which to determine whether to start the native application a N. FIG. 8 shows an example of setting information given to the terminal control unit 22 for association.

ウェブアプリケーション上でネイティブアプリケーションＡＮの表示の位置・サイズを変更する場合にも、同様にウェブブラウザ部２１からサーバ装置９１経由で変更内容を含むＭＯＶＥリクエストを送り、ネイティブアプリケーションＡＮの透明領域とウェブアプリケーションＡＷの位置及びサイズを整合させる。ＭＯＶＥリクエストには、図９に示すようなフォーマットを用いてもよい。 Even when changing the position and size of the display of the native application A N on the web application similarly sends a MOVE request including the changes from the web browser 21 via the server apparatus 91, and the transparent region of the native application A N to match the position and size of the web application a W. The format shown in FIG. 9 may be used for the MOVE request.

端末制御部２２へのＯＰＥＮリクエストの伝達経路は、図１から図４の各構成で異なる。例えば、図１及び図３の構成の場合、サーバ装置９１は、ＯＰＥＮリクエストを各表示装置９２の端末制御部２２に送信する。例えば、図２及び図４の構成の場合、ＯＰＥＮリクエストを送信するウェブブラウザ部２１は、自装置の端末制御部２２にもＯＰＥＮリクエストを送る。そして、サーバ装置９１からＯＰＥＮリクエストを受信したウェブブラウザ部２１は、受信したＯＰＥＮリクエストを自装置の端末制御部２２に送る。例えば、図４の構成の場合、ＯＰＥＮリクエストを送信するウェブブラウザ部２１は、他の表示装置９２における端末制御部２２にもＯＰＥＮリクエストを送ることも可能である。 The transmission path of the OPEN request to the terminal control unit 22 is different in each configuration of FIGS. 1 to 4. For example, in the case of the configurations of FIGS. 1 and 3, the server device 91 transmits an OPEN request to the terminal control unit 22 of each display device 92. For example, in the case of the configurations of FIGS. 2 and 4, the web browser unit 21 that transmits the OPEN request also sends the OPEN request to the terminal control unit 22 of its own device. Then, the web browser unit 21 that has received the OPEN request from the server device 91 sends the received OPEN request to the terminal control unit 22 of its own device. For example, in the case of the configuration of FIG. 4, the web browser unit 21 that transmits the OPEN request can also send the OPEN request to the terminal control unit 22 of the other display device 92.

ネイティブアプリケーションＡＮを使用する表示装置９２と、使用しない表示装置９２が混在する場合には、例えばＵＲＬの中にフラグを含めることで、これらを区別することができる。ウェブアプリケーションのＵＲＬが”ｈｔｔｐ：／／ｆｏｏ．ｂａｒ／ｉｎｄｅｘ．ｈｔｍｌ”の場合、ネイティブアプリケーションを使用しない場合のＵＲＬを”ｈｔｔｐ：／／ｆｏｏ．ｂａｒ／ｉｎｄｅｘ．ｈｔｍｌ？ｎａｔｉｖｅ＝ｆａｌｓｅ”、使用する場合のＵＲＬを”ｈｔｔｐ：／／ｆｏｏ．ｂａｒ／ｉｎｄｅｘ．ｈｔｍｌ？ｎａｔｉｖｅ＝ｔｒｕｅ”としてもよい。以上の方法によって、ネイティブアプリケーションＡＮに手を加えることなく、ウェブアプリケーションＡＷとネイティブアプリケーションＡＮを連携させた画面表示が可能になる。 A display device 92 to use the native application A N, if the display device 92 is not used are mixed, for example by including a flag in the URL, you can be distinguished them. When the URL of the web application is "http://foo.bar/index.html", the URL when the native application is not used is "http://foo.bar/index.html?native=file". The URL of the case may be "http://foo.bar/index.html? Native = true". By the above method, without modifying the native application A N, it is possible to screen that links to the web application A W and a native application A N.

しかし、表示を重ねただけでは、ネイティブアプリケーションＡＮに対してユーザがマウスクリックなどの操作をしようとしたときに、上に重なっているウェブアプリケーションＡＷが操作を受け取ってしまう。そこで、本実施形態は、ウェブアプリケーションＡＷの透明領域に対するユーザ入力イベントを、ネイティブアプリケーションＡＮに伝える仕組みを有する。 However, only overlapped the display, when the user attempts an operation such as a mouse click to the native application A N, web application A W of the overlying will receive the operation. Therefore, this embodiment has a mechanism for transmitting a user input event to the transparent region of the web application A W, the native application A N.

図１０に示すように、ユーザ入力イベントが発生したウェブブラウザＢＷ上でのユーザ入力位置ＰＩの座標を（ａ，ｂ）とする。ウェブブラウザ部２１は、ウェブアプリケーションＡＷの表示領域においてユーザ入力を検出すると、図７のテーブルを参照して座標（ａ，ｂ）がどの機能の領域に含まれるかを決定する。該当するエントリが複数ある場合には、レイヤの値の小さいエントリを選択する。 As shown in FIG. 10, the coordinates of the user input position P I on the Web browser B W user input event has occurred and (a, b). The web browser unit 21 detects a user input in the display area of the web application A W, to determine coordinates (a, b) with reference to the table of FIG. 7 is included in the area of any function. If there are multiple applicable entries, select the entry with the smaller layer value.

ウェブブラウザ部２１は、選択された機能の識別番号（”ａｐｐ”）と操作内容（”ｉｎｐｕｔ”）を含むユーザ入力イベントを全ての表示装置９２に備わる端末制御部２２に送信する。このとき送信する座標は、ネイティブアプリケーションＡＮの表示領域内での相対座標に変換したものである。すなわち、入力位置ＰＩの座標（ａ，ｂ）がネイティブアプリケーションＡＮの表示領域内であり、ネイティブアプリケーションＡＮの領域の始点位置を座標（Ｘ，Ｙ）とすると、座標（ａ−Ｘ，ｂ−Ｙ）を送る。ユーザ入力イベントの通知に、図１１のようなＪＳＯＮフォーマットを用いてもよい。 The web browser unit 21 transmits a user input event including an identification number (“app”) and an operation content (“input”) of the selected function to the terminal control unit 22 provided in all the display devices 92. Coordinates transmitted at this time is obtained by converting the relative coordinates in the display area of the native application A N. That is, the coordinates (a, b) input position P I is a display area of the native application A N, when the start position of the area of the native application A N coordinates (X, Y) and the coordinate (a-X, b-Y) is sent. The JSON format as shown in FIG. 11 may be used for the notification of the user input event.

端末制御部２２は、”ａｐｐ”からイベントを渡すネイティブアプリケーションを決定する。端末制御部２２によって決定されたネイティブアプリケーションは、ＯＳのＡＰＩを用いて当該ネイティブアプリケーションＡＮ上での相対座標（ａ−Ｘ，ｂ−Ｙ）にイベントを発生させる。 The terminal control unit 22 determines a native application that passes an event from "app". Native application determined by the terminal control unit 22, relative coordinates (a-X, b-Y ) on the native application A N using the API of the OS to generate an event.

（実施形態１）
ウェブアプリケーションＡＷとネイティブアプリケーションＡＮを連携させるサイネージの構成例を図１２に示す。本実施形態では、ソフトウェアの広告において、テキスト等をウェブアプリケーションＡＷで表示し、実際のソフトウェアをネイティブアプリケーションＡＮとしてウェブアプリケーションＡＷの下に重ねて表示する。 (Embodiment 1)
FIG. 12 shows a configuration example of a signage that links the web application A W and the native application A N. In the present embodiment, in the software advertisement, the text or the like is displayed by the web application A W , and the actual software is displayed as the native application A N by superimposing it under the web application A W.

本実施形態では、ウェブブラウザ部２１は、ウェブアプリケーションをダウンロードする。ネイティブアプリケーションは、予め表示装置９２内に格納しておいてもよい。あるいは、ウェブブラウザ部２１がダウンロードしてもよい。ネイティブアプリケーションは、ネイティブアプリケーション部２３として表示装置９２内に格納される。 In this embodiment, the web browser unit 21 downloads the web application. The native application may be stored in the display device 92 in advance. Alternatively, the web browser unit 21 may download it. The native application is stored in the display device 92 as the native application unit 23.

本実施形態では、ウェブアプリケーションＡＷにおけるネイティブアプリケーションＡＮの表示領域は予め透明に設定されている。そして、ネイティブアプリケーションＡＮの表示領域内でユーザ入力があった場合、ネイティブアプリケーション部２３は、ネイティブアプリケーションＡＮ上でのイベントを発生させる。これにより、ソフトウェアに興味をもったユーザは、ネイティブアプリケーションＡＮにおいて表示されている枠内に数値を入力してボタンを押すなど、ソフトウェアを実際に操作して挙動を確認することができる。 In the present embodiment, the display area of the native application A N in the web application A W is previously transparent set. When there is user input within the display area of the native application A N, native application unit 23 generates an event on the native application A N. Thus, a user having an interest in the software is able to check the actual operation to behave like a software button by entering a number in the frame that is displayed in the native application A N.

（実施形態２）
本実施形態では、車をデザインするためのＣＡＤソフトウェアが動作するワークステーションの画面映像をネイティブアプリケーションＡＮが表示し、それを見ながら複数の表示装置９２が遠隔協調作業を行う場合の例を図１３に示す。 (Embodiment 2)
In this embodiment, an example is shown in which a native application AN displays a screen image of a workstation on which CAD software for designing a car operates, and a plurality of display devices 92 perform remote cooperative work while watching the screen image. It is shown in 13.

表示装置９２−１が狭帯域ネットワークのみが利用できるモバイル環境から参加するユーザの端末であり、表示装置９２−２が高性能端末と広帯域ネットワークが利用可能なユーザの端末である。サーバ装置９１は、これらの表示装置９２−１及び９２−２に対して、共通のウェブアプリケーションＡＷを提供する。このとき、ワークステーションの画面映像の表示に異なるネイティブアプリケーション部２３を用いることで、ワークステーションの画面映像において異なる品質のサービスを提供する。 The display device 92-1 is a terminal of a user who participates from a mobile environment where only a narrow band network can be used, and the display device 92-1 is a terminal of a user who can use a high-performance terminal and a wideband network. Server device 91, with respect to these display devices 92-1 and 92-2, provides a common web application A W. At this time, by using different native application units 23 for displaying the screen image of the workstation, services of different qualities are provided in the screen image of the workstation.

これらのユーザ端末を区別するために、表示装置９２−１及び９２−２に備わるウェブブラウザ部２１は、異なるＵＲＬにアクセスする。ウェブブラウザ部２１は、ドキュメント・画像・映像等を閲覧・編集するための機能を配置する共有作業スペースとしてウェブアプリケーションＡＷを表示し、画面映像表示機能以外はどちらのＵＲＬに対しても同様に振る舞う。 In order to distinguish between these user terminals, the web browser unit 21 provided in the display devices 92-1 and 92-2 accesses different URLs. The web browser section 21, documents, images, video, etc. to display the web application A W as a shared work space for disposing the ability to view and edit, as well against either except screen video display function URL behave.

モバイル環境から参加するユーザの表示装置９２−１に対しては、新しいソフトウェアのインストールを発生させないために、ウェブアプリケーションＡＷ上で全ての機能を実行できるようにする。そのため、モバイル環境用のＵＲＬからのアクセス時には、ウェブブラウザ上で実行可能な映像送受信の仕組みを利用して、ワークステーションの画面映像を表示するようにウェブアプリケーションを記述する。そのような映像送受信の仕組みには例えば、ＷｅｂＲＴＣ（Ｗｅｂ Ｒｅａｌ−Ｔｉｍｅ Ｃｏｍｍｕｎｉｃａｔｉｏｎ）がある。ＷｅｂＲＴＣによる映像送受信の品質はそれほど高くないが、事前にネイティブアプリケーションをインストールすることなく協調作業に参加できるようになることで利便性が向上する。 For the user of the display device 92-1 to participate from the mobile environment, in order not to generate the installation of the new software, to be able to perform all of the functions on the web application A W. Therefore, when accessing from the URL for the mobile environment, the web application is described so as to display the screen image of the workstation by using the image transmission / reception mechanism that can be executed on the web browser. As such a mechanism for transmitting and receiving video, for example, there is WebRTC (Web Real-Time Communication). The quality of video transmission / reception by WebRTC is not so high, but convenience is improved by being able to participate in collaborative work without installing a native application in advance.

一方、社内の会議室のように、高性能端末と広帯域ネットワークが利用可能な表示装置９２−２では、ネイティブアプリケーション部２３がネイティブアプリケーションＡＮへの画面映像を表示する。そのため、高性能端末用のＵＲＬからのアクセス時には、本開示の方法を用いて映像送受信用のネイティブアプリケーションを起動するように、ウェブアプリケーションを記述する。ネイティブアプリケーション部２３は、例えば、広帯域を必要とするかわりに高精細な映像が得られるＪＰＥＧ２０００コーデックを利用可能なアプリケーションである。このように、ネイティブアプリケーション部２３を用いてネイティブアプリケーションＡＮへの画面映像を表示することで、端末の計算リソースとネットワーク帯域を有効に活用し、デザインの細部まで確認を行うことができる。 On the other hand, as in-house conference rooms, the high-performance terminal and the broadband network is available the display device 92-2, a native application unit 23 displays the screen image to the native application A N. Therefore, the web application is described so as to start the native application for video transmission / reception using the method of the present disclosure when accessing from the URL for the high-performance terminal. The native application unit 23 is, for example, an application that can use a JPEG2000 codec that can obtain a high-definition image instead of requiring a wide band. In this way, by displaying a screen image to the native application A N using native application section 23, effective use of computing resources and network bandwidth of the terminal can confirm the detail of the design.

（開示の効果）
以上説明したように、本開示は、ウェブブラウザ上で実行されるウェブアプリケーションＡＷとネイティブアプリケーションＡＮを連携させることによって、ウェブアプリケーションＡＷの機能拡張を可能にする。具体的には、ウェブアプリケーションＡＷでは実現できない機能を持つネイティブアプリケーションＡＮを、ウェブアプリケーションＡＷと位置・サイズを合わせて表示し、ユーザからの操作を伝えることで実現する。ネイティブアプリケーションＡＮは、予めウェブアプリケーションＡＷと連携するよう作られたものである必要はなく、既存のネイティブアプリケーションＡＮをそのまま利用することができる。また、複数の表示装置に対して同じ画面表示をすることが可能になることから、遠隔協調作業に応用することができる。さらに、同じ協調作業に参加するユーザの中でも、異なった品質のサービスを提供することが可能になる。 (Effect of disclosure)
As described above, the present disclosure is by linking the web application A W and native applications A N running on the web browser, allowing extension of the web application A W. Specifically, the native application A N having a function that can not be achieved in the web application A W, and displays the combined position and size as the web application A W, realized by transmitting an operation from a user. Native application A N is previously web application A W and need not be those made to cooperate, it is possible to directly utilize existing native application A N. Further, since the same screen can be displayed on a plurality of display devices, it can be applied to remote cooperative work. Furthermore, it becomes possible to provide services of different qualities even among users who participate in the same collaborative work.

本開示は情報通信産業に適用することができる。 This disclosure can be applied to the information and communication industry.

２１：ウェブブラウザ部
２２：端末制御部
２３：ネイティブアプリケーション部
９１：サーバ装置
９２、９２−１、９２−２：表示装置 21: Web browser unit 22: Terminal control unit 23: Native application unit 91: Server device 92, 92-1, 92-2: Display device

Claims (4)

ウェブアプリケーションでは実行できないネイティブアプリケーションを実行するネイティブアプリケーション部と、
ネイティブアプリケーションを表示するための領域がウェブアプリケーションの表示領域において透明になるように、ウェブアプリケーションを表示するウェブブラウザ部と、
前記ウェブブラウザ部からの要求に従ってネイティブアプリケーション部を起動させ、ネイティブアプリケーションの表示を前記ウェブブラウザ部が透明にした領域に重ねる端末制御部と、
を備え、
前記ウェブブラウザ部は、
前記ネイティブアプリケーションの表示領域内においてユーザ入力を受けると、ユーザ入力を受けた位置及び操作内容を検出し、
ネイティブアプリケーションの実行前と実行後でウェブアプリケーションの表示領域を変化させず、
ネイティブアプリケーションの実行後、ウェブアプリケーションの表示領域においてはウェブアプリケーションに従って表示し、
前記端末制御部は、ネイティブアプリケーションの表示領域において、前記ネイティブアプリケーションにおけるユーザ入力を受けた位置及び操作内容を、自装置のＯＳのＡＰＩを用いて前記ネイティブアプリケーション部に発生させる、
表示装置。 The native application part that executes native applications that cannot be executed by web applications,
The web browser section that displays the web application and the web browser section that displays the web application so that the area for displaying the native application is transparent in the display area of the web application.
A terminal control unit that starts the native application unit in response to a request from the web browser unit and superimposes the display of the native application on the area made transparent by the web browser unit.
With
The web browser section
When a user input is received in the display area of the native application, the position where the user input is received and the operation content are detected.
Do not change the display area of the web application before and after running the native application
After running the native application, display according to the web application in the display area of the web application,
In the display area of the native application , the terminal control unit generates the position and operation content of the user input in the native application in the native application unit using the API of the OS of the own device.
Display device. 前記ウェブブラウザ部は、
ウェブアプリケーションの表示領域においてネイティブアプリケーションの使用の要求を取得すると、使用の要求のあったネイティブアプリケーション及び表示領域を含む情報をサーバ装置に送信し、
前記情報を前記サーバ装置から受信すると、当該表示領域を透明にする、
請求項１に記載の表示装置。 The web browser section
When a request to use a native application is acquired in the display area of a web application, information including the native application and the display area requested to be used is transmitted to the server device.
When the information is received from the server device, the display area is made transparent.
The display device according to claim 1. ウェブブラウザ部がウェブアプリケーションを表示するステップと、
ウェブブラウザ部がネイティブアプリケーションを表示するための領域をウェブアプリケーションの表示領域において透明にし、端末制御部がネイティブアプリケーションを実行するネイティブアプリケーション部を起動させ、ネイティブアプリケーションの表示を前記ウェブブラウザ部が透明にした領域に重ねるステップと、
を有し、
前記ウェブブラウザ部は、前記ネイティブアプリケーションの表示領域内においてユーザ入力を受けると、ユーザ入力を受けた位置及び操作内容を検出し、
前記端末制御部は、ネイティブアプリケーションの表示領域において、前記ネイティブアプリケーションにおけるユーザ入力を受けた位置及び操作内容を、自装置のＯＳのＡＰＩを用いて前記ネイティブアプリケーション部に発生させ、
前記ウェブブラウザ部は、ネイティブアプリケーションの実行前と実行後でウェブアプリケーションの表示領域を変化させず、ネイティブアプリケーションの実行後、ウェブアプリケーションの表示領域においてはウェブアプリケーションに従って表示する、
表示方法。 The steps that the web browser section displays the web application,
The area for the web browser section to display the native application is made transparent in the display area of the web application, the terminal control section starts the native application section that executes the native application, and the web browser section makes the display of the native application transparent. Steps to overlap with the area
Have,
When the web browser unit receives the user input in the display area of the native application, the web browser unit detects the position where the user input is received and the operation content, and detects the position and the operation content.
In the display area of the native application , the terminal control unit generates the position and the operation content received by the user in the native application in the native application unit using the API of the OS of the own device .
The web browser unit does not change the display area of the web application before and after the execution of the native application, and displays according to the web application in the display area of the web application after the execution of the native application.
Display method. 請求項１又は２に記載の表示装置に備わる各機能部としてコンピュータを機能させる表示プログラム。 A display program that causes a computer to function as each functional unit provided in the display device according to claim 1 or 2.
JP2016174363A 2016-09-07 2016-09-07 Display device, display method and display program Active JP6785524B2 (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
JP2016174363A JP6785524B2 (en) 2016-09-07 2016-09-07 Display device, display method and display program

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
JP2016174363A JP6785524B2 (en) 2016-09-07 2016-09-07 Display device, display method and display program

Publications (2)

Publication Number Publication Date
JP2018041240A JP2018041240A (en) 2018-03-15
JP6785524B2 true JP6785524B2 (en) 2020-11-18

Family

ID=61626227

Family Applications (1)

Application Number Title Priority Date Filing Date
JP2016174363A Active JP6785524B2 (en) 2016-09-07 2016-09-07 Display device, display method and display program

Country Status (1)

Country Link
JP (1) JP6785524B2 (en)

Families Citing this family (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
JP7354793B2 (en) * 2019-11-26 2023-10-03 株式会社リコー Information processing device, control method, and program
JP2022012403A (en) * 2020-07-01 2022-01-17 キヤノン株式会社 Program, information processing device, and control method
JP7397051B2 (en) 2021-12-23 2023-12-12 Ｎｅｃパーソナルコンピュータ株式会社 Electronic devices, display control methods, and programs

Also Published As

Publication number Publication date
JP2018041240A (en) 2018-03-15

Similar Documents

Publication Publication Date Title
US20210089256A1 (en) Method and system for browser-based screen sharing
US10303418B2 (en) Content item presentation system
US20150039998A1 (en) Screen sharing using scripting computer language code directly executable by web browser
WO2013111239A1 (en) Mobile terminal, television broadcast receiver, and device linkage method
US20130080560A1 (en) System and Method for Sharing Digital Data on a Presenter Device to a Plurality of Participant Devices
US20220278992A1 (en) Method and Apparatus for Securely Co-Browsing Documents and Media URLs
KR20140065764A (en) System and method for function expandable collaboration screen system
US10389792B2 (en) Output function dividing system
JP6785524B2 (en) Display device, display method and display program
WO2018041087A1 (en) Method and device for screenshot
CN114025244A (en) Audio and video pushing method, device, equipment and computer readable storage medium
JP2009223891A (en) Method of browsing web information using portable terminal
JP2009187094A (en) Conference system and program
US10038750B2 (en) Method and system of sharing data and server apparatus thereof
CN111033497A (en) Providing hyperlinks in remotely viewed presentations
KR101353320B1 (en) System for management contents on social network service
US20200104024A1 (en) Communication terminal, information sharing system, display control method, and non-transitory computer-readable medium
CN111404977B (en) Document remote demonstration and viewing method and terminal equipment
US20200177743A1 (en) Information processing apparatus, information processing system and method of processing information
JP2015069244A (en) Distribution system, distribution method, and program
US9875066B2 (en) Single action print application creation
JP7031198B2 (en) Information processing system and program
CN105930518A (en) Webpage cross-screen browsing method and system
KR102198799B1 (en) Conferencing apparatus and method for sharing content thereof
JP7367909B2 (en) First terminal, server device, second terminal, information processing method, and program

Legal Events

Date Code Title Description
A621 Written request for application examination

Free format text: JAPANESE INTERMEDIATE CODE: A621

Effective date: 20180823

A131 Notification of reasons for refusal

Free format text: JAPANESE INTERMEDIATE CODE: A131

Effective date: 20191029

A521 Written amendment

Free format text: JAPANESE INTERMEDIATE CODE: A523

Effective date: 20191220

A131 Notification of reasons for refusal

Free format text: JAPANESE INTERMEDIATE CODE: A131

Effective date: 20200421

A521 Written amendment

Free format text: JAPANESE INTERMEDIATE CODE: A523

Effective date: 20200612

TRDD Decision of grant or rejection written
A01 Written decision to grant a patent or to grant a registration (utility model)

Free format text: JAPANESE INTERMEDIATE CODE: A01

Effective date: 20201020

A61 First payment of annual fees (during grant procedure)

Free format text: JAPANESE INTERMEDIATE CODE: A61

Effective date: 20201023

R150 Certificate of patent or registration of utility model

Ref document number: 6785524

Country of ref document: JP

Free format text: JAPANESE INTERMEDIATE CODE: R150