JP6921647B2 - クライアントデバイス、画像処理システム、画像の表示方法および、プログラム - Google Patents

Description

本発明は、画像の表示を制御するクライアントデバイスと画像処理システムに関する。

昨今、業務データの管理や各種処理を行う形態として、Ｗｅｂサーバーにおける管理や処理が普及している。ユーザーは、クライアントデバイスのＷｅｂブラウザからインターネット１０４を介してＷｅｂサーバーにアクセスし、そのＷｅｂサーバーが提供するＷｅｂページ上で、業務データである画像や文書を閲覧することができる。画像や文書を閲覧する閲覧形態は多岐にわたってきており、例えばスマートフォンやタブレットＰＣ（パーソナルコンピュータ）に代表されるデバイスの画面において、タッチ操作によってＷｅｂブラウザ上で画像や文書を閲覧する形態も増えてきている。タッチ操作によって画像や文書を閲覧するデバイスを以下ではタッチデバイスと呼称する。

画像や文書を閲覧するためのタッチ操作の種類も多岐にわたっており、タッチ操作の一つに、スワイプ操作によってページや画像等を切り替える方法がある。スワイプ操作とは、タッチデバイスの画面に触れている指を強くはらう操作のことであり、特許文献１では、情報処理装置に保存されている文書に対応するサムネイル画像をスワイプ操作（特許文献１中では「フリック操作」と記載）で切り替える情報処理装置について開示されている。

更に、ＵＸ（ユーザーエクスペリエンス）の向上を目的として、スワイプ操作に合わせて現在の画像をフェードアウトアニメーション、次の画像をフェードインアニメーションさせる制御がある。アニメーション制御の場合、瞬時に画像を切り替える制御に比べ、画像を連続的に移動させて画像を切り替えるので、ユーザーは所望の画像の切り替えが直感的にわかる。Ｗｅｂブラウザで画像をアニメーションさせるためには、ＨＴＭＬ（ＨｙｐｅｒＴｅｘｔ Ｍａｒｋｕｐ Ｌａｎｇｕａｇｅ）形式で記載される画像を示す要素に対し、ＣＳＳ（Ｃａｓｃａｄｉｎｇ Ｓｔｙｌｅ Ｓｈｅｅｔｓ）形式で記載される属性を適用することで実現する。

属性とは、画像の要素に対して付加する付加情報であり、例えば、画像の移動や回転、縮尺などの変形を設定するｔｒａｎｓｆｏｒｍプロパティ、画像の移動時間を設定するｔｒａｎｓｉｔｉｏｎプロパティ、画像の表示状態を設定するｖｉｓｉｂｉｌｉｔｙプロパティ等がある。具体的には、表示領域内に配置されている画像に対し、表示領域外を示す座標をｔｒａｎｓｆｏｒｍプロパティに設定し、ｔｒａｎｓｉｔｉｏｎプロパティに「１．０ｓ」、ｖｉｓｉｂｉｌｉｔｙプロパティに「ｖｉｓｉｂｌｅ」（可視状態）を設定すると、表示領域内に配置された画像が１秒で表示領域外にフェードアウトするアニメーションを設定できる。

特許第５９１１３２６号

クライアントデバイスのメモリの使用領域を削減する目的に対し、表示領域外の画像を実体化しない対応が考えられる。具体的には、Ｗｅｂブラウザ等のソフトウェアシステムが表示領域内に描画されている画像のみを実体化し、実体化された画像をメモリに保持する。一方、表示領域外の画像の場合は実体化せず、メモリに保持しない。アニメーションを実行中の画像のｖｉｓｉｂｉｌｉｔｙプロパティが変更できない制約をＷｅｂブラウザ等のソフトウェアシステムに設ける対応が考えられる。画像の実体化とは、対象の画像のｖｉｓｉｂｉｌｉｔｙプロパティに「ｖｉｓｉｂｌｅ」を設定することであり、実体化されない表示領域外の画像のｖｉｓｉｂｉｌｉｔｙプロパティには、ｉｎｖｉｓｉｂｌｅ（不可視状態）を設定するその結果、表示領域外の画像をスワイプ操作で表示領域内に移動させようとすると、画像がフェードインアニメーションしている最中は、ｖｉｓｉｂｉｌｉｔｙプロパティはｉｎｖｉｓｉｂｌｅのままなので画像は表示されない。そしてフェードインアニメーション終了後に、画像のｖｉｓｉｂｉｌｉｔｙプロパティがｖｉｓｉｂｌｅに切り替わり、画像が表示領域内に表示される。つまり、ユーザーはスワイプ操作で切り替え途中の画像を見ることができず、画像の切り替え終了後に突然表示領域内に表示されるので、所望の画像に切り替わったことが直感的にはわからない。

本願発明は、表示領域外の画像を表示領域内にフェードインアニメーションする場合に、特定の操作、例えばスワイプ操作で画像を切り替える途中の状態をユーザーに示し、所望の画像に切り替わったことをユーザーが直感的にわかるようにすることを目的とする。

ディスプレイにおける表示領域内に含まれない画像の表示プロパティを不可視状態に設定し、前記表示領域内の画像の表示プロパティが不可視状態であれば非表示とし、可視状態であれば表示するソフトウェアシステムを有するクライアントデバイスであって、前記ディスプレイに対するユーザーの操作が、前記表示領域内の画像の表示を別の画像の表示に切り替えるための画像切り替え操作であるかを判断する操作判断手段と、前記操作判断手段によって前記ユーザーの操作が前記画像切り替え操作であると判断された場合、前記表示領域内に表示されている第一の画像の少なくとも一部が表示された状態で、前記表示領域内に含まれない第２の画像を前記表示領域内へ移動させ、前記ソフトウェアシステムで不可視状態に設定された前記第２の画像の表示プロパティを可視状態に変更する画像変更手段と、前記画像変更手段によって表示プロパティを可視状態に変更された第２の画像を前記表示領域内にさらに移動させ、前記表示領域内に表示されている前記第１の画像を表示領域外に移動させることで、前記表示領域内に表示される画像を前記第１の画像から前記第２の画像に切り替える画像切り替え手段と、を有することを特徴とする。

表示領域外の画像を表示領域内にフェードインアニメーションする場合に、特定の操作、例えばスワイプ操作で画像を切り替える途中の状態をユーザーに示し、所望の画像に切り替わったことをユーザーが直感的にわかる。

本実施形態に係る画像処理システム１０３の構成図 画像処理システム１０３を構成するＷｅｂサーバー１０１とクライアントデバイス１０２の内部構成図 Ｗｅｂサーバー１０１が有する機能を示すブロック図 クライアントデバイス１０２が有する機能を示すブロック図 タッチジェスチャ情報のイメージ図 認証されたユーザーが閲覧できるＷｅｂ画像閲覧画面をＷｅｂブラウザ４００に表示する処理のシーケンス図 Ｗｅｂブラウザ４００のログイン画面の図 ユーザーが閲覧できる画像（（ａ）、（ｂ））と、画像８０１が表示されているＷｅｂ画像閲覧画面８０３（（ｃ））の図 Ｗｅｂブラウザ４００に表示されたＷｅｂ画像閲覧画面８０３を画像切り替え操作で切替える処理を示すフロー図 Ｗｅｂ画像閲覧画面８０３をＷｅｂブラウザ４００に表示するためのＷｅｂ画像閲覧プログラムの一部を示す図 表示領域内１１０１と表示領域外１１００における画像８０１と画像８０２の配置のイメージ図 画像切り替え操作により各画像が移動する際のＷｅｂ画像閲覧画面８０３の図 Ｗｅｂサーバー１０１が有する機能を示すブロック図 実施例２における、Ｗｅｂ部品を用いたＷｅｂ画像閲覧画面８０３を生成する処理を示すフロー図 実施例２における、画像切り替え操作によるＷｅｂ画像閲覧画面８０３の切替表示の処理を示すフロー図 実施例２における、Ｗｅｂブラウザ４００に表示されるＷｅｂ画像閲覧画面８０３の図 実施例２における、表示領域内１１０１と表示領域外１１００における画像の配置のイメージ図 実施例２における、表示領域内１１０１と表示領域外１１００における画像の配置のイメージ図 実施例２における、表示領域内１１０１と表示領域外１１００における画像の配置のイメージ図 実施例２における、Ｗｅｂ画像閲覧画面８０３をＷｅｂブラウザ４００に表示するためのＷｅｂ画像閲覧プログラムの一部を示す図 実施例２における、画像８０１と画像１６０２に対するｆｏｃｕｓモードを制御するための処理のフロー図

