JP7503685B1

JP7503685B1 - Embedding program, screen display program, and screen display method

Info

Publication number: JP7503685B1
Application number: JP2023072879A
Authority: JP
Inventors: 武史安川; 亜美中野; 弦斗高原
Original assignee: 三菱電機Ｉｔソリューションズ株式会社
Priority date: 2023-04-27
Filing date: 2023-04-27
Publication date: 2024-06-20
Anticipated expiration: 2043-04-27

Abstract

【課題】既存のウェブアプリケーションプログラムのソースコードに対する改修を減らしつつ、既存のウェブアプリケーションプログラムとの間で、画面の動き等に連動させた情報連携を実現可能にする。【解決手段】埋込プログラム２０は、親画面１１をブラウザ３０に表示するウェブアプリケーションプログラムである親プログラム１０から呼び出される、親プログラム１０とは異なるウェブアプリケーションプログラムである。埋込プログラム２０は、ブラウザ３０に対して発生した指定イベントを検知する。埋込プログラム２０は、指定イベントが検知されると、親プログラム１０と埋込プログラム２０との間で情報を連携させる。【選択図】図１[Problem] To realize information sharing linked to screen movements, etc., between existing web application programs while reducing modifications to the source code of existing web application programs. [Solution] An embedded program 20 is a web application program that is called from a parent program 10, which is a web application program that displays a parent screen 11 on a browser 30, and is different from the parent program 10. The embedded program 20 detects a specified event that has occurred on the browser 30. When a specified event is detected, the embedded program 20 links information between the parent program 10 and the embedded program 20. [Selected Figure] Figure 1

Description

本開示は、ウェブアプリケーションプログラム間の情報を連携する技術に関する。 This disclosure relates to technology for linking information between web application programs.

既存のウェブアプリケーションプログラムに対して機能を追加したい場合がある。この場合には、既存のウェブアプリケーションプログラムのソースコードに対して改修を加えればよい。しかし、既存のウェブアプリケーションプログラムのソースコードの改修が困難な場合がある。例えば、既存のウェブアプリケーションプログラムが他社の製品であるような場合には、既存のウェブアプリケーションプログラムの詳細な仕様が把握できないため改修が困難な場合がある。また、既存のウェブアプリケーションプログラムがクラウドシステムである場合には、自由な改修が認められておらず、改修が困難な場合がある。
既存のウェブアプリケーションプログラムのソースコードの改修が困難な場合には、追加機能を実現したウェブアプリケーションプログラムを別途作成して、既存のウェブアプリケーションプログラムとの間で情報連携させるという方法が考えられる。 There are cases where functions need to be added to an existing web application program. In this case, modifications can be made to the source code of the existing web application program. However, modifying the source code of an existing web application program can be difficult. For example, if the existing web application program is a product of another company, modifications can be difficult because the detailed specifications of the existing web application program cannot be understood. Also, if the existing web application program is a cloud system, free modifications are not permitted, and modifications can be difficult.
When it is difficult to modify the source code of an existing web application program, a possible method is to create a separate web application program that realizes the additional functions and link information between the separate web application program and the existing web application program.

ウェブアプリケーションプログラム間で情報を連携する方式としては、ＡＰＩを用いて情報転送する方式と、ＣＳＶといった形式のファイルを入出力する方式と、インラインフレームを用いた方式とがある。ＡＰＩは、ＡｐｐｌｉｃａｔｉｏｎＰｒｏｇｒａｍｍｉｎｇＩｎｔｅｒｆａｃｅの略である。ＣＳＶは、Ｃｏｍｍａ－Ｓｅｐａｒａｔｅｄ
Ｖａｌｕｅｓの略である。特許文献１には、インラインフレームを用いた技術が記載されている。 There are three methods for linking information between web application programs: using an API to transfer information, inputting and outputting files in a format such as CSV, and using an inline frame. API stands for Application Programming Interface. CSV stands for Comma-Separated Markup Language (CML).
It is an abbreviation for Values. Patent Document 1 describes a technology using an inline frame.

特開２０２３－２６７０２号公報JP 2023-26702 A

ＡＰＩを用いて情報転送する方式と、ＣＳＶといった形式のファイルを入出力する方式とでは、ウェブアプリケーションプログラムで表示する画面の動きに連動した処理の実現は困難である。そのため、画面の動きに連動させて、ウェブアプリケーションプログラム間での双方向に情報連携させること、又は、リアルタイムに情報連携させることを実現するには不向きであった。 The method of transferring information using an API and the method of inputting and outputting files in formats such as CSV make it difficult to realize processing linked to screen movements displayed by web application programs. As a result, these methods are not suitable for realizing two-way information sharing between web application programs linked to screen movements, or for real-time information sharing.

インラインフレームを用いた方式では、画面の動きに連動した処理を実現することが可能である。しかし、インラインフレームを用いた方式では、連携先と連携元とのプログラムの構造を互いに考慮し、連携先と連携元とが密に結合した実装が必要になる。 The method using inline frames makes it possible to realize processing linked to screen movement. However, the method using inline frames requires that the program structures of both the source and destination programs be taken into consideration, and that the implementation is tightly coupled between the source and destination programs.

本開示は、既存のウェブアプリケーションプログラムのソースコードに対する改修を減らしつつ、既存のウェブアプリケーションプログラムとの間で、画面の動き等に連動させた情報の連携を実現可能にすることを目的とする。 The purpose of this disclosure is to make it possible to realize information linking with screen movements, etc., between existing web application programs while reducing the need to modify the source code of the existing web application programs.

本開示に係る埋込プログラムは、
親画面をブラウザに表示するウェブアプリケーションプログラムである親プログラムから呼び出される、前記親プログラムとは異なるウェブアプリケーションプログラムである埋込プログラムであり、
前記ブラウザに対して発生した指定イベントを検知するイベント検知処理と、
前記イベント検知処理によって前記指定イベントが検知されると、前記親プログラムと前記埋込プログラムとの間で情報を連携させる情報連携処理と
をコンピュータに実行させる。 The embedding program according to the present disclosure comprises:
an embedded program which is a web application program different from a parent program that displays a parent screen on a browser and is called from the parent program,
an event detection process for detecting a specified event occurring in the browser;
When the designated event is detected by the event detection process, the computer is caused to execute an information linking process for linking information between the parent program and the embedded program.

本開示では、埋込プログラムは親プログラムから呼び出され実行される。これにより、ブラウザから見た場合に埋込プログラムは、親プログラムとともに１つのウェブ画面を構成するプログラムになる。そのため、埋込プログラムが親画面を表示したブラウザにおける指定イベントを検出し、親プログラムと埋込プログラムとの間で情報を連携させることが可能になる。その結果、親プログラムには、埋込プログラムを呼び出す処理だけを記述するだけで情報の連携が可能になる。 In this disclosure, the embedded program is called and executed by the parent program. As a result, when viewed from the browser, the embedded program becomes a program that, together with the parent program, constitutes one web screen. This makes it possible for the embedded program to detect a specified event in the browser that displays the parent screen, and to link information between the parent program and the embedded program. As a result, information linkage becomes possible simply by writing in the parent program the process for calling the embedded program.

