(57)【要約】【課題】本技術の目的は、ユーザの利用する画面サイズが変更される際にもユーザインターフェースの対応を分かり易く表示することが可能な情報処理装置、画像表示システム、プログラム及び画像表示処理方法を提供すること【解決手段】本技術に係る情報処理装置は、パーツレイアウト取得部と、パーツ配置部と、アニメーション生成部とを具備する。パーツレイアウト取得部は、第１の表示画像におけるユーザインターフェースパーツの第１のパーツレイアウトと、第２の表示画像におけるユーザインターフェースパーツの第２のパーツレイアウトを取得する。パーツ配置部は、第１の表示画像において、第２のパーツレイアウトに従ってユーザインターフェースパーツを配置する。アニメーション生成部は、パーツ配置部によって第２のパーツレイアウトに従って配置されたユーザインターフェースパーツを、第１のパーツレイアウトとなるようにアニメーションさせる。【選択図】図３
2013186701.tif 000002
【特許請求の範囲】
【請求項１】
第１の表示画像におけるユーザインターフェースパーツのレイアウトである第１のパーツレイアウトと、第２の表示画像におけるユーザインターフェースパーツレイアウトである第２のパーツレイアウトを取得するパーツレイアウト取得部と、
前記第１の表示画像において、前記第２のパーツレイアウトに従ってユーザインターフェースパーツを配置するパーツ配置部と、
前記パーツ配置部によって前記第２のパーツレイアウトに従って配置されたユーザインターフェースパーツを、前記第１のパーツレイアウトとなるようにアニメーションさせるアニメーション生成部と
を具備する情報処理装置。
【請求項２】
請求項１に記載の情報処理装置であって、
前記第１の表示画像は、前記情報処理装置の表示画面に表示される表示画像であり、
前記第２の表示画像は、前記情報処理装置とは異なる情報処理装置の表示画面に表示される表示画像である
情報処理装置。
【請求項３】
請求項１に記載の情報処理装置であって、
前記第１の表示画像は、前記情報処理装置が第１の姿勢にあるときに前記情報処理装置の表示画面に表示される表示画像であり、
前記第２の表示画像は、前記情報処理装置が第２の姿勢にあるときに前記表示画面に表示される表示画像である
情報処理装置。
【請求項４】
請求項１に記載の情報処理装置であって、
前記アニメーション生成部は、前記第２のパーツレイアウトに従って配置されたユーザインターフェースパーツを、前記第１のパーツレイアウトとなるように移動させるアニメーションを生成する
情報処理装置。
【請求項５】
請求項１に記載の情報処理装置であって、
前記アニメーション生成部は、前記第２のパーツレイアウトに従って配置されたユーザインターフェースパーツを、前記第１のパーツレイアウトとなるように変形させるアニメーションを生成する
情報処理装置。
【請求項６】
請求項１に記載の情報処理装置であって、
前記アニメーション生成部は、前記第２のパーツレイアウトに従って配置されたユーザインターフェースパーツを、前記第１のパーツレイアウトとなるように透明化させるアニメーションを生成する
情報処理装置。
【請求項７】
請求項１に記載の情報処理装置であって、
前記アニメーション生成部は、前記第２のパーツレイアウトに従って配置されたユーザインターフェースパーツを、前記第１のパーツレイアウトとなるようにアニメーションさせ、前記第２の表示画像において表示されていたユーザインターフェースパーツとなるようにスクロールさせる
情報処理装置。
【請求項８】
第１のパーツレイアウトを含む第１の表示画像を表示する第１の情報処理装置と、
第２のパーツレイアウトを含む第２の表示画像を表示する第２の情報処理装置と、
前記第１の情報処理装置及び前記第２の情報処理装置と接続され、前記第１の情報処理装置に前記第１のパーツレイアウトを提供し、前記第２の情報処理装置に前記第２のパーツレイアウトを提供するサーバと
を具備する画像表示システム。
【請求項９】
請求項８に記載の画像表示システムであって、
前記第１の情報処理装置は、前記第１のパーツレイアウトと前記第２のパーツレイアウトを取得するパーツレイアウト取得部と、前記第１の表示画像において前記第２のパーツレイアウトに従ってユーザインターフェースパーツを配置するパーツ配置部と、前記パーツ配置部によって前記第２のパーツレイアウトに従って配置されたユーザインターフェースパーツを前記第１のパーツレイアウトとなるようにアニメーションさせるアニメーション生成部とを有する
画像表示システム。
【請求項１０】
第１の表示画像におけるユーザインターフェースパーツのレイアウトである第１のパーツレイアウトと、第２の表示画像におけるユーザインターフェースパーツレイアウトである第２のパーツレイアウトを取得するパーツレイアウト取得部と、
前記第１の表示画像において、前記第２のパーツレイアウトに従ってユーザインターフェースパーツを配置するパーツ配置部と、
前記パーツ配置部によって前記第２のパーツレイアウトに従って配置されたユーザインターフェースパーツを、前記第１のパーツレイアウトとなるようにアニメーションさせるアニメーション生成部と
として情報処理装置を機能させるプログラム。
【請求項１１】
パーツレイアウト取得部が、第１の表示画像におけるユーザインターフェースパーツのレイアウトである第１のパーツレイアウトと、第２の表示画像におけるユーザインターフェースパーツレイアウトである第２のパーツレイアウトを取得し、
パーツ取得部が、前記第１の表示画像において、前記第２のパーツレイアウトに従ってユーザインターフェースパーツを配置し、
アニメーション生成部が、前記パーツ配置部によって前記第２のパーツレイアウトに従って配置されたユーザインターフェースパーツを、前記第１のパーツレイアウトとなるようにアニメーションさせる
画像表示方法。
【発明の詳細な説明】
【技術分野】
【０００１】
本技術は、ユーザインターフェースパーツが含まれる表示画像を生成する情報処理装置、画像表示システム、プログラム及び画像表示方法に関する。
【背景技術】
【０００２】
ＲＵＩ（Remote User Interface)は、ある機器（被操作機器）のＵＩ(User Interface)を別の機器（操作機器）の画面上に表示させ、操作機器の表示画面を通じて被操作機器の操作を可能とするものである。例えば、ＰＣ（ Personal computer)を被操作機器として、スマートフォンを操作機器として用いる場合等にＲＵＩが利用される。
【０００３】
ここで、被操作機器と操作機器の画面サイズ（解像度や縦横比等）は相違する場合が一般的であり、それぞれの画面サイズにおいてユーザが利用し易いＵＩのレイアウトが異なることが多い。しかしながら、それぞれの機器において画面サイズに適したＵＩレイアウトが表示される場合、ユーザが操作機器を切り替えた際にＵＩレイアウトの違いに戸惑ってしまう可能性がある。
【０００４】
これは単一の機器の場合も同様である。近年、スマートフォンやタブレット型ＰＣ等、機器の姿勢（向き）を検出するセンサを搭載し、機器の姿勢に応じて表示画像の向きを変更するものが多く存在する。このような機器では、機器を回転させた際にＵＩレイアウトも表示画像の向きに合わせて変更されるものが多く、ユーザが戸惑ってしまう可能性がある。
【０００５】
例えば、特許文献１には、表示手段の解像度が変更された際に、変更前の解像度の表示画像を一時的に表示させる画像表示システムが開示されている。
【先行技術文献】
【特許文献】
【０００６】
【特許文献１】特開２０１１−１９８１１８号公報
【発明の概要】
【発明が解決しようとする課題】
【０００７】
しかしながら、特許文献１に記載のような画像表示システムにおいては、解像度の変更前後のＵＩレイアウトに大きな相違がある場合や、ＵＩパーツのデサインが異なる場合、表示される情報量が大きく異なる場合等において変更前後のＵＩアレイアウトで表示される内容の対応付けが困難であり、ユーザが戸惑う場合が考えられる。
【０００８】
以上のような事情に鑑み、本技術の目的は、ユーザの利用する画面サイズが変更される際にもユーザインターフェースの対応を分かり易く表示することが可能な情報処理装置、画像表示システム、プログラム及び画像表示方法を提供することにある。
【課題を解決するための手段】
【０００９】
以上のような事情に鑑み、本技術の一形態に係る情報処理装置は、パーツレイアウト取得部と、パーツ配置部と、アニメーション生成部とを具備する。
上記パーツレイアウト取得部は、第１の表示画像におけるユーザインターフェースパーツのレイアウトである第１のパーツレイアウトと、第２の表示画像におけるユーザインターフェースパーツレイアウトである第２のパーツレイアウトを取得する。
上記パーツ配置部は、上記第１の表示画像において、上記第２のパーツレイアウトに従ってユーザインターフェースパーツを配置する。
上記アニメーション生成部は、上記パーツ配置部によって上記第２のパーツレイアウトに従って配置されたユーザインターフェースパーツを、上記第１のパーツレイアウトとなるようにアニメーションさせる。
【００１０】
この構成によれば、第２の表示画像において利用されていた第２のパーツレイアウトに従って、第１の表示画像においてユーザインターフェースパーツが表示され、第１のパーツレイアウトになるようにアニメーションされる。したがって、ユーザは、第１の表示画像において、第２の表示画像とのユーザインターフェースパーツの対応関係を容易に理解することが可能となる。
【００１１】
上記第１の表示画像は、上記情報処理装置の表示画面に表示される表示画像であり、上記第２の表示画像は、上記情報処理装置とは異なる情報処理装置の表示画面に表示される表示画像であってもよい。
【００１２】
この構成によれば、ユーザが利用する情報処理装置を切り替えた際、切り替え後の情報処理装置の表示画像（第１の表示画像）と切り替え前の情報処理装置の表示画像（第２の表示画像）とのユーザインターフェースパーツの対応関係を容易に理解することが可能となる。
【００１３】
上記第１の表示画像は、上記情報処理装置が第１の姿勢にあるときに上記情報処理装置の表示画面に表示される表示画像であり、上記第２の表示画像は、上記情報処理装置が第２の姿勢にあるときに上記表示画面に表示される表示画像であってもよい。
【００１４】
この構成によれば、その姿勢によって表示画像の向きが変化する情報処理装置において、ユーザが情報処理装置の姿勢を変更した際、変更後の表示画像（第１の表示画像）と変更前の表示画像（第２の表示画像）とのユーザインターフェースパーツの対応関係を容易に理解することが可能となる。
【００１５】
上記アニメーション生成部は、上記第２のパーツレイアウトに従って配置されたユーザインターフェースパーツを、上記第１のパーツレイアウトとなるように移動させるアニメーションを生成してもよい。
【００１６】
この構成によれば、第２のパーツレイアウトと第１のパーツレイアウトの間でユーザインターフェースパーツの配置が異なるときに、第２のパーツレイアウトに従って配置されたユーザインターフェースパーツを、第１のパーツレイアウトとなるようにアニメーションさせることができる。
【００１７】
上記アニメーション生成部は、上記第２のパーツレイアウトに従って配置されたユーザインターフェースパーツを、上記第１のパーツレイアウトとなるように変形させるアニメーションを生成してもよい。
【００１８】
この構成によれば、第２のパーツレイアウトと第１のパーツレイアウトの間でユーザインターフェースパーツの形状及び大きさが異なるときに、第２のパーツレイアウトに従って配置されたユーザインターフェースパーツを、第１のパーツレイアウトとなるようにアニメーションさせることができる。
【００１９】
上記アニメーション生成部は、上記第２のパーツレイアウトに従って配置されたユーザインターフェースパーツを、上記第１のパーツレイアウトとなるように透明化させるアニメーションを生成してもよい。
【００２０】
この構成によれば、第２のパーツレイアウトにおけるユーザインターフェースパーツに対応するユーザインターフェースパーツが第１のパーツレイアウトにおいて存在しないときに、第２のパーツレイアウトに従って配置されたユーザインターフェースパーツを、第１のパーツレイアウトとなるようにアニメーションさせることができる。
【００２１】
上記アニメーション生成部は、上記第２のパーツレイアウトに従って配置されたユーザインターフェースパーツを、上記第１のパーツレイアウトとなるようにアニメーションさせ、上記第２の表示画像において表示されていたユーザインターフェースパーツとなるようにスクロールさせてもよい。
【００２２】
この構成によれば、第１の表示画像において、第２の表示画像に表示されていたユーザインターフェースパーツとなるようにユーザインターフェースパーツがスクロールされるため、ユーザが第２の表示画像を用いて実行していた操作入力を第１の表示画像においても連続的に実行することが可能となる。
【００２３】
以上のような事情に鑑み、本技術の一形態に係る画像表示システムは、第１の情報処理装置と、第２の情報処理装置と、サーバとを具備する。
上記第１の情報処理装置は、第１のパーツレイアウトを含む第１の表示画像を表示する。
上記第２の情報処理装置は、第２のパーツレイアウトを含む第２の表示画像を表示する。
上記サーバは、上記第１の情報処理装置及び上記第２の情報処理装置と接続され、上記第１の情報処理装置に上記第１のパーツレイアウトを提供し、上記第２の情報処理装置に上記第２のパーツレイアウトを提供する。
【００２４】
上記第１の情報処理装置は、上記第１のパーツレイアウトと上記第２のパーツレイアウトを取得するパーツレイアウト取得部と、上記第１の表示画像において上記第２のパーツレイアウトに従ってユーザインターフェースパーツを配置するパーツ配置部と、上記パーツ配置部によって上記第２のパーツレイアウトに従って配置されたユーザインターフェースパーツを上記第１のパーツレイアウトとなるようにアニメーションさせるアニメーション生成部とを有してもよい。
【００２５】
本技術の一形態に係るプログラムは、パーツレイアウト取得部と、パーツ配置部と、アニメーション生成部とを具備する。
上記パーツレイアウト取得部は、第１の表示画像におけるユーザインターフェースパーツのレイアウトである第１のパーツレイアウトと、第２の表示画像におけるユーザインターフェースパーツレイアウトである第２のパーツレイアウトを取得する。
上記パーツ配置部は、上記第１の表示画像において、上記第２のパーツレイアウトに従ってユーザインターフェースパーツを配置する。
上記アニメーション生成部は、上記パーツ配置部によって上記第２のパーツレイアウトに従って配置されたユーザインターフェースパーツを、上記第１のパーツレイアウトとなるようにアニメーションさせる。
【００２６】
本技術の一形態に係る画像表示方法は、パーツレイアウト取得部が、第１の表示画像におけるユーザインターフェースパーツのレイアウトである第１のパーツレイアウトと、第２の表示画像におけるユーザインターフェースパーツレイアウトである第２のパーツレイアウトを取得する。
パーツ取得部が、上記第１の表示画像において、上記第２のパーツレイアウトに従ってユーザインターフェースパーツを配置する。
アニメーション生成部が、上記パーツ配置部によって上記第２のパーツレイアウトに従って配置されたユーザインターフェースパーツを、上記第１のパーツレイアウトとなるようにアニメーションさせる。
【発明の効果】
【００２７】
以上のように、本技術によれば、ユーザの利用する画面サイズが変更される際にもユーザインターフェースの対応を分かり易く表示することが可能な情報処理装置、画像表示システム、プログラム及び画像表示方法を提供することが可能となる。
【図面の簡単な説明】
【００２８】
【図１】本技術の第１の実施形態に係る画像表示システムの構成を示す模式図である。
【図２】上記画像表示システムを構成する第１情報処理装置のハードウェア構成を示す模式図である。
【図３】上記第１情報処理装置の機能的構成を示すブロック図である。
【図４】上記第１情報処理装置に表示される第１表示画像において第２パーツレイアウトに従って配置されたＵＩパーツを示す模式図である
【図５】上記第１情報処理装置のアニメーション生成部によるＵＩパーツのアニメーションの様子を示す模式図である。
【図６】上記画像表示システムの動作を示すフローチャートである。
【図７】上記第１情報処理装置の動作を示すフローチャートである。
【図８】上記アニメーション生成部によるアニメーションの態様を示す模式図である。
【図９】上記アニメーション生成部によるアニメーションの態様を示す模式図である。
【図１０】上記アニメーション生成部によるアニメーションの態様を示す模式図である。
【図１１】上記アニメーション生成部によるアニメーションの態様を示す模式図である。
【図１２】上記アニメーション生成部によるアニメーションの態様を示す模式図である。
【図１３】上記アニメーション生成部によるアニメーションの態様を示す模式図である。
【図１４】ＵＩパーツの表示又はアニメーションに必要な情報例の凡例である。
【図１５】ＵＩパーツを移動させるアニメーションにおける情報例である
【図１６】ＵＩパーツを透過処理するアニメーションにおける情報例である。
【図１７】上記アニメーション生成部によるＵＩパーツのスクロールの態様を示す模式図である。
【図１８】上記アニメーション生成部のスクロール動作を示すフローチャートである。
【図１９】ＵＩパーツのスクロールにおける情報例である
【図２０】表示画像に表示するＵＩパーツの選択を示す模式図である
【図２１】表示画像に表示するＵＩパーツの選択を示す模式図である
【図２２】上記画像表示システムの情報伝送を示すシーケンス図である。
【図２３】上記画像表示システムを構成するサーバの動作を示すフローチャートである。
【図２４】上記サーバの動作を示すフローチャートである。
【図２５】遷移元ＵＩパーツ情報の例である。
【図２６】遷移元ＵＩ状態情報の例である。
【図２７】本技術の第２の実施形態に係る情報処理装置を示す模式図である。
【図２８】上記情報処理装置のハードウェア構成を示す模式図である。
【図２９】上記情報処理装置の機能的構成を示すブロック図である
【図３０】上記情報処理装置が第２姿勢から第１姿勢に変更されたときの表示画像を示す模式図である。
【図３１】上記情報処理装置のアニメーション生成部によるＵＩパーツのアニメーションの様子を示す模式図である。
【図３２】上記情報処理装置の動作を示すフローチャートである
【発明を実施するための形態】
【００２９】
（第１の実施形態）
本技術の第１の実施形態に係る画像表示システムについて説明する。
【００３０】
［画像表示システムの構成］
図１は本実施形態に係る画像表示システム１００を示す模式図である。同図に示すように、画像表示システム１００は、第１情報処理装置１１０、第２情報処理装置１２０及びサーバ１３０から構成されている。
【００３１】
第１情報処理装置１１０は、ノート型、デスクトップ型あるいはタブレット型ＰＣ（Personal computer)、スマートフォン等の情報処理が可能な機器であり、ディスプレイ１１１を有する。なお、ディスプレイ１１１は、必ずしも第１情報処理装置１１０と同一の筐体に搭載されているものでなくてもよい。
【００３２】
第２情報処理装置１２０も、第１情報処理装置１１０と同様に各種ＰＣ、スマートフォン等であるものとすることができ、ディスプレイ１２１を有する。ディスプレイ１２１も必ずしも第２情報処理装置１２０と同一の筐体に搭載されているものでなくてもよい。
【００３３】
サーバ１３０は、第１情報処理装置１１０及び第２情報処理装置１２０の双方に接続され、第１情報処理装置１１０及び第２情報処理装置１２０との間で情報を授受する。サーバ１３０は第１情報処理装置１１０及び第２情報処理装置１２０と直接に接続されているものであってもよく、ネットワークを介して接続されているものであってもよい。
【００３４】
［情報処理装置の構成］
図２は、第１情報処理装置１１０のハードウェア構成を示す模式図である。同図に示すように、第１情報処理装置１１０は、ディスプレイ１１１に加え、表示インターフェース（以下、表示ＩＦ）１１２、入力インターフェース（以下、入力ＩＦ）１１３、通信インターフェース（以下、通信ＩＦ）１１４、ＣＰＵ（Central Processing Unit）１１５及び主記憶部１１６を有する。これらは互いにバス１１７によって接続されている。なお、ディスプレイ１１１はタッチ入力が可能なタッチパネルであるものとすることも可能であり、この場合、入力ＩＦ１１３もディスプレイ（タッチパネル）１１１に接続されているものとする。
【００３５】
ＣＰＵ１１５は、主記憶部１１６に記憶されたアプリケーションやＵＩ（User Interface)パーツ（後述）を読み込み、ディスプレイ１１１に表示される表示画像を生成して表示ＩＦ１１２に供給する。表示ＩＦ１１２は、ディスプレイ１１１を制御して表示画像を表示させる。入力ＩＦ１１３は、ユーザによる操作入力をＣＰＵ１１５に供給し、通信ＩＦ１１４はサーバ１３０との間で各種情報を送受信する。
【００３６】
情報処理装置１１０は、このようなハードウェア構成とソフトウェアの協働によって次のような機能的構成を実現する。図３は、情報処理装置１１０の機能的構成を示すブロック図である。同図に示すように、情報処理装置１１０は、パーツレイアウト取得部１０１、パーツ配置部１０２及びアニメーション生成部１０３を有する。
【００３７】
パーツレイアウト取得部１０１は、ディスプレイ１１１の表示画像（第１表示画像とする）及びディスプレイ１２１の表示画像（第２表示画像とする）のそれぞれにおけるＵＩ（User Interface)パーツのレイアウトを取得する。ＵＩパーツとは、ユーザインターフェースを構成する画像パーツであり、例えば、音楽再生アプリケーションを例にとると、再生ボタン、停止ボタン、音量アップボタン、音量ダウンボタン、曲名表示ダイアログボックス等である。この他にもＵＩパーツは、表示画像を構成するアプリケーションによって設定されるものとすることができる。
【００３８】
図１に示すディスプレイ１１１及びディスプレイ１２１には、同一のアプリケーションのＵＩパーツが表示されている。同図に示すように、ディスプレイ１１１及びディスプレイ１２１の表示画像サイズの違いによってユーザの利用に適するＵＩパーツのレイアウトは異なる。
【００３９】
例えば、ディスプレイ１１１がディスプレイ１２１より小さい場合には、フォントサイズが相対的に大きくなり、表示画像に表示可能な情報量が限定されるため、ディスプレイ１１１とディスプレイ１２１のそれぞれの表示画像では好適なＵＩパーツレイアウトが異なる場合がある。また、ディスプレイ１１１とディスプレイ１２１の形状（例えば縦横比）が異なる場合も同様に、好適なＵＩパーツレイアウトが異なる場合がある。さらに、情報処理装置１１０と情報処理装置１２０の入力方式が異なる場合（一方がタッチパネルであり、他方がマウス入力である場合等）も好適なＵＩパーツレイアウトが異なる場合がある。
【００４０】
パーツレイアウト取得部１０１は、サーバ１３０を介してディスプレイ１１１の表示画像におけるＵＩパーツレイアウト（第１パーツレイアウトとする）及びディスプレイ１２１の表示画像におけるＵＩパーツレイアウト（第２パーツレイアウトとする）を取得することができる。
【００４１】
パーツ配置部１０２は、ディスプレイ１１１の表示画像（第１表示画像）において第２パーツレイアウトに従ってＵＩパーツを配置する。図４は、第１表示画像において第２パーツレイアウトに従って配置されたＵＩパーツを示す模式図である。同図に示すように、ディスプレイ１１１とディスプレイ１２１の表示画像のサイズが異なる場合であっても、パーツ配置部１０２は第２パーツレイアウトとなるようにＵＩパーツＰを配置する。
【００４２】
この際、パーツ配置部１０２は、ディスプレイ１２１がディスプレイ１１１より大きい場合にはＵＩパーツが第１表示画像に収まるようにＵＩパーツを縮小するものとすることができる。また、パーツ配置部１０２は、ディスプレイ１２１がディスプレイ１１１より小さい場合にはＵＩパーツが第１表示画像に合致するようにＵＩパーツを拡大するものとすることができる。また、パーツ配置部１０２は、ディスプレイ１２１とディスプレイ１１１の大きさが同程度である場合には、ＵＩパーツの大きさを変更することなく配置するものとすることも可能である。さらに、パーツ配置部１０２は、ＵＩパーツＰの縦横比率を変更して表示することも可能である。
【００４３】
アニメーション生成部１０３は、第２パーツレイアウトに従って配置されたＵＩパーツを、第１パーツレイアウトとなるようにアニメーションさせる。図５は、アニメーション生成部１０３によるＵＩパーツのアニメーションの様子を示す模式図である。同図に示すように、アニメーション生成部１０３は、ＵＩパーツＰをパーツ単位で拡大、縮小、移動等させ、第１パーツレイアウトとなるように変化させる。アニメーション生成部１０３によるアニメーションの詳細については後述する。
【００４４】
第１情報処理装置１１０は以上のような構成を有する。
【００４５】
［画像表示システムの動作］
画像表示システム１００の動作について説明する。図６は、画像表示システム１００の動作を示すフローチャートである。
【００４６】
以下の説明においては、まず、第２情報処理装置１２０において特定のアプリケーションが動作し、第２情報処理装置１２０に対してのユーザによる操作入力が可能な状態となっているものとする。この状態で、ユーザによる切替指示（後述）が入力され、当該アプリケーションを操作可能な機器が第２情報処理装置１２０から第１情報処理装置１１０に切り替えられるものとする。即ちユーザは、第２情報処理装置１２０から当該アプリケーションを操作し、切り替え後に第１情報処理装置１１０から当該アプリケーションを操作するものとする。
【００４７】
まず、第２情報処理装置１２０によって、サーバ１３０からＵＩファイルが取得される（Ｓｔ１０１）。ＵＩファイルは、ＵＩレイアウト（第１パーツレイアウト及び第２パーツレイアウト）を構成するために利用される各ＵＩパーツのセット（以下、ＵＩセット）と、各ＵＩパーツのアニメーション前後に配置されるべき位置座標が記載されたファイルである。
【００４８】
ここで、ＵＩは、ＨＴＭＬ（HyperText Markup Language）やJavaScript（登録商標）、ＣＳＳ（Cascading Style Sheets）によって実装されるものとすることができる。この場合、各ＵＩパーツの表示位置は、ＨＴＭＬによるレイアウトエンジンとJavaScript（登録商標）やＣＳＳによる位置指定によって決定される。ＨＴＭＬ等のＵＩファイルは、ＵＩを表示するクライアント（第１情報処理装置１１０又は第２情報処理装置１２０）からの要求に応じてサーバ１３０から送出されるものとすることができ、クライアントは一般的なレイアウト処理を実行し、ＵＩを表示する。
【００４９】
サーバ１３０から送出されるＵＩファイルにおいて、各ＵＩパーツには、ＨＴＭＬの属性として、又はJacaScriptコードとして、そのＵＩパーツの識別子が付されているものとすることができる。また、各ＵＩファイルには、アニメーションに必要な情報、例えば、アニメーション前後での透明度や、表示や移動処理の時間タイミングが記載されているものとすることができる。なお、アニメーション前後のＵＩレイアウトが同一ファイルに記載されている必要はなく、例えばアニメーション後のＵＩレイアウトはアニメーションが発動されるタイミング（後述）等、任意のタイミングで取得されてもよい。
【００５０】
第２情報処理装置１２０は、サーバ１３０から取得したＵＩファイルを用いて、第２パーツレイアウトを実行する（Ｓｔ１０２）。具体的には、第２情報処理装置１２０は、ＵＩファイルに含まれるＵＩパーツを指定された表示位置に配置して第２表示画像を生成し、ディスプレイ１２１に表示させる。この段階でユーザは、ディスプレイ１２１に第２パーツレイアウトに従って表示されたＵＩパーツを用いて、第２情報処理装置１２０において動作しているアプリケーションを操作することが可能である。
【００５１】
続いて、レイアウト変更イベントが発生（Ｓｔ１０３）すると、サーバ１３０が第１情報処理装置１１０のＵＩパーツレイアウト（第１パーツレイアウト）を決定する（Ｓｔ１０４）。レイアウト変更イベントは、ユーザによる操作入力を受ける機器（操作機器）が、第２情報処理装置１２０から第１情報処理装置１１０に変更されるイベントであり、例えばユーザによる第１情報処理装置１１０への入力によって発生する。サーバ１３０によるパーツレイアウトの決定方法についての詳細は後述するが、ここではクライアントが第１情報処理装置１１０と特定され、第１パーツレイアウトが第１情報処理装置１１０用のパーツレイアウトとして決定されたものとする。
【００５２】
続いて、第１情報処理装置１１０は第１パーツレイアウトを有するか否かを確認する（Ｓｔ１０５）。第１情報処理装置１１０は第１パーツレイアウトを有していない場合（Ｓｔ１０５：Ｎｏ）、サーバ１３０から第１パーツレイアウトを取得する（Ｓｔ１０６）。第１情報処理装置１１０は第１パーツレイアウトをサーバ１３０から取得した場合（Ｓｔ１０６）又は、第１パーツレイアウトを有している場合（Ｓｔ１０５：Ｙｅｓ）にはアニメーションを実行する（Ｓｔ１０７）。
【００５３】
［第１情報処理装置の動作］
画像表示システム１００の動作における第１情報処理装置１１０の動作について説明する。図７は、第１情報処理装置１１０の動作を示すフローチャートである。同図に示すように、パーツレイアウト取得部１０１は、第１パーツレイアウト及び第２パーツレイアウトを取得する（Ｓｔ１１１）。第１パーツレイアウト及び第２パーツレイアウトは、第１情報処理装置１１０がサーバ１３０から取得するＵＩファイルに含まれている。
【００５４】
続いてパーツ配置部１０２は、第２パーツレイアウトに従ってＵＩパーツを配置する（Ｓｔ１１２）。具体的にはパーツ配置部１０２は、図５（ａ）に示すように、第２パーツレイアウトに従ってＵＩパーツＰが配置された表示画像を生成し、ディスプレイ１１１に表示させる。この際、パーツ配置部１０２は上述のように、ＵＩパーツＰの大きさをディスプレイ１１１に合わせて拡大／縮小するものとしてもよい。パーツ配置部１０２は、第２パーツレイアウトに従ってＵＩパーツＰが配置された表示画像を所定時間ディスプレイ１１１に表示させる。この所定時間は、ユーザが当該表示画像を認識できる程度の時間であればよく、適宜設定することが可能である。
【００５５】
次にアニメーション生成部１０３が、第２パーツレイアウトに従って配置されているＵＩパーツＰを、第１パーツレイアウトとなるようにアニメーションさせる（Ｓｔ１１３）。アニメーション生成部１０３は、図５（ａ）に示す第２パーツレイアウトに従って配置されたＵＩパーツＰが、図５（ｂ）に示す第１パーツレイアウトに従った配置になるように、ＵＩパーツＰのアニメーションを生成する。
【００５６】
アニメーション生成部１０３は、様々なバリエーションのアニメーションを生成するものとすることができる。以下、アニメーション生成部１０３によるＵＩパーツのアニメーションのについて説明する。
【００５７】
<ＵＩパーツのアニメーションについて>
図８乃至図１３は、アニメーション生成部１０３によるアニメーションの態様を示す模式図である。各図において図（ａ）は、アニメーション前（第２パーツレイアウト）のＵＩパーツＰの配置を示し、図（ｂ）はアニメーション中のＵＩパーツＰの態様を示し、図（ｃ）はアニメーション後（第１パーツレイアウト）のＵＩパーツＰの配置を示す。
【００５８】
図８に示すように、アニメーション生成部１０３は、図８（ａ）に示す第２パーツレイアウトに配置されたＵＩパーツＰを、図８（ｂ）に示すように移動させ、図８（ｃ）に示す第１パーツレイアウトに配置させることができる。アニメーション生成部１０３は、各ＵＩパーツＰを同時に移動させてもよく、それぞれ時間差を持って移動させてもよい。また、アニメーション前後で表示画像の大きさが相違する場合等には、アニメーション生成部１０３は、移動と共に各ＵＩパーツＰの大きさを変化させてもよい。
【００５９】
図９に示すように、アニメーション生成部１０３は、図９（ａ）に示す第２パーツレイアウトに配置されたＵＩパーツＰを、図９（ｂ）に示すように変化させながら移動させ、図９（ｃ）に示す第１パーツレイアウトに配置させることができる。アニメーション生成部１０３は、ＵＩパーツＰを変形させ、あるいはアニメーション前後のＵＩパーツＰを重ねあわせ、その透明度を次第に変化させることにより、ＵＩパーツＰを変化させるものとすることも可能である。
【００６０】
図１０に示すように、アニメーション生成部１０３は、図１０（ａ）に示す第２パーツレイアウトに配置されたＵＩパーツＰを、図１０（ｂ）に示すように透明度を変化させ、図１０（ｃ）に示す第１パーツレイアウトに配置させることができる。これは第１パーツレイアウトと第２パーツレイアウトにおいて対応するＵＩパーツＰが存在しない場合に有効である。
【００６１】
アニメーション生成部１０３は、移動前後で表示されるＵＩパーツＰの形状や色が異なる場合、それらを同時に移動させながら透明度を変更することで、簡易モーフィングアニメーションを生成することも可能である。図１１（ａ）に示すように、例えば、アニメーション生成部１０３は、移動前にのみ表示されるＵＩパーツＰを、図１１（ｂ）に示すようにそのＵＩパーツＰに対応する移動後のパーツ表示位置へ透明化処理を行いながら移動させる。一方、アニメーション生成部１０３は、移動後にのみ表示されるＵＩパーツＰは、移動前の対応するＵＩパーツＰの位置から半透明化処理を行いながら移動させ、最終的に透明度を０にする。アニメーション生成部１０３は、移動前のＵＩパーツＰと移動後のＵＩパーツＰの対応付けを、両ＵＩパーツＰへ識別子を付すことによって行い、同じ識別子を持つＵＩパーツＰののアニメーション処理を同時に発動させるものとすることができる。
【００６２】
また、アニメーション生成部１０３は、ＵＩパーツＰを直線的に移動させる場合に限らず、図１２に示すように、ＵＩパーツＰの大きさを変化させ、あるいは非直線的に移動させることも可能である。さらにアニメーション生成部１０３は、図１３に示すように、単純に透明化処理を行うＵＩパーツＰに関しては、他のＵＩパーツＰの移動完了後に、透明化処理を実施するものとすることも可能である。
【００６３】
アニメーション生成部１０３は、上記のようなアニメーション処理を組み合わせてもよい。例えばひとつのＵＩパーツに対しては移動及び変形させ、他のＵＩパーツに対しては透明度を変化させることも可能である。また、アニメーション生成部１０３は、ＵＩパーツＰを移動させるアニメーションにおいて、開始位置は必ずしも対応するＵＩパーツＰの位置から開始させる必要はなく、ユーザにわかりやすいように表現されれば良い。移動のタイミングや、透明化処理も同様である。また、アニメーション前後で形状の異なるＵＩパーツＰについては適切なモーフィング処理などを行ない、変形処理を適切に見せるこ
とも可能である。
【００６４】
各ＵＩパーツの表示又はアニメーションに必要な情報例について説明する。図１４は情報例の凡例であり、図１５はＵＩパーツを移動させるアニメーション（図８参照）における情報例、図１６はＵＩパーツを透過処理するアニメーション（図１０参照）における情報例である。
【００６５】
なお、下記の説明においては、実際のアプリケーションで利用している情報を抽象化したものであり、実データ形式を規定しているものではない。この情報は、アプリケーションプログラム内データとしてサーバ１３０からクライアント（第１情報処理装置１１０）へ送り出されるデータ集合のイメージである。
【００６６】
ただし、これらの情報が実プログラムと共に送り出されるか否かは実装依存である。また、すべての情報が一度に送り出される必要もない(図６参照)。サーバ１３０はクライアント情報をもとに送り出される情報を変化させる。どのように変化させるかは、サーバ実装及び送出される情報の提供方法に基づき、任意である。ＨＴＴＰ仕様に基づく実装であれば、User-Agent値などによる振り分けや種別ごとにＵＲＬ（Uniform Resource Locator）を変更するなどの手法が考えられる。
【００６７】
アプリケーションプログラムは表示したいＵＩパーツの識別子を利用し、表示位置に必要な情報や、アニメーションに必要な情報を取得する。図１５及び図１６に示す情報例に於いては、静的な配置情報はviewInfoにより概念的に示されている。アプリケーション要求に応じ、ここで示されていない情報が送出されても良く、また、各ＵＩパーツのデフォルト値やプログラム全体で異なる情報を事前共有することも考えられる。
【００６８】
transitionは遷移情報を包含している。各ＵＩパーツには、実装デフォルト値として基本遷移情報が内包されている事例も考えられ、送信されるデータはその一部で有りえる。本データを踏まえれば、例えば図１５のレイアウト再現にあたり、「青い円」を表示するにはBlueCircleで示されるidの情報を用いる。また、その情報内に於いて遷移前の状態ではpos0で示されるviewInfoを用いる。さらにpos0からpos1へのアニメーションでは、tidのpos0topos1を用いる。これら、どの挙動変化に於いてどの情報は用いるべきかプログラムとして組み込まれている。また「遷移前」の指し示す意味が、表示状態に於けるどの状態を指すのかもプログラム実装次第である。
【００６９】
<ＵＩパーツのスクロールについて>
アニメーション生成部１０３は、ＵＩパーツＰを自動的にスクロールさせるものとすることも可能である。図１７は、ディスプレイ１２１及びディスプレイ１１１の表示画像におけるスクロールの様子を示す模式図であり、図１８はアニメーション生成部１０３のスクロール動作を示すフローチャートである。
【００７０】
図１７（ａ）に示すように、第２情報処理装置１２０のディスプレイ１２１の表示画像として、第２パーツレイアウトに従ってＵＩパーツＰが配置されている状態で、ユーザによる操作入力により、図１７（ｂ）に示すようにＵＩパーツＰがスクロールされたものとする。この状態で、ユーザによる操作機器が第１情報処理装置１１０に切り替えられると、図１７（ｃ）に示すように、アニメーション生成部１０３は第１パーツレイアウトに従ってＵＩパーツＰをアニメーションさせる。さらにアニメーション生成部１０３は、図１７（ｄ）に示すようにＵＩパーツＰを、アニメーション前のスクロール位置（図１７（ｂ））へスクロールさせる。
【００７１】
アニメーション生成部１０３は、レイアウト変更イベント（ユーザによる操作機器切り替え入力）がなされる（Ｓｔ１２１）と、全ＵＩパーツＰが第１パーツレイアウトに変更されたかを確認する（Ｓｔ１２２）。全ＵＩパーツＰが第１パーツレイアウトに変更された場合（Ｓｔ１２２：Ｙｅｓ）には、アニメーション生成部１０３は、アニメーションを終了する。
【００７２】
全ＵＩパーツＰが第１パーツレイアウトに変更されていない場合（Ｓｔ１２２：Ｎｏ）には、アニメーション生成部１０３は、第１パーツレイアウトに変更されていないＵＩパーツＰを選択する（Ｓｔ１２３）。次にアニメーション生成部１０３は、当該ＵＩパーツＰがスクロール可能か否かを確認する（Ｓｔ１２４）。
【００７３】
ＵＩパーツＰがスクロール不可能な場合（Ｓｔ１２４：Ｎｏ）には、アニメーション生成部１０３は、当該ＵＩパーツＰを第１パーツレイアウトに変更する（Ｓｔ１２５）。ＵＩパーツＰがスクロール可能な場合（Ｓｔ１２４：Ｙｅｓ）には、アニメーション前に表示されていたＵＩパーツＰの位置を取得する（Ｓｔ１２６）。
【００７４】
アニメーション生成部１０３は、ＵＩパーツＰを第１パーツレイアウトに変更（Ｓｔ１２７）し、さらに上記アニメーション前に表示されていたＵＩパーツＰを取得するステップ（Ｓｔ１２６）において取得したＵＩパーツＰの位置へＵＩパーツＰをスクロールさせる（Ｓｔ１２８）。以上のようにして、アニメーション生成部１０３は、ＵＩパーツＰを第１パーツレイアウトに変更し、かつ操作機器の切り替え前の表示位置までＵＩパーツＰをスクロールさせることが可能である。
【００７５】
各ＵＩパーツのスクロールに必要な情報例について説明する。図１９はＵＩパーツのスクロールにおける情報例である。情報例の凡例は図１４を参照できる。id:ScrollBoxが示すＵＩパーツがスクロール可能パーツであることは、ＵＩパーツを構成するプログラムが知っている。また、スクロール可能ボックスは現在の表示領域にある内包アイテムを把握しており、その情報を取得できる。スクロール可能パーツは、内包アイテムを指定を通じ、プログラム的に表示対象領域を操作できるものとする。その際、表示領域変化が生じた場合には、スクロールに効果により、表示領域変化を指し示し得るものとする。但しこれらは必須実装要素ではなく、他プログラムや外部視覚効果により同等の効果を生じさせることも可能である。
【００７６】
<ＵＩパーツの選択について>
アニメーション生成部１０３は、第２パーツレイアウトと第１パーツレイアウトにおいて表示画像に含まれるＵＩパーツＰが相違する場合、表示画像に表示するＵＩパーツＰの選択が必要になる場合がある。図２０及び図２１は、表示画像に表示するＵＩパーツＰの選択を示す模式図である。
【００７７】
アニメーション生成部１０３は、現在ユーザが注目していると思われるＵＩパーツＰ、又は、最後に操作されたＵＩパーツＰを第１パーツレイアウトにおいて表示されるＵＩパーツＰとして選択する。アニメーション生成部１０３は、上記アニメーションの説明と同様にして選択したＵＩパーツＰを第１パーツレイアウトとなるようにアニメーションさせる。
【００７８】
例えば図２０に示すように、写真表示アプリケーションに於いて、画面左に写真のタイトルリストＵＩパーツＰ１が、右に写真表示ＵＩパーツＰ２が表示されているとする。またレイアウト変更により、タイトルリストＵＩパーツＰ１と写真表示ＵＩパーツＰ２とが別のＵＩパーツして表示されるとする。この場合、ユーザが注目していると思われるＵＩパーツは写真表示ＵＩパーツＰ２であると思われるため、写真表示ＵＩパーツＰ２が選択されることが好適である。
【００７９】
一方、図２１に示すように操作用ＵＩパーツＰが２つ（ＵＩパーツＰ１及びＵＩパーツＰ２）ある場合においてレイアウト変更が発生した場合、最後に操作されたＵＩパーツ、例えばＵＩパーツＰ１）が選択されるものとすることができる。反対に、レイアウト変更により、複数のＵＩパーツが単一画面へ集約することも考えられる。この場合は、現在画面に表示されているＵＩパーツを、何らかの方法、例えば優先的にアニメーションさせる等により視覚的に重要度を示すものとすることが可能である。
【００８０】
<ＵＩパーツに関する補足>
移動対象として識別子が与えられるＵＩパーツは、レイアウト上の単一要素とみなされるＵＩパーツに限定されるものではない。例えば、複数のＵＩパーツ群をグルーピングし、それ全体へ識別子を付与することで、一括のアニメーション対象とすることも可能である。また、識別子の付与方法も、例えばＨＴＭＬの属性として付与するなどの方法に限定されるものでもなく、JavaScript（登録商標）のソースコードとして識別子を付与することも可能である。
【００８１】
ＵＩパーツによっては、ユーザからの操作状況などによりＵＩパーツが変化するなどの理由により、サーバ１３０からＨＴＭＬファイルを送出する時点では表示位置を決定できない場合もある。この場合には、移動対象となるＵＩパーツを識別子等から決定し、その座標を取得することで、移動開始位置や移動終了位置を決定することも可能である。
【００８２】
上述のように、ＵＩパーツはＨＴＭＬエレメントに限定されるわけではない。例えばＨＴＭＬのCanvas要素内に生成されたJavaScript（登録商標）オブジェクトであるかもしれないし、そもそもＨＴＭＬなどに依らないWidget表現であるかもしれない。その場合でも識別子を通じてＵＩパーツの特定が行えるのであれば、本実施形態に係るアニメーション処理を適用することが可能である。
【００８３】
［複数機器間の情報伝送］
画像表示システム１００における第１情報処理装置１１０、第２情報処理装置１２０及びサーバ１３０の間の情報伝送について説明する。図２２は、画像表示システム１００の情報伝送を示すシーケンス図であり、図２３及び図２４はサーバ１３０の動作を示すフローチャートである。なお、以下の説明において第１情報処理装置１１０及び第２情報処理装置１２０をクライアントと表記する場合がある。
【００８４】
図２２に示すように、第２情報処理装置１２０は、サーバ１３０にＵＩファイル送出を要求し、クライアント種別を伝送する（Ｓｔ１３１）。サーバ１３０は第２情報処理装置１２０に合ったＵＩファイルを第２情報処理装置１２０に送出する（Ｓｔ１３２）。また、第１情報処理装置１１０もサーバ１３０にＵＩファイル送出を要求し、クアイアント種別を伝送する（Ｓｔ１３３）。サーバ１３０は第１情報処理装置１１０に合ったＵＩファイルを第１情報処理装置１１０に送出する（Ｓｔ１３４）。
【００８５】
なお、クライアント種別はUser-Agent等であり、例えば、Mozilla/5.0 (Linux（登録商標）; U; Android 2.1-update1; ja- jp; SonyEricssonSO-01B Build/2.0.1.B.0.19) AppleWebKit/530.17 (KHTML, like Gecko) Version/ 4.0 Mobile Safari/530.17等が挙げられる。また、クライアントに会ったＵＩの例としてはＨＴＭＬ/ＣＳＳ/ＪＳ等が挙げられる。
【００８６】
このサーバ１３０によるＵＩファイルの伝送について図２３を用いて説明する。図２３に示すように、サーバ１３０はクライアントからＵＩファイル送出要求を受信する（Ｓｔ１４１）と、User-Agentによりクライアントを判別する（Ｓｔ１４２）。続いてサーバ１３０は、当該クライアント用のＵＩファイルが存在するか否かを確認する（Ｓｔ１４３）。
【００８７】
当該クライアント用のＵＩファイルが存在する場合（Ｓｔ１４３：Ｙｅｓ）、サーバ
は当該クライアント用のＵＩファイルを選択する（Ｓｔ１４４）。一方、当該クライアント用のＵＩファイルが存在しない場合（Ｓｔ１４４：Ｎｏ）には、サーバは標準のＵＩファイルを選択する（Ｓｔ１４５）。続いてサーバ１３０は、選択したＵＩファイルを当該クライアントに送出する（Ｓｔ１４６）。
【００８８】
図２２に戻り、第２情報処理装置１２０はサーバ１３０との間で常時接続セッション（呼）を開設（Ｓｔ１３５）し、第１情報処理装置１１０はサーバ１３０との間で常時接続セッション（呼）を開設（Ｓｔ１３６）する。
【００８９】
続いて第２情報処理装置１２０は、ＵＩ遷移要求、遷移先情報及びアプリケーション状態情報をサーバ１３０に伝達する（Ｓｔ１３７）。ＵＩ遷移要求はユーザの操作入力によって生成される操作機器切り替えの要求であり、遷移先情報は切り替え先の機器（ここでは第１情報処理装置１１０）を特定する情報（例えばＩＰアドレス）である。アプリケーション状態情報は、第２情報処理装置１２０において操作機器切り替えの操作入力がなされた時点のアプリケーションの状態を示す情報である。
【００９０】
サーバ１３０は、第２情報処理装置１２０からＵＩ遷移要求を受信すると、ＵＩ遷移要求指示、遷移元情報、遷移元ＵＩパーツ情報及び遷移元ＵＩ状態情報を第１情報処理装置１１０に伝達する（Ｓｔ１３８）。遷移元情報は、切り替え元の機器（ここでは第２情報処理装置１２０）を特定する情報（例えばＩＰアドレス）である。
【００９１】
遷移元ＵＩパーツ情報は遷移元ＵＩと同じＵＩを構築するためのパーツ情報であり、例えばボタンのスタイルが異なれば、そのボタンを構築する為の情報である。図２５は遷移元ＵＩパーツ情報の例を示す。遷移元ＵＩパーツ情報には、レイアウトに関する情報（第２パーツレイアウト）も含まれる。全機器間でＵＩパーツが供給されている場合には、この情報を送出する必要はない。また、既存情報からＵＩパーツレイアウトをプログラム的に送出可能な場合等では、サーバ１３０はレイアウト情報等を送出する必要はない。
【００９２】
遷移元ＵＩ状態情報は、遷移元機器（第２情報処理装置１２０）で表示されているＵＩの状態遷移に伴なう情報であり、例えばリストＵＩウィジットを持つＵＩであれば、表示されているリストアイテム識別子である。また、画面遷移を持つＵＩであれば遷移識別子である。図２６に遷移元ＵＩ状態情報の例を示す。
【００９３】
サーバ１３０は、クライアントからＵＩ遷移要求を受信（Ｓｔ１５１）すると、遷移先機器（第１情報処理装置１１０）と常時接続セッション（呼）が成立しているか否かを確認する（Ｓｔ１５２）。遷移先機器と常時接続セッション（呼）が成立している場合（Ｓｔ１５２：Ｙｅｓ）には、サーバ１３０は遷移先を選択する（Ｓｔ１５３）。
【００９４】
一方、遷移先機器と常時接続セッション（呼）が成立していない場合（Ｓｔ１５２：Ｎｏ）には、サーバ１３０は要求元（第２情報処理装置１２０）にエラーを送出する（Ｓｔ１５４）。サーバ１３０は遷移先を選択した後、ＵＩ遷移要求指示を第１情報処理装置１１０に伝達する（Ｓｔ１５５）。
【００９５】
続いてサーバ１３０は、遷移元ＵＩパーツ情報を第１情報処理装置１１０に伝達（Ｓｔ１５６）し、続いて遷移元ＵＩパーツ情報を第１情報処理装置１１０に伝達する（Ｓｔ１５７）。さらにサーバ１３０は、遷移元ＵＩ状態情報を第１情報処理装置１１０に伝達する（Ｓｔ１５８）。
【００９６】
以上のようにして、第１情報処理装置１１０、第２情報処理装置１２０及びサーバ１３０の間で情報伝達がなされ、第１情報処理装置１１０は第１パーツレイアウト情報及び第２パーツレイアウトを取得する。なお、ここに示す伝送手順はここに示すものに限定されるものではなく、同等の情報交換が行える伝送手順であれば実装可能である。上記伝送手順は実装上の電文を模式的に再構成したものであり、実際には利用伝送手順等に応じ、応答返信などが含まれる場合もある。
【００９７】
また、上記情報伝達手順においては、常時接続セッションの開設（Ｓｔ１３５、ｔ１３６）にいて常時接続セッション（呼）が開設されており、この呼端点を用いて機器識別がなされているとの前提に立っている。そのため、機器遷移（Ｓｔ１３８）においては、各情報伝送元の機器の情報伝達を行なっていない。しかしその実装は任意であり、現状のＨＴＴＰのような呼の保持を前提としない伝送でも運用可能である。さらに上記伝送手順においては、サーバ１３０を介する伝送手順を示しているが、サーバ１３０を介さず、同等のデータ交換が為されても良い。ただし、何らかの方法で遷移先機器へデータ伝送がなされる必要がある。
【００９８】
以上のように、本実施形態においては、ユーザが操作機器を第２情報処理装置２１０から第１情報処理装置１１０に切り替えた際、第１情報処理装置１１０には、第２情報処理装置２１０における第２パーツレイアウトでＵＩパーツが表示される。当該ＵＩパーツは第１情報処理装置１１０の第１パーツレイアウトとなるようにアニメーションされる。したがって、本実施形態によれば、ユーザが操作機器の切り替えの前後においてＵＩパーツの対応関係を容易に理解することが可能となる。
【００９９】
（第２の実施形態）
本技術の第２の実施形態に係る情報処理装置について説明する。なお、本実施形態において第１の実施形態と同一の構成については説明を省略する。
【０１００】
［情報処理装置の構成］
図２７は、本実施形態に係る情報処理装置２１０を示す模式図である。図２７（ａ）と図２７（ｂ）は共に情報処理装置２１０であり、姿勢、即ち水平面に対する向きが異なるものである。同図に示すように情報処理装置２１０はディスプレイ２１１を有し、ディスプレイの表示画像は、情報処理装置２１０の姿勢に応じて変更されるものである。
【０１０１】
図２８は、本実施形態に係る情報処理装置２１０のハードウェア構成を示す模式図である。同図に示すように、情報処理装置２１０は、ディスプレイ２１１に加え、表示インターフェース（以下、表示ＩＦ）２１２、入力インターフェース（以下、入力ＩＦ）２１３、姿勢検出部２１４、ＣＰＵ（Central Processing Unit）２１５及び主記憶部２１６を有する。これらは互いにバス２１７によって接続されている。なお、ディスプレイ２１１はタッチ入力が可能なタッチパネルであるものとすることも可能であり、この場合、入力ＩＦ２１３もディスプレイ（タッチパネル）１１１に接続されているものとする。
【０１０２】
ＣＰＵ２１５は、主記憶部２１６に記憶されたアプリケーションやＵＩ（User Interface)パーツを読み込み、ディスプレイ２１１に表示される表示画像を生成して表示ＩＦ２１２に供給する。表示ＩＦ２１２は、ディスプレイ２１１を制御して表示画像を表示させる。入力ＩＦ２１３は、ユーザによる操作入力をＣＰＵ２１５に供給する。
【０１０３】
姿勢検出部２１４は、情報処理装置２１０の姿勢を検出する。姿勢検出部２１４は、例えば加速度センサ、角速度センサ及び地磁気センサから構成されるモーションセンサであるものとすることができ、またこれ以外にも情報処理装置２１０の姿勢を検出できるものであればよい。
【０１０４】
情報処理装置２１０はこのようなハードウェア構成により、図２７（ａ）及び図２７（ｂ）に示すように姿勢に応じてディスプレイ２１１の表示画像を変更する。以下、図２７（ａ）に示す情報処理装置２１０の姿勢（第１姿勢とする）におけるディスプレイ２１１の表示画像を第１表示画像、図２７（ｂ）に示す情報処理装置２１０の姿勢（第２姿勢とする）におけるディスプレイ２１１の表示画像を第２表示画像とする。
【０１０５】
即ち、ユーザが情報処理装置２１０を第２姿勢から第１姿勢に遷移させると、ディスプレイ２１１の表示画像が第２表示画像から第１表示画像に切り替えられるものとする。また、ユーザが情報処理装置２１０を第１姿勢から第２姿勢に遷移させると、ディスプレイ２１１の表示画像が第１表示画像から第２表示画像に切り替えられるものとする。
【０１０６】
情報処理装置２１０は、このようなハードウェア構成とソフトウェアの協働によって次のような機能的構成を実現する。図２９は、情報処理装置２１０の機能的構成を示すブロック図である。同図に示すように、情報処理装置２１０は、パーツレイアウト取得部２０１、パーツ配置部２０２及びアニメーション生成部２０３を有する。
【０１０７】
パーツレイアウト取得部２０１は、第１姿勢におけるディスプレイ２１１の表示画像（第１表示画像）及び第２姿勢におけるディスプレイ２１１の表示画像（第２表示画像）のそれぞれにおけるＵＩパーツのレイアウトを取得する。
【０１０８】
図２７（ａ）のディスプレイ２１１及び図２７（ｂ）のディスプレイ２１１には、同一のアプリケーションのＵＩパーツが表示されている。同図に示すように、情報処理装置２１０の姿勢による表示画像サイズ（縦横比）の違いによってユーザの利用に適するＵＩパーツのレイアウトは異なる。
【０１０９】
パーツレイアウト取得部２０１は、情報処理装置２１０において動作しているアプリケーションから第１の表示画像におけるＵＩパーツレイアウト（第１パーツレイアウトとする）及び第２の表示画像におけるＵＩパーツレイアウト（第２パーツレイアウトとする）
を取得することができる。
【０１１０】
パーツ配置部２０２は、第１表示画像において第２パーツレイアウトに従ってＵＩパーツを配置し、第２表示画像において第１パーツレイアウトに従ってＵＩパーツを配置する。パーツ配置部２０２は、情報処理装置２１０の姿勢が変更された直後のタイミングで上記のようにＵＩパーツを配置するものとすることができる。
【０１１１】
図３０は、情報処理装置２１０が第２姿勢から第１姿勢に変更された直後のディスプレイ２１１の表示画像を示す模式図である。図３０は第１表示画像において第２パーツレイアウトに従って配置されたＵＩパーツＰを示す。同図に示すように、パーツ配置部２０２は、第１表示画像と第２表示画像のサイズ（縦横比）が異なる場合であっても、姿勢変更前の第２パーツレイアウトでＵＩパーツＰを配置する。この際、パーツ配置部２０２は、第２パーツレイアウトのＵＩパーツＰが第１表示画像に収まるように、ＵＩパーツＰを拡大あるいは縮小するものとすることができる。また、パーツ配置部２０２は、ＵＩパーツＰの縦横比率を変更して表示することも可能である。
【０１１２】
アニメーション生成部２０３は、第２パーツレイアウトに従って配置されたＵＩパーツＰを、第１パーツレイアウトとなるようにアニメーションさせる。図３１は、アニメーション生成部１０３によるＵＩパーツＰのアニメーションの様子を示す模式図である。同図に示すように、アニメーション生成部１０３は、ＵＩパーツＰをパーツ単位で拡大、縮小、移動等させ、所定のパーツレイアウトとなるように変化させる。
【０１１３】
［情報処理装置の動作］
情報処理装置２１０の動作について説明する。図３２は、情報処理装置２１０の動作を示すフローチャートである。同図に示すように、パーツレイアウト取得部２０１は、第１パーツレイアウト及び第２パーツレイアウトを取得する（Ｓｔ２１１）。パーツレイアウト取得部２０１は、情報処理装置２１０において動作中のアプリケーションから、第１パーツレイアウト及び第２パーツレイアウトを取得することが可能である。
【０１１４】
情報処理装置２１０の姿勢が遷移されると、パーツ配置部２０２は、第２パーツレイアウトに従ってＵＩパーツＰを配置する（Ｓｔ２１２）。パーツ配置部２０２は、図３１（ａ）に示すように、第２パーツレイアウトに従ってＵＩパーツＰが配置された第１表示画像を生成し、ディスプレイ２１１に表示させる。この際、パーツ配置部２０２は上述のように、ＵＩパーツの大きさを第１表示画像に合わせて拡大／縮小するものとしてもよい。パーツ配置部２０２は、第２パーツレイアウトに従ってＵＩパーツＰが配置された第１表示画像を所定時間ディスプレイ２１１に表示させる。この所定時間は、ユーザが当該表示画像を認識できる程度の時間であればよく、適宜設定することが可能である。
【０１１５】
次にアニメーション生成部２０３が、第２パーツレイアウトに従って配置されているＵＩパーツＰを、第１パーツレイアウトとなるようにアニメーションさせる（Ｓｔ２１３）。アニメーション生成部２０３は、図３１（ａ）に示す第２パーツレイアウトに従って配置されたＵＩパーツＰが、図３１（ｂ）に示す第１パーツレイアウトに従った配置になるように、ＵＩパーツＰのアニメーションを生成する。
【０１１６】
アニメーション生成部１０３は、第１の実施形態において説明したように、様々なバリエーションのアニメーションを生成するものとすることができる。以上の説明においては、情報処理装置２１０が第２姿勢から第１姿勢に変更される場合について説明したが、第１姿勢から第２姿勢に変更される場合も同様である。即ち、第１姿勢において第１パーツレイアウトに従ってＵＩパーツが配置されているときに、情報処理装置２１０が第２姿勢に変更されると、第２姿勢において第１パーツレイアウトに従ってＵＩパーツが配置された後、第２パーツレイアウトとなるようにアニメーションされる。
【０１１７】
以上のように、本実施形態においては、ユーザが情報処理装置２１０を第２姿勢から第１姿勢に変更した際、第１姿勢における表示画像として、第２姿勢における第２パーツレイアウトでＵＩパーツが表示される。当該ＵＩパーツは第１姿勢における第１パーツレイアウトとなるようにアニメーションされる。したがって、本実施形態によれば、ユーザが情報処理装置２１０の姿勢の変更の前後においてＵＩパーツの対応関係を容易に理解することが可能である。
【０１１８】
本技術は、上記各実施形態にのみ限定されるものではなく、本技術の要旨を逸脱しない範囲内において変更することが可能である。
【０１１９】
なお、本技術は以下のような構成も採ることができる。
【０１２０】
（１）
第１の表示画像におけるユーザインターフェースパーツのレイアウトである第１のパーツレイアウトと、第２の表示画像におけるユーザインターフェースパーツレイアウトである第２のパーツレイアウトを取得するパーツレイアウト取得部と、
上記第１の表示画像において、上記第２のパーツレイアウトに従ってユーザインターフェースパーツを配置するパーツ配置部と、
上記パーツ配置部によって上記第２のパーツレイアウトに従って配置されたユーザインターフェースパーツを、上記第１のパーツレイアウトとなるようにアニメーションさせるアニメーション生成部と
を具備する情報処理装置。
【０１２１】
（２）
上記（１）に記載の情報処理装置であって、
上記第１の表示画像は、上記情報処理装置の表示画面に表示される表示画像であり、
上記第２の表示画像は、上記情報処理装置とは異なる情報処理装置の表示画面に表示される表示画像である
情報処理装置。
【０１２２】
（３）
上記（１）又は（２）に記載の情報処理装置であって、
上記第１の表示画像は、上記情報処理装置が第１の姿勢にあるときに上記情報処理装置の表示画面に表示される表示画像であり、
上記第２の表示画像は、上記情報処理装置が第２の姿勢にあるときに上記表示画面に表示される表示画像である
情報処理装置。
【０１２３】
（４）
上記（１）から（３）のうちいずれか一つに記載の情報処理装置であって、
上記アニメーション生成部は、上記第２のパーツレイアウトに従って配置されたユーザインターフェースパーツを、上記第１のパーツレイアウトとなるように移動させるアニメーションを生成する
情報処理装置。
【０１２４】
（５）
上記（１）から（４）のうちいずれか一つに記載の情報処理装置であって、
上記アニメーション生成部は、上記第２のパーツレイアウトに従って配置されたユーザインターフェースパーツを、上記第１のパーツレイアウトとなるように変形させるアニメーションを生成する
情報処理装置。
【０１２５】
（６）
上記（１）から（５）のうちいずれか一つに記載の情報処理装置であって、
上記アニメーション生成部は、上記第２のパーツレイアウトに従って配置されたユーザインターフェースパーツを、上記第１のパーツレイアウトとなるように透明化させるアニメーションを生成する
情報処理装置。
【０１２６】
（７）
上記（１）から（６）のうちいずれか一つに記載の情報処理装置であって、
上記アニメーション生成部は、上記第２のパーツレイアウトに従って配置されたユーザインターフェースパーツを、上記第１のパーツレイアウトとなるようにアニメーションさせ、上記第２の表示画像において表示されていたユーザインターフェースパーツとなるようにスクロールさせる
情報処理装置。
【０１２７】
（８）
第１のパーツレイアウトを含む第１の表示画像を表示する第１の情報処理装置と
第２のパーツレイアウトを含む第２の表示画像を表示する第２の情報処理装置と、
上記第１の情報処理装置及び上記第２の情報処理装置と接続され、上記第１の情報処理装置に上記第１のパーツレイアウトを提供し、上記第２の情報処理装置に上記第２のパーツレイアウトを提供するサーバと
を具備する画像表示システム。
【０１２８】
（９）
上記（８）に記載の画像表示システムであって、
上記第１の情報処理装置は、上記第１のパーツレイアウトと上記第２のパーツレイアウトを取得するパーツレイアウト取得部と、上記第１の表示画像において上記第２のパーツレイアウトに従ってユーザインターフェースパーツを配置するパーツ配置部と、上記パーツ配置部によって上記第２のパーツレイアウトに従って配置されたユーザインターフェースパーツを上記第１のパーツレイアウトとなるようにアニメーションさせるアニメーション生成部とを有する
画像表示システム。
【０１２９】
（１０）
第１の表示画像におけるユーザインターフェースパーツのレイアウトである第１のパーツレイアウトと、第２の表示画像におけるユーザインターフェースパーツレイアウトである第２のパーツレイアウトを取得するパーツレイアウト取得部と、
上記第１の表示画像において、上記第２のパーツレイアウトに従ってユーザインターフェースパーツを配置するパーツ配置部と、
上記パーツ配置部によって上記第２のパーツレイアウトに従って配置されたユーザインターフェースパーツを、上記第１のパーツレイアウトとなるようにアニメーションさせるアニメーション生成部と
として情報処理装置を機能させるプログラム。
【０１３０】
（１１）
パーツレイアウト取得部が、第１の表示画像におけるユーザインターフェースパーツのレイアウトである第１のパーツレイアウトと、第２の表示画像におけるユーザインターフェースパーツレイアウトである第２のパーツレイアウトを取得し、
パーツ取得部が、上記第１の表示画像において、上記第２のパーツレイアウトに従ってユーザインターフェースパーツを配置し、
アニメーション生成部が、上記パーツ配置部によって上記第２のパーツレイアウトに従って配置されたユーザインターフェースパーツを、上記第１のパーツレイアウトとなるようにアニメーションさせる
画像表示方法。
【符号の説明】
【０１３１】
１００…画像表示システム
１０１…パーツレイアウト取得部
１０２…パーツ配置部
１０３…アニメーション生成部
１１０…第１情報処理装置
１２０…第２情報処理装置
１３０…サーバ
２０１…パーツレイアウト取得部
２０２…パーツ配置部
２０３…アニメーション生成部
２１０…情報処理装置
【図１】
2013186701.tif 000003
【図２】
2013186701.tif 000004
【図３】
2013186701.tif 000005
【図４】
2013186701.tif 000006
【図５】
2013186701.tif 000007
【図６】
2013186701.tif 000008
【図７】
2013186701.tif 000009
【図８】
2013186701.tif 000010
【図９】
2013186701.tif 000011
【図１０】
2013186701.tif 000012
【図１１】
2013186701.tif 000013
【図１２】
2013186701.tif 000014
【図１３】
2013186701.tif 000015
【図１４】
2013186701.tif 000016
【図１５】
2013186701.tif 000017
【図１６】
2013186701.tif 000018
【図１７】
2013186701.tif 000019
【図１８】
2013186701.tif 000020
【図１９】
2013186701.tif 000021
【図２０】
2013186701.tif 000022
【図２１】
2013186701.tif 000023
【図２２】
2013186701.tif 000024
【図２３】
2013186701.tif 000025
【図２４】
2013186701.tif 000026
【図２５】
2013186701.tif 000027
【図２６】
2013186701.tif 000028
【図２７】
2013186701.tif 000029
【図２８】
2013186701.tif 000030
【図２９】
2013186701.tif 000031
【図３０】
2013186701.tif 000032
【図３１】
2013186701.tif 000033
【図３２】
2013186701.tif 000034