JP6160664B2 - 情報処理装置とサーバと情報処理システムと、その処理方法及びプログラム - Google Patents

Description

本発明は、画像を用いた指示内容を記録する情報処理装置とサーバと情報処理システムと、その処理方法及びプログラムに関する。

従来より、サーバに格納されている画像データを、クライアント側で編集し、編集した画像をサーバで保存する技術（クライアント／サーバ型のシステム）が実現されている。

具体的には、クライアント側がＷｉｎｄｏｗｓ（登録商標）アプリケーションのような場合、サーバとクライアント間は画像の送受信にバイナリデータを授受できるプロトコル例：ＴＣＰソケット通信）で、バイナリデータである画像データをクライアント側で受信し、クライアント側の画像操作インタフェース（例：ＧＤＩ）を用い、受信した画像データに対してアプリケーション上で図形やフリーハンドなどの描画操作を行うことが一般的に行われている。
これらの技術を利用して、例えば、特許文献１のように、電子会議システムでは、画面上で画像を操作した内容を複数人で共有することが行われている。

特開２００６−９１０３３号公報

しかしながら、クライアント／サーバ型のシステムではクライアント側で入力した内容をサーバで管理する仕組みを構築することは容易であるが、ブラウザを用いたＷｅｂ環境では、画像の編集、編集した内容の管理は難しかった。

特に、ブラウザ上で表示した画像に対して編集を行うことができても、その編集に係る内容（例えば、編集順やその編集に係るコメント）を適切に管理することは容易ではなかった。また、他のユーザに対して、画像を用いた指示を出すには、画像を単に編集できる技術では指示内容が伝わらず、従来の技術では解決が困難な課題もあった。

そこで、本発明の目的は、画像を用いた入力内容を容易に記録し、当該記録を他の装置で容易に参照することができる仕組みを提供することである。

本発明の目的を達成するための、画像を管理するサーバと情報処理装置を含む情報処理システムであって、前記サーバは、画像と前記情報処理装置で追加されたアノテーションのアノテーション情報と入力情報とを管理する管理手段と、要求のあった情報処理装置で再描画すべく、前記情報処理装置からの要求に従って、前記画像と前記アノテーション情報と前記入力情報とを送信する画像送信手段と、前記情報処理装置から送信された編集画像を受信する編集画像受信手段と、前記編集画像受信手段で受信した編集画像を、他のサーバに送信し、他の情報処理装置で参照させるべく、前記編集画像と、当該編集画像に対応する入力情報とを登録制御する登録制御手段とを備え、前記情報処理装置は、前記サーバから画像とアノテーション情報と入力情報とを取得する画像取得手段と、前記画像取得手段で取得したアノテーション情報を用いて、前記画像を表示する画像表示制御手段と、ユーザの操作に対応して、アノテーションと当該アノテーションを識別する識別情報とを前記画像上に追加するアノテーション追加手段と、前記アノテーション追加手段による追加がされる場合に、ユーザが任意入力できる入力欄に前記識別情報を含む入力情報を追加する入力情報追加手段と、ユーザによる操作指示に従って、前記画像と前記アノテーション情報とを用いて、編集画像を生成する編集画像生成手段と、前記編集画像生成手段で生成された編集画像を送信する編集画像送信手段とを備えることを特徴とする。

本発明によれば、画像を用いた入力内容を容易に記録し、当該記録を他の装置で容易に参照することができる。

Ｗｅｂシステムの構成の一例を示すシステム構成図である クライアント端末１００に適用可能な情報処理装置のハードウエア構成の一例を示すブロック図である 本システムにおける各装置の機能ブロックを示す図である 全体処理を示すフローチャートである アノテーション・メモ読み戻し処理のフローチャートである アノテーション追加処理のフローチャートである アノテーション削除処理のフローチャートである アノテーション全削除処理のフローチャートである 画像回転処理のフローチャートである 画像保存処理のフローチャートである 情報テーブルの一例を示すデータ図である 画像保存時の情報テーブルの遷移を示すデータ図である アノテーション配列を示すデータ図である アノテーションを追加した際のアノテーション配列を示すデータ図である 画像一覧表示の一例を示す画面イメージ図である 画像にアノテーションを追加した際の画面イメージ図である 第２の実施形態における全体処理を示すフローチャートである 第２の実施形態におけるアノテーション追加処理のフローチャートである 第２の実施形態におけるアノテーション削除処理のフローチャートである 第２の実施形態におけるアノテーション全削除処理のフローチャートである 第２の実施形態における画像回転処理のフローチャートである 第２の実施形態におけるアノテーショングループ化処理のフローチャート コメントテーブルの一例を示すデータ図である グループ化情報テーブルの一例を示すデータ図である 画像にアノテーションを追加した際の付箋を表示した画面イメージ図である アノテーションをグループ化した際の画面イメージ図である

以下、図面を参照して、本発明の実施形態を詳細に説明する。

〔第１の実施形態〕
図１は本発明のクライアント端末１００（情報処理装置）と、Ｗｅｂサーバ２００（画像管理サーバ）と、ＤＢサーバ３００と、ファイルサーバ４００とクライアント端末４０１と含むＷｅｂシステム（情報処理システム）の構成の一例を示すシステム構成図である。

なお、クライアント端末１００は、画像を登録、編集する側の拠点であり、修理工場などに設置されている情報処理装置である。また、クライアント端末４０１は、登録された画像をチェックする側の拠点であり、例えば、画像をチェックして保険を適用するかを判断する企業に設置されている情報処理装置である。Ｗｅｂサーバ２００（画像管理サーバ）と、ＤＢサーバ３００と、ファイルサーバ４００はクラウド環境などのネットワーク上に設置されているサーバである。

なお、より好適な例を用いて説明するため、本実施形態では、画像を管理するＷｅｂシステムとしたが、画像を編集した内容を管理するシステムであれば、一般的なＷｅｂシステム以外にも適用してもよい。

クライアント端末１００はブラウザを記憶し、ブラウザからネットワーク５００を介して、Ｗｅｂサーバ２００にアクセスする。Ｗｅｂサーバ２００にログインして、Ｗｅｂサーバ２００からブラウザで表示するＷｅｂ画面を受信し、Ｗｅｂサーバで管理している画像を受信してブラウザ上で表示する。なお、Ｗｅｂ画面はＷｅｂサーバ２００に記憶されている。Ｗｅｂ画面には、各種スクリプトが記述されており、Ｗｅｂ画面上の表示制御を実現可能な構成となっている。
すなわち、クライアント端末１００は、画像を管理する記憶装置（例えば、Ｗｅｂサーバ）と通信可能な情報処理装置である。
ＤＢサーバ３００は、画像を管理するうえでのデータを管理するサーバであり、各種データをデータベースで管理するサーバである。
Ｗｅｂサーバ２００からの要求（検索要求、登録要求、削除要求）に応じて、管理しているデータへアクセス可能となっている。

図１５のデータ送信ボタン１５０４が押下されると、後述するフローチャートで登録された画像、編集画像やメモ（案件データ）がファイルサーバ４００にＷｅｂサーバ２００から送信される。ファイルサーバ４００は、送信された案件データを登録して、クライアント端末４０１に通知する。クライアント端末４０１で案件データを表示する。この表示の際には、アノテーションが合成された編集画像がブラウザ上に表示される。

Ｗｅｂサーバでは画像を管理し、この画像に対するアノテーション情報やメモ情報は図１１のオリジナル情報テーブルと編集画像情報テーブルで管理している。オリジナル情報テーブルは、オリジナル画像ＩＤ、オリジナル画像ファイルパス、メモの値を保持している。編集画像情報テーブルは、編集画像ＩＤ、オリジナル画像ＩＤ、編集画像ファイルパス、シリアライズアノテーションの値を保持している。

なお、本実施形態では、ＤＢサーバ３００をＷｅｂサーバ２００と別筐体として説明したが、ＷｅｂサーバとＤＢサーバ３００は同一筐体であってもよい。
すなわち、Ｗｅｂサーバ２００のハードディスク（記憶装置）上でデータを管理する（データベース）構成であってもよい。Ｗｅｂサーバ２００とファイルサーバ４００が同一筐体であってもよい。

また、本実施形態では、ネットワーク５００は、外部のネットワーク（クラウドシステムなどのＷｅｂ環境）を想定しているが、社内のクローズしたネットワークであってもよい。

次に、図２を用いて、図１に示したクライアント端末１００（情報処理装置）と、Ｗｅｂサーバ２００と、ＤＢサーバ３００に適用可能な情報処理装置のハードウエア構成について説明する。
なお、図２は、クライアント端末１００として説明する。

