(57)【要約】【課題】ユーザの直感的な操作で構造化文書の一部をクリップデータとして保存することができる電子機器を実現する。【解決手段】実施形態によれば、電子機器は、表示制御手段と、処理手段とを具備する。前記表示制御手段は、マークアップ言語によって記述される第１構造化文書の内容を画面上に表示する。前記第１構造化文書は複数の要素を含む。前記処理手段は、第１手書きストロークによって指定される前記画面上の第１範囲に応じて前記第１構造化文書の一部分をクリップデータとして保存するための処理を実行する。前記第１構造化文書の前記一部分は前記複数の要素の内の１以上の第１要素を含む。１以上の第１要素は、第１範囲と、画面上に表示される第１構造化文書の画面イメージから得られる前記複数の要素の内容がそれぞれ表示されている画面上の複数の表示位置との照合によって決定される。【選択図】図６
2016085547.tif 000002
【特許請求の範囲】
【請求項１】
マークアップ言語によって記述される第１構造化文書の内容を画面上に表示する表示制御手段であって、前記第１構造化文書は複数の要素を含む、表示制御手段と、
第１手書きストロークによって指定される前記画面上の第１範囲に応じて前記第１構造化文書の一部分をクリップデータとして保存するための処理を実行する処理手段であって、前記第１構造化文書の前記一部分は前記複数の要素の内の１以上の第１要素を含む、処理手段とを具備し、
前記１以上の第１要素は、前記第１範囲と、前記画面上に表示される前記第１構造化文書の画面イメージから得られる前記複数の要素の内容がそれぞれ表示されている前記画面上の複数の表示位置との照合によって決定される、電子機器。
【請求項２】
前記クリップデータは、マークアップ言語によって記述され且つ前記１以上の第１要素を含む第２構造化文書である請求項１記載の電子機器。
【請求項３】
前記複数の要素の内容は、前記複数の要素を描画するための第１スタイル情報に基づいて表示され、
前記第２構造化文書は、前記１以上の第１要素を描画するための第２スタイル情報を含み、前記第２スタイル情報は、前記第１スタイル情報から得られる請求項２記載の電子機器。
【請求項４】
前記画面イメージは、前記画面上に表示されている前記第１構造化文書のスクリーンショットイメージである請求項１記載の電子機器。
【請求項５】
前記処理手段は、
手書きモードにおいて第２手書きストロークが入力された場合、前記第２手書きストロークを前記第１構造化文書の内容上に描画するための処理を実行し、
前記第１構造化文書を画像データとして保存する要求が検出された場合、前記第２手書きストロークが描画された前記第１構造化文書を画像データとして保存し、且つ前記第１構造化文書内のテキストを前記画像データと関連付けて保存するための処理を実行する請求項１記載の電子機器。
【請求項６】
マークアップ言語によって記述される第１構造化文書の内容を画面上に表示することであって、前記第１構造化文書は複数の要素を含む、表示することと、
第１手書きストロークによって指定される前記画面上の第１範囲に応じて前記第１構造化文書の一部分をクリップデータとして保存するための処理を実行することであって、前記第１構造化文書の前記一部分は前記複数の要素の内の１以上の第１要素を含む、処理を実行することとを具備し、
前記１以上の第１要素は、前記第１範囲と、前記画面上に表示される前記第１構造化文書の画面イメージから得られる前記複数の要素の内容がそれぞれ表示されている前記画面上の複数の表示位置との照合によって決定される、方法。
【請求項７】
前記クリップデータは、マークアップ言語によって記述され且つ前記１以上の第１要素を含む第２構造化文書である請求項６記載の方法。
【請求項８】
前記複数の要素の内容は、前記複数の要素を描画するための第１スタイル情報に基づいて表示され、
前記第２構造化文書は、前記１以上の第１要素を描画するための第２スタイル情報を含み、前記第２スタイル情報は、前記第１スタイル情報から得られる請求項７記載の方法。
【請求項９】
前記画面イメージは、前記画面上に表示されている前記第１構造化文書のスクリーンショットイメージである請求項６記載の方法。
【請求項１０】
手書きモードにおいて第２手書きストロークが入力された場合、前記第２手書きストロークを前記第１構造化文書の内容上に描画するための処理を実行することと、
前記第１構造化文書を画像データとして保存する要求が検出された場合、前記第２手書きストロークが描画された前記第１構造化文書を画像データとして保存し、且つ前記第１構造化文書内のテキストを前記画像データと関連付けて保存するための処理を実行することとをさらに具備する請求項６記載の方法。
【請求項１１】
コンピュータによって実行されるプログラムであって、前記プログラムは、
マークアップ言語によって記述される第１構造化文書の内容を画面上に表示する手順であって、前記第１構造化文書は複数の要素を含む、手順と、
第１手書きストロークによって指定される前記画面上の第１範囲に応じて前記第１構造化文書の一部分をクリップデータとして保存するための処理を実行する手順であって、前記第１構造化文書の前記一部分は前記複数の要素の内の１以上の第１要素を含む、手順とを前記コンピュータに実行させ、
前記１以上の第１要素は、前記第１範囲と、前記画面上に表示される前記第１構造化文書の画面イメージから得られる前記複数の要素の内容がそれぞれ表示されている前記画面上の複数の表示位置との照合によって決定される、プログラム。
【請求項１２】
前記クリップデータは、マークアップ言語によって記述され且つ前記１以上の第１要素を含む第２構造化文書である請求項１１記載のプログラム。
【請求項１３】
前記複数の要素の内容は、前記複数の要素を描画するための第１スタイル情報に基づいて表示され、
前記第２構造化文書は、前記１以上の第１要素を描画するための第２スタイル情報を含み、前記第２スタイル情報は、前記第１スタイル情報から得られる請求項１２記載のプログラム。
【請求項１４】
前記画面イメージは、前記画面上に表示されている前記第１構造化文書のスクリーンショットイメージである請求項１１記載のプログラム。
【請求項１５】
手書きモードにおいて第２手書きストロークが入力された場合、前記第２手書きストロークを前記第１構造化文書の内容上に描画するための処理を実行する手順と、
前記第１構造化文書を画像データとして保存する要求が検出された場合、前記第２手書きストロークが描画された前記第１構造化文書を画像データとして保存し、且つ前記第１構造化文書内のテキストを前記画像データと関連付けて保存するための処理を実行する手順とをさらに前記コンピュータに実行させる請求項１１記載のプログラム。
【発明の詳細な説明】
【技術分野】
【０００１】
ここに記載される実施形態は、構造化文書を処理するための技術に関する。
【背景技術】
【０００２】
近年、タブレット、ＰＤＡ、スマートフォンといった種々の電子機器が開発されている。この種の電子機器は、ＨＴＭＬ文書のような構造化文書を閲覧するためのツールとして広く普及している。構造化文書の代表的な例は、Ｗｅｂページである。
【０００３】
また、最近では、クリッピング機能も注目されている。ユーザは、このクリッピング機能を使用することにより、例えばＷｅｂページ内の気になる記事をデータベースに保存することができる。
【先行技術文献】
【特許文献】
【０００４】
【特許文献１】特開２０１０−１５５１５号公報
【発明の概要】
【発明が解決しようとする課題】
【０００５】
しかし、従来では、ユーザの直感的な操作で構造化文書の一部をクリップするための技術については考慮されていないのが現状である。
【０００６】
本発明の一形態の目的は、ユーザの直感的な操作で構造化文書の一部をクリップデータとして保存することができる電子機器および方法を提供することである。
【課題を解決するための手段】
【０００７】
実施形態によれば、電子機器は、表示制御手段と、処理手段とを具備する。前記表示制御手段は、マークアップ言語によって記述される第１構造化文書の内容を画面上に表示する。前記第１構造化文書は複数の要素を含む。前記処理手段は、第１手書きストロークによって指定される前記画面上の第１範囲に応じて前記第１構造化文書の一部分をクリップデータとして保存するための処理を実行する。前記第１構造化文書の前記一部分は前記複数の要素の内の１以上の第１要素を含む。前記１以上の第１要素は、前記第１範囲と、前記画面上に表示される前記第１構造化文書の画面イメージから得られる前記複数の要素の内容がそれぞれ表示されている前記画面上の複数の表示位置との照合によって決定される。
【図面の簡単な説明】
【０００８】
【図１】実施形態に係る電子機器の外観を示す例示的な斜視図。
【図２】図１の電子機器のタッチスクリーンディスプレイ上に手書きされる手書き文書の例を示す図。
【図３】図２の手書き文書に対応する時系列情報を説明するための例示的な図。
【図４】図１の電子機器の構成を示す例示的なブロック図。
【図５】図１の電子機器によって実行されるクリッピング処理を説明するための例示的な図。
【図６】図１の電子機器によって実行されるブラウザアプリケーションプログラムの機能構成を示す例示的なブロック図。
【図７】画面上に表示されるＨＴＭＬ文書の内容と手書きによって指定される選択範囲（クリップ範囲）とを説明するための例示的な図。
【図８】画像処理ベースのレイアウト解析処理の例を説明するための図。
【図９】クリップデータの例を示す図。
【図１０】選択範囲（クリップ範囲）に対応する画像データとＨＴＭＬ文書内のテキストとを一緒に保存する動作を説明するための例示的な図。
【図１１】ＨＴＭＬ文書（ＨＴＭＬソース）とブラウザウィンドウの表示内容との関係の例を説明するための図。
【図１２】図１１のＨＴＭＬソースに対応するＤＯＭオブジェクトを説明するための例示的な図。
【図１３】クリップデータ（ＨＴＭＬファイル）を生成するための処理を説明するための例示的な図。
【図１４】図１の電子機器によって実行されるＨＴＭＬ文書表示処理の手順を示す例示的なフローチャート。
【図１５】図１の電子機器によって生成される第１要素リストの例を示す図。
【図１６】図１の電子機器によって実行される範囲選択処理の手順を示す例示的なフローチャート。
【図１７】図１の電子機器によって生成される第２要素リストの例を示す図。
【図１８】図１の電子機器によって実行されるクリップデータ出力処理の手順を示す例示的なフローチャート。
【発明を実施するための形態】
【０００９】
以下、実施の形態について図面を参照して説明する。  
図１は、一実施形態に係る電子機器の外観を示す斜視図である。この電子機器は、例えば、ペン（スタイラス）または指によって手書き入力可能なペン・ベースの携帯型電子機器である。この電子機器は、タブレットコンピュータ、ノートブック型パーソナルコンピュータ、スマートフォン、ＰＤＡ等として実現され得る。以下では、この電子機器がタブレットコンピュータ１０として実現されている場合を想定する。タブレットコンピュータ１０は、タブレットまたはスレートコンピュータとも称される携帯型電子機器である。このタブレットコンピュータ１０は、例えば、Ｗｅｂブラウジング、電子メール、ソーシャルネットワークサービス（ＳＮＳ）、等を活用するための端末として機能し得る。タブレットコンピュータ１０は、図１に示すように、本体１１とタッチスクリーンディスプレイ１７とを備える。本体１１は、薄い箱形の筐体を有している。タッチスクリーンディスプレイ１７は、本体１１の上面に重ね合わさるように取り付けられている。
【００１０】
タッチスクリーンディスプレイ１７には、フラットパネルディスプレイと、センサとが組み込まれている。センサは、ペンまたは指とフラットパネルディスプレイの画面との間の接触位置を検出する。フラットパネルディスプレイは、例えば、液晶表示装置（ＬＣＤ）であってもよい。センサとしては、例えば、静電容量方式のタッチパネル、電磁誘導方式のデジタイザなどを使用することができる。以下では、限定されないが、デジタイザとタッチパネルの２種類のセンサの双方がタッチスクリーンディスプレイ１７に組み込まれている場合を想定する。
【００１１】
デジタイザは、例えば、フラットパネルディスプレイの画面の下側に配置される。タッチパネルは、例えば、フラットパネルディスプレイの画面上に配置される。このタッチスクリーンディスプレイ１７は、指を使用した画面に対するタッチ操作のみならず、ペン１００を使用した画面に対するタッチ操作も検出することができる。ペン１００の例には、デジタイザペン（電磁誘導ペン）、アクティブペン、パッシブペン等が含まれる。
【００１２】
ユーザは、外部オブジェクト（ペン１００又は指）を使用して、タッチスクリーンディスプレイ１７上で手書き入力操作を行うことができる。本実施形態では、タブレットコンピュータ１０にインストールされている幾つかのアプリケーションプログラムは手書き入力の機能をサポートしている。例えば、タブレットコンピュータ１０にインストールされているウェブブラウザアプリケーションプログラム（Ｗｅｂブラウザ）は、ペン１００によって手書きストロークを表示中のＷｅｂページ上に描画することができる。
【００１３】
手書き入力操作中においては、画面上のペン１００の動きの軌跡、つまりストローク（手書きストローク）がリアルタイムに描画される。ペン１００が画面に接触されている間のペン１００の動きの軌跡が１ストロークに相当する。
【００１４】
本実施形態では、手書きされたストロークは、イメージデータではなく、各ストロークの軌跡の座標列とストローク間の順序関係とを示す時系列情報として記憶媒体に保存される。この時系列情報の詳細は図３を参照して後述するが、この時系列情報は、複数のストロークにそれぞれ対応する複数のストロークデータを含む。各ストロークデータは、ある一つのストロークに対応し、このストローク上の点それぞれに対応する座標データ系列（時系列座標）を含む。これらストロークデータの並びの順序は、ストロークそれぞれが手書きされた順序つまり筆順に相当する。
【００１５】
次に、図２および図３を参照して、ユーザによって手書きされたストロークと時系列情報との関係について説明する。
【００１６】
図２は、ペン１００などを使用してタッチスクリーンディスプレイ１７上に手書きされる手書き文字列の例を示している。
【００１７】
タブレットコンピュータ１０は、ペン１００によってＷｅｂページ、プレゼンテーション文書、画像、他の様々な電子文書上にストロークを描画することができる。したがって、例えば、ユーザは、アノテーション等をＷｅｂページに自由に手書きすることができる。
【００１８】
図２においては、「ＡＢＣ」の手書き文字列が「Ａ」、「Ｂ」、「Ｃ」の順番で手書きされ、この後に、手書きの矢印が、手書き文字「Ａ」のすぐ近くに手書きされた場合が想定されている。
【００１９】
手書き文字「Ａ」は、ペン１００などを使用して手書きされる２つのストローク（「∧」形状のストローク、「−」形状のストローク）によって表現される。最初に手書きされる「∧」形状のストロークは例えば等時間間隔でリアルタイムにサンプリングされ、これによって「∧」形状のストロークの時系列座標ＳＤ１１、ＳＤ１２、…ＳＤ１ｎが得られる。同様に、次に手書きされる「−」形状のストロークも等時間間隔でリアルタイムにサンプリングされ、これによって「−」形状のストロークの時系列座標ＳＤ２１、ＳＤ２２、…ＳＤ２ｎが得られる。
【００２０】
手書き文字「Ｂ」は、ペン１００などを使用して手書きされた２つのストロークによって表現される。手書き文字「Ｃ」は、ペン１００などを使用して手書きされた１つのストロークによって表現される。手書きの「矢印」は、ペン１００などを使用して手書きされた２つのストロークによって表現される。
【００２１】
図３は、図２の手書き文字列に対応する時系列情報２００を示している。時系列情報２００は、複数のストロークデータＳＤ１、ＳＤ２、…、ＳＤ７を含む。時系列情報２００内においては、これらストロークデータＳＤ１、ＳＤ２、…、ＳＤ７は、筆跡順に、つまり複数のストロークが手書きされた順に時系列に並べられている。
【００２２】
時系列情報２００において、先頭の２つのストロークデータＳＤ１、ＳＤ２は、手書き文字「Ａ」の２つのストロークをそれぞれ示している。３番目と４番目のストロークデータＳＤ３、ＳＤ４は、手書き文字「Ｂ」を構成する２つのストロークをそれぞれ示している。５番目のストロークデータＳＤ５は、手書き文字「Ｃ」を構成する１つのストロークを示している。６番目と７番目のストロークデータＳＤ６、ＳＤ７は、手書き「矢印」を構成する２つのストロークをそれぞれ示している。
【００２３】
各ストロークデータは、一つのストローク上の複数の点それぞれに対応する複数の座標を含む。各ストロークデータにおいては、複数の座標はストロークが書かれた順に時系列に並べられている。例えば、手書き文字「Ａ」に関しては、ストロークデータＳＤ１は、手書き文字「Ａ」の「∧」形状のストローク上の点それぞれに対応する座標データ系列（時系列座標）、つまりｎ個の座標データＳＤ１１、ＳＤ１２、…ＳＤ１ｎを含む。ストロークデータＳＤ２は、手書き文字「Ａ」の「−」形状のストローク上の点それぞれに対応する座標データ系列、つまりｎ個の座標データＳＤ２１、ＳＤ２２、…ＳＤ２ｎを含む。なお、座標データの数はストロークデータ毎に異なっていてもよい。
【００２４】
各座標データは、対応するストローク上のある１点に対応するＸ座標およびＹ座標を示す。例えば、座標データＳＤ１１は、「∧」形状のストロークの始点のＸ座標（Ｘ１１）およびＹ座標（Ｙ１１）を示す。ＳＤ１ｎは、「∧」形状のストロークの終点のＸ座標（Ｘ１ｎ）およびＹ座標（Ｙ１ｎ）を示す。
【００２５】
さらに、各座標データは、その座標に対応する点が手書きされた時点に対応するタイムスタンプ情報Ｔを含んでいてもよい。手書きされた時点は、絶対時間（例えば、年月日時分秒）またはある時点を基準とした相対時間のいずれであってもよい。例えば、各ストロークデータに、ストロークが書き始められた絶対時間（例えば、年月日時分秒）をタイムスタンプ情報として付加し、さらに、ストロークデータ内の各座標データに、絶対時間との差分を示す相対時間をタイムスタンプ情報Ｔとして付加してもよい。
【００２６】
さらに、各座標データには、筆圧を示す情報（Ｚ）を追加してもよい。
【００２７】
図４は、タブレットコンピュータ１０の構成を示す。  
タブレットコンピュータ１０は、図４に示されるように、ＣＰＵ１０１、システムコントローラ１０２、主メモリ１０３、グラフィクスコントローラ１０４、ＢＩＯＳ−ＲＯＭ１０５、不揮発性メモリ１０６、無線通信デバイス１０７、エンベデッドコントローラ（ＥＣ）１０８等を備える。
【００２８】
ＣＰＵ１０１は、タブレットコンピュータ１０内の様々なコンポーネントの動作を制御するプロセッサである。プロセッサは処理回路を含む。ＣＰＵ１０１は、ストレージデバイスである不揮発性メモリ１０６から主メモリ１０３にロードされる各種コンピュータプログラムを実行する。これらプログラムには、オペレーティングシステム（ＯＳ）２０１、および各種アプリケーションプログラムが含まれている。アプリケーションプログラムには、ブラウザアプリケーションプログラム（Ｗｅｂブラウザ）２０２が含まれている。
【００２９】
ブラウザアプリケーションプログラム２０２は、マークアップ言語で記述された構造化文書の内容を、ブラウザアプリケーションプログラム２０２のブラウザウィンドウに表示することができる。構造化文書の例には、ＨＴＭＬ文書、ＸＭＬ文書等が含まれる。Ｗｅｂページの多くはＨＴＭＬ文書である。以下では、構造化文書がＨＴＭＬ文書である場合を想定する。
【００３０】
ブラウザアプリケーションプログラム２０２は、ＷｅｂサーバからＨＴＭＬ文書を取得する機能、ＨＴＭＬ文書の内容を画面（ブラウザウィンドウ）上に表示する機能、およびクリッピング処理を実行する機能を有する。ブラウザウィンドウは、アドレスバー、ステータスバー、およびコンテンツ表示領域（ビューポート）を含む。コンテンツ表示領域は、ＨＴＭＬ文書の内容、つまりＷｅｂページ、を表示可能な領域である。
【００３１】
クリッピング処理は、現在表示されているＨＴＭＬ文書（Ｗｅｂページ）の一部分をクリップデータ（Ｗｅｂクリップともいう）として記憶媒体に保存する機能である。
【００３２】
ブラウザアプリケーションプログラム２０２は、ペン１００によってストロークを描画可能な手書きエンジンもまた備えている。手書きエンジンは、ペン１００によって、Ｗｅｂページ上にストローク（手書きストローク）を描画することができる。
【００３３】
また、ＣＰＵ１０１は、ＢＩＯＳ−ＲＯＭ１０５に格納された基本入出力システム（ＢＩＯＳ）も実行する。ＢＩＯＳは、ハードウェア制御のためのプログラムである。
【００３４】
システムコントローラ１０２は、ＣＰＵ１０１のローカルバスと各種コンポーネントとの間を接続するデバイスである。システムコントローラ１０２には、主メモリ１０３をアクセス制御するメモリコントローラも内蔵されている。また、システムコントローラ１０２は、ＰＣＩ  ＥＸＰＲＥＳＳ規格のシリアルバスなどを介してグラフィクスコントローラ１０４との通信を実行する機能も有している。
【００３５】
グラフィクスコントローラ１０４は、タブレットコンピュータ１０のディスプレイモニタとして使用されるＬＣＤ１７Ａを制御するグラフィクスプロセッシングユニットである。グラフィクスコントローラ１０４は、表示制御回路を含む。ブラウザアプリケーションプログラム２０２が実行された時、グラフィクスコントローラ１０４は、ブラウザアプリケーションプログラム２０２の制御の下、ＨＴＭＬ文書、画像、ストロークを画面上に表示することができる。このグラフィクスコントローラ１０４によって生成される表示信号はＬＣＤ１７Ａに送られる。ＬＣＤ１７Ａは、表示信号に基づいて画面イメージを表示する。このＬＣＤ１７Ａ上にはタッチパネル１７Ｂが配置されている。グラフィクスコントローラ１０４はＣＰＵ１０１に内蔵されていてもよい。
【００３６】
無線通信デバイス１０７は、無線ＬＡＮまたは３Ｇ移動通信などの無線通信を実行するように構成されたデバイスである。無線通信デバイス１０７は、信号を送信するように構成された送信機、および信号を受信するように構成された受信機を含む。
【００３７】
ＥＣ１０８は、電力管理のためのエンベデッドコントローラを含むワンチップマイクロコンピュータである。ＥＣ１０８は、ユーザによるパワーボタンの操作に応じてタブレットコンピュータ１０を電源オンまたは電源オフする機能を有している。
【００３８】
タブレットコンピュータ１０は、他の入力デバイス（マウス、キーボード等）と通信するため周辺インタフェースも備えていてもよい。
【００３９】
以下、ブラウザアプリケーションプログラム２０２の幾つかの特徴について説明する。
【００４０】
手書きモードにおいては、ブラウザアプリケーションプログラム２０２は、ペン１００によってストロークを描画することができる。ユーザは手書きモードをオンまたはオフすることができる。ブラウザアプリケーションプログラム２０２は、タッチ入力モードもまた有していてもよい。タッチ入力モードにおいてはタッチ（指ジェスチャ）またはマウスによってストロークを描画することができる。タッチ入力モードは、指またはマウスによってストロークを描画するモードである。ユーザはタッチ入力モードをオンまたはオフすることができる。
【００４１】
次に、上述のクリッピング機能の特徴について説明する。
【００４２】
ブラウザアプリケーションプログラム２０２は、手書きストロークによって指定される画面上の選択範囲（クリップ範囲）に応じて、表示されているＨＴＭＬ文書（Ｗｅｂページ）の一部分をクリップデータとして保存するためのクリッピング処理を実行する。
【００４３】
例えば、クリップモードにおいては、手書き入力されるストロークは、Ｗｅｂページ内のクリップ対象範囲を選択するために使用される。手書き入力されるストロークに外接する領域、例えば、このストロークの外接矩形が、選択範囲（クリップ範囲）として使用されてもよい。このクリップ範囲によって指定されるＷｅｂページ内の一部分、つまりＨＴＭＬ文書内の幾つかの要素が、クリップ対象部分となる。
【００４４】
ブラウザアプリケーションプログラム２０２は、複数のペンタイプをサポートする。ペンタイプには、ストロークを描画するための幾つかの描画ペンと、クリップ範囲を指定するためのクリップペンとが含まれていてもよい。ユーザは、画面上に表示されるユーザインタフェースまたはペン１００のサイドボタンを操作することによって、ある描画ペンまたはクリップペンを選択することができる。ある描画ペンが選択された時に、手書きモードが有効になってもよい。クリップペンが選択された時に、クリップモードが有効になってもよい。
【００４５】
ブラウザアプリケーションプログラム２０２は、コピー／カット／ペースト機能をサポートする。これらコピー／カット／ペースト機能はＯＳのクリップボード機能を使用してもよい。クリップボードはアプリケーションプログラム間でデータを交換するための一時記憶領域である。ブラウザアプリケーションプログラム２０２は、以下のコピーを実行することができる。
【００４６】
「イメージとしてコピー」：  ブラウザアプリケーションプログラム２０２は、手書きストロークが描画されたＷｅｂページ全体又はそのＷｅｂページの一部分をイメージ（画像データ）としてクリップボードのような記憶領域にコピー（格納）することができる。イメージはたとえばビットマップである。ブラウザアプリケーションプログラム２０２は、手書きストロークが描画されたＷｅｂページ全体又はその一部分を画像データに変換し、この画像データをクリップボードにコピー（格納）する。
【００４７】
図５は、クリッピング処理を説明するため図である。
【００４８】
ここでは、現在表示されているＷｅｂページからクリップを抽出する場合を想定する。
【００４９】
画面には、テキストと画像とを含むＷｅｂページ２１が表示されている。ユーザは、例えば、ブラウザアプリケーションプログラム２０２を起動することによって、画面上に所望のＨＴＭＬ文書の内容、つまりＷｅｂページ２１を表示させることができる。
【００５０】
ユーザは、Ｗｅｂページ２１のブラウジング中に、Ｗｅｂページ２１内の興味のある部分を保存しておきたいと思う場合がある。その場合、ユーザは、例えばペン１００を用いて、表示中のＷｅｂページ２１内の一部分を指定するためのクリップ操作を行う。
【００５１】
本実施形態では、クリップ操作はペン１００によって行うことができる。
【００５２】
すなわち、クリップモードにおいて、ユーザが興味のある部分を囲む形状のストローク（クリッピングストローク）２２をペン１００によって手書きした時、このクリッピングストロークによってクリップ範囲が決定される。クリップ範囲は、例えば、クリッピングストローク２２を囲む矩形（外接矩形）であってもよい。
【００５３】
ブラウザアプリケーションプログラム２０２は、この決定されたクリップ範囲に基づいて、Ｗｅｂページ２１の一部分に対応するクリップデータ（Ｗｅｂクリップ）２５を抽出する。例えば、Ｗｅｂページ２１に対応するＨＴＭＬ文書内の複数の要素の内、クリップ範囲と重なる１以上の要素がＨＴＭＬ文書から抽出される。クリップデータは、抽出された１以上の要素と、これら要素にそれに付随する画像データ等とによって構成される。
【００５４】
本実施形態では、クリッピングストローク２２によってクリップ範囲を指定することができるので、ユーザは直感的な操作で、Ｗｅｂページ２１内の興味のある部分を容易に指定することができる。
【００５５】
さらに、本実施形態では、ユーザが実際に見ているＷｅｂページ２１のレイアウトにできるだけ近い情報を使用して抽出対象の要素を決定できるようにするために、Ｗｅｂページ２１に対して画像処理ベースのレイアウト解析処理が実行される。
【００５６】
画像処理ベースのレイアウト解析処理では、画面上に表示されているＨＴＭＬ文書の画面イメージが使用される。この画面イメージは、画面上に表示されているＨＴＭＬ文書のスクリーンショットイメージであってもよい。このスクリーンショットイメージは、ブラウザウィンドウ内のコンテンツ表示エリアに表示されているＷｅｂページの内容を表す画面イメージ（画像データ）である。
【００５７】
このスクリーンショットイメージは、上述のクリップペンによってクリッピングストロークが入力されたことに応答してキャプチャされてもよい。例えば、スクリーンショットイメージは、クリッピングストロークの入力開始時点でキャプチャされてもよいし、このクリッピングストロークの入力終了時点でキャプチャされてもよい。
【００５８】
そして、ブラウザアプリケーションプログラム２０２は、このスクリーンショットイメージのレイアウト解析処理を実行する。これにより、ＨＴＭＬ文書内の複数の要素の内容がそれぞれ表示されている画面上の複数の表示位置が求められる。
【００５９】
ブラウザアプリケーションプログラム２０２は、クリップ範囲とこれら表示位置とを照合することによって、ＨＴＭＬ文書から抽出すべき抽出対象要素を決定する。この場合、例えば、ＨＴＭＬ文書内のある要素に対応するコンテントがクリップ範囲と重っているならば、この要素が抽出対象要素に決定されてもよい。もしクリップ範囲が２つのコンテンツの双方に重なっているならば、これら２つのコンテンツに対応する２つの要素が、抽出対象要素に決定されてもよい。
【００６０】
このように、本実施形態では、ユーザが実際に見ているＷｅｂページ２１のレイアウトに非常に近いスクリーンショットイメージのレイアウト解析が行われる。そして、抽出対象要素は、このスクリーンショットイメージのレイアウト解析結果を使用して決定される。よって、ユーザが意図するＷｅｂページ２１内の一部分に対応するＨＴＭＬ文書内の要素を精度良く特定することができる。
【００６１】
スクリーンショットイメージは静止画像である。したがって、たとえペンによってクリップ操作が行われた直後に、スクリプトの実行によってＷｅｂページ２１の内容が動的に変更されたとしても、スクリーンショットイメージは変化されない。よって、表示内容が動的に更新されるＷｅｂページの一部分をクリップする場合であっても、ユーザが意図するＷｅｂページ内の一部分に対応する要素を正確に特定することができる。
【００６２】
ブラウザアプリケーションプログラム２０２は、抽出対象要素を含むクリップ２５を生成する。このクリップ２５は、例えば、ＨＴＭＬ文書として生成されても良い。そして、このクリップ２５と、このクリップ２５の内容に対応するタグ候補（以下、推薦タグとも称する）２６とが表示されてもよい。タグ候補２６はクリップ２５に関連づけるべきタグの候補である。ここで、タグとは、クリップを整理、検索、識別するためにそのクリップに関連づけられる追加の情報である。タグとしては、任意の単語等を使用し得る。
【００６３】
ユーザによってタグ候補２６の一つが選択された時、その選択されたタグはクリップ２５に自動的に関連付けられる。クリップ２５とこのクリップ２５に関連づけられたタグは記憶媒体に保存される。
【００６４】
図６は、ブラウザアプリケーションプログラム２０２の機能構成を示す。
【００６５】
ブラウザアプリケーションプログラム２０２は、ブラウザエンジン３０１、レンダリングエンジン３０２、手書きエンジン３０３、スクリーンキャプチャ部３０４、レイアウト解析部３０５、クリップ対象要素判定部３０６、およびクリップデータ出力部３０７を含む。
【００６６】
ブラウザエンジン３０１は、レンダリングエンジン３０２と共同して、Ｗｅｂサーバ３から、ユーザによって指定されたＵＲＬのＨＴＭＬ文書（ＨＴＭＬファイル）と、このＨＴＭＬ文書に関連付けられている他のリソース、例えば、外部ファイル（カスケーティング・スタイル・シート（ＣＳＳ）ファイル、スクリプト）、画像データ等を取得する。
【００６７】
レンダリングエンジン３０２は、ＨＴＭＬ文書を解析し、ＨＴＭＬ文書の内容を描画するための処理（レンダリング処理）を実行する。レンダリング処理では、レンダリングエンジン３０２は、ＨＴＭＬ文書の解析を開始し、ＨＴＭＬ文書内のＤＩＶやＴＡＢＬＥといった要素の階層構造を木構造に変換する。そして、レンダリングエンジン３０２は、各要素に対応するオブジェクト（ドキュメントオブジェクトモデル（ＤＯＭ）オブジェクト）を管理する。さらに、レンダリングエンジン３０２は、ＣＳＳファイル内のスタイルデータとＳｔｙｌｅ要素内のスタイルデータとを解析し、これによってＨＴＭＬ文書内の複数の要素をそれぞれ描画するためのスタイル情報（描画・レイアウト情報とも云う）を得る。これら要素に対応するコンテンツは、このスタイル情報に基づいて画面上に表示される。スタイル情報は、各要素に対応するコンテントが表示される際の表示スタイル（色、サイズ、レイアウト）を示す。スタイル情報は、各要素に対応するコンテントが表示されるべき描画位置（表示位置）も示す。これにより、ＨＴＭＬ文書の内容が、つまりＨＴＭＬ文書内の複数の要素にそれぞれ対応する複数のコンテンツが、画面上に表示される。
【００６８】
手書きエンジン３０３は、ペン１００によって手書きストロークをＷｅｂページ上に描画する。なお、クリップモードにおいては、ペン１００によって入力される手書きストロークは、クリップ範囲を指定するためのストローク（クリッピングストローク）として使用される。
【００６９】
スクリーンキャプチャ部３０４は、画面上に表示されているＨＴＭＬ文書の画面イメージをこの表示されているＨＴＭＬ文書の文書画像としてキャプチャする。この画面イメージは、表示中のＷｅｂページのスクリーンショットイメージである。このスクリーンショットイメージはビットマップであってもよい。スクリーンキャプチャ部３０４自体がスクリーンショットイメージを生成する機能が有していてもよい。
【００７０】
レイアウト解析部３０５は、Ｗｅｂページのスクリーンショットイメージを使用して、Ｗｅｂページを構成しているコンテンツの空間的配置に関する構造を検出するレイアウト解析処理を実行する。レイアウト解析処理では、レイアウト解析部３０５は、テキスト、画像、図形のようなコンテンツが存在する領域（ブロック）と、それ以外の下地とを判別する。そして、レイアウト解析部３０５は、このスクリーンショットイメージ上におけるコンテンツそれぞれの表示位置、つまりＨＴＭＬ文書内の複数の要素の内容がそれぞれ表示されている画面上の複数の表示位置、を検出する。
【００７１】
クリップ対象要素判定部３０６は、クリップ範囲と、これら複数の表示位置とを照合する。この照合によって、クリップ対象要素判定部３０６は、ＨＴＭＬ文書から抽出すべき１以上の抽出対象要素を決定する。
【００７２】
クリップデータ出力部３０７は、１以上の抽出対象要素を含むクリップデータを生成し、このクリップデータをローカルデータベース５０に保存する。あるいは、このクリップデータは、クラウドサーバ４のデータベース４Ａに保存されてもよい。
【００７３】
クリップデータは、抽出対象要素を含むＨＴＭＬ文書（ＨＴＭＬファイル）であってもよい。この場合、クリップデータ出力部３０７は、元のＨＴＭＬ文書から抽出対象要素を取り出し、この抽出対象要素を、新たなＨＴＭＬ文書内のボディー要素内に挿入する。さらに、クリップデータ出力部３０７は、抽出対象要素に対応するＤＯＭオブジェクトから、抽出対象要素を描画するためのスタイル情報（元のＨＴＭＬ文書に対応するスタイ情報内の一部分）を抽出する。そして、クリップデータ出力部３０７は、この抽出したスタイル情報を新たなＨＴＭＬ文書内のボディー要素内に挿入する。
【００７４】
図７は、タッチスクリーンディスプレイ１７の画面上に表示されるＷｅｂページと手書きストロークによって指定されるクリップ範囲とを示す。
【００７５】
このＷｅｂページにおいては、ＨＴＭＬ文書の内容、つまりＨＴＭＬ文書内の３つの要素に対応する３つのコンテンツ３１〜３３が表示されている。いま、ペン１００によって丸形状のクリッピングストローク（フリーハンド枠）４０１が画面上に描画された場合を想定する。この場合、クリップ対象要素判定部３０６は、図７に示すように、クリッピングストローク４０１に外接する矩形４０２（ｔｏｐ、ｌｅｆｔ、ｗｉｄｔｈ、ｈｅｉｇｈｔ）をクリップ範囲として決定する。
【００７６】
クリップ範囲（矩形４０２）のｔｏｐ、ｌｅｆｔは、物理画面の原点（物理画面の左上コーナ）に対する相対値であってもよい。矩形４０２のｔｏｐは、物理画面であるディスプレイ１７の画面の上端から矩形４０２の上端までの距離（つまり、矩形４０２の左上コーナのＹ座標）を示す。矩形４０２のｌｅｆｔは、ディスプレイ１７の画面の左端から矩形４０２の左端までの距離（つまり、矩形４０２の左上コーナのＸ座標）を示す。
【００７７】
図７では、クリッピングストローク４０１が実線で示されているが、クリッピングストローク４０１は、例えば、破線で一時的に表示され、クリップ範囲の決定後に自動的に画面から消えてもよい。
【００７８】
図８は、図７のＷｅｂページのスクリーンショットイメージである。
【００７９】
このスクリーンショットイメージ５００は、ブラウザウィンドウのコンテンツ表示領域に対応する文書画像である。
【００８０】
レイアウト解析部３０５は、Ｗｅｂページのスクリーンショットイメージ（文書画像）５００のレイアウト解析を実行する。このレイアウト解析では、レイアウト解析部３０５は、スクリーンショットイメージ（文書画像）５００を構成するコンテンツ（ブロック）の空間的配置に関するレイアウト構造を認識し、コンテンツ３１〜３３に対応するブロック５０１〜５０３それぞれの表示位置（ｔｏｐ、ｌｅｆｔ、ｗｉｄｔｈ、ｈｅｉｇｈｔ）を算出する。
【００８１】
ブロック５０１はコンテント３１に外接する矩形である。ブロック５０２はコンテント３２に外接する矩形である。ブロック５０３はコンテント３３に外接する矩形である。
【００８２】
例えば、ブロック５０１において、ｔｏｐはスクリーンショットイメージ（文書画像）５００の上端からブロック５０１の上端までの距離（つまり、ブロック５０１の左上コーナのＹ座標）を示す。ブロック５０１において、ｌｅｆｔは、スクリーンショットイメージ（文書画像）５００の左端からブロック５０１の左端までの距離（つまり、ブロック５０１の左上コーナのＸ座標）を示す。
【００８３】
そして、クリップ範囲（矩形４０２）の位置は、コンテンツ３１〜３３に対応するブロック５０１〜５０３それぞれの表示位置と比較される。この場合、クリップ範囲（矩形４０２）のｔｏｐおよびｌｅｆｔの各値は文書画像上のｔｏｐ、ｌｅｆｔ座標系に対応する値に換算される。そして、換算された矩形４０２の位置が、ブロック５０１〜５０３それぞれの表示位置と比較される。
【００８４】
クリップ範囲（矩形４０２）はコンテント３１に対応するブロック５０１に重なっている。したがって、ＨＴＭＬ文書から、コンテント３１に対応する要素が抽出対象要素（クリップ対象要素）として選択される。この結果、図９に示すように、クリップ対象要素を含むクリップデータが生成され、このクリップデータが記憶媒体に保存される。このクリップデータは、上述したように、クリップ対象要素を含むＨＴＭＬ文書（ＨＴＭＬファイル）あるいはクリップ対象要素を含むＸＭＬ文書（ＸＭＬファイル）であってもよい。
【００８５】
ＨＴＭＬソースによっては、コンテント３２が、テキスト領域とその外周の広い透明領域（例えば、透明のｂｏｒｄｅｒ）とを有するような場合もあり得る。この場合、矩形４０２の下部が、コンテント３２の透明領域に重なる可能性もある。
【００８６】
しかし、上述の画像処理ベースのレイアウト解析処理では、コンテント３２に対応するブロック５０２のｔｏｐ、ｌｅｆｔ、ｗｉｄｔｈ、ｈｅｉｇｈｔの値は、テキスト、図形、画像のような可視領域に基づいて算出することができる。このため、たとえ矩形４０２の下部がコンテント３２の外周の透明領域に重なっても、コンテント３２が選択されることはない。したがって、ＨＴＭＬソースの記述方法に依存せずに、ユーザが見ているページレイアウトと同様のコンテンツレイアウトに基づく精度の高い要素選択が可能となる。
【００８７】
ブラウザアプリケーションプログラム２０２は、クリップ範囲（矩形４０２）が重なるコンテンツ３１に対応する画像データを生成し、この画像データをクリップデータとして保存することもできる。
【００８８】
図１０は、クリップ範囲に対応するＨＴＭＬファイルを保存する代わりに、クリップ範囲に対応する画像データをクリップデータとして保存する動作を示す。
【００８９】
図１０においては、Ｗｅｂページに既に手書きアノテーションが描画されている場合が想定されている。手書きアノテーションは、手書き矢印に対応する筆跡（ストローク列）６０１と、手書き文字「ｉｍｐｏｒｔａｎｔ」に対応する筆跡（ストローク列）６０２とを含む。これら筆跡は、コンテンツ３１上に書かれている。
【００９０】
もしコンテント３１を含む領域がクリップ範囲として選択されたならば、筆跡６０１および筆跡６０２が書かれたコンテント３１に対応する画像データがクリップデータとして保存される。しかし、この場合には、このクリップデータを後で文字認識するというユースケースにおいては、筆跡の下のテキスト部分を正常に認識できないという不具合が生じる可能性がある。
【００９１】
したがって、本実施形態では、筆跡６０１および筆跡６０２を含むコンテンツ３１に対応する画像データをクリップデータとして保存するための処理と同時に、コンテンツ３１に対応するＨＴＭＬ文書内のテキストをこのクリップデータと関連付けて保存するための処理も実行される。
【００９２】
なお、Ｗｅｂページの保存要求に応答して、表示されているＷｅｂページ全体を画像データとして保存しても良い。この場合にも、筆跡６０１および筆跡６０２が書かれたＷｅｂページ（ＨＴＭＬ文書の表示内容）を画像データとして保存するための処理と同時に、ＨＴＭＬ文書内の全てのテキストをクリップデータと関連付けて保存するための処理が実行される。
【００９３】
次に、図１１〜図１３を参照して、クリッピング処理の具体例を説明する。
【００９４】
図１１の右部は、あるＨＴＭＬ文書（ＨＴＭＬソース）の先頭の一部分を示している。右矢印の記号は展開可能な要素であることを示し、下矢印の記号は展開済みの要素であることを示している。
【００９５】
図１１の左部は、画面上に表示されるＨＴＭＬ文書（ＨＴＭＬソース）の内容、つまりＷｅｂページを示している。
【００９６】
ここでは、レイアウト解析によってＷｅｂページ内のコンテント（ブロック）６０１がクリップ範囲に属するコンテントとして決定された場合を想定する。このコンテント（ブロック）６０１に対応する要素は、ＨＴＭＬソース内のｉｄ＝“ｔｏｐｉｃｓｂｏｘｂｄ”のｄｉｖ要素である。
【００９７】
図１２は、図１１のＨＴＭＬソースと外部ＣＳＳファイル等から生成されるＤＯＭオブジェクト（ＤＯＭツリー）の例を示している。ＤＯＭツリーの各ＤＯＭオブジェクトは、対応する要素を描画するための上述のスタイル情報を保持している。ＨＴＭＬソース内の各要素に対応するコンテントは、対応するスタイル情報に基づく表示スタイル（色、サイズ、レイアウト）で表示される。
【００９８】
ｉｄ＝“ｔｏｐｉｃｓｂｏｘｂｄ”のｄｉｖ要素に対応するＤＯＭオブジェクトは、図１２に示されているように、このｄｉｖ要素に対応するスタイル情報６０２を保持している。このスタイル情報６０２は、図１１のコンテント６０１の描画のために使用された情報である。
【００９９】
図１３は、コンテント６０１に対応するクリップデータ（ＨＴＭＬファイル）を生成するための処理を示す。
【０１００】
クリップデータ出力部３０７は、ｉｄ＝“ｔｏｐｉｃｓｂｏｘｂｄ”のｄｉｖ要素を図１１のＨＴＭＬソースから取り出す。クリップデータ出力部３０７は、スタイル情報６０２（描画・レイアウト情報）も、ｉｄ＝“ｔｏｐｉｃｓｂｏｘｂｄ”のｄｉｖ要素に対応するＤＯＭオブジェクトから取り出す。
【０１０１】
そして、クリップデータ出力部３０７は、新たなＨＴＭＬファイルのボディーに、ｉｄ＝“ｔｏｐｉｃｓｂｏｘｂｄ”のｄｉｖ要素を埋め込む。さらに、クリップデータ出力部３０７は、ｉｄ＝“ｔｏｐｉｃｓｂｏｘｂｄ”のｄｉｖ要素の中に、スタイル情報（描画・レイアウト情報）６０２をスタイル属性（ｓｔｙｌｅ＝“”）として埋め込む。これにより、図１３の下部に下線で示されているように、ｄｉｖ要素にスタイル属性（ｓｔｙｌｅ＝“”）に関する多数の値が追加される。
【０１０２】
この結果、ブラウザアプリケーションプログラム２０２が新たなＨＴＭＬファイルをロードした時は、コンテント６０１をオリジナルのレイアウトと同じレイアウトで表示することができる。
【０１０３】
なお、新たなＨＴＭＬファイルに対応するＷｅｂページにおいては、コンテント６０１はコンテンツ表示領域内の先頭位置に表示されれば良い。したがって、取り出したスタイル情報６０２内のｔｏｐ、ｌｅｆｔの値は、ｉｄ＝“ｔｏｐｉｃｓｂｏｘｂｄ”のｄｉｖ要素の中に埋め込まなくてもよい。
【０１０４】
図１４のフローチャートは、ＨＴＭＬ文書の内容を表示するための処理の手順を示す。
【０１０５】
ＣＰＵ１０１は、ブラウザアプリケーションプログラム２０２を実行することによって、以下の処理を行う。
【０１０６】
ＣＰＵ１０１は、指定ＵＲＬのＨＴＭＬ文書（ＨＴＭＬソース）をダウンロードする（ステップＳ１１）。ＣＰＵ１０１は、ＨＴＭＬ文書の解析を開始する（ステップＳ１２）。ステップＳ１２では、ＣＰＵ１０１は、外部ＣＳＳファイルや外部スクリプトのダウンロードおよび解析も実行する。
【０１０７】
ＣＰＵ１０１は、ＨＴＭＬ文書のパージング結果とＣＳＳファイルの解析結果に基づいて、ＤＯＭツリーを構築する（ステップＳ１３）。ステップＳ１３では、ＣＰＵ１０１は、ＨＴＭＬ文書内の各要素の表示位置（ｔｏｐ、ｌｅｆｔ、ｗｉｄｔｈ、ｈｅｉｇｈｔ）と、各要素のスタイル（フォントサイズ、色、等）とを決定する。各要素の表示位置およびスタイルはＤＯＭツリー内の対応するオブジェクトに保持される。さらに、ＣＰＵ１０１は、図１５に示すようなリスト（Ｌｉｓｔ１）を生成しても良い。Ｌｉｓｔ１は、ユーザが切り取るのに適切な大きさ・まとまりを各々が有する要素のリストである。Ｌｉｓｔ１においては、各要素は、その表示位置を保持していてもよい。
【０１０８】
そして、ＣＰＵ１０１は、ＤＯＭツリーに基づき、ＨＴＭＬ文書の内容、つまりＨＴＭＬ文書の各要素に対応するコンテントを、画面上に表示する（ステップＳ１４）。
【０１０９】
図１６のフローチャートは、クリップ範囲に対応するクリップ対象要素を選択するための処理の手順を示す。
【０１１０】
ＣＰＵ１０１は、画面上の特定のコンテントを囲むように丸形状のストロークを描くジェスチャを検出する（ステップＳ２１）。このＣＰＵ１０１は、このストロークを囲む領域、例えばこのストロークの外接矩形（Ｒｅｃｔ０）、を選択範囲（クリップ範囲）に決定する（ステップＳ２２）。ＣＰＵ１０１は、画面に表示されているＨＴＭＬ文書のスクリーンショットイメージを、表示中のＷｅｂページの文書画像として取得する（ステップＳ２３）。
【０１１１】
ＣＰＵ１０１は、ＨＴＭＬ文書のスクリーンショットイメージのレイアウト解析を開始する（ステップＳ２４）。ステップＳ２４では、ユーザが切り取るのに適切な大きさ・まとまりを有するブロック（コンテント）単位で、スクリーンショットイメージ上のブロック（コンテンツ）の各々の表示位置（ｔｏｐ、ｌｅｆｔ、ｗｉｄｔｈ、ｈｅｉｇｈｔ）が算出される（ステップＳ２４）。さらに、図１７に示すように、スクリーンショットイメージ上のコンテンツのリスト（Ｌｉｓｔ２）が生成されてもよい。Ｌｉｓｔ２においては、各コンテントは、その表示位置を保持していてもよい。
【０１１２】
ＣＰＵ１０１は、クリップ範囲（Ｒｅｃｔ０）の位置と、各コンテントの表示位置（ｔｏｐ、ｌｅｆｔ、ｗｉｄｔｈ、ｈｅｉｇｈｔ）とを照合することによって、クリップ範囲（Ｒｅｃｔ０）に対応するコンテントを特定する（ステップＳ２５）。このステップＳ２５では、ＣＰＵ１０１は、Ｒｅｃｔ０の位置を、Ｌｉｓｔ２内のコンテンツそれぞれの表示位置と比較してもよい。Ｒｅｃｔ０が重なるコンテントが、Ｒｅｃｔ０に対応するコンテントとして特定される。ＣＰＵ１０１は、Ｒｅｃｔ０が重なる面積が基準面積以上のコンテントのみをＲｅｃｔ０に対応するコンテントとして特定してもよい。これにより、ユーザの意図しないコンテントまでが、Ｒｅｃｔ０に対応するコンテントとして特定されてしまうことを防ぐことができる。
【０１１３】
ＣＰＵ１０１は、特定されたコンテントに対応する要素（特定されたコンテントに対応するＤＯＭオブジェクト）を選択する（ステップＳ２６）。ステップＳ２６では、ＣＰＵ１０１は、Ｌｉｓｔ２とＬｉｓｔ１とを照合して、特定されたコンテントに対応する要素（特定されたコンテントに対応するＤＯＭオブジェクト）を特定してもよい。この場合、特定されたコンテントの表示位置（ｔｏｐ、ｌｅｆｔ、ｗｉｄｔｈ、ｈｅｉｇｈｔ）と類似する表示位置（ｔｏｐ、ｌｅｆｔ、ｗｉｄｔｈ、ｈｅｉｇｈｔ）を持つＬｉｓｔ１内の要素が、特定されたコンテントに対応するＤＯＭオブジェクトとして選択されてもよい。
【０１１４】
あるいは、ＣＰＵ１０１は、特定されたコンテントに対応するＤＯＭオブジェクトを特定するために、特定されたコンテント内の認識されたテキストを含む要素を求めてＤＯＭツリーを検索してもよい。
【０１１５】
図１８のフローチャートは、クリップデータ（Ｗｅｂクリップ）を出力するための処理の手順を示す。
【０１１６】
ＣＰＵ１０１は、選択されたＤＯＭオブジェクトに基づいて、特定されたコンテントに対応するＨＴＭＬ文書内の要素を特定する（ステップＳ３１）。ステップＳ３１では、選択されたＤＯＭオブジェクトに対応するＨＴＭＬ文書（ＨＴＭＬソース）内の位置が特定され、その位置に記述されている要素が、特定されたコンテントに対応するＨＴＭＬ文書内の要素として特定される。
【０１１７】
ＣＰＵ１０１は、特定されたコンテントに対応する要素の要素記述部分をＨＴＭＬ文書から取り出し、この要素記述部分に、選択されたＤＯＭオブジェクトのスタイル情報（描画・スタイル情報）を反映する（ステップＳ３２）。より詳しくは、ステップＳ３２では、ＣＰＵ１０１は、新たなＨＴＭＬファイルのボディー要素に、この要素記述部分を埋め込む。さらに、ＣＰＵ１０１は、この埋め込んだ要素記述部分に、選択されたＤＯＭオブジェクトのスタイル情報（描画・スタイル情報）を、スタイル属性（ｓｔｙｌｅ＝“”）として埋め込む。
【０１１８】
ＣＰＵ１０１は、新たなＨＴＭＬファイルをクリップデータとして保存する（ステップＳ３３）。ステップＳ３３では、クリップデータとして保存されるＨＴＭＬファイルにおいては、要素に対応するスタイル情報が既に含まれている。ブラウザアプリケーションプログラム２０２がこのＨＴＭＬファイルをロードした時は、この要素に対応するコンテントを元のスタイルと同じスタイルで表示することができる。
【０１１９】
なお、図１７、図１８では、特定されたコンテントからＤＯＭオブジェクトを選択し、このＤＯＭオブジェクトからＨＴＭＬ文書内の要素を特定するという手順を実行する場合を説明したが、特定されたコンテントから直接的にＨＴＭＬ文書内の要素を特定してもよい。この場合、ＣＰＵ１０１は、特定されたコンテント内の認識されたテキストを含む要素を求めてＨＴＭＬ文書を検索してもよい。
【０１２０】
以上説明したように、本実施形態においては、複数の要素を含むＨＴＭＬ文書の内容が画面上に表示される。そして、手書きストローク（クリッピングストローク）によって指定される画面上のクリップ範囲に応じて、ＨＴＭＬ文書の一部分をクリップデータとして保存するための処理が実行される。ＨＴＭＬ文書の一部分は、上述の複数の要素内の１以上の第１要素を含む。この１以上の第１要素（抽出対象要素）は、クリップ範囲と、画面上に表示されるＨＴＭＬ文書の画面イメージから得られる、複数の要素の内容がそれぞれ表示されている画面上の複数の表示位置との照合によって決定される。このように、抽出対象要素は、ユーザが実際に見ているＷｅｂページのレイアウトに非常に近いレイアウトを有する画面イメージを使用して決定される。よって、ユーザが意図する部分に対応する要素を精度良く特定することができる。
【０１２１】
したがって、ユーザはＷｅｂページ内の興味のある部分にストロークを手書きするだけで、ユーザが意図する部分に対応する要素を含むクリップデータを容易に作成することができる。
【０１２２】
なお、本実施形態に記載された様々な機能の各々は、処理回路によって実現されてもよい。処理回路の例には、中央処理装置（ＣＰＵ）のような、プログラムされたプロセッサが含まれる。このプロセッサは、メモリに格納されたコンピュータプログラム（命令群）を実行することによって、記載された機能それぞれを実行する。このプロセッサは、電気回路を含むマイクロプロセッサであってもよい。処理回路の例には、デジタル信号プロセッサ（ＤＳＰ）、特定用途向け集積回路（ＡＳＩＣ）、マイクロコントローラ、コントローラ、他の電気回路部品も含まれる。本実施形態に記載されたＣＰＵ以外の他のコンポーネントの各々もまた処理回路によって実現されてもよい。
【０１２３】
また、本実施形態の各種処理はコンピュータプログラムによって実現することができるので、このコンピュータプログラムを格納したコンピュータ読み取り可能な記憶媒体を通じてこのコンピュータプログラムをコンピュータにインストールして実行するだけで、本実施形態と同様の効果を容易に実現することができる。
【０１２４】
また、本実施形態では、タブレットコンピュータを使用する場合を例示して説明したが、本実施形態の各機能は、通常のデスクトップパーソナルコンピュータに適用することもできる。この場合、手書き入力のための入力デバイスであるタブレット等をデスクトップパーソナルコンピュータに接続すれば良い。
【０１２５】
本発明のいくつかの実施形態を説明したが、これらの実施形態は、例として提示したものであり、発明の範囲を限定することは意図していない。これら新規な実施形態は、その他の様々な形態で実施されることが可能であり、発明の要旨を逸脱しない範囲で、種々の省略、置き換え、変更を行うことができる。これら実施形態やその変形は、発明の範囲や要旨に含まれるとともに、特許請求の範囲に記載された発明とその均等の範囲に含まれる。
【符号の説明】
【０１２６】
１０…タブレットコンピュータ、３０１…ブラウザエンジン、３０２…レンダリングエンジン、３０３…手書きエンジン、３０４…スクリーンキャプチャ部、３０５…レイアウト解析部、３０６…クリップ対象要素判定部、３０７…クリップデータ出力部、４０１…クリッピングストローク（フリーハンド枠）
【図１】
2016085547.tif 000003
【図２】
2016085547.tif 000004
【図３】
2016085547.tif 000005
【図４】
2016085547.tif 000006
【図５】
2016085547.tif 000007
【図６】
2016085547.tif 000008
【図７】
2016085547.tif 000009
【図８】
2016085547.tif 000010
【図９】
2016085547.tif 000011
【図１０】
2016085547.tif 000012
【図１１】
2016085547.tif 000013
【図１２】
2016085547.tif 000014
【図１３】
2016085547.tif 000015
【図１４】
2016085547.tif 000016
【図１５】
2016085547.tif 000017
【図１６】
2016085547.tif 000018
【図１７】
2016085547.tif 000019
【図１８】
2016085547.tif 000020