以下、本発明を実施するための最良の形態について実施例を用いて説明する。

図１を用いて、本実施形態に係る画像処理システム１０３について説明する。図１に示す画像処理システム１０３はＷｅｂサーバー１０１とクライアントデバイス１０２を備えており、Ｗｅｂサーバー１０１とクライアントデバイス１０２はインターネット１０４を介して接続されている。インターネット１０４と各種デバイスはネットワーク１００により通信可能の状態に接続されている。ネットワーク１００は、ＬＡＮ、ＷＡＮ、電話回線、専用デジタル回線、ＡＴＭやフレームリレー回線、ケーブルテレビ回線、データ放送用無線回線等である。また、ネットワーク１００はこれらの組み合わせにより実現される通信ネットワークであってもよく、データの送受信が可能であればどのような形態であってもよい。

Ｗｅｂサーバー１０１はインターネット１０４を介して、クライアントデバイス１０２からＷｅｂ画像閲覧プログラムを実行するためのリクエストを受信する。Ｗｅｂ画像閲覧プログラムとはＷｅｂブラウザ上で動作するアプリケーションであり、Ｗｅｂ画像閲覧プログラムが実行されることでＷｅｂブラウザに画像を表示することができる。Ｗｅｂ画像閲覧プログラムは、Ｗｅｂブラウザに画像を表現するためのファイル形式であるＨＴＭＬやＣＳＳ、及びＷｅｂブラウザで動作するプログラミング言語（ＪａｖａＳｃｒｉｐｔ（登録商標））で記載されている。以下では、Ｗｅｂ画像閲覧プログラムが実行されたことでＷｅｂブラウザに表示される画面表示をＷｅｂ画像閲覧画面と呼称し、Ｗｅｂ画像閲覧プログラムを構成するＨＴＭＬやＣＳＳ等のファイルを画像ファイルと呼称する。ただし画像ファイルは単数、または複数のファイルで構成されてもよい。

また、Ｗｅｂ画像閲覧プログラムはＷｅｂブラウザで動作する形態に限らず、クライアントデバイス１０２のＯＳ等のコンピュータシステム上で動作する形態でも良い。または、Ｗｅｂサーバー１０１が画像ファイルのみを生成し、生成された画像ファイルを用いてクライアントデバイス１０２のＷｅｂブラウザがＷｅｂ画像閲覧画面を表示する形態でも良い。

クライアントデバイス１０２は、スマートフォンやタブレットＰＣ等のタッチデバイスであり、Ｗｅｂブラウザを用いてＷｅｂサーバー１０１から受信したＷｅｂ画像閲覧プログラムを実行する。

次に図２を用いて、図１に示した画像処理システム１０３を構成するＷｅｂサーバー１０１とクライアントデバイス１０２の内部構成を説明する。図２は、各種デバイスの内部構成について示したブロック図である。Ｗｅｂサーバー１０１とクライアントデバイス１０２が有する内部構成の基本構造は同じである。図２の説明ではクライアントデバイス１０２を例に説明するが、Ｗｅｂサーバー１０１の場合でも同様である。

ＣＰＵ２０１はＲＯＭ２０２やＲＡＭ２０３などからのプログラムを実行し、クライアントデバイス１０２の制御を行うユニットである。後述のシーケンス図やフロー図はこのプログラムが実行されることにより実現される処理である。また、ＣＰＵ２０１は内部バス２０８に接続される各ブロックを制御する。

ＲＯＭ２０２はＢＩＯＳ等のアプリケーションプログラムおよびＯＳを含む組込済みプログラム、およびデータ等が記録されている記憶装置である。ＢＩＯＳとは、クライアントデバイス１０２に接続している周辺機器を制御するためのプログラムである。

ＲＡＭ（直接記憶装置）２０３は、ＣＰＵ２０１がプログラムを実行する際に使用するワークメモリである。ＲＯＭ２０２に保存されたプログラムがＲＡＭ２０３へと展開され、そのプログラムをＣＰＵ２０１が順次読みだして実行する。

ＨＤＤ２０４はＯＳやソフトウェアモジュールが記憶されている外部記憶装置であり、ＳＳＤ（ソリッドステートドライブ）などの間接記憶装置であっても代替は可能である。

入力装置２０５は後述のクライアントデバイス１０２のディスプレイに接続されており、ディスプレイのタッチ等のジェスチャを検出する。出力装置２０６はディスプレイ等が接続されており、Ｗｅｂ画像閲覧画面を表示する。入力装置２０５と出力装置２０６が別々である形態に限らず、タッチスクリーンディスプレイのような入力装置と出力装置とが一体となっている形態であっても構わない。本実施例では、入力装置２０５につながる入力部分と、出力装置２０６の出力部分が一体となっているタッチスクリーンディスプレイを例に説明する。

Ｉ／Ｆ２０７はネットワーク１００に接続されており、ネットワーク１００を介してクライアントデバイス１０２への情報の入出力を行う。

これらのハードウェアでは、クライアントデバイス１０２が起動した後、ＣＰＵ２０１がＲＯＭ２０２のＢＩＯＳを実行し、ＨＤＤ２０４に記憶されているＯＳや制御プログラムがＲＡＭ２０３に展開され、展開されたプログラムに基づいてクライアントデバイス１０２の制御が行われる。尚、特に断りのない限りクライアントデバイス１０２やＷｅｂサーバー１０１等のハード上の主体はＣＰＵ２０１であり、ソフトウェア上の主体はＨＤＤ２０４にインストールされたアプリケーションプログラムである。

次に図３を用いて、Ｗｅｂサーバー１０１が有する機能を説明する。Ｗｅｂサーバー１０１は、アクセス制御部３０１、ページ生成部３０２、データアクセス部３０３、関連情報データベース３０４、ユーザー情報データベース３０５、画像データベース３０６を有する。

アクセス制御部３０１は、クライアントデバイス１０２からのリクエストに応じてログインユーザーを認証するためのユーザー認証を行う機能である。ページ生成部３０２は、Ｗｅｂ画像閲覧画面を作成するための画像ファイルを生成する機能を有し、生成した画像ファイルをクライアントデバイス１０２にレスポンスとして返す。

データアクセス部３０３は、関連情報データベース３０４、ユーザー情報データベース３０５、画像データベース３０６に対するデータの受送信を行う。関連情報データベース３０４は関連情報を格納する機能である。関連情報とは、画像を識別するための識別情報（画像名等）とユーザー情報（ユーザーＩＤ等）とを紐付けた紐付け情報である。関連情報データベース３０４に格納されている関連情報を用いることで、クライアントデバイス１０２にログインしているユーザーが閲覧できる画像を特定することができる。ユーザー情報データベース３０５は、ユーザーＩＤ等のユーザーを識別するためのユーザー情報を格納する機能である。画像データベース３０６は画像を格納する機能である。

図４を用いて、クライアントデバイス１０２が有する機能について説明する。クライアントデバイス１０２はＷｅｂブラウザ４００とジェスチャ判断部４０１を有する。Ｗｅｂブラウザ４００は、ページ生成部３０２から画像ファイルを受信し、ユーザー操作に応じて出力装置２０６であるディスプレイにＷｅｂ画像閲覧画面を表示する。