図２において、２０１はＣＰＵで、システムバス２０４に接続される各デバイスやコントローラを統括的に制御する。また、ＲＯＭ２０２あるいは外部メモリ２１１には、ＣＰＵ２０１の制御プログラムであるＢＩＯＳ（Ｂａｓｉｃ Ｉｎｐｕｔ ／ Ｏｕｔｐｕｔ Ｓｙｓｔｅｍ）やオペレーティングシステムプログラム（以下、ＯＳ）や、各サーバ或いは各ＰＣの実行する機能を実現するために必要な後述する各種プログラム等が記憶されている。

本実施形態では、例えば、ブラウザを管理している。なお、図２がＷＥＢサーバ２００の構成図とする場合、Ｗｅｂアプリケーション、画像を記憶管理している。なお、Ｗｅｂアプリケーションではクライアント端末１００からのログインを制御するため、セッションの管理をしている。同時接続数の管理、すなわちセッション管理については、Ａｐａｃｈｅなどで周知技術であるため実現可能であるため説明を省略する。また、セッションだけでなく、Ｗｅｂサプリケーションでログインユーザ数を管理する構成であってもよい。

２０３はＲＡＭで、ＣＰＵ２０１の主メモリ、ワークエリア等として機能する。ＣＰＵ２０１は、処理の実行に際して必要なプログラム等をＲＯＭ２０２あるいは外部メモリ２１１からＲＡＭ２０３にロードして、該ロードしたプログラムを実行することで各種動作を実現するものである。

また、２０５は入力コントローラで、キーボード（ＫＢ）２０９や不図示のマウス等のポインティングデバイス等からの入力を制御する。２０６はビデオコントローラで、ＣＲＴディスプレイ（ＣＲＴ）２１０等の表示器への表示を制御する。なお、図２では、ＣＲＴ２１０と記載しているが、表示器はＣＲＴだけでなく、液晶ディスプレイ等の他の表示器であってもよい。これらは必要に応じて管理者が使用するものである。

２０７はメモリコントローラで、ブートプログラム，各種のアプリケーション，フォントデータ，ユーザファイル，編集ファイル，各種データ等を記憶するハードディスク（ＨＤ）や、フレキシブルディスク（ＦＤ）、或いはＰＣＭＣＩＡカードスロットにアダプタを介して接続されるコンパクトフラッシュ（登録商標）メモリ等の外部メモリ２１１へのアクセスを制御する。

２０８は通信Ｉ／Ｆコントローラで、ネットワーク（例えば、図１に示した５００）を介して外部機器と接続・通信するものであり、ネットワークでの通信制御処理を実行する。例えば、ＴＣＰ／ＩＰを用いた通信等が可能である。

なお、ＣＰＵ２０１は、例えばＲＡＭ２０３内の表示情報用領域へアウトラインフォントの展開（ラスタライズ）処理を実行することにより、ＣＲＴ２１０上での表示を可能としている。また、ＣＰＵ２０１は、ＣＲＴ２１０上の不図示のマウスカーソル等でのユーザ指示を可能とする。

本発明を実現するための後述する各種プログラムは、外部メモリ２１１に記録されており、必要に応じてＲＡＭ２０３にロードされることによりＣＰＵ２０１によって実行されるものである。さらに、上記プログラムの実行時に用いられる定義ファイル及び各種情報テーブル等も、外部メモリ２１１に格納されており、これらについての詳細な説明も後述する。

次に、図３の機能ブロック図を参照して、本システムにおける各装置の各機能ブロックについて説明する。なお、各機能は、ＣＰＵにより実行され、各機能で実行される詳細な処理については、図４〜図１０のフローチャートで説明する。
まず、クライアント端末１００の機能部について説明する。
画像取得部３０１は、サーバなどの画像を管理する記憶装置から画像を取得する機能部である。
画像表示制御部３０２は、画像取得部３０１で取得した画像を表示する機能部である。

アノテーション表示制御（追加）部３０３は、画像表示制御部３０２で表示した画像上のユーザの操作に対応する位置に、アノテーションを操作した識別情報を付したアノテーションを表示（追加）する機能部である。

入力情報表示制御（追加）部３０４は、アノテーション表示制御（追加）部３０３によるアノテーションを表示（追加）する場合に、前記識別情報に対応する入力情報を表示（追加）する機能部である。
次に、Ｗｅｂサーバ２００の機能部について説明する。
画像管理部３０５は、画像とクライアント端末１００で付与されたアノテーション情報と入力情報とを管理する機能部である。

画像送信部３０６は、クライアント端末１００にユーザに指定された画像を送信する機能部である。なお、画像に対応するアノテーション情報と入力情報を送信する機能部でもある。

以下、図４〜図１０のフローチャートを参照して、本実施形態のシステムにおける処理についてより詳細に説明する。
なお、各ステップについては、各装置のＣＰＵが処理を実行する。

まず、図４を用いて、本発明の実施形態における、全体処理について説明する。図４は、全体処理を示すフローチャートである。

ステップＳ４００では、Ｗｅｂサーバ２００にログインして、Ｗｅｂサーバ２００から画像一覧を表示する。本実施形態では、図１５に示す通り、各案件からユーザが所望の案件を指定すると、その案件情報が表示される。案件情報として登録されている画像（図１５ではサムネイル画像）の一覧をＷｅｂサーバから取得して表示される。具体的には、図１２の１２０１のデータに従って、Ｗｅｂサーバ２００で案件情報に紐づく画像を取得して表示する。なお、オリジナル画像に対応するサムネイル画像がＷｅｂサーバ２００で管理されているものとする。各画像にはオリジナル画像ＩＤを含んでいる。画像ＩＤはファイル名に含んでいる構成、ファイルのプロパティに含んでいる構成などがある。

ここで図１５について説明する。図１５はクライアント端末１００の画像一覧表示画面の一例を示す図である。画像一覧表示画面は、ブラウザを用いて表示され、１５００に登録されているオリジナル画像のサムネイル画像が表示される。また、クライアント端末１００で画像をドラッグ＆ドロップすることで、所望の画像を登録できる構成となっている。

１５０１は、編集する画像が指定されている場合の枠である。１５０２は、画像が編集されている（アノテーションが付加されている）ことを示すマークである。Ｗｅｂサーバ２００はサムネイル画像を送信する際に、図１２の１２０２のシリアライズアノテーションにアノテーション情報が記憶されていることをチェックして、マークを付与してクライアント端末１００へ送信する。１５０３は、編集ボタンであり、１５０１で画像を選択され、編集ボタンが押下されることで、画像が表示される。編集例は、図１６である。図１６については後述する。

ステップＳ４０１では、１５０１で画像の指定を受け付ける。
ステップＳ４０２では、指定された画像の編集ボタン１５０３の押下を受け付ける。

ステップＳ４０３では、１５０１で指定された画像のオリジナル画像ＩＤをＷｅｂサーバ２００に送信する。ＨＴＴＰリクエストにオリジナル画像ＩＤを含めて送信するものとする。

ステップＳ４０４では、クライアント端末１００からオリジナル画像ＩＤを受信する。受信したオリジナル画像ＩＤに対応するオリジナル画像を取得するため、オリジナル画像ＩＤを含む取得要求をＤＢサーバ３００に送信する。例えば、ＳＱＬ文を発行するものとする。

ステップＳ４０５では、Ｗｅｂサーバ２００から受信した取得要求に含まれるオリジナル画像ＩＤに従って、オリジナル画像情報テーブル１２０８からオリジナル画像ファイルパス（例えば、１２０３）を取得する。
ステップＳ４０６では、取得したオリジナル画像ファイルパスをＷｅｂサーバ２００に送信する。

ステップＳ４０７では、オリジナル画像ＩＤに従って、オリジナル画像情報テーブル１２０８からメモ１２０４を取得する。また、オリジナル画像ＩＤに従って、編集画像情報テーブル１２０９からシリアライズアノテーション１２０２を取得する。なお、アノテーション情報と絵も情報はＪＳＯＮ型式の文字列型である。
ステップＳ４０８では、取得したシリアライズアノテーション（以下、アノテーション情報）とメモ（以下、メモ情報）をＷｅｂサーバ２００へ送信する。

なお、ステップＳ４０６と、ステップＳ４０８でそれぞれ情報を送信したが、まとめて送信する構成であってもよい。アノテーション情報やメモ情報が取得できない場合には、ＮＵＬＬ値を返す。

ステップＳ４０９では、オリジナル画像ファイルパス、アノテーション情報、メモ情報を受信する。