実施の形態１に係る画面表示システム１００の構成図。FIG. 1 is a configuration diagram of a screen display system 100 according to a first embodiment. 実施の形態１に係るウェブ画面の説明図。FIG. 4 is an explanatory diagram of a web screen according to the first embodiment. 実施の形態１に係る第１サーバ１０１と第２サーバ１０２とユーザ端末１０３とのハードウェア構成の説明図。FIG. 2 is an explanatory diagram of the hardware configurations of a first server 101, a second server 102, and a user terminal 103 according to the first embodiment. 実施の形態１に係る画面表示システム１００の動作概要を示すフローチャート。4 is a flowchart showing an outline of the operation of the screen display system 100 according to the first embodiment. 実施の形態１に係る画面表示システム１００の詳細な動作を示すフローチャート。4 is a flowchart showing a detailed operation of the screen display system 100 according to the first embodiment. 実施の形態１に係る画面表示システム１００の詳細な動作を示すフローチャート。4 is a flowchart showing a detailed operation of the screen display system 100 according to the first embodiment. 実施の形態１に係る埋込プログラム２０を用いて親プログラム１０に機能追加する方法の説明図。3 is an explanatory diagram of a method for adding a function to a parent program 10 using an embedding program 20 according to the first embodiment. 実施の形態１に係る埋込プログラム２０を用いて親プログラム１０に機能追加する方法の説明図。3 is an explanatory diagram of a method for adding a function to a parent program 10 using an embedding program 20 according to the first embodiment. 変形例２に係る画面表示システム１００の構成図。FIG. 11 is a configuration diagram of a screen display system 100 according to a second modified example.

実施の形態１．
＊＊＊構成の説明＊＊＊
図１を参照して、実施の形態１に係る画面表示システム１００の構成を説明する。
画面表示システム１００は、第１サーバ１０１と、第２サーバ１０２と、ユーザ端末１０３とを備える。第１サーバ１０１と、第２サーバ１０２と、ユーザ端末１０３とは、インターネット等のネットワーク１０９を介して接続されている。 Embodiment 1.
***Configuration Description***
The configuration of a screen display system 100 according to the first embodiment will be described with reference to FIG.
The screen display system 100 includes a first server 101, a second server 102, and a user terminal 103. The first server 101, the second server 102, and the user terminal 103 are connected to each other via a network 109 such as the Internet.

第１サーバ１０１には、ウェブアプリケーションプログラムである親プログラム１０が記憶されている。第２サーバ１０２には、親プログラムとは異なるウェブアプリケーションプログラムである埋込プログラム２０が記憶されている。 The first server 101 stores a parent program 10, which is a web application program. The second server 102 stores an embedded program 20, which is a web application program different from the parent program.

ユーザ端末１０３は、ウェブ閲覧用のブラウザ３０を備える。ユーザ端末１０３は、ブラウザ３０を介して第１サーバ１０１にアクセスして、親プログラム１０を取得して実行する。これにより、図２に示すように、ユーザ端末１０３が備えるブラウザ３０に、親プログラム１０によって親画面１１が描画される。また、親プログラム１０によって、第２サーバ１０２に記憶された埋込プログラム２０が呼び出され、実行される。これにより、図２に示すように、親画面１１の一部として、埋込画面２１が描画される。 The user terminal 103 has a browser 30 for web browsing. The user terminal 103 accesses the first server 101 via the browser 30, and obtains and executes the parent program 10. As a result, as shown in FIG. 2, the parent program 10 renders a parent screen 11 on the browser 30 of the user terminal 103. The parent program 10 also calls and executes an embedded program 20 stored in the second server 102. As a result, as shown in FIG. 2, an embedded screen 21 is rendered as part of the parent screen 11.

図３を参照して、実施の形態１に係る第１サーバ１０１と第２サーバ１０２とユーザ端末１０３とのハードウェア構成を説明する。
第１サーバ１０１と第２サーバ１０２とユーザ端末１０３とは、コンピュータである。
第１サーバ１０１と第２サーバ１０２とユーザ端末１０３とは、プロセッサ２０１と、メモリ２０２と、ストレージ２０３と、通信インタフェース２０４とのハードウェアを備える。プロセッサ２０１は、信号線を介して他のハードウェアと接続され、これら他のハードウェアを制御する。 With reference to FIG. 3, the hardware configurations of the first server 101, the second server 102, and the user terminal 103 according to the first embodiment will be described.
The first server 101, the second server 102, and the user terminal 103 are computers.
The first server 101, the second server 102, and the user terminal 103 each include the following hardware: a processor 201, a memory 202, a storage 203, and a communication interface 204. The processor 201 is connected to other hardware via signal lines and controls the other hardware.

プロセッサ２０１は、プロセッシングを行うＩＣである。ＩＣはＩｎｔｅｇｒａｔｅｄ
Ｃｉｒｃｕｉｔの略である。プロセッサ２０１は、具体例としては、ＣＰＵ、ＤＳＰ、ＧＰＵである。ＣＰＵは、ＣｅｎｔｒａｌＰｒｏｃｅｓｓｉｎｇＵｎｉｔの略である。ＤＳＰは、ＤｉｇｉｔａｌＳｉｇｎａｌＰｒｏｃｅｓｓｏｒの略である。ＧＰＵは、ＧｒａｐｈｉｃｓＰｒｏｃｅｓｓｉｎｇＵｎｉｔの略である。 The processor 201 is an integrated circuit (IC) that performs processing.
The processor 201 is, for example, a CPU, a DSP, or a GPU. The CPU is an abbreviation for Central Processing Unit. The DSP is an abbreviation for Digital Signal Processor. The GPU is an abbreviation for Graphics Processing Unit.

メモリ２０２は、情報を一時的に記憶する記憶装置である。メモリ２０２は、具体例としては、ＳＲＡＭ、ＤＲＡＭである。ＳＲＡＭは、ＳｔａｔｉｃＲａｎｄｏｍＡｃｃｅｓｓＭｅｍｏｒｙの略である。ＤＲＡＭは、ＤｙｎａｍｉｃＲａｎｄｏｍＡｃｃｅｓｓＭｅｍｏｒｙの略である。 Memory 202 is a storage device that temporarily stores information. Specific examples of memory 202 include SRAM and DRAM. SRAM stands for Static Random Access Memory. DRAM stands for Dynamic Random Access Memory.

ストレージ２０３は、情報を保管する記憶装置である。ストレージ２０３は、具体例としては、ＨＤＤである。ＨＤＤは、ＨａｒｄＤｉｓｋＤｒｉｖｅの略である。また、ストレージ２０３は、ＳＤ（登録商標）メモリカード、ＣｏｍｐａｃｔＦｌａｓｈ（登録商標）、ＮＡＮＤフラッシュ、フレキシブルディスク、光ディスク、コンパクトディスク、Ｂｌｕ－ｒａｙ（登録商標）ディスク、ＤＶＤといった可搬記録媒体であってもよい。ＳＤは、ＳｅｃｕｒｅＤｉｇｉｔａｌの略である。ＤＶＤは、ＤｉｇｉｔａｌＶｅｒｓａｔｉｌｅＤｉｓｋの略である。 Storage 203 is a storage device that stores information. A specific example of storage 203 is a HDD. HDD is an abbreviation for Hard Disk Drive. Storage 203 may also be a portable recording medium such as an SD (registered trademark) memory card, CompactFlash (registered trademark), NAND flash, a flexible disk, an optical disk, a compact disk, a Blu-ray (registered trademark) disk, or a DVD. SD is an abbreviation for Secure Digital. DVD is an abbreviation for Digital Versatile Disk.

通信インタフェース２０４は、外部の装置と通信するためのインタフェースである。通信インタフェース２０４は、具体例としては、Ｅｔｈｅｒｎｅｔ（登録商標）、ＵＳＢ、ＨＤＭＩ（登録商標）のポートである。ＵＳＢは、ＵｎｉｖｅｒｓａｌＳｅｒｉａｌＢｕｓの略である。ＨＤＭＩは、Ｈｉｇｈ－ＤｅｆｉｎｉｔｉｏｎＭｕｌｔｉｍｅｄｉａＩｎｔｅｒｆａｃｅの略である。 The communication interface 204 is an interface for communicating with external devices. Specific examples of the communication interface 204 are Ethernet (registered trademark), USB, and HDMI (registered trademark) ports. USB is an abbreviation for Universal Serial Bus. HDMI is an abbreviation for High-Definition Multimedia Interface.