ジェスチャ判断部４０１は、入力装置２０５がクライアントデバイス１０２のディスプレイ５０１（図５）からタッチジェスチャ情報を受信し、受信したタッチジェスチャ情報から画像切り替え操作が実行されたかを判定する。タッチジェスチャ情報とは、ディスプレイ５０１で触れられている部分の位置情報であり、後述のジェスチャ情報とは異なる。ジェスチャ情報は、「左スワイプ」、「右スワイプ」等の操作内容を示す情報である。また、本実施例では、画像切り替え操作をスワイプ操作であるものとして説明するが、Ｗｅｂブラウザ４００の画像を切り替える操作であえば、スワイプ操作に限定されない。スワイプ操作以外にもフリック操作やタップ操作等が考えられる。

Ｗｅｂブラウザ４００は、操作判断部４０２とプログラム実行部４０３とＣＳＳプロパティ情報変更部４０４とを有する。操作判断部４０２は、ジェスチャ判断部４０１から受信したジェスチャ情報に基づき、Ｗｅｂブラウザ４００でのユーザーの操作内容を判断する。具体的には、ジェスチャ判断部４０１から受信したジェスチャ情報が「左スワイプ」であれば操作判断部４０２は「次の画像への切替え操作」と判断し、「右スワイプ」であれば「前の画像への切替え操作」と判断する。操作判断部４０２は、操作情報をプログラム実行部４０３へ送信する。操作情報とは、操作判断部４０２の判断結果であり、上記の具体例でいえば、「次の画像への切替え操作」または、「前の画像への切替え操作」等の操作内容を示した情報である。

プログラム実行部４０３は、ページ生成部３０２から受信した画像ファイルと操作判断部４０２から受信した操作情報とに基づき、Ｗｅｂ画像閲覧画面の表示を制御する。ＣＳＳプロパティ情報変更部４０４は、受信したＣＳＳプロパティ情報の一部を変更する。具体的には、ＣＳＳプロパティ情報変更部４０４は、受信した画像ファイルのうちＣＳＳで設定されたｖｉｓｉｂｉｌｉｔｙプロパティをｖｉｓｉｂｌｅやｉｎｖｉｓｉｂｌｅに変更する機能である。プロパティの変更とは、後述のＷｅｂ画像閲覧プログラム（図１０、１８）におけるｖｉｓｉｂｉｌｉｔｙプロパティの設定値を書きかえる形態や、対象の画像にあてはめる属性を変更する形態などが挙げられる。下記の実施例では、Ｗｅｂブラウザ４００がＣＳＳプロパティ情報変更部４０４を有する形態で説明するが、その形態には限定されない。ＯＳのＷｅｂブラウザのみならず、Ｗｅｂブラウザ以外のＯＳのメモリや、ビューアソフトがＣＳＳプロパティ情報変更部４０４と同等の機能を有する形態等も考えられる。

以上が、Ｗｅｂサーバー１０１とクライアントデバイス１０２が有する機能である。ただし、Ｗｅｂサーバー１０１とクライアントデバイス１０２との間の情報（画像データやプログラムデータ等）の受送信は、Ｗｅｂブラウザ４００の通信部とクライアントデバイス１０２の通信部（図３と図４では共に不図示）との間で行われる。下記の実施例において各通信部が主語であるべき部分を「Ｗｅｂブラウザ４００」または「クライアントデバイス１０２」と記載する。

次に図５を用いて、タッチジェスチャ情報とジェスチャ情報の関係について説明する。図５は、クライアントデバイス１０２のディスプレイ５０１を指５０２でスワイプする様子を示している。ディスプレイ５０１に対して指５０２を始点Ａ（ｘ１、ｙ１）に置いて（図５（ａ））、一定時間以内に始点Ａから終点Ｂ（ｘ２、ｙ２）まで、ディスプレイ５０１に触れた状態で指５０２を左に移動させる（図５（ｂ））。ジェスチャ判断部４０１は、タッチジェスチャ情報（始点Ａの座標から終点Ｂの座標までの連続的な移動に関する情報）を取得し、差分値（ｘ１−ｘ２）が一定閾値を超過する場合、左スワイプされたと判断する。一方、差分値（ｘ２−ｘ１）が一定閾値を超過する場合は右スワイプされたと判定する。そして、ジェスチャ判断部４０１は、ジェスチャ判断部４０１の判定結果である操作内容（「左スワイプ」、「右スワイプ」等）をジェスチャ情報として操作判断部４０２に送信する。以上がタッチジェスチャ情報とジェスチャ情報の関係である。

今回は、指５０２のｘ方向（ディスプレイ５０１の横方向）の移動距離でスワイプ操作の有無を判断したが、その形態に限定されない。指５０２の移動距離で判断してもよく、縦方向のスワイプ操作の有無を判断する場合は、指５０２のｙ方向（ディスプレイ５０１の縦方向）の移動距離を判断基準にしてもよい。つまり、画像の配置やディスプレイ５０１に対する操作内容によって、ジェスチャ判断部４０１における判断基準や判断方法は変わる。

表示領域外の画像を表示領域内にフェードインアニメーションする場合に、画像切り替え操作で画像を切り替える途中の状態をユーザーに示す形態を実施例１で説明する。

図６を用いて、認証されたユーザーが閲覧できるＷｅｂ画像閲覧画面をＷｅｂブラウザ４００に表示する処理を説明する。図６は、Ｗｅｂ画像閲覧画面を生成する処理を示すシーケンス図である。

Ｗｅｂブラウザ４００はユーザーからログイン操作を受け付ける（Ｓ６０１）。Ｗｅｂブラウザ４００に表示されるログイン画面の一例を図７に示す。ログイン画面７０１においてユーザーは、ユーザー名入力テキストボックス７０２とパスワード入力テキストボックス７０３にそれぞれユーザー名とパスワードを入力し、ログインボタン７０４を押下する。ログインボタン７０４が押下されることによって、Ｗｅｂブラウザ４００はアクセス制御部３０１にユーザーを認証するためのリクエストを送信する。

Ｗｅｂブラウザ４００からリクエストを受信した後、アクセス制御部３０１はクライアントデバイス１０２から受信したリクエストの内容に基づいてログイン認証を行う（Ｓ６０２）。具体的にアクセス制御部３０１は、ユーザー情報データベース３０５に予め格納されているユーザー情報（ユーザー名とパスワード等）とＷｅｂブラウザ４００から受信したユーザー情報とを照合し、ユーザー情報が一致するかと有効であるかを判定する。有効であると判定された場合はＳ６０３に進み、有効でないと判定された場合はＷｅｂブラウザ４００にエラーを送信し、処理が終了する。

Ｓ６０２でユーザーが認証された後、ページ生成部３０２は、ユーザー情報と関連情報データベース３０４の関連情報とに基づいて、画像データベース３０６の画像データからユーザーが閲覧できる画像を特定し、特定された画像を表示するためのＷｅｂ画像閲覧画面を作成するＷｅｂ画像閲覧プログラムを生成する（Ｓ６０３）。具体的には、ユーザーの閲覧できる画像がＳＶＧ（スケーラブル・ベクター・グラフィックス）形式の画像８０１（図８（ａ））と画像８０２（図８（ｂ））である場合、ページ生成部３０２は、２枚の画像を表示するＷｅｂ画像閲覧画面８０３（図８（ｃ））を作成するためのＷｅｂ画像閲覧プログラムを生成する。画像の形式はＳＶＧ形式に限定されず、ＰＮＧ、ＪＰＥＧ、ＧＩＦなど他の形式でもよい。また、画像の表示順番は、画像の生成日時や画像名に従い決定する等の形態がある。Ｗｅｂ画像閲覧プログラムは、ＨＴＭＬ、ＣＳＳ、およびＪａｖａｓｃｒｉｐｔプログラムから構成されており、Ｗｅｂ画像閲覧画面８０３に表示する画像の画像表示制御と、画像を切り替えるための切替え制御等ができる。

