(57)【要約】  ＧＵＩ（１６）を定義するＨＴＭＬファイルが生成され、そこで初期画面解像度について定義されるＧＵＩ要素（３２、３４）は、ＧＵＩ（１６）が新しい画面解像度を感知した際に適切に再構成され得る。【選択図】図１
2009503722.tif 000002
【特許請求の範囲】
【請求項１】
ＧＵＩ（１６）を表示する方法であって：
それぞれテンプレート内に対応するパラメータを有する複数の要素（３２、３４）を含む初期画面解像度に対応する初期ＧＵＩを定義するための、少なくとも１つのウェブ基盤の前記テンプレートを規定し；
前記初期解像度と異なる解像度に適合するように変更された前記パラメータによって表示装置上にＧＵＩ（１６）を表示する；
ことを備える方法。
【請求項２】
複数の初期画面解像度のそれぞれに対応する複数のテンプレートを規定することを備える、請求項１に記載の方法。
【請求項３】
前記パラメータは、要素の幅を含むことを特徴とする、請求項１に記載の方法。
【請求項４】
前記パラメータは、要素の長さを含むことを特徴とする、請求項１に記載の方法。
【請求項５】
前記パラメータは、ＧＵＩウィンドウの少なくとも２つの直交する境界からの要素の距離を含むことを特徴とする、請求項１に記載の方法。
【請求項６】
前記パラメータは、要素内に表示されるフォントのサイズを含むことを特徴とする、請求項１に記載の方法。
【請求項７】
前記パラメータは、要素の幅と、要素の長さと、ＧＵＩウィンドウの少なくとも２つの直交する境界からの要素の距離と、要素内に表示されるフォントのサイズとを含むことを特徴とする、請求項１に記載の方法。
【請求項８】
画面解像度が前記初期解像度とは異なることが検知された場合に、要素のレイアウトが初期レイアウトから変更されることを特徴とする、請求項１に記載の方法。
【請求項９】
初期画面解像度とは異なる画面解像度に対してＧＵＩ（１６）を拡大／縮小するロジックを実行するプロセッサ（１８）であって、前記ロジックは要素列内のＧＵＩ要素（３２、３４）の数を変更することを含むロジックであることを特徴とする、プロセッサ（１８）。
【請求項１０】
前記ロジックは、複数の初期画面解像度のそれぞれに対応する複数のテンプレートを規定することを含むことを特徴とする、請求項９に記載のプロセッサ。
【請求項１１】
各ＧＵＩ要素（３２、３４）は、要素の幅と、要素の長さと、ＧＵＩウィンドウの少なくとも２つの直交する境界からの要素の距離と、要素内に表示されるフォントのサイズとを含むパラメータを含むことを特徴とする、請求項９に記載のプロセッサ。
【請求項１２】
画面解像度が前記初期解像度とは異なることが検知された場合に、要素のレイアウトが初期レイアウトから変更されることを特徴とする、請求項９に記載のプロセッサ。
【請求項１３】
音声／映像装置（１２）と；
前記音声／映像装置（１２）の表示装置（１４）を少なくとも部分的に制御して前記表示装置（１４）の少なくとも一部にＧＵＩ（１６）を表示させるプロセッサ（１８）と；
前記ＧＵＩ（１６）は：
少なくともいくつかは選択ボタン（３４）の表示順を変更するために選択可能な制御ボタン（３２）である、制御ボタン（３２）の少なくとも１つの列と；
ある選択ボタン（３４）は前記音声／映像装置（１２）上で再生するためのマルチメディアストリームをそれぞれ選択するために選択可能な選択ボタン（３４）である、選択ボタン（３４）の少なくとも２つの列と；
を備えるＧＵＩ（１６）であることと；
を備えるシステム。
【発明の詳細な説明】
【関連する出願の参照】
【０００１】
本出願は、２００５年８月２日付提出の米国仮特許出願第６０／７０４，７３６号の利益を主張し、その内容はここに参照により取り入れられる。
【技術分野】
【０００２】
本発明は、一般的に、画面解像度の変更及び／または利用者による所望のＧＵＩウィンドウのサイズ変更のための、グラフィカルユーザインターフェース（ＧＵＩｓ）、特にウェブ基盤のＧＵＩ（Ｗｅｂ−ｂａｓｅｄ  ＧＵＩｓ）の動的な再構成に関する。
【背景技術】
【０００３】
過去数年の中で、パーソナルコンピュータと消費者向け電子装置の融合が行われてきている。これは、ＰＣプラットフォームの能力及び柔軟性の活用が、より改善された娯楽体験を利用者に提供するためである。しかしながら、ここで理解されるように、この融合は課題無しではなされず、その課題の１つは、標準画質（４ｘ３）テレビジョン画面の使用のための表示、及び高画質（１６ｘ９または１６ｘ１９）テレビジョン画面の使用のための表示などといった、複数の画面解像度と共に作動し得るＧＵＩの設計である。さらに、ＧＵＩの設計をより複雑にすることとして、利用者により画面上のＧＵＩウィンドウのサイズを規定することが許されている場合もある。
【０００４】
ここでさらに理解されるように、特別仕様のグラフィックスエンジンまたは組込み型のブラウザのズーム機能を要求する解決策には、特に固有でない（ｎｏｎ−ｎａｔｉｖｅ）環境（即ち、初期解像度とは異なる画面解像度を伴う環境）において用いられる場合に、高度な複雑性及び／または貧弱な性能による困難が生じる。こうした危機的な認識を考慮した上で、本発明は提供される。
【発明の開示】
【０００５】
あるＧＵＩを表示する方法は、初期画面解像度に対応する初期ＧＵＩを定義するウェブ基盤のテンプレートを規定することを含む。初期ＧＵＩは、限定ではなく、ボタンなどといった複数のＧＵＩ要素を含み、各要素は対応するパラメータを前記テンプレート内に有する。あるＧＵＩは、初期解像度とは異なる解像度に適するように変更されたパラメータを伴って表示装置上に表示される。
【０００６】
初期画面解像度にそれぞれ対応する複数のテンプレートが規定されてもよい。ＧＵＩ要素のパラメータは、要素の幅、要素の高さ、ＧＵＩウィンドウの少なくとも２つの直交する境界からの要素の距離、及び要素内に表示されるフォントのサイズを含んでもよい。いくつかの実施形態において、前記初期解像度とは異なる画面解像度が検知された場合には、要素のレイアウトは、初期レイアウトから変更することができる。
【０００７】
別の観点として、プロセッサは、初期画面解像度とは異なる画面解像度に合わせてＧＵＩを拡大／縮小（ｓｃａｌｅ）するロジックを実行する。前記ロジックは、要素列内のＧＵＩ要素の数を変更することを含む。
【０００８】
さらに別の観点として、あるシステムは、テレビジョン、及びテレビジョンに接続されテレビジョンにＧＵＩを表示させるプロセッサなどの音声／映像装置を含む。前記ＧＵＩは、制御ボタンの列であって、少なくとも選択ボタンの表示順を変更させる選択可能な制御ボタンをいくつか伴う列を含む。また、前記ＧＵＩは、選択ボタンの列を少なくとも２つ含む。ある選択ボタンは、テレビジョン上に再生するマルチメディアストリームをそれぞれ選択するために用いることができる。
【０００９】
本発明の詳細は、その構成及び働きの両方に関して、同等の部分に同等の符号が付された添付図面を参照することにより、最もよく理解され得る。
【発明を実施するための最良の形態】
【００１０】
まず図１を参照すると、一般的に符号１０を付されたシステム１０であって、ＧＵＩウィンドウ１６内にグラフィカルユーザインターフェース（ＧＵＩ）の表示を行うためにその全体または一部を用い得る映像表示画面１４を有する音声／映像システム１２を含むシステムが示されている。限定ではなく例として、音声／映像システム１２は、単独で、または内部か外部にゲーム機及び／若しくは内部か外部にディスク再生装置を組み合わされたテレビジョンを含んでもよく、従って前記音声／映像システム１２は、プロセッサ１８及びデータ保存装置２０を、共にテレビジョンの筐体内または別個のセットトップボックス若しくは他のコンピュータ装置内に含んでもよい。プロセッサ１８は、データ保存装置２０内のデータにアクセスして本明細書で説明するロジックを実行する。
【００１１】
図１に示されているように、システム１０は、さらに例えば光学ディスクを読み取るための光学的装置などの１つ以上のドライＷブを有することのできるディスク交換器（ｄｉｓｃ  ｃｈａｎｇｅｒ）２２であって、利用者のＧＵＩの操作に応答して、得られたマルチメディアストリームを音声／映像システム１２に再生のために送信するディスク交換機２２を含んでもよい。従って、さらにシステム１０は、音声／映像システム１２のＧＵＩを作動させるために用いることのできる、遠隔制御器２４、または音声認識装置を含む利用者により操作可能な他の適した入力装置を含むことができる。
【００１２】
いくつかの実施形態において、画面１４の解像度は、例えば４ｘ３の標準画質であってもよく、例えば１６ｘ９若しくは１６ｘ１０の高画質であってもよく、または他の解像度であってもよい。いずれにしろ、以下にさらに説明するように、ＧＵＩは自動的にサイズ変更され、いくつかの例においては画面解像度及び／またはＧＵＩウィンドウ１６の利用者定義の（ｕｓｅｒ−ｄｅｆｉｎｅｄ）サイズに合わせて適切に再構成される。いずれの場合においても、プロセッサ１８は、インターネット２６と要求に応じて通信することができる。
【００１３】
図２〜５は、図６のロジック及び後述の擬似コードが実行された後に、異なる解像度の様々な画面上に当面のＧＵＩがどのように現れるかを示している。図２には、上端部２８及び左端部３０といった直交する境界によって、ＧＵＩウィンドウが部分的に定義されている。ＧＵＩ自体は、制御ボタン３２と、制御ボタン３２での選択に応じて配置される選択ボタン３４とを含んでもよい。例えば、図示しているように、利用者は制御ボタン３２をクリックして、選択ボタン３２をアルバム順またはアーティスト順に並べることができる。また、利用者は、“展示ビュー（ｇａｌｌｅｒｙ  ｖｉｅｗ）”制御ボタンを適切に操作することにより、図２及び図３に示した一覧形式の代わりに、選択ボタンをサムネイル（図４及び図５を参照しながら後にさらに検討する）として表示することを選択することができる。コピー及びヘルプ制御ボタンもまた、コピー及びヘルプ機能をいわゆる当業者に知られた原理に応じて起動するために提供され得る。
【００１４】
いずれの場合にも、限定ではなく例として、選択ボタン３４を用いて示されているように、ＧＵＩのボタンは、図２に示された第１の解像度の画面上に表示される際の幅“Ｗ”及び長さ“Ｌ”と、図３に示された第２の解像度の画面上に表示される際の異なる幅“Ｗ”及び／または長さ“Ｌ”とを有してもよく、それにより、図示されているように全体的なボタンのサイズ及び／または幅に対する長さの比率が解像度によって変化し得ることが理解される。同じ原理は、同一の画面解像度であってＧＵＩウィンドウ１６の異なる利用者定義のサイズについて、ボタンのサイズ及び構成を変更するために用いられ得る。
【００１５】
さらに、ＧＵＩ要素の画面レイアウトは、画面解像度及び／または利用者によって規定されるＧＵＩウィンドウのサイズに依存して変更することができる。これは図４及び図５を参照すると分かるように、選択ボタンが、単純な標題の一覧から、内在する選択されたオブジェクト（例えばディスク上の映像）のサムネイルに再構成されている。図４では２列の選択ボタン３４がＧＵＩウィンドウ１６内に規定されているが、図５では、より広い画面解像度またはより広い利用者定義のＧＵＩウィンドウについて、選択ボタン３４が図示されているように３列に配置され得る。選択ボタンがサムネイルとして構成される際には、かつて“展示ビューへ変更”と示されていた制御ボタン３２は、“一覧ビュー（ｌｉｓｔ  ｖｉｅｗ）へ変更”と示すように変更され、利用者が図２及び図３に示された一覧形式の選択ボタン３４に戻すことができるようになっている。
【００１６】
一般的に、前述の機能性を生み出すロジックは、まずＧＵＩボタンの初期サイズの規定と初期解像度または複数の初期解像度に合わせた配置とから開始される。１つの限定ではない実施形態において、初期レイアウトは、ＨＴＭＬ（ＨｙｐｅｒＴｅｘｔ  Ｍａｒｋｕｐ  Ｌａｎｇｕａｇｅ）またはＸＭＬ（ｅＸｔｅｎｓｉｂｌｅ  Ｍａｒｋｕｐ  Ｌａｎｇｕａｇｅ）といったウェブ基盤の言語を用いて規定され、ＧＵＩ要素はスタイルシートを用いて定義してもよい。１つの実施形態において、各ＧＵＩボタンは、自身の幅“Ｗ”及び長さ“Ｌ”の条件、及び例えばＧＵＩウィンドウ１６の左端部３０と上端部２８からの位置の観点により定義される。ボタン内に表示されるフォントのサイズもまた規定することができる。ある解像度について、１つ、即ち唯一のテンプレートを規定し、ＧＵＩ要素のサイズ変更と再構成とをその場で計算してもよく、または共通的な解像度ごとに複数のテンプレートを規定してもよい（例えば、４ｘ３用に１つ、１６ｘ９用に１つ、１６ｘ１０用に１つ）。
【００１７】
ＧＵＩを表示させるためには、ウェブブラウザが起動され得る。そして、前述の開示に従ってＧＵＩの表示のサイズ変更及び／または再構成を行うために、図６のロジックが起動され得る。
【００１８】
起動状態３６から開始したロジックはブロック３８に移り、ＧＵＩが表示される画面の解像度が取得される。通常、プロセッサ１８が画面解像度の情報を保持している。ブロック４０に処理が進むと、適切なＧＵＩテンプレートが、例えば保存装置２０から読み込まれる。唯一の初期テンプレートが用いられる場合には、初期テンプレートはブロック４０にて読み込まれるが、複数のテンプレートが用いられる場合には、検知された解像度に最も近く適合するテンプレートが読み込まれる。
【００１９】
ブロック４２に処理が進むと、サイズ変更及び／または再構成が要求される要素を検出するために、テンプレートファイルが検査される。サイズ変更及び／または再構成は、初期テンプレートの仮の画面解像度が実際の画面解像度に適合しない場合、または利用者がＧＵＩウィンドウのサイズを再定義した場合に生じ得る。条件分岐の菱形４４において、単純に新しい要素の縮尺が既知でないか場合には、ロジックはブロック４６へ移動して新たなＧＵＩファイルを生成し、状態４８において終了する。
【００２０】
一方、新たな縮尺が既知であって新たな縮尺に適合する他のテンプレートが利用可能である場合には、ロジックはブロック５０に移動し、影響のあった要素について古い値が削除され、ブロック５２において、新しいテンプレートからの新たな縮尺の値に置き換えられる。また代わりに、前述の原理に従って、新しいテンプレートが存在しない場合には、新たな値がその場で計算され得る。一例として、幅“Ｗ”、長さ“Ｌ”、例えばＧＵＩウィンドウ１６の左端部３０及び上端部２８からの位置、及び要素内に表示されるテキストのフォントサイズの中の１つ以上について、新たなＧＵＩウィンドウの領域内に適合させるための適切な修正が行われ得る。例えば、現在の画面解像度と新しい画面解像度との間の比率に比例させて、ＧＵＩ要素を拡大し、または縮小させることができる。
【００２１】
以下の擬似コードは、限定としてではなく、実装し得るさらなる詳細を提供する。コード内で触れられているタイマーは、利用者がサイズ変更命令を素早く繰返し入力した場合に再構成を行い過ぎることを回避するために実装される。
【００２２】
/*
以下の擬似コードは、ＨＴＭＬによるユーザインターフェース内の要素を動的にサイズ変更する方法を実装している。
/*これら変数は本実装を通して使用される*/
Timer  tScheduledTimer  =  null;  //  サイズ変更タイマーがスケジューリングされているかを示す変数
TIMEOUT  =  ZZZZZZZZZZZ;  //  動的サイズ変更を生じる頻度を決定するタイムアウト値を持つ変数
DEFAULT_SCALING  =  ZZZZZZ;  //  ＧＵＩ要素の基準となる寸法を設定する値である。
//  動的にサイズ変更される要素はこの寸法に基づく。
/*
名称:  OnDetectScreenSizeChange()
説明:  本関数またはコールバックは画面の寸法が変更された時点を検知する。本関数は直接要素を変更するのではなく、代わりに変更を行うプロセスをスケジューリングする。その裏にある理由は、画面が短時間内に複数回変更され得るためである。これらについての毎回の動的サイズ変更処理は過度の処理量を引き起こす原因となる。
入力:  無し
出力:  無し
*/
function  OnDetectScreenSizeChange()
{
//  既にスケジューリングされたタイマーがあればキャンセルし、新たなタイマーを開始する
if(tScheduledTimer){
function  clearTimer(tScheduledTimer);
}
//  ここでタイマーをスケジューリングし、未来の時点で（１秒後？２秒後？）プロセスを開始する
tScheduledTimer  =  function  SetTimer("ScheduleResizing()",TIMEOUT);
}
/*
名称:  ScheduleResizing()
説明:  本関数はスケジューリングされたサイズ変更イベントが完了した後にトリガされる。本関数は新しいレイアウトを計算して生成し、その新たなレイアウトを現時点のユーザインターフェースに適用する。
入力:  無し
出力:  無し
*/
function  ScheduleResizing()
{
newScaling  =  function  CalculateNewScaling():
newLayout  =  function  CreateNewLayout(newScaling);
function  UserNewLayout(newLayout);
}
/*
名称:  CalculateNewScaling()
説明:  本関数は動的サイズ変更処理に用いられるべき新たな比率を計算する。
入力:  無し
出力:  用いられるべき新たな比率
*/
function  CalculateNewScaling()
{
oldScaling  =  DEFAULT_SCALING:
//  サイズ変更されたウィンドウの寸法を取得する。これを計算する実際の方法はＧＵＩクライアントが実行される環境及びプラットフォームに依存する。
newDimensions  =  GetWindowDimensions();
newScaling  =  Scale(newDimensions,  oldScaling);
return  newScaling;
}
/*
名称:  CreateNewLayout()
説明:  本関数は個々のＧＵＩ要素についてループし、それらの座標位置の再設定とサイズ変更とを行う。本プロセスとしてとり得るアーキテクチャの詳細が本願の新機軸と共に含まれる。
入力:  無し
出力:  用いられるべき新たなレイアウト
*/
function  CreateNewLayout(newScaling)
{
for  each  ItemOnPage(element)
{
newLayout(element)  =  RepositionAndResize(element,  newScaling);
}
return  newLayout;
}
/*
名称:  UseNewLayout()
説明:  本関数はＵＩクライアントが新たなレイアウトを用いるトリガとなる。
入力:  newLayout
出力:  無し
*/
function  UseNewLayout(newLayout)
{
//  新たなレイアウトを用いる。本関数を実装する実際の方法はＧＵＩクライアントが実行される環境及びプラットフォームに依存する。
CurrentPage.layout  =  newLayout;
}
【００２３】
上記に加えて、本発明においては、ボタンまたは他のＧＵＩオブジェクトが縮小され、オブジェクト内のテキストが長過ぎて小さくなった領域内に表示し得ないことが認識される。それに応じて、新たな小さくなったＧＵＩオブジェクトの領域内に適合し得る所与のフォントサイズについてのテキストの最大量が計算され、意図されたテキストがその量に合わせて切断者（ｃｒｏｐｐｅｒ）となる。限定ではなく、テキストを切り取る１つのやり方には、例えば“ｔｈｅ  ｓｋｙ  ｉｓ  ｂｌｕｅ  ａｎｄ  ｒａｉｎｙ”を“ｔｈｅ  ｓｋｙ  ｉｓ  ｂ．．．”とするように、テキストの後方を新たな領域内に合わせて必要に応じて多くの終了文字に置き換えることを含み、またはテキストをフェードアウトさせるためにアルファブレンディングを用いることができ、例えば“ｔｈｅ  ｓｋｙ  ｉｓ  ｂｌｕｅ  ａｎｄ  ｒａｉｎｙ”を“ｔｈｅ  ｓｋｙ  ｉｓ  ｂｌｕｅ”とし、“ｂｌｕｅ”の最後の数文字を完全に透明になるまで徐々に薄くさせることができる。
【００２４】
“ウェブ基盤のＧＵＩの動的サイズ変更のためのシステム及び方法”は、本明細書において詳細に示され、及び説明されており、本発明に係る前述のオブジェクトの全てを包含することができる一方、本発明の技術的範囲は、添付された特許請求の範囲によってのみ限定されるものと理解されるべきである。
【図面の簡単な説明】
【００２５】
【図１】本発明に係る限定ではない１つの実施形態のブロック図である。
【図２】第１の画面サイズまたは利用者定義のＧＵＩウィンドウサイズに合わせて構成されたＧＵＩの、限定ではない画面ショットである。
【図３】第２の画面サイズまたは利用者定義のＧＵＩウィンドウサイズに合わせて構成されたＧＵＩの、限定ではない画面ショットである。
【図４】第１の画面サイズまたは利用者定義のＧＵＩウィンドウサイズに合わせて構成されたＧＵＩの、限定ではない別の画面ショットである。
【図５】第２の画面サイズまたは利用者定義のＧＵＩウィンドウサイズに合わせて構成されたＧＵＩの、限定ではない他の画面ショットである。
【図６】１つの再構成ロジックの限定ではない実施形態のフローチャートである。
【図１】
2009503722.tif 000003
【図２】
2009503722.tif 000004
【図３】
2009503722.tif 000005
【図４】
2009503722.tif 000006
【図５】
2009503722.tif 000007
【図６】
2009503722.tif 000008
【国際調査報告】
2009503722.tif 000009