＊＊＊動作の説明＊＊＊
図４から図７を参照して、実施の形態１に係る画面表示システム１００の動作を説明する。
実施の形態１に係る画面表示システム１００の動作手順は、実施の形態１に係る画面表示方法に相当する。また、実施の形態１に係る画面表示システム１００の動作を実現する親プログラム及び埋込プログラムは、実施の形態１に係る画面表示プログラムに相当する。 *** Operation Description ***
The operation of the screen display system 100 according to the first embodiment will be described with reference to FIGS.
The operation procedure of the screen display system 100 according to the first embodiment corresponds to the screen display method according to the first embodiment. Moreover, the parent program and the embedded program that realize the operation of the screen display system 100 according to the first embodiment correspond to the screen display program according to the first embodiment.

図４を参照して、実施の形態１に係る画面表示システム１００の動作概要を説明する。
（ステップＳ１：親描画処理）
ユーザ端末１０３は、ブラウザ３０を介して第１サーバ１０１にアクセスして、親プログラム１０を取得し実行する。これにより、ブラウザ３０において親プログラム１０が起動する。親プログラム１０は、親画面１１をブラウザ３０に描画する。また、親プログラム１０は、埋込プログラム２０を呼び出す呼出し処理を実行する。 An outline of the operation of the screen display system 100 according to the first embodiment will be described with reference to FIG.
(Step S1: Parent drawing process)
The user terminal 103 accesses the first server 101 via the browser 30 to obtain and execute the parent program 10. This starts the parent program 10 in the browser 30. The parent program 10 renders a parent screen 11 on the browser 30. The parent program 10 also executes a call process to call the embedded program 20.

（ステップＳ２：埋込描画処理）
ブラウザ３０においてステップＳ１で呼び出された埋込プログラム２０が起動する。埋込プログラム２０は、親画面１１の一部として、埋込画面２１を描画する。また、埋込プログラム２０は、ブラウザ３０の指定イベントをフックする。
指定イベントとは、後述するようにアプリケーション情報又は初期情報に設定されていて、親画面１１または埋込画面２１における利用者からのキー操作やマウス操作等によるイベントを示す。指定イベントをフックするとは、指定イベントの発生を埋込プログラム２０に通知するように指定することであり、詳細は後述する。 (Step S2: Embedded drawing process)
The embedded program 20 called in step S1 is started in the browser 30. The embedded program 20 draws the embedded screen 21 as a part of the parent screen 11. The embedded program 20 also hooks a designated event of the browser 30.
The designated event is set in the application information or initial information as described later, and indicates an event caused by a user's key operation, mouse operation, or the like on the parent screen 11 or the embedded screen 21. Hooking a designated event means designating that the occurrence of the designated event should be notified to the embedded program 20, and details will be described later.

ステップＳ１からステップＳ２の処理が実行されることにより、図２に示すように、親画面１１の一部として、埋込画面２１が描画されたウェブ画面が表示される。このウェブ画面に対してユーザにより操作が行われる。例えば、ウェブ画面上をカーソルが動かされる、ブラウザ３０のサイズが変更される、親画面１１におけるテキストボックスに入力される、埋込画面２１におけるボタンが押下されるといった操作がされる。 By executing the processes from step S1 to step S2, as shown in FIG. 2, a web screen on which the embedded screen 21 is drawn is displayed as part of the parent screen 11. The user performs operations on this web screen. For example, the cursor is moved on the web screen, the size of the browser 30 is changed, data is entered into a text box on the parent screen 11, and a button on the embedded screen 21 is pressed.

（ステップＳ３：イベント検知処理）
埋込プログラム２０は、ブラウザ３０に対して発生した指定イベントを検知する。埋込プログラム２０は、指定イベントが検知された場合には、処理をステップＳ４に進める。一方、埋込プログラム２０は、指定イベントが検知されなかった場合には、処理をステップＳ３に戻す。 (Step S3: Event detection process)
The embedded program 20 detects a designated event that has occurred in the browser 30. If the designated event is detected, the embedded program 20 proceeds to step S4. On the other hand, if the designated event is not detected, the embedded program 20 returns the process to step S3.

（ステップＳ４：情報連携処理）
埋込プログラム２０は、親プログラム１０と埋込プログラム２０との間で情報を連携させる。
具体例として、埋込プログラム２０は、親プログラム１０で管理される情報を取得して、取得した情報を用いて指定イベントに応じた処理を実行する。埋込プログラム２０は、取得した情報に基づき埋込画面２１に表示する情報を更新する処理を実行することが考えられる。他の具体例として、埋込プログラム２０は、埋込プログラム２０で管理される情報を親プログラム１０に渡して親画面１１に設定する。
ここで親プログラム１０と埋込プログラム２０との間での情報の連携とは、具体例として示した親プログラム１０で管理される情報を埋込プログラム２０に渡すことを含み、親画面１１あるいは埋込画面２１でのユーザの画面操作に応じた入力値又は表示値に関する情報、親プログラム１０あるいは埋込プログラム２０での処理の実行結果に基づく表示値に関する情報等を親プログラム１０と埋込プログラム２０との間で受け渡すことを示す。 (Step S4: Information linkage processing)
The embedding program 20 coordinates information between the parent program 10 and the embedding program 20 .
As a specific example, the embedded program 20 acquires information managed by the parent program 10 and executes processing according to a designated event using the acquired information. The embedded program 20 may execute processing to update information displayed on the embedded screen 21 based on the acquired information. As another specific example, the embedded program 20 passes information managed by the embedded program 20 to the parent program 10 and sets the information in the parent screen 11.
Here, the information linkage between the parent program 10 and the embedded program 20 includes passing information managed by the parent program 10 shown as a specific example to the embedded program 20, and indicates the passing of information regarding input values or display values in response to the user's screen operations on the parent screen 11 or embedded screen 21, information regarding display values based on the results of processing in the parent program 10 or embedded program 20, etc. between the parent program 10 and the embedded program 20.

ウェブ画面に対してユーザにより操作が行われ、ステップＳ３からステップＳ４の処理が繰り返し実行される。これにより、親プログラム１０と埋込プログラム２０との間で情報が連携されながら、処理が実行される。 The user operates the web screen, and the processes from step S3 to step S4 are executed repeatedly. This allows the parent program 10 and the embedded program 20 to share information while executing the process.

図５及び図６を参照して、実施の形態１に係る画面表示システム１００の詳細な動作を説明する。
まずブラウザ３０において親プログラム１０が動作する。ステップＳ１１からステップＳ１３の処理は、図４のステップＳ１の処理に対応する。 The detailed operation of the screen display system 100 according to the first embodiment will be described with reference to FIG. 5 and FIG.
First, the parent program 10 runs on the browser 30. The processes in steps S11 to S13 correspond to the process in step S1 in FIG.