アクセス制御部３０１はＳ６０３で生成されたＷｅｂ画像閲覧プログラムを、クライアントデバイス１０２に送信する（Ｓ６０４）。クライアントデバイス１０２のプログラム実行部４０３はＳ６０５で受信したＷｅｂ画像閲覧プログラムを実行し、Ｗｅｂ画像閲覧画面８０３をＷｅｂブラウザ４００に表示する（Ｓ６０５）。その際に表示されるＷｅｂ画像閲覧画面８０３の一例は図８（ｃ）に示した通りである。以上が、ユーザーが閲覧できるＷｅｂ画像閲覧画面８０３をＷｅｂブラウザ４００に表示する処理である。

次に、Ｓ６０５で表示されたＷｅｂ画像閲覧画面８０３を画像切り替え操作で切替える処理について、図９と図１０を用いて説明する。図９は、Ｗｅｂブラウザ４００に表示されたＷｅｂ画像閲覧画面８０３を画像切り替え操作で切替える処理を示すフロー図であり、図９の処理は、プログラム実行部４０３がＷｅｂ画像閲覧プログラムを受信したことをきっかけに開始される。図１０は、Ｗｅｂ画像閲覧画面８０３をＷｅｂブラウザ４００に表示するためのＷｅｂ画像閲覧プログラムを構成するＨＴＭＬ、ＣＳＳ、およびＪａｖａｓｃｒｉｐｔプログラムの一部である。

まず、図１０を用いてＷｅｂ画像閲覧プログラムの記載内容を説明する。＜Ｓｔｙｌｅ＞タグで挟まれた定義部分１００１が、ＣＳＳのプロパティとその設定値が記載された箇所である。そして、プログラム実行部４０３は、図１０で不図示のＨＴＭＬの各要素（本実施例では画像）に対して、定義部分１００１のプロパティの記載内容をあてることでアニメーション制御を行う。プロパティの具体的な例は、「ｔｒａｎｓｆｏｒｍ」で画像の移動位置、「ｔｒａｎｓｉｔｉｏｎ」で画像の移動時間、「ｖｉｓｉｂｉｌｉｔｙ」で画像の表示状態を設定する。

また、定義部分１００１の属性１００３は、表示領域内に表示されている画像に対してあてはめられる部分であるのに対し、属性１００６は、表示領域内に表示されている画像の前の画像、属性１００４は表示領域内に表示されている画像の次の画像、属性１００５は表示領域内に次の画像を表示する際に次の画像の一部を表示領域内に入れる際にあてはめられる属性である。

プログラム実行部４０３がＨＴＭＬで設定された各画像にプロパティをあてる方法としてはＨＴＭＬに静的に定義する形態や、図１０で不図示のＪａｖａＳｃｒｉｐｔを用いて動的に定義する形態でもよい。ＨＴＭＬ、ＪａｖａＳｃｒｉｐｔは省略部１００２に直接記述してもよく、外部に保管されているプログラムをプログラム実行部４０３が読み込む形態でもよい。

次に図９と図１１〜１２を用いて、Ｗｅｂ画像閲覧画面８０３を画像切り替え操作で切替える処理を説明する。図１１は、クライアントデバイス１０２の画面の表示領域内１１０１と表示領域外１１００（図１１中の網掛け部分）における画像８０１と画像８０２の配置のイメージ図であり、１１０２はＷｅｂ画像閲覧プログラムによって実現されるオブジェクト領域である。図１２は、画像切り替え操作により各画像が移動する際のＷｅｂ画像閲覧画面８０３の一例である。図１１〜１２を用いながら、図９の処理を説明する。

Ｓ６０５でＷｅｂ画像閲覧プログラムをプログラム実行部４０３が取得した後、プログラム実行部４０３は初期画像を表示領域内１１０１に配置して表示する（Ｓ９０１）。今回、初期画像は画像８０１であるものとし、その際のＷｅｂ画像閲覧画面８０３の一例を図１２（ａ）に示す。また、表示領域内１１０１と表示領域外１１００における画像のイメージ図は図１１（ａ）で示す。表示領域内１１０１の画像８０１は描画された状態であり、表示領域外１１００の画像８０２は描画されていない状態である。

Ｓ９０１の状態を実現するためのＷｅｂ画像閲覧プログラムを図１０で説明する。プログラム実行部４０３は、属性１００３に示すｖｉｓｉｂｉｌｉｔｙプロパティを画像８０１に適用する。属性１００３において「ｖｉｓｉｂｉｌｉｔｙ：ｖｉｓｉｂｌｅ」と設定されているので、属性１００３を適用された画像８０１はＷｅｂブラウザ４００に描画される。一方、プログラム実行部４０３は、属性１００４に示すｖｉｓｉｂｉｌｉｔｙプロパティを画像８０２に適用する。属性１００４において「ｖｉｓｉｂｉｌｉｔｙ：ｖｉｓｉｂｌｅ」と設定されているが、ＯＳのＷｅｂブラウザ４００にはクライアントデバイス１０２のメモリの使用領域を削減するための制約がある。そのため、表示領域外１１００にある画像８０２の場合、ＣＳＳプロパティ情報変更部４０４により、Ｗｅｂ画像閲覧プログラムの記載内容に依らずに、属性１００４のｖｉｓｉｂｉｌｉｔｙプロパティが「ｉｎｖｉｓｉｂｌｅ」に変更される。その結果、属性１００４を適用された画像８０２はＷｅｂブラウザ４００に描画されない。

Ｓ９０１で初期画像が表示領域内１１０１に表示された後、ディスプレイ５０１がタッチジェスチャ情報を受信しジェスチャ判断部４０１に送信する（Ｓ９０２）。タッチジェスチャ情報を受信したジェスチャ判断部４０１は、タッチジェスチャ情報が画像切り替え操作であるかを判断する（Ｓ９０３）。スワイプ操作であると判断された場合はＳ９０４に進み、画像切り替え操作でないと判断された場合は、再びディスプレイ５０１がタッチジェスチャ情報の受信を待機するＳ９０２の前の段階に戻る。

Ｓ９０３でジェスチャ判断部４０１がタッチジェスチャ情報を画像切り替え操作であると判断した後、ジェスチャ判断部４０１はＳ９０３の判断結果に基づいて、ジェスチャ情報を操作判断部４０２に送信する（Ｓ９０４）。今回のジェスチャ情報は「左スワイプ」であるものとする。

操作判断部４０２は、受信したジェスチャ情報に基づいてユーザーの操作内容を判断する（Ｓ９０５）。今回は、ジェスチャ情報「左スワイプ」からユーザーの操作内容は、「次の画像への切替え操作」と判断されたものとする。操作判断部４０２はＳ９０５の判断結果を操作情報としてプログラム実行部に送信する（Ｓ９０６）。

プログラム実行部４０３が操作判断部４０２から操作情報を受信した後、プログラム実行部４０３は画像切替え対象の画像８０２を表示領域内１１０１に移動させる（Ｓ９０７）。移動させた後のオブジェクト領域１１０２における画像の配置の一例を図１１（ｂ）に示す。この時点では、画像８０２のｖｉｓｉｂｉｌｉｔｙプロパティは「ｉｎｖｉｓｉｂｌｅ」なので、図１１（ａ）と同様に表示領域内１１０１には画像８０１のみが表示される。

Ｓ９０７の状態を実現するためのＷｅｂ画像閲覧プログラムを図１０で説明する。プログラム実行部４０３はＳ９０６で画像切り替え操作を示す操作情報を受信したことをきっかけに、Ｗｅｂ画像閲覧プログラムの属性１００５を画像８０２に適用する。属性１００５の「ｔｒａｎｓｆｏｒｍ：ｔｒａｎｓｌａｔｅ３ｄ（９７％）」は、表示領域内１１０１の左端を「０％」の位置、右端を「１００％」の位置と定義した際に、画像８０２を「９７％」の位置まで移動させることを指す。本実施例では、画像が表示領域内１１０１に入っているかの判断を画像の横幅で判断しているが、画像の面積で判断してもよい。また、画像８０２の移動を指示するｔｒａｎｓｆｏｒｍプロパティは図１０で示した定義の仕方に限定されず、表示領域内１１０１を座標で表現して画像８０２の移動を座標で指定する形態等も考えられる。

