JP2012078925A - Information display device and information display program - Google Patents
Information display device and information display program Download PDFInfo
- Publication number
- JP2012078925A JP2012078925A JP2010221413A JP2010221413A JP2012078925A JP 2012078925 A JP2012078925 A JP 2012078925A JP 2010221413 A JP2010221413 A JP 2010221413A JP 2010221413 A JP2010221413 A JP 2010221413A JP 2012078925 A JP2012078925 A JP 2012078925A
- Authority
- JP
- Japan
- Prior art keywords
- web page
- display
- window
- link
- unit
- 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.)
- Pending
Links
Images
Landscapes
- User Interface Of Digital Computer (AREA)
Abstract
Description
本発明は、情報処理端末に搭載されるブラウザにおけるウェブページの表示技術に関する。 The present invention relates to a technique for displaying a web page in a browser installed in an information processing terminal.
携帯電話やスマートフォンなどの携帯情報端末では、無線通信によってウェブページを取得するので、通信に時間がかかりブラウザ上にウェブページがなかなか表示されない場合がある。このようなとき、真っ白の画面または処理途中のページがブラウザに表示されるので、通信が完了するまでの間、ユーザはコンテンツを閲覧できないまま待たされることになる。 Since a mobile information terminal such as a mobile phone or a smartphone acquires a web page by wireless communication, it may take a long time to communicate and the web page may not be displayed on the browser. In such a case, since a pure white screen or a page in the middle of processing is displayed on the browser, the user waits without being able to browse the content until the communication is completed.
従来、ウェブページ読み込みの進捗程度をユーザに示すために、プログレッシブバーをウインドウに重畳表示させたりタスクバーなどに表示するブラウザが知られている。例えば特許文献１には、ウェブページのローディング中に一時的なグラフィック要素を表示することが開示されている。特許文献２には、ウェブページのローディング中にローディングバーを表示することが開示されている。特許文献３には、ウェブページのローディング中に、そのウェブページを開いているウインドウに設けられた背景タブにウェブページを開いていることを示すことが開示されている。 2. Description of the Related Art Conventionally, browsers are known that display a progressive bar superimposed on a window or a task bar or the like in order to indicate to the user the progress of web page reading. For example, Patent Document 1 discloses displaying a temporary graphic element during loading of a web page. Patent Document 2 discloses displaying a loading bar during loading of a web page. Patent Document 3 discloses that during loading of a web page, the web page is opened in a background tab provided in a window in which the web page is opened.
上記の方法では、ユーザはページ読み込みの進捗は分かるものの、ページの読み込みとレンダリングが完了するまでコンテンツを閲覧できないという問題は解決されていない。 In the above method, although the user can know the progress of page loading, the problem that the user cannot view the contents until the page loading and rendering is completed is not solved.
本発明はこうした課題に鑑みてなされたものであり、その目的は、リンク先のウェブページの取得に時間がかかる場合でも、元のウェブページの閲覧を継続できるようにする技術を提供することにある。 The present invention has been made in view of these problems, and an object of the present invention is to provide a technique that allows the user to continue browsing the original web page even when it takes time to acquire the linked web page. is there.
本発明のある態様は、情報処理端末に設けられたディスプレイにウェブページを表示させる情報表示装置である。この装置は、リンク先ウェブページの位置情報が関連付けられたリンクを含む表示中のウェブページにおいて、ユーザにより操作される入力装置を介してリンクが選択されたとき、該リンクに関連する位置情報に基づきリンク先ウェブページの読み込みを行うページ取得部と、ウェブページおよびリンク先ウェブページをメモリ上にレンダリングするレンダリング部と、メモリ上にレンダリングされた画像を表示するディスプレイ内のウインドウのサイズを制御するウインドウ表示部と、メモリ上にレンダリングされた画像のうち、リンク先ウェブページの読み込み開始前にウインドウ内に表示されていたウェブページの範囲と少なくとも同一の範囲を画像として取り込み、ディスプレイの表示領域に表示する画像取り込み部と、入力装置を介してリンクが選択されたことを契機として、ウインドウ表示部に対してディスプレイの表示領域よりもサイズを小さくした縮小ウインドウを表示するよう指示するとともに、読み込み中のリンク先ウェブページのレンダリングを縮小ウインドウ内で行うようレンダリング部に指示する切り替え制御部と、を備える。切り替え制御部は、リンク先ウェブページの読み込みおよびレンダリングが完了したとき、ウインドウをディスプレイの表示領域全体に拡大するようウインドウ表示部に指示する。 One embodiment of the present invention is an information display device that displays a web page on a display provided in an information processing terminal. When a link is selected via an input device operated by a user on a displayed web page including a link associated with the position information of the link destination web page, the device displays the position information related to the link. Based on the page acquisition unit that loads the linked web page, the rendering unit that renders the web page and the linked web page on the memory, and the size of the window in the display that displays the image rendered on the memory. Of the images rendered on the window display and memory, at least the same range as the range of the web page displayed in the window prior to the start of loading the linked web page is captured as an image and displayed in the display area of the display. The image capture unit to display and the input device When the link is selected, the window display unit is instructed to display a reduced window having a size smaller than the display area of the display, and rendering of the linked web page being loaded is reduced. A switching control unit for instructing the rendering unit to perform the operation within the control unit. The switching control unit instructs the window display unit to expand the window to the entire display area of the display when reading and rendering of the linked web page is completed.
この態様によると、リンク先ウェブページの読み込みを待っている間でも、ユーザは取り込んだ画像の表示によりリンク元ウェブページの閲覧を継続することができ、ユーザビリティが向上する。また、リンク先ウェブページの読み込みの進捗を、縮小ウインドウにより確認することができる。 According to this aspect, the user can continue browsing the link source web page by displaying the captured image even while waiting for the link destination web page to be read, and usability is improved. In addition, the progress of reading the linked web page can be confirmed by the reduced window.
切り替え制御部は、リンク先ウェブページの読み込み開始から所定の時間が経過したとき、画像取り込み部に対して画像の取り込みを指示するとともに、ウインドウ表示部に対して縮小ウインドウの表示を指示するようにしてもよい。これによると、リンク先ウェブページの読み込みに時間がかかるときのみ、擬似的な二つのウインドウが表示される。 The switching control unit instructs the image capturing unit to capture an image and instructs the window display unit to display a reduced window when a predetermined time has elapsed from the start of reading the linked web page. May be. According to this, only when it takes time to load the linked web page, two pseudo windows are displayed.
画像取り込み部は、リンク先ウェブページの読み込み開始前にウインドウ内に表示されていたウェブページの範囲よりも広い範囲を含むように画像を取り込んでもよい。これによると、所定の範囲内であれば元のウェブページの画像内をスクロールして閲覧することができるので、リンク先ページの読み込みが長期化した場合でもユーザに与えるストレスを軽減することができる。 The image capturing unit may capture an image so as to include a range wider than the range of the web page displayed in the window before starting the link destination web page. According to this, since it is possible to scroll and browse the image of the original web page within a predetermined range, it is possible to reduce stress on the user even when the linked page is read for a long time. .
レンダリング部は、リンク先ウェブページの読み込み中止をユーザが選択するためのキャンセルボタンを縮小ウインドウ内に表示してもよい。入力装置を介してキャンセルボタンが選択されたとき、ページ取得部に対してリンク先ウェブページの読み込みの中止を指示し、読み込み前のウェブページをウインドウ内にレンダリングするようレンダリング部に指示し、ウインドウを表示領域全体に拡大するようウインドウ表示部に指示するキャンセル処理部をさらに備えてもよい。これによると、誤ってリンクをタップしたときでも、キャンセルボタンを選択することで元のウェブページに直ちに戻ることができる。 The rendering unit may display a cancel button for allowing the user to cancel the reading of the linked web page in the reduced window. When the cancel button is selected via the input device, the page acquisition unit is instructed to stop reading the linked web page, and the rendering unit is instructed to render the web page before reading in the window. May be further provided with a cancel processing unit that instructs the window display unit to enlarge the entire display area. According to this, even if the link is tapped by mistake, the user can immediately return to the original web page by selecting the cancel button.
本発明の別の態様は、コンピュータを備えた情報処理端末に設けられたディスプレイにウェブページを表示させる情報表示プログラムである。このプログラムは、リンク先ウェブページの位置情報が関連付けられたリンクを含む表示中のウェブページにおいて、ユーザにより操作される入力装置を介してリンクが選択されたとき、該リンクに関連する位置情報に基づきリンク先ウェブページの読み込みを行うファイル取得手段と、ウェブページおよびリンク先ウェブページをメモリ上にレンダリングするレンダリング手段と、メモリ上にレンダリングされた画像を表示するディスプレイ内のウインドウのサイズを制御するウインドウ表示手段と、メモリ上にレンダリングされた画像のうち、リンク先ウェブページの読み込み開始前にウインドウ内に表示されていたウェブページの範囲と少なくとも同一の範囲を画像として取り込み、ディスプレイの表示領域に表示する画像取り込み手段と、入力装置を介してリンクが選択されたことを契機として、ウインドウ表示手段に対してディスプレイの表示領域よりもサイズを小さくした縮小ウインドウを表示するよう指示するとともに、読み込み中のリンク先ウェブページのレンダリングを縮小ウインドウ内で行うようレンダリング手段に指示する切り替え制御部と、リンク先ウェブページの読み込みおよびレンダリングが完了したとき、ウインドウをディスプレイの表示領域全体に拡大するようウインドウ表示手段に指示する完了処理手段と、をコンピュータに機能させる。 Another aspect of the present invention is an information display program for displaying a web page on a display provided in an information processing terminal including a computer. When a link is selected via an input device operated by a user on a displayed web page including a link associated with the position information of the linked web page, the program displays the position information related to the link. A file acquisition means for loading a linked web page based on the image data; a rendering means for rendering the web page and the linked web page on a memory; and a size of a window in a display for displaying the image rendered on the memory. Of the images rendered on the memory and the window display means, at least the same range as the range of the web page displayed in the window before the start of loading the linked web page is captured as an image, and is displayed in the display area of the display. Image importer to display When the link is selected via the input device, the window display unit is instructed to display a reduced window having a size smaller than the display area of the display, and the link destination web page being read A switching control unit that instructs the rendering unit to perform rendering in a reduced window, and completion of instructing the window display unit to expand the window to the entire display area when the linked web page is read and rendered And processing means for causing the computer to function.
なお、以上の構成要素の任意の組合せ、本発明の表現を方法、装置、システム、記録媒体、コンピュータプログラムなどの間で変換したものもまた、本発明の態様として有効である。 It should be noted that any combination of the above-described constituent elements and a conversion of the expression of the present invention between a method, an apparatus, a system, a recording medium, a computer program, etc. are also effective as an aspect of the present invention.
本発明によれば、情報処理端末において、リンク先のウェブページの取得に時間がかかる場合でも、元のウェブページの閲覧を継続することができる。 According to the present invention, the information processing terminal can continue browsing the original web page even when it takes time to acquire the linked web page.
以下では、まず携帯情報端末の一般的な説明を述べ、続いて本発明の一実施形態に係る機能についての詳細な説明を述べる。 In the following, a general description of the portable information terminal will be described first, followed by a detailed description of functions according to an embodiment of the present invention.
図１は、実施の形態に係る情報表示機能を備えた携帯情報端末１０を含むネットワークシステムの全体構成を示す。
FIG. 1 shows an overall configuration of a network system including a
携帯情報端末１０は、携帯電話またはスマートフォンなどの、ユーザと共に移動可能なハードウェアである。携帯情報端末１０は、ユーザの操作によってアクセスポイント１６または基地局１８などを介してＬＡＮ（Local Area Network）、インターネット等のネットワーク１４に接続され、ＵＲＬ（Uniform Resource Locator）で特定されるサーバ１２にアクセスし、所望のファイルを取得することが可能である。
The
サーバ１２は、ネットワーク１４を介して、携帯情報端末１０にテキストファイル、イメージファイル、音声ファイル、動画ファイルなどのファイルを提供する。このサーバは、例えばウェブサーバその他インターネット上のサービス主体でもよく、その場合、ＣＧＩ（Common Gateway Interface）のようにサーバ側に処理の主たる機能が残るもの、Ｊａｖａ（登録商標）アプレットのようにクライアント側に処理の主たる機能が移動するもの、サーバとクライアントの両方に処理の主たる機能であるＪａｖａ（登録商標）アプリケーションなどを配するものなど、いろいろな態様で実現できる。
The server 12 provides files such as a text file, an image file, an audio file, and a moving image file to the
また、携帯情報端末１０は、ネットワーク１４にアクセスしなくても、内部の記憶装置や記憶媒体に格納されているファイルをユーザ操作により参照、編集することができるように構成されている。
Further, the
携帯情報端末１０には、ディスプレイと重ねた状態でタッチパネル５０が配設される。携帯情報端末１０は、主にユーザの指またはスタイラスのような器具でタッチパネルを触れることで操作される。以下では、ユーザの指でタッチパネルを操作するものとして説明する。タッチパネルの他、スイッチや各種のキー５２等が携帯情報端末１０に備えられていてもよい。
The
タッチパネル５０は、ユーザの指やスタイラス等がパネルに触れると、接触位置の座標を出力するように構成された透明のパネルである。タッチパネル５０は、フィルム電極とガラス電極との接触点の電位を検知して接触位置を算出する抵抗膜方式、赤外線の発光素子と受光素子とでグリッドを作り指示オブジェクトで遮光された位置を出力する赤外線方式、表面弾性波の到達時間を検出して接触位置を出力する超音波表面弾性波方式の他、周知の方式、および今後開発される任意の方式を採用できる。
The
携帯情報端末１０には、周知のブラウザが搭載されている。ブラウザは、ＨＴＴＰプロトコルにしたがってサーバ１２からウェブページを取得し、ＨＴＭＬ等で記述された文書データを解析し、ウェブページを表示するためのレイアウト処理を行い、レイアウト処理されたウェブページをディスプレイに表示させる機能を有する。
The
図２は、携帯情報端末１０のハードウェア構成図である。携帯情報端末１０は、ＣＰＵ（Central Processing Unit）２０、メインメモリ（ＲＡＭ：Random Access Memory）２２、ＲＯＭ（Read Only Memory）２４、音声制御装置２６、不揮発性記憶装置３２、表示制御装置３４、入力装置３８、通信制御装置４０、外部記憶装置４２、およびＧＰＳ受信機４４を備える。これらは、バス４６を介して相互に接続される。
FIG. 2 is a hardware configuration diagram of the
ＣＰＵ２０は、オペレーティングシステムを動作させて携帯情報端末１０の全体を制御する。また、ＲＯＭ２４から、または外部記憶装置４２に装着された記録媒体からメインメモリ２２にプログラムやデータを読み出し、これにしたがって各種の処理を実行する。メインメモリ２２は、ＣＰＵ２０がプログラムの実行を行う際に必要となる一時記憶領域および作業領域、およびプログラムの実行に必要な各種のデータを格納する領域となる。ＲＯＭ２４は、ＣＰＵ２０が実行するコンピュータプログラムおよびデータを格納する読み出し専用の記憶装置である。
The
音声制御装置２６は、携帯電話を始めとする電話機能付きの携帯情報端末に設けられ、マイク２８およびスピーカ３０と接続されて、音声の入出力制御を行う。
The
不揮発性記憶装置３２は、電源オフ後も記憶内容を保持可能な記憶装置であり、ハードディスクドライブまたはフラッシュメモリ等の半導体メモリを含む。
The
表示制御装置３４は、ＣＰＵによって図示しないフレームバッファに描画されたデータを、携帯情報端末１０に備えられたディスプレイ３６で表示できるようにするためのビデオ信号を生成する。
The
入力装置３８は、ユーザが携帯情報端末１０に対して操作の指示を入力するための装置である。入力装置３８には、キー、トラックパッドなどのポインティングデバイス、各種ボタン、ディスプレイ３６の表面に配置されるタッチパネル５０など、携帯情報端末の種類に応じた任意のデバイスが含まれる。ＵＳＢ（Universal Serial Bus）端子等を介して携帯情報端末にマウスを接続して用いてもよい。
The
通信制御装置４０は、各種通信方式による音声およびデータの通信を制御する。データ通信方式は、ＩＥＥＥ８０２．１ａ／ｂ／ｇ／ｎなどの無線ＬＡＮ、赤外線通信、パケット通信によるデータ通信などの任意の方式を含む。なお、ケーブルを使用して携帯情報端末１０をネットワーク１４に接続してもよい。
The
外部記憶装置４２は、交換可能な記録媒体を使用するドライブ装置である。記録媒体には、磁気ディスク、光ディスク、光磁気ディスク、または半導体メモリなどが含まれる。
The
ＧＰＳ受信機４４は、人工衛星からの電波をもとに携帯情報端末の場所を測位する装置である。
The
上述の各構成要素はいずれも周知のものであるから、これ以上詳細な説明は省略する。 Since each of the above-described constituent elements is well known, further detailed description is omitted.
携帯情報端末に搭載される、オペレーティング・システム（ＯＳ）やブラウザ等を含むプラットフォームの中には、ブラウザのウインドウをアクティブな状態で一つしか表示できないものも存在する。このようなシングルウインドウのブラウザでは、背景技術で述べたようにウェブページの通信に時間がかかり、真っ白の画面または処理途中のページがブラウザウインドウに表示されると、通信が完了するまでの間、ユーザはコンテンツを閲覧できない状態になる。 Some platforms including an operating system (OS), a browser, and the like mounted on a portable information terminal can display only one browser window in an active state. In such a single window browser, as described in the background art, it takes time to communicate a web page, and when a pure white screen or a page being processed is displayed in the browser window, until the communication is completed, The user cannot view the content.
そこで、本実施形態では、ブラウザウインドウをアクティブな状態で一つしか表示できない携帯情報端末において、擬似的に二つのウインドウを表示しているように見せ、一方で通信中のウェブページのレンダリングを実行する間、他方でユーザがコンテンツの閲覧を継続できるようにする技術を提供する。 Therefore, in this embodiment, in a portable information terminal that can display only one browser window in an active state, it appears as if two windows are displayed in a pseudo manner, while rendering a web page during communication. Meanwhile, a technology is provided that allows the user to continue browsing the content on the other hand.
図３は、携帯情報端末１０のうち、本実施形態に係る情報表示機能に関与する部分の構成を示す。この構成は、ハードウェア的には、任意のコンピュータのＣＰＵ、メモリ、その他のＬＳＩで実現でき、ソフトウェア的には、ブラウザ、オペレーティングシステム、ＪａｖａＳｃｒｉｐｔ、ＡＰＩ（Application Programming Interface）などの協働により実現される。図３では、それらの組合せで実現されるもののうち、本実施形態に関与する部分のみを取り出して機能ブロックとして説明している。なお、図３に示されていない機能であっても、通常の携帯情報端末が備えている機能は当然に有しているものとする。
FIG. 3 shows a configuration of a part of the
また、これらの機能ブロックがハードウェアのみ、ソフトウェアのみ、またはそれらの組合せによっていろいろなかたちでも実現できることは、当業者には理解されるところである。 Further, those skilled in the art will understand that these functional blocks can be realized in various forms by hardware only, software only, or a combination thereof.
続いて、各機能ブロックの詳細を述べる。 Next, details of each functional block will be described.
ページ取得部７０は、ブラウザウインドウ内に表示中のウェブページにおけるハイパーリンクの選択に応じて、ネットワーク経由でウェブページファイルを受け取る。ウェブページファイルは、ＳＧＭＬ(Standard Generalized Markup Language)、ＨＴＭＬ(HyperText Markup Language)、ＸＭＬ(eXtensible Markup Language)などのマークアップ言語で記述されている。ウェブページファイルにＪａｖａＳｃｒｉｐｔなどのスクリプト言語が含まれていてもよい。
The
一般に、ウェブページ内のハイパーリンクは、<a>要素を起点にしてhref属性でリンク先の絶対ＵＲＬ、相対ＵＲＬ、絶対パスを指定することで表現されている。ハイパーリンクには、通常、インターネット上に存在する情報リソースの位置を指し示すＵＲＬが関連付けられている。なお、本明細書でいう「ＵＲＬ」には、サーバ名、ポート番号、フォルダ名、ファイル名などで構成される文字列や、ＩＰ（Internet Protocol）アドレスで指定するものを含む。 In general, a hyperlink in a web page is expressed by specifying an absolute URL, a relative URL, and an absolute path of a link destination with an href attribute starting from an <a> element. A hyperlink is usually associated with a URL that indicates the location of an information resource that exists on the Internet. Note that “URL” in this specification includes a character string composed of a server name, a port number, a folder name, a file name, and the like, and an IP (Internet Protocol) address.
ページ／履歴保持部７２は、ページ取得部７０で受け取られたウェブページファイルを記憶する。ウェブページの表示内容を規定するＣＳＳ（Cascading Style Sheet）等の外部スタイルシートやＥｃｍａＳｃｒｉｐｔ等の外部スクリプトが存在する場合は、それらも合わせて記憶する。また、ブラウザウインドウ内での閲覧履歴も保持する。
The page /
レンダリング部７４は、ページ／履歴保持部７２に格納されたハイパーリンクを含むウェブページファイルをメモリ上にレンダリングする。具体的には、レンダリング部７４は、ウェブページファイルの論理的な構造を解釈し、各タグで定められた表現形式、テーブル、フレーム、画像データ、フォーム部品、テキストの折り返し、表示画面のサイズといった情報を用いて、ブラウザウインドウ内に表示されるウェブページのレイアウト処理を行う。このようなウェブページの解釈はパーサとして、レイアウト処理はレンダリングエンジンとして当業者には周知であるため、詳細な説明は省略する。
The
ウインドウ表示部７６は、メモリ上にレンダリングされた画像をブラウザウインドウ内に表示するとともに、ウインドウのサイズを制御する。
The
ページ要求部７８は、タップ位置検出部８０で検出されたタッチパネル上でのタップ位置と、ウインドウに表示されているウェブページとのマッチングを行い、いずれのハイパーリンクが選択されたかを決定する。そして、選択されたハイパーリンクに関連付けられている位置情報にしたがって、リンク先のファイルを送信するように要求する。
The
画像取り込み部８６は、切り替え制御部８４からの指示にしたがって、メモリ上にレンダリングされた画像のうち、リンク先ウェブページの読み込み開始前にウインドウ内に表示されていたウェブページの範囲と少なくとも同一の範囲をコピーし（あるいは取り込み（キャプチャし））、ディスプレイの表示領域に背景画像として表示する。すなわち、取り込まれた画像は、後述するアクティブなブラウザウインドウである縮小ウインドウよりもさらに背面側に配置された別のウインドウ内に重畳させて表示される。
In accordance with an instruction from the switching
切り替え制御部８４は、ページ取得部７０によるリンク先ウェブページの読み込み開始から所定の時間が経過したとき、画像取り込み部８６に対して背景画像の取り込みを指示するとともに、ウインドウ表示部７６に対して、ディスプレイの表示領域よりもサイズを小さくした縮小ウインドウの表示を指示する。さらに、レンダリング部７４に対して、読み込み中のリンク先ウェブページのレンダリングを縮小ウインドウ内で行うよう指示する。
The switching
また、切り替え制御部８４は、リンク先ウェブページの読み込みおよびレンダリングが完了したとき、ウインドウをディスプレイの表示領域全体に拡大するようウインドウ表示部７６に指示する。このとき、切り替え制御部８４は、背景画像を破棄するようにしてもよい。画像を破棄するタイミングは特に限定されず、不要になったときに行う他、後でまとめて破棄してもよい。
In addition, the switching
キャンセル処理部８２は、縮小ウインドウ内に表示された後述するキャンセルボタンがタップされたとき、ページ取得部７０に対してリンク先ウェブページの読み込みの中止を指示する。また、読み込み前のウェブページをウインドウ内にレンダリングするようレンダリング部７４に指示するとともに、ウインドウを表示領域全体に拡大するようウインドウ表示部７６に指示する。
When a cancel button (described later) displayed in the reduced window is tapped, the cancel processing
図４〜図８を参照して、情報表示装置１００の作用について説明する。
The operation of the
図４は、携帯情報端末１０のディスプレイ１１０にウェブページ１１６が表示された様子を示す。この例では、ウェブページ１１６はポータルサイトのホームページであり、複数のハイパーリンクが含まれているものとする。
FIG. 4 shows a state where the
一般に、携帯情報端末のディスプレイには、通信状態、電池残量、時刻等を表示するためのステータスバー領域１１２や、ブラウザのタイトルバー１１４などがウェブページとともに表示される。以下の説明では、これらを除いたコンテンツ表示領域１２０内にウェブページが表示されるものとして説明する。
In general, a display of a portable information terminal displays a
図５は、ウェブページ１１６において、いずれかのハイパーリンクがタップされたときの様子を示す。図４の状態から、ウェブページ１１６内のハイパーリンクがクリックされると、ページ取得部７０によりリンク先ウェブページの読み込みが開始される。
FIG. 5 shows a state when any hyperlink is tapped on the
読み込み開始時間から所定の時間が経過すると、切り替え制御部８４は、擬似的な二画面表示に切り替えると判定する。そのため、画像取り込み部８６に対して、メモリ上にレンダリングされている表示中のウェブページの画像のうち、所定の範囲を取り込むように指示する。また、ウインドウ表示部７６に対し、ウインドウのサイズをコンテンツ表示領域１２０よりも小さくするように指示する。ウインドウ表示部７６は、例えば図５のようにコンテンツ表示領域１２０の右下隅に縮小ウインドウ１３０を表示する。
When a predetermined time has elapsed from the reading start time, the switching
そして、画像取り込み部８６は、取り込んだ表示中のウェブページの画像のうち、リンク先ウェブページの読み込み開始前にウインドウ内に表示されていた範囲と同じ範囲を、背景画像１１６’としてディスプレイ内に表示する。
Then, the
レンダリング部７４は、読み込み中のリンク先ウェブページのレンダリングを縮小ウインドウ１３０内で行う。また、縮小ウインドウ１３０内の一部、例えば左上隅に、リンク先ウェブページの読み込みを中止するためのキャンセルボタン１３２を表示する。キャンセルボタン１３２については後述する。
The
図６は、縮小ウインドウ内でリンク先ウェブページ１３４のレンダリングが進行している様子を示す。そして、リンク先ウェブページの読み込みとレンダリングが完了すると、切り替え制御部８４は、ウインドウ表示部７６に対して、ウインドウのサイズをコンテンツ表示領域１２０の全体に拡大するように指示する。この結果、図７に示すように、リンク先ウェブページ１３４がディスプレイ１１０内に表示される。このとき、切り替え制御部８４が上述のように背景画像とした元のウェブページの画像を破棄した場合、メモリの消費を抑えることができる。
FIG. 6 shows how the linked
以上のように、リンク先ウェブページのレンダリングを縮小ウインドウ内で行い、元のウェブページを背景画像として表示することで、リンク先ウェブページの読み込みの間もユーザは元のウェブページのコンテンツを閲覧し続けることができる。ウインドウを縮小して背景画像に重畳表示することで、ユーザにとっては、あたかも既存のウインドウで元のページを表示しつつ、別のウインドウが開いてその中でリンク先ページのレンダリングが行われているように見せることができる。そのため、ユーザは違和感なく元のウェブページを閲覧することができる。 As described above, rendering the linked web page in the reduced window and displaying the original web page as a background image allows the user to view the contents of the original web page while the linked web page is being loaded. Can continue. By reducing the window and overlaying it on the background image, for the user, the original page is displayed in the existing window, while another window opens and the linked page is rendered in it. Can look like Therefore, the user can browse the original web page without a sense of incongruity.
但し、上記のように背景画像として元のウェブページを表示し、ユーザにとっての見た目に変化がないようにすると、ユーザは背景画像内の、位置情報が埋め込まれていない単なる文字列としてのハイパーリンクをタップして、別のリンク先ページをさらに開こうとすることが考えられる。そこで、元のウェブページは背景画像に切り替えられたことを、テキストやアイコン等によってユーザに知らせるようにしてもよい。 However, if the original web page is displayed as a background image as described above so that the user's appearance does not change, the user will be able to display the hyperlink as a simple character string with no position information embedded in the background image. You might want to tap to open another landing page. Therefore, the user may be notified by text or icon that the original web page has been switched to the background image.
図８は、メモリ上のウェブページのレンダリング画像と、背景画像として取り込まれる範囲と、ディスプレイの表示領域の関係を説明する図である。 FIG. 8 is a diagram for explaining the relationship between the rendered image of the web page on the memory, the range captured as the background image, and the display area of the display.
リンク先ウェブページの読み込み開始前に表示されていた範囲のみを背景画像として設定すると、閲覧できるコンテンツの量は限られてしまい、リンク先ウェブページの読み込みが長期化した場合は不都合である。そこで、画像取り込み部８６は、図８に示すように、リンク先ウェブページの読み込み開始前にウインドウ内に表示されていたウェブページの範囲１４２よりも広い範囲１４４を含むように背景画像を作成することが好ましい。このとき、メモリ上のウェブページのレンダリング画像１４０の全体を取り込んでもよいが、ウェブページの構成によっては大量のメモリを消費してしまうため、元の範囲１４２よりも上下左右方向に所定の間隔を加えた範囲を取り込むことが好ましい。
Setting only the range displayed before the start of reading the linked web page as the background image limits the amount of content that can be viewed, which is inconvenient if the loading of the linked web page is prolonged. Therefore, as shown in FIG. 8, the
そして、ディスプレイ１１０において、背景画像をスクロール表示できるように構成すれば、縮小ウインドウ内でリンク先ウェブページのレンダリングを行いつつ、元のウェブページのスクロールしながらの閲覧が可能になる。
If the
背景画像は、ウェブページの見た目の変化を最小とし、処理を速くするため、ビットマップ画像とすることが好ましい。しかしながら、背景画像の情報量を抑制したい場合などは、ＪＰＥＧ等の圧縮画像としてもよい。 The background image is preferably a bitmap image in order to minimize changes in the appearance of the web page and speed up processing. However, when it is desired to suppress the amount of information of the background image, a compressed image such as JPEG may be used.
続いて、図５および図６に示したキャンセルボタンの作用について説明する。縮小ウインドウ内でのレンダリングの進行をみて、誤ったハイパーリンクをタップしたことや、興味のないウェブページであることが分かった場合、ユーザは縮小ウインドウ１３０内に表示されるキャンセルボタン１３２をタップする。このとき、キャンセル処理部８２は、ページ取得部７０に対してリンク先ウェブページの読み込みを中止するよう指示するとともに、レンダリング部７４に対して元のウェブページをウインドウ内にレンダリングするように指示する。したがって、迅速に元のウェブページに戻り、別のハイパーリンクをタップし直すことが可能になる。
Next, the operation of the cancel button shown in FIGS. 5 and 6 will be described. The user taps a cancel
二つ以上のブラウザウインドウを同時に表示できる携帯情報端末用プラットフォームにおいても、リンク先ウェブページを表示するために新たなウインドウを開いた場合、元のウインドウでの閲覧履歴やJavaScriptのコンテキスト情報を新たなウインドウに引き継ぐことはできないものが多い。この場合、新しいウインドウにおいて閲覧履歴を遡ることができず、ウェブページによっては振る舞いが変わってしまうという問題がある。具体的には、１．ブラウザの「戻る」ボタン、「進む」ボタンが機能しなくなる、２．JavaScriptのhistory.back()、history.forward()、history.go()が動作しなくなる、３．JavaScriptのwindow.openerの値が無効になる、といった問題が生じる。 Even on mobile information terminal platforms that can display two or more browser windows at the same time, when a new window is opened to display the linked web page, the browsing history and JavaScript context information in the original window are updated. Many things can't be transferred to windows. In this case, there is a problem that the browsing history cannot be traced in a new window, and the behavior changes depending on the web page. Specifically, 1. “Back” button and “Forward” button of browser are disabled. 2. JavaScript history.back (), history.forward (), history.go () will not work. There is a problem that the value of JavaScript window.opener becomes invalid.
これに対し、本実施形態では、リンク先ウェブページを表示するために新たなウインドウを生成するのではなく、既に開いているウインドウを縮小してその中でリンク先ウェブページを表示するので、閲覧履歴を維持することができる。そのため、リンク先ウェブページの読み込みをキャンセルをした場合でも、履歴が残っている限り速やかに元のウェブページに復帰することが可能となっている。 In contrast, in this embodiment, a new window is not generated to display the linked web page, but the already opened window is reduced and the linked web page is displayed therein. A history can be maintained. Therefore, even when the reading of the linked web page is cancelled, it is possible to quickly return to the original web page as long as the history remains.
図９は、本実施形態の情報表示装置によるウェブページの表示処理のフローチャートである。 FIG. 9 is a flowchart of web page display processing by the information display apparatus of this embodiment.
ユーザが表示中のウェブページ内のハイパーリンクをタップすると、ページ取得部７０がリンク先ウェブページの読み込みを開始する（Ｓ１０）。リンク先ウェブページの読み込み開始から所定時間以内に読み込みが完了した場合（Ｓ１２のＮ）、ウインドウのサイズを変えることなく、レンダリング部７４がリンク先ページをウインドウ内に表示する（Ｓ２４）。所定時間以内に読み込みが完了しない場合（Ｓ１２のＹ）、切り替え制御部８４が擬似的な二画面表示を行うことを決定する。これに応じて、画像取り込み部８６は、リンク先ウェブページの読み込み前に表示されているウェブページのコピーであるビットマップ画像を、メモリ上にレンダリングされている画像から作成し（Ｓ１４）、これを背景画像としてディスプレイに表示する（Ｓ１６）。同時に、ウインドウ表示部７６は縮小ウインドウを表示し、レンダリング部７４が縮小ウインドウ内でリンク先ウェブページのレンダリングを実行する（Ｓ１８）。
When the user taps a hyperlink in the displayed web page, the
リンク先ウェブページのレンダリング中にキャンセルボタンがタップされなければ（Ｓ２０のＮ）、リンク先ウェブページの読み込みおよびレンダリングの完了後、ウインドウ表示部７６がウインドウサイズを元に戻して、リンク先ウェブページを画面全体に表示する（Ｓ２２）。キャンセルボタンがタップされた場合（Ｓ２０のＹ）、キャンセル処理部８２はウインドウの閲覧履歴を参照し、履歴が更新されているか否かを判定する（Ｓ２６）。履歴が更新されていない場合（Ｓ２６のＮ）、リンク先ウェブページの読み込みを中止するようにページ取得部７０に指示する（Ｓ２８）。履歴が更新されている場合（Ｓ２６のＹ）、閲覧履歴を辿って元のウェブページの位置情報を取得し（Ｓ３０）、ページ要求部７８が元のウェブページを再度要求する。そして、ウインドウ表示部７６がウインドウを最大化し、レンダリング部７４が元のウェブページをウインドウ内に表示する（Ｓ３２）。
If the cancel button is not tapped during the rendering of the linked web page (N in S20), after the loading and rendering of the linked web page is completed, the
以上説明したように、本実施形態によれば、アクティブなブラウザウインドウを一つしか表示できない携帯情報端末において、リンク先のウェブページの読み込みに時間がかかる場合、リンク先ウェブページを縮小したウインドウで表示するとともに、リンク元のウェブページを取り込んだ画像を背景画像として表示するようにした。これにより、リンク先ウェブページの読み込みを待っている間でも、ユーザはリンク元ウェブページの閲覧を継続することができ、ユーザビリティが向上する。また、リンク先ウェブページの読み込みの進捗を、縮小ウインドウにより確認することができる。 As described above, according to the present embodiment, in a portable information terminal that can display only one active browser window, when it takes time to load a linked web page, a window in which the linked web page is reduced is used. In addition to the display, an image incorporating the link source web page is displayed as a background image. Thereby, even while waiting for the link destination web page to be read, the user can continue browsing the link source web page, and usability is improved. In addition, the progress of reading the linked web page can be confirmed by the reduced window.
リンク元ウェブページの画像を取り込む範囲を、元々ウインドウに表示されていた範囲よりも大きくすることで、所定の範囲内であればスクロールして閲覧することが可能になる。これにより、リンク先ページの読み込みが長期化した場合でも、ユーザに与えるストレスを軽減することができる。 By making the range in which the image of the link source web page is captured larger than the range originally displayed in the window, it is possible to scroll and browse within a predetermined range. Thereby, even when the reading of the linked page is prolonged, the stress applied to the user can be reduced.
また、縮小ウインドウ内にリンク先ウェブページの読み込みキャンセルボタンを表示するので、誤ってリンクをタップしたときに、リンク元のページに直ちに戻ることができる。 Also, since the cancel button for reading the linked web page is displayed in the reduced window, when the link is tapped by mistake, it is possible to immediately return to the link source page.
以上、本発明を実施の形態をもとに説明した。この実施の形態は例示であり、それらの各構成要素や各処理プロセスの組合せにいろいろな変形例が可能なこと、またそうした変形例も本発明の範囲にあることは当業者に理解されるところである。 The present invention has been described based on the embodiments. This embodiment is an exemplification, and it will be understood by those skilled in the art that various modifications can be made to combinations of the respective constituent elements and processing processes, and such modifications are also within the scope of the present invention. is there.
実施の形態では、リンク元のウェブページを取り込んだ画像を背景とし、リンク先ウェブページを縮小ウインドウとして重畳させて表示したが、この態様に限定されない。例えば、リンク元ウェブページの取り込み画像を表示したウインドウと、リンク先ウェブページとを、タイル状に横方向または縦方向に並べて表示してもよい。 In the embodiment, an image obtained by fetching a link source web page is used as a background, and a link destination web page is displayed as a reduced window in a superimposed manner. However, the present invention is not limited to this mode. For example, a window displaying a captured image of a link source web page and a link destination web page may be displayed side by side in a tile shape in the horizontal direction or the vertical direction.
実施の形態では、タッチパネルを入力装置として備えた携帯情報端末について説明したが、カーソルを移動してハイパーリンクを選択できる限り、マウス、トラックボール、十字キー、タッチパッドなどの任意のポインティングデバイスを備えた携帯情報端末にも本発明を適用することができる。 In the embodiment, the portable information terminal including the touch panel as the input device has been described. However, as long as the hyperlink can be selected by moving the cursor, an arbitrary pointing device such as a mouse, a trackball, a cross key, and a touch pad is provided. The present invention can also be applied to portable information terminals.
実施の形態では、本発明に係る情報表示機能を携帯電話やスマートフォンなどの携帯情報端末に実装することについて説明した。これらの端末以外でも、複数のウインドウを同時に表示することができない比較的小さなディスプレイを有する機器、例えばタブレットＰＣ、電子ブックリーダー、ウェアラブルデバイス、ＰＮＤ（Portable Navigation Device）等の情報処理端末にも本発明を適用することができる。 In the embodiment, it has been described that the information display function according to the present invention is implemented in a portable information terminal such as a mobile phone or a smartphone. In addition to these terminals, the present invention also applies to information processing terminals such as a tablet PC, an electronic book reader, a wearable device, and a PND (Portable Navigation Device) having a relatively small display that cannot simultaneously display a plurality of windows. Can be applied.
１０ 携帯情報端末、 ３６ ディスプレイ、 ３８ 入力装置、 ５０ タッチパネル、 ７０ ページ取得部、 ７２ ページ／履歴保持部、 ７４ レンダリング部、 ７６ ウインドウ表示部、 ７８ ページ要求部、 ８０ タップ位置検出部、 ８２ キャンセル処理部、 ８４ 切り替え制御部、 ８６ 画像取り込み部、 １００ 情報表示装置。 10 mobile information terminal, 36 display, 38 input device, 50 touch panel, 70 page acquisition unit, 72 page / history holding unit, 74 rendering unit, 76 window display unit, 78 page request unit, 80 tap position detection unit, 82 cancel processing Unit, 84 switching control unit, 86 image capturing unit, 100 information display device.
Claims (5)
リンク先ウェブページの位置情報が関連付けられたリンクを含む表示中のウェブページにおいて、ユーザにより操作される入力装置を介して前記リンクが選択されたとき、該リンクに関連する位置情報に基づき前記リンク先ウェブページの読み込みを行うページ取得部と、
前記ウェブページおよび前記リンク先ウェブページをメモリ上にレンダリングするレンダリング部と、
メモリ上にレンダリングされた画像を表示する前記ディスプレイ内のウインドウのサイズを制御するウインドウ表示部と、
メモリ上にレンダリングされた画像のうち、前記リンク先ウェブページの読み込み開始前に前記ウインドウ内に表示されていた前記ウェブページの範囲と少なくとも同一の範囲を画像として取り込み、前記ディスプレイの表示領域に表示する画像取り込み部と、
前記入力装置を介して前記リンクが選択されたことを契機として、前記ウインドウ表示部に対して前記ディスプレイの表示領域よりもサイズを小さくした縮小ウインドウを表示するよう指示するとともに、読み込み中の前記リンク先ウェブページのレンダリングを前記縮小ウインドウ内で行うよう前記レンダリング部に指示する切り替え制御部と、
を備え、
前記切り替え制御部は、前記リンク先ウェブページの読み込みおよびレンダリングが完了したとき、前記ウインドウを前記ディスプレイの表示領域全体に拡大するよう前記ウインドウ表示部に指示することを特徴とする情報表示装置。 An information display device for displaying a web page on a display provided in an information processing terminal,
When the link is selected via an input device operated by a user in a displayed web page including a link associated with the position information of the link destination web page, the link is based on the position information related to the link. A page acquisition unit that loads the destination web page,
A rendering unit for rendering the web page and the linked web page on a memory;
A window display for controlling the size of the window in the display for displaying the rendered image on the memory;
Of the images rendered on the memory, at least the same range as the range of the web page displayed in the window before the start of reading the linked web page is captured as an image and displayed in the display area of the display An image capture unit to
When the link is selected via the input device, the window display unit is instructed to display a reduced window having a size smaller than the display area of the display, and the link being read A switching control unit for instructing the rendering unit to render the destination web page within the reduced window;
With
The switching control unit instructs the window display unit to expand the window to the entire display area of the display when reading and rendering of the linked web page is completed.
前記入力装置を介して前記キャンセルボタンが選択されたとき、前記ページ取得部に対して前記リンク先ウェブページの読み込みの中止を指示し、読み込み前のウェブページを前記ウインドウ内にレンダリングするよう前記レンダリング部に指示し、前記ウインドウを表示領域全体に拡大するよう前記ウインドウ表示部に指示するキャンセル処理部をさらに備えることを特徴とする請求項１ないし３のいずれかに記載の情報表示装置。 The rendering unit displays a cancel button in the reduced window for the user to select to stop loading the linked web page,
When the cancel button is selected via the input device, the page acquisition unit is instructed to stop reading the linked web page, and the rendering is performed so that the web page before reading is rendered in the window. The information display device according to claim 1, further comprising a cancel processing unit that instructs the display unit to instruct the window display unit to expand the window to the entire display area.
リンク先ウェブページの位置情報が関連付けられたリンクを含む表示中のウェブページにおいて、ユーザにより操作される入力装置を介して前記リンクが選択されたとき、該リンクに関連する位置情報に基づき前記リンク先ウェブページの読み込みを行うファイル取得手段と、
前記ウェブページおよび前記リンク先ウェブページをメモリ上にレンダリングするレンダリング手段と、
メモリ上にレンダリングされた画像を表示する前記ディスプレイ内のウインドウのサイズを制御するウインドウ表示手段と、
メモリ上にレンダリングされた画像のうち、前記リンク先ウェブページの読み込み開始前に前記ウインドウ内に表示されていた前記ウェブページの範囲と少なくとも同一の範囲を画像として取り込み、前記ディスプレイの表示領域に表示する画像取り込み手段と、
前記入力装置を介して前記リンクが選択されたことを契機として、前記ウインドウ表示手段に対して前記ディスプレイの表示領域よりもサイズを小さくした縮小ウインドウを表示するよう指示するとともに、読み込み中の前記リンク先ウェブページのレンダリングを前記縮小ウインドウ内で行うよう前記レンダリング手段に指示する切り替え制御部と、
前記リンク先ウェブページの読み込みおよびレンダリングが完了したとき、前記ウインドウを前記ディスプレイの表示領域全体に拡大するよう前記ウインドウ表示手段に指示する完了処理手段と、
をコンピュータに機能させるための情報表示プログラム。 A program for displaying a web page on a display provided in an information processing terminal equipped with a computer,
When the link is selected via an input device operated by a user in a displayed web page including a link associated with the position information of the link destination web page, the link is based on the position information related to the link. A file acquisition means for loading the destination web page;
Rendering means for rendering the web page and the linked web page on a memory;
Window display means for controlling the size of the window in the display for displaying the rendered image on the memory;
Of the images rendered on the memory, at least the same range as the range of the web page displayed in the window before the start of reading the linked web page is captured as an image and displayed in the display area of the display Image capturing means to
When the link is selected via the input device, the window display means is instructed to display a reduced window having a size smaller than the display area of the display, and the link being read A switching control unit for instructing the rendering means to render the destination web page within the reduced window;
Completion processing means for instructing the window display means to expand the window to the entire display area of the display when reading and rendering of the linked web page is completed;
Information display program to make the computer function.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| JP2010221413A JP2012078925A (en) | 2010-09-30 | 2010-09-30 | Information display device and information display program |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| JP2010221413A JP2012078925A (en) | 2010-09-30 | 2010-09-30 | Information display device and information display program |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| JP2012078925A true JP2012078925A (en) | 2012-04-19 |
Family
ID=46239139
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| JP2010221413A Pending JP2012078925A (en) | 2010-09-30 | 2010-09-30 | Information display device and information display program |
Country Status (1)
| Country | Link |
|---|---|
| JP (1) | JP2012078925A (en) |
Cited By (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| JP2015022382A (en) * | 2013-07-16 | 2015-02-02 | アルパイン株式会社 | Web page display device and method |
| JP2016103175A (en) * | 2014-11-28 | 2016-06-02 | 株式会社バッファロー | Information processing apparatus, information processing system, display control method in information processing apparatus, and program |
| JP2016534446A (en) * | 2013-08-15 | 2016-11-04 | ノキア テクノロジーズ オサケユイチア | Apparatus and method for facilitating browser navigation. |
| WO2021068713A1 (en) * | 2019-10-11 | 2021-04-15 | 华为技术有限公司 | Page display method and wearable device |
-
2010
- 2010-09-30 JP JP2010221413A patent/JP2012078925A/en active Pending
Cited By (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| JP2015022382A (en) * | 2013-07-16 | 2015-02-02 | アルパイン株式会社 | Web page display device and method |
| JP2016534446A (en) * | 2013-08-15 | 2016-11-04 | ノキア テクノロジーズ オサケユイチア | Apparatus and method for facilitating browser navigation. |
| US10895962B2 (en) | 2013-08-15 | 2021-01-19 | Nokia Technologies Oy | Apparatus and method for facilitating browser navigation |
| JP2016103175A (en) * | 2014-11-28 | 2016-06-02 | 株式会社バッファロー | Information processing apparatus, information processing system, display control method in information processing apparatus, and program |
| WO2021068713A1 (en) * | 2019-10-11 | 2021-04-15 | 华为技术有限公司 | Page display method and wearable device |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US10506077B2 (en) | Image-based and predictive browsing | |
| JP6241766B2 (en) | Mobile terminal and device linkage method | |
| JP5184528B2 (en) | Portable information terminal | |
| RU2616536C2 (en) | Method, device and terminal device to display messages | |
| US9575944B2 (en) | Directional navigation of page content | |
| US8452783B2 (en) | Document processing device and program | |
| JP5326279B2 (en) | Portable terminal device, URL management method used therefor, and program thereof | |
| JP5222717B2 (en) | Display window selection method, display window selection program, and terminal device | |
| JP5017687B2 (en) | Client device and program | |
| JP2012078925A (en) | Information display device and information display program | |
| CA2778406C (en) | Directional navigation of page content | |
| JP5772551B2 (en) | Information processing apparatus, processing method thereof, and program | |
| US10303346B2 (en) | Information processing apparatus, non-transitory computer readable storage medium, and information display method | |
| JP2012084948A (en) | Portable terminal device, information selection support program, and information selection support method | |
| JP2009048333A (en) | Web page browsing device and web page browsing server | |
| US20140379688A1 (en) | Methods Performed by Electronic Devices that Facilitate Navigating a Webpage | |
| JP5696073B2 (en) | Image processing apparatus and image processing program | |
| US20100251087A1 (en) | Information browse apparatus | |
| CA2731567C (en) | Image-based and predictive browsing | |
| JP2018116411A (en) | Display control system, display control method, display device, program and information processing device | |
| JP6034255B2 (en) | Communication terminal | |
| JP2012181693A (en) | Web page display control device and scroll control method | |
| JP2015195045A (en) | Information processor, processing method and program for the same | |
| JP2014067284A (en) | Portable terminal device | |
| JP2012079122A (en) | Information display device and information display program |