なお具体例として親プログラム１０は、ＨＴＭＬで構成され、埋込プログラム２０は、ｊａｖａｓｃｒｉｐｔで構成されているものとする。ＨＴＭＬは、ＨｙｐｅｒＴｅｘｔＭａｒｋｕｐＬａｎｇｕａｇｅの略である。
第１サーバ１０１にアクセスすることにより、親プログラム１０を構成するＨＴＭＬプログラムがブラウザ３０に読み込まれる（ステップＳ１１）。これにより、ブラウザ３０において親プログラム１０が起動する。親プログラム１０は、親画面１１をブラウザ３０に表示する。
親プログラム１０は、埋込プログラム２０を呼び出す（ステップＳ１２）。具体的には、ＨＴＭＬプログラムには、埋込プログラム２０を構成するエンジンｊｓファイルを指定したｓｃｒｉｐｔタグが記載されている。このｓｃｒｉｐｔタグが実行されることにより、第２サーバ１０２から埋込プログラム２０のエンジンｊｓファイルが読み込まれる。
ブラウザ３０はエンジンｊｓを起動する（ステップＳ１３）。ここでは、エンジンｊｓには、末尾に実行命令が記述されているとする。そのため、ブラウザ３０は、読み込まれたエンジンｊｓを起動する。 As a specific example, the parent program 10 is written in HTML, and the embedded program 20 is written in Javascript. HTML is an abbreviation for HyperText Markup Language.
By accessing the first server 101, the HTML program constituting the parent program 10 is read into the browser 30 (step S11). This starts the parent program 10 in the browser 30. The parent program 10 displays the parent screen 11 on the browser 30.
The parent program 10 calls the embedding program 20 (step S12). Specifically, the HTML program describes a script tag that specifies an engine js file that constitutes the embedding program 20. When this script tag is executed, the engine js file of the embedding program 20 is read from the second server 102.
The browser 30 starts the engine js (step S13). Here, it is assumed that the engine js has an execution command at the end. Therefore, the browser 30 starts the loaded engine js.

エンジンｊｓを実行したことにより、動作の主体が埋込プログラム２０に移る。ステップＳ２１からステップＳ２９の処理は、図４のステップＳ２の処理に対応する。 By executing the engine js, the subject of operation is transferred to the embedding program 20. The processing from step S21 to step S29 corresponds to the processing of step S2 in FIG. 4.

エンジンｊｓが実行する処理に関する情報を持っていないため、埋込プログラム２０は、実行する処理について第２サーバ１０２に問合せする（ステップＳ２１）。すると、第２サーバ１０２は、初期に実行されるｓｔａｒｔｕｐ．ｊｓｏｎファイルを読み込み、ｓｔａｒｔｕｐ．ｊｓｏｎファイルをアプリケーション情報としてブラウザ３０に送信する（ステップＳ２２）。ｓｔａｒｔｕｐ．ｊｓｏｎファイルには、実行モジュールの情報と、初期化メソッドとが示されている。
埋込プログラム２０は、アプリケーション情報であるｓｔａｒｔｕｐ．ｊｓｏｎファイルに示された実行モジュールの初期化メソッドの実行を第２サーバ１０２に指示する（ステップＳ２３）。第２サーバ１０２は、実行モジュールの初期化メソッドを呼び出す（ステップＳ２４）。すると、実行モジュールの初期化メソッドが実行され、デザインファイルと、親画面１１の一部として埋込画面２１が描画されたウェブ画面を初期に表示する情報とがブラウザ３０に返される（ステップＳ２５）。
ここでアプリケーション情報とはアプリケーションの動作に必要な情報を定義した情報を示す。またデザインファイルとは埋込画面２１のデザイン情報を定義したファイルを示す。ｊａｖａｓｃｒｉｐｔを用いて描画できる領域をＣａｎｖａｓと言うが、デザインファイルは、Ｃａｎｖａｓに描画される画面デザインの情報を定義したファイルで、具体的にはボタンの座標、大きさ、表示する文字列といった情報が含まれている。
埋込プログラム２０は、デザインファイルに基づき、親プログラム１０にＣａｎｖａｓタグを埋め込む（ステップＳ２６）。これにより、親画面１１の一部として、Ｃａｎｖａｓタグで示された埋込画面２１が描画される（ステップＳ２７）。埋込プログラム２０は、ブラウザ３０の指定イベントをフックする（ステップＳ２８）。指定イベントは、アプリケーション情報又は初期情報に設定されている。指定イベントは、親画面１１におけるテキストボックスに入力される、埋込画面２１におけるボタンが押下されるといったイベントである。
埋込プログラム２０は、アプリケーション情報とデザイン情報と初期情報とのいずれかに示された画面部品ｊｓファイル及び個別イベントｊｓファイルとを第２サーバ１０２から読み込む（ステップＳ２９）。画面部品ｊｓファイルは、埋込画面２１を変化させるためのプログラムである。個別イベントｊｓファイルは、親プログラム１０と埋込プログラム２０との間で情報連携を行うためのプログラムである。 Since the engine js does not have information about the process to be executed, the embedded program 20 inquires of the second server 102 about the process to be executed (step S21). The second server 102 then reads the startup.json file to be executed initially, and transmits the startup.json file to the browser 30 as application information (step S22). The startup.json file indicates information about the execution module and an initialization method.
The embedded program 20 instructs the second server 102 to execute the initialization method of the execution module indicated in the startup.json file, which is application information (step S23). The second server 102 calls the initialization method of the execution module (step S24). Then, the initialization method of the execution module is executed, and the design file and information for initially displaying the web screen on which the embedded screen 21 is drawn as a part of the parent screen 11 are returned to the browser 30 (step S25).
Here, application information refers to information that defines information necessary for the operation of an application. Also, a design file refers to a file that defines design information for the embedded screen 21. An area where drawing can be done using Javascript is called a Canvas, and a design file is a file that defines information on the screen design to be drawn on the Canvas, specifically including information such as button coordinates, size, and character strings to be displayed.
The embedding program 20 embeds a Canvas tag in the parent program 10 based on the design file (step S26). As a result, the embedded screen 21 indicated by the Canvas tag is drawn as a part of the parent screen 11 (step S27). The embedding program 20 hooks a designated event of the browser 30 (step S28). The designated event is set in the application information or the initial information. The designated event is an event such as inputting information into a text box in the parent screen 11 or pressing a button in the embedded screen 21.
The embedded program 20 reads the screen component js file and the individual event js file indicated in any one of the application information, the design information, and the initial information from the second server 102 (step S29). The screen component js file is a program for changing the embedded screen 21. The individual event js file is a program for information linkage between the parent program 10 and the embedded program 20.

以上の処理により、図２に示すように、親画面１１の一部として、埋込画面２１が描画されたウェブ画面が表示される。表現を変えると、親画面１１内のＣａｎｖａｓの領域に、埋込画面２１が描画されたウェブ画面が表示される。このウェブ画面に対してユーザにより操作が行われる。例えば、カーソルの移動、キーボードによるキー入力、画面サイズ変更、タイマーの作動等が行われる。そして、ユーザによる操作が行われる際、ステップＳ３１以降の処理が実行される。
ステップＳ３１からステップＳ３２の処理は、図４のステップＳ３の処理に対応する。ステップＳ４１からステップＳ４７の処理は、図４のステップＳ４の処理に対応する。 Through the above processing, as shown in Fig. 2, a web screen on which the embedded screen 21 is drawn is displayed as part of the parent screen 11. In other words, the web screen on which the embedded screen 21 is drawn is displayed in the Canvas area of the parent screen 11. The user performs operations on this web screen. For example, the user moves the cursor, inputs keys on the keyboard, changes the screen size, starts a timer, and so on. When the user performs an operation, the processing from step S31 onwards is executed.
The processes from step S31 to step S32 correspond to the process of step S3 in Fig. 4. The processes from step S41 to step S47 correspond to the process of step S4 in Fig. 4.

