以下、図面を参照しながら、本発明のいくつかの実施形態について詳細に説明する。なお、複数の図面において対応する要素には同一の符号を付す。
上述のように、例えば、コンテンツの表示のための全てのデータの読み込みが完了する前に、ユーザが既に表示されている項目を選択する指示を情報処理装置に入力することがしばしば起きている。しかしながら、例えば、ユーザが指示を入力する寸前に、新たに読み込まれたデータによって、コンテンツの表示のレイアウトが変更されてしまうことがある。なお、コンテンツとは、例えば、ウェブ上で提供及び配信されている情報であってよく、文書、及びマルチメディアなどを含んでいてよい。コンテンツは、例えば、ウェブページであってよい。
図1は、ブラウザがコンテンツを表示画面にレンダリングする際のレンダリング処理の動作フローを例示する図である。例えば、情報処理装置の表示画面において、ユーザがブラウザに表示されているリンクを選択するなどして、コンテンツの表示指示を入力すると、図1のレンダリング処理は開始してよい。
ステップ101(以降、ステップを“S”と記載し、例えば、S101と表記する)において情報処理装置の制御部は、例えば、選択されたリンク先のURLからHTMLファイルをダウンロードして読み込み、HTMLをパース(解析)する。なお、URLとは、Uniform Resource Locatorの略称である。また、HTMLとは、HyperText Markup Languageの略称である。そして、以降の処理において、情報処理装置の制御部は、HTMLに記述される順番に従って、他のコンテンツのダウンロードやスクリプトの実行を行う。例えば、情報処理装置の制御部は、S102においてCSS(Cascading Style Sheets、カスケーディング・スタイル・シート)をパースする。情報処理装置の制御部は、例えば、HTMLファイル内にCSSファイルの保存場所を示すURLが記述されている場合には、CSSファイルの保存場所を示すURLからCSSファイルをダウンロードして読み込み、パースしてよい。或いは、HTMLファイル内にCSSが記述されている場合には、情報処理装置の制御部は、HTMLファイル内のCSSをパースしてよい。S103において情報処理装置の制御部は、パースしたHTMLとCSSに基づいて、コンテンツのレイアウトを決定し、決定したレイアウトでコンテンツを表示するための表示情報を出力する。制御部は、例えば、情報処理装置に備えられたディスプレーなどの表示装置に表示情報を出力してよい。表示装置は、表示情報が入力されると、S103で決定されたレイアウトでコンテンツを表示してよい。
また、例えば、HTMLファイル内に画像ファイルの保存場所を示すURLが記述されている場合には、情報処理装置の制御部はS104の処理を実行してよい。情報処理装置の制御部は、S104において画像ファイルの保存場所を示すURLから画像ファイルをダウンロードする。なお、HTMLファイル内に画像ファイルの保存場所を示すURLが複数記述されている場合には、情報処理装置の制御部は、複数のURLのそれぞれから画像ファイルのダウンロードを実行してよい。そして、S105において情報処理装置の制御部は、S103で決定したレイアウトに従ってブラウザ上に表示されているコンテンツに、ダウンロードが完了した画像ファイルを配置するための配置情報を出力する。制御部は、例えば、情報処理装置に備えられたディスプレーなどの表示装置に配置情報を出力してよい。表示装置は、配置情報が入力されると、S103で決定されたレイアウト上の対応する箇所に画像を配置し、表示してよい。また、情報処理装置の制御部が複数の画像ファイルのダウンロードを実行する場合には、S105において情報処理装置の制御部は、例えば、ダウンロードが完了した画像から順に、画像をコンテンツ上に配置するための配置情報を出力してよい。
また更に、例えば、HTMLファイルにJavaScript(登録商標)(ジャバスクリプト)が記述されている場合に、情報処理装置の制御部はS106の処理を実行してよい。S106において情報処理装置の制御部は、例えばHTMLファイルに記述されたJavaScriptを実行し、その実行結果をコンテンツ上に表示するための結果情報を出力してよい。制御部は、例えば、情報処理装置に備えられたディスプレーなどの表示装置に結果情報を出力してよい。表示装置は、結果情報が入力されると、S103で決定されたレイアウト上の対応する箇所にJavaScriptの実行結果を表示してよい。例えば、以上のようにして、情報処理装置の制御部が、HTMLに記述される順番に従ってコンテンツのダウンロードやスクリプトの実行を完了すると、コンテンツの表示は完了し、本動作フローは終了する。
図1のコンテンツのレンダリング処理により、情報処理装置の制御部は、コンテンツを例えば表示装置の表示画面に表示することができる。しかしながら、図1のレンダリング処理では、情報処理装置の制御部は、S104における画像のダウンロードを行う前に、S103において表示のレイアウトを決定している。また、例えばHTMLにおいて画像の指定に用いられる<img>タグにおいて、表示サイズの指定(例えばwidth及びheightなどのサイズ属性による指定)が省略されることがある。この場合、情報処理装置の制御部は、S103では正確な画像の表示サイズを反映していない仮のレイアウトを決定する。そして、情報処理装置の制御部は、S104で画像のダウンロードを完了して読み込みを行った時点で、ダウンロードされた画像の幅及び高さを取得し、取得した画像サイズで画像がブラウザ上に表示されるようにレイアウトを変更する。そのため、画像のダウンロードが完了してコンテンツへと配置する度に、コンテンツのレイアウトは変更されてしまう。
そして、例えば、画像ファイルのダウンロードの完了が遅延する場合、ユーザがコンテンツ上で項目を選択するなどの指示を入力する寸前に、画像がコンテンツに配置されレイアウトが変更されてしまうことがある。その結果、例えば、コンテンツ内のユーザが選択しようとしていた項目の位置へとレイアウトの変更により移動してきた別の項目をユーザが選択してしまうなどのユーザの誤操作を招いている。なお、画像ファイルのダウンロードの完了の遅延は、例えば、弱電界などによる通信速度の低下、サーバからのレスポンスの遅れ、及び画像ファイルのデータ量が大きいことなどによって引き起こされる。
図2及び図3は、以上で述べた、ユーザの誤操作を招く原因となり得るコンテンツのレイアウトの更新タイミングと、ユーザの操作が入力されるタイミングとの関係を例示する図である。なお、図2及び図3は、HTMLファイルの<img>タグにおいて表示サイズの指定(例えばwidth及びheightによるサイズ属性の指定)が省略されている場合の例とする。そのため、例えば、画像のダウンロードが完了し、情報処理装置の制御部が、ダウンロードされた画像をコンテンツへと配置すると、コンテンツのレイアウトは変更される。また、図2は、HTTP(Hypertext Transfer Protocol)のセッションにより、情報処理装置が画像データをサーバからダウンロードする場合を例示している。
情報処理装置の制御部は、図1の例で述べたように、HTMLファイルのパースと、CSSのパースを行い、パースしたHTMLとCSSに基づいて、コンテンツのレイアウトを決定する(図2の(1))。その後、例えば、HTMLファイル内に<img>タグが存在する場合、<img>タグに記述されたURLから画像をダウンロードするために、情報処理装置の制御部はURLに示されるサーバにHTTPリクエストを送信する(図2の(2))。サーバは、例えば、クライアントである情報処理装置から画像ファイルを要求するHTTPリクエストを受信すると、要求された画像ファイルのデータを含むHTTPレスポンスを情報処理装置へと送信する(図2の(3))。情報処理装置の制御部は、サーバからHTTPレスポンスを受信し、画像ファイルのダウンロードを完了すると(図2の(4))、画像をレイアウト上に配置し、画像の画像サイズに応じてコンテンツのレイアウトを変更してブラウザに表示する(図2の(5))。ここで、例えば、HTMLファイルにおいて指定されている画像ファイルのうちのいずれかにおいてダウンロードの完了が遅延することがある(図2の(6))。また、いずれかの画像ファイルのダウンロードの完了が遅延する場合に、例えば、ユーザが図2の(5)のレイアウトの変更後に表示されたレイアウトでコンテンツを閲覧し、コンテンツ上のリンクなどの項目を選択しようとすることがある。そして、ユーザが項目を選択する指示を情報処理装置に入力するタイミング(図2の(9))の直前で、遅延していた画像のダウンロードが完了し(図2の(7))、コンテンツのレイアウトが変更されてしまうことがある(図2の(8))。この場合、図2の(5)のレイアウトの変更後のレイアウトと、図2の(8)のレイアウトの変更後のレイアウトは異なるため、ウェブブラウザ上でユーザが選択しようとしていた項目が、レイアウトの変更により別の位置に移動してしまうことがある。その結果、ユーザが意図しない操作を情報処理装置に入力してしまう状況を招くことがある。また更に、HTTPでは、或るリクエストに対するレスポンスの受信に遅延が発生すると、後続のレスポンスの受信も遅延してしまうという問題がある。そのため、例えば、図2の(9)のユーザが操作を入力するタイミングで、遅延していた後続の画像が次々に受信され、その度にレイアウトが変更されてしまい、ユーザが情報処理装置に指示を入力することがままならない状況が生じ得る。
また、図3は、SPDY(スピーディ)のセッションにより、情報処理装置が画像データをサーバからダウンロードする場合を例示している。情報処理装置の制御部は、HTMLファイルのパースと、CSSのパースを行い、パースしたHTMLとCSSに基づいて、コンテンツのレイアウトを決定する(図3の(1))。その後、例えば、HTMLファイル内に<img>タグが存在する場合、<img>タグに記述されたURLから画像をダウンロードするために、情報処理装置の制御部はURLに示されるサーバにSPDYリクエストを送信する(図3の(2))。サーバは、クライアントである情報処理装置から画像ファイルを要求するSPDYリクエストを受信すると、例えば、SPDYリクエストに対する応答としてリプライを情報処理装置へと送信する(図3の(3))。リプライは、例えば、HTTPレスポンスのヘッダ情報を含むコントロールフレーム、及び要求された画像ファイルのデータを含むデータフレームを含んでいてよい。情報処理装置の制御部は、サーバからのリプライを受信し、画像ファイルのダウンロードを完了すると(図3の(4))、画像ファイルの画像サイズに応じて、コンテンツのレイアウトを変更し、ブラウザに表示する(図3の(5))。ここで、例えば、HTMLファイルにおいて指定されている画像ファイルのうちのいずれかにおいてダウンロードの完了が遅延することがある(図3の(6))。そして、いずれかの画像ファイルのダウンロードの完了が遅延する場合に、例えば、ユーザが図3の(5)で変更されたレイアウトでコンテンツを閲覧し、コンテンツ上のリンクなどの項目を選択しようとすることがある。そして、ユーザが項目を選択する操作を情報処理装置に入力するタイミング(図3の(9))の直前で、遅延していた画像のダウンロードが完了し(図3の(7))、コンテンツのレイアウトが変更されてしまうことがある(図3の(8))。この場合、図3の(5)で変更されたレイアウトと、図3の(8)で変更されたレイアウトとは異なるため、ウェブブラウザ上でユーザが選択しようとしていた項目が、レイアウトの変更により別の位置に移動してしまうことがある。その結果、図2で述べたHTTPの場合と同様に、SPDYを用いる場合においてもユーザが意図しない操作を情報処理装置に入力してしまう状況を招くことがある。また更に、SPDYでは、例えば、1つのストリームで転送されるデータの中にデータサイズの大きな画像が含まれている場合、その大きな画像の受信が遅延すると、ストリーム内に束ねられたその他のデータの取得も遅れてしまうことがある。そのため、例えば、図3の(9)のユーザが操作を入力するタイミングで、遅延していた後続の画像が次々に受信され、その度にレイアウトが変更されてしまい、ユーザが情報処理装置に指示を入力することがままならない状況が生じ得る。従って、この様なユーザの誤操作を抑制することが可能な技術が望まれている。
なお、以上で述べたユーザの誤操作を抑制することに関し、例えば、プログレッシブJPEG、及びインターレースGIFなどを利用し、ダウンロード中の画像を読み込まれた部分から徐々に表示することで、レイアウトへの画像の配置を早めることが考えられる。なお、JPEGとは、Joint Photographic Experts Groupの略称である。GIFとは、Graphics Interchange Formatの略称である。しかしながら、プログレッシブJPEG、及びインターレースGIFなどを用いても、例えば、弱電界などに起因して通信速度が遅くなっている場合には、レイアウトへの画像の配置が遅れてしまう。また、例えば、プログレッシブJPEG、及びインターレースGIFなどを用いる場合、画像ファイルそのものに加工が必要であり、コンテンツの作成者が画像ファイルを加工していないと、これらの技術を利用することは難しい。また、これらの技術を利用した場合に、画像ファイルのファイルサイズが大きくなってしまうこともある。従って、ユーザの誤操作を抑制することのできる更なる技術が望まれている。
そこで、いくつかの実施形態に係る情報処理装置の制御部は、コンテンツのブラウザ上への表示に先だって、コンテンツの一部を構成する画像のサイズ情報を要求する。そして、情報処理装置の制御部は、要求の応答として得られたサイズ情報から取得した画像サイズに基づいてコンテンツのレイアウトを決定する。そのため、その後に画像を配置してもレイアウトが維持され、ユーザの誤操作を抑制することができる。なお、サイズ情報は、例えば、画像ファイルのヘッダ情報であってよい。以下、図4から図10を参照して、実施形態を説明する。
<実施形態>
図4は、実施形態に係るネットワーク構成100を例示する図である。ネットワーク構成100は、例えば、情報処理装置1及びサーバ2を含んでいてよく、情報処理装置1及びサーバ2は、例えばネットワーク5を介して接続されていてよい。情報処理装置1は、例えば、携帯電話機、スマートフォン、タブレット端末、パーソナルコンピュータ(PC)、及びノートPCなどのウェブコンテンツを閲覧する機能を備えた装置であってよい。また、サーバ2は、例えば、クライアントとなる装置からのリクエストに応じて、ウェブコンテンツを提供するサーバコンピュータであってよい。例えば、情報処理装置1が、或るURLのウェブコンテンツを要求するリクエストを、URLに対応するサーバ2に送信した場合に、サーバ2は、要求されたコンテンツを含むレスポンスを情報処理装置1へと送信してよい。
図5は、実施形態に係る情報処理装置1の機能ブロック構成を例示する図である。情報処理装置1は、例えば、制御部500及び記憶部510を含んでいる。制御部500は、例えば要求出力部511、決定部512、及び表示情報出力部513などの機能部を含んでいる。情報処理装置1の記憶部510は、例えば、プログラム520、並びに後述する画像サイズ位置情報600などの情報を記憶している。情報処理装置1の制御部500は、プログラム520を読み出して実行することで例えば要求出力部511、決定部512、及び表示情報出力部513などの機能部として機能する。これらの各機能部の詳細及び記憶部510に格納されている情報の詳細については後述する。
図6は、実施形態に係る画像サイズ位置情報600を例示する図である。画像サイズ位置情報600は、例えば、フォーマット601、データ位置602、及びデータサイズ603を含み、これらは画像サイズ位置情報600において対応付けられている。フォーマット601は、例えば、画像データの種類を示す情報であり、JPEG、PNG、及びGIFなどであってよい。PNGとは、Portable Network Graphicsの略称である。データ位置602は、例えば、フォーマット601に示されるデータフォーマットの画像ファイルにおいて、画像サイズの情報が格納されている領域の先頭位置を示す情報であってよい。また、データサイズ603は、例えば、フォーマット601に示されるデータフォーマットの画像ファイルにおいてデータ位置602から何バイトの領域に画像サイズの情報が格納されているかを示す情報であってよい。例えば、図5のフォーマット601:JPEGの例では、JPEGファイルの11バイト目から2バイトに画像データの横方向の画像サイズが格納されており、更にそこから2バイトに縦方向の画像サイズが格納されていることを示している。従って、情報処理装置1の制御部500は、画像サイズ位置情報600を参照することで、画像ファイルのフォーマットに対応する画像サイズの格納位置を特定することができる。
図7は、実施形態に係るブラウザがコンテンツを表示画面にレンダリングする際のコンテンツのレンダリング処理の動作フローを例示する図である。例えば、情報処理装置1の表示画面において、ユーザがブラウザに表示されているリンクなどの項目を選択するなどして、コンテンツの表示指示を入力すると図7のレンダリング処理は開始してよい。なお、S701及びS702は、図1のS101及びS102と対応していてよく、例えば、S701及びS702において、情報処理装置1の制御部500は、S101及びS102と同様の処理を実行してよい。
続いて、S703において情報処理装置1の制御部500は、HTMLファイル内に<img>タグがあるか否かを判定する。HTMLファイル内に<img>タグが無い場合(S703がNO)、フローはS708へと進む。一方、HTMLファイル内に<img>タグがある場合(S703がYES)、フローはS704へと進む。S704において情報処理装置1の制御部500は、<img>タグにおいて画像の表示サイズが指定されているか否かを判定する。<img>タグにおいて画像の表示サイズの指定がされている場合(S704がYES)、フローはS706へと進む。この場合、S706において情報処理装置1の制御部500は、<img>タグにおいて指定されている表示サイズを、画像の表示サイズとして特定する。一方、S704で<img>タグにおいて画像の表示サイズの指定がされていない場合(S704がNO)、フローはS705へと進む。S705において情報処理装置1の制御部500は、画像サイズ取得処理を実行する。画像サイズ取得処理では、情報処理装置1の制御部500は、例えば、画像の画像ファイルのヘッダ情報を要求するリクエストを出力し、<img>タグで指定されたURLに示されるサーバ2に送信する。そして、情報処理装置1の制御部500は、送信したリクエストに対する応答として画像ファイルのヘッダ情報を受信し、取得したヘッダ情報から画像サイズを取得する。
なお、S705の画像サイズ取得処理は、例えば、HTTPプロトコルのGETコマンドなどの既存のコマンドを利用して実行されてよい。図8は、HTTPプロトコルのGETコマンドを用いて画像のヘッダ情報を要求する場合の画像サイズ取得処理の動作フローを例示する図である。図8の画像サイズ取得処理の動作フローは、一実施形態においては、図7のS705に進むと開始してよい。
S801において情報処理装置1の制御部500は、例えば、HTTPプロトコルのGETコマンドを用いて、<img>タグに記述されたURLに保存されている画像ファイルを要求するHTTPリクエストを送信する。サーバ2は、HTTPリクエストを受信すると、要求された画像のデータを含むHTTPレスポンスを情報処理装置1へと送信する。S802において情報処理装置1の制御部500は、サーバ2からのHTTPレスポンスを受信し、画像データのダウンロードを開始する。S803において情報処理装置1の制御部500は、画像データのヘッダ分のデータの受信が完了したか否かを判定する。
なお、S803の判定は、例えば、以下のように実行されてよい。例えば、JPEG、PNG、及びGIFなどの既知の画像ファイルのファイルフォーマットのヘッダ領域のデータサイズから、それら全てのファイルフォーマットにおいてヘッダ領域のデータの取得を完了するのに十分なデータサイズを見積もることができる。そのため、見積もられたデータサイズを閾値として用いて、閾値以上のデータのダウンロードが完了した場合に、情報処理装置1の制御部500は、画像データのヘッダ分のデータの受信が完了したと判定してよい。また、画像データのヘッダ分のデータの受信が完了した場合、情報処理装置1の制御部500は、例えば、ヘッダ分のデータに後続してサーバ2から受信される残りのデータについては、破棄してもよい。
S803で画像データのヘッダ分のデータの受信が完了していない場合(S803がNO)、フローはS803の処理を繰り返す。一方、画像データのヘッダ分のデータの受信が完了している場合(S803がYES)、フローはS804へと進む。S804において情報処理装置1の制御部500は、受信したヘッダ分のデータサイズを有するHTTPレスポンスのヘッダ領域を参照し、画像ファイルのファイルフォーマットを特定する。例えば、制御部500は、HTTPレスポンスのContent-Typeのヘッダから画像ファイルのファイルフォーマットを特定してよい。S805において情報処理装置1の制御部500は、特定されたファイルフォーマットにおいて画像サイズが格納されている領域を特定し、特定された領域を参照することで画像サイズを取得する。例えば、制御部500は、S804で特定されたファイルフォーマットに対応するデータ位置602と、データサイズ603とを画像サイズ位置情報600から特定する。そして、制御部500は、HTTPレスポンスのボディ領域に含まれる画像ファイルのヘッダ情報において、特定されたデータ位置602及びデータサイズ603の領域に格納されているデータから画像サイズを特定してよい。S805において、情報処理装置1の制御部500が画像サイズを特定すると、本動作フローは終了し、フローは図7のS706へと進む。
S706において情報処理装置1の制御部500は、取得した画像サイズをブラウザ上での画像の表示サイズとして特定する。S707において情報処理装置1の制御部500は、HTMLファイル内に他にS704の判定を行っていない未処理の<img>タグがあるか否かを判定する。未処理の<img>タグがある場合(S707がYES)、処理はS704へと戻り、情報処理装置1の制御部500は、未処理の<img>タグに対してS704以降の処理を繰り返す。一方、S707において未処理の<img>タグが無い場合(S707がNO)、フローはS708へと進む。
S708において情報処理装置1の制御部500は、レイアウトを決定し、決定したレイアウトでコンテンツを表示するための表示情報を出力する。制御部500は、例えば、情報処理装置1に備えられたディスプレーなどの表示装置に表示情報を出力してよい。また、表示装置は、表示情報が入力されると、S708で決定されたレイアウトでコンテンツを表示してよい。なお、S708において情報処理装置1の制御部500は、例えば、HTMLファイル内に<img>タグが含まれている場合には、<img>タグに対応する画像の画像サイズに基づいてコンテンツのレイアウトを決定する。例えば、情報処理装置1の制御部500は、S705の処理でサーバ2から取得した画像サイズで画像がブラウザ上に表示されるように、コンテンツのレイアウトを決定してよい。
続いて、情報処理装置1の制御部500は、例えば、HTMLファイル内に<img>タグが含まれている場合に、S709において画像ファイルの保存場所を示すURLから画像ファイルをダウンロードしてよい。HTMLファイル内に複数の<img>タグが含まれている場合には、情報処理装置1の制御部500は、複数のURLのそれぞれから画像ファイルのダウンロードを実行してよい。そして、S710において情報処理装置1の制御部500は、S708で決定されたレイアウトに従ってブラウザ上に表示されているコンテンツに、ダウンロードが完了した画像を配置するための配置情報を出力する。制御部500は、例えば、情報処理装置1に備えられたディスプレーなどの表示装置に配置情報を出力してよい。また、表示装置は、配置情報が入力されると、S708で決定されたレイアウト上の対応する箇所に画像を配置し、表示してよい。また、情報処理装置1の制御部500が複数の画像ファイルのダウンロードを実行する場合には、S710において情報処理装置1の制御部500は、例えば、ダウンロードが完了した画像から順に、画像をコンテンツ上に配置するための配置情報を出力してよい。
なお、S708で決定されたレイアウトは、上述のS705〜S708の説明で述べたように、<img>タグにおいて画像の表示サイズの指定が無い場合は、画像サイズに基づいて決定されている。従って、S710において情報処理装置1の制御部500が配置情報を出力し、表示装置が配置情報に従って画像を表示する場合に、レイアウトの変更は生じない。
また更に、例えば、HTMLファイルにJavaScriptが記述されている場合、情報処理装置1の制御部500はS711の処理を実行してよい。S711において情報処理装置1の制御部500は、例えばHTMLファイルに記述されたJavaScriptを実行し、その実行結果をコンテンツ上に表示するための結果情報を出力してよい。制御部500は、例えば、情報処理装置1に備えられたディスプレーなどの表示装置に結果情報を出力してよい。また、表示装置は、結果情報が入力されると、S708で決定されたレイアウト上の対応する箇所にJavaScriptの実行結果を表示してよい。例えば、以上のようにして、情報処理装置1の制御部500がHTMLに記述される順番に従ってコンテンツのダウンロードやスクリプトの実行を完了すると、コンテンツの表示は完了し、本動作フローは終了する。
なお、以上の図7の動作フローにおいて、S701からS704、S709の処理では、情報処理装置1の制御部500は、例えば、要求出力部511として機能してよい。また、S705の処理では、情報処理装置1の制御部500は、例えば、要求出力部511及び決定部512として機能してよい。S706及びS707の処理では、情報処理装置1の制御部500は、例えば、決定部512として機能してよい。S708の処理では、情報処理装置1の制御部500は、例えば、決定部512及び表示情報出力部513として機能してよい。S710及びS711の処理では、情報処理装置1の制御部500は、例えば、表示情報出力部513として機能してよい。
また、図8の動作フローにおいて、S801の処理では、情報処理装置1の制御部500は、例えば、要求出力部511として機能してよい。また、S802からS805の処理では、情報処理装置1の制御部500は、例えば、決定部512として機能してよい。
図7の動作フローによれば、情報処理装置1の制御部500は、コンテンツを表示画面に表示するのに先立って、コンテンツに画像が含まれる場合に画像のヘッダ情報を要求するリクエストを送信する。そして、情報処理装置1の制御部500は、受信されたヘッダ情報から取得した画像サイズに基づいてコンテンツの表示のレイアウトを決定する(図7のS705〜S708)。従って、S710において情報処理装置1の制御部500がダウンロードされた画像をレイアウト上に配置しても、レイアウトの変更は生じない。
図9及び図10は、実施形態に係るコンテンツのレイアウトの決定タイミングと、ユーザの指示入力のタイミングとの関係を例示する図である。なお、図9及び図10は、HTMLファイルの<img>タグにおいて表示サイズの指定(例えばwidth及びheightによるサイズ属性の指定)が省略されている場合を例とする。また、図9は、HTTPのセッションにより、情報処理装置1が画像データをサーバ2からダウンロードする場合を例示している。
情報処理装置1の制御部500は、HTML及びCSSのパースを行なった後、図7を参照して述べたように、レイアウトの決定の前にHTMLファイルに<img>タグがあるか否かを判定する。そして、<img>タグがある場合に、制御部500は、<img>タグのURLで指定される画像ファイルのヘッダ情報を要求するHTTPリクエストをサーバ2に送信する(図9の(1))。サーバ2は、ヘッダ情報を要求するHTTPリクエストを受信すると、ヘッダ情報を含むHTTPレスポンスを情報処理装置1へと送信する(図9の(2))。情報処理装置1の制御部500は、HTTPレスポンスを受信すると(図9の(3))、HTTPレスポンスに含まれるヘッダ情報から画像サイズを取得し、取得した画像サイズを基に、コンテンツのレイアウトを決定する(図9の(4))。例えば、情報処理装置1の制御部500は、取得した画像サイズで画像がブラウザ上に表示されるように、コンテンツのレイアウトを決定してよい。
その後、情報処理装置1の制御部500は、HTMLの<img>タグで指定される画像の画像データを要求するHTTPリクエストをサーバ2に送信する(図9の(5))。サーバ2は、受信したHTTPリクエストに応じて画像データを含むHTTPレスポンスを情報処理装置1へと送信する(図9の(6))。情報処理装置1の制御部500は、サーバ2からのHTTPレスポンスの受信が完了すると、HTTPレスポンスに含まれる画像データを取得し、得られた画像を図9の(4)で決定したレイアウト上に配置する(図9の(7))。なお、図9の(4)で決定したレイアウトは、画像の画像サイズに基づいて決定されているため、図9の(7)の画像の受信後の配置ではレイアウトの変更は生じない。また同様に、HTTPレスポンスの受信に遅延が生じ(図9の(8))、ユーザの操作入力のタイミング(図9の(10))直前に、遅延した画像データの受信と配置が実行されたとしても(図9の(9))、レイアウトの変更は生じない。そのため、ユーザの指示の入力の寸前にコンテンツに読み込まれたデータによって、コンテンツの表示のレイアウトが更新されてしまい、ユーザの誤操作を引き起こすことが抑制される。
また、図10は、SPDYのセッションにより、情報処理装置1が画像データをサーバ2からダウンロードする場合を例示している。図7の説明で述べたように、情報処理装置1の制御部500は、HTML及びCSSのパースを行なった後、レイアウトの決定の前にHTMLファイルに<img>タグがあるか否かを判定する。そして、<img>タグがある場合に、制御部500は、<img>タグのURLで指定される画像ファイルのヘッダ情報を要求するSPDYリクエストをサーバ2に送信する(図10の(1))。サーバ2は、クライアントである情報処理装置1からヘッダ情報を要求するSPDYリクエストを受信すると、例えば、SPDYリクエストに対する応答としてリプライを情報処理装置1へと送信する(図10の(2))。なお、リプライは、例えば、HTTPレスポンスのヘッダ情報を含むコントロールフレーム、及び要求された画像ファイルのヘッダ情報を含むデータフレームを含んでいてよい。情報処理装置1の制御部500は、サーバ2からのリプライを受信し、画像ファイルのヘッダ情報を受信すると、サーバ2へと停止要求を送信する(図10の(3))。そして、情報処理装置1の制御部500は、受信した画像ファイルのヘッダ情報から取得した画像サイズを基にコンテンツのレイアウトを決定する(図10の(4))。例えば、情報処理装置1の制御部500は、取得した画像サイズで画像がブラウザ上に表示されるように、コンテンツのレイアウトを決定してよい。
その後、情報処理装置1の制御部500は、HTMLの<img>タグで指定される画像の画像データを要求するSPDYリクエストをサーバ2に送信する(図10の(5))。サーバ2は、受信したSPDYリクエストに応じてリプライを情報処理装置1へと送信する(図10の(6))。なお、リプライは、例えば、HTTPレスポンスのヘッダ情報を含むコントロールフレーム、及び要求された画像ファイルのデータを含むデータフレームを含んでいてよい。情報処理装置1の制御部500は、サーバ2からのリプライを受信し、画像ファイルのダウンロードを完了すると、得られた画像を図10の(4)で決定したレイアウト上に配置する(図10の(7))。なお、図10の(4)で決定したレイアウトは、画像の画像サイズに基づいて決定されているため、図10の(7)の画像の受信後の配置ではレイアウトの変更は生じない。また同様に、リプライの受信に遅延が生じ(図10の(8))、ユーザの指示入力のタイミング(図10の(10))直前に、遅延した画像データの受信と配置が実行されたとしても(図10の(9))、レイアウトの変更は生じない。そのため、ユーザの指示の入力の寸前にコンテンツに読み込まれたデータによって、コンテンツの表示のレイアウトが更新されてしまい、ユーザの誤操作を引き起こすことが抑制される。
以上で述べたように、本実施形態では情報処理装置1の制御部500は、コンテンツに画像が含まれる場合に、コンテンツを表示画面に表示するのに先立って、その画像の画像ファイルのサイズ情報(例えば、ヘッダ情報)を要求するリクエストを送信する。そして、情報処理装置1の制御部500は、リクエストに応じて受信されたサイズ情報から取得した画像サイズを基にレイアウトを決定する。従って、情報処理装置1の制御部500が、ダウンロードされた画像をレイアウト上に配置しても、レイアウトの変更は生じない。また、図8で述べたように、情報処理装置1は、例えば、HTTPプロトコルのGETコマンドなどの既存のコマンドを利用してサイズ情報をサーバ2から取得することができる。そのため、例えば、サーバ2に新たな機能を追加しなくても、実施形態を実行することができる。しかしながら、実施形態はこれに限定されるものではなく、例えば別の実施形態では、サーバ2に変更が加えられてもよい。以下では、図11を参照し、変形例に係る画像サイズ取得処理を説明する。
<変形例>
図11は、変形例に係る情報処理装置1の制御部500が実行する画像サイズ取得処理の動作フローを例示する図である。なお、図11の画像サイズ取得処理の動作フローは、一実施形態においては、図7のS705に進むと実行されてよい。
S1101において情報処理装置1の制御部500は、画像ファイルの画像サイズを示すサイズ情報を要求するHTTPリクエストを送信する。なお、例えば、HTTPプロトコルにおいて、画像ファイルの画像サイズを示すサイズ情報を要求するためのコマンドが用意されてよい。そして、情報処理装置1の制御部500は、そのコマンドを用いて画像ファイルの画像サイズを示すサイズ情報を要求するHTTPリクエストを<img>タグに示されるURLのサーバ2へと送信してよい。S1102において情報処理装置1の制御部500は、HTTPリクエストに対するHTTPレスポンスをサーバ2から受信し、HTTPレスポンスのボディ領域に含まれるサイズ情報から画像サイズを取得してよい。S1102において情報処理装置1の制御部500が画像の画像サイズを取得すると、本動作フローは終了し、フローは図7のS706へと進む。
なお、図11の動作フローにおいて、S1101の処理では、情報処理装置1の制御部500は、例えば、要求出力部511として機能してよい。また、S1102の処理では、情報処理装置1の制御部500は、例えば、決定部512として機能してよい。
また、図12は、図11で例示した画像ファイルの画像サイズを示すサイズ情報を要求するためのコマンドを含むHTTPリクエストを受信した場合のサーバ2の画像サイズ送信処理の動作フローを例示する図である。図12の画像サイズ送信処理の動作フローは、一実施形態においては、サーバ2が、画像ファイルの画像サイズを示すサイズ情報を要求するためのコマンドを含むHTTPリクエストを受信した場合に開始してよい。
S1201においてサーバ2は、受信したHTTPリクエストで画像サイズが要求されている画像ファイルのファイルフォーマットを特定する。例えば、サーバ2は、HTTPレスポンスのContent-Typeのヘッダに登録する情報の特定と同様の手順で、画像ファイルのファイルフォーマットを特定してよい。S1202においてサーバ2は、例えば、特定されたファイルフォーマットにおいて画像サイズが格納されているヘッダ領域を参照することで画像サイズを取得する。例えば、サーバ2は記憶装置を備えていてよく、また、記憶装置に画像サイズ位置情報600を記憶していてよい。そして、サーバ2は、S1201で特定されたファイルフォーマットに対応するデータ位置602と、データサイズ603とを記憶装置に記憶されている画像サイズ位置情報600から特定してよい。更に、サーバ2は、画像ファイルのヘッダ情報を参照し、特定されたデータ位置602及びデータサイズ603の領域に格納されているデータから画像サイズを取得してよい。S1203において、サーバ2は、特定した画像サイズをサイズ情報として含むHTTPレスポンスを、HTTPリクエストを送信してきた情報処理装置1へと送信し、本動作フローは終了する。
例えば、以上のように、HTTPプロトコルに、画像サイズを示すサイズ情報を要求するためのコマンドを用意し、そのコマンドを利用できるようにサーバ2及びクライアントである情報処理装置1の双方に変更を加えることで、実施形態が実装されてもよい。画像サイズを示すサイズ情報を要求するためのコマンドを用意することで、例えば、GETコマンドを用いる場合と比較して、HTTPレスポンスのデータサイズをより小さくすることができ、コンテンツのレイアウトの決定を早めることができる。なお、図11及び図12の例では、HTTPリクエストとHTTPレスポンスを用いる場合を例示したが、実施形態はこれに限定されるものではない。例えば、SPDYリクエストを用いる場合にも、画像サイズを示すサイズ情報を要求するためのコマンドを用意し、そのコマンドを利用できるようにサーバ2及びクライアントである情報処理装置1の双方に変更を加えることで、実施形態を実装することができる。
以上で述べたように、いくつかの実施形態によれば、コンテンツの表示のための全てのデータの読み込みが完了する前にユーザが情報処理装置1に指示を入力する場合におけるユーザの誤操作を抑制することができる。
なお、以上の例では、コンテンツのレイアウトの決定の前に、画像の画像サイズを取得し、得られた画像サイズを基にレイアウトの決定を行うことで、ユーザの誤操作を抑制する例を述べた。しかしながら、実施形態はこれに限定されるものではない。例えば、JavaScriptの実行によりコンテンツのレイアウトの変更が生じる可能性がある場合には、S708のレイアウトの決定の前に、JavaScriptの実行後のサイズを取得するように実施形態を実装してもよい。
また、上述の例えば、図7、図8、図11、及び図12の動作フローは例示であり、実施形態はこれに限定されるものではない。例えば、これらの動作フローは、可能な場合には、処理の順番を変更して実行してもよく、別に更なる処理を含んでいてもよく、又は、一部の処理が省略されてもよい。例えば、図7のS709及びS710の処理と、S711の処理とは、HTMLファイルにおける記述の順序に応じて順番を入れ替えて実行してもよい。
図13は、実施形態に係る情報処理装置1及びサーバ2を実現するためのコンピュータ1300のハードウェア構成を例示する図である。図13のハードウェア構成は、例えば、プロセッサ1301、メモリ1302、記憶装置1303、読取装置1304、通信インタフェース1306、入出力装置1307、及び表示装置1310を備える。なお、プロセッサ1301、メモリ1302、記憶装置1303、読取装置1304、通信インタフェース1306、入出力装置1307、及び表示装置1310は、例えば、バス1308を介して互いに接続されている。
プロセッサ1301は、例えば、CPU(Central Processing Unit)であってよい。プロセッサ1301は、例えば、メモリ1302を利用して上述の動作フローの手順を記述したプログラム520を実行することにより、上述した各機能部の一部または全部の機能を提供する。例えば、情報処理装置1の制御部500は、プロセッサ1301であり、また、記憶部510は、例えばメモリ1302、記憶装置1303、及び着脱可能記憶媒体1305を含んでいる。情報処理装置1のプロセッサ1301は、例えば、記憶装置1303に格納されているプログラムを読み出して実行することで、要求出力部511、決定部512、及び表示情報出力部513として機能する。情報処理装置1の記憶装置1303には、例えば、プログラム520及び画像サイズ位置情報600が記憶されていてよい。
また、サーバ2のプロセッサ1301は、例えば、記憶装置1303に格納されているプログラムを読み出して実行することで、図12の動作フローを実行してよい。この場合に、サーバ2の記憶装置1303には、例えば、図12の動作フローの手順を記述したプログラム及び画像サイズ位置情報600が記憶されていてよい。
メモリ1302は、例えば半導体メモリであり、RAM領域及びROM領域を含んでいてよい。なお、RAMは、Random Access Memoryの略称である。また、ROMは、Read Only Memoryの略称である。記憶装置1303は、例えばハードディスク、フラッシュメモリ等の半導体メモリ、又は外部記憶装置である。
読取装置1304は、プロセッサ1301の指示に従って着脱可能記憶媒体1305にアクセスする。着脱可能記憶媒体1305は、例えば、半導体デバイス(USBメモリ等)、磁気的作用により情報が入出力される媒体(磁気ディスク等)、光学的作用により情報が入出力される媒体(CD−ROM、DVD等)などにより実現される。なお、USBは、Universal Serial Busの略称である。CDは、Compact Discの略称である。DVDは、Digital Versatile Diskの略称である。
通信インタフェース1306は、プロセッサ1301の指示に従ってネットワーク1320を介してデータを送受信する。入出力装置1307は、例えばユーザからの指示を受け付けるキーボードやマウスなどのデバイスなどの入力装置であってよい。或いは、入出力装置1307は、例えばスピーカなどの音声装置などの出力装置であってよい。表示装置1310は、例えば、ディスプレーなどの表示装置であってよい。情報処理装置1の表示装置1310は、例えば、プロセッサ1301から入力された表示情報、配置情報、及び結果情報に従って、コンテンツを表示画面に表示してよい。また、サーバ2は、一実施形態においては、表示装置1310を含まなくてもよい。
実施形態に係る各プログラムは、例えば、下記の形態で情報処理装置1及びサーバ2に提供されてよい。
(1)記憶装置1303に予めインストールされている。
(2)着脱可能記憶媒体1305により提供される。
(3)プログラムサーバなどのサーバ1330から提供される。
以上で述べた実施形態を含むいくつかの実施形態は、上述の実施形態の各種変形形態及び代替形態を包含するものとして当業者には理解される。例えば、各種実施形態は、構成要素を変形して具体化されてよい。また、上述した実施形態に開示されている複数の構成要素を適宜組み合わせることにより、種々の実施形態が実施されてよい。更には、実施形態に示される全構成要素からいくつかの構成要素を削除して又は置換して、或いは実施形態に示される構成要素にいくつかの構成要素を追加して種々の実施形態が実施されてよい。