(19)【発行国】日本国特許庁(JP)
(12)【公報種別】公開特許公報(A)
(11)【公開番号】P2023184190
(43)【公開日】2023-12-28
(54)【発明の名称】画像生成システム、その動作方法およびプログラム
(51)【国際特許分類】
G09G 5/36 20060101AFI20231221BHJP
G09G 5/00 20060101ALI20231221BHJP
G09G 5/26 20060101ALI20231221BHJP
G09G 5/32 20060101ALI20231221BHJP
G06F 3/14 20060101ALI20231221BHJP
【FI】
G09G5/36 520E
G09G5/00 555D
G09G5/26 R
G09G5/32 640L
G09G5/32 640Z
G06F3/14 360A
【審査請求】未請求
【請求項の数】11
【出願形態】OL
(21)【出願番号】P 2022098196
(22)【出願日】2022-06-17
(71)【出願人】
【識別番号】000001007
【氏名又は名称】キヤノン株式会社
(74)【代理人】
【識別番号】110003281
【氏名又は名称】弁理士法人大塚国際特許事務所
(72)【発明者】
【氏名】篠塚 健太
【テーマコード(参考)】
5B069
5C182
【Fターム(参考)】
5B069AA01
5B069FA01
5B069LA03
5C182AC02
5C182BA01
5C182BA03
5C182BA04
5C182BA66
5C182BC26
5C182BC29
5C182CA01
5C182CA02
5C182CB12
5C182FA61
5C182FA68
5C182FA71
5C182FA75
5C182FA77
(57)【要約】
【課題】Webページの視認性・判読性を維持しつつ、Webページを閲覧できるまでの待機時間を短縮する。
【解決手段】画像生成システムであって、Webページの構成要素から装飾情報を取得する取得手段と、前記装飾情報に基づいて、前記Webページを画像化する際の解像度を決定する決定手段と、前記解像度で前記Webページを画像化する画像生成手段とを備える。
【選択図】
図7
【特許請求の範囲】
【請求項1】
画像生成システムであって、
Webページの構成要素から装飾情報を取得する取得手段と、
前記装飾情報に基づいて、前記Webページを画像化する際の解像度を決定する決定手段と、
前記解像度で前記Webページを画像化する画像生成手段と、
を備えることを特徴とする画像生成システム。
【請求項2】
前記Webページの画像を通信装置へ送信する送信手段をさらに備えることを特徴とする請求項1に記載の画像生成システム。
【請求項3】
前記装飾情報は、フォントサイズを含み、
前記決定手段は、前記Webページの構成要素に含まれる文字のフォントサイズに基づいて前記解像度を決定することを特徴とする請求項1に記載の画像生成システム。
【請求項4】
前記決定手段は、
前記Webページの構成要素に含まれる文字の最小フォントサイズが閾値未満である場合、第1の解像度を使用することを決定し、
前記最小フォントサイズが前記閾値以上である場合、前記第1の解像度よりも低い第2の解像度を使用することを決定する
ことを特徴とする請求項2に記載の画像生成システム。
【請求項5】
前記装飾情報は、フォントサイズ及び文字間隔を含み、
前記決定手段は、前記Webページの構成要素に含まれる文字のフォントサイズ及び文字間隔に基づいて前記解像度を決定することを特徴とする請求項1に記載の画像生成システム。
【請求項6】
前記決定手段は、
前記Webページの構成要素に含まれる文字の最小フォントサイズが閾値未満である場合、或いは、前記最小フォントサイズが前記閾値以上であっても前記Webページの構成要素に含まれる文字の最も狭い文字間隔が所定値未満である場合、第1の解像度を使用することを決定し、
前記最小フォントサイズが前記閾値以上であり且つ前記最も狭い文字間隔が前記所定値未満である場合、前記第1の解像度よりも低い第2の解像度を使用することを決定する
ことを特徴とする請求項4に記載の画像生成システム。
【請求項7】
前記画像生成システムは通信装置と通信可能であり、
前記通信装置を介してユーザにより指定されたURL情報に基づいて前記通信装置で表示するためのWebページを描画する描画手段をさらに備え、
前記取得手段は、前記Webページの構成要素から、前記描画手段による描画範囲に含まれる装飾情報を取得し、
前記決定手段は、前記描画範囲に含まれる装飾情報に基づいて前記解像度を決定する
ことを特徴とする請求項1に記載の画像生成システム。
【請求項8】
前記装飾情報は、背景色、フォントサイズ、拡大率、グラデーション、文字間隔、行間隔、ボーダーの種類、及び文字数のうちの少なくとも1つを含むことを特徴とする請求項1に記載の画像生成システム。
【請求項9】
前記画像生成システムは通信装置と通信可能であり、
前記通信装置を介してユーザにより指定されたURL情報に基づいて前記通信装置で表示するためのWebページを描画する描画手段と、
前記通信装置に表示された前記Webページの画像に対するユーザの操作を示す操作情報を受信する受信手段と、をさらに備え、
前記描画手段は、前記操作情報に基づいて前記ユーザの操作を反映させたWebページを描画し、
前記取得手段は、前記ユーザの操作が反映された前記Webページの構成要素から前記装飾情報を取得することを特徴とする請求項1乃至6の何れか1項に記載の画像生成システム。
【請求項10】
画像生成システムの動作方法であって、
Webページの構成要素から装飾情報を取得する取得工程と、
前記装飾情報に基づいて前記Webページを画像化する際の解像度を決定する決定工程と、
前記解像度で前記Webページを画像化する画像生成工程と、
を有することを特徴とする画像生成システムの動作方法。
【請求項11】
コンピュータを請求項1に記載の画像生成システムの各手段として機能させるためのプログラム。
【発明の詳細な説明】
【技術分野】
【0001】
本発明は、画像生成システム、その動作方法およびプログラムに関する。
【背景技術】
【0002】
現在、Webブラウザ(以下、単にブラウザと称することもある)を搭載し、そのブラウザ上でWebページを閲覧可能な通信装置が普及している。ブラウザを通して外部サービスのWebページを表示することにより、通信装置が外部サービスと連携できるようになる。
【0003】
ブラウザの形態として、サーバ上にWebページの描画結果を生成するブラウザエンジンを配置する形態がある。ブラウザエンジンは、Webページの解析処理や実行処理といった計算負荷が高い処理を担っている。ブラウザエンジンをサーバ上で実行することにより、通信装置の計算負荷が軽減される。
【0004】
これは、ブラウザエンジンで描画した描画結果を画像化し、その画像を通信装置に表示することでWebページを閲覧する手法である。仮想マシンにはPCに必要とされる様々な機器リソースが仮想的に割り当てられることから、仮想マシン上で稼働するブラウザエンジンは、PC上で稼働する場合と同じように動作することができる。
【0005】
しかし、サーバから画像を取得するための通信処理が必要であるため、通常のWebブラウザよりも描画されるまでに時間がかかり、Webページを閲覧できるまでの待機時間が長くなることがある。
【0006】
一方、画像の解像度を下げることで通信量を削減し通信にかかる時間を短縮することができる。特許文献1は、入力された画像情報が特定の特徴を有するかに応じて圧縮処理を行うことを開示している。
【先行技術文献】
【特許文献】
【0007】
【発明の概要】
【発明が解決しようとする課題】
【0008】
しかしながら、特許文献1の技術では、ユーザが設定した内容に従って画像を圧縮してしまうため、表示するWebページによっては文字などが潰れてしまい、ユーザが文字を読み取れなくなってしまうことがあるという課題がある。
【0009】
本発明は、上記の課題に鑑みてなされたものであり、Webページの視認性・判読性を維持しつつ、Webページを閲覧できるまでの待機時間を短縮するための技術を提供することを目的とする。
【課題を解決するための手段】
【0010】
上記の目的を達成する本発明に係る画像生成システムは、
Webページの構成要素から装飾情報を取得する取得手段と、
前記装飾情報に基づいて前記Webページを画像化する際の解像度を決定する決定手段と、
前記解像度で前記Webページを画像化する画像生成手段と、
を備えることを特徴とする。
【発明の効果】
【0011】
本発明によれば、Webページの視認性・判読性を維持しつつ、Webページを閲覧できるまでの待機時間を短縮することが可能となる。
【図面の簡単な説明】
【0012】
【
図2】一実施形態に係る通信装置のハードウェア構成図。
【
図3】一実施形態に係る通信装置のソフトウェア構成図。
【
図4】一実施形態に係る仮想マシンのハードウェア構成図。
【
図5】一実施形態に係る仮想マシンのソフトウェア構成図。
【
図6】実施形態1に係る通信装置の処理の流れを説明するフローチャート。
【
図7】実施形態1に係る画像生成システムの処理の流れを説明するフローチャート。
【
図8】一実施形態に係る装飾情報から解像度を判定する処理の流れを説明するフローチャート。
【
図9】一実施形態に係る装飾情報から解像度を判定する別の処理の流れを説明するフローチャート。
【
図10】実施形態2に係る画像生成システムの処理の流れを説明するフローチャート。
【発明を実施するための形態】
【0013】
以下、添付図面を参照して実施形態を詳しく説明する。尚、以下の実施形態は特許請求の範囲に係る発明を限定するものでない。実施形態には複数の特徴が記載されているが、これらの複数の特徴の全てが発明に必須のものとは限らず、また、複数の特徴は任意に組み合わせられてもよい。さらに、添付図面においては、同一若しくは同様の構成に同一の参照番号を付し、重複した説明は省略する。
【0014】
(実施形態1)
本実施形態では、クラウドブラウザ(画像生成システム)を利用する例を説明する。クラウドブラウザとは、クラウド上にWebページの描画結果を生成するブラウザエンジンを配置する形態のことである。通信装置がクラウドブラウザに接続要求を送信し、クラウドブラウザからWebページの描画結果の画像をダウンロードして閲覧する事例を考える。本実施形態では、Webページを画像化する前に装飾情報を取得し、装飾情報に基づいて解像度を下げるかどうかを判定する。ここで、装飾情報とは、Webページの構成要素に含まれるWebページの見た目を指定するための情報であり、例えばフォントサイズ、文字間隔、行間隔などを示す情報である。装飾情報は、例えば、CSS、HTML、JavaScript(登録商標)のような書式で記述される。
【0015】
<システム構成>
図1は、本実施形態に係る情報処理システムの構成図である。情報処理システム100は、通信装置101と、画像生成システム103とを含む。
【0016】
ユーザは、通信装置101の画面を閲覧、および操作することができる。通信装置101は、画像生成システム103とネットワークを介して接続されており、接続要求、操作情報、および描画結果の取得要求を画像生成システム103へ送信する。本実施形態におけるネットワークは、例えば、インターネット、WAN(Wide Area Network)、およびLAN(Local Area Network)、またはこれらの複合であってもよい。また、通信装置は複数存在してもよい。
【0017】
Webサーバ102は、通信装置101及び画像生成システム103とネットワークを介して接続されている。Webサーバ102は、URL情報で指定されたWebページを保持する。画像生成システム103は、本実施形態では例えばクラウドブラウザである。画像生成システム103は、仮想マシン104およびストレージ107を備える。
【0018】
仮想マシン104は、ブラウザエンジン105及び画像化モジュール106を備えており、画像生成システム103上で稼働する。仮想マシン104は、通信装置101から操作情報を受信する。また、ユーザは、閲覧しようとしているWebページのURL情報を、通信装置101を介して指定(入力)し、仮想マシン104は、Webサーバ102から、ユーザによって指定されたWebページの情報を取得する。
【0019】
ブラウザエンジン105は、仮想マシン104上で稼働し、ユーザにより指定されたURL情報に基づいて取得されたWebページの解析及びWebページの描画結果の生成を行う。画像化モジュール106は、ブラウザエンジン105により描画された描画結果の画像化を行う。さらに、描画結果の画像をストレージ107へ送信する。ストレージ107は、画像生成システム103上で稼働し、画像化モジュール106から送信された描画結果の画像を受信して保存する。ストレージ107は複数存在してもよい。
【0020】
<通信装置のハードウェア構成>
図2は、本実施形態の通信装置101を構成するコンピュータ装置のハードウェア構成を示す図である。通信装置101は、CPU201、ROM202、RAM203、ユーザインタフェース204、及びネットワークインタフェース205を備えており、これらの構成要素がシステムバス206を介して接続されている。
【0021】
CPU201は、通信装置101を制御するCentral Processing Unitである。ROM202は、変更を必要としないプログラムやパラメータを格納するRead Only Memoryである。RAM203は、外部装置などから供給されるプログラムやデータを一時記憶するRandom Access Memoryである。CPU201は、ROM202やRAM203に格納されたプログラムを読み出して実行することにより、通信装置101の各処理を実行する。
【0022】
ユーザインタフェース204は、通信装置101が保持するデータや通信装置101に供給されたデータを表示するための表示装置に表示されるグラフィカルユーザインタフェースとすることができる。あるいは、ユーザからの操作を受けてデータを入力するマウスなどのポインティングデバイス、キーボードなどの入力デバイス等、各種のユーザインタフェースであってもよい。
【0023】
ネットワークインタフェース205は、ネットワークに接続するためのネットワークインタフェースである。システムバス206は、CPU201~ネットワークインタフェース205の各構成要素を通信可能に接続するシステムバスである。
【0024】
また通信装置101に固定して設置されたハードディスクやメモリカード等があってもよい。あるいは通信装置101から着脱可能なフレキシブルディスク(FD)やCompact Disk(CD)等の光ディスク、磁気や光カード、ICカード、メモリカードなどを含む外部記憶装置等があってもよい。
【0025】
<通信装置のソフトウェア構成>
図3は、本実施形態の通信装置101を構成するコンピュータ装置のソフトウェア構成を示す図である。通信装置101は、通信部301、記憶部302、操作検知部303及び画面生成部304を備える。
【0026】
通信部301は、通信装置101がネットワークを介して行う通信を制御する通信部である。記憶部302は、描画結果の記憶を行う記憶部である。操作検知部303は、ユーザインタフェース204が操作されたときの操作の内容を検知する。画面生成部304は、ユーザインタフェース204に表示する画面の生成を行う。
【0027】
<仮想マシンのハードウェア構成>
図4は、本実施形態の仮想マシン104を構成するコンピュータ装置のハードウェア構成を示す図である。仮想マシン104は、CPU401、ROM402、RAM403、及びネットワークインタフェース404を備えており、これらの構成要素がシステムバス405を介して接続されている。
【0028】
CPU401は、仮想マシン104を制御するCentral Processing Unitである。ROM402は、変更を必要としないプログラムやパラメータを格納するRead Only Memoryである。RAM403は、外部装置などから供給されるプログラムやデータを一時記憶するRandom Access Memoryである。CPU401は、ROM402やRAM403に格納されたプログラムを読み出して実行することにより、仮想マシン104の各処理を実行する。
【0029】
ネットワークインタフェース404は、ネットワークに接続するためのネットワークインタフェースである。システムバス405は、CPU401~ネットワークインタフェース404の各構成要素を通信可能に接続するシステムバスである。
【0030】
<仮想マシンのソフトウェア構成>
図5は、本実施形態の仮想マシン104を構成するコンピュータ装置のソフトウェア構成を示す図である。仮想マシン104は、通信部501、記憶部502、リクエスト判定部303、Webページ解析部504、Webページ描画部505、画像生成部506、及び解像度決定部507を備える。
【0031】
通信部501は、仮想マシン104がネットワークを介して行う通信を制御する通信部である。記憶部502は、ユーザ情報、デバイス情報リスト、Webコンテンツ、およびWebページ情報の記憶を行う記憶部である。リクエスト判定部503は、通信部501が受信したリクエストの種別を判定する。
【0032】
Webページ解析部504は、ユーザにより指定されたURL情報に基づいて、Webページの解析を行う。Webページ描画部505は、Webページ解析部504により解析されたWebページの描画を行う。画像生成部506は、Webページ描画部505により描画された画面の画像を生成する(すなわち、描画結果を画像化する)。解像度決定部507は、Webページの構成要素から取得できる装飾情報に基づいて、画像生成部506により生成される画像の解像度を決定する。
【0033】
<システム処理>
ユーザは通信装置101を操作して、閲覧しようとするWebページのURL情報を入力する。入力されたURL情報は、画像生成システム103により受信されて取得される。画像生成システム103は、取得したURL情報に基づいて、Webサーバ102へアクセスしてWebページを解析し、描画する。また、Webページの構成要素から装飾情報を取得し、装飾情報に基づいて、通信装置101で表示するためのWebページの画像の解像度を決定する。そして決定された解像度でWebページを画像化し、そのWebページの画像を通信装置101へ送信して表示させる。
【0034】
ユーザは通信装置101に表示されたWebページの画像を操作(押下、スクロール、ドラッグ、スワイプ等)することができる。ユーザが操作を行うと、ユーザの操作内容を示す操作情報が画像生成システム103へ送信され、画像生成システム103において操作情報を反映したWebページを描画する。以降、操作が反映されたWebページの構成要素から同様に装飾情報を取得し、装飾情報に基づいて解像度の決定を行い、同様の処理を繰り返す。
【0035】
<通信装置の処理>
図6は、本実施形態における通信装置101の処理の流れを説明するフローチャートである。S601において、操作検知部303は、ユーザインタフェース204上に表示されているクラウド接続ボタン(不図示)をユーザ押下したことを検知する。そして、操作検知部303の検知に応じて、通信部301が、接続要求を仮想マシン104へ送信する。本実施形態では、接続要求は、通信装置101が接続要求の送信を開始した時間を示す情報を含む。
【0036】
S602において、通信部301は、仮想マシン104から接続完了情報を受信する。その後、ユーザは通信装置101を操作して、所望のWebページのURL情報を入力し、それを画像生成システム103へ送信し、画像生成システム103により生成されたWebページの画像を通信装置101が受信して表示する。
【0037】
S603において、操作検知部303は、ユーザ操作の有無を判定する。ユーザ操作は、例えば、マウス操作やタッチ操作を介した、押下、スクロール、ドラッグ、スワイプ等の操作である。例えば、画像生成システム103から受信したWebページの画像に対するユーザ操作を検知する。ユーザ操作があった場合(S603でYes)、S604へ進む。一方、ユーザ操作がない場合(S603でNo)、S605へ進む。
【0038】
S604において、通信部301は、操作検知部303により判定されたユーザ操作の内容を示す操作情報をリクエストとして仮想マシン104へ送信する。S605において、通信部301は、仮想マシン104から情報を受信したか否かを判定する。情報を受信した場合(S605でYes)、S606へ進む。一方、情報を受信していない場合(S605でNo)、S608へ進む。
【0039】
S606において、通信部301は、S605で受信した情報が、仮想マシン104に送信された操作情報に応じたWebページの描画結果取得に関する情報(例えば、操作情報反映通知)であるか否かの判定を行う。描画結果取得に関する情報である場合(S606でYes)、S607へ進む。一方、描画結果取得に関する情報ではない場合(S606でNo)、S608へ進む。
【0040】
S607において、通信部301は、画像生成システム103のストレージ107に保存してある描画結果の画像を取得する。そして、画面生成部304は、取得した画像を用いて表示画面を生成する。
【0041】
S608において、操作検知部303は、ユーザインタフェース204上の終了ボタンが押下されたか否かを検知、終了処理の判定を行う。終了ボタンが押下された場合(S608でYes)、本処理を終了する。その際、終了指示をリクエストとして画像生成システム103へ送信する。一方、終了ボタンが押下されていない場合(S608でNo)、S603に戻る。以上で
図6の一連の処理が終了する。
【0042】
<画像生成システム(主に仮想マシン)の処理>
続いて、
図7は、本実施形態に係る画像生成システム103(主に仮想マシン104)が実施する処理の流れを説明するフローチャートである。
【0043】
S701において、通信部501は、通信装置101から送信された接続要求を受信する。S702において、通信部501は、接続要求に基づいて接続が完了した場合、通信装置101へ接続完了情報を送信する。
【0044】
その後、画像生成システム103は、ユーザが通信装置101を操作して入力した所望のWebページのURL情報を受信し、当該URL情報に基づいてWebページを描画し、さらにWebページを画像化して通信装置101へ送信する。
【0045】
S703において、通信部501は、通信装置101からリクエストを受信する。S704において、リクエスト判定部503は、通信部501により受信されたリクエストの種別を判定する。リクエストの種別が操作情報(例えば、ユーザ操作の内容を示す操作情報)である場合(S704で操作情報)、S705に進む。一方、リクエストの種別が終了指示である場合(S704で終了指示)、処理を終了する。
【0046】
S705において、Webページ解析部504は、通信部501により受信された操作情報の反映を行う。例えば、操作情報の内容が押下だった場合、Webページ解析部504は、Webページに対して実際に押下処理を行う。
【0047】
S706において、Webページ解析部504は、S705の反映の結果として得られたWebページの構成要素から装飾情報(例えばフォントサイズ)を取得する。S707において、解像度決定部507は、S706で取得された装飾情報に基づいて解像度を決定する。解像度の決定処理の詳細は、
図8、
図9を参照して後述する。S708において、Webページ描画部505は、S705で操作情報を反映した後の状態の描画結果を生成する。
【0048】
S709において、画像生成部506は、S708で生成された描画結果を、S707で決定された解像度の画像ファイルとして生成する(画像化)。S710において、通信部501は、画像生成システム103のストレージ107に対して、S709で生成された画像ファイルを送信する。その後、通信部501は、通信装置101へ、操作情報が反映されたことを示す操作情報反映通知を送信する。その後、S703に戻る。以上で
図7の一連の処理が終了する。
【0049】
<解像度決定処理の詳細>
ここで
図8は、
図7のS707の解像度決定処理の詳細を説明するフローチャートである。なお、
図7のS706において、装飾情報として、CSSのfont-sizeを利用してフォントサイズの情報を取得したものとして説明を行う。
【0050】
S801において、解像度決定部507は、S706で取得された装飾情報(フォントサイズ)に基づいて、最小フォントサイズが10px以上であるか否かを判定する。最小フォントサイズが10px以上である場合(S801でYes)、S802へ進む。一方、最小フォントサイズが10px未満である場合(S801でNo)、S805へ進む。
【0051】
S802において、解像度決定部507は、S706で取得された装飾情報(フォントサイズ)に基づいて、最小フォントサイズが20px以上であるか否かを判定する。最小フォントサイズが20px以上である場合(S802でYes)、S803へ進む。一方、最小フォントサイズが20px未満である場合(S802でNo)、S806へ進む。
【0052】
S803において、解像度決定部507は、S706で取得された装飾情報(フォントサイズ)に基づいて、最小フォントサイズが50px以上であるか否かを判定する。最小フォントサイズが50px以上である場合(S803でYes)、S804へ進む。一方、最小フォントサイズが50px未満である場合(S803でNo)、S807へ進む。
【0053】
S804において、解像度決定部507は、90%の圧縮率を生成画像の解像度として決定する。S805において、解像度決定部507は、通常解像度を生成画像の解像度として決定する。S806において、解像度決定部507は、20%の圧縮率を生成画像の解像度として決定する。S807において、解像度決定部507は、50%の圧縮率を生成画像の解像度として決定する。以上で
図8の一連の処理が終了する。
【0054】
このように、Webページの構成要素に含まれる文字の最小フォントサイズが閾値未満である場合、第1の解像度を使用することを決定し、最小フォントサイズが閾値以上である場合、第1の解像度よりも低い第2の解像度を使用することを決定する。これにより、文字の判読性・視認性を維持しつつ、画像を圧縮して転送データ量を削減することが可能となる。従って、通信装置で早期の表示を実現することができる。
【0055】
<解像度決定処理の変形例>
続いて、
図9を参照して、本実施形態において、
図8で説明したフォントサイズだけでなく別の装飾情報(文字間隔)をさらに利用して解像度を決定する処理の変形例を説明する。
図9の例では、S706において、装飾情報として、CSSのfont-sizeを利用してフォントサイズの情報を取得するとともに、CSSのletter-spacingを利用して文字間隔の情報を取得したものとする。文字間隔の情報は、例えばフォントサイズの何%の大きさの間隔かを示す情報である。
【0056】
S901において、解像度決定部507は、S706で取得された装飾情報(フォントサイズ)に基づいて、最小フォントサイズが10px以上であるか否かを判定する。最小フォントサイズが10px以上である場合(S901でYes)、S902へ進む。一方、最小フォントサイズが10px未満である場合(S901でNo)、S907へ進む。
【0057】
S902において、解像度決定部507は、S706で取得された装飾情報(文字間隔)に基づいて、一番狭い文字間隔が50%以上であるか否かを判定する。一番狭い文字間隔が50%以上である場合(S902でYes)、S903へ進む。一方、一番狭い文字間隔が50%未満である場合(S902でNo)、S907へ進む。
【0058】
S903において、解像度決定部507は、S706で取得された装飾情報(フォントサイズ)に基づいて、最小フォントサイズが20px以上であるか否かを判定する。最小フォントサイズが20px以上である場合(S903でYes)、S904へ進む。一方、最小フォントサイズが20px未満である場合(S903でNo)、S908へ進む。
【0059】
S904において、解像度決定部507は、S706で取得された装飾情報(文字間隔)に基づいて、一番狭い文字間隔が100%以上であるか否かを判定する。一番狭い文字間隔が100%以上である場合(S904でYes)、S905へ進む。一方、一番狭い文字間隔が100%未満である場合(S904でNo)、S908へ進む。
【0060】
S905において、解像度決定部507は、S706で取得された装飾情報(フォントサイズ)に基づいて、最小フォントサイズが50px以上であるか否かを判定する。最小フォントサイズが50px以上である場合(S905でYes)、S906へ進む。一方、最小フォントサイズが50px未満である場合(S905でNo)、S909へ進む。
【0061】
S906において、解像度決定部507は、S706で取得された装飾情報(文字間隔)に基づいて、一番狭い文字間隔が150%以上であるか否かを判定する。一番狭い文字間隔が150%以上である場合(S906でYes)、S910へ進む。一方、一番狭い文字間隔が150%未満である場合(S906でNo)、S909へ進む。
【0062】
S907において、解像度決定部507は、通常解像度を生成画像の解像度として決定する。S908において、解像度決定部507は、20%の圧縮率を生成画像の解像度として決定する。S909において、解像度決定部507は、50%の圧縮率を生成画像の解像度として決定する。S910において、解像度決定部507は、90%の圧縮率を生成画像の解像度として決定する。以上で
図9の一連の処理が終了する。
【0063】
このように、Webページの構成要素に含まれる文字の最小フォントサイズが閾値(例えば10)未満である場合、或いは、最小フォントサイズが閾値(例えば10)以上であってもWebページの構成要素に含まれる文字の最も狭い文字間隔が所定値(例えば50)未満である場合、第1の解像度(例えば、通常解像度)を使用することを決定する。そして、最小フォントサイズが閾値以上であり且つ最も狭い文字間隔が所定値未満である場合、第1の解像度よりも低い第2の解像度(例えば圧縮率20%、50%、90%等)を使用することを決定する。これにより、文字の判読性・視認性を維持しつつ、画像を圧縮して転送データ量を削減することが可能となる。従って、通信装置で早期の表示を実現することができる。
【0064】
以上説明したように、本実施形態では、装飾情報に基づいて、表示すべき画像の解像度を決定する。これにより、装飾情報の一例であるフォントサイズが大きい場合には、解像度を下げて画像容量を削減し、通信に要する時間を削減することができる。また、装飾情報の一例であるフォントサイズが小さい場合には、通常の解像度で画像を生成することで、文字の潰れなどが起こらずに視認性・判読性を維持することが可能となる。
【0065】
従って、例えばクラウドブラウザと通信装置との通信量を低減しつつ、ユーザの視認性・判読性が維持されたWebページを表示することが可能となる。
【0066】
(実施形態2)
本実施形態では、クラウドブラウザで描画する描画範囲内の装飾情報のみを参照する例を説明する。本実施形態におけるシステム構成図、通信装置101のハードウェア構成およびソフトウェア構成はそれぞれ
図1乃至
図3と同じであるため、説明を省略する。また、本実施形態における仮想マシン104のハードウェア構成は
図4と同じであり、仮想マシン104のソフトウェア構成は
図5と同じであるため、説明を省略する。また、本実施形態における通信装置101の処理の流れは
図6と同じである。
【0067】
<画像生成システム(主に仮想マシン)の処理>
図10は、本実施形態の画像生成システム103(主に仮想マシン104)の処理の流れを説明するフローチャートである。実施形態1と同じ処理については同じ参照番号を付しており、説明を省略する。本実施形態では、S705の処理の後、S1001へ進む。
【0068】
S1001において、Webページ解析部504は、ブラウザエンジン105で描画する描画範囲の情報を取得する。描画範囲は、JavaScript(登録商標)を利用することで取得できる。
【0069】
S1002において、Webページ解析部504は、S705における操作情報の反映の結果として得られるWebページの構成要素から、S1001で取得した描画範囲に含まれる装飾情報を取得する。
【0070】
以降、S707において、解像度決定部507が、S1002で取得した装飾情報に基づいて解像度を決定する。S707の詳細な処理は、実施形態1で
図8、
図9を参照して説明した処理と同様である。
【0071】
以上説明したように、本実施形態では、Webページの構成要素のうち、実際に描画する範囲に限定した装飾情報に基づいて解像度を決定することができる。これにより、Webページ全体の装飾情報を考慮した場合に閾値以下の値があり解像度を下げることができないような場合でも、描画範囲内の装飾情報に閾値以下の値がなければ、解像度を下げる処理を実行することができる。
【0072】
[変形例]
なお、実施形態1、2では、フォントサイズと文字間隔を装飾情報として参照する例を説明したがとしたが、これに限定されない。例えば、装飾情報として、背景色、拡大率、グラデーション、背景と文字の色、行間隔、ボーダーの種類、文字数などを使用してもよい。
【0073】
装飾情報が背景色である場合、CSSのbackground-colorを利用することができる。例えば、背景色が単色である場合に、背景色が複数色である場合よりも解像度を下げるように制御する。装飾情報が拡大率である場合、Htmlの拡大ボタン押したかで判定することができる。例えば、拡大率が所定値以上である場合、所定値未満である場合よりも解像度を下げるように制御する。
【0074】
装飾情報がグラデーションである場合、CSSのlinear-gradient、radial-gradient、あるいはconic-gradientを利用することができる。例えば、同系色のグラデーションである場合、解像度を下げるように制御する。装飾情報が背景と文字の色である場合、CSSのbackground-color&&colorを利用することができる。例えば、背景と文字が反対色である場合には解像度を下げるように制御する。
【0075】
装飾情報として背景と文字の明暗度の差である場合、CSSのbrightness・brightnessを利用することができる。例えば、背景と文字との明暗度の差が大きい場合(例えば明暗度の差が閾値以上である場合)、解像度を下げるように制御する。装飾情報が行間隔である場合、CSSのline-heightを利用することができる。例えば、行間隔が広い場合に解像度を下げるように制御する。具体的には、行間隔が広いほど解像度を下げるように制御してもよい。あるいは、行間隔が所定値以上である場合に、所定値未満である場合と比べて解像度を下げるように制御してもよい。
【0076】
装飾情報がボーダーの種類である場合、CSSのborderを利用することができる。例えば、ボーダーが太い場合に解像度を下げるように制御する。装飾情報が文字数である場合、JavaScript(登録商標)の$(〇〇).text().lengthを利用することができる。例えば、文字数が少ない場合(例えば文字数が所定数未満である場合)に解像度を下げるように制御する。
【0077】
また、上述の各実施形態では、解像度決定処理の際に、フォントサイズ、文字間隔、および描画結果の解像度の例として具体的な数値を記載したが、これに限定するものではない。例えばユーザが決定した数値や、動的に決定される数値を閾値として利用し、解像度の決定に用いてもよい。
【0078】
また、上述の各実施形態では、S605で受信した情報が描画結果取得に関する情報である場合、S607で描画結果を取得するように説明したが、これに限定するものではなく、通信装置101は一定時間が経過する度に、S607の処理を行ってもよい。これにより、ブラウザ上のアニメーション処理等、通信装置101の操作を必要とせずに描画結果が変化するWebコンテンツの場合においても、通信装置101はWebページの描画結果の画像を取得できる。
【0079】
また、上述の各実施形態では、クラウドブラウザを例に説明を行ったが、クラウドブラウザに限定されない。画像生成システムは、例えばローカル環境に置かれたサーバやエッジサーバ等において動作してもよいし、通信装置内に置かれてもよい。
【0080】
また、画像生成システム103の構成(あるいは仮想マシン104の構成)は、
図1に示した構成例に限定されない。画像システム103が含む構成要素の一部が画像システム103の外部に存在していてもよいし、画像システム103がさらに他の構成要素を含んでもよい。同様に、仮想マシン104が含む構成要素の一部が仮想マシン104の外部に存在していてもよいし、仮想マシン104がさらに他の構成要素を含んでもよい。上述の実施形態で説明した処理を実行する主体が同一の装置内に存在していてもよいし、一部が他の装置内に存在していてもよい。
【0081】
本明細書の開示は、以下の画像生成システム及びその動作方法を含む。
【0082】
(項目1)
画像生成システムであって、
Webページの構成要素から装飾情報を取得する取得手段と、
前記装飾情報に基づいて前記Webページを画像化する際の解像度を決定する決定手段と、
前記解像度で前記Webページを画像化する画像生成手段と、
を備えることを特徴とする画像生成システム。
【0083】
(項目2)
前記Webページの画像を通信装置へ送信する送信手段をさらに備えることを特徴とする項目1に記載の画像生成システム。
【0084】
(項目3)
前記装飾情報は、フォントサイズを含み、
前記決定手段は、前記Webページの構成要素に含まれる文字のフォントサイズに基づいて前記解像度を決定することを特徴とする項目1に記載の画像生成システム。
【0085】
(項目4)
前記決定手段は、
前記Webページの構成要素に含まれる文字の最小フォントサイズが閾値未満である場合、第1の解像度を使用することを決定し、
前記最小フォントサイズが前記閾値以上である場合、前記第1の解像度よりも低い第2の解像度を使用することを決定する
ことを特徴とする項目2に記載の画像生成システム。
【0086】
(項目5)
前記装飾情報は、フォントサイズ及び文字間隔を含み、
前記決定手段は、前記Webページの構成要素に含まれる文字のフォントサイズ及び文字間隔に基づいて前記解像度を決定することを特徴とする項目1に記載の画像生成システム。
【0087】
(項目6)
前記決定手段は、
前記Webページの構成要素に含まれる文字の最小フォントサイズが閾値未満である場合、或いは、前記最小フォントサイズが前記閾値以上であっても前記Webページの構成要素に含まれる文字の最も狭い文字間隔が所定値未満である場合、第1の解像度を使用することを決定し、
前記最小フォントサイズが前記閾値以上であり且つ前記最も狭い文字間隔が前記所定値未満である場合、前記第1の解像度よりも低い第2の解像度を使用することを決定する
ことを特徴とする項目5に記載の画像生成システム。
【0088】
(項目7)
前記画像生成システムは通信装置と通信可能であり、
前記通信装置を介してユーザにより指定されたURL情報に基づいて前記通信装置で表示するためのWebページを描画する描画手段をさらに備え、
前記取得手段は、前記Webページの構成要素から、前記描画手段による描画範囲に含まれる装飾情報を取得し、
前記決定手段は、前記描画範囲に含まれる装飾情報に基づいて前記解像度を決定する
ことを特徴とする項目1乃至6の何れか1項目に記載の画像生成システム。
【0089】
(項目8)
前記装飾情報は、背景色、フォントサイズ、拡大率、グラデーション、文字間隔、行間隔、ボーダーの種類、及び文字数のうちの少なくとも1つを含むことを特徴とする項目1乃至7の何れか1項目に記載の画像生成システム。
【0090】
(項目9)
前記画像生成システムは通信装置と通信可能であり、
前記通信装置を介してユーザにより指定されたURL情報に基づいて前記通信装置で表示するためのWebページを描画する描画手段と、
前記通信装置に表示された前記Webページの画像に対するユーザの操作を示す操作情報を受信する受信手段と、をさらに備え、
前記描画手段は、前記操作情報に基づいて前記ユーザの操作を反映させたWebページを描画し、
前記取得手段は、前記ユーザの操作が反映された前記Webページの構成要素から前記装飾情報を取得することを特徴とする項目1乃至6の何れか1項目に記載の画像生成システム。
【0091】
(項目10)
画像生成システムの動作方法であって、
Webページの構成要素から装飾情報を取得する取得工程と、
前記装飾情報に基づいて前記Webページを画像化する際の解像度を決定する決定工程と、
前記解像度で前記Webページを画像化する画像生成工程と、
を有することを特徴とする画像生成システムの動作方法。
【0092】
(項目11)
コンピュータを項目1乃至9の何れか1項目に記載の画像生成システムの各手段として機能させるためのプログラム。
【0093】
(その他の実施形態)
本発明は、上述の実施形態の1以上の機能を実現するプログラムを、ネットワーク又は記憶媒体を介してシステム又は装置に供給し、そのシステム又は装置のコンピュータにおける1つ以上のプロセッサーがプログラムを読出し実行する処理でも実現可能である。また、1以上の機能を実現する回路(例えば、ASIC)によっても実現可能である。
【0094】
発明は上記実施形態に制限されるものではなく、発明の精神及び範囲から離脱することなく、様々な変更及び変形が可能である。従って、発明の範囲を公にするために請求項を添付する。
【符号の説明】
【0095】
101:通信装置、102:Webサーバ、103:画像生成システム、104:仮想マシン、501:通信部、502:記憶部、503:リクエスト判定部、504:Webページ解析部、505:Webページ描画部、506:画像生成部、507:解像度決定部