埋込プログラム２０は、ブラウザ３０に対して発生したイベントを検知する（ステップＳ３１）。
上述したとおり、ｊａｖａｓｃｒｉｐｔを用いて描画できる領域であるＣａｎｖａｓでは、通常であればＣａｎｖａｓ上をマウスが動いたか否か程度の操作しか検知できない。埋込プログラム２０が埋込画面２１を作りこむことでＣａｎｖａｓ上のボタンに対するマウス操作又はキーボード操作もブラウザ３０で発生したイベントとして検知が可能となる。
埋込プログラム２０は、検知されたイベントが埋込画面２１の再描画が必要なイベントである場合には、画面部品ｊｓファイルの描画処理を呼び出して実行する（ステップＳ３２）。これにより、イベントに応じて埋込画面２１が再描画される。埋込画面２１の再描画が必要なイベントとは、例えば、埋込画面２１のボタンにカーソルが合わせられた、ブラウザ３０の画面サイズが変更されたといったイベントである。例えば、埋込画面２１のボタンにカーソルが合わせられた場合には、埋込プログラム２０はボタンの色を変化させる。また、ブラウザ３０の画面サイズが変更された場合には、埋込プログラム２０は埋込画面２１のサイズを変化させる。
埋込プログラム２０は、検知されたイベントが指定イベントである場合には、処理をステップＳ４１に進める。 The embedded program 20 detects an event that occurs in the browser 30 (step S31).
As described above, the Canvas, which is an area where drawing can be done using Javascript, can usually only detect operations such as whether or not the mouse has moved on the Canvas. By creating the embedded screen 21 using the embedded program 20, it becomes possible to detect mouse operations or keyboard operations on buttons on the Canvas as events occurring in the browser 30.
If the detected event is an event that requires redrawing of the embedded screen 21, the embedded program 20 calls and executes the drawing process of the screen part js file (step S32). As a result, the embedded screen 21 is redrawn in response to the event. An event that requires redrawing of the embedded screen 21 is, for example, an event in which the cursor is placed on a button on the embedded screen 21 or the screen size of the browser 30 is changed. For example, when the cursor is placed on a button on the embedded screen 21, the embedded program 20 changes the color of the button. Also, when the screen size of the browser 30 is changed, the embedded program 20 changes the size of the embedded screen 21.
If the detected event is a specified event, the embedding program 20 advances the process to step S41.

埋込プログラム２０は、検知された指定イベントに対応するシグナルを発生させる（ステップＳ４１）。シグナルは、埋込プログラム２０におけるイベントである。埋込プログラム２０は、シグナルに対応するイベントメソッドがあるか否かを判定する（ステップＳ４２）。イベントメソッドがあった場合には、埋込プログラム２０は、イベントメソッドの実行を第２サーバ１０２に指示する（ステップＳ４３）。一方、イベントメソッドがなかった場合には、埋込プログラム２０は、処理をステップＳ３１に戻す。
イベントメソッドの実行が指示されると、第２サーバ１０２は、実行モジュールの該当するイベントメソッドを呼び出す（ステップＳ４４）。すると、実行モジュールの該当するイベントメソッドが実行される（ステップＳ４５）。そして、埋込プログラム２０は、イベントメソッドの実行結果に応じて、親画面１１に値を設定する、又は、埋込画面２１を再描画するといった処理を行う（ステップＳ４６）。なお、イベントメソッドによっては、ステップＳ４６の処理はスキップされる。
そして、処理がステップＳ３１に戻される。
シグナルとは指定イベントが検知されたとき、その指定イベントが検知されたという情報を示す。シグナルに対応するイベントメゾットとは、指定イベントに応じた第２サーバ１０２での処理内容を定義したものである。シグナルに対応するイベントメゾットがあるか否かの情報は、第２サーバ１０２および埋込プログラム２０で連携されているものとする。 The embedding program 20 generates a signal corresponding to the detected specified event (step S41). The signal is an event in the embedding program 20. The embedding program 20 determines whether or not there is an event method corresponding to the signal (step S42). If there is an event method, the embedding program 20 instructs the second server 102 to execute the event method (step S43). On the other hand, if there is no event method, the embedding program 20 returns the process to step S31.
When execution of the event method is instructed, the second server 102 calls the corresponding event method of the execution module (step S44). Then, the corresponding event method of the execution module is executed (step S45). Then, the embedded program 20 performs processing such as setting a value in the parent screen 11 or redrawing the embedded screen 21 according to the execution result of the event method (step S46). Note that, depending on the event method, the processing of step S46 may be skipped.
Then, the process returns to step S31.
A signal indicates, when a designated event is detected, information that the designated event has been detected. An event method corresponding to a signal defines the processing content in the second server 102 according to the designated event. Information as to whether or not there is an event method corresponding to a signal is shared between the second server 102 and the embedded program 20.

図７及び図８を参照して、実施の形態１に係る埋込プログラム２０を用いて親プログラム１０に機能追加する方法を説明する。図７及び図８では、比較のため、インラインフレームを用いた方式で親プログラム１０に機能追加した場合についても示されている。 A method for adding a function to a parent program 10 using an embedded program 20 according to embodiment 1 will be described with reference to Figures 7 and 8. For comparison, Figures 7 and 8 also show a case where a function is added to a parent program 10 using a method that uses an inline frame.

図７では、親画面１１のテキストボックスに入力された情報を埋込プログラム２０に受け渡す機能を追加する例が示されている。
実施の形態１における方法でこの機能を追加する場合には、親プログラム１０側には、埋込プログラム２０を呼び出すｓｃｒｉｐｔタグを追加する。埋込プログラム２０側には、親画面１１のテキストボックスに情報が入力されたことを指定イベントとして設定し、指定イベントが検知された場合に情報を取得する処理を記述する。
これに対して、インラインフレームを用いた方式でこの機能を追加する場合には、親プログラム１０側には、親画面１１のテキストボックスに情報が入力された場合に、入力された情報をｐｏｓｔＭｅｓｓａｇｅするように記述する。ｐｏｓｔＭｅｓｓａｇｅは、ブラウザ内のウインドウ間通信である。埋込プログラム２０側には、メッセージ待機イベント（ｏｎＭｅｓｓａｇｅ）を受け取った場合に、メッセージの送信元のＵＲＬが親プログラム１０であれば、情報を取得するよう記述にする。ＵＲＬは、ＵｎｉｆｏｒｍＲｅｓｏｕｒｃｅＬｏｃａｔｏｒの略である。 FIG. 7 shows an example in which a function for transferring information entered in a text box on the parent screen 11 to the embedding program 20 is added.
When adding this function using the method in the first embodiment, a script tag for calling the embedded program 20 is added to the parent program 10. The input of information into a text box on the parent screen 11 is set as a specified event on the embedded program 20 side, and a process for acquiring information when the specified event is detected is described.
On the other hand, when this function is added using an inline frame, the parent program 10 is written to post the entered information when the information is entered into a text box on the parent screen 11. PostMessage is communication between windows in a browser. The embedded program 20 is written to obtain the information when a message waiting event (onMessage) is received and the URL of the message sender is the parent program 10. URL is an abbreviation for Uniform Resource Locator.

図８では、埋込画面２１のボタンが押下された場合に埋込プログラム２０内の情報を親画面１１のテキストボックスに設定する機能を追加する例が示されている。
実施の形態１における方法でこの機能を追加する場合には、親プログラム１０側には、埋込プログラム２０を呼び出すｓｃｒｉｐｔタグを追加する。埋込プログラム２０側には、埋込画面２１のボタンが押下されたことを指定イベントとして設定し、指定イベントが検知された場合に埋込プログラム２０内の情報を親画面１１のテキストボックスに設定する処理を記述する。なお、親画面１１と埋込画面２１とは同一のウェブ画面であるため、特別な処理はいらず、単に埋込プログラム２０内の情報を親画面１１のテキストボックスに設定すればよい。
これに対して、インラインフレームを用いた方式でこの機能を追加する場合には、親プログラム１０側には、メッセージ待機イベント（ｏｎＭｅｓｓａｇｅ）を受け取った場合に、メッセージの送信元のＵＲＬが埋込プログラム２０であれば、情報を取得して親画面１１のテキストボックスに設定する処理を記述する。埋込プログラム２０には、埋込画面２１のボタンが押下された場合に、入力された情報をｐｏｓｔＭｅｓｓａｇｅするように記述する。 FIG. 8 shows an example in which a function is added for setting information in the embedded program 20 in a text box on the parent screen 11 when a button on the embedded screen 21 is pressed.
When adding this function using the method in the first embodiment, a script tag that calls the embedded program 20 is added to the parent program 10. The embedded program 20 describes a process for setting the pressing of a button on the embedded screen 21 as a specified event, and setting information in the embedded program 20 in a text box on the parent screen 11 when the specified event is detected. Note that since the parent screen 11 and the embedded screen 21 are the same web screen, no special process is required, and it is sufficient to simply set information in the embedded program 20 in the text box on the parent screen 11.
On the other hand, when adding this function using an inline frame, the parent program 10 is written with a process for obtaining information and setting it in a text box on the parent screen 11 when a message waiting event (onMessage) is received and the URL of the message sender is the embedded program 20. The embedded program 20 is written to postMessage the entered information when a button on the embedded screen 21 is pressed.