さらに、本実施例では属性ｐｒｅｎｅｘｔを画像に適用する際のｔｒａｎｓｆｏｒｍプロパティ―を「９７％」と設定しているが、設定値はこれに限定されない。ＯＳのＷｅｂブラウザ４００の特性により、表示領域内１１０１の画像８０２が表示領域内１１０１の横軸に対し１％以上でないとＷｅｂブラウザ４００の制約からは逃れられず、後述のＳ９０８でｖｉｓｉｂｉｌｉｔｙプロパティをｖｉｓｉｂｌｅに設定できないことを想定している。その場合、表示領域内１１０１の画像８０２の横軸が、表示領域内１１０１の横軸の１％を超えるように、ｔｒａｎｓｆｏｒｍプロパティの値を設定する必要がある。

プログラム実行部４０３は、画像８０２を表示領域内１１０１に移動させた後、画像８０２のｖｉｓｉｂｉｌｉｔｙプロパティをｖｉｓｉｂｌｅに設定する（Ｓ９０８）。今回、属性１００５においてｖｉｓｉｂｉｌｉｔｙプロパティが設定されていないので、動的にｖｉｓｉｂｉｌｉｔｙプロパティとその設定値である「ｖｉｓｉｂｌｅ」を設定する形態を想定しているが、その形態には限定されない。Ｗｅｂ画像閲覧プログラムにおいて、属性１００５のｖｉｓｉｂｉｌｉｔｙプロパティとその設定値を予め設定しておいてもよく、画像８０２が表示領域内１１０１に移動してから可視状態に設定される処理順であれば、Ｗｅｂ画像閲覧プログラムにおける記載方法は問わない。Ｓ９０８の結果、表示領域内１１０１に入った一定領域１１０５がＷｅｂブラウザ４００に描画される。その際の表示画面の一例を図１１（ｃ）と図１２（ｂ）に示す。

一定領域とは画像８０２のうち表示領域内に侵入している領域部分の横幅であり、図１１（ｂ）における矢印で示した長さに相当する。本実施例では、表示領域内１１０１に画像８０２が入り込む方向が左右方向である場合を示したがその形態に限定されない。画像８０２が入り込む方向が上下方向である形態や斜め方向の形態も考えられる。上下方向である場合、一定領域１１０５は画像のうち表示領域内に入っている部分の縦の長さや面積で定義される。一方の斜め方向である場合は、一定領域１１０５は画像のうち表示領域内に入っている部分のいずれかの辺の長さや面積が定義される形態が考えられる。

プログラム実行部４０３は、画像８０１と画像８０２とをアニメーション制御する（Ｓ９０９）。具体的には、Ｗｅｂ画像閲覧プログラム（図１０）の内容に従い、プログラム実行部４０３が属性１００５を画像８０１に適用し、フェードアウトアニメーション制御を行う。一方、属性１００３を画像８０２に適用することで、フェードインアニメーション制御を行う。今回は、画像８０２に対して表示領域内１１０１の中央を示す座標「（０ｐｘ、０ｐｘ、０ｐｘ）」を属性１００３の「ｔｒａｎｓｆｏｒｍ」、「１．０ｓ」を「ｔｒａｎｓｉｔｉｏｎ」、「ｖｉｓｉｂｌｅ」を「ｖｉｓｉｂｉｌｉｔｙ」に設定しているため、画像８０２を１秒で表示領域内１１０１の中央にフェードインアニメーションさせることができる。

また、画像８０１に対して表示領域外１１００を示す座標「（−１０００ｐｘ、０ｐｘ、０ｐｘ）」を属性１００５の「ｔｒａｎｓｆｏｒｍ」、「１．０ｓ」を「ｔｒａｎｓｉｔｉｏｎ」、「ｖｉｓｉｂｌｅ」を「ｖｉｓｉｂｉｌｉｔｙ」に設定しているため、画像８０１を１秒で表示領域外１１００にフェードアウトアニメーションさせることができる。Ｗｅｂ画像閲覧画面８０３が画像８０１から画像８０２へと切り替わる様子を図１２（ｃ）〜（ｆ）に示す。以上が、Ｗｅｂ画像閲覧画面８０３を画像切り替え操作で切替える処理である。

実施例１より、例えばスワイプ操作等の画像切り替え操作でＷｅｂ画像閲覧画面８０３を切り替える際に、フェードインアニメーションで次の画像が表示領域内１１０１に表示されるため、所望の画像に切り替わったことをユーザーは直感的に知ることができる。

実施例２において、ｆｏｃｕｓモードを用いた場合の画像切り替え操作で画像を切り替える方法について説明する。ｆｏｃｕｓモードとは、拡大表示する画像をユーザーが事前登録し、ｆｏｃｕｓモード実行中に画像を画像切り替え操作で切り替えると、事前登録された画像のみが拡大された状態で表示されるモードのことである。

実施例２は、ｆｏｃｕｓモード実行中に画像を切り替える場合も、画像切り替え操作で画像を切り替える途中の状態をユーザーに示し、所望の画像に切り替わったことをユーザーが直感的にわかるようにすることを目的とする。その目的を実現するための処理を説明する。ただし、実施例２において記載されていない部分は、実施例１と同じである。また、実施例１の際に説明済みの箇所については同じ符番を振り、詳細な説明は省略する。

また、実施例１と同様に本実施例では、画像切り替え操作をスワイプ操作であるものとして説明するが、Ｗｅｂブラウザ４００の画像を切り替える操作であえば、スワイプ操作に限定されない。スワイプ操作以外にもフリック操作やタップ操作等で画像を切り替える操作形態が考えられる。

まず図１３を用いて、実施例２の場合のＷｅｂサーバー１０１が有する機能を説明する。データアクセス部３０３は、各データベース３０４、３０５、３０６、１３０１へのアクセス処理を行う。関連情報データベース３０４は関連情報を格納するデータベースであり、実施例２における関連情報とは、画像を特定するための情報と、その画像を閲覧できるユーザーのユーザー情報、さらにＷｅｂ部品情報とを紐付けた情報のことである。Ｗｅｂ部品データベース１３０１は、Ｗｅｂ部品情報を格納するデータベースである。なお、本実施例ではＷｅｂ部品情報と、画像を特定するための情報との紐付け情報を関連情報データベース３０４において管理する形態で説明するが、紐付け情報をＷｅｂ部品データベース１３０１で管理する形態でもよく、Ｗｅｂ部品情報と画像を特定するための情報とが紐付いてさえいれば、Ｗｅｂサーバー１０１のどこで管理されていてもよい。

Ｗｅｂ部品とは、Ｗｅｂ画像閲覧画面８０３を表示する際にユーザーに提供されるオプション機能を実行するためのＵＩ（ボタンなど）であり、ｆｏｃｕｓモードの場合は「ｆｏｃｕｓボタン」でユーザーにＷｅｂ部品が提供される。Ｗｅｂ部品情報は、そのＷｅｂ部品の機能を実行するためのプログラムファイルやＷｅｂ画像閲覧画面８０３におけるＷｅｂ部品の機能を実行するためのボタンの配置情報等を含む。

ｆｏｃｕｓボタンは特定の画像に重畳する形で表示され、ユーザーがｆｏｃｕｓボタンを押下すると、事前登録された画像が拡大された状態で表示され、再びｆｏｃｕｓボタンを押下すると、拡大される前の元の状態に戻りｆｏｃｕｓモードが解除される。また、ｆｏｃｕｓモードが起動中に、Ｗｅｂ画像閲覧画面８０３をスワイプすると事前登録された別の画像に表示画面が切り替わる。