ステップＳ４１０では、アノテーション情報とメモ情報がＮＵＬＬ値であるかを判定する。アノテーション情報とメモ情報の少なくとも一方がＮＵＬＬでない場合には、ステップＳ４１４へ処理を移す。ともにＮＵＬＬの場合には、ステップＳ４１１へ処理を移す。ともにＮＵＬＬの場合とは、画像に編集がされていない状態である。
ステップＳ４１１では、オリジナル画像ファイルパスに従って、外部メモリ（ＨＤＤ等）に記憶されているオリジナル画像を取得する。

ステップＳ４１２では、取得したオリジナル画像（オリジナル画像ＩＤを含む）をクライアント端末１００へ送信する。すなわち、画像を送信する画像送信処理の一例を示すステップである。

ステップＳ４１３では、Ｗｅｂサーバ２００からオリジナル画像を受信する。受信したオリジナル画像はＲＡＭに記憶され、表示する際に取得される。すなわち、記憶装置から画像を取得する画像取得処理の一例を示すステップである。
そして、受信した画像をブラウザを用いて表示する。すなわち、取得した画像を表示する画像表示制御処理の一例を示すステップである。

オリジナル画像は、例えば、ＨＴＭＬ５ Ｃａｎｖａｓ上に表示される。このＣａｎｖａｓ上に表示された画像の上位レイヤーにアノテーションを描画させることが可能となる。

ステップＳ４１４では、オリジナル画像ファイルパスに従って、外部メモリ（ＨＤＤ等）に記憶されているオリジナル画像（オリジナル画像ＩＤを含む）を取得する。また、受信したアノテーション情報とメモ情報を取得する。

ステップＳ４１５では、取得したオリジナル画像とアノテーション情報とメモ情報をクライアント端末１００に送信する。すなわち、画像を送信する画像送信処理の一例を示すステップである。

なお、アノテーション情報とメモ情報は、ＪＳＯＮ型式である。なお、ＪａｖａＳｃｒｉｐｔ（登録商標）のオブジェクト形式への変換は、クライアント端末１００で実行するものとする。例えば、ＪＳＯＮ．ｐａｒｓｅ関数を用いることで実現可能である。

ステップＳ４１６では、オリジナル画像とアノテーション情報とメモ情報をＷｅｂサーバ２００から受信する。アノテーション情報をＲＡＭ上に記憶する。この、アノテーション情報には、描画関数と描画パラメータが記憶されるため、アノテーション情報をデシリアライズして描画関数と描画パラメータを用いてオリジナル画像上にアノテーションを順次表示する。このアノテーションの表示は、ステップＳ４１８のアノテーション・メモ読み戻し処理で説明する。

ステップＳ４１７では、受信したオリジナル画像を、ブラウザを用いて表示する。オリジナル画像は、例えば、ＨＴＭＬ５ Ｃａｎｖａｓ上に表示される。このＣａｎｖａｓ上に表示された画像の上位レイヤーにアノテーションを描画させることが可能となる。すなわち、取得した画像を表示する画像表示制御処理の一例を示すステップである。

ステップＳ４１８では、デシリアライズされたアノテーション情報を用いて上位レイヤーに表示する。また、デシリアライズされたメモ情報をコメント欄（１６０３）に表示する。詳細は図５で後述する。すなわち、表示した画像上のユーザの操作に対応する位置に、アノテーションを操作した識別情報を付したアノテーションを表示するアノテーション表示制御（追加）処理の一例を示すステップである。

なお、その後のステップＳ４１９〜ステップＳ４２３の処理は、ブラウザ上の編集ボタン１５０３が押下され、図１６の画面での、表示画面上でのドラッグ操作や各種ボタンの押下の操作によって処理が切り替わるものとする。図１６の画面は、画像上のユーザの操作に対応する位置に、アノテーションの識別情報を付したアノテーションを表示するためのアノテーション表示制御コードと、前記アノテーションを表示する場合に、前記識別情報に対応する入力情報を表示するための入力情報表示制御コードを含む画面情報である。この画面情報はＷｅｂサーバに記憶されている。
この画面情報（オリジナル画像含む）をクライアント端末１００に送信して、クライアント端末１００でアノテーションやメモを入力する。

ステップＳ４１９では、アノテーションを追加する。詳細は図６で後述する。
ステップＳ４２０では、アノテーションを削除する。詳細は図７で後述する
ステップＳ４２１では、アノテーションを全削除する。詳細は図８で後述する。
ステップＳ４２２では、画像を回転する。詳細は図９で後述する。
ステップＳ４２３では、アノテーションやメモを入力した画像を保存する。詳細は図１０で後述する。

ステップＳ４２４では、画像の編集が終了したか否かを判定する。例えば、データ送信ボタン１５０４が押下されたか否かを判定する。終了した場合には、Ｗｅｂサーバにデータ送信要求を送信し、案件情報をファイルサーバ４００に送信する。ファイルサーバ４００は案件情報を登録する。案件情報には、案件の登録情報（書誌情報）や、編集した編集画像（アノテーションが合成された画像）であり、この案件情報を一式Ｗｅｂサーバ２００からファイルサーバ４００に送信して、登録する。この案件情報をクライアント端末４０１からブラウザを介して参照する。

次に、図５を用いて、本発明の実施形態における、アノテーション・メモ読み戻し処理について説明する。図５は、アノテーション・メモ読み戻し処理のフローチャートである。
ステップＳ５０１では、ＲＡＭに記憶されているアノテーション情報を取得する。

ステップＳ５０２では、取得したアノテーション情報をデシリアライズする。このデシリアライズは、ブラウザで表示されているＨＴＭＬに記述されているＪａｖａＳｃｒｉｐｔのＡＰＩ（ＪＳＯＮ．ｐａｒｓｅ）を用いて行う。これにより、デシリアライズされたＪａｖａＳｃｒｉｐｔオブジェクトの配列に変換する。ＪａｖａＳｃｒｉｐｔオブジェクトは、配列構造となっている。また、各要素は描画命令が配列になっており、２重配列になっている。
なお、ＪａｖａＳｃｒｉｐｔオブジェクトの配列を、アノテーション配列と呼ぶものとする。アノテーション配列のデータ構造の例が、図１３である。

描画命令の配列を描画配列と呼ぶものとする。描画配列はアノテーション配列の各要素の各レコードである。また、描画配列の各要素には、描画命令１３０１、描画パラメータ１３０２が記憶されている。
ステップＳ５０３では、アノテーション配列の数分繰り返す。

ステップＳ５０４では、次の配列の要素（アノテーション情報に相当）があるかを判定する。配列要素がある場合には、ステップＳ５０５へ処理を移し、配列要素が取得できない場合には、処理を終了する。処理を終了する場合には、すべてのアノテーション情報を描画した場合である。
ステップＳ５０５では、Ｎ番目（Ｎ＝０，１，２・・・）のアノテーション配列の要素を取得する。例えば、図１３のＮ番目のアノテーションの配列要素。
ステップＳ５０６では、描画配列の数分繰り返す。

ステップＳ５０７では、次の描画配列の要素（描画命令に相当）あるかを判定する。配列要素がある場合には、ステップＳ５０８へ処理を移し、配列要素が取得できない場合には、ステップＳ５１４へ処理を移す。ステップＳ５１４へ処理を移す場合には、アノテーション配列の１つの要素のうちすべての描画命令を実行した場合である。
ステップＳ５０８では、Ｍ番目（Ｎ＝０，１，２・・・）の描画配列の要素を取得する。

ステップＳ５０９では、描画配列の要素から、描画関数（ｏｐｅＮａｍｅ）と、描画配列パラメータ（ｏｐｅＰａｒａｍ）を取得する。例えば、図１３の１３０１の描画関数と、１３０２の描画関数パラメータ。

ステップＳ５１０では、描画関数（ｏｐｅＮａｍｅ）が「Ｃｏｍｍｅｎｔ」か否かを判定する。「Ｃｏｍｍｅｎｔ」はメモ情報を描画するものである。すなわち、メモ情報があるか否かを判定する。「Ｃｏｍｍｅｎｔ」である場合にステップＳ５１２へ処理を移し、「Ｃｏｍｍｅｎｔ」でない場合には、アノテーションを描画するために、ステップＳ５１１へ処理を移す。

ステップＳ５１１では、取得した描画関数（ｏｐｅＮａｍｅ）と、描画配列パラメータ（ｏｐｅＰａｒａｍ）を用いて、ＪａｖａＳｃｒｉｐｔの描画関数を実行し、レイヤーにアノテーションを再描画する。アノテーションの例は１６０１である。また、配列の要素番号（作成順の番号）を取得して、描画の始点（描画開始位置）に要素番号を挿入したオブジェクト（１６０２）を描画する。要素番号を挿入したオブジェクトは、アノテーション番号であり、メモの番号に対応するものである。
ステップＳ５１２では、描画配列パラメータ（ｏｐｅＰａｒａｍ）のメモ（例えば、１３０３）を取得する。
ステップＳ５１３では、取得したメモを、コメント欄１６０３に表示する。
ステップＳ５１４では、ステップＳ５０６へ処理を戻す。
ステップＳ５１５では、ステップ５０３へ処理を戻す。