＊＊＊実施の形態１の効果＊＊＊
以上のように、実施の形態１に係る画面表示システム１００では、埋込プログラム２０は親プログラム１０から呼び出され実行される。これにより、ブラウザ３０から見た場合に埋込プログラム２０は、親プログラム１０とともに１つのウェブ画面を構成するプログラムになる。そのため、埋込プログラム２０が親画面１１を表示したブラウザ３０における指定イベントを検出し、親プログラム１０と埋込プログラム２０との間で情報を連携させることが可能になる。その結果、親プログラム１０には、埋込プログラム２０を呼び出す処理だけを記述するだけで情報の連携が可能になる。 ***Advantages of First Embodiment***
As described above, in the screen display system 100 according to the first embodiment, the embedded program 20 is called from the parent program 10 and executed. As a result, when viewed from the browser 30, the embedded program 20 and the parent program 10 become a program that constitutes one web screen. This makes it possible for the embedded program 20 to detect a designated event in the browser 30 displaying the parent screen 11, and to link information between the parent program 10 and the embedded program 20. As a result, information linkage becomes possible simply by writing in the parent program 10 the process of calling the embedded program 20.

図７及び図８を参照して説明したように、親プログラム１０側には、原則として埋込プログラム２０を呼び出すｓｃｒｉｐｔタグを追加するだけでよい。そのため、親プログラム１０が他社の製品であり、親プログラム１０の仕様が分からないような場合であっても、親プログラム１０に対する作業を容易に行うことができる。また、親プログラム１０がクラウドシステムである場合にも、ｓｃｒｉｐｔタグの追加だけを許可すれば、親プログラム１０に対する作業を容易に行うことができる。
これに対して、インラインフレームを用いた方式では、連携先と連携元とのプログラムの構造を互いに考慮し、連携先と連携元とが密に結合した実装が必要になる。つまり、親プログラム１０側についても仕様を把握した上で改修を行う必要がある。そのため、親プログラム１０が他社の製品であり、親プログラム１０の仕様が分からないような場合には、親プログラム１０に対する作業は困難である。また、親プログラム１０がクラウドシステムである場合には、作業を許可することが難しく、親プログラム１０に対する作業は困難である。 7 and 8, in principle, all that is required is to add a script tag that calls the embedded program 20 to the parent program 10. Therefore, even if the parent program 10 is a product of another company and the specifications of the parent program 10 are unknown, work on the parent program 10 can be easily performed. Also, even if the parent program 10 is a cloud system, work on the parent program 10 can be easily performed by only allowing the addition of a script tag.
In contrast, the method using an inline frame requires that the structures of the programs of the link destination and the link source be taken into consideration, and that the link destination and the link source be tightly coupled in implementation. In other words, it is necessary to understand the specifications of the parent program 10 before making modifications. Therefore, if the parent program 10 is a product of another company and the specifications of the parent program 10 are unknown, it is difficult to perform work on the parent program 10. Also, if the parent program 10 is a cloud system, it is difficult to give permission to perform work, and it is difficult to perform work on the parent program 10.

このような特徴を利用することで、他社の製品であるウェブアプリケーションプログラムに対して、任意の機能を追加することができる。また、古くなり、サポートが切れてしまっているようなウェブアプリケーションプログラムに対して、任意の機能を追加することができる。また、ベースとなる機能を作り込んだウェブアプリケーションプログラムをクラウドシステムとして実装しておき、提供先毎に埋込プログラム２０を作り込んで連携させることで、クラウドシステムをカスタマイズすることができる。 By utilizing these features, any function can be added to a web application program that is a product of another company. Also, any function can be added to an old web application program that is no longer supported. Also, by implementing a web application program with basic functions as a cloud system and creating and linking embedded programs 20 for each destination, the cloud system can be customized.

実施の形態１に係る画面表示システム１００では、上述した通り、親プログラム１０にはｓｃｒｉｐｔタグを追加するだけでよい。そのため、埋込プログラム２０により機能追加した場合であっても、親プログラム１０についてのテストは埋込プログラム２０と関連する部分だけで十分である。そのため、機能追加におけるテスト工数を抑えることが可能である。 As described above, in the screen display system 100 according to the first embodiment, it is only necessary to add a script tag to the parent program 10. Therefore, even if a function is added by the embedded program 20, it is sufficient to test only the part of the parent program 10 related to the embedded program 20. Therefore, it is possible to reduce the amount of testing work required for adding a function.

また、インラインフレームを用いた方式では、同一生成元ポリシーの制限があり、第１サーバ１０１と第２サーバ１０２とが同一ドメインでない場合には、情報の取得及び情報の操作に制限がかけられる。
しかし、実施の形態１に係る画面表示システム１００では、ブラウザ３０から見た場合に埋込プログラム２０は、親プログラム１０とともに１つのウェブ画面を構成するプログラムになる。そのため、情報の取得及び情報の操作に対して、インラインフレームを用いた方式のような制限はない。 Furthermore, in the method using an inline frame, there is a restriction of the same origin policy, and if the first server 101 and the second server 102 are not in the same domain, the acquisition and manipulation of information is restricted.
However, in the screen display system 100 according to the first embodiment, when viewed from the browser 30, the embedded program 20 becomes a program that configures one web screen together with the parent program 10. Therefore, there are no limitations to information acquisition and information manipulation, as there are in the method using an inline frame.

また、インラインフレームを用いた方式では、連携する情報が他のウェブアプリケーションプログラムによって傍受されるリスクがある。具体的には、図７の例で、親プログラム１０が親画面１１のテキストボックスに情報が入力された場合に、入力された情報をｐｏｓｔＭｅｓｓａｇｅする。このとき、親画面１１に表示されたどのウインドウからでも、ｐｏｓｔＭｅｓｓａｇｅされた情報を取得できる。そのため、悪意のあるウインドウが表示されてしまうと、情報を取得されてしまう恐れがある。
しかし、実施の形態１に係る画面表示システム１００では、他のウインドウから情報を取得される恐れはない。 Furthermore, in the method using an inline frame, there is a risk that linked information may be intercepted by other web application programs. Specifically, in the example of Fig. 7, when information is entered into a text box on the parent screen 11, the parent program 10 posts the entered information. At this time, the posted information can be obtained from any window displayed on the parent screen 11. Therefore, if a malicious window is displayed, there is a risk that the information may be obtained.
However, in the screen display system 100 according to the first embodiment, there is no risk of information being obtained from other windows.