Ｗｅｂ部品の機能を利用する際にはユーザーによる事前設定が必要である。その事前設定の一例としては、ユーザーが不図示のＷｅｂ部品生成画面において、Ｗｅｂ部品の機能を実行する対象の画像を選択し、選択された画像とＷｅｂ部品情報とが紐づいた紐付け情報がデータアクセス部３０３を介して関連情報データベース３０４に登録される形態が挙げられる。

次に、実施例２における、Ｗｅｂ部品を用いたＷｅｂ画像閲覧画面８０３を生成する処理を、図１４を用いて説明する。上記で説明したステップと同じ処理内容のステップに関しては、同じ符番を振り、詳細な説明は省略する。

Ｓ６０１〜Ｓ６０５において、Ｗｅｂ画像閲覧画面８０３を表示するためにアクセス制御部３０１がＷｅｂ画像閲覧プログラムをクライアントデバイス１０２に送信した後、プログラム実行部４０３は、Ｗｅｂ部品情報の取得リクエストを受信したかを判断する（Ｓ１４００）。具体的には不図示のＷｅｂ部品実行画面において、Ｗｅｂ部品の機能を実行するためのボタンをユーザーが押下されたかどうかをプログラム実行部４０３は判断する。取得リクエストの受信を確認できない場合は、実施例１で示したＷｅｂ画像閲覧画面表示の処理（図９）に進む。一方、取得リクエストの受信を確認できた場合にはＳ１４０１に進む。このＳ１４００のステップにより実施例１または実施例２の処理に分岐することになる。

プログラム実行部４０３はＷｅｂ部品情報の取得リクエストをＷｅｂサーバー１０１に送信する（Ｓ１４０１）。

Ｗｅｂサーバー１０１は、受信したリクエストに含まれる画像名をもとに、データアクセス部３０３を介してリクエスト対象画像に関連するＷｅｂ部品情報を関連情報データベース３０４において特定し（Ｓ１４０２）、特定したＷｅｂ部品情報をクライアントデバイス１０２に送信する（Ｓ１４０３）。Ｗｅｂ部品情報を取得した後は、後述の画像切り替え操作によるＷｅｂ画像閲覧画面８０３の切替表示の処理（図１５）が実行される。以上が、実施例２におけるＷｅｂ部品を用いたＷｅｂ画像閲覧画面８０３を生成する処理である。

次に図１５を用いて、画像切り替え操作によるＷｅｂ画像閲覧画面８０３の切替表示の処理を説明する。Ｓ１４０３においてＷｅｂサーバー１０１からプログラム実行部４０３がＷｅｂ部品情報を受信した後、プログラム実行部４０３は、初期画像とＷｅｂ部品をＷｅｂブラウザ４００に表示する（Ｓ１５０１）。今回は、初期画像である画像８０１とＷｅｂ部品であるｆｏｃｕｓボタン１５０１を、画像８０１に重畳させた状態でＷｅｂブラウザ４００に表示する。その際にＷｅｂブラウザ４００に表示されるＷｅｂ画像閲覧画面８０３の一例を図１６（ａ）に示す。今回、ユーザーは画像８０１、画像８０２、画像１６０２の順に３枚の画像が閲覧でき、画像８０１と画像１６０２とがｆｏｃｕｓモードの実行対象の画像として事前登録されているものとする。また、図１６における画像８０１と画像１６０２はｆｏｃｕｓモードで拡大される前の状態であるものとする。

Ｗｅｂブラウザ４００に初期画像とＷｅｂ部品を表示した後、ユーザーによりＷｅｂ部品が選択される（Ｓ１５０２）。具体的に、ｆｏｃｕｓボタン１６０１がユーザーによって押下され、ｆｏｃｕｓモードが作動する。

ｆｏｃｕｓモードが作動している状況において、ディスプレイ５０１がタッチジェスチャ情報を受信し、ジェスチャ判断部４０１に送信する（Ｓ９０２）。タッチジェスチャ情報を受信したジェスチャ判断部４０１は、タッチジェスチャ情報が選択画像への画像切り替え操作であるかを判断する（Ｓ１５０３）。選択画像とは、Ｗｅｂ部品（今回はｆｏｃｕｓボタン）の機能を実行する対象の画像のことである。画像切り替え操作であると判断された場合はＳ９０４に進み、画像切り替え操作でないと判断された場合は、再びディスプレイ５０１がタッチジェスチャ情報の受信を待機するＳ９０２の前の段階に戻る。

Ｓ１５０３でジェスチャ判断部４０１がタッチジェスチャ情報を画像切り替え操作であると判断した後、ジェスチャ判断部４０１はＳ１５０３の判断結果に基づいて、ジェスチャ情報を操作判断部４０２に送信する（Ｓ９０４）。今回のジェスチャ情報は「右スワイプ」であるものとする。

操作判断部４０２は、受信したジェスチャ情報に基づいてユーザーの操作内容を判断する（Ｓ９０５）。今回は、ジェスチャ情報「右スワイプ」からユーザーの操作内容は、「次の選択画像への切替え操作」と判断されたものとする。操作判断部４０２はＳ９０５の判断結果を操作情報としてプログラム実行部に送信する（Ｓ９０６）。プログラム実行部が操作情報を受信すると、表示領域内１１０１の画像８０１はｆｏｃｕｓモードが解除された等倍の状態になる（図１７−１（ａ）、（ｂ））。

プログラム実行部４０３が操作判断部４０２からの操作情報を受信した後、プログラム実行部４０３はＷｅｂ画像閲覧プログラム（図１８）における属性１８０１のｔｒａｎｓｆｏｒｍプロパティを画像１６０２に対して設定する（Ｓ１５０４）。属性１８０１において「ｔｒａｎｓｆｏｒｍ：ｔｒａｎｓｌａｔｅ３ｄ（９７％）」が設定されているので、表示領域内１１０１の「９７％」の位置まで画像１６０２を移動させる。その際、選択画像ではない画像８０２は移動しないので、画像１６０２と画像８０２の一部分は表示領域外１１００で重なって配置される（図１７−１（ｃ））。

Ｓ１５０４において、属性１８０１（図１８）を選択画像（画像１６０２）に対して設定した後、画像１６０２のｖｉｓｉｂｉｌｉｔｙプロパティをｖｉｓｉｂｌｅに設定する（Ｓ９０８）。その際の表示画面のイメージ図を図１７−２（ｄ）に示す。プログラム実行部４０３はＷｅｂ画像閲覧プログラム（図１８）の内容に従い、画像８０１と画像１６０２とをアニメーション制御する。具体的には、属性１８０２を画像８０１に設定し、属性１８０３を画像１６０２に設定する（Ｓ９０９）。その結果、Ｗｅｂ画像閲覧画面８０３は、画像８０１のフェードアウトアニメーションと画像１６０２のフェードインアニメーションを行う。そのときの表示される画面が遷移する様子の一例を図１７−２、図１７−３（ｇ）〜（ｈ）に示す。画像１６０２はアニメーションによる動作が終了するまで拡大されず（図１７−１、図１７−２、図１７−３（ｇ））、アニメーションによる動作が終了した後にｆｏｃｕｓモードによって拡大される（図１７−３（ｈ）〜（ｉ））。詳細は図１９で後述する。

Ｓ９０８で画像１６０２を表示領域内１１０１に移動させた後、プログラム実行部４０３は画像の順番を初期の順番に戻す（Ｓ１５０５）。初期の画像表示状態とは、図１７−１（ａ）で示した画像の順番のことであり、表示領域内１１０１または表示領域外１１００に画像８０１、画像８０２、画像１６０２の順番に配置されている状態のことである。具体的には、プログラム実行部４０３がＷｅｂ画像閲覧プログラム（図１８）における属性１８０４を画像８０１に適用し、属性１８０２を画像８０２に適用することで、各画像の配置が初期の順番に戻る。そのときの画像の配置の一例を図１７−３（ｉ）に示す。これにより、図１７−３（ｉ）においてｆｏｃｕｓボタン１６０３を押下しｆｏｃｕｓモードを解除した後、画像切り替え操作で画像の表示を切り替えると、画像１６０２の前に配置されている画像８０２が表示領域内１１０１に表示され、実施例１と同様に画像切り替え操作により順次画像を閲覧することができる。つまり、画像の配列を図１７−３（ｉ）の状態にするのは、ｆｏｃｕｓモードを解除して通常の順序で画像を閲覧するためである。