次に、図６を用いて、本発明の実施形態における、アノテーション追加処理について説明する。図６は、アノテーション追加処理のフローチャートである。

ステップＳ６０１では、ブラウザ上で表示しているオリジナル画像上のマウスのドラッグ操作を検知する。この時、１６０８で選択されたアノテーションの形状を示す種別（矢印、丸印、フリーハンド）、線の太さ（細い、標準、太い）、線の色が設定されている。
すなわち、１６０７は、ユーザの操作によりアノテーションの属性を選択する選択処理の一例を示すものである。

ステップＳ６０２では、設定されているアノテーションの種別（矢印、丸印、フリーハンド）、線の太さ（細い、標準、太い）、線の色に従って、レイヤー上にアノテーションを描画する。なお、描画に際しては、例えば、ＪａｖａＳｃｒｉｐｔの描画ライブラリが提供する描画関数を用いて実行する。例えば、１６０４の矢印。すなわち、表示した画像上のユーザの操作に対応する位置を取得（位置情報取得）し、この位置にアノテーションを操作した識別情報を付したアノテーションを表示するアノテーション表示制御（追加）処理の一例を示すステップである。また、選択された属性に対応するアノテーションを画像上に表示する処理である。
ステップＳ６０３では、アノテーション配列に空要素を追加する。

ステップＳ６０４では、追加した空要素に描画したアノテーションの描画命令（描画関数、描画関数パラメータ）を追加する。例えば、図１４の１４０１のようにアノテーション情報が追加される。図１４は説明上、配列は２つとなっているが、図１６の１６０４のアノテーションを追加した場合には、配列は４つとなる。

ステップＳ６０５では、追加されたアノテーションのアノテーション番号を取得する。アノテーション番号は、配列要素の要素数（作成順の番号）をもとに決定する。

ステップＳ６０６では、取得した要素数（アノテーション番号）を図形化したオブジェクト（番号を挿入したオブジェクト１６０９）を描画したアノテーションの始点（マウスでのドラッグ操作開始位置）に表示する。この表示もレイヤーに表示される。要素数とアノテーションが対応付いている。すなわち、表示した画像上のユーザの操作に対応する位置に、アノテーションを操作した識別情報を付したアノテーション（アノテーションと識別番号）を追加表示するアノテーション表示制御（追加）処理の一例を示すステップである。また、番号を挿入したオブジェクトを表示したアノテーションに付して表示する処理である。なお、本実施形態では、マウスでのドラッグ操作開始位置が矢印方向とは逆の末端となるようにアノテーションの始点としたが、マウスでのドラッグ操作開始位置が矢印方向の先端となるようにアノテーションを描画するようにした場合には、要素数（アノテーション番号）を図形化したオブジェクト（番号を挿入したオブジェクト１６０９）を、マウスでのドラッグ操作終了位置（終点）に描画するようにする。すなわち、アノテーションに対応する所定の位置に番号を挿入したオブジェクトを描画する。

ステップＳ６０７では、取得した要素数（アノテーション番号）をコメント欄１６０３に追加する（入力情報追加処理に相当）。追加された例が図１６の１６０５である。すなわち、アノテーションを表示する場合に、識別情報（番号）に対応する入力情報（テキスト）を表示する入力情報表示制御（追加）処理の一例を示すステップである。また、アノテーションに対するコメントを入力させるべく、アノテーションの追加に応じて、テキスト入力可能な領域に、自動的にアノテーションに対応する識別情報を表示する処理である。
また、ユーザの操作に応じて、キーボードにより入力された文字列を追加されたコメント欄に表示する。

なお、本実施形態では、１つのコメント欄（テキストボックス）にアノテーション番号を表示する構成したが、アノテーションが追加するごとに、アノテーションに対応するテキストボックス（入力欄）を追加表示する構成であってもよい。
また、本実施形態では、アノテーションを画像に表示し、アノテーションに対応するアノテーション番号のオブジェクトを画像に表示し、アノテーション番号のテキストを表示する手順としたが、アノテーションを表示後、テキストにアノテーション番号を表示した後に、アノテーション番号のオブジェクトを画像に表示する手順であってもよい。すなわち、結果的に、アノテーションとアノテーション番号とテキスト入力できる状態になれば、処理手順に限定されるものではない。

次に、図７を用いて、本発明の実施形態における、アノテーション削除処理について説明する。図７は、アノテーション削除処理のフローチャートである。
ステップＳ７０１では、取り消しボタンの押下を検知する（１６０７のボタン）。
ステップＳ７０２では、アノテーション配列（例えば、図１３）より、末尾の要素と要素数（アノテーション番号）を取得する。
ステップＳ７０３では、アノテーション配列から末尾の要素を削除する。

ステップＳ７０４では、アノテーション番号を指定して、レイヤーから対応するアノテーションを非表示（削除）する。なお、アノテーション番号とアノテーション（矢印などの図形オブジェクト）は対応付いて管理されているため、アノテーション配列の要素数を用いて、非表示の描画制御をすることで、レイヤーからアノテーションが削除される。
すなわち、アノテーションの削除要求に従って、最後に表示したアノテーション又は全アノテーションを削除する削除処理の一例を示すステップである。

この時、アノテーション番号のオブジェクトも合わせて削除する。また、取得した要素数に対応するコメント欄のテキスト（行）を削除する。このテキストを削除する処理は、アノテーションを削除する場合に、入力情報を削除する入力情報削除処理の一例を示すステップである。

次に、図８を用いて、本発明の実施形態における、アノテーション全削除処理について説明する。図８は、アノテーション全削除処理のフローチャートである。
ステップＳ８０１では、全てクリアボタンの押下を検知する（１６０７のボタン）。
ステップＳ８０２では、アノテーション配列の全要素を削除する。

ステップＳ８０３では、レイヤーからすべてのアノテーションを非表示（削除）する。すなわち、アノテーションの削除要求に従って、最後に表示したアノテーション又は全アノテーションを削除する削除処理の一例を示すステップである。
ステップＳ８０４では、コメント欄のテキストボックスを空文字列で更新する。すなわち、入力情報を削除する入力情報削除処理の一例を示すステップである。

テキストボックスのデータを削除してもよい。また、コメント欄のデータがすべて削除されることを通知して、ユーザからＯＫボタン（不図示）が押下された場合に、アノテーション、データの削除を実行するようにしてもよい。
次に、図９を用いて、本発明の実施形態における、画像回転処理について説明する。図９は、画像回転処理のフローチャートである。
ステップＳ９０１では、左回転ボタン／右回転ボタンの押下を検知する（１６０７のボタン）。

ステップＳ９０２では、アノテーションが削除されることを通知して、ユーザからＯＫボタン（不図示）が押下された場合に、ステップＳ９０３へ処理を移す。キャンセルボタン（不図示）が押下された場合に。処理を終了する（画像の回転をしない）。
ステップＳ９０３では、図８のアノテーション全削除処理を実行する。

ステップＳ９０４では、ボタンに対応する方向に画像を９０度回転する。具体的には、例えば、ＨＴＭＬ５のＣａｎｖａｓのＡＰＩが提供する画像回転用関数「ｒｏｔａｔｅ（）」を、オリジナル画像に対して呼び出す。左回転時は反時計回り９０度、右回転時は時計回り９０度回転させる。
なお、図７〜図９の削除処理は、オリジナル画像にアノテーションが表示されている場合に実行されるものとする。

次に、図１０を用いて、本発明の実施形態における、画像保存処理について説明する。図１０は、画像保存処理のフローチャートである。なお、画像保存処理は、アノテーションの追加されている場合に実行するものとする。
ステップＳ１００１では、保存ボタンの押下を検知する（１６０６のボタン）。

ステップＳ１００２では、アノテーション配列（例えば、図１３）の全要素をＪＳＯＮ形式のアノテーション情報に変換する（シリアライズする）。具体的には、例えばＪａｖａＳｃｒｉｐｔのＡＰＩ「ＪＳＯＮ．Ｓｔｒｉｎｇｉｆｙ（）」を用いることで実行する。
ステップＳ１００３では、コメント欄であるテキストボックスのテキスト（メモ）を取得して、ＪＳＯＮ形式に変換する（シリアライズする）。

ステップＳ１００４では、ブラウザのＣａｎｖａｓ上に表示されているオリジナル画像とレイヤーに描画されているアノテーションを合成して、新たな画像（編集画像）を作成する。表示したアノテーションと表示した画像を合成した編集画像を生成する画像生成処理の一例を示すステップである。

