JP6358049B2 - Local storage synchronization method, local storage synchronization apparatus, and local storage synchronization program - Google Patents
Local storage synchronization method, local storage synchronization apparatus, and local storage synchronization program Download PDFInfo
- Publication number
- JP6358049B2 JP6358049B2 JP2014227840A JP2014227840A JP6358049B2 JP 6358049 B2 JP6358049 B2 JP 6358049B2 JP 2014227840 A JP2014227840 A JP 2014227840A JP 2014227840 A JP2014227840 A JP 2014227840A JP 6358049 B2 JP6358049 B2 JP 6358049B2
- Authority
- JP
- Japan
- Prior art keywords
- browser
- local storage
- data
- request
- script
- 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
Links
Images
Landscapes
- Information Transfer Between Computers (AREA)
- Information Retrieval, Db Structures And Fs Structures Therefor (AREA)
Description
本発明はローカルストレージ同期方法、ローカルストレージ同期装置およびローカルストレージ同期プログラムに関する。 The present invention relates to a local storage synchronization method, a local storage synchronization apparatus, and a local storage synchronization program.
ユーザがWWW(World Wide Web)を利用する場合、ユーザが使用するクライアント装置上でブラウザと呼ばれるアプリケーションソフトウェアが実行される。ブラウザは、Webサーバと呼ばれるサーバソフトウェアが動作するサーバ装置と通信し、通信結果に基づいて主に視覚的なユーザインタフェースを提供する。 When a user uses WWW (World Wide Web), application software called a browser is executed on a client device used by the user. The browser communicates with a server device on which server software called a Web server operates, and mainly provides a visual user interface based on the communication result.
ブラウザは、HTTP(Hypertext Transfer Protocol)リクエストをWebサーバに送信し、HTTPリクエストで要求されたファイルを含むHTTPレスポンスを受信する。受信するファイルは、表示するWebページの内容を示し、例えば、HTML(HyperText Markup Language)などのマークアップ言語を用いて記述される。受信するファイルに、ブラウザ上で実行されるプログラムであるスクリプトが付加されていることもある。ブラウザは、受信したファイルに基づいて、表示領域にWebページを描画(レンダリング)する。ファイルにスクリプトが付加されている場合、ブラウザは、スクリプトを実行し、実行結果に応じてWebページの表示を制御する。 The browser transmits an HTTP (Hypertext Transfer Protocol) request to the Web server, and receives an HTTP response including a file requested by the HTTP request. The received file indicates the content of the Web page to be displayed, and is described using a markup language such as HTML (HyperText Markup Language). A script, which is a program executed on the browser, may be added to the received file. The browser draws (renders) a Web page in the display area based on the received file. When a script is added to the file, the browser executes the script and controls the display of the Web page according to the execution result.
スクリプトを活用することで、操作性の高いWebページをユーザに提供することが可能となる。一方で、スクリプトは第三者が作成したプログラムであり、セキュリティに対する脅威となる可能性があるため、受信したスクリプトをブラウザ上で無制限に実行することは好ましくない。そこで、ブラウザは、スクリプトによって実行できる処理を制限している。例えば、ネットワークアクセスに関して、ブラウザは、スクリプトから指定できるアクセス先を、スクリプトと同一のWebサイトなどに限定する。また、クライアント装置上のローカルの記憶領域に関して、ブラウザは、スクリプトから使用できる記憶領域をブラウザが管理する制限された記憶領域に限定する。 By utilizing the script, it becomes possible to provide a user with a Web page with high operability. On the other hand, a script is a program created by a third party and may pose a threat to security. Therefore, it is not preferable to execute the received script on the browser without limit. Therefore, browsers limit the processes that can be executed by scripts. For example, with respect to network access, the browser limits the access destination that can be specified from a script to the same Web site as the script. In addition, regarding the local storage area on the client device, the browser limits the storage area that can be used from the script to the limited storage area managed by the browser.
スクリプトから使用できるローカルの記憶領域に関して、従来は、「クッキー」と呼ばれる小容量のデータ格納先が使用されてきた。一方で、近年は、より操作性の高いWebページを実現するため、ブラウザ上でサイズの大きいデータを扱いたいというニーズが存在する。そこで、マークアップ言語の規格であるHTML5では、「ローカルストレージ」と呼ばれる大容量(例えば、10MB以上)の記憶領域が定義された。ローカルストレージに格納されたデータは、ブラウザを終了しても保持される。 Conventionally, regarding a local storage area that can be used from a script, a small-capacity data storage destination called “cookie” has been used. On the other hand, in recent years, there is a need to handle large-size data on a browser in order to realize a Web page with higher operability. Accordingly, HTML5, which is a markup language standard, defines a large-capacity (for example, 10 MB or more) storage area called “local storage”. Data stored in the local storage is retained even after the browser is closed.
スクリプトは、ローカルストレージに様々なデータを格納させることができる。例えば、ブラウザがオフライン状態の間は、ユーザが入力したデータをローカルストレージに保存しておき、次にオンライン状態になったときに、ローカルストレージのデータをWebサーバにまとめて送信するWebページが考えられる。このように、ローカルストレージを活用することで、クライアント装置をネットワークに接続し続けなくても、ユーザがブラウザ上で断続的に様々な操作を行うことが可能となる。 The script can store various data in the local storage. For example, consider a web page that stores data entered by the user in the local storage while the browser is offline, and then sends the local storage data to the web server when the browser is next online. It is done. Thus, by utilizing the local storage, the user can perform various operations intermittently on the browser without continuously connecting the client device to the network.
なお、PC(Personal Computer)や携帯電話機などの複数のクライアント装置の間でデータを同期するシステムが提案されている。このシステムに含まれるクライアント装置は、アドレス情報・スケジュール情報・Webサイトのリンク情報・文書ファイルなどのデータの変更ログを、ネットワーク上のサーバ装置にアップロードする。他のクライアント装置は、サーバ装置から変更ログをダウンロードしてデータを同期する。 A system for synchronizing data among a plurality of client devices such as a PC (Personal Computer) and a mobile phone has been proposed. A client device included in this system uploads a change log of data such as address information, schedule information, Web site link information, and a document file to a server device on the network. Other client devices download the change log from the server device and synchronize the data.
また、サーバ装置からWebデータを受信するクライアント装置上で実行されるWebデータプラットフォームが提案されている。このWebデータプラットフォームは、受信したWebデータをクライアント装置に保存し、クライアント装置上で実行されるアプリケーションソフトウェアから、保存したWebデータにアクセスできるようにする。 In addition, a Web data platform that is executed on a client device that receives Web data from a server device has been proposed. The Web data platform stores received Web data in a client device, and makes it possible to access the stored Web data from application software executed on the client device.
また、ブラウザ上の処理を、ネットワークに接続されていないオフライン状態で実行可能なシステムが提案されている。このシステムに含まれるクライアント装置は、HTMLデータやスクリプトを含むWebコンテンツをサーバ装置から受信し、受信したWebコンテンツをクライアント装置に保存する。クライアント装置は、オフライン状態であるとき、保存したWebコンテンツを用いてWebページを表示させる。 In addition, a system capable of executing processing on a browser in an offline state not connected to a network has been proposed. A client device included in this system receives Web content including HTML data and a script from the server device, and stores the received Web content in the client device. When the client device is in an offline state, the client device displays a Web page using the stored Web content.
ユーザは、複数のブラウザを使用することが可能である。例えば、1つのクライアント装置に、複数のブラウザをインストールできる。よって、異なるブラウザから同じWebサイトにアクセスすることが生じ得る。例えば、ユーザは、ある日にブラウザAを起動してあるWebサイトを閲覧し、その次の日にブラウザBを起動して同じWebサイトを閲覧することがあり得る。しかし、ローカルストレージは、ブラウザ毎に閉じた記憶領域である。このため、複数のブラウザの間で、ローカルストレージに異なるデータが格納される可能性がある。これによって、データの一貫性に関する種々の問題が生じ得る。 The user can use a plurality of browsers. For example, a plurality of browsers can be installed on one client device. Thus, accessing the same Web site from different browsers can occur. For example, a user may browse a website on which browser A is activated on a certain day, and activate browser B on the next day to browse the same website. However, the local storage is a storage area closed for each browser. For this reason, different data may be stored in the local storage among a plurality of browsers. This can cause various problems with data consistency.
例えば、ユーザが、ある日にブラウザAを起動してオフライン状態でデータを入力し、その次の日にブラウザBを起動してオンライン状態で新たなデータを入力したとする。その後、オンライン状態でブラウザAを起動してWebサイトにアクセスすると、以前に入力した古いデータが、ブラウザAのローカルストレージからWebサーバにアップロードされてしまう。これにより、ブラウザBを使用して入力した最新のデータが失われてしまう可能性がある。また、意図しない古いデータが公開されてしまう可能性もある。 For example, it is assumed that the user activates browser A on one day and inputs data in an offline state, and activates browser B on the next day and inputs new data in an online state. Thereafter, when the browser A is activated in the online state and the Web site is accessed, the old data input before is uploaded from the local storage of the browser A to the Web server. As a result, the latest data input using the browser B may be lost. In addition, unintended old data may be disclosed.
この問題に対し、複数のブラウザの間でローカルストレージを同期することが考えられる。しかしながら、セキュリティの観点から、ブラウザのローカルストレージへのアクセスには制限があり、どの様にローカルストレージの同期を実現するかが問題となる。 To solve this problem, it is conceivable to synchronize local storage among a plurality of browsers. However, from the viewpoint of security, access to the local storage of the browser is limited, and how to synchronize the local storage becomes a problem.
1つの側面では、本発明は、複数のブラウザの間でローカルストレージを同期するローカルストレージ同期方法、ローカルストレージ同期装置およびローカルストレージ同期プログラムを提供することを目的とする。 In one aspect, an object of the present invention is to provide a local storage synchronization method, a local storage synchronization apparatus, and a local storage synchronization program for synchronizing local storage among a plurality of browsers.
1つの態様では、コンピュータが実行するローカルストレージ同期方法が提供される。ローカルストレージを使用する第1のブラウザからサーバ宛てのリクエストを受信する。サーバから取得したリクエストに対応するデータに、他のリクエストを送信する処理を示すスクリプトを挿入して第1のブラウザに送信する。第1のブラウザから他のリクエストを受信する。他のリクエストに応じて、ローカルストレージの更新を検知して更新情報を送信する処理を示す他のスクリプトを含む他のデータを、第1のブラウザに送信する。第1のブラウザから更新情報を受信する。他のローカルストレージを使用する第2のブラウザが実行中の場合に、更新情報を第2のブラウザに送信する。 In one aspect, a computer-implemented local storage synchronization method is provided. A request addressed to the server is received from the first browser using the local storage. A script indicating a process for transmitting another request is inserted into the data corresponding to the request acquired from the server and transmitted to the first browser. Other requests are received from the first browser. In response to another request, other data including another script indicating processing for detecting update of the local storage and transmitting update information is transmitted to the first browser. Update information is received from the first browser. When the second browser using another local storage is running, the update information is transmitted to the second browser.
また、1つの態様では、通信部と制御部とを有するローカルストレージ同期装置が提供される。また、1つの態様では、コンピュータに実行させるローカルストレージ同期プログラムが提供される。 In one aspect, a local storage synchronization apparatus having a communication unit and a control unit is provided. In one aspect, a local storage synchronization program to be executed by a computer is provided.
1つの側面では、複数のブラウザの間でローカルストレージを同期できる。 In one aspect, local storage can be synchronized between multiple browsers.
以下、本実施の形態を図面を参照して説明する。
[第1の実施の形態]
図1は、第1の実施の形態のローカルストレージ同期装置を示す図である。
Hereinafter, the present embodiment will be described with reference to the drawings.
[First Embodiment]
FIG. 1 is a diagram illustrating the local storage synchronization apparatus according to the first embodiment.
第1の実施の形態のローカルストレージ同期装置10は、サーバ2とブラウザ13,14との間で通信を中継する。サーバ2は、例えば、サーバアプリケーションとしてのWebサーバを実行するサーバ装置である。ブラウザ13,14は、例えば、ローカルストレージ同期装置10を介してサーバ2とHTTP通信を行うクライアントアプリケーションとしてのWebブラウザである。ブラウザ13,14は、ローカルストレージ同期装置10上で実行されていてもよいし、他の装置上で実行されていてもよい。
The local
後述するローカルストレージ同期装置10の処理は、例えば、ブラウザ13,14に対するプロキシサーバとして実装される。その場合、ブラウザ13,14には、サーバ2へのアクセスがこのプロキシサーバを経由するよう設定される。
The processing of the local
ブラウザ13は、ブラウザ13を実行する装置(例えば、ローカルストレージ同期装置10)が備える記憶領域であるローカルストレージ13aを使用する。ブラウザ13上で実行されるスクリプトによって、ローカルストレージ13aにデータを格納できる。ローカルストレージ13aに格納されたデータは、ブラウザ13を終了しても保持される。また、ブラウザ14は、ブラウザ14を実行する装置(例えば、ローカルストレージ同期装置10)が備える記憶領域であるローカルストレージ14aを使用する。ブラウザ14上で実行されるスクリプトによって、ローカルストレージ14aにデータを格納できる。ローカルストレージ14aに格納されたデータは、ブラウザ14を終了しても保持される。ローカルストレージ13a,14aは、例えば、HDD(Hard Disk Drive)やフラッシュメモリなどの不揮発性の記憶装置上に形成される。
The
ローカルストレージ同期装置10は、通信部11および制御部12を有する。通信部11は、サーバ2と通信を行う通信インタフェースである。通信部11は、有線インタフェースでもよいし、無線インタフェースでもよい。制御部12は、ブラウザ13,14からサーバ2へのアクセスを制御する。制御部12は、CPU(Central Processing Unit)やDSP(Digital Signal Processor)などのプロセッサでもよい。また、制御部12は、ASIC(Application Specific Integrated Circuit)やFPGA(Field Programmable Gate Array)などの特定用途の電子回路を含んでもよい。なお、プロセッサは、RAM(Random Access Memory)などのメモリに記憶されたプログラムを実行する。複数のプロセッサの集合(マルチプロセッサ)を「プロセッサ」と呼ぶこともある。
The local
ここで、制御部12は、ブラウザ13がサーバ2宛てのリクエスト15を送信すると、ブラウザ13からリクエスト15を受信する。リクエスト15は、例えば、URL(Uniform Resource Locator)などのアドレスを含むHTTPリクエストである。制御部12は、リクエスト15を受信すると、サーバ2にリクエスト15を転送し、リクエスト15に対応するデータ16(例えば、リクエスト15に含まれるURLで指定されたデータ)をサーバ2から受信する。データ16は、例えば、Webページの内容をHTMLを用いて記述したHTMLファイルである。ただし、データ16をローカルストレージ同期装置10にキャッシュしている場合、キャッシュされたデータ16を使用すればよい。
Here, when the
制御部12は、データ16にスクリプト16aを挿入してブラウザ13に送信する。スクリプト16aは、リクエスト17を送信する処理を示す。リクエスト17は、例えば、HTTPリクエストである。リクエスト17にURLが含まれる場合、URLのプロトコルスキーム・ホスト名・ポート番号をリクエスト15と同じにする。これにより、後述するデータ18とデータ16とが同じWebサイトに関するデータと認識される。また、好ましくは、リクエスト17に所定の文字列が含まれるようにする。
The
データ16を受信したブラウザ13は、データ16に基づいて一のウィンドウにWebページを表示する。また、ブラウザ13は、データ16に含まれるスクリプト16aを実行する。これにより、ブラウザ13は、リクエスト17を送信する。
The
制御部12は、ブラウザ13からリクエスト17を受信する。すると、制御部12は、リクエスト17に対する応答として、データ18をブラウザ13に送信する。データ18は、例えば、データ16と異なるWebページを示すHTMLファイルである。データ18を送信するか否かは、例えば、受信したリクエストに所定の文字列が含まれているか否かによって判断できる。データ18は、スクリプト18aを含む。スクリプト18aは、ローカルストレージ13aの更新を検知し、検知した更新の内容を含む更新情報19を送信する処理を示す。データ16とデータ18とは、同じWebサイトのデータと認識されるようにする。これにより、スクリプト18aは、データ16に基づいて表示されたWebページ上で行われたローカルストレージ13aの更新を検知することができる。
The
データ18を受信したブラウザ13は、データ18に基づいてWebページを表示する。例えば、ブラウザ13は、データ18に基づくWebページを、データ16に基づくWebページと異なるウィンドウに表示する。ここで言う「異なるウィンドウ」には、タブ型ブラウザにおける異なるタブが含まれてもよい。データ16に基づくWebページにおいてローカルストレージ13aが更新される(例えば、新たなデータが格納される)と、ブラウザ13は、スクリプト18aに従って更新を検知し更新情報19を送信する。
The
制御部12は、ブラウザ13から更新情報19を受信する。制御部12は、ブラウザ14が実行中の場合に、更新情報19をブラウザ14に送信する。ブラウザ14は、更新情報19を受信すると、更新情報19に基づいてローカルストレージ14aを更新する。これにより、ローカルストレージ13a,14aが同期される。これを実現するため、制御部12は、更新情報19の受信に応じてローカルストレージ14aを更新する処理を示すスクリプトを含むデータを、予めブラウザ14に送信しておいてもよい。
The
制御部12は、更新情報19を受信したときにブラウザ14が実行中でない場合、ローカルストレージ13a,14aと異なる記憶領域を用いたデータベースに更新情報19を格納してもよい。この場合、制御部12は、ブラウザ14が起動した後に、データベースに格納された更新情報19をブラウザ14に送信すればよい。
When the
第1の実施の形態のローカルストレージ同期装置10によれば、リクエスト15に対応するデータ16に、リクエスト17を送信するスクリプト16aが挿入されてブラウザ13に送信される。そして、リクエスト17に応じて、ローカルストレージ13aの更新を検知して更新情報19を送信するスクリプト18aを含むデータ18がブラウザ13に送信される。これにより、ローカルストレージ同期装置10を介して、ローカルストレージ13aとローカルストレージ14aを同期することが可能となる。
According to the local
このとき、データ16とデータ18が同じWebサイトに関するデータと認識されるように、スクリプト16aによってリクエスト17が生成される。また、データ18は、データ16とは異なるWebページとして、データ16と同時に表示される。これにより、ブラウザ13は、セキュリティ上の制限に反することなくリクエスト17を送信できる。また、スクリプト18aは、データ16に基づいて行われたローカルストレージ13aの更新を検出できる。よって、ブラウザ13,14を改変しなくても、ブラウザ13,14の既存の仕様や制限のもとでローカルストレージ13a,14aを同期できる。
At this time, the
[第2の実施の形態]
図2は、第2の実施の形態の情報処理システムを示す図である。
第2の実施の形態の情報処理システムは、視覚的なユーザインタフェースであるWebページをユーザに提供するクライアントサーバ型のWebシステムである。この情報処理システムは、サーバ装置21および端末装置100,100a,100bを有する。サーバ装置21と端末装置100,100a,100bとは、ネットワーク20に接続されている。ネットワーク20は、例えば、インターネットなどの広域ネットワークである。
[Second Embodiment]
FIG. 2 illustrates an information processing system according to the second embodiment.
The information processing system according to the second embodiment is a client server type Web system that provides a user with a Web page that is a visual user interface. This information processing system includes a
サーバ装置21は、サーバアプリケーションとしてのWebサーバを実行するサーバコンピュータである。サーバ装置21は、端末装置100,100a,100bからHTTPリクエストを受信すると、HTTPリクエストに含まれるURLに応じたHTMLファイルを生成し、HTMLファイルを含むHTTPレスポンスを返信する。
The
HTMLファイルは、W3C(World Wide Web Consortium)が策定したHTML5の規格に従って記述されている。HTMLファイルには、端末装置100,100a,100bで実行されるスクリプトが含まれていることがある。また、HTMLファイルには、スクリプトを記述したスクリプトファイルへのリンクが含まれていることがある。
The HTML file is described in accordance with the HTML5 standard established by W3C (World Wide Web Consortium). The HTML file may include a script executed by the
端末装置100,100a,100bは、クライアントアプリケーションとしてのブラウザを実行するクライアントコンピュータである。端末装置100,100a,100bは、ブラウザ上のユーザ操作に応じてHTTPリクエストをサーバ装置21に送信し、HTMLファイルを含むHTTPレスポンスを受信する。端末装置100,100a,100bは、受信したHTMLファイルに基づいてWebページを表示する。
The
HTMLファイルまたはHTMLファイルからリンクされたスクリプトファイルにスクリプトが含まれている場合、端末装置100,100a,100bは、取得したスクリプトを実行してWebページの表示を制御する。端末装置100,100a,100bには、複数のブラウザをインストールすることができる。なお、端末装置100は、第1の実施の形態のローカルストレージ同期装置10の一例である。
When a script is included in the HTML file or the script file linked from the HTML file, the
次に、端末装置100,100a,100bの構成について説明する。
図3は、端末装置のハードウェア例を示すブロック図である。
端末装置100は、CPU101、RAM102、HDD103、画像信号処理部104、入力信号処理部105、媒体リーダ106および通信インタフェース107を有する。上記のユニットは、それぞれバス108に接続されている。
Next, the configuration of the
FIG. 3 is a block diagram illustrating a hardware example of the terminal device.
The
CPU101は、プログラムの命令を実行する演算回路を含むプロセッサである。CPU101は、HDD103に記憶されたプログラムやデータの少なくとも一部をRAM102にロードし、プログラムを実行する。なお、CPU101は複数のプロセッサコアを備えてもよく、端末装置100は複数のプロセッサを備えてもよく、以下で説明する処理を複数のプロセッサまたはプロセッサコアを用いて並列に実行してもよい。また、複数のプロセッサの集合(マルチプロセッサ)を「プロセッサ」と呼んでもよい。
The
RAM102は、CPU101が実行するプログラムやCPU101が演算に用いるデータを一時的に記憶する揮発性の半導体メモリである。なお、端末装置100は、RAM以外の種類のメモリを備えてもよく、複数個のメモリを備えてもよい。
The
HDD103は、OS(Operating System)やミドルウェアやアプリケーションソフトウェアなどのソフトウェアのプログラム、および、データを記憶する不揮発性の記憶装置である。プログラムには、ローカルストレージ同期プログラムが含まれる。なお、端末装置100は、フラッシュメモリやSSD(Solid State Drive)などの他の種類の記憶装置を備えてもよく、複数の不揮発性の記憶装置を備えてもよい。
The
画像信号処理部104は、CPU101からの命令に従って、端末装置100に接続されたディスプレイ111に画像を出力する。ディスプレイ111としては、CRT(Cathode Ray Tube)ディスプレイ、液晶ディスプレイ(LCD:Liquid Crystal Display)、プラズマディスプレイ(PDP:Plasma Display Panel)、有機EL(OEL:Organic Electro-Luminescence)ディスプレイなどを用いることができる。
The image
入力信号処理部105は、端末装置100に接続された入力デバイス112から入力信号を取得し、CPU101に出力する。入力デバイス112としては、マウスやタッチパネルやタッチパッドやトラックボールなどのポインティングデバイス、キーボード、リモートコントローラ、ボタンスイッチなどを用いることができる。また、端末装置100に、複数の種類の入力デバイスが接続されていてもよい。
The input
媒体リーダ106は、記録媒体113に記録されたプログラムやデータを読み取る読み取り装置である。記録媒体113として、例えば、フレキシブルディスク(FD:Flexible Disk)やHDDなどの磁気ディスク、CD(Compact Disc)やDVD(Digital Versatile Disc)などの光ディスク、光磁気ディスク(MO:Magneto-Optical disk)、半導体メモリなどを使用できる。媒体リーダ106は、例えば、記録媒体113から読み取ったプログラムやデータをRAM102またはHDD103に格納する。
The
通信インタフェース107は、ネットワーク20に接続され、サーバ装置21と通信を行う。通信インタフェース107は、スイッチなどの通信装置とケーブルで接続される有線通信インタフェースでもよいし、基地局またはアクセスポイントと無線リンクで接続される無線通信インタフェースでもよい。
The
ただし、端末装置100は、媒体リーダ106を備えていなくてもよい。また、ディスプレイ111や入力デバイス112が、端末装置100の筐体と一体に形成されていてもよい。端末装置100a,100bおよびサーバ装置21も、端末装置100と同様のハードウェアを用いて実現することができる。なお、CPU101は、第1の実施の形態の制御部12の一例である。通信インタフェース107は、通信部11の一例である。
However, the
図4は、端末装置の機能例を示すブロック図である。
端末装置100は、ブラウザ120,130、ローカルストレージ124,134、プロキシサーバ140および同期データ記憶部144を有する。ローカルストレージ124,134および同期データ記憶部144は、HDD103に確保した記憶領域として実現できる。ブラウザ120,130およびプロキシサーバ140は、CPU101が実行するプログラムのモジュールとして実現できる。端末装置100a,100bも、端末装置100と同様のモジュール構成によって実現できる。
FIG. 4 is a block diagram illustrating an example of functions of the terminal device.
The
ブラウザ120,130は、互いに異なる種類のWebブラウザである。ブラウザ120,130の少なくとも一方は、ユーザによって端末装置100にインストールされたものであってもよい。ここで言う「異なる種類のWebブラウザ」には、ブランド名の異なるWebブラウザや、同じブランド名の異なるバージョンのWebブラウザが含まれる。
ブラウザ120は、UI(User Interface)制御部121、スクリプト実行部122および通信部123を有する。ブラウザ130は、UI制御部131、スクリプト実行部132および通信部133を有する。UI制御部131、スクリプト実行部132および通信部133の機能は、ブラウザ120の同名のモジュールの機能と同様であるため、説明を省略する。
The
UI制御部121は、視覚的ユーザインタフェースとしてのWebページを制御する。UI制御部121は、HTMLファイルを取得すると、HTMLファイルの記載に基づいてWebページを描画(レンダリング)する。UI制御部121は、複数のウィンドウ(複数のタブであってもよい)を用いて、複数のWebページを同時にディスプレイ111に表示することが可能である。また、UI制御部121は、ユーザ操作を検出する。ユーザ操作には、URLの入力、Webページ内のハイパーリンクのクリック、Webページ内の入力欄(フィールド)へのデータ入力などが含まれる。
The
スクリプト実行部122は、取得したHTMLファイルまたはHTMLファイルからリンクされたスクリプトファイルにスクリプトが含まれている場合、当該スクリプトを実行する。スクリプトは、例えば、高級言語で記載されたソースコードである。
If the script is included in the acquired HTML file or a script file linked from the HTML file, the
スクリプトによって実行可能な処理には、HTTPリクエストの送信が含まれる。送信したHTTPリクエストに対応して得られるWebページを、新たなウィンドウ(新たなタブであってもよい)を起動して表示することも可能である。ただし、セキュリティの観点から、スクリプトによって指定可能なアクセス先は、当該スクリプトとオリジンが同一のものに制限される。「オリジン」は、プロトコルスキームとホスト名とポート番号の組である。URLがhttp://www.a**.com/index.htmlの場合、プロトコルスキームはhttpであり、ホスト名はwww.a**.comであり、ポート番号は80である(ポート番号が80であるときはその記載を省略できる)。 Processing that can be executed by the script includes transmission of an HTTP request. It is also possible to display a Web page obtained in response to the transmitted HTTP request by starting a new window (which may be a new tab). However, from the viewpoint of security, the access destinations that can be specified by a script are limited to those having the same origin as the script. “Origin” is a set of protocol scheme, host name, and port number. The URL is http: // www. a **. com / index. For html, the protocol scheme is http and the host name is www. a **. and the port number is 80 (when the port number is 80, the description can be omitted).
また、スクリプトによって実行可能な処理には、Webソケットを用いた通信が含まれる。Webソケットを使用する場合、まず通信相手とコネクションを確立する。コネクションが確立されると、ブラウザ120と通信相手との間で双方向にメッセージを送信することができる。Webソケットを利用することで、HTTP通信とは異なり、サーバ側からブラウザ120に対する「プッシュ型通信」を実現することができる。
Further, processing that can be executed by a script includes communication using a Web socket. When using a Web socket, a connection is first established with a communication partner. When the connection is established, a message can be transmitted bidirectionally between the
また、スクリプトによって実行可能な処理には、後述するように、ブラウザ120に対応するローカルストレージ124へのアクセスが含まれる。スクリプトによって、ローカルストレージ124にデータを書き込み、ローカルストレージ124からデータを読み出すことができる。ただし、セキュリティの観点から、スクリプトによって読み出すことができるデータは、当該スクリプト自身または当該スクリプトとオリジンが同一の他のスクリプトによって書き込まれたデータに制限される。
Further, the process executable by the script includes access to the
通信部123は、UI制御部121で検出されたユーザ操作またはスクリプトによる指示に応じて、HTTPリクエストを送信する。また、通信部123は、送信したHTTPリクエストに対して、HTTPレスポンスを受信する。第2の実施の形態では、通信部123は、HTTPリクエストをプロキシサーバ140に送信するように設定されている。HTTPレスポンスは、プロキシサーバ140から受信することになる。また、通信部123は、スクリプトによる指示に応じて、Webソケットのメッセージを送受信する。
The
ローカルストレージ124は、ブラウザ120に対応して設けられた不揮発性の記憶領域である。ローカルストレージ124は、オリジン毎に区分して、キーバリュー形式のデータを記憶する。1つのオリジンに対して、例えば、10MB程度のデータを記憶することができる。スクリプト実行部122は、キーとバリュー(値)を対応付けてローカルストレージ124に書き込むことができる。また、スクリプト実行部122は、キーを指定してローカルストレージ124からバリューを読み出すことができる。ローカルストレージ124に記憶された一のオリジンに関するデータは、スクリプト実行部122において当該オリジンに属するスクリプトが実行されたときのみ参照できる。
The
ローカルストレージ134は、ブラウザ130に対応して設けられた不揮発性の記憶領域である。ローカルストレージ134は、ローカルストレージ124と同様に、オリジン毎に区分してキーバリュー形式のデータを記憶する。ローカルストレージ134に記憶された一のオリジンに関するデータは、スクリプト実行部132において当該オリジンに属するスクリプトが実行されたときのみ参照できる。
The
プロキシサーバ140は、ブラウザ120,130とサーバ装置21との間でHTTP通信を中継する。プロキシサーバ140は、アクセス転送部141、制御ページ生成部142およびデータ同期部143を有する。
The
アクセス転送部141は、ブラウザ120,130からHTTPリクエストを受信すると、HTTPリクエストの所定の位置に所定の文字列が含まれているか、すなわち、制御用のHTTPリクエストであるか判断する。所定の位置としては、例えば、URLに含まれるパス名、URLの末尾に付加されたハッシュ(「#」以下の文字)やクエリ(「?」以下の文字)、HTTPリクエストがPOSTである場合のボディなどが挙げられる。
When receiving an HTTP request from the
制御用のHTTPリクエストでない場合、アクセス転送部141は、サーバ装置21に当該HTTPリクエストを転送する。サーバ装置21からHTMLファイルを含むHTTPレスポンスを受信すると、アクセス転送部141は、HTTPリクエストを送信したブラウザ(ブラウザ120またはブラウザ130)にHTTPレスポンスを転送する。ただし、アクセス転送部141は、サーバ装置21から取得したHTMLファイルをキャッシュしてもよい。ブラウザ120,130から指定されたURLに対応するHTMLファイルがキャッシュ中である場合、アクセス転送部141は、サーバ装置21にHTTPリクエストを転送せず、キャッシュされているHTMLファイルを返信してもよい。
If it is not an HTTP request for control, the
HTTPレスポンスを送信するにあたり、アクセス転送部141は、HTTPリクエストを送信したブラウザにおいて同じオリジンのWebページを閲覧中であるか、すなわち、あるWebサイトに対する2回目以降のHTTPリクエストであるか判断する。2回目以降のHTTPリクエストであるか否かは、後述するアクセス情報テーブルを参照して判断できる。最初のHTTPリクエストである場合、アクセス転送部141は、取得したHTMLファイルに所定のスクリプトを挿入する。このスクリプトは、ブラウザ120,130に、上記の制御用のHTTPリクエストを送信させるものである。
In transmitting the HTTP response, the
一方、制御用のHTTPリクエストである場合、アクセス転送部141は、当該HTTPリクエストをサーバ装置21に転送する代わりに制御ページ生成部142に転送する。アクセス転送部141は、制御ページ生成部142からHTMLファイルを含むHTTPレスポンスを受信し、HTTPリクエストを送信したブラウザに転送する。ただし、アクセス転送部141を介さずにHTTPリクエストが当該ブラウザに返信されてもよい。
On the other hand, if the request is a control HTTP request, the
制御ページ生成部142は、アクセス転送部141からHTTPリクエストを受信すると、制御ページを表示するためのHTMLファイルを生成し、当該HTMLファイルを含むHTTPレスポンスをアクセス転送部141に送信する。このHTMLファイルは、予め用意しておきHDD103に格納しておいてもよい。制御ページは、ブラウザ120,130の間でローカルストレージ124,134を同期できるようにするスクリプトを記載した制御用のWebページである。制御ページは、同期用ページと言うこともできる。
When receiving the HTTP request from the
制御ページのURLには、制御ページを呼び出した元のWebページと同じオリジンが含まれる。よって、ブラウザ120,130は、制御ページと元のWebページとはオリジンが同一であると認識する。HTML5の仕様によれば、あるWebページのスクリプトは、オリジンが同一である他のWebページにおいて発生したローカルストレージの更新を検出することができる。ただし、HTML5の仕様では、同じWebページ内で発生したローカルストレージの更新を検出できることは保証されていない。そこで、第2の実施の形態では、元のWebページとは別に、オリジンが同じ制御ページを用意している。
The URL of the control page includes the same origin as the original web page that called the control page. Therefore, the
ブラウザ120,130において、制御ページは元のWebページとは別のウィンドウ(別のタブであってもよい)に表示される。制御ページは、ローカルストレージ124,134を同期するスクリプトを含んでいればよく、表示すべき文字や画像を含まなくてもよい。制御ページを表示するウィンドウは、ユーザから認識されにくいように、元のWebページと比べて十分に小さいサイズで画面上に配置するようにしてもよい。
In
データ同期部143は、ブラウザ120,130との間でWebソケットのコネクションを確立する。コネクションの確立は、制御ページに含まれるスクリプトに従って、ブラウザ120,130からの要求に応じて実行される。データ同期部143は、確立されたコネクションを用いて、ローカルストレージ124,134の同期を実現する。Webソケットによる通信に代えて、HTTP通信を用いることも可能である。
The
ブラウザ120がローカルストレージ124を更新すると、データ同期部143は、ブラウザ120から更新通知を受信する。更新通知は、制御ページに含まれるスクリプトに従って、ブラウザ120から送信される。データ同期部143は、更新通知に含まれるキーバリュー形式のデータ(更新内容)を、同期データ記憶部144に格納する。また、データ同期部143は、ブラウザ130が同一オリジンのWebページを表示中であるか判断する。同一オリジンのWebページを表示中であるか否かは、後述するアクセス情報テーブルを参照して判断できる。ただし、データ同期部143は、Webソケットのメッセージを、定期的にまたは更新通知の受信時にブラウザ130に送信することで、同一オリジンのWebページを表示中であるか否か確認するようにしてもよい。
When the
更新通知を受信したときに、ブラウザ130で同一オリジンのWebページを表示中である場合、データ同期部143は、Webソケットを用いて、更新通知を含むプッシュ型のメッセージをブラウザ130に送信する。送信したメッセージは、ブラウザ130で表示された制御ページに含まれるスクリプトによって処理される。当該スクリプトに従って、更新通知に基づいてローカルストレージ134が更新される。一方、更新通知を受信したときに、ブラウザ130で同一オリジンのWebページが表示されていない場合、データ同期部143は、ブラウザ130が同一オリジンのWebページを表示するのを待つ。
If the
ブラウザ130で制御ページが表示されると、データ同期部143は、ローカルストレージ134に記憶されたデータを含むメッセージをブラウザ130から受信する。このメッセージは、制御ページに含まれるスクリプトに従ってブラウザ130から送信される。データ同期部143は、ブラウザ130から受信したデータと同期データ記憶部144に記憶されたデータとを比較して、両者の違いを示す差分データを生成する。データ同期部143は、Webソケットを用いて、生成した差分データを含むプッシュ型のメッセージをブラウザ130に送信する。送信したメッセージは、ブラウザ130で表示された制御ページに含まれるスクリプトによって処理される。当該スクリプトに従って、差分データがローカルストレージ134に格納される。
When the control page is displayed on the
同期データ記憶部144は、キーバリュー形式のデータを記憶する。同期データ記憶部144は、プロキシサーバ140が管理する記憶領域であり、ローカルストレージ124,134とは別個に設けられる。ローカルストレージ124,134の同期が完了しているとき、同期データ記憶部144に記憶されたデータは、ローカルストレージ124,134と同じである。ローカルストレージ124,134の一方が更新されると、更新内容が同期データ記憶部144に反映される。同期データ記憶部144を参照することで、ローカルストレージ124,134を後で同期させることができる。また、同期データ記憶部144は、後述するアクセス情報テーブルを記憶する。
The synchronous
図5は、同期データテーブルの例を示す図である。
同期データテーブル145は、同期データ記憶部144に格納されている。同期データテーブル145は、オリジン、キーおよび値の項目を有する。キーは、キーバリュー形式のデータを識別する文字列である。1つのオリジンの中で、キーは重複しない。値は、キーと対応付けられた文字列である。オリジンの項目には、キーと値の組を書き込んだスクリプトのオリジン(プロトコルスキームとホスト名とポート番号)を示す文字列が登録される。1つのオリジンに対して、キーと値の組を複数登録することができる。
FIG. 5 is a diagram illustrating an example of the synchronization data table.
The synchronization data table 145 is stored in the synchronization
ローカルストレージ124,134も、同期データテーブル145と同様のデータ構造によって実現できる。なお、1つのオリジンに対して、ローカルストレージ124,134に保存可能なデータの容量が予め設定されている。例えば、オリジン毎のローカルストレージ124,134の容量が10MB程度に設定される。
The
図6は、アクセス情報テーブルの例を示す図である。
アクセス情報テーブル146は、同期データ記憶部144に格納されている。アクセス情報テーブル146は、ブラウザおよびオリジンの項目を有する。ブラウザの項目には、ブラウザ120,130の識別名が登録される。識別名には、ブラウザ120,130のブランド名やバージョン番号を含めてもよい。例えば、ブラウザ120の識別名が「ブラウザA」であり、ブラウザ130の識別名が「ブラウザB」である。オリジンの項目には、ブラウザ120,130がアクセス中のWebサイトのオリジンが登録される。
FIG. 6 is a diagram illustrating an example of the access information table.
The access information table 146 is stored in the synchronous
図6に示したアクセス情報テーブル146の例は、ブラウザ120が、http://www.a**.com/を含むURLのWebページとhttp://host.b**.org/を含むURLのWebページを表示していることを示している。また、図6に示したアクセス情報テーブル146の例は、ブラウザ130が、http://www.a**.com/を含むURLのWebページとhttp://www.c**.com/を含むURLのWebページを表示していることを示している。
In the example of the access information table 146 illustrated in FIG. 6, the
あるオリジンを含むURLを指定したHTTPリクエストをアクセス転送部141が受信すると、アクセス転送部141によって当該オリジンがアクセス情報テーブル146に登録される。アクセス情報テーブル146に登録されたオリジンは、登録から一定時間経過した後、アクセス情報テーブル146から削除されてもよい。また、あるブラウザがウィンドウを閉じたことまたは終了したことを検知し、検知したときに当該ブラウザに対応するオリジンをアクセス情報テーブル146から削除するようにしてもよい。
When the
次に、ローカルストレージ124,134を同期する処理の流れを説明する。
図7は、Webアクセスの例を示すシーケンス図である。
ブラウザ120は、ユーザ操作によって、URLが入力されたことまたはURLを指定したハイパーリンクがクリックされたことを検出する。すると、ブラウザ120は、当該URLを含むHTTPリクエスト(Webページ要求)をプロキシサーバ140に送信する(S10)。プロキシサーバ140は、サーバ装置21にWebページ要求を転送する(S11)。サーバ装置21は、指定されたURLに対応するWebページのHTMLファイルを生成し、HTMLファイルを含むHTTPレスポンスをプロキシサーバ140に送信する(S12)。プロキシサーバ140は、WebページのHTMLファイルにスクリプトを付加し、ブラウザ120に転送する(S13)。
Next, the flow of processing for synchronizing the
FIG. 7 is a sequence diagram illustrating an example of Web access.
The
ブラウザ120は、ステップS13のWebページに含まれるスクリプトを実行することで、制御用のHTTPリクエスト(制御ページ要求)をプロキシサーバ140に送信する(S14)。制御ページ要求では、ステップS10のWebページ要求と同じオリジンおよび所定の文字列を含むURLが指定される。プロキシサーバ140は、制御ページ要求に応じて、制御ページのHTMLファイルを生成し、制御ページのHTMLファイルを含むHTTPレスポンスをブラウザ120に送信する(S15)。なお、制御ページは、ブラウザ120においてオリジン毎に1つ表示される。
The
ブラウザ120は、ステップS15の制御ページに含まれるスクリプトを実行することで、プロキシサーバ140との間にWebソケットのコネクションを確立する。また、ブラウザ120は、ローカルストレージ124から、ステップS15の制御ページのオリジンに関するデータを抽出する。そして、ブラウザ120は、Webソケットのコネクションを用いて、オリジンを示す文字列および抽出したデータを含むメッセージ(同期要求)をプロキシサーバ140に送信する(S16)。
The
プロキシサーバ140は、同期要求が示すオリジンに関するデータを同期データ記憶部144から検索する。プロキシサーバ140は、検索したデータと同期要求に含まれるデータとを比較し、両者の違いを示す差分データを生成する。そして、プロキシサーバ140は、Webソケットのコネクションを用いて、差分データを含むメッセージをブラウザ120に送信する(S17)。ブラウザ120は、プロキシサーバ140から受信した差分データをローカルストレージ124に格納する。これにより、ステップS13のWebページのオリジンに関してローカルストレージ124,134が同期される(S18)。
The
ブラウザ120は、ステップS15の制御ページに含まれるスクリプトを実行することで、ステップS13のWebページ上でローカルストレージ124が更新されたことを検知する(S19)。ローカルストレージ124を更新するスクリプトは、ステップS12でサーバ装置21から取得したHTMLファイルに元々記述されている。ローカルストレージ124の更新を検知すると、ブラウザ120は、Webソケットのコネクションを用いて、ステップS13のWebページのオリジンを示す文字列および更新データを含むメッセージ(更新通知)をプロキシサーバ140に送信する(S20)。
The
プロキシサーバ140は、更新通知で指定されたオリジンについてのデータとして、更新通知に含まれるデータを同期データ記憶部144に格納する。ここでは、端末装置100においてブラウザ130が実行中であり、ステップS13のWebページとオリジンが同じWebページを表示しているものとする。この場合、ステップS16と同様にして、ブラウザ130とプロキシサーバ140との間にWebソケットのコネクションが確立されている。すると、プロキシサーバ140は、Webソケットのコネクションを用いて、更新通知をブラウザ130に送信する(S21)。ブラウザ130は、制御ページに含まれるスクリプトに従って、プロキシサーバ140から受信した更新通知が示すデータをローカルストレージ134に格納する。これにより、ステップS13のWebページのオリジンに関してローカルストレージ124,134が同期される(S22)。
The
図8は、Webページに付加されるスクリプトの例を示す図である。
HTMLファイル31は、例えば、上記のステップS13においてプロキシサーバ140からブラウザ120に送信される。HTMLファイル31のスクリプトは、関数openSyncPage()および関数storageUpdate()を含む。
FIG. 8 is a diagram illustrating an example of a script added to a Web page.
For example, the
関数openSyncPage()は、プロキシサーバ140によってHTMLファイル31に挿入されたものである。関数openSyncPage()は、HTMLファイル31に基づくWebページが表示されるときに自動的に実行される。関数openSyncPage()は、HTMLファイル31のオリジンに所定のパス名(例えば、/Sync/syncPage.html)を連結したURLを生成する。このパス名が示すHTMLファイルは、サーバ装置21に実在しないものでもよい。その場合、このURLは仮想的なURLであると言うことができる。関数openSyncPage()は、生成したURLに対応するWebページを、HTMLファイル31に基づくWebページとは異なる新たなウィンドウ(新たなタブでもよい)に表示させる。
The function openSyncPage () is inserted into the
関数storageUpdate()は、サーバ装置21から取得したHTMLファイルに元々記述されていたものである。関数storageUpdate()は、キーと値の組をローカルストレージ124に格納する。
The function storageUpdate () is originally described in the HTML file acquired from the
図9は、制御ページに含まれるスクリプトの例を示す図である。
HTMLファイル32は、例えば、上記のステップS15においてプロキシサーバ140からブラウザ120に送信される。HTMLファイル32のスクリプトは、変数ws、同期要求処理、メッセージ受信処理、関数updateIStorage()、イベントリスナ登録処理、および、関数sendEventData()を含む。
FIG. 9 is a diagram illustrating an example of a script included in the control page.
For example, the
変数wsは、プロキシサーバ140との間に確立したWebソケットのコネクションを示す。制御ページが表示されるときに、Webソケットのコネクションが確立される。同期要求処理は、HTMLファイル32のスクリプトから認識できる全てのデータ(HTMLファイル32のオリジンに関するデータ)をローカルストレージ124から抽出する。そして、同期要求処理は、記号「0」とオリジンを示す文字列と抽出したデータとを含むメッセージを、Webソケットのコネクションを用いて送信する。記号「0」は、送信するメッセージが同期要求であることを識別する記号である。
A variable ws indicates a Web socket connection established with the
メッセージ受信処理は、Webソケットのメッセージを受信したか判定し、Webソケットのメッセージを受信すると関数updateIStorage()を呼び出す。関数updateIStorage()は、受信したWebソケットのメッセージに含まれるキーと値の組を、ローカルストレージ124に格納する。
In the message reception process, it is determined whether a Web socket message is received, and when the Web socket message is received, the function updateISstorage () is called. The function updateIStorage () stores the key / value pair included in the received Web socket message in the
イベントリスナ登録処理は、制御ページが表示されるときに実行される。イベントリスナ登録処理は、HTMLファイル32と同じオリジンに関するデータがローカルストレージ124に書き込まれたときに、書き込まれたデータを含むイベント情報を取得できるように設定する。イベントリスナ登録処理は、イベント情報が取得されると関数sendEventData()が呼び出されるように設定する。関数sendEventData()は、記号「1」とオリジンを示す文字列と取得したイベント情報とを含むメッセージを、Webソケットのコネクションを用いて送信する。記号「1」は、送信するメッセージが更新通知であることを識別する記号である。
The event listener registration process is executed when the control page is displayed. The event listener registration processing is set so that event information including the written data can be acquired when data related to the same origin as the
図10は、プロキシ転送処理の手順例を示すフローチャートである。
このプロキシ転送処理は、プロキシサーバ140によって実行される。ここでは、ブラウザ120とプロキシサーバ140との間で通信を行う場合を想定する。ブラウザ130とプロキシサーバ140との間でも同様の通信が行われる。
FIG. 10 is a flowchart illustrating an exemplary procedure of proxy transfer processing.
This proxy transfer process is executed by the
(S30)アクセス転送部141は、HTTPリクエストを受信する。
(S31)アクセス転送部141は、ステップS30で受信したHTTPリクエストが制御ページ要求であるか判断する。制御ページ要求であるか否かは、例えば、URLに所定のパス名が含まれているかによって判断できる。また、例えば、URLに所定のハッシュまたはクエリが含まれているか、HTTPリクエストの種類がPOSTでありボディに所定の文字列が含まれているかによって判断することもできる。制御ページ要求である場合はステップS37に処理が進み、それ以外の場合はステップS32に処理が進む。
(S30) The
(S31) The
(S32)アクセス転送部141は、受信したHTTPリクエストをサーバ装置21に転送する。アクセス転送部141は、転送したHTTPリクエストに対する応答として、HTMLファイルを含むHTTPレスポンスを受信する。
(S32) The
(S33)アクセス転送部141は、ブラウザ120が、ステップS32で取得したHTMLファイルと同じオリジンのWebサイトにアクセス済みであるか判断する。具体的には、アクセス転送部141は、ブラウザ120と対応付けて、取得したHTMLファイルのオリジンがアクセス情報テーブル146に登録されているか判断する。登録されている場合はステップS36に処理が進み、登録されていない場合はステップS34に処理が進む。なお、アクセス情報テーブル146のオリジンは、一定時間の経過、制御ページのクローズ、ブラウザ120の終了などに応じて削除されてもよい。
(S33) The
(S34)アクセス転送部141は、ブラウザ120と対応付けて、取得したHTMLファイルのオリジンをアクセス情報テーブル146に登録する。
(S35)アクセス転送部141は、取得したHTMLファイルに所定のスクリプトを付加する。付加するスクリプトは、ステップS32で取得したHTMLファイルと同じオリジンを含むURLを指定したものであって所定の文字列を含むHTTPリクエストを生成する処理を示す。付加するスクリプトは、例えば、図8に示したHTMLファイル31に含まれる関数openSyncPage()である。
(S34) The
(S35) The
(S36)アクセス転送部141は、サーバ装置21から受信したHTTPレスポンスをブラウザ120に転送する。ただし、上記のステップS35によって、HTTPレスポンスに含まれるHTMLファイルに所定のスクリプトが付加されていることがある。
(S36) The
(S37)アクセス転送部141は、HTTPリクエストを制御ページ生成部142に転送する。制御ページ生成部142は、制御ページを示すHTMLファイルを生成し、生成したHTMLファイルを含むHTTPレスポンスをアクセス転送部141に送信する。アクセス転送部141は、制御ページ生成部142から受信したHTTPレスポンスをブラウザ120に転送する。制御ページのHTMLファイルには、ローカルストレージ124,134の同期に関する処理を示すスクリプトが含まれている。
(S37) The
このスクリプトは、制御ページが表示されたときにプロキシサーバ140とWebソケットのコネクションを確立する処理を示す。また、このスクリプトは、制御ページが表示されたときにWebソケットによって同期要求をプロキシサーバ140に送信し、差分データをプロキシサーバ140から受信してローカルストレージ124を更新する処理を示す。また、このスクリプトは、制御ページとオリジンが同一である他のWebページのスクリプトによってローカルストレージ124が更新されたことを検知し、Webソケットによって更新通知をプロキシサーバ140に送信する処理を示す。また、このスクリプトは、Webソケットによってプロキシサーバ140から更新通知を受信し、受信した更新通知に基づいてローカルストレージ124を更新する処理を示す。
This script indicates a process of establishing a Web socket connection with the
図11は、プロキシ同期処理の手順例を示すフローチャートである。
このプロキシ転送処理は、プロキシサーバ140によって実行される。ここでは、ブラウザ120とプロキシサーバ140との間で通信を行う場合を想定する。ブラウザ130とプロキシサーバ140との間でも同様の通信が行われる。
FIG. 11 is a flowchart illustrating an exemplary procedure of proxy synchronization processing.
This proxy transfer process is executed by the
(S40)データ同期部143は、Webソケットのメッセージを受信する。
(S41)データ同期部143は、ステップS40で受信したメッセージが、同期要求であるか判断する。メッセージが同期要求であることは、例えば、メッセージの先頭に含まれる記号が「0」であることを確認することで判断できる。メッセージが同期要求である場合、ステップS42に処理が進む。メッセージが同期要求でない場合、すなわち、メッセージが更新通知である場合、ステップS44に処理が進む。なお、更新通知を示すメッセージの先頭には、例えば、記号「1」が含まれている。
(S40) The
(S41) The
(S42)データ同期部143は、ステップS40で受信したメッセージからオリジンを示す文字列とデータを抽出する。データ同期部143は、同期データ記憶部144に記憶された同期データテーブル145から、メッセージで指定されたオリジンに対応するデータを全て検索する。そして、データ同期部143は、同期データテーブル145から検索したデータとメッセージから抽出したデータとを比較し、差分データを生成する。
(S42) The
例えば、データ同期部143は、同期データテーブル145に含まれメッセージに含まれないキーが存在する場合、同期データテーブル145内の当該キーとそれに対応する値の組を差分データに挿入する。これは、ローカルストレージ124に当該キーと値の組を追加することを示す。また、データ同期部143は、同期データテーブル145とメッセージとの間で、同じキーが存在し当該キーに対応する値が異なる場合、当該キーとそれに対応する同期データテーブル145内の値の組を差分データに挿入する。これは、当該キーに対応するローカルストレージ124内の値を上書きすることを示す。また、データ同期部143は、同期データテーブル145に含まれずメッセージに含まれるキーが存在する場合、当該キーと空文字列との組を差分データに挿入する。これは、当該キーと値との組をローカルストレージ124から削除することを示す。
For example, when there is a key that is included in the synchronization data table 145 but not included in the message, the
(S43)データ同期部143は、ステップS42で生成した差分データを含むメッセージを、Webソケットによってブラウザ120に送信する。
(S44)データ同期部143は、ステップS40で受信したメッセージからオリジンを示す文字列とデータを抽出する。そして、データ同期部143は、メッセージで指定されたオリジンと対応付けて、抽出したデータを同期データテーブル145に格納する。
(S43) The
(S44) The
例えば、データ同期部143は、メッセージに含まれるキーが同期データテーブル145に存在しない場合、当該キーと値の組を同期データテーブル145に追加する。また、データ同期部143は、メッセージと同期データテーブル145との間で、同じキーが存在し値が異なる場合、同期データテーブル145に記憶された当該キーに対応する値を上書きする。また、データ同期部143は、メッセージにキーと空文字列の組が含まれる場合、同期データテーブル145から当該キーと値の組を削除する。
For example, if the key included in the message does not exist in the synchronization data table 145, the
(S45)データ同期部143は、同じオリジンのWebサイトにアクセス中の他のブラウザ(ブラウザ130)が存在するか判断する。該当する他のブラウザが存在するか否かは、例えば、他のブラウザと対応付けて、メッセージで指定されたオリジンがアクセス情報テーブル146に登録されているかによって判断できる。ただし、データ同期部143は、定期的に他のブラウザ(ブラウザ130)に対してWebソケットのメッセージを送信して、同一オリジンに関する制御ページが表示されているか確認してもよい。また、データ同期部143は、更新通知のメッセージを受信したときに、他のブラウザに対してWebソケットのメッセージを送信して確認してもよい。該当する他のブラウザが存在する場合はステップS46に処理が進み、存在しない場合は処理を終了する。
(S45) The
(S46)データ同期部143は、ステップS45に該当する他のブラウザ(ブラウザ130)に対して、Webソケットによって更新通知を示すメッセージを送信する。
図12は、ブラウザアクセス処理の手順例を示すフローチャートである。
(S46) The
FIG. 12 is a flowchart illustrating an exemplary procedure of browser access processing.
このブラウザアクセス処理は、ブラウザ120によって実行される。ブラウザ130でもブラウザ120と同様の処理が行われ得る。
(S50)通信部123は、プロキシサーバ140にHTTPリクエストを送信する。
This browser access process is executed by the
(S50) The
(S51)通信部123は、プロキシサーバ140から、HTMLファイルを含むHTTPレスポンスを受信する。UI制御部121は、取得したHTMLファイルに基づいてレンダリングを行い、あるウィンドウ(タブでもよい)にWebページを表示する。
(S51) The
(S52)スクリプト実行部122は、ステップS51で取得したHTMLファイルに含まれるスクリプトを実行する。ここでは、スクリプト実行部122は、取得したHTMLファイルと同じオリジンを含むURLを指定しており所定の文字列を含むHTTPリクエストを生成する。通信部123は、スクリプト実行部122が生成したHTTPリクエストをプロキシサーバ140に送信する。このHTTPリクエストは、制御ページを示すHTMLファイルを取得するための制御ページ要求に相当する。
(S52) The
(S53)通信部123は、ステップS52で送信したHTTPリクエストの応答として、HTMLファイルを含むHTTPレスポンスをプロキシサーバ140から受信する。UI制御部121は、ステップS51のWebページが表示されたウィンドウとは異なる新たなウィンドウ(新たなタブでもよい)を起動する。そして、UI制御部121は、取得したHTMLファイルに基づいてレンダリングを行い、新たなウィンドウに制御ページを表示する。ただし、制御ページには文字や画像が含まれない可能性がある。
(S53) The
(S54)スクリプト実行部122は、ステップS53で取得したHTMLファイルに含まれるスクリプトを実行する。ここでは、スクリプト実行部122は、プロキシサーバ140とWebソケットのコネクションを確立するよう通信部123に指示する。通信部123は、指示に応じてWebソケットのコネクションを確立する。
(S54) The
(S55)スクリプト実行部122は、ローカルストレージ124から、ステップS53で取得したHTMLファイルとオリジンが同一(すなわち、ステップS51で取得したHTMLファイルともオリジンが同一)であるデータを全て抽出する。
(S55) The
(S56)スクリプト実行部122は、メッセージの種類を示す記号「0」と、ステップS53で取得したHTMLファイルのオリジンを示す文字列と、ステップS55で抽出したデータとを含む同期要求を生成する。通信部123は、ステップS54で確立したWebソケットのコネクションを用いて、同期要求をプロキシサーバ140に送信する。
(S56) The
(S57)通信部123は、ステップS54で確立したWebソケットのコネクションを用いて、差分データを含むメッセージをプロキシサーバ140から受信する。スクリプト実行部122は、Webソケットのメッセージが受信されたことを検出し、メッセージに含まれる差分データをローカルストレージ124に保存する。
(S57) The
例えば、スクリプト実行部122は、差分データに含まれるキーがローカルストレージ124に存在しない場合、当該キーと値の組をローカルストレージ124に追加する。また、スクリプト実行部122は、差分データとローカルストレージ124との間で、同じキーが存在し値が異なる場合、ローカルストレージ124に記憶された当該キーに対応する値を上書きする。また、スクリプト実行部122は、差分データにキーと空文字列の組が含まれる場合、ローカルストレージ124から当該キーと値の組を削除する。
For example, if the key included in the difference data does not exist in the
図13は、ブラウザ同期処理の手順例を示すフローチャートである。
このブラウザアクセス処理は、ブラウザ120によって繰り返し実行される。ブラウザ130でもブラウザ120と同様の処理が行われ得る。
FIG. 13 is a flowchart illustrating a procedure example of browser synchronization processing.
This browser access process is repeatedly executed by the
(S60)スクリプト実行部122は、前述のステップS53で取得したHTMLファイルに含まれるスクリプトに従って、ローカルストレージ124に関するイベント情報を監視する。制御ページとオリジンが同一の他のWebページによってローカルストレージ124が更新された場合に、更新されたデータを含むイベント情報が取得される。スクリプト実行部122は、ローカルストレージ124に関するイベント情報を取得したか判断する。ローカルストレージ124に関するイベント情報を取得した場合はステップS61に処理が進み、取得していない場合はステップS62に処理が進む。
(S60) The
(S61)スクリプト実行部122は、イベント情報から更新されたデータを抽出する。スクリプト実行部122は、メッセージの種類を示す記号「1」と、ステップS53で取得したHTMLファイルのオリジンを示す文字列と、抽出したデータとを含む更新通知を生成する。通信部123は、前述のステップS54で確立したWebソケットのコネクションを用いて、更新通知をプロキシサーバ140に送信する。
(S61) The
(S62)スクリプト実行部122は、プロキシサーバ140からWebソケットのメッセージが受信されたか判断する。メッセージが受信された場合はステップS63に処理が進み、受信されていない場合は処理が終了する。
(S62) The
(S63)スクリプト実行部122は、ステップS62で受信したメッセージに基づいてローカルストレージ124を更新する。
例えば、スクリプト実行部122は、メッセージに含まれるキーがローカルストレージ124に存在しない場合、当該キーと値の組をローカルストレージ124に追加する。また、スクリプト実行部122は、メッセージとローカルストレージ124との間で、同じキーが存在し値が異なる場合、ローカルストレージ124に記憶された当該キーに対応する値を上書きする。また、スクリプト実行部122は、メッセージにキーと空文字列の組が含まれる場合、ローカルストレージ124から当該キーと値の組を削除する。
(S63) The
For example, if the key included in the message does not exist in the
第2の実施の形態の情報処理システムによれば、プロキシサーバ140を介して、ブラウザ120のローカルストレージ124とブラウザ130のローカルストレージ134とを同期させることができる。これにより、ブラウザ120,130を使用して同じWebサイトにアクセスした場合であっても、ユーザが以前に入力した古いデータが意図せずサーバ装置21にアップロードされてしまうことを抑制できる。よって、ユーザが入力した新しいデータが消去されてしまうことを抑制でき、また、公開したくない古いデータがユーザの意図に反して公開されてしまうことを抑制できる。
According to the information processing system of the second embodiment, the
また、元のWebページから制御ページを呼び出すHTTPリクエストでは、元のWebページと同じオリジンを含むURLを指定する。これにより、ブラウザ120,130のセキュリティの制限のもとでも、スクリプトによって当該HTTPリクエストを送信することが許容される。また、ブラウザ120,130は、元のWebページと制御ページのオリジンが同一であると認識する。これにより、HTML5の仕様のもとで、元のWebページによるローカルストレージの更新を検出することができる。また、ブラウザ120,130のセキュリティの制限のもとでも、制御ページのスクリプトによって、元のWebページと同じオリジンに関するローカルストレージのデータを扱うことができる。
In the HTTP request for calling the control page from the original Web page, a URL including the same origin as the original Web page is specified. This allows the HTTP request to be transmitted by the script even under the security restrictions of the
このように、HTML5の仕様やブラウザ120,130のセキュリティの制限のもとでも、ローカルストレージ124,134を同期することが可能となる。よって、既存のブラウザ120,130を改変しなくてもよく、ローカルストレージ124,134の同期を容易に実現できる。また、ブラウザ120,130のセキュリティを維持できる。
As described above, the
なお、第1の実施の形態の情報処理は、ローカルストレージ同期装置10にプログラムを実行させることで実現できる。第2の実施の形態の情報処理は、サーバ装置21や端末装置100,100a,100bにプログラムを実行させることで実現できる。
The information processing according to the first embodiment can be realized by causing the local
プログラムは、コンピュータ読み取り可能な記録媒体(例えば、記録媒体113)に記録しておくことができる。記録媒体としては、例えば、磁気ディスク、光ディスク、光磁気ディスク、半導体メモリなどを使用できる。磁気ディスクには、FDおよびHDDが含まれる。光ディスクには、CD、CD−R(Recordable)/RW(Rewritable)、DVDおよびDVD−R/RWが含まれる。プログラムは、可搬型の記録媒体に記録されて配布されることがある。その場合、可搬型の記録媒体からHDDなどの他の記録媒体(例えば、HDD103)にプログラムをコピーして実行してもよい。 The program can be recorded on a computer-readable recording medium (for example, the recording medium 113). As the recording medium, for example, a magnetic disk, an optical disk, a magneto-optical disk, a semiconductor memory, or the like can be used. Magnetic disks include FD and HDD. Optical discs include CD, CD-R (Recordable) / RW (Rewritable), DVD, and DVD-R / RW. The program may be recorded and distributed on a portable recording medium. In this case, the program may be copied from a portable recording medium to another recording medium such as an HDD (for example, the HDD 103) and executed.
2 サーバ
10 ローカルストレージ同期装置
11 通信部
12 制御部
13,14 ブラウザ
13a,14a ローカルストレージ
15,17 リクエスト
16,18 データ
16a,18a スクリプト
19 更新情報
2
Claims (7)
ローカルストレージを使用する第1のブラウザからサーバ宛てのリクエストを受信し、
前記サーバから取得した前記リクエストに対応するデータに、他のリクエストを送信する処理を示すスクリプトを挿入して前記第1のブラウザに送信し、
前記第1のブラウザから前記他のリクエストを受信し、
前記他のリクエストに応じて、前記ローカルストレージの更新を検知して更新情報を送信する処理を示す他のスクリプトを含む他のデータを、前記第1のブラウザに送信し、
前記第1のブラウザから前記更新情報を受信し、
他のローカルストレージを使用する第2のブラウザが実行中の場合に、前記更新情報を前記第2のブラウザに送信する、
ローカルストレージ同期方法。 A local storage synchronization method performed by a computer,
Receive a request addressed to the server from the first browser using local storage,
Inserting a script indicating a process for transmitting another request into the data corresponding to the request acquired from the server and transmitting the data to the first browser;
Receiving the other request from the first browser;
In response to the other request, other data including another script indicating processing for detecting update of the local storage and transmitting update information is transmitted to the first browser,
Receiving the update information from the first browser;
Sending the update information to the second browser when a second browser using another local storage is running;
Local storage synchronization method.
前記更新情報を受信したときに前記第2のブラウザが実行されていない場合は、前記第2のブラウザが起動した後に、前記記憶領域に保存した前記更新情報を送信する、
請求項1記載のローカルストレージ同期方法。 The received update information is stored in a storage area different from the local storage and the other local storage,
If the second browser is not executed when the update information is received, the update information stored in the storage area is transmitted after the second browser is started.
The local storage synchronization method according to claim 1.
請求項1または2記載のローカルストレージ同期方法。 The script further shows a process of displaying the other data received in response to the other request in a window different from the data.
The local storage synchronization method according to claim 1 or 2.
請求項1乃至3の何れか一項に記載のローカルストレージ同期方法。 The other script further shows a process of updating the local storage when receiving other update information according to the update of the other local storage.
The local storage synchronization method according to any one of claims 1 to 3.
請求項1乃至4の何れか一項に記載のローカルストレージ同期方法。 The first browser and the second browser are executed on the computer;
The local storage synchronization method according to any one of claims 1 to 4.
ローカルストレージを使用する第1のブラウザおよび他のローカルストレージを使用する第2のブラウザから前記サーバへのアクセスを制御する制御部と、
を有し、前記制御部は、
前記第1のブラウザから前記サーバ宛てのリクエストを受信し、
前記サーバから取得した前記リクエストに対応するデータに、他のリクエストを送信する処理を示すスクリプトを挿入して前記第1のブラウザに送信し、
前記第1のブラウザから前記他のリクエストを受信し、
前記他のリクエストに応じて、前記ローカルストレージの更新を検知して更新情報を送信する処理を示す他のスクリプトを含む他のデータを、前記第1のブラウザに送信し、
前記第1のブラウザから前記更新情報を受信し、
前記第2のブラウザが実行中の場合に、前記更新情報を前記第2のブラウザに送信する、
ローカルストレージ同期装置。 A communication unit that communicates with the server;
A control unit that controls access to the server from a first browser that uses local storage and a second browser that uses other local storage;
And the control unit includes:
Receiving a request addressed to the server from the first browser;
Inserting a script indicating a process for transmitting another request into the data corresponding to the request acquired from the server and transmitting the data to the first browser;
Receiving the other request from the first browser;
In response to the other request, other data including another script indicating processing for detecting update of the local storage and transmitting update information is transmitted to the first browser,
Receiving the update information from the first browser;
Sending the update information to the second browser when the second browser is running;
Local storage synchronizer.
ローカルストレージを使用する第1のブラウザからサーバ宛てのリクエストを受信し、
前記サーバから取得した前記リクエストに対応するデータに、他のリクエストを送信する処理を示すスクリプトを挿入して前記第1のブラウザに送信し、
前記第1のブラウザから前記他のリクエストを受信し、
前記他のリクエストに応じて、前記ローカルストレージの更新を検知して更新情報を送信する処理を示す他のスクリプトを含む他のデータを、前記第1のブラウザに送信し、
前記第1のブラウザから前記更新情報を受信し、
他のローカルストレージを使用する第2のブラウザが実行中の場合に、前記更新情報を前記第2のブラウザに送信する、
処理を実行させるローカルストレージ同期プログラム。 On the computer,
Receive a request addressed to the server from the first browser using local storage,
Inserting a script indicating a process for transmitting another request into the data corresponding to the request acquired from the server and transmitting the data to the first browser;
Receiving the other request from the first browser;
In response to the other request, other data including another script indicating processing for detecting update of the local storage and transmitting update information is transmitted to the first browser,
Receiving the update information from the first browser;
Sending the update information to the second browser when a second browser using another local storage is running;
A local storage synchronization program that executes processing.
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
JP2014227840A JP6358049B2 (en) | 2014-11-10 | 2014-11-10 | Local storage synchronization method, local storage synchronization apparatus, and local storage synchronization program |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
JP2014227840A JP6358049B2 (en) | 2014-11-10 | 2014-11-10 | Local storage synchronization method, local storage synchronization apparatus, and local storage synchronization program |
Publications (2)
Publication Number | Publication Date |
---|---|
JP2016091449A JP2016091449A (en) | 2016-05-23 |
JP6358049B2 true JP6358049B2 (en) | 2018-07-18 |
Family
ID=56019735
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
JP2014227840A Active JP6358049B2 (en) | 2014-11-10 | 2014-11-10 | Local storage synchronization method, local storage synchronization apparatus, and local storage synchronization program |
Country Status (1)
Country | Link |
---|---|
JP (1) | JP6358049B2 (en) |
Families Citing this family (2)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US20200073905A1 (en) * | 2016-12-09 | 2020-03-05 | Intel Corporation | Technologies for cross-device shared web resource cache |
CN110830537B (en) * | 2018-08-13 | 2022-05-10 | 阿里巴巴集团控股有限公司 | Page processing method and device |
Family Cites Families (5)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
JP2008097201A (en) * | 2006-10-10 | 2008-04-24 | Nec Corp | Browser data sharing system, server, method, and program |
JP5215362B2 (en) * | 2009-08-28 | 2013-06-19 | 日本電信電話株式会社 | Web content sharing system and web content sharing method |
JP2011077708A (en) * | 2009-09-29 | 2011-04-14 | Fujitsu Ltd | Relay server device and communication method |
JP5476326B2 (en) * | 2011-03-08 | 2014-04-23 | 株式会社日立製作所 | Web operation recording and reproducing method and apparatus |
US8621091B1 (en) * | 2011-12-15 | 2013-12-31 | Google Inc. | System and method for synchronizing settings and state information for a browser component |
-
2014
- 2014-11-10 JP JP2014227840A patent/JP6358049B2/en active Active
Also Published As
Publication number | Publication date |
---|---|
JP2016091449A (en) | 2016-05-23 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
US10412176B2 (en) | Website access method, apparatus, and website system | |
AU2011101576B4 (en) | Method and systems for generating and displaying a preview image of a content area | |
EP2815311B1 (en) | Using an application cache to update resources of installed applications | |
US20140298188A1 (en) | Remote operation method and system | |
KR20090073199A (en) | Offline execution of web based applications | |
JP2019207527A (en) | Editing program, editing device and editing method | |
JP6482204B2 (en) | Information processing terminal, control method thereof, and program | |
JP4186164B2 (en) | Web sharing system, Web sharing method, Web sharing program, relay server, and WWW browser display device | |
US20180089207A1 (en) | Image transfer apparatus and method | |
JP6358049B2 (en) | Local storage synchronization method, local storage synchronization apparatus, and local storage synchronization program | |
US9483575B2 (en) | Reproducing a graphical user interface display | |
US10193950B2 (en) | Network system and control method | |
JP6365259B2 (en) | Local storage management method, local storage management apparatus, and local storage management program | |
JP6776406B2 (en) | Signage presentation system | |
JP6591470B2 (en) | Signage presentation system | |
JP2017220104A (en) | Client device, information processing system, and program | |
JP5281029B2 (en) | Confirmation system and method | |
US7937441B2 (en) | Data-control device and method of controlling same | |
JP2009176176A (en) | Web page distribution device | |
JP5647880B2 (en) | Client server system, fixed document variable data correction support system using the same, screen transition method, fixed document variable data correction support method, and program therefor | |
JP2010250585A (en) | Markup language document conversion device, program and method | |
TW201421263A (en) | Webpage browsing system and method thereof | |
JP2020030447A (en) | Server, system, client apparatus, log information storage method, client information transmission method and program | |
JP2016173627A (en) | Local storage management method, local storage management device, and local storage management program | |
JP2005148828A (en) | Page address change notification method |
Legal Events
Date | Code | Title | Description |
---|---|---|---|
A621 | Written request for application examination |
Free format text: JAPANESE INTERMEDIATE CODE: A621 Effective date: 20170704 |
|
A977 | Report on retrieval |
Free format text: JAPANESE INTERMEDIATE CODE: A971007 Effective date: 20180518 |
|
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: 20180522 |
|
A61 | First payment of annual fees (during grant procedure) |
Free format text: JAPANESE INTERMEDIATE CODE: A61 Effective date: 20180604 |
|
R150 | Certificate of patent or registration of utility model |
Ref document number: 6358049 Country of ref document: JP Free format text: JAPANESE INTERMEDIATE CODE: R150 |