今回、画像８０２に適用した属性１８０２には「ｔｒａｎｓｉｔｉｏｎ：１．０ｓ ｅａｓｅ」と「ｖｉｓｉｂｉｌｉｔｙ：ｖｉｓｉｂｌｅ」が記載されており、画像８０２が３番目の配置（図１７−３（ｈ））から２番目の配置（図１７−３（ｉ））に移動する際に表示領域内１１０１をアニメーションで横切る設定になっているが、Ｗｅｂ画像閲覧画面８０３には移動中の画像８０２は表示されない。その理由は、移動前の画像８０２は表示領域外１１００に配置されているため（図１７−３（ｈ））、属性１８０４でのｖｉｓｉｂｉｌｉｔｙプロパティの設定値に関係なく「ｉｎｖｉｓｉｂｌｅ」である。アニメーションで移動している最中も「ｉｎｖｉｓｉｂｌｅ」のままなので、画像８０２が表示領域内１１０１を横切る状態はＷｅｂ画像閲覧画面８０３には表示されない。

また、本実施例で説明した形態に限らず、画像８０２をアニメーションさせずに２番目の配置まで瞬間移動させる（「ｔｒａｎｓｉｔｉｏｎ」部分の記載を削除する等）形態でもよい。以上が、ｆｏｃｕｓモード中の画像切り替え操作によるＷｅｂ画像閲覧画面の切替表示の処理である。

次に、Ｓ９０９（図１５）において、画像８０１と画像１６０２に対するｆｏｃｕｓモードを制御するための処理について、図１９を用いて説明する。

Ｓ９０９において、アニメーション制御をした後、Ｓ１７０３においてプログラム実行部４０３はアニメーション制御が終了したかを判定する。終了されたと判定した場合、プログラム実行部４０３は対象の画面に対してＷｅｂ部品の機能を実行する（Ｓ１７０４）。本実施例では、Ｗｅｂ部品の機能とはｆｏｃｕｓモードのことである。具体的には、画像１６０２のアニメーション制御により表示領域内１１０１に移動し、アニメーション制御が終了すると、ｆｏｃｕｓモードにより画像１６０２が拡大される（図１７−３（ｈ））。

一方の画像８０１の場合は、アニメーション制御による表示領域外１１００への移動の前にｆｏｃｕｓモードの実行を終了してから移動する形態でもいいし、アニメーション制御による表示領域外１１００への移動の後にｆｏｃｕｓモードの実行を終了する形態でもよい。図１７−１〜図１７−３では前者の形態の一例を示している。

実施例２（図１７−１（ａ）、図１７−３（ｈ））において、Ｗｅｂ部品情報と紐付けられている選択画像（８０１、１６０２）の間に、選択画像でない画像８０２が１枚配置されている状態を例に説明したが、選択画像でない画像が複数枚である形態も可能である。

実施例２より、ｆｏｃｕｓモードを実行中の場合でも画像切り替え操作によりアニメーションで関連画像へ切り替え表示を実現でき、所望の画像に切り替わったことをユーザーは直感的に知ることができる。

〔その他の実施例〕
上記の実施例における画像と選択画像は、文書、写真、表、グラフ、絵のいずれか一つ、あるいはそれらを組み合わせたものであり、画像一部分を画面表示として実施しても構わない。また、Ｗｅｂ画像閲覧画面８０３で同時に閲覧表示する画像を１枚としているが、複数枚として実施しても構わず、１ページに掲載されている複数の画像それぞれに対してｆｏｃｕｓモードを実行するための事前登録も可能であるものとする。

上記の実施例において、ユーザーの操作により画像Ａを表示領域内１１０１から表示領域外１１００に移動させ、画像Ｂを表示領域外１１００から表示領域内１１０１に移動させる場合（実施例１の場合は図１１（ｂ）、実施例２の場合は図１７−１（ｂ））、表示領域内１１０１において画像Ａと画像Ｂの一部分を重ねるかどうかは問わない。画像Ａや画像Ｂの一方あるいは両方のサイズが大きい場合等で、画像Ａから画像Ｂへの切り替え途中で画像同士が重なる形態は考えられる。

上記の実施例において、ＣＳＳプロパティを用いてアニメーション移動させたが、画像位置の移動方法は問わず、ＪａｖａＳｃｒｉｐｔプログラムにより移動しても構わない。

上記の実施例において、画像８０１のフェードアウトアニメーションと画像８０２のフェードインアニメーションを同時に実施したが、異なるタイミングで開始しても構わない。例えば、画像８０１のフェードアウトアニメーションを開始してから、画像８０２のｖｉｓｉｂｉｌｉｔｙプロパティをｖｉｓｉｂｌｅに設定し、画像８０２のフェードインアニメーションを開始しても構わない。

実施例１と実施例２ではスワイプ操作による画像の切り替え表示を例に説明したが、操作の仕方はスワイプに限定されず、例えばピンチ操作で拡大、縮小制御や、ローテート操作で回転制御するよう実施しても構わない。さらに実施例２のｆｏｃｕｓモードについては、ｆｏｃｕｓモードの開始方法や解除方法、ｆｏｃｕｓモード中の選択画像への切り替え方法は、上記の形態に限定されず、ｆｏｃｕｓモードの開始や解除、選択画像への切り替え等、動作きっかけとなる操作の内容は問わない。例えば、ｆｏｃｕｓボタン１６０１を押下したことで、ｆｏｃｕｓモードを実行する準備状態になり、画像８０１をダブルタップすることで初めて画像８０１が拡大され、再び画像８０１をダブルタップすると画像８０１が等倍の元の状態に戻り、ｆｏｃｕｓモードを実行する準備状態に戻る形態も考えられる。

上記の実施例では、ｖｉｓｉｂｉｌｉｔｙプロパティをｖｉｓｉｂｌｅ（可視状態）またはｉｎｖｉｓｉｂｌｅ（不可視状態）に設定する形態を例に説明したが、ｖｉｓｉｂｌｅ（表示状態）とｈｉｄｄｅｎ（非表示状態）の形態等、他のプロパティを用いる形態であってもよい。

また、本発明の目的は以下の処理を実行することによっても達成される。即ち、上述した実施例の機能を実現するソフトウェアのプログラムコードを記録した記憶媒体を、システム或いは装置に供給し、そのシステム或いは装置のコンピュータ（またはＣＰＵやＭＰＵ等）が記憶媒体に格納されたプログラムコードを読み出す処理である。この場合、記憶媒体から読み出されたプログラムコード自体が前述した実施例の機能を実現することになり、そのプログラムコード及び該プログラムコードを記憶した記憶媒体は本発明を構成することになる。

１０１ Ｗｅｂサーバー
１０２ クライアントデバイス
３０１ アクセス制御部
３０２ ページ生成部
３０３ データアクセス部
３０４ 関連情報データベース
３０５ ユーザー情報データベース
３０６ 画像データベース
４００ Ｗｅｂブラウザ
４０１ ジェスチャ判断部
４０２ 操作判断部
４０３ プログラム実行部

Claims (16)