具体的には、ＨＴＭＬ５のｃａｎｖａｓのＡＰＩ「ｔｏＤａｔａＵＲＬ（）」を実行することで合成された編集画像が作成される。この関数を実行することで編集画像のｂａｓｅ６４エンコード文字列が取得できる。

ステップＳ１００５では、ステップＳ１００２とステップＳ１００３でシリアライズされたデータと、ｂａｓｅ６４エンコード文字列を登録するために、シリアライズされたデータとｂａｓｅ６４エンコード文字列をオリジナル画像ＩＤと共にＷｅｂサーバ２００に送信する。すなわち、生成した編集画像を、前記記憶装置に記憶制御する記憶制御処理の一例を示すステップである。

ステップＳ１００６では、クライアント端末１００からデータ（シリアライズされたデータ、ｂａｓｅ６４エンコード文字列、オリジナル画像ＩＤ）を受信する。すなわち、アノテーション情報と画面で入力された入力情報を情報処理装置から受信するアノテーション情報受信処理の一例を示すステップである。

ステップＳ１００７では、シリアライズされたアノテーション情報とオリジナル画像ＩＤを含む保存要求をＤＢサーバ３００に送信する。なお、アノテーション情報は、テーブルに保存するための適切な形式に変換されるものとする。
ステップＳ１００８では、保存要求を受信して、編集画像情報テーブル１２１０に、アノテーション情報をオリジナル画像ＩＤと対応付けて保存する。

ステップＳ１００９では、シリアライズされたテキスト（メモ情報）とオリジナル画像ＩＤを含む保存要求をＤＢサーバ３００に送信する。なお、メモ情報は、テーブルに保存するための適切な形式に変換されるものとする。
ステップＳ１０１０では、オリジナル画像情報テーブル１２１１に、メモ情報をオリジナル画像ＩＤと対応付けて保存する。
ステップＳ１０１１では、ｂａｓｅ６４エンコード文字列をデーコードしてバイナリデータを取得して、編集画像ファイルとして外部メモリ上に保存する。
ステップＳ１０１２では、保存された編集画像ファイルのファイルパスと、オリジナル画像ＩＤを含む保存要求をＤＢサーバ３００に送信する。

ステップＳ１０１３では、保存要求を受信して、オリジナル画像ＩＤに対応する編集画像情報テーブル１２０９の編集画像ファイルパス１２０７に、受信したファイルパスを保存する。また、オリジナル画像と関連付けるため、オリジナル画像ＩＤ１２０６にオリジナル画像ＩＤを保存する。ここで編集画像ＩＤ１２０５に自動採番して登録する。

上述したように、保存後、データ送信ボタン１５０４が押下されると、編集画像ファイルやＤＢサーバのメモ情報がファイルサーバ４００に送信され、クライアント端末４０１から画像に対する指示やコメントを参照することが可能となる。すなわち、編集画像を他の情報処理装置で参照する参照画像として登録制御する登録制御処理の一例を示す処理である。

以上、本実施形態によれば、画像を用いた画像に係る指示内容（入力内容）を容易に記録することができる。具体的には、画像上で指示内容を容易に付与して、指示内容を容易に記録することができる。

また、アノテーションとコメントを一括して入力可能になり、画像に係る指示を容易に入力することができる。特に、アノテーション番号とコメント番号を自動で付与するため、入力効率が良くなる。

更に、ＡｃｔｉｖｅＸ等のプラグインを別途用いることなく、ブラウザ上に表示した画像に対してアノテーションを付与し画像を直接編集することが可能となる。そして、編集された画像を新たな１枚の画像としてサーバに保存することで編集後の画像の参照も容易となる。アノテーションと連動して画像に対するメモを記入、保存することも可能となり、画像を用いた指示を容易に行うことが可能となる。

〔第２の実施形態〕
次に、第２の実施形態について説明する。なお、第1の実施形態と同様の構成については説明を省略して説明をする。
第２の実施形態は、第１の実施形態に加え、画像を用いた入力内容をより容易に記録することができる仕組みである。以下、図１７〜図２２のフローチャートを参照して、本実施形態のシステムにおける処理についてより詳細に説明する。
なお、各ステップについては、各装置のＣＰＵが処理を実行する。

まず、図１７を用いて、第２の実施形態における全体処理全体処理について説明する。図１７は、第２の実施形態における全体処理を示すフローチャートである。
ステップＳ１７０１では、アノテーションをグループ化する。詳細は図２２で後述する。

次に、図１８を用いて、ステップＳ４１９に対応する第２の実施形態におけるアノテーション追加処理について説明する。図１８は、第２の実施形態におけるアノテーション追加処理のフローチャートである。
ステップＳ６０１〜Ｓ６０６については、第１の実施形態と同様の処理のため説明を省略する。なお、本実施形態では、マウスでのドラッグ操作開始位置が、アノテーション（矢印のアノテーションの場合）の矢印方向の先端となり、ドラッグ操作終了位置が、アノテーションの矢印方向とは逆の方向の端（矢印の末端）となるアノテーション描画の場合で説明をする。すなわち、要素数（アノテーション番号）を図形化したオブジェクト（番号を挿入したオブジェクト１６０９）が、マウスでのドラッグ操作終了位置（終点）に描画する。

ステップＳ１８０１では、付箋モードであるかテキストエリアモードであるかを判定する。付箋モードかテキストエリアモードかの判定は、図２５の２５００のモード設定によって判定する。２５００のモード設定は、ユーザが任意に設定できるものであり、付箋モードにチェックが入った場合には、付箋モードとなり、ステップＳ１８０２へ処理を移す。また、テキストエリアモードにチェックが入った場合には、テキストエリアモードとなり、ステップＳ６０７へ処理を移す。上述したように、ステップＳ６０７では、コメント欄１６０３に識別情報（番号）が自動で入力され、コメント欄でアノテーションに対応するコメントの入力を受け付ける。

ステップＳ１８０２では、追加したアノテーションの終点（マウスでのドラッグ操作終了位置）のＸ座標・Ｙ座標を取得する。

ステップＳ１８０３では、ステップＳ１８０２で取得したＸ座標・Ｙ座標を基準位置とし、付箋（ラベル）を描画する。付箋は、ユーザがテキストなどを任意入力できる入力欄を有するラベルである。なお、付箋は、ステップＳ６０２で表示したアノテーションやステップＳ６０６で描画したアノテーション番号には重ならないように、取得したＸ座標・Ｙ座標から所定座標分ずらして表示する。また、このとき、付箋が画像上からはみ出ないようにする。画像からはみ出す場合には、Ｘ座標・Ｙ座標を基準に上又は下に表示させるようにする。そのほか、他の付箋と重なる場合には、Ｘ座標・Ｙ座標を基準として、空いている領域を特定して付箋を表示する。
付箋の描画処理は、アノテーションが追加される場合に、追加されるアノテーションに対応するユーザが任意入力できる入力欄を追加する入力欄追加処理の一例を示すものである。

ステップＳ１８０４では、テンプレートからコメントが選択済みであるか否かを判定する。図２５の２５０１はコメントが選択されていない状態を示し、図２５の２５０４はコメントが選択されている状態であり、このプルダウンリストから、コメントが選択されているか否かで、コメントが選択済みかを判定する。

ステップＳ１８０４でコメントが選択済みであった場合には、ステップＳ１８０５で、付箋モードの場合には、選択済みのコメント（コメント情報）を付箋に入力する。また、テキストエリアモードの場合には、テキストエリア（コメント欄）の識別情報（番号）に対応する箇所に選択済みのコメント（コメント情報）を入力する。図２５の２５０２は選択済みでない状態でアノテーションを追加した例を示し、図２５の２５０３は選択済みの状態でアノテーションを追加した例を示す。

次に、図１９を用いて、ステップＳ４２０に対応する第２の実施形態におけるアノテーション削除処理について説明する。図１９は、第２の実施形態におけるアノテーション削除処理のフローチャートである。
ステップＳ７０１〜Ｓ７０４については、第１の実施形態と同様の処理のため説明を省略する。

ステップＳ１９０１では、１６０７の「取り消し」ボタンが押下された場合に、描画されたアノテーションが選択されている否かを判定する。

ステップＳ１９０１でアノテーションが選択されている場合には、ステップＳ１９０２で、アノテーション配列より、選択されたアノテーションの要素と要素数（アノテーション番号）を取得する。

ステップＳ１９０３では、アノテーション配列から選択された要素を削除する。これにより、アノテーションが削除される。

ステップＳ１９０４では、削除された要素に対応するアノテーションに付箋がついている場合には、付箋を削除する。また、付箋ではなく、テキストエリア（コメント欄）でテキストが入力されている場合には、要素番号に対応して入力されているコメント部分を削除する。なお、本実施形態では削除する処理としたが、アノテーションや付箋を非表示にする処理としてもよい。

