(57)【要約】【課題】ドキュメント上の注釈をリフローに応じて適切に配置できる電子機器を実現する。【解決手段】実施形態によれば、電子機器は、入力手段と表示処理手段とを具備する。入力手段は、第１画面に表示される場合に複数のエレメントが第１レイアウトで配置されるドキュメントであって、前記複数のエレメントの内の第１エレメントの少なくとも一部分上に注釈が配置されるドキュメントのデータを入力する。表示処理手段は、前記データを用いて前記第１画面のサイズとは異なるサイズを有する第２画面にドキュメントを表示する場合、前記複数のエレメントが第２レイアウトで配置され、前記第２レイアウトで配置される第１エレメントの少なくとも一部分上に前記注釈が配置されるドキュメントを、前記第２画面に表示する。【選択図】図６
2015049592.tif 000002
【特許請求の範囲】
【請求項１】
第１画面に表示される場合に複数のエレメントが第１レイアウトで配置されるドキュメントであって、前記複数のエレメントの内の第１エレメントの少なくとも一部分上に注釈が配置されるドキュメントのデータを入力する入力手段と、
前記データを用いて前記第１画面のサイズとは異なるサイズを有する第２画面にドキュメントを表示する場合、前記複数のエレメントが第２レイアウトで配置され、前記第２レイアウトで配置される第１エレメントの少なくとも一部分上に前記注釈が配置されるドキュメントを、前記第２画面に表示する表示処理手段とを具備する電子機器。
【請求項２】
前記表示処理手段は、前記第１レイアウトで配置される第１エレメントに対する前記注釈の相対的な位置関係に従って定まる前記第２レイアウトで配置される第１エレメントに対する相対的な位置に、前記注釈が配置されるドキュメントを前記第２画面に表示する請求項１記載の電子機器。
【請求項３】
前記表示処理手段は、前記第２レイアウトで配置される第１エレメントのサイズが、前記第１レイアウトで配置される第１エレメントのサイズとは異なる場合、前記第１レイアウトで配置される第１エレメントのサイズと前記第２レイアウトで配置される第１エレメントのサイズとの関係に従って定まるサイズを有する前記注釈が配置されるドキュメントを前記第２画面に表示する請求項１記載の電子機器。
【請求項４】
第１エレメントは、前記複数のエレメントが前記第１レイアウトで配置される場合に、前記複数のエレメントの内、注釈に関連する度合いに応じて定められるエレメントである請求項１記載の電子機器。
【請求項５】
第１エレメントが前記注釈に関連する度合いは、前記複数のエレメントが前記第１レイアウトで配置される場合に、前記注釈の領域に対する、第１エレメントの領域と前記注釈の領域との重なりを用いて定められる請求項４記載の電子機器。
【請求項６】
第１画面に表示される場合に複数のエレメントが第１レイアウトで配置されるドキュメントであって、前記複数のエレメントの内の第１エレメントの少なくとも一部分上に注釈が配置されるドキュメントのデータを入力し、
前記データを用いて前記第１画面のサイズとは異なるサイズを有する第２画面にドキュメントを表示する場合、前記複数のエレメントが第２レイアウトで配置され、前記第２レイアウトで配置される第１エレメントの少なくとも一部分上に前記注釈が配置されるドキュメントを、前記第２画面に表示する方法。
【請求項７】
前記表示することは、前記第１レイアウトで配置される第１エレメントに対する前記注釈の相対的な位置関係に従って定まる前記第２レイアウトで配置される第１エレメントに対する相対的な位置に、前記注釈が配置されるドキュメントを前記第２画面に表示する請求項６記載の方法。
【請求項８】
前記表示することは、前記第２レイアウトで配置される第１エレメントのサイズが、前記第１レイアウトで配置される第１エレメントのサイズとは異なる場合、前記第１レイアウトで配置される第１エレメントのサイズと前記第２レイアウトで配置される第１エレメントのサイズとの関係に従って定まるサイズを有する前記注釈が配置されるドキュメントを前記第２画面に表示する請求項６記載の方法。
【請求項９】
第１エレメントは、前記複数のエレメントが前記第１レイアウトで配置される場合に、前記複数のエレメントの内、注釈に関連する度合いに応じて定められるエレメントである請求項６記載の方法。
【請求項１０】
第１エレメントが前記注釈に関連する度合いは、前記複数のエレメントが前記第１レイアウトで配置される場合に、前記注釈の領域に対する、第１エレメントの領域と前記注釈の領域との重なりを用いて定められる請求項９記載の方法。
【請求項１１】
コンピュータにより実行されるプログラムであって、前記プログラムは、
第１画面に表示される場合に複数のエレメントが第１レイアウトで配置されるドキュメントであって、前記複数のエレメントの内の第１エレメントの少なくとも一部分上に注釈が配置されるドキュメントのデータを入力する手順と、
前記データを用いて前記第１画面のサイズとは異なるサイズを有する第２画面にドキュメントを表示する場合、前記複数のエレメントが第２レイアウトで配置され、前記第２レイアウトで配置される第１エレメントの少なくとも一部分上に前記注釈が配置されるドキュメントを、前記第２画面に表示する手順とを前記コンピュータに実行させるプログラム。
【請求項１２】
前記表示する手順は、前記第１レイアウトで配置される第１エレメントに対する前記注釈の相対的な位置関係に従って定まる前記第２レイアウトで配置される第１エレメントに対する相対的な位置に、前記注釈が配置されるドキュメントを前記第２画面に表示する請求項１１記載のプログラム。
【請求項１３】
前記表示する手順は、前記第２レイアウトで配置される第１エレメントのサイズが、前記第１レイアウトで配置される第１エレメントのサイズとは異なる場合、前記第１レイアウトで配置される第１エレメントのサイズと前記第２レイアウトで配置される第１エレメントのサイズとの関係に従って定まるサイズを有する前記注釈が配置されるドキュメントを前記第２画面に表示する請求項１１記載のプログラム。
【請求項１４】
第１エレメントは、前記複数のエレメントが前記第１レイアウトで配置される場合に、前記複数のエレメントの内、注釈に関連する度合いに応じて定められるエレメントである請求項１１記載のプログラム。
【請求項１５】
第１エレメントが前記注釈に関連する度合いは、前記複数のエレメントが前記第１レイアウトで配置される場合に、前記注釈の領域に対する、第１エレメントの領域と前記注釈の領域との重なりを用いて定められる請求項１４記載のプログラム。
【発明の詳細な説明】
【技術分野】
【０００１】
本実施形態は、ドキュメントを処理する電子機器および該機器に適用される方法に関する。
【背景技術】
【０００２】
ウェブページや電子書籍のような各種のドキュメントの閲覧には、デスクトップ型またはノートブック型のパーソナルコンピュータ（ＰＣ）、タブレットコンピュータ、スマートフォン、携帯電話のような様々な電子機器が利用されている。
【０００３】
このような電子機器には、ドキュメントを画面サイズ（解像度）に応じたレイアウトで表示するリフロー機能を有するものがある。ドキュメントが画面サイズに応じたレイアウトで表示されることによって、ユーザはそのドキュメントを容易に閲覧することができる。
【先行技術文献】
【特許文献】
【０００４】
【特許文献１】特開２００５−４７７４号公報
【発明の概要】
【発明が解決しようとする課題】
【０００５】
ところで、閲覧しているドキュメント上に注釈（アノテーション）を付加する機能が期待される場合がある。ユーザは、ドキュメント上に注釈を付加することにより、例えば、後でそのドキュメントを閲覧する場合や、別のユーザにドキュメントを閲覧させる場合に、そのドキュメントを効率的に利用することができる。
【０００６】
しかし、ある電子機器（例えば、ノートブック型ＰＣ）でドキュメント上に注釈を付与した後に、画面サイズが異なる別の電子機器（例えば、スマートフォン）でその注釈が付与されたドキュメントを閲覧する場合、上述したリフロー機能によって注釈が意図しない位置に配置される可能性がある。
【０００７】
本発明の一形態は、ドキュメント上の注釈をリフローに応じて適切に配置できる電子機器および方法を提供することを目的とする。
【課題を解決するための手段】
【０００８】
実施形態によれば、電子機器は、入力手段と表示処理手段とを具備する。入力手段は、第１画面に表示される場合に複数のエレメントが第１レイアウトで配置されるドキュメントであって、前記複数のエレメントの内の第１エレメントの少なくとも一部分上に注釈が配置されるドキュメントのデータを入力する。表示処理手段は、前記データを用いて前記第１画面のサイズとは異なるサイズを有する第２画面にドキュメントを表示する場合、前記複数のエレメントが第２レイアウトで配置され、前記第２レイアウトで配置される第１エレメントの少なくとも一部分上に前記注釈が配置されるドキュメントを、前記第２画面に表示する。
【図面の簡単な説明】
【０００９】
【図１】実施形態に係る電子機器の外観を示す斜視図。
【図２】同実施形態の電子機器のシステム構成を示すブロック図。
【図３】同実施形態の電子機器によって表示されるドキュメント内のエレメントのレイアウトが変更（リフロー）される例を示す図。
【図４】ドキュメント上に書き込まれた注釈が、レイアウトの変更後に不適切な領域に表示される例を示す図。
【図５】同実施形態の電子機器によって、ドキュメント上に書き込まれた注釈が、レイアウトの変更後に適切な領域に表示される例を示す図。
【図６】同実施形態の電子機器によって実行されるブラウザアプリケーションプログラムの機能構成の例を示すブロック図。
【図７】同実施形態の電子機器によって、注釈に対応する基準エレメントが決定される例を説明するための図。
【図８】同実施形態の電子機器によって用いられるエレメントデータの一構成例を示す図。
【図９】同実施形態の電子機器によって用いられる注釈データの一構成例を示す図。
【図１０】同実施形態の電子機器によって、基準エレメントの拡大または縮小に応じて注釈が拡大または縮小される例を示す図。
【図１１】同実施形態の電子機器によって、ドキュメント上に書き込まれた注釈がレイアウトの変更後に適切な領域に表示される別の例を示す図。
【図１２】同実施形態の電子機器によって、ドキュメント上に手書きされた注釈がレイアウトの変更後に適切な領域に表示される例を示す図。
【図１３】同実施形態の電子機器によって実行されるドキュメント保存処理の手順の例を示すフローチャート。
【図１４】同実施形態の電子機器によって実行されるドキュメント表示処理の手順の例を示すフローチャート。
【発明を実施するための形態】
【００１０】
以下、実施の形態について図面を参照して説明する。  
図１は、一実施形態に係る電子機器の外観を示す斜視図である。この電子機器は、タブレットコンピュータ、ノートブック型パーソナルコンピュータ、スマートフォン、ＰＤＡ等として実現され得る。以下では、この電子機器がタブレットコンピュータ１０として実現されている場合を想定する。タブレットコンピュータ１０は、タブレットまたはスレートコンピュータとも称される携帯型電子機器であり、図１に示すように、本体１１とタッチスクリーンディスプレイ１７とを備える。タッチスクリーンディスプレイ１７は、本体１１の上面に重ね合わせるように取り付けられている。
【００１１】
本体１１は、薄い箱形の筐体を有している。タッチスクリーンディスプレイ１７には、フラットパネルディスプレイと、フラットパネルディスプレイの画面上のペンまたは指の接触位置を検出するように構成されたセンサとが組み込まれている。フラットパネルディスプレイは、例えば、液晶表示装置（ＬＣＤ）であってもよい。センサとしては、例えば、静電容量方式のタッチパネル、電磁誘導方式のデジタイザなどを使用することができる。以下では、デジタイザとタッチパネルの２種類のセンサの双方がタッチスクリーンディスプレイ１７に組み込まれている場合を想定する。
【００１２】
デジタイザ及びタッチパネルの各々は、フラットパネルディスプレイの画面と重なるように設けられる。タッチスクリーンディスプレイ１７は、指を使用した画面に対するタッチ操作（接触操作）のみならず、ペン１０Ａを使用した画面に対するタッチ操作（接触操作）も検出することができる。ペン１０Ａは例えば電磁誘導ペンであってもよい。ユーザは、ペン１０Ａまたは指を使用してタッチスクリーンディスプレイ１７上で様々なジェスチャ操作、例えば、タップ、ドラッグ、スワイプ、フリック、等を行うことができる。
【００１３】
また、ユーザは、ペン１０Ａを使用してタッチスクリーンディスプレイ１７上で手書き入力操作を行うことができる。手書き入力操作中においては、画面上のペン１０Ａの動きの軌跡、つまり手書き入力操作によって手書きされるストローク（手書きストロークの軌跡）がリアルタイムに描画され、これによって手書きにより入力された複数の手書きストローク（各手書きストロークの軌跡）が画面上に表示される。
【００１４】
図２は、実施形態におけるタブレットコンピュータ１０のシステム構成を示す図である。  
タブレットコンピュータ１０は、図２に示されるように、ＣＰＵ１０１、システムコントローラ１０２、メインメモリ１０３、グラフィクスコントローラ１０４、ＢＩＯＳ−ＲＯＭ１０５、記録デバイス１０６、無線通信デバイス１０７、エンベデッドコントローラ（ＥＣ）１０８等を備える。
【００１５】
ＣＰＵ１０１は、タブレットコンピュータ１０内の各種コンポーネントの動作を制御するプロセッサである。ＣＰＵ１０１は、記録デバイス１０６からメインメモリ１０３にロードされる各種プログラムを実行する。ＣＰＵ１０１により実行されるプログラムには、オペレーティングシステム（ＯＳ）２０１や、ブラウザアプリケーションプログラム２０２等の各種アプリケーションプログラムが含まれている。ブラウザアプリケーションプログラム２０２は、サーバからドキュメント（例えば、ウェブページ）のデータを取得する機能、ドキュメントを画面に表示する機能、ドキュメント上に注釈を作成する機能、ドキュメントを保存する機能等を有する。
【００１６】
また、ＣＰＵ１０１は、ＢＩＯＳ−ＲＯＭ１０５に格納された基本入出力システム（ＢＩＯＳ）も実行する。ＢＩＯＳは、ハードウェア制御のためのプログラムである。
【００１７】
システムコントローラ１０２は、ＣＰＵ１０１のローカルバスと各種コンポーネントとの間を接続するデバイスである。システムコントローラ１０２には、メインメモリ１０３をアクセス制御するメモリコントローラも内蔵されている。また、システムコントローラ１０２は、シリアルバスなどを介してグラフィクスコントローラ１０４との通信を実行する機能も有している。
【００１８】
グラフィクスコントローラ１０４は、タブレットコンピュータ１０のディスプレイモニタとして使用されるＬＣＤ１７Ａを制御する表示コントローラである。グラフィクスコントローラ１０４によって生成される表示信号はＬＣＤ１７Ａに送られる。ＬＣＤ１７Ａは、表示信号に基づいて画面イメージを表示する。ＬＣＤ１７Ａの上層には、画面上の指の接触位置を検知するためのタッチパネル１７Ｂが配置されている。さらに、ＬＣＤ１７Ａの下層には、画面上のペン１０Ａの接触位置を検知するためのデジタイザ１７Ｃが配置されている。タッチパネル１７Ｂは、ＬＣＤ１７Ａの画面上で入力を行うための静電容量式のポインティングデバイスである。指が接触される画面上の接触位置及び接触位置の動き等はタッチパネル１７Ｂによって検出される。デジタイザ１７ＣはＬＣＤ１７Ａの画面上で入力を行うための電磁誘導式のポインティングデバイスである。ペン１０Ａが接触される画面上の接触位置及び接触位置の動き等はデジタイザ１７Ｃによって検出される。
【００１９】
ＯＳ２０１は、タッチパネル１７Ｂを制御するドライバプログラムと協働して、画面上に指が接触したこと、およびその接触位置を示す入力イベントを発行する。また、ＯＳ２０１は、デジタイザ１７Ｃを制御するドライバプログラムと協働して、画面上にペン１０Ａが接触したこと、およびその接触位置を示す入力イベントを発行する。
【００２０】
無線通信デバイス１０７は、無線ＬＡＮまたは３Ｇ移動通信などの無線通信を実行するように構成されたデバイスである。
【００２１】
ＥＣ１０８は、電力管理のためのエンベデッドコントローラを含むワンチップマイクロコンピュータである。ＥＣ１０８は、ユーザによるパワーボタンの操作に応じてタブレットコンピュータ１０を電源オンまたは電源オフする機能を有している。
【００２２】
上述したように、ブラウザアプリケーションプログラム２０２はドキュメントを画面に表示する閲覧機能を有する。ドキュメントは、テキスト、画像、表、図形、等の少なくともいずれかを含む情報であればよく、例えば、ＨＴＭＬ形式のウェブページやｅＰｕｂ形式の電子書籍である。ドキュメントは、例えば、複数のエレメント（ブロック）を含み、これら複数のエレメントはツリー構造を有する。
【００２３】
また、ブラウザアプリケーションプログラム２０２は、ＨＴＭＬ形式のウェブページのようなドキュメントを表示する場合に、画面のサイズ、ウェブページに含まれるエレメントのツリー構造、フォントサイズ、等に応じて、エレメントのレイアウトを決定するリフロー機能も有する。なお、画面のサイズは、画面の物理的な大きさではなく、解像度を示すこともある。また、画面は、例えばディスプレイを回転させることによって、その画面の向き（ユーザに正対した場合の画面の向き）を変更できるので、ブラウザアプリケーションプログラム２０２は、画面が横表示である場合と縦表示である場合とで、画面を異なるサイズとして扱う。したがって、ブラウザアプリケーションプログラム２０２は、リフロー機能が用いられる場合に、画面が横表示であるか縦表示であるかに応じて、エレメントのレイアウトを変更することができる。
【００２４】
図３を参照して、このリフロー機能を用いて表示されるドキュメントの例を説明する。  
ブラウザアプリケーションプログラム２０２は、例えば、画面のサイズに応じて、ドキュメント（ウェブページ）内のエレメントのレイアウトを変更する、すなわち、ドキュメント内のエレメントをリフローする。例えば、ノートブック型のＰＣに設けられた大きな画面と、タブレットコンピュータやスマートフォンに設けられた小さな画面とでは、同一のドキュメントが異なるレイアウトで表示される。
【００２５】
図３に示す第１画面４０と第２画面６０とでは同一のドキュメント（例えば、同一のＨＴＭＬソースコードに基づくウェブページ）が表示されている。しかし、第１画面４０と第２画面６０とでは画面のサイズが異なるので、ドキュメント内のエレメントの配置（レイアウト）が異なっている。
【００２６】
例えば、第２画面６０上のドキュメントに含まれる“エレメント１（Ｅｌｍ１）”６１〜“エレメント８（Ｅｌｍ８）”６８は、第１画面４０上のドキュメントに含まれる“エレメント１（Ｅｌｍ１）”４１〜“エレメント８（Ｅｌｍ８）”４８にそれぞれ対応するが、第２画面６０の幅が第１画面４０の幅よりも小さいことに応じてエレメントの配置が変更されている。また、第１画面４０のドキュメントに含まれる“エレメント９（Ｅｌｍ９）”４９および“エレメント１０（Ｅｌｍ１０）”５０は、第２画面６０ではその一部分６９，７０しか表示されておらず、例えば、第２画面６０をスクロールする操作によってエレメントの全体を表示することができる。  
このように、ブラウザアプリケーションプログラム２０２は、１つのドキュメントを、表示されるディスプレイ１７の画面のサイズに応じたレイアウトで表示することができる。
【００２７】
ところで、このようなドキュメント（ウェブページ）上には、注釈、コメント、メモ、等の、ユーザの任意の記述を追記することが期待される場合がある。ドキュメント上に注釈等が追記されることにより、例えば、ユーザが後でそのドキュメントを閲覧する場合や、別のユーザにドキュメントを閲覧させる場合に、そのドキュメントを効率的に利用することができる。
【００２８】
図４に示す例では、第１画面４０に表示された“エレメント８（Ｅｌｍ８）”４８上に、注釈４Ａが付加されている。上述したように、ドキュメント内のエレメントは画面サイズに応じてリフローされるので、第１画面４０上の“エレメント８”４８は、サイズが異なる第２画面６０上の“エレメント８（Ｅｌｍ８）”６８に対応している。
【００２９】
しかし、第１画面４０上の注釈４Ａが第２画面６０上でも同一の座標に配置された場合には、第１画面４０において“エレメント８”４８に重ね合わせられていた注釈４Ａが、第２画面６０においては“エレメント５（Ｅｌｍ５）”６５と“エレメント７（Ｅｌｍ７）”６７とに重ね合わせられている。したがって、画面サイズに応じたエレメントのリフローによって、エレメントのレイアウトが変更された場合には、注釈４Ａが、ユーザが意図していたエレメント上から、別のエレメント上にずれてしまう可能性がある。
【００３０】
本実施形態では、図５に示すように、ドキュメント上の注釈をリフローに応じて適切に配置する。本実施形態では、第１サイズの画面を有するコンピュータ上で表示されていた注釈付きのドキュメントが、第１サイズとは異なる第２サイズの画面を有するコンピュータで表示される場合に、それら２つの画面間で、注釈と、当該注釈に対応するエレメント（注釈がリンクする基準エレメント）との位置関係が維持される。
【００３１】
図５に示す例では、第１画面４０上の“エレメント８”４８の少なくとも一部分上に注釈４Ａが配置されている場合に、第１画面４０とは異なるサイズを有し、エレメントがリフローされた第２画面６０上でも、“エレメント８”４８に対応する“エレメント８”６８の少なくとも一部分上に注釈６Ａが配置され、注釈と、当該注釈に対応するエレメントとの位置関係が維持されている。したがって、エレメントがリフローされた場合にも、ユーザが意図したエレメントにリンクして注釈が移動されるので、元のドキュメント上の必要な部分（注釈によって隠されたくない部分）上に注釈が配置されないようにすることができる。
【００３２】
図６は、本実施形態の電子機器によって実行されるブラウザアプリケーションプログラム２０２の機能構成の例を示す。ブラウザアプリケーションプログラム２０２は、ウェブサーバ３１やクラウドサーバ３２によって送信されたドキュメントのデータを用いて、画面にドキュメントを表示する。以下では、本実施形態の電子機器を、クライアントコンピュータ１０とも称する。クライアントコンピュータ１０は、タブレットコンピュータ、ノートブック型パーソナルコンピュータ、スマートフォン、ＰＤＡ等の種々の電子機器として実現され得る。
【００３３】
ブラウザアプリケーションプログラム２０２は、例えば、入力部２１、ウェブ表示処理部２２、注釈表示処理部２３、エレメント決定部２４、および保存処理部２５を備える。以下では、ブラウザアプリケーションプログラム２０２が、表示されたドキュメント（ウェブページ）に注釈を付加し、注釈が付加されたドキュメントを保存する場合の処理と、その保存されたドキュメントを画面に表示する場合の処理とを順に説明する。
【００３４】
まず、ブラウザアプリケーションプログラム２０２が、表示されたドキュメントに注釈を付加し、注釈が付加されたドキュメントを保存する場合の処理について説明する。  
入力部２１はウェブサーバ３１からのドキュメントのデータを入力（受信）する。ここでは、説明を簡単にするために、ドキュメントがウェブページである場合を想定する。入力部２１は、例えば、ユーザによる操作に応じて、指定されたＵＲＬのウェブページのデータの送信をウェブサーバ３１に要求し、当該ウェブサーバ３１によって送信されたウェブページのデータを受信する。このウェブページのデータは、例えばＨＴＭＬのソースコードを含む。
【００３５】
ウェブ表示処理部２２は、入力されたウェブページのデータに含まれるＨＴＭＬのソースコードをＤＯＭ（Document Object Model）解析し、ウェブページに含まれるエレメント（エレメントのツリー構造）を検出する。そして、ウェブ表示処理部２２は、検出されたエレメントが表示される第１画面上の第１レイアウトを決定する。ウェブ表示処理部２２は、例えば、第１画面のサイズ（または、ウィンドウのサイズ）、各エレメントに含まれるテキストや画像の内容、テキストのフォントサイズ、エレメント間の関係（例えば、エレメントの包含関係）、エレメントの表示に関するパラメータ、等に基づいて、各エレメントが表示される位置とサイズとを決定する。ウェブ表示処理部２２は、決定された第１レイアウトに基づいて配置された複数のエレメントを含むウェブページを第１画面に表示する。
【００３６】
注釈表示処理部２３は、ユーザによる操作に応じて、表示中のウェブページ上に注釈を作成する。注釈表示処理部２３は、例えば、注釈を作成するための操作に応じて、ウェブページ上の任意の位置に注釈の領域を示す画像（例えば、付箋を表す画像）を表示する。そして、注釈表示処理部２３は、キーボード入力に応じた文字（テキスト）をその画像内に表示する。なお、注釈表示処理部２３は、タッチスクリーンディスプレイ１７を用いた手書き入力操作に応じて、ウェブページ上に手書きの文字や図形（手書きのストローク）を含む注釈を表示してもよい。
【００３７】
エレメント決定部２４は、表示中のウェブページ（ドキュメント）の保存が要求されたことに応じて、ウェブページ上の注釈に対応するエレメント（基準エレメント）を決定する。この基準エレメントは、複数のエレメントが第１レイアウトで配置される場合に、それら複数のエレメントから、注釈に関連する度合いに応じて定められるエレメントである。
【００３８】
より具体的には、エレメント決定部２４は、ウェブページに含まれる１以上のエレメントの各々の評価値Ｖを算出する。この評価値Ｖは、エレメントが注釈に関連している度合いを示す。評価値Ｖは、例えば、注釈の領域に対する、第１エレメントの領域と注釈の領域との重なりを用いて定められる。具体的には、エレメント決定部２４は、エレメントの各々について、エレメントの領域Ｅと注釈の領域Ａとが重なり合っている共通部分（共通部分の面積）Ｅ∩Ａを算出する。そして、エレメント決定部２４は、注釈の領域（面積）Ａに対する共通部分Ｅ∩Ａの割合（以下、第１の割合とも称する）と、エレメントの領域（面積）Ｅに対する共通部分Ｅ∩Ａの割合（以下、第２の割合とも称する）とに基づいて、エレメントの評価値Ｖを算出する。
【００３９】
図７を参照して、注釈に対応する基準エレメントが決定される例を説明する。図７に示す例では、第１レイアウトで配置された複数のエレメント７１１〜７１７を含むドキュメント上に、１つの注釈７１８が付加されている場合を想定する。
【００４０】
注釈表示処理部２３は、複数のエレメント７１１〜７１７の各々について、注釈７１８との関連性を示す評価値Ｖを算出する。この評価値Ｖは、注釈７１８の領域Ａに対する、注釈７１８の領域Ａとエレメントの領域Ｅとの共通部分Ｅ∩Ａの割合（第１の割合）と、エレメントの領域Ｅに対する、注釈７１８の領域Ａとエレメントの領域Ｅとの共通部分Ｅ∩Ａの割合（第２の割合）とに基づいて算出され、例えば次式により算出される。
【００４１】
Ｖ＝（Ｅ∩Ａ／Ａ）α×（Ｅ∩Ａ／Ｅ）β 
なお、αとβとは、第１の割合と第２の割合との重み付けのためのパラメータである。また、評価値Ｖは第１の割合と第２の割合とを重み付け加算した値であってもよい。
【００４２】
より具体的な例として、図７に示す“エレメント１（Ｅｌｍ１）”７１の評価値と“エレメント６（Ｅｌｍ６）”７６との評価値とについて説明する。  
“エレメント１”７１では、注釈７１８の領域Ａに対する、注釈７１８の領域Ａとエレメント７１１の領域Ｅ１との共通部分Ｅ１∩Ａの割合Ｅ１∩Ａ／Ａ（第１の割合）が、全エレメント７１１〜７１７の中で最大になる。つまり、注釈７１８を包含する“エレメント１”７１１では、Ｅ１∩Ａ＝Ａであるので、第１の割合がＥ１∩Ａ／Ａ＝１になり、第１の割合が最大になる。しかし、“エレメント１”７１１では、“エレメント１”７１１の領域Ｅ１に対する、注釈７１８の領域Ａとエレメントの領域Ｅ１との共通部分Ｅ１∩Ａの割合Ｅ１∩Ａ／Ｅ１（第２の割合）は小さくなる。
【００４３】
一方、“エレメント６”７１６では、注釈７１８の領域Ａに対する、注釈７１８の領域Ａと“エレメント６”７１６の領域Ｅ６との共通部分Ｅ６∩Ａの割合Ｅ６∩Ａ／Ａ（第１の割合）が全てのエレメント７１１〜７１７の中で２番目に大きい。また、“エレメント６”７１６では、“エレメント６”７１６の領域Ｅ６に対する、注釈７１８の領域Ａと“エレメント６”７１６の領域Ｅ６との共通部分Ｅ６∩Ａの割合Ｅ６∩Ａ／Ｅ６（第２の割合）が全てのエレメント７１１〜７１７の中で最大になる。
【００４４】
評価値Ｖは第１の割合と第２の割合とに基づいて算出されるので、図７に示す例では、全てのエレメント７１１〜７１７の中で、“エレメント６”７６の評価値Ｖが最大になる。
【００４５】
エレメント決定部２４は、評価値Ｖが最大であるエレメントを、注釈に対応する基準エレメントに決定する。図７に示す例では、エレメント決定部２４は、算出されたエレメント７１１〜７１７の各々に対応する評価値Ｖを用いて、評価値Ｖが最大である“エレメント６”７６を、注釈７１８に対応する基準エレメントに決定する。つまり、エレメント決定部２４は、評価値が最大であるエレメントを、ユーザが注釈をリンクさせることを意図したエレメントであると判断する。そして、エレメント決定部２４は、第１レイアウトで配置されている基準エレメント７６に対する、注釈７１８の相対座標（相対位置）を算出する。この相対座標は、例えば、基準エレメント７６の左上隅の座標７１６Ａを原点とする場合の、注釈７１８の左上隅の座標７１８Ａで表される。
【００４６】
なお、エレメント決定部２４は、表示中のドキュメント上に複数の注釈がある場合には、それら複数の注釈の各々について、基準エレメントを決定し、決定された基準エレメントに対する相対座標を算出する。
【００４７】
次いで、保存処理部２５は、第１画面に表示される場合に複数のエレメントが第１レイアウトで配置されるドキュメントであって、それら複数のエレメントの内の第１エレメント（基準エレメント）の少なくとも一部分上に注釈が配置されるドキュメントのドキュメントデータを保存する。より具体的には、保存処理部２５は、ウェブページのデータ（ＨＴＭＬソースコード）と、当該ウェブページに含まれるエレメントに対応するエレメントデータと、ウェブページ上の注釈に対応する注釈データとを含むドキュメントデータを保存する。ドキュメントデータは任意の記憶媒体に保存することができ、例えば、クライアント１０内に設けられたＤＢ１３やクラウドサーバ３２内に設けられたＤＢ３２Ａに保存される。
【００４８】
図８はエレメントデータの一構成例を示す。エレメントデータは、例えば、１つのドキュメント（例えば、ウェブページ、電子書籍、等）内の複数のエレメントに対応する複数のエントリを含む。各エントリは、エレメントＩＤ、サイズ、等を含む。
【００４９】
あるエレメントに対応するエントリにおいて、「エレメントＩＤ」はそのエレメントに付与された識別情報を示す。「サイズ」はそのエレメントが画面に表示されるサイズを示す。「サイズ」は、例えば、そのエレメントが表示される矩形領域の幅と高さとを示す。
【００５０】
また、図９は注釈データの一構成例を示す。注釈データは、例えば、１つのドキュメント上に作成された１以上の注釈に対応する１以上のエントリを含む。各エントリは、アノテーションＩＤ、エレメントＩＤ、相対座標、サイズ、内容、等を含む。
【００５１】
ある注釈に対応するエントリにおいて、「アノテーションＩＤ」はその注釈に付与された識別情報を示す。「エレメントＩＤ」は、その注釈に対応する基準エレメントの識別情報を示す。「エレメントＩＤ」には、上述したエレメントデータによって示される、複数のエレメントの内の１つのエレメントのエレメントＩＤが設定される。「相対座標」は、その注釈の、基準エレメントに対する相対座標（相対位置）を示す。「サイズ」はその注釈が画面に表示されるサイズを示す。「サイズ」は、例えば、その注釈が表示される矩形領域の幅と高さとを示す。「内容」は、その注釈の内容を示し、例えば、注釈として書き込まれたテキストを示す。
【００５２】
なお、表示中のウェブページ上に注釈がない場合、保存処理部２５はウェブページのデータ（ＨＴＭＬソースコード）を含むドキュメントデータを保存する。
【００５３】
以上のようにドキュメントデータを保存することによって、保存されたドキュメントを再度閲覧することや、ドキュメントを保存したクライアントコンピュータ１０とは別のクライアントコンピュータ１０で当該ドキュメントを閲覧すること等が可能になる。
【００５４】
次いで、ブラウザアプリケーションプログラム２０２が、保存されたドキュメントを画面に表示する場合の処理について説明する。なお、ドキュメントを保存するクライアントコンピュータ１０と、その保存されたドキュメントを表示するクライアントコンピュータ１０とは、別々のコンピュータであり得る。ユーザは、例えば、第１画面を備えるクライアントコンピュータ１０（例えば、ノートブック型のパーソナルコンピュータ）でドキュメントを閲覧し、そのドキュメント上に注釈を付加し、注釈付きのドキュメントのデータを保存する。その後、ユーザは、第２画面を備えるクライアントコンピュータ１０（例えば、スマートフォン）で、保存されたドキュメントのデータを取得し、第１画面を備えるクライアントコンピュータ１０で付加された注釈付きのドキュメントを閲覧することもできる。ブラウザアプリケーションプログラム２０２は、プログラム２０２が実行されるクライアントコンピュータ１０に設けられた画面のサイズ等に応じて、保存されたドキュメントを表示する。
【００５５】
より具体的には、まず、入力部２１は、記憶媒体に保存されたドキュメントデータを入力する。入力部２１は、例えば、クラウドサーバ３２内のＤＢ３２Ａからドキュメントデータを受信してもよいし、クライアント１０内のＤＢ１３からドキュメントデータを読み出してもよい。入力部２１は、例えば、第１画面に表示される場合に複数のエレメントが第１レイアウトで配置されるドキュメントであって、それら複数のエレメントの内の第１エレメント（基準エレメント）の少なくとも一部分上に注釈が配置されるドキュメントのドキュメントデータを入力する。
【００５６】
ウェブ表示処理部２２および注釈表示処理部２３は、入力されたドキュメントデータを用いて第１画面のサイズとは異なるサイズを有する第２画面にドキュメントを表示する場合、複数のエレメントが第２レイアウトで配置され、第２レイアウトで配置される第１エレメント（すなわち、第１画面上の基準エレメントに対応する基準エレメント）の少なくとも一部分上に注釈が配置されるドキュメントを、第２画面に表示する。
【００５７】
より具体的には、ウェブ表示処理部２２は、ウェブサーバ３１からウェブページのデータが入力（受信）された場合と同様に、ドキュメントデータに含まれるＨＴＭＬデータをＤＯＭ解析し、ウェブページ（ドキュメント）に含まれるエレメント（エレメントのツリー構造）を検出する。そして、ウェブ表示処理部２２は、検出されたエレメントが表示される第２画面上の第２レイアウトを決定する。ウェブ表示処理部２２は、例えば、第２画面のサイズ（または、ウィンドウのサイズ）、各エレメントに含まれるテキストや画像の内容、テキストのフォントサイズ、エレメント間の関係（例えば、エレメントの包含関係）、エレメントの表示に関するパラメータ、等に基づいて、各エレメントが表示される位置とサイズとを決定する。
【００５８】
注釈表示処理部２３は、ドキュメントデータに含まれる注釈データを用いて、ウェブページ上の注釈に対応する基準エレメントを検出する。そして、注釈表示処理部２３は、ドキュメントデータに含まれるエレメントデータによって示される基準エレメントのサイズ（すなわち、第１画面上での基準エレメントのサイズ）と、ウェブ表示処理部２２によって算出された現在の基準エレメントのサイズ（第２画面上での基準エレメントのサイズ）とを比較することによって、基準エレメントのサイズが変更されているか否かを判定する。
【００５９】
基準エレメントのサイズが変更されていない場合、ウェブ表示処理部２２および注釈表示処理部２３は、第１レイアウトで配置される基準エレメント（第１エレメント）に対する注釈の相対的な位置関係に従って定まる、第２レイアウトで配置される基準エレメントに対する相対的な位置に、注釈が配置されるドキュメントを第２画面に表示する。
【００６０】
より具体的には、基準エレメントのサイズが変更されていない場合、注釈表示処理部２３は、ウェブ表示処理部２２によって算出された基準エレメントの位置と、注釈データに示される基準エレメントに対する注釈の相対座標（すなわち、第１画面上に第１レイアウトで配置される基準エレメントに対する注釈の相対座標）とに基づいて、注釈が表示される第２画面上の位置を算出する。つまり、注釈表示処理部２３は、第２レイアウトで配置される基準エレメントに対して、注釈データに示される相対座標を有する位置を、注釈が表示される第２画面上の位置に決定する。そして、ウェブ表示処理部２２および注釈表示処理部２３は、ウェブ表示処理部２２によって算出された位置およびサイズで配置されたエレメントと、注釈表示処理部２３によって算出された位置に、注釈データで示されるサイズ（すなわち、ウェブページが保存されたときに注釈が表示されていたサイズ）で配置された注釈とを含むドキュメントを第２画面に表示する。  
これにより、上述した図５の例のように、ドキュメントに含まれるエレメントの位置が変更（リフロー）される場合にも、注釈を適切な位置に表示することができる。すなわち、第１画面４０内のエレメントのレイアウトから第２画面６０内のエレメントのレイアウトへの変更のように、ドキュメントに含まれるエレメントの位置が変更（リフロー）された場合に、第１画面４０上の注釈４Ａに対応する第２画面６０上の注釈６Ａを適切な位置に表示することができる。
【００６１】
一方、基準エレメントのサイズが変更されている場合、すなわち、第２レイアウトで配置される基準エレメント（第１エレメント）のサイズが、第１レイアウトで配置される基準エレメントのサイズとは異なる場合、ウェブ表示処理部２２および注釈表示処理部２３は、第１レイアウトで配置される基準エレメントのサイズと第２レイアウトで配置される基準エレメントのサイズとの関係に従って定まるサイズを有する注釈が配置されるドキュメントを第２画面に表示する。
【００６２】
より具体的には、基準エレメントのサイズが変更されている場合、注釈表示処理部２３は、基準エレメントのサイズ変更に応じたサイズを有する注釈が配置されたドキュメントを第２画面に表示する。注釈表示処理部２３は、基準エレメントのサイズ変更（例えば、２倍に拡大）と、注釈データに示される注釈のサイズとに基づいて、注釈が表示される画面上のサイズを算出する、すなわち、注釈の領域を拡大または縮小する。また、注釈表示処理部２３は、ウェブ表示処理部２２によって算出された基準エレメントの位置と、基準エレメントのサイズ変更と、注釈データに示される基準エレメントに対する注釈の相対座標とに基づいて、注釈が表示される第２画面上の位置を算出する。より具体的には、注釈表示処理部２３は、注釈データに示される基準エレメントに対する注釈の相対座標を、基準エレメントのサイズ変更（例えば、２倍に拡大）に比例して変換し、ウェブ表示処理部２２によって算出された基準エレメントの位置に、変換された相対座標を加算することによって、第２画面上での注釈の位置を算出する。そして、ウェブ表示処理部２２および注釈表示処理部２３は、ウェブ表示処理部２２によって算出された位置およびサイズで配置されたエレメントと、注釈表示処理部２３によって算出された位置およびサイズで配置された注釈とを含むドキュメントを第２画面に表示する。
【００６３】
このように、ウェブ表示処理部２２は、リフロー時に、ドキュメント内のエレメントの表示位置を変更するだけでなく、エレメントのサイズも変更（拡大または縮小）する場合がある。その場合、注釈表示処理部２３は、エレメントが表示される位置とサイズの変更を考慮して、注釈が表示される位置とサイズとを決定する。
【００６４】
図１０を参照して、エレメントの位置とサイズとの変更（リフロー）に応じて、注釈の位置とサイズとが決定される例について説明する。ここでは、第１画面７２に表示されているドキュメントにエレメント７２１〜７２３が含まれ、このエレメント７２１〜７２３の少なくとも一部分上に注釈７２４が付加されている場合を想定する。なお、エレメント決定部２４によって、注釈７２４に対応する基準エレメントが“エレメント３（Ｅｌｍ３）”７２３であることが決定されているものとする。
【００６５】
ウェブ表示処理部２２は、この第１画面７２上のドキュメントが、第１画面７２とは異なるサイズを有する第２画面７３に表示されるとき、その第２画面７３に、エレメント７２１〜７２３に対応するエレメント７３１〜７３３を表示するためのレイアウトを決定する。ウェブ表示処理部２２は、第２画面７３のサイズに応じてエレメント７３１〜７３３の位置およびサイズを決定する。
【００６６】
そして、注釈表示処理部２３は、第１画面７２に表示されていた基準エレメント（“エレメント３”）７２３のサイズと、ウェブ表示処理部２２によって第２画面７３に応じて決定された基準エレメント（“エレメント３”）７３３のサイズとが異なるので、この基準エレメントのサイズ変更に応じて注釈７３４のサイズを決定する。なお、このサイズの変更は、基準エレメントのアスペクト比が維持される拡大または縮小に限らず、水平方向または垂直方向だけの拡大または縮小のようなアスペクト比が維持されないサイズ変更であってもよい。
【００６７】
注釈表示処理部２３はさらに、この基準エレメントのサイズ変更に応じて注釈７３４の位置も決定する。注釈表示処理部２３は、基準エレメントのサイズ変更と、第１画面７２上の基準エレメント７２３に対する注釈７２４の相対座標と、第２画面７３上の基準エレメント７３３の位置とに基づいて、注釈７３４の位置を決定する。
【００６８】
図１０に示す例では、注釈表示処理部２３は、第１画面７２上の基準エレメント７２３から第２画面７３上の基準エレメント７３３へのサイズ変更が、水平方向のサイズ（幅）を１／２倍する縮小（スケーリング）であることを検出する。そして、注釈表示処理部２３は、検出されたサイズ変更に基づいて、注釈７２４の幅Ｗを１／２倍することによって、第２画面７３上の注釈７３４の幅（Ｗ／２）を決定する。なお、サイズ変更が水平方向の縮小のみであるので、第２画面７３上の注釈７３４の高さは、第１画面７２上の注釈７２４の高さＨのままである。
【００６９】
そして、注釈表示処理部２３は、基準エレメントのサイズ変更が水平方向のサイズを１／２倍する縮小であり、第１画面７２上の基準エレメント７２３の左上隅の座標７２３Ａを原点とする注釈７２４の左上隅の位置７２４Ａの相対座標が（ｘ，ｙ）であることに基づいて、第２画面７３上の基準エレメント７３３の左上隅の座標７３３Ａを原点とする注釈７３４の左上隅の位置７３４Ａの相対座標（ｘ／２，ｙ）を算出する。注釈表示処理部２３は、第２画面７３上の基準エレメント７３３の左上隅の座標７３３Ａに、注釈７３４の相対座標（ｘ／２，ｙ）を加算することによって、第２画面７３上の注釈７３４の座標（絶対座標）を算出する。
【００７０】
以上により、ドキュメントに含まれるエレメントの位置とサイズとが変更（リフロー）される場合にも、注釈を適切な位置に適切なサイズで表示することができる。
【００７１】
例えば、図１１に示すように、第１画面４０内のエレメントのレイアウトから第２画面８０内のエレメントのレイアウトへの変更のように、ドキュメントに含まれるエレメントの位置とサイズとが変更（リフロー）された場合に、第１画面４０上の注釈４Ａに対応する第２画面８０上の注釈８Ａを適切な位置に適切なサイズで表示することができる。また、図５に示す第２画面６０または図１１に示す第２画面８０に表示された注釈付きのドキュメントに、注釈をさらに付加することもできる。その場合、付加された注釈に対応する注釈データをさらに含むドキュメントデータが記憶媒体に保存される。
【００７２】
なお、上述した注釈の表示位置および表示サイズの変更は、保存されたドキュメントが異なるサイズを有する別の画面に表示される場合だけでなく、ドキュメントの表示中における、ウィンドウサイズの変更、画面の回転、フォントサイズの変更、等に伴うエレメントのリフロー時にも適用できる。
【００７３】
また、上述したように、ドキュメント上に付加される注釈は、領域を表す画像（例えば、付箋の形状を有する画像）とキーボード入力されたテキストとからなる注釈に限らず、例えば、タッチスクリーンディスプレイ１７を用いてドキュメント上に手書きされた文字や図形からなる注釈であってもよい。
【００７４】
図１２に示す例では、第１画面４０のドキュメントに手書きの注釈４Ｂが書き込まれている場合を想定する。このような手書きの注釈４Ｂを含むドキュメントが保存される場合、エレメント決定部２４は、注釈４Ｂの外接矩形４Ｃを用いて注釈４Ｂに対応する基準エレメントを決定する。つまり、エレメント決定部２４は、注釈４Ｂの領域を外接矩形４Ｃと見なし、外接矩形４Ｃに基づいて各エレメント４１〜５０が注釈４Ｂに関連する度合いを示す評価値Ｖを算出する。評価値Ｖの算出方法の詳細は図７を参照して説明した通りである。
【００７５】
第１画面４０のドキュメントに含まれるエレメント４１〜５０では、“エレメント８”４８の評価値Ｖが最大であるので、エレメント決定部２４は“エレメント８”４８を注釈４Ｂに対応する基準エレメントに決定する。そして、エレメント決定部２４は、この基準エレメント４８に対する外接矩形４Ｃの相対座標を検出し、基準エレメントと相対座標とを示す注釈データを保存する。
【００７６】
また、ウェブ表示処理部２２は、第１画面４０のサイズとは異なるサイズを有する第２画面６０にドキュメントを表示する場合、第１画面４０のエレメント４１〜５０に対応するエレメント６１〜７０の配置を第２画面６０のサイズに応じて決定する。そして、注釈表示処理部２３は、保存されている注釈データを用いて、注釈４Ｂに対応する基準エレメント（“エレメント８”）４８を検出し、この基準エレメント４８に対応する第２画面６０上の基準エレメント６８の位置と、注釈データに示される基準エレメント４８に対する注釈４Ｂ（外接矩形４Ｃ）の相対座標とに応じて、注釈６Ｂの外接矩形６Ｃの位置を決定する。
【００７７】
これにより、第１画面４０のドキュメント上に手書きの注釈４Ｂが書き込まれた場合にも、その注釈４Ｂの外接矩形４Ｃを用いた処理によって、サイズが異なる第２画面６０上の適切な位置に対応する注釈６Ｂを表示することができる。
【００７８】
次いで、図１３のフローチャートを参照して、ブラウザアプリケーションプログラム２０２によって実行されるドキュメント保存処理の手順の例を説明する。以下では、タッチスクリーンディスプレイ１７の画面にドキュメント（例えば、ウェブページ）が表示されている場合を想定する。
【００７９】
まず、エレメント決定部２４は、ドキュメントの保存が要求されたか否かを判定する（ブロックＢ１１）。ドキュメントの保存が要求されていない場合（ブロックＢ１１のＮＯ）、ブロックＢ１１に戻り、再度、ドキュメントの保存が要求されたか否かが判定される。
【００８０】
ドキュメントの保存が要求されている場合（ブロックＢ１１のＹＥＳ）、ドキュメント上に注釈が作成されているか否かを判定する（ブロックＢ１２）。ドキュメント上に注釈がない場合（ブロックＢ１２のＮＯ）、保存処理部２５はドキュメントのＨＴＭＬデータ（ＨＴＭＬのソースコード）を保存する（ブロックＢ２１）。このドキュメントのデータは任意の記憶媒体に保存することができ、例えば、クライアント１０内に設けられたＤＢ１３やクラウドサーバ３２内に設けられたＤＢ３２Ａに保存される。
【００８１】
また、ドキュメント上に注釈がある場合（ブロックＢ１２のＹＥＳ）、エレメント決定部２４は、ドキュメントに含まれる１以上のエレメントの内の、１つのエレメント（対象エレメント）の評価値Ｖを算出する（ブロックＢ１３）。この評価値Ｖは、その対象エレメントが注釈に関連している度合いを示す。具体的には、エレメント決定部２４は、対象エレメントＥと注釈Ａとが重なり合っている領域の面積（共通部分）Ｅ∩Ａを算出する。そして、エレメント決定部２４は、注釈の面積Ａに対する共通部分Ｅ∩Ａの割合（第１の割合）と、対象エレメントの面積Ｅに対する共通部分Ｅ∩Ａの割合（第２の割合）とに基づいて、対象エレメントの評価値Ｖを算出する。対象エレメントの評価値Ｖは、例えば、第１の割合と第２の割合の両方が大きい場合に大きくなる。
【００８２】
次いで、エレメント決定部２４は、ドキュメント内に他のエレメント（すなわち、評価値がまだ算出されていないエレメント）があるか否かを判定する（ブロックＢ１４）。他のエレメントがある場合（ブロックＢ１４のＹＥＳ）、ブロックＢ１３に戻り、そのエレメントの評価値Ｖが算出される。これにより、各エレメントに対応する評価値が算出される。
【００８３】
他のエレメントがない場合、すなわち、全てのエレメントに対応する評価値Ｖが算出された場合（ブロックＢ１４のＮＯ）、エレメント決定部２４は、評価値Ｖが最大であるエレメントを、注釈に対応する基準エレメントに決定する（ブロックＢ１５）。つまり、エレメント決定部２４は、評価値が最大であるエレメントを、ユーザが注釈をリンクさせることを意図したエレメントであると判断する。そして、エレメント決定部２４は、基準エレメントに対する、注釈の相対座標（相対位置）を算出する（ブロックＢ１６）。この相対座標は、例えば、基準エレメントの左上隅の座標を原点とする座標で示される。
【００８４】
次いで、エレメント決定部２４は、ドキュメント上に他の注釈（すなわち、基準エレメントがまだ決定されていない注釈）があるか否かを判定する（ブロックＢ１７）。他の注釈がある場合（ブロックＢ１７のＹＥＳ）、ブロックＢ１３に戻り、その注釈に対応する基準エレメントを決定するための処理を行う。
【００８５】
他の注釈がない場合、すなわち、ドキュメント上の全ての注釈に対応する基準エレメントが決定された場合（ブロックＢ１７のＮＯ）、保存処理部２５はドキュメントのＨＴＭＬデータを保存し（ブロックＢ１８）、当該ドキュメントに含まれるエレメントに対応するエレメントデータを保存する（ブロックＢ１９）。エレメントデータは、例えば、表示中のドキュメントにおける、各エレメントのサイズを示すデータを含む。保存処理部２５はさらに、ドキュメント上の注釈に対応する注釈データを保存する（ブロックＢ２０）。注釈データは、例えば、注釈に対応する基準エレメントと、基準エレメントに対する、注釈の相対座標と、注釈のサイズと、注釈の内容とを示すデータを含む。ＨＴＭＬデータとエレメントデータと注釈データとを含むドキュメントデータは任意の記憶媒体に保存することができ、例えば、クライアント１０内に設けられたＤＢ１３やクラウドサーバ３２内に設けられたＤＢ３２Ａに保存される。
【００８６】
また、図１４のフローチャートを参照して、ブラウザアプリケーションプログラム２０２によって実行されるドキュメント表示処理の手順の例を説明する。このドキュメント表示処理では、図１３のドキュメント保存処理で保存されたドキュメントが画面に表示される場合を想定する。
【００８７】
まず、入力部２１はドキュメントデータを入力する（ブロックＢ３１）。入力部２１は、例えば、クラウドサーバ３２内のＤＢ３２Ａからドキュメントデータを受信してもよいし、クライアント１０内のＤＢ１３からドキュメントデータを読み出してもよい。
【００８８】
ウェブ表示処理部２２は、ドキュメントデータに含まれるＨＴＭＬデータをＤＯＭ解析し、ドキュメントに含まれるエレメント（エレメントのツリー構造）を検出する（ブロックＢ３２）。そして、ウェブ表示処理部２２は、検出された各エレメントが表示される画面上の位置とサイズとを算出する（ブロックＢ３３）。
【００８９】
次いで、ウェブ表示処理部２２はドキュメント上に注釈があるか否かを判定する（ブロックＢ３４）。ウェブ表示処理部２２は、例えば、ドキュメントデータに注釈データが含まれているか否かに基づいて、ドキュメント上に注釈があるか否かを判定する。ドキュメント上に注釈がない場合（ブロックＢ３４のＮＯ）、ウェブ表示処理部２２は、決定された各エレメントの位置とサイズとに基づいて配置されたエレメントを含むドキュメントを画面に表示する（ブロックＢ３５）。
【００９０】
一方、ドキュメント上に注釈がある場合（ブロックＢ３４のＹＥＳ）、注釈表示処理部２３は注釈データを用いて注釈に対応する基準エレメントを検出する（ブロックＢ３６）。そして、注釈表示処理部２３は、ドキュメントデータに含まれるエレメントデータを用いて、ドキュメントが保存されたときに基準エレメントが表示されていたサイズと、ブロックＢ３３で算出された当該基準エレメントのサイズとを比較し、基準エレメントのサイズが変更されているか否かを判定する（ブロックＢ３７）。
【００９１】
基準エレメントのサイズが変更されていない場合（ブロックＢ３７のＮＯ）、注釈表示処理部２３は、ブロックＢ３３で算出された基準エレメントの位置と、注釈データに示される基準エレメントに対する注釈の相対座標とに基づいて、注釈が表示される画面上の位置を算出する（ブロックＢ３８）。そして、ウェブ表示処理部２２および注釈表示処理部２３は、ブロックＢ３３で算出された位置およびサイズで配置されたエレメントと、ブロックＢ３８で算出された位置に、注釈データで示されるサイズで配置された注釈とを含むドキュメントを画面に表示する（ブロックＢ３９）。
【００９２】
また、基準エレメントのサイズが変更されている場合（ブロックＢ３７のＹＥＳ）、注釈表示処理部２３は、基準エレメントのサイズ変更と、注釈データに示される注釈のサイズとに基づいて、注釈が表示される画面上のサイズを算出する（ブロックＢ４０）、すなわち、注釈の領域を拡大または縮小する。また、注釈表示処理部２３は、ブロックＢ３３で算出された基準エレメントの位置と、基準エレメントのサイズ変更と、注釈データに示される基準エレメントに対する注釈の相対座標とに基づいて、注釈が表示される画面上の位置を算出する（ブロックＢ４１）。そして、ウェブ表示処理部２２および注釈表示処理部２３は、ブロックＢ３３で算出された位置およびサイズで配置されたエレメントと、ブロックＢ３９で算出された位置に、ブロックＢ４０で算出されたサイズで配置された注釈とを含むドキュメントを画面に表示する（ブロックＢ４２）。
【００９３】
なお、上述した手順では、ドキュメント上に１つの注釈がある場合について記載したが、ドキュメント上には複数の注釈があってもよい。その場合、複数の注釈のそれぞれについて、画面上に表示される位置とサイズとを決定するための処理が行われる。
【００９４】
以上説明したように、本実施形態によれば、ドキュメント上の注釈をリフローに応じて適切に配置することができる。入力部２１は、第１画面４０に表示される場合に複数のエレメント４１〜５０が第１レイアウトで配置されるドキュメントであって、それら複数のエレメント４１〜５０の内の第１エレメント４８の少なくとも一部分上に注釈４Ａが配置されるドキュメントのデータを入力する。ウェブ表示処理部２２および注釈表示処理部２３は、入力されたデータを用いて第１画面４０のサイズとは異なるサイズを有する第２画面６０にドキュメントを表示する場合、複数のエレメント６１〜７０が第２レイアウトで配置され、第２レイアウトで配置される第１エレメント６８の少なくとも一部分上に注釈６Ａが配置されるドキュメントを、第２画面６０に表示する。これにより、第１画面上に第１レイアウトで表示されていたドキュメントが、リフローによって第２画面上に第２レイアウトで表示される場合にも、ドキュメント上の注釈を適切なエレメント上に配置することができる。
【００９５】
なお、図１３および図１４のフローチャートで説明した本実施形態の処理手順は全てソフトウェアによって実行することができる。このため、この処理手順を実行するプログラムを格納したコンピュータ読み取り可能な記憶媒体を通じてこのプログラムを通常のコンピュータにインストールして実行するだけで、本実施形態と同様の効果を容易に実現することができる。
【００９６】
本発明のいくつかの実施形態を説明したが、これらの実施形態は、例として提示したものであり、発明の範囲を限定することは意図していない。これら新規な実施形態は、その他の様々な形態で実施されることが可能であり、発明の要旨を逸脱しない範囲で、種々の省略、置き換え、変更を行うことができる。これら実施形態やその変形は、発明の範囲や要旨に含まれるとともに、特許請求の範囲に記載された発明とその均等の範囲に含まれる。
【符号の説明】
【００９７】
１０…クライアント、１３…ＤＢ、２０２…ブラウザアプリケーション、２１…入力部、２２…ウェブ表示処理部、２３…注釈表示処理部、２４…エレメント決定部、２５…保存処理部、３１…ウェブサーバ、３２…クラウドサーバ、３２Ａ…ＤＢ。
【図１】
2015049592.tif 000003
【図２】
2015049592.tif 000004
【図３】
2015049592.tif 000005
【図４】
2015049592.tif 000006
【図５】
2015049592.tif 000007
【図６】
2015049592.tif 000008
【図７】
2015049592.tif 000009
【図８】
2015049592.tif 000010
【図９】
2015049592.tif 000011
【図１０】
2015049592.tif 000012
【図１１】
2015049592.tif 000013
【図１２】
2015049592.tif 000014
【図１３】
2015049592.tif 000015
【図１４】
2015049592.tif 000016