1. ディスプレイにおける表示領域内に含まれない画像の表示プロパティを不可視状態に設定し、前記表示領域内の画像の表示プロパティが不可視状態であれば非表示とし、可視状態であれば表示するソフトウェアシステムを有するクライアントデバイスであって、
   前記ディスプレイに対するユーザーの操作が、前記表示領域内の画像の表示を別の画像の表示に切り替えるための画像切り替え操作であるかを判断する操作判断手段と、
   前記操作判断手段によって前記ユーザーの操作が前記画像切り替え操作であると判断された場合、前記表示領域内に表示されている第一の画像の少なくとも一部が表示された状態で、前記表示領域内に含まれない第２の画像を前記表示領域内へ移動させ、前記ソフトウェアシステムで不可視状態に設定された前記第２の画像の表示プロパティを可視状態に変更する画像変更手段と、
   前記画像変更手段によって表示プロパティを可視状態に変更された第２の画像を前記表示領域内にさらに移動させ、前記表示領域内に表示されている前記第１の画像を表示領域外に移動させることで、前記表示領域内に表示される画像を前記第１の画像から前記第２の画像に切り替える画像切り替え手段と、
   を有することを特徴とするクライアントデバイス。
2. 前記画像変更手段は、
   前記第２の画像に属性情報を設定し、当該属性情報は、前記第２の画像を前記表示領域内に所定以上、移動させるための情報を含むことを特徴とする請求項１に記載のクライアントデバイス。
3. 前記画像変更手段は、前記第２の画像を前記表示領域内に所定以上移動させたことに応じて、前記第２の画像の表示プロパティを可視状態に変更することを特徴とする請求項１又は２に記載のクライアントデバイス。
4. 前記ユーザーが閲覧できる画像から前記ユーザーが選択した選択画像と、前記選択画像に対して前記ユーザーが利用できるオプション機能を実行するためのユーザーインターフェースであるＷｅｂ部品とを表示するＷｅｂ部品表示手段と、
   前記Ｗｅｂ部品表示手段によって表示されたＷｅｂ部品が選択されたことに応じて、選択されたＷｅｂ部品のオプション機能を実行するＷｅｂ部品機能実行手段と、
   前記Ｗｅｂ部品機能実行手段によって提供されたオプション機能が実行され、前記ディスプレイに対するユーザーの操作が、前記表示領域内の画像の表示を別の画像の表示に切り替えるための画像切り替え操作であると判断された場合、前記表示領域内に含まれない選択画像を前記表示領域内へ移動させ、前記ソフトウェアシステムで不可視状態に設定された前記選択画像の表示プロパティを可視状態に変更する選択画像変更手段と、
   前記選択画像変更手段によって表示プロパティを可視状態に変更された選択画像をさらに前記表示領域内に移動させ、前記表示領域内に現在表示されている第１の画像を前記表示領域外に移動させることで、前記表示領域内に表示されている画像を前記第１の画像の表示から前記選択画像の表示に切り替える選択画像切り替え手段と、
   を有する請求項１乃至３のいずれか一つに記載のクライアントデバイス。
5. 前記Ｗｅｂ部品は、
   前記選択画像の領域のうち前記ユーザーが選択した領域を拡大して表示するフォーカス機能を実行するためのユーザーインターフェースである請求項４に記載のクライアントデバイス。
6. 前記ディスプレイに表示される画像は、
   前記ユーザーを識別するためのユーザー情報と前記ユーザーが閲覧できる画像を識別するための画像情報とが紐付いた関連情報に基づいて表示されることを特徴とする請求項１乃至５のいずれか１つであるクライアントデバイス。
7. 前記画像切り替え操作は、
   前記ディスプレイに触れている指を強くはらうスワイプ操作である請求項１乃至６のいずれか１つに記載のクライアントデバイス。
8. 前記画像変更手段で表示プロパティを可視状態に変更された前記第二の画像は、前記表示領域内を移動する様子が表示されることを特徴とする請求項１乃至７のいずれか１つに記載のクライアントデバイス。
9. 表示プロパティで非表示状態に設定された画像を、ディスプレイの表示領域内の所定の位置に移動するまで非表示にしつつ、ユーザーからの表示画像の切り替え操作に従って前記表示領域の外から内に移動するＷｅｂブラウザにコンテンツを提供する装置であって、
   ｗｅｂコンテンツを提供する提供手段を有し、
   前記ｗｅｂコンテンツには、ユーザーからの表示画像の切り替え操作に従って前記表示領域の外から内に移動する画像に対して前記Ｗｅｂブラウザで非表示状態と設定されている表示プロパティを、前記所定の位置に移動する前に表示状態に変更するためのプログラムが含まれ、
   前記ｗｅｂコンテンツを提供された前記Ｗｅｂブラウザは、画像が前記表示領域外から前記表示領域内の所定の位置に移動するまでの間に当該画像を表示する
   ことを特徴とする装置。
10. 前記ｗｅｂコンテンツには、ユーザーからの表示画像の切り替え操作に従って前記表示領域の外から内に移動する画像に対して前記Ｗｅｂブラウザで非表示状態と設定されている表示プロパティを、当該画像が前記表示領域内に所定以上移動させたことに応じて、表示状態に変更するためのプログラムが含まれる
    ことを特徴とする請求項９に記載の装置。
11. 前記ｗｅｂコンテンツは画像の表示プロパティを表示状態に変更するためのＣＳＳ又はＪａｖａＳｃｒｉｐｔを含むことを特徴とする請求項９または１０に記載の装置。
12. 前記Ｗｅｂブラウザは、表示プロパティで非表示状態に設定された画像を前記表示領域内の所定の位置に移動すると表示プロパティを表示状態に変更し、当該画像を前記表示領域に表示することを特徴とする請求項９乃至１１のいずれか１つに記載の装置。
13. 前記Ｗｅｂブラウザは、前記表示領域の外にある画像の表示プロパティを不可視状態に設定することを特徴とする請求項９乃至１２のいずれか１つに記載の装置。
14. ディスプレイにおける表示領域内に含まれない画像の表示プロパティを不可視状態に設定し、前記表示領域内の画像の表示プロパティが不可視状態であれば非表示とし、可視状態であれば表示するソフトウェアシステムを有するクライアントデバイスで実現される制御方法であって、
    前記ディスプレイに対するユーザーの操作が、前記表示領域内の画像の表示を別の画像の表示に切り替えるための画像切り替え操作であるかを判断する操作判断ステップと、
    前記操作判断ステップによって前記ユーザーの操作が前記画像切り替え操作であると判断された場合、前記表示領域内に表示されている第一の画像の少なくとも一部が表示された状態で前記表示領域内に含まれない第２の画像を前記表示領域内へ移動させ、前記ソフトウェアシステムで不可視状態に設定された前記第２の画像の表示プロパティを可視状態に変更する画像変更ステップと、
    前記画像変更ステップによっての表示プロパティを可視状態に変更された第２の画像を前記表示領域内にさらに移動させ、前記表示領域内に表示されている前記第１の画像を表示領域外に移動させることで、前記表示領域内に表示される画像を前記第１の画像から前記第２の画像に切り替える画像切り替えステップと、
    を有することを特徴とする制御方法。
15. 表示プロパティで非表示状態に設定された画像を、ディスプレイの表示領域内の所定の位置に移動するまで非表示にしつつ、ユーザーからの表示画像の切り替え操作に従って前記表示領域の外から内に移動するＷｅｂブラウザにコンテンツを提供する装置で実行される制御方法であって、
    ｗｅｂコンテンツを提供する提供工程を有し、
    前記ｗｅｂコンテンツには、ユーザーからの表示画像の切り替え操作に従って前記表示領域の外から内に移動する画像に対して前記Ｗｅｂブラウザで非表示状態と設定されている表示プロパティを、前記所定の位置に移動する前に表示状態に変更するためのプログラムが含まれ、
    前記ｗｅｂコンテンツを提供された前記Ｗｅｂブラウザは、画像が前記表示領域外から前記表示領域内の所定の位置に移動するまでの間に当該画像を表示する
    ことを特徴とする装置。
16. 請求項１から１３のいずれか１項に記載の各手段としてコンピュータを機能させるためのプログラム。

Images