＊＊＊他の構成＊＊＊
＜変形例１＞
実施の形態１では、親画面１１の一部として埋込画面２１が描画された。しかし、埋込画面２１は、描画されなくてもよい。この場合には、埋込プログラム２０は、親画面１１に情報を表示せず、親プログラム１０の情報を用いた処理を行うプログラムである。例えば、埋込プログラム２０は、親プログラム１０に入力された情報を編集等して記録するようなプログラムである。 ***Other configurations***
<Modification 1>
In the first embodiment, the embedded screen 21 is drawn as a part of the parent screen 11. However, the embedded screen 21 does not have to be drawn. In this case, the embedded program 20 is a program that performs processing using information of the parent program 10 without displaying information on the parent screen 11. For example, the embedded program 20 is a program that edits and records information input to the parent program 10.

＜変形例２＞
実施の形態１では、親プログラム１０を実行するブラウザ３０を備えたユーザ端末１０３と、埋込プログラム２０を記憶する第２サーバ１０２とが別の装置であった。しかし、図９に示すように、親プログラム１０を実行するブラウザ３０を備えたユーザ端末１０３に埋込プログラム２０が記憶されていてもよい。
この場合には、埋込プログラム２０は、ユーザ端末１０３に接続されたデバイス１０４の情報を取得することが可能である。デバイス１０４は、具体例としては、ＩＣカードリーダと、カメラといったものである。例えば、埋込プログラム２０は、デバイス１０４の情報を取得し、その情報を親画面１１に設定することができる。これにより、親プログラム１０と、ローカルデバイスであるデバイス１０４とで情報を連携させた処理を行うようにすることも可能である。 <Modification 2>
In the first embodiment, the user terminal 103 equipped with the browser 30 that executes the parent program 10 and the second server 102 that stores the embedded program 20 are separate devices. However, as shown in Fig. 9, the embedded program 20 may be stored in the user terminal 103 equipped with the browser 30 that executes the parent program 10.
In this case, the embedded program 20 can obtain information on the device 104 connected to the user terminal 103. Specific examples of the device 104 include an IC card reader and a camera. For example, the embedded program 20 can obtain information on the device 104 and set the information on the parent screen 11. This makes it possible to perform processing in which the parent program 10 and the device 104, which is a local device, cooperate with each other in information.

＜変形例３＞
実施の形態１では、埋込プログラム２０は１つだけであった。しかし、親プログラム１０は、複数の埋込プログラム２０を呼び出してもよい。これにより、親プログラム１０に対して複数の機能を追加することが可能である。また、複数の埋込プログラム２０のうち、どの埋込プログラム２０と親プログラム１０を情報連携させるかを親画面１１で選択できるようにしてもよい。これにより、ユーザが追加する機能を選択することが可能になる。 <Modification 3>
In the first embodiment, there is only one embedded program 20. However, the parent program 10 may call multiple embedded programs 20. This makes it possible to add multiple functions to the parent program 10. Also, it may be possible to select, on the parent screen 11, which embedded program 20 among the multiple embedded programs 20 and the parent program 10 to have information linked with each other. This makes it possible for the user to select the function to be added.

以下、本開示の諸態様を付記としてまとめて記載する。
（付記１）
親画面をブラウザに表示するウェブアプリケーションプログラムである親プログラムから呼び出される、前記親プログラムとは異なるウェブアプリケーションプログラムである埋込プログラムであり、
前記ブラウザに対して発生した指定イベントを検知するイベント検知処理と、
前記イベント検知処理によって前記指定イベントが検知されると、前記親プログラムと前記埋込プログラムとの間で情報を連携させる情報連携処理と
をコンピュータに実行させる埋込プログラム。
（付記２）
前記情報連携処理では、前記親プログラムで管理される情報を取得して、取得した情報を用いて前記指定イベントに応じた処理を実行する
付記１に記載の埋込プログラム。
（付記３）
前記埋込プログラムは、さらに、
前記親画面の一部として埋込画面を描画する埋込描画処理
をコンピュータに実行させ、
前記情報連携処理では、取得された情報に基づき前記埋込画面を更新する処理を実行する
付記２に記載の埋込プログラム。
（付記４）
前記情報連携処理では、前記埋込プログラムで管理される情報を前記親画面に設定する
付記１から３までのいずれか１項に記載の埋込プログラム。
（付記５）
前記情報連携処理では、前記埋込プログラムが配置されたコンピュータに接続された機器から取得された情報を前記親画面に設定する
付記４に記載の埋込プログラム。
（付記６）
前記埋込プログラムは、前記親プログラムとは異なるコンピュータに配置された
付記１から５までのいずれか１項に記載の埋込プログラム。
（付記７）
ウェブアプリケーションプログラムである親プログラムと、前記親プログラムとは異なるウェブアプリケーションプログラムである埋込プログラムとを有する画面表示プログラムであり、
前記親プログラムは、
親画面をブラウザに表示する親描画処理と、
前記埋込プログラムを呼び出す呼出し処理と
をコンピュータに実行させ、
前記埋込プログラムは、
前記ブラウザに対して発生した指定イベントを検知するイベント検知処理と、
前記イベント検知処理によって前記指定イベントが検知されると、前記親プログラムと前記埋込プログラムとの間で情報を連携させる情報連携処理と
をコンピュータに実行させる画面表示プログラム。
（付記８）
ウェブアプリケーションプログラムである親プログラムが、親画面をブラウザに表示し、
前記親プログラムが、前記親プログラムとは異なるウェブアプリケーションプログラムである埋込プログラムを呼出し、
前記埋込プログラムが、前記ブラウザに対して発生した指定イベントを検知し、
前記埋込プログラムが、前記指定イベントが検知されると、前記親プログラムと前記埋込プログラムとの間で情報を連携させる画面表示方法。 Various aspects of the present disclosure are summarized below as appendices.
(Appendix 1)
an embedded program which is a web application program different from a parent program that displays a parent screen on a browser and is called from the parent program,
an event detection process for detecting a specified event occurring in the browser;
an embedded program that causes a computer to execute an information linking process for linking information between the parent program and the embedded program when the specified event is detected by the event detection process;
(Appendix 2)
2. The embedded program according to claim 1, wherein in the information linking process, information managed by the parent program is obtained, and a process corresponding to the specified event is executed using the obtained information.
(Appendix 3)
The embedding program further comprises:
causing a computer to execute an inlaid drawing process for drawing the inlaid screen as a part of the parent screen;
The embedding program according to claim 2, wherein in the information linking process, a process of updating the embedded screen based on the acquired information is executed.
(Appendix 4)
4. The embedding program according to claim 1, wherein in the information linking process, information managed by the embedding program is set on the parent screen.
(Appendix 5)
The embedding program according to claim 4, wherein in the information linking process, information obtained from a device connected to a computer on which the embedding program is installed is set on the parent screen.
(Appendix 6)
6. The embedding program of claim 1, wherein the embedding program is located on a different computer than the parent program.
(Appendix 7)
a screen display program having a parent program which is a web application program and an embedded program which is a web application program different from the parent program,
The parent program is
A parent drawing process that displays the parent screen in the browser;
and a calling process for calling the embedding program.
The embedding program comprises:
an event detection process for detecting a specified event occurring in the browser;
a display program for causing a computer to execute, when the designated event is detected by the event detection process, an information linking process for linking information between the parent program and the embedded program;
(Appendix 8)
The parent program, which is a web application program, displays the parent screen in the browser,
the parent program calls an embedded program that is a web application program different from the parent program;
The embedded program detects a specified event that has occurred in the browser;
The screen display method, wherein the embedded program links information between the parent program and the embedded program when the specified event is detected.

以上、本開示の実施の形態及び変形例について説明した。これらの実施の形態及び変形例のうち、いくつかを組み合わせて実施してもよい。また、いずれか１つ又はいくつかを部分的に実施してもよい。なお、本開示は、以上の実施の形態及び変形例に限定されるものではなく、必要に応じて種々の変更が可能である。 The above describes the embodiments and modifications of the present disclosure. Some of these embodiments and modifications may be combined and implemented. Also, one or some of them may be implemented partially. Note that the present disclosure is not limited to the above embodiments and modifications, and various modifications are possible as necessary.