ステップＳ１９０５では、アノテーションが選択済みであるか否かを判定する。
ステップＳ１９０５でアノテーションが選択済みであった場合、すなわち、アノテーション配列の途中のアノテーションが選択され、削除された場合には、ステップＳ１９０６で、アノテーション配列のインデックスを詰める。例えば、インデックスを再付与する。
なお、選択済みのアノテーションが後述のグループ化がされていた場合は、グループ化されているアノテーションはまとめて削除（非表示）するものとする。
また、削除処理は、付箋やコメント欄のテキストを先に削除して、アノテーションを削除する順序であってもよいため、処理手順に限定されるものではない。

次に、図２０を用いて、ステップＳ４２１に対応する第２の実施形態におけるアノテーション全削除処理について説明する。図２０は、第２の実施形態におけるアノテーション全削除処理のフローチャートである。
ステップＳ８０１〜Ｓ８０３については、第１の実施形態と同様の処理のため説明を省略する。

ステップＳ２００１では、アノテーションを全削除したため、アノテーション付与時につけたすべての付箋またはテキストエリア（コメント欄）のすべてのコメントを削除（非表示）する。

次に、図２１を用いて、ステップＳ４２２に対応する第２の実施形態における画像回転処理について説明する。図２１は、第２の実施形態における画像回転処理のフローチャートである。
ステップＳ９０１〜Ｓ９０３については、第１の実施形態と同様の処理のため説明を省略する。

ステップＳ２１０１では、画像の回転指示がされた場合に、描画されている各々のアノテーションの始点・終点のＸ座標・Ｙ座標を取得する。

ステップＳ２１０２では、左回転であるか右回転であるかを判定する。左回転である場合には、ステップＳ２１０３へ処理を移し、右回転である場合には、ステップＳ２１０４へ処理を移す。

ステップＳ２１０３では、ステップＳ２１０１で取得した始点・終点のＸ座標・Ｙ座標を９０度左回転する。

ステップＳ２１０４では、ステップＳ２１０１で取得した始点・終点のＸ座標・Ｙ座標を９０度右回転する。

ステップＳ２１０５では、回転した始点座標を始点、回転した終点座標を終点とし、各々のアノテーションを再表示する。

ステップＳ２１０６では、アノテーション配列の座標の値を、ステップＳ２１０５で再表示した座標の値で更新する。

ステップＳ２１０７では、アノテーション番号（要素番号を挿入したオブジェクト）を各々のアノテーションの終点の位置に再表示する。この時、アノテーション番号（要素番号を挿入したオブジェクト）は回転することなく（非回転）表示する。すなわち、画像が回転された場合に、識別情報を回転することなく、アノテーションを画像の回転に応じて回転するアノテーション回転処理の一例を示すものである。

ステップＳ２１０８では、付箋を各々のアノテーションの終点に非回転で再表示する。上述したように、付箋はアノテーション番号に重ならないように、他の付箋と重ならないように描画するものとする。
アノテーションは画像の回転に応じて、回転させるが、アノテーション番号や付箋は回転させないようにすることで、閲覧性が高まる。具体的には、アノテーション番号や付箋を回転してしまうと、テキストまで回転されてしまうため、可読性が低下してしまう。そのため、本実施形態のように、画像に描画したオブジェクトの種別（アノテーション、アノテーション番号のオブジェクト、付箋）によって、回転するか否かを決定して描画することで、閲覧性や可読性を高めた表示を行うことが可能となる。

次に、図２２を用いて、ステップＳ１７０１に対応する第２の実施形態におけるアノテーショングループ化処理について説明する。図２１は、第２の実施形態におけるアノテーショングループ化処理のフローチャートである。

ステップＳ２２０１では、アノテーションのクリック操作（選択）を検知する。すなわち、アノテーション選択処理の一例を示すものである。
ステップＳ２２０２では、ステップＳ２２０１で検知したアノテーションの始点・終点のＸ座標・Ｙ座標をアノテーション配列から取得する。取得した座標はメモリに記憶する。記憶された座標は、選択されたアノテーションを識別する識別情報（要素番号など）と対応付けて記憶する。複数のアノテーションを選択すると複数分のアノテーションの座標がアノテーションの情報として記憶される。

ステップＳ２２０３では、グループ化ボタンの押下を検知したか否かを判定する（２６０３のボタン）。検知した場合には、ステップＳ２２０４へ処理を移し、検知していない場合には、ステップＳ２２０１へ処理を移す。

ステップＳ２２０４では、メモリに記憶されたアノテーションの情報を、グループ化されたアノテーションの情報として、グループ化情報テーブル（図２４）に保存する。グループ化情報は編集画像ＩＤと対応付けて保存するものとする。

ステップＳ２２０５では、ステップＳ２２０２で取得した各々の終点座標の中間座標を基準位置とし、付箋（ラベル）を描画する。この時、アノテーション番号と重ならないように基準位置から所定の距離ずらして表示するものとする。また、他の付箋と重ならないように描画する。なお、付箋に入力されているテキストがある場合には、それぞれの付箋のテキストを取得して、新たに生成した付箋にまとめて入力する。すなわち、それぞれの付箋を１つの付箋にまとめた、グループ化処理の一例である。

ステップＳ２２０６では、ステップＳ２２０２で取得した各々の始点座標を始点、ステップＳ２２０５で取得した中間座標を終点とし、各々のアノテーションを再表示する。また、終点には表示されていたアノテーション番号を重ならないように表示する。本実施形態では現在表示されているアノテーションの終点を変更して再表示する構成としたが、現在表示されているアノテーションを削除して、新たなアノテーションを描画してもよい。
ステップＳ２２０７では、アノテーション配列の座標の値を、ステップＳ２２０６で再表示した座標の値で更新する。図２６の２６０４は、図２６の２６０１と図２６の２６０２が選択済みの状態でグループ化した例を示す。

次に、図２３〜図２６について説明する。
図２３は、コメントテーブルの一例を示すデータ図である。このコメントテーブルはＷｅｂサーバ２００に記憶され、コメントＩＤとコメントが対応づいて記憶されている。コメントテーブルからコメンを読み出し、２５０１のプルダウンリストに反映され、クライアント端末１００に送信されている。

図２４は、グループ化情報テーブルの一例を示すデータ図である。このグループ化情報テーブルは、グループ化ボタンが押下された場合に、クライアント端末でグループ化したアノテーションの情報として管理される。また、保存ボタンが押下されると、編集画像とともに、Ｗｅｂサーバに記憶される。グループ化ＩＤ、編集画像ＩＤ、グループ化されたアノテーションの情報（シリアライズアノテーション）が記憶されている。

図２５は、画像にアノテーションを追加した際の付箋を表示した画面イメージ図である。２５００で付箋モードが選択し、２５０１でコメントを選択した状態で、画像上でマウスをドラッグすると、アノテーションが表示されるとともに、選択したコメントが挿入された付箋（２５０３）が表示される。付箋内のコメントは編集可能とする。コメントが選択されていない場合には、２５０２のようにコメントが挿入されていない付箋が表示される。

図２６は、アノテーションをグループ化した際の画面イメージ図である。２６０２と２６０３のアノテーションが選択され、グループ化ボタン２６０１が押下されると、２６０４のように、１つの付箋が表示され、アノテーションがグループ化される。なお、付箋内にコメントがあった場合には、付箋それぞれに入力されていたコメントをまとめて２６０１へ挿入してもよい。付箋内にコメントがあった場合には、通知ダイアログを表示し、ユーザにコメントをまとめるか否か、コメントを入力しない付箋を表示させるかを決定させるようにする。ユーザによりコメントをまとめる選択がされた場合に、２６０１へそれぞれのコメントをまとめて入力する。
グループ化したアノテーションは、図２４でアノテーション情報を保持しているため、グループ化を解除した場合には、もとの状態にアノテーションを表示するものとする。

以上、本実施形態によれば、画像を用いた画像に係る指示内容（入力内容）を容易に記録することができる。具体的には、画像上で指示内容を容易に付与して、指示内容を容易に記録することができる。

また、アノテーションとコメントを一括して入力可能になり、画像に係る指示を容易に入力することができる。特に、アノテーション番号とコメント番号を自動で付与するため、入力効率が良くなる。
また、テンプレートとなるコメントを用いる、付箋を用いたコメント入力を可能とすることで、画像を用いた指示入力が容易となる。画像の回転においては、画像は回転しつつも、付箋やアノテーション番号のオブジェクトは回転しないことにより、コメントやアノテーション番号の可読性を維持することができる。