１００画面表示システム、１０１第１サーバ、１０２第２サーバ、１０３ユーザ端末、１０４デバイス、１０親プログラム、１１親画面、２０埋込プログラム、２１埋込画面、３０ブラウザ、２０１プロセッサ、２０２メモリ、２０３ストレージ、２０４通信インタフェース。 100 Screen display system, 101 First server, 102 Second server, 103 User terminal, 104 Device, 10 Parent program, 11 Parent screen, 20 Embedded program, 21 Embedded screen, 30 Browser, 201 Processor, 202 Memory, 203 Storage, 204 Communication interface.

Claims

親画面をブラウザに表示するウェブアプリケーションプログラムである第１サーバに配置された親プログラムから呼び出される、前記親プログラムとは異なるウェブアプリケーションプログラムである埋込プログラムであって、前記第１サーバとは異なる第２サーバに配置された埋込プログラムであり、
前記ブラウザに対して発生した指定イベントを検知するイベント検知処理と、
前記イベント検知処理によって前記指定イベントが検知されると、前記指定イベントに対応するイベントメソッドの実行を前記第２サーバに指示し、前記イベントメソッドが実行されて得られた実行結果に応じて、前記親プログラムと前記埋込プログラムとの間で情報を連携させる情報連携処理と
をコンピュータに実行させる埋込プログラム。 an embedded program that is a web application program different from a parent program disposed in a first server and that displays a parent screen on a browser, the embedded program being called from the parent program, the embedded program being a web application program different from the parent program , the embedded program being disposed in a second server different from the first server ;
an event detection process for detecting a specified event occurring in the browser;
When the specified event is detected by the event detection process, the embedded program instructs the second server to execute an event method corresponding to the specified event, and, depending on the execution result obtained by executing the event method, causes a computer to execute information linkage processing that links information between the parent program and the embedded program.

前記情報連携処理では、前記親プログラムで管理される情報を取得して、取得した情報を用いて前記指定イベントに応じた処理を実行する
請求項１に記載の埋込プログラム。 2 . The embedded program according to claim 1 , wherein the information linking process acquires information managed by the parent program, and executes a process corresponding to the specified event using the acquired information.

前記埋込プログラムは、さらに、
前記親画面の一部として埋込画面を描画する埋込描画処理
をコンピュータに実行させ、
前記情報連携処理では、取得された情報に基づき前記埋込画面を更新する処理を実行する
請求項２に記載の埋込プログラム。 The embedding program further comprises:
causing a computer to execute an inlaid drawing process for drawing the inlaid screen as a part of the parent screen;
The embedding program according to claim 2 , wherein the information linking process executes a process of updating the embedded screen based on the acquired information.

前記情報連携処理では、前記埋込プログラムで管理される情報を前記親画面に設定する請求項１に記載の埋込プログラム。 The embedding program according to claim 1, wherein in the information linking process, information managed by the embedding program is set on the parent screen.

前記情報連携処理では、前記埋込プログラムが配置されたコンピュータに接続された機器から取得された情報を前記親画面に設定する
請求項４に記載の埋込プログラム。 5. The embedding program according to claim 4, wherein in the information linking process, information acquired from a device connected to a computer on which the embedding program is installed is set in the parent screen.

ウェブアプリケーションプログラムである親プログラムであって、第１サーバに配置された親プログラムと、前記親プログラムとは異なるウェブアプリケーションプログラムである埋込プログラムであって、前記第１サーバとは異なる第２サーバに配置された埋込プログラムとを有する画面表示プログラムであり、
前記親プログラムは、
親画面をブラウザに表示する親描画処理と、
前記埋込プログラムを呼び出す呼出し処理と
をコンピュータに実行させ、
前記埋込プログラムは、
前記ブラウザに対して発生した指定イベントを検知するイベント検知処理と、
前記イベント検知処理によって前記指定イベントが検知されると、前記指定イベントに対応するイベントメソッドの実行を前記第２サーバに指示し、前記イベントメソッドが実行されて得られた実行結果に応じて、前記親プログラムと前記埋込プログラムとの間で情報を連携させる情報連携処理と
をコンピュータに実行させる画面表示プログラム。 a screen display program having a parent program which is a web application program and is arranged on a first server ; and an embedded program which is a web application program different from the parent program and is arranged on a second server different from the first server ;
The parent program is
A parent drawing process that displays the parent screen in the browser;
and a calling process for calling the embedding program.
The embedding program comprises:
an event detection process for detecting a specified event occurring in the browser;
a screen display program that, when the specified event is detected by the event detection process, instructs the second server to execute an event method corresponding to the specified event, and causes a computer to execute information linkage processing that links information between the parent program and the embedded program depending on the execution result obtained by executing the event method .

前記呼出し処理では、複数の埋込プログラムを呼び出し、The calling process calls a plurality of embedded programs;
前記親プログラムは、さらに、The parent program further comprises:
前記情報連携処理において前記複数の埋込プログラムのうちいずれの埋込プログラムとの間で情報を連携させるかの選択を受け付ける選択処理A selection process for accepting a selection of which embedding program among the plurality of embedding programs information is to be linked with in the information linking process.
をコンピュータに実行させる請求項６に記載の画面表示プログラム。7. The screen display program according to claim 6, which causes a computer to execute the steps of:

ウェブアプリケーションプログラムである親プログラムであって、第１サーバに配置された親プログラムが、親画面をブラウザに表示し、
前記親プログラムが、前記親プログラムとは異なるウェブアプリケーションプログラムである埋込プログラムであって、前記第１サーバとは異なる第２サーバに配置された埋込プログラムを呼出し、
前記埋込プログラムが、前記ブラウザに対して発生した指定イベントを検知し、
前記埋込プログラムが、前記指定イベントが検知されると、前記指定イベントに対応するイベントメソッドの実行を前記第２サーバに指示し、前記イベントメソッドが実行されて得られた実行結果に応じて、前記親プログラムと前記埋込プログラムとの間で情報を連携させる画面表示方法。 a parent program which is a web application program and is located on a first server, the parent program displaying a parent screen on a browser;
The parent program calls an embedded program that is a web application program different from the parent program and that is located on a second server different from the first server ;
The embedded program detects a specified event that has occurred in the browser;
A screen display method in which, when the specified event is detected, the embedded program instructs the second server to execute an event method corresponding to the specified event, and links information between the parent program and the embedded program depending on the execution result obtained by executing the event method .

前記親プログラムは、複数の埋込プログラムを呼び出し、the parent program calls a plurality of embedded programs;
前記親プログラムは、前記複数の埋込プログラムのうちいずれの埋込プログラムとの間で情報を連携させるかの選択を受け付け、the parent program accepts a selection of one of the plurality of embedding programs with which information is to be linked;
前記複数の埋込プログラムのうち選択された埋込プログラムが、前記指定イベントを検知し、a selected embedding program from among the plurality of embedding programs detects the specified event;
前記複数の埋込プログラムのうち選択された埋込プログラムが、前記指定イベントが検知されると、前記指定イベントに対応するイベントメソッドの実行を前記第２サーバに指示し、前記イベントメソッドが実行されて得られた実行結果に応じて、前記親プログラムと前記埋込プログラムとの間で情報を連携させるWhen the designated event is detected, an embedded program selected from the plurality of embedded programs instructs the second server to execute an event method corresponding to the designated event, and links information between the parent program and the embedded program according to an execution result obtained by executing the event method.
請求項８に記載の画面表示方法。The screen display method according to claim 8.