更に、ＡｃｔｉｖｅＸ等のプラグインを別途用いることなく、ブラウザ上に表示した画像に対してアノテーションを付与し画像を直接編集することが可能となる。そして、編集された画像を新たな１枚の画像としてサーバに保存することで編集後の画像の参照も容易となる。アノテーションと連動して画像に対するメモを記入、保存することも可能となり、画像を用いた指示を容易に行うことが可能となる。

なお、上述した各種データの構成及びその内容はこれに限定されるものではなく、用途や目的に応じて、様々な構成や内容で構成されることは言うまでもない。

以上、一実施形態について示したが、本発明は、例えば、システム、装置、方法、プログラムもしくは記録媒体等としての実施態様をとることが可能であり、具体的には、複数の機器から構成されるシステムに適用しても良いし、また、一つの機器からなる装置に適用しても良い。

また、本発明におけるプログラムは、図４〜図１０に示すフローチャートの処理方法をコンピュータが実行可能なプログラムであり、本発明の記憶媒体は図４〜図１０の処理方法をコンピュータが実行可能なプログラムが記憶されている。なお、本発明におけるプログラムは図４〜図１０の各装置の処理方法ごとのプログラムであってもよい。

以上のように、前述した実施形態の機能を実現するプログラムを記録した記録媒体を、システムあるいは装置に供給し、そのシステムあるいは装置のコンピュータ（またはＣＰＵやＭＰＵ）が記録媒体に格納されたプログラムを読出し実行することによっても、本発明の目的が達成されることは言うまでもない。

この場合、記録媒体から読み出されたプログラム自体が本発明の新規な機能を実現することになり、そのプログラムを記憶した記録媒体は本発明を構成することになる。

プログラムを供給するための記録媒体としては、例えば、フレキシブルディスク、ハードディスク、光ディスク、光磁気ディスク、ＣＤ−ＲＯＭ、ＣＤ−Ｒ、ＤＶＤ−ＲＯＭ、磁気テープ、不揮発性のメモリカード、ＲＯＭ、ＥＥＰＲＯＭ、シリコンディスク、ソリッドステートドライブ等を用いることができる。

また、コンピュータが読み出したプログラムを実行することにより、前述した実施形態の機能が実現されるだけでなく、そのプログラムの指示に基づき、コンピュータ上で稼働しているＯＳ（オペレーティングシステム）等が実際の処理の一部または全部を行い、その処理によって前述した実施形態の機能が実現される場合も含まれることは言うまでもない。

さらに、記録媒体から読み出されたプログラムが、コンピュータに挿入された機能拡張ボードやコンピュータに接続された機能拡張ユニットに備わるメモリに書き込まれた後、そのプログラムコードの指示に基づき、その機能拡張ボードや機能拡張ユニットに備わるＣＰＵ等が実際の処理の一部または全部を行い、その処理によって前述した実施形態の機能が実現される場合も含まれることは言うまでもない。

また、本発明は、複数の機器から構成されるシステムに適用しても、１つの機器からなる装置に適用してもよい。また、本発明は、システムあるいは装置にプログラムを供給することによって達成される場合にも適応できることは言うまでもない。この場合、本発明を達成するためのプログラムを格納した記録媒体を該システムあるいは装置に読み出すことによって、そのシステムあるいは装置が、本発明の効果を享受することが可能となる。

さらに、本発明を達成するためのプログラムをネットワーク上のサーバ、データベース等から通信プログラムによりダウンロードして読み出すことによって、そのシステムあるいは装置が、本発明の効果を享受することが可能となる。
なお、上述した各実施形態およびその変形例を組み合わせた構成も全て本発明に含まれるものである。

１００ クライアント端末
２００ Ｗｅｂサーバ
３００ ＤＢサーバ
４００ ファイルサーバ
４０１ クライアント端末（参照端末）

Claims (15)

1. 画像を管理するサーバと情報処理装置を含む情報処理システムであって、
   前記サーバは、
   画像と前記情報処理装置で追加されたアノテーションのアノテーション情報と入力情報とを管理する管理手段と、
   要求のあった情報処理装置で再描画すべく、前記情報処理装置からの要求に従って、前記画像と前記アノテーション情報と前記入力情報とを送信する画像送信手段と、
   前記情報処理装置から送信された編集画像を受信する編集画像受信手段と、
   前記編集画像受信手段で受信した編集画像を、他のサーバに送信し、他の情報処理装置で参照させるべく、前記編集画像と、当該編集画像に対応する入力情報とを登録制御する登録制御手段と
   を備え、
   前記情報処理装置は、
   前記サーバから画像とアノテーション情報と入力情報とを取得する画像取得手段と、
   前記画像取得手段で取得したアノテーション情報を用いて、前記画像を表示する画像表示制御手段と、
   ユーザの操作に対応して、アノテーションと当該アノテーションを識別する識別情報とを前記画像上に追加するアノテーション追加手段と、
   前記アノテーション追加手段による追加がされる場合に、ユーザが任意入力できる入力欄に前記識別情報を含む入力情報を追加する入力情報追加手段と、
   ユーザによる操作指示に従って、前記画像と前記アノテーション情報とを用いて、編集画像を生成する編集画像生成手段と、
   前記編集画像生成手段で生成された編集画像を送信する編集画像送信手段と
   を備えることを特徴とする情報処理システム。
2. 前記情報処理装置は、
   画像上のユーザの操作に対応する位置を取得する位置取得手段を更に備え、
   アノテーション追加手段は、前記位置取得手段により取得した位置に応じて、前記アノテーションと前記アノテーションを識別する識別情報を追加することを特徴とする請求項１に記載の情報処理システム。
3. 前記識別情報は、アノテーションの作成順を示す番号であり、
   前記アノテーション追加手段は、前記番号を挿入したオブジェクトを前記追加したアノテーションに対応付くように追加することを特徴とする請求項１又は２に記載の情報処理システム。
4. 前記情報処理装置は、
   アノテーションの形状を示す属性を選択する選択手段を更に備え、
   前記アノテーション追加手段は、前記選択された属性に対応する形状のアノテーションを画像上に追加することを特徴とする請求項１乃至３のいずれか１項に記載の情報処理システム。
5. 前記情報処理装置は、
   アノテーションの削除要求に従って、最後に表示したアノテーション又は全アノテーションを削除するアノテーション削除手段と、
   前記アノテーション削除手段よりアノテーションを削除する場合に、前記入力情報追加手段で追加した入力情報を削除する入力情報削除手段と
   を更に備えることを特徴とする請求項１乃至４のいずれか１項に記載の情報処理システム。
6. 前記情報処理装置は、
   予め記憶されたコメント情報を選択する選択手段を更に備え、
   前記入力情報追加手段は、前記選択手段により選択されたコメント情報を、前記入力欄に追加することを特徴とする請求項１乃至５のいずれか１項に記載の情報処理システム。
7. 前記情報処理装置は、
   前記画像を回転する回転手段と、
   前記回転手段により画像が回転された場合に、前記識別情報を回転することなく、前記アノテーションを前記画像の回転に応じて回転するアノテーション回転手段と
   を更に備えることを特徴とする請求項１乃至６のいずれか１項に記載の情報処理システム。
8. 前記情報処理装置は、
   前記アノテーションを選択するアノテーション選択手段と、
   前記アノテーションをグループ化する指示があった場合に、前記アノテーション選択手段により選択された複数のアノテーションに対応する入力欄を１つの入力欄にするグループ化手段と
   を更に備えることを特徴とする請求項１乃至７のいずれか１項に記載の情報処理システム。
9. 画像と情報処理装置で追加されたアノテーションのアノテーション情報と入力情報とを管理する管理手段と、要求のあった情報処理装置で再描画すべく、情報処理装置からの要求に従って、前記画像と前記アノテーション情報と前記入力情報とを送信する画像送信手段と、情報処理装置から送信された編集画像を受信する編集画像受信手段と、前記編集画像受信手段で受信した編集画像を、他のサーバに送信し、他の情報処理装置で参照させるべく、前記編集画像と、当該編集画像に対応する入力情報とを登録制御する登録制御手段とを備えるサーバと通信可能な情報処理装置であって、
   前記サーバから画像とアノテーション情報と入力情報とを取得する画像取得手段と、
   前記画像取得手段で取得したアノテーション情報を用いて、前記画像を表示する画像表示制御手段と、
   ユーザの操作に対応して、アノテーションと当該アノテーションを識別する識別情報とを前記画像上に追加するアノテーション追加手段と、
   前記アノテーション追加手段による追加がされる場合に、ユーザが任意入力できる入力欄に前記識別情報を含む入力情報を追加する入力情報追加手段と、
   ユーザによる操作指示に従って、前記画像と前記アノテーション情報とを用いて、編集画像を生成する編集画像生成手段と、
   前記編集画像生成手段で生成された編集画像を送信する編集画像送信手段と
   を備えることを特徴とする情報処理装置。
10. サーバから画像とアノテーション情報と入力情報とを取得する画像取得手段と、前記画像取得手段で取得したアノテーション情報を用いて、前記画像を表示する画像表示制御手段と、ユーザの操作に対応して、アノテーションと当該アノテーションを識別する識別情報とを前記画像上に追加するアノテーション追加手段と、前記アノテーション追加手段による追加がされる場合に、ユーザが任意入力できる入力欄に前記識別情報を含む入力情報を追加する入力情報追加手段と、ユーザによる操作指示に従って、前記画像と前記アノテーション情報とを用いて、編集画像を生成する編集画像生成手段と、前記編集画像生成手段で生成された編集画像を送信する編集画像送信手段とを備える情報処理装置と通信可能なサーバであって、
    画像と前記情報処理装置で追加されたアノテーションのアノテーション情報と入力情報とを管理する管理手段と、
    要求のあった情報処理装置で再描画すべく、前記情報処理装置からの要求に従って、前記画像と前記アノテーション情報と前記入力情報とを送信する画像送信手段と、
    前記情報処理装置から送信された前記編集画像を受信する編集画像受信手段と、
    前記編集画像受信手段で受信した編集画像を、他のサーバに送信し、他の情報処理装置で参照させるべく、前記編集画像と、当該編集画像に対応する入力情報とを登録制御する登録制御手段と
    を備えることを特徴とするサーバ。
11. 画像を管理するサーバと情報処理装置を含む情報処理システムの処理方法であって、
    前記サーバは、
    画像と前記情報処理装置で追加されたアノテーションのアノテーション情報と入力情報とを管理する管理ステップと、
    要求のあった情報処理装置で再描画すべく、前記情報処理装置からの要求に従って、前記画像と前記アノテーション情報と前記入力情報とを送信する画像送信ステップと、
    前記情報処理装置から送信された編集画像を受信する編集画像受信ステップと、
    前記編集画像受信ステップで受信した編集画像を、他のサーバに送信し、他の情報処理装置で参照させるべく、前記編集画像と、当該編集画像に対応する入力情報とを登録制御する登録制御ステップと
    を含み、
    前記情報処理装置は、
    前記サーバから画像とアノテーション情報と入力情報とを取得する画像取得ステップと、
    前記画像取得ステップで取得したアノテーション情報を用いて、前記画像を表示する画像表示制御ステップと、
    ユーザの操作に対応して、アノテーションと当該アノテーションを識別する識別情報とを前記画像上に追加するアノテーション追加ステップと、
    前記アノテーション追加ステップによる追加がされる場合に、ユーザが任意入力できる入力欄に前記識別情報を含む入力情報を追加する入力情報追加ステップと、
    ユーザによる操作指示に従って、前記画像と前記アノテーション情報とを用いて、編集画像を生成する編集画像生成ステップと、
    前記編集画像生成ステップで生成された編集画像を送信する編集画像送信ステップと
    を含むことを特徴とする処理方法。
12. 画像と情報処理装置で追加されたアノテーションのアノテーション情報と入力情報とを管理する管理手段と、要求のあった情報処理装置で再描画すべく、情報処理装置からの要求に従って、前記画像と前記アノテーション情報と前記入力情報とを送信する画像送信手段と、情報処理装置から送信された編集画像を受信する編集画像受信手段と、前記編集画像受信手段で受信した編集画像を、他のサーバに送信し、他の情報処理装置で参照させるべく、前記編集画像と、当該編集画像に対応する入力情報とを登録制御する登録制御手段とを備えるサーバと通信可能な情報処理装置の処理方法であって、
    前記サーバから画像とアノテーション情報と入力情報とを取得する画像取得ステップと、
    前記画像取得ステップで取得したアノテーション情報を用いて、前記画像を表示する画像表示制御ステップと、
    ユーザの操作に対応して、アノテーションと当該アノテーションを識別する識別情報とを前記画像上に追加するアノテーション追加ステップと、
    前記アノテーション追加ステップによる追加がされる場合に、ユーザが任意入力できる入力欄に前記識別情報を含む入力情報を追加する入力情報追加ステップと、
    ユーザによる操作指示に従って、前記画像と前記アノテーション情報とを用いて、編集画像を生成する編集画像生成ステップと、
    前記編集画像生成ステップで生成された編集画像を送信する編集画像送信ステップと
    を含むことを特徴とする処理方法。
13. サーバから画像とアノテーション情報と入力情報とを取得する画像取得手段と、前記画像取得手段で取得したアノテーション情報を用いて、前記画像を表示する画像表示制御手段と、ユーザの操作に対応して、アノテーションと当該アノテーションを識別する識別情報とを前記画像上に追加するアノテーション追加手段と、前記アノテーション追加手段による追加がされる場合に、ユーザが任意入力できる入力欄に前記識別情報を含む入力情報を追加する入力情報追加手段と、ユーザによる操作指示に従って、前記画像と前記アノテーション情報とを用いて、編集画像を生成する編集画像生成手段と、前記編集画像生成手段で生成された編集画像を送信する編集画像送信手段とを備える情報処理装置と通信可能なサーバの処理方法であって、
    画像と前記情報処理装置で追加されたアノテーションのアノテーション情報と入力情報とを管理する管理ステップと、
    要求のあった情報処理装置で再描画すべく、前記情報処理装置からの要求に従って、前記画像と前記アノテーション情報と前記入力情報とを送信する画像送信ステップと、
    前記情報処理装置から送信された前記編集画像を受信する編集画像受信ステップと、
    前記編集画像受信ステップで受信した編集画像を、他のサーバに送信し、他の情報処理装置で参照させるべく、前記編集画像と、当該編集画像に対応する入力情報とを登録制御する登録制御ステップと
    を含むことを特徴とする処理方法。
14. 画像と情報処理装置で追加されたアノテーションのアノテーション情報と入力情報とを管理する管理手段と、要求のあった情報処理装置で再描画すべく、情報処理装置からの要求に従って、前記画像と前記アノテーション情報と前記入力情報とを送信する画像送信手段と、情報処理装置から送信された編集画像を受信する編集画像受信手段と、前記編集画像受信手段で受信した編集画像を、他のサーバに送信し、他の情報処理装置で参照させるべく、前記編集画像と、当該編集画像に対応する入力情報とを登録制御する登録制御手段とを備えるサーバと通信可能な情報処理装置のプログラムであって、
    前記情報処理装置を、
    前記サーバから画像とアノテーション情報と入力情報とを取得する画像取得手段と、
    前記画像取得手段で取得したアノテーション情報を用いて、前記画像を表示する画像表示制御手段と、
    ユーザの操作に対応して、アノテーションと当該アノテーションを識別する識別情報とを前記画像上に追加するアノテーション追加手段と、
    前記アノテーション追加手段による追加がされる場合に、ユーザが任意入力できる入力欄に前記識別情報を含む入力情報を追加する入力情報追加手段と、
    ユーザによる操作指示に従って、前記画像と前記アノテーション情報とを用いて、編集画像を生成する編集画像生成手段と、
    前記編集画像生成手段で生成された編集画像を送信する編集画像送信手段
    として機能させるためのプログラム。
15. サーバから画像とアノテーション情報と入力情報とを取得する画像取得手段と、前記画像取得手段で取得したアノテーション情報を用いて、前記画像を表示する画像表示制御手段と、ユーザの操作に対応して、アノテーションと当該アノテーションを識別する識別情報とを前記画像上に追加するアノテーション追加手段と、前記アノテーション追加手段による追加がされる場合に、ユーザが任意入力できる入力欄に前記識別情報を含む入力情報を追加する入力情報追加手段と、ユーザによる操作指示に従って、前記画像と前記アノテーション情報とを用いて、編集画像を生成する編集画像生成手段と、前記編集画像生成手段で生成された編集画像を送信する編集画像送信手段とを備える情報処理装置と通信可能なサーバのプログラムであって、
    前記サーバを、
    画像と前記情報処理装置で追加されたアノテーションのアノテーション情報と入力情報とを管理する管理手段と、
    要求のあった情報処理装置で再描画すべく、前記情報処理装置からの要求に従って、前記画像と前記アノテーション情報と前記入力情報とを送信する画像送信手段と、
    前記情報処理装置から送信された前記編集画像を受信する編集画像受信手段と、
    前記編集画像受信手段で受信した編集画像を、他のサーバに送信し、他の情報処理装置で参照させるべく、前記編集画像と、当該編集画像に対応する入力情報とを登録制御する登録制御手段
    として機能させるためのプログラム。

Images