JP2014520342A

JP2014520342A - 実行ページの動的更新

Info

Publication number: JP2014520342A
Application number: JP2014516993A
Authority: JP
Inventors: ファニング，マイケル・シー; ホール，マシュー; リンスコット，ゲイリー; トヴォルン，エフゲニー
Original assignee: Microsoft Corp
Current assignee: Microsoft Corp
Priority date: 2011-06-23
Filing date: 2012-06-06
Publication date: 2014-08-21
Anticipated expiration: 2032-06-06
Also published as: KR20140048139A; US20120331375A1; JP5941540B2; US10534830B2; WO2012177394A3; WO2012177394A2; CN103635897A; EP2724258A2; CN103635897B; EP2724258A4; KR101961970B1

Abstract

方法は、文書ノード・ツリーが、当該文書ノード・ツリーの各ノードに対応するテキスト・ソース文書内にあるテキストの位置を示すテキスト・オフセットを含むように、文書ノード・ツリーを構築するためにテキスト・ソース文書を解析するステップを含む。本方法は、文書ノード・ツリーから、文書オブジェクト・モデル（ＤＯＭ）と、このＤＯＭを表すビュー・ノード・ツリーとを構築するステップを含む。ビュー・ノード・ツリーの構築は、ビュー・ノード・ツリーを文書ノード・ツリーにマッピングすることを含む。本方法は、ＤＯＭの実行表現を供給するステップと、第１変更情報を提供するためにＤＯＭに対する修正を追跡するステップ、または第２変更情報を提供するためにテキスト・ソース文書に対する修正を追跡するステップの内１つとを含む。
【選択図】図３

Description

[0001] ウェブ開発ツールは、開発者がハイパーテキスト・マークアップ言語（ＨＴＭＬ）およびカスケーディング・スタイル・シート（ＣＳＳ：Cascading Style Sheets）問題を診断することを可能にする。開発者は、ＳＣＣセレクタを含む文書オブジェクト・モデル（ＤＯＭ）エレメントを動的に修正し(modify)、ブラウザーにおいて実行中のページにおいて直ちに反映される変化(change)を見ることができる。しかしながら、そのページが発生した元になるマークアップ・テキスト・ソース文書に修正を永続的に適用するためには、開発者は、マークアップ・テキストを突き止めてしかるべく修正するか、所望の変更に関連付けられた元のJavaScriptを突き止めてしかるべく修正する必要がある。とは言え、所望の修正に関連付けられたソース・コード・テキストを突き止めるのは難しい場合がある。これは、関連付けられたソース・コード・テキストが直ちに明確にならないこともあるからであり、または開発者に馴染みのないコードにおいてソース・コード・テキストが発生することもあるからである。加えて、一旦所望の修正に関連するソース・コード・テキストを突き止めても、修正を適用しブラウザーにおいてこの修正の結果を実際に見るためには、様々な段階を踏まなければならない場合がある。

[0002] この摘要は、詳細な説明において以下で更に説明する概念から選択したものを、簡略化した形態で紹介するために設けられている。この摘要は、特許請求する主題の主要な特徴または必須な特徴を特定することを意図するのではなく、特許請求する主題の範囲を限定するために使用されることを意図するのでもない。

[0003] 一実施形態では、文書ノード・ツリーを構築するためにテキスト・ソース文書を解析するステップを含む方法を提供する。文書ノード・ツリーは、その文書ノート・ツリーの各ノードに対応する、テキスト・ソース文書内におけるテキストの位置を示すテキスト・オフセットを含むように構築される。本方法は、この文書ノード・ツリーから、文書オブジェクト・モデル（ＤＯＭ）、およびこのＤＯＭを表すビュー・ノード・ツリーを構築するステップを含む。ビュー・ノード・ツリーを構築するステップは、ビュー・ノード・ツリーを文書ノード・ツリーにマッピングするステップを含む。本方法は、ＤＯＭの実行表現(running representation)を示すステップと、ＤＯＭに対する修正を追跡して第１変化情報を提供するステップおよびテキスト・ソース文書に対する修正を追跡して第２変化情報を提供するステップの内１つとを含む。

[0004] 添付図面は、実施形態の一層深い理解が得られるようにするために含まれているのであり、本明細書に組み込まれその一部を構成する。図面は、実施形態を図示し、本明細書の記載と共に、実施形態の原理を説明する役割を果たす。他の実施形態および実施形態の意図する利点の多くは容易に認められよう。何故なら、これらは、以下の詳細な説明を参照することによって一層深く理解されるからである。図面の要素は、必ずしも互いに対して同じ倍率で描かれている訳ではない。同様の参照番号は、対応する同様の部分を示す。

図１は、ウェブ開発ツールの一実施形態を示すブロック図である。図２は、図１に示すウェブ開発ツールの態様を実現するのに適した計算デバイス／環境の一実施形態を示すブロック図である。図３は、ウェブ開発ツールの一実施形態を示す機能ブロック図である。図４は、文書ノード・ツリーにマッピングされたＨＴＭＬテキストの一例を示すブロック図である。図５は、ビュー・ノード・ツリーにマッピングされた文書ノード・ツリーの一例を示すブロック図である。図６は、ブラウザー・インスタンスによって表されるＤＯＭに対するビュー・ノード・ツリーの一例を示すブロック図である。図７は、修正前後における文書ノード・ツリーの一例を示すブロック図である。図８は、修正についての変化記録の一例を示すブロック図である。図９は、マークアップ・テキスト・ソース文書に対する修正に基づいて実行中のウェブ・ページを動的に更新し、この実行中のウェブ・ページに対する修正に基づいてマークアップ・ソース文書を動的に更新する方法の一実施形態を示す流れ図である。

[0014] 以下の詳細な説明では、添付図面を参照する。添付図面は、本発明を実施することができる具体的な実施形態の一部をなし、図面において例示として実施形態が示されている。尚、本発明の範囲から逸脱することなく、他の実施形態を利用すること、および構造的変更または論理的変更を行うこともできることは言うまでもない。したがって、以下の詳細な説明は、限定的な意味で捕らえてはならず、本発明の範囲は、添付した特許請求の範囲によって定められるものとする。

[0015] 尚、本明細書において記載する種々の実施形態例の特徴は、具体的に別段明記されていなければ、互いに組み合わせてもよいことは言うまでもない。
[0016] 図１は、ウェブ開発ツール１００の一実施形態を示すブロック図である。ウェブ開発ツール１００は、テキスト・ソース文書１０２、およびこのテキスト・ソース文書の実行表現１０４を含む。一実施形態では、テキスト・ソース文書１０２は、ウェブ・ページ・ソース・コード・エディターにおいて開かれる。他の実施形態では、テキスト・ソース文書１０２またはテキスト・ソース文書１０２の一部は、ウェブ・ページ・ソース・コード・ビューアにおいて表示される。一実施形態では、テキスト・ソース文書１０２の実行表現１０４は、ブラウザーによって供給される。他の実施形態では、テキスト・ソース文書１０２の実行表現１０４は、設計者、プロパティ・ペイン、またはテキスト・ソース文書の実行表現の他の適した可視化によって供給される。

[0017] ウェブ・ページ・ソース・コードに対する修正は、実行表現１０４によって表されるように、実行ページ・インスタンスを動的に更新してウェブ・ページ・ソース・コードに対する修正を含むために、ウェブ・ページの実行ページ・インスタンスに適用される。同様に、ウェブ・ページの実行ページ・インスタンスにおけるＤＯＭエレメントに対する修正も、ウェブ・ページ・ソース・コードを動的に変更してＤＯＭエレメントに対する修正を含むために、ウェブ・ページ・ソース・コードに適用される。このように、ウェブ・ページ開発者は、ブラウザーにおけるウェブ・ページの実行インスタンス内にあるＤＯＭエレメントを修正すること、および／またはウェブ・ページ・ソース・コードを修正することができ、修正は、ウェブ・ページ・ソース・コードおよび／またはウェブ・ページの実行インスタンスにそれぞれ動的に適用される。

[0018] テキスト・ソース文書１０２のウェブ・ページ・ソース・コードが、リンク１１２によって、実行表現１０４によって表されるウェブ・ページの実行ページ・インスタンスにおいて関連する文書オブジェクト・モデル（ＤＯＭ）１１０にリンクされる。したがって、実行表現１０４内においてＤＯＭエレメントを選択または強調することによって、この選択または強調されたＤＯＭエレメントに関連するウェブ・ページ・テキストが、テキスト・ソース文書１０２内において選択または強調される。同様に、テキスト・ソース文書１０２内においてウェブ・ページ・テキストの一部を選択または強調することによって、このウェブ・ページ・テキストの選択または強調された一部に関連する１つまたは複数のエレメントが実行表現１０４内において選択または強調される。このように、ウェブ・ページ開発者は、ウェブ・ページの実行インスタンスにおいて表現されるＤＯＭエレメントを、ＤＯＭエレメントを定めるウェブ・ページ・テキスト・ソース・コードと、瞬時に照合することができる。

[0019] 一実施形態では、テキスト・ソース文書１０２はソース・コード・エディターにおいて開かれる。ソース・コード・エディターは、ウェブ・ページ・テキスト・ソース文書を開く、作成する、編集する、および保存するのに適したいずれかのテキスト・エディターを含む。一実施形態では、ソース・コード・エディターによって編集することができるウェブ・ページ・テキスト・ソース文書は、ハイパーテキスト・マークアップ言語（ＨＴＭＬ）、カスケーディング・スタイル・シート（ＣＳＳ）、拡張可能マークアップ言語（ＸＭＬ）、および／または拡張可能ハイパーテキスト・マークアップ言語（ＸＨＴＭＬ）というような、マークアップ・テキストを含む。また、ウェブ・ページ・テキスト・ソース文書は、JavaScript(登録商標)またはJScriptも含むことができる。本明細書において用いる場合、「ＪＳ」は、JavaScriptおよびJScript双方を指すこととする。他の実施形態では、ソース・コード・エディターは、他の適したウェブ・ページ・マークアップ・テキストおよびスクリプティング言語を含むウェブ・ページ・テキスト・ソース文書を開く、作成する、編集する、および保存するのに適している。一実施形態では、ソース・コード・エディターは、関係があるウェブ・ページ・テキスト・ソース文書またはリンクされているウェブ・ページ・テキスト・ソース文書をソース・コード・エディター内において同時に開くことができるように、ウェブ・ページ・テキスト・ソース文書の多数のインスタンスをサポートする。

[0020] 一実施形態では、実行表現１０４は、ＤＯＭ、ワールド・ワイド・ウェブ・コンソーシアム（Ｗ３Ｃ）に準拠したウェブ・ブラウザーである。一実施形態では、このブラウザーは、ＤＯＭ１１０の表現が、Internet Explorer、FireFox、Chrome、Safari、またはOperaというようないずれの特定のブラウザーにも依存しないように、ＤＯＭ１１０のブラウザー非依存的表現(agnostic representation)を供給する。他の実施形態では、ＤＯＭの表現が、選択されたブラウザーに基づくように、ブラウザーが選択される。ブラウザーは、ＤＯＭ１１０の表現の基になるInternet Explorer、FireFox、Chrome、Safari、またはOperaというような特定のブラウザーをユーザーが選択するための選択肢を含むことができる。一実施形態では、ブラウザーは、関係するウェブ・ページまたはリンクされたウェブ・ページをブラウザー内部で同時に実行(running)することができるように、ＤＯＭの多数のインスタンスをサポートする。また、実行表現１０４は、実行スクリプト１０８およびアプリケーション・プログラミング・インターフェース（ＡＰＩ）も含むことができる。スクリプト１０８およびＡＰＩ１０６は、実行表現１０４内部においてＤＯＭ１１０の中にあるＤＯＭエレメントを修正、削除、および／または挿入することができる。

[0021] 図２は、図１を参照して以上で説明および例示したウェブ開発ツール１００の態様を実現するのに適した計算デバイス／環境２００の一実施形態を示すブロック図である。計算デバイス／環境２００は、１つ以上の処理ユニット２１２およびシステム・メモリー２１４を含む。計算デバイス／環境２００の正確な構成および形式に依存して、メモリー２１４は、揮発性（ＲＡＭのような）、不揮発性（ＲＯＭ、フラッシュ・メモリー等のような）、またはこれら２つの何らかの組み合わせであることができる。

[0022] また、計算デバイス／環境２００は、追加の特徴／機能も有することができる。例えば、計算デバイス／環境２００は、追加のストレージ（リムーバブルおよび／または非リムーバブル）も含むことができる。追加のストレージには、磁気または光ディスクあるいはテープが含まれるが、これらに限定されるのではない。このような追加のストレージは、図２において、リムーバブル・ストレージ２１６および非リムーバブル・ストレージ２１８によって図示されている。コンピューター記憶媒体は、揮発性および不揮発性、リムーバブルおよび非リムーバブル媒体を含み、コンピューター読み取り可能命令、データー構造、プログラム・モジュール、または他のデーターというような情報の格納に適したいずれかの方法または技術によって実現される。メモリー２１４、リムーバブル・ストレージ２１６、および非リムーバブル・ストレージ２１８は全て、コンピューター記憶媒体の例である（例えば、コンピューター実行可能命令を格納するコンピューター読み取り可能記憶媒体であり、少なくとも１つのプロセッサーによって命令を実行すると、この少なくとも１つのプロセッサーに方法を実行させる）。コンピューター記憶媒体には、ＲＡＭ、ＲＯＭ、ＥＥＰＲＯＭ、フラッシュ・メモリーまたは他のメモリー技術、ＣＤ−ＲＯＭ、ディジタル・バーサタイル・ディスク（ＤＶＤ）または他の光ストレージ、磁気カセット、磁気テープ、磁気ディスク・ストレージまたは他の磁気記憶デバイス、あるいは所望の情報を格納するために用いることができ、計算デバイス／環境２００によってアクセスすることができる他のあらゆる媒体を含むが、これらに限定されるのではない。

[0023] 計算デバイス／環境２００の種々のエレメントは、１つ以上の通信リンク２１５を介して互いに通信可能に結合される。また、計算デバイス／環境２００は、１つ以上の通信接続２２４も含む。通信接続２２４は、計算デバイス／環境２００が他のコンピューター／アプリケーション２２６と通信することを可能にする。また、計算デバイス／環境２００は、キーボード、ポインティング・デバイス（例えば、マウス）、ペン、音声入力デバイス、タッチ入力デバイス等というような、入力デバイス（１つまたは複数）２２２も含むことができる。また、計算デバイス／環境２００は、ディスプレイ、スピーカー、プリンター等のような、出力デバイス（１つまたは複数）２２０も含むことができる。

[0024] 図２および以上の論述は、１つ以上の実施形態を実現することができる適した計算環境の全般的な説明を端的に提示することを意図しており、実施形態の使用範囲や機能に関して限定を示唆することは全く意図していない。

[0025] 図３は、ウェブ開発ツール３００の一実施形態を示す機能ブロック図である。一実施形態では、ウェブ開発ツール３００は、図１を参照して以上で説明および図示したウェブ開発ツール１００を設ける。ウェブ開発ツール３００は、マークアップ・テキスト３０２、マークアップ・パーサー(parser)３０６、文書ノード・ツリー３１０、ＤＯＭビルダー３１４、ブラウザー３１８、ＤＯＭ修正リスナー(DOM modification listener)３２２、およびマークアップ・シリアライザー(markup serializer)３２８を含む。３０４において示すように、マークアップ・テキスト３０２はマークアップ・パーサー３０６に入力される。マークアップ・パーサー３０６は、３０８において示すように、文書ノード・ツリー３１０を出力する。文書ノード・ツリー３１０は、３１２において示すように、ＤＯＭビルダー３１４に入力される。ＤＯＭビルダー３１４は、３１６において示すように、ＤＯＭをブラウザー３１８に出力する。ＤＯＭ修正リスナー３２２は、３２０において示すように、ブラウザー３１８内におけるＤＯＭエレメントに対する変更を追跡する。３２４において示すように、ＤＯＭ修正リスナー３２２は、変更情報を文書ノード・ツリー３１０に出力する。マークアップ・シリアライザー３２８は、３２６において示すように、変更情報を文書ノード・ツリー３１０から受け取る。マークアップ・シリアライザー３２８は、３３０において示すように、シリアル化変更情報(serialized change information)でマークアップ・テキスト３０２を更新する。

[0026] マークアップ・テキスト３０２は、ＨＴＭＬ、ＣＳＳ、ＸＭＬ、ＸＨＴＭＬ、および／または他の適したマークアップ・テキストを含む。一実施形態では、マークアップ・テキスト３０２を含むソース文書は、ソース・コード・エディターにおいて開かれる。他の実施形態では、ウェブ開発ツール３００は、ソース・コード・エディターにおいてソース・文書を開くことなく、マークアップ・テキスト３０２を含むソース文書にアクセスする。マークアップ・テキスト３０２は、ウェブ・ページを供給するために適した数のオブジェクトであればいくつでも定める。図３に示す例では、マークアップ・テキスト３０２はＨＴＭＬを含む。このＨＴＭＬの例は、「Hello」というテキストを含むＤＯＭエレメントを供給する１つのオブジェクトを定める。

[0027] マークアップ・テキスト３０２のテキスト的性質(textual nature)のために、マークアップ・テキスト３０２の各キャラクターは、３３２において示すような、対応するライン番号と、３３４において示すような、そのラインに対する対応する相対的キャラクター番号とを有する。例えば、マークアップ・テキスト３０２におけるキャラクター「H」は、ライン２、キャラクター８に位置する。また、マークアップ・テキスト３０２の各キャラクターは、キャラクター番号も有する。キャラクター番号は、マークアップ・テキスト３０２の先頭に対するキャラクターの相対的な位置を示す。例えば、マークアップ・テキスト３０２におけるキャラクター「H」は、２６のキャラクター番号を有する。何故なら、これはマークアップ・テキスト３０２における２６番目のキャラクターであるからである。このように、マークアップ・テキスト３０２内における各キャラクターは、ライン番号およびライン内における位置に基づいて、またはマークアップ・テキスト３０２の先頭に対する相対的なキャラクターの位置を示すキャラクター番号に基づいて、突き止めることができる。同様に、マークアップ・テキスト３０２内にある一連のキャラクターも、ラインの範囲およびこれらのライン内における位置に基づいて、またはキャラクター番号の範囲に基づいて突き止めることができる。本明細書において用いる場合、これらのライン番号の範囲およびライン内における位置、またはキャラクター番号の範囲を「テキスト・オフセット」と呼ぶ。

[0028] マークアップ・テキスト３０２は、文書ノード・ツリー３１０を構築するために、マークアップ・パーサー３０６によって解析される。一実施形態では、マークアップ・パーサー３０６は、ソース・コード・エディターと同じ計算デバイス／環境上に配置される。他の実施形態では、マークアップ・パーサー３０６は、ソース・コード・エディターとは異なる計算デバイス／環境上に配置される。マークアップ・パーサー３０６は、ＨＴＭＬパーサー、ＣＳＳパーサー、ＸＭＬパーサー、ＸＨＴＭＬパーサー、および／または他の適したマークアップ・テキスト・パーサーを含む。一実施形態では、マークアップ・パーサー３０６はＷ３Ｃに準拠する。他の実施形態では、マークアップ・パーサー３０６は、Internet Explorer、FireFox、Chrome、Safari、またはOperaというような特定のブラウザーに関連付けられたパーサーに基づく。他の実施形態では、マークアップ・パーサー３０６は混成パーサーであり、特定のブラウザーに関連付けられたパーサーの基本的な実施態様と、特定のブラウザーのランタイム実行(runtime execution)および／または解析挙動の知識に基づく解析実施における改変(alteration)とを含む。

[0029] マークアップ・パーサー３０６は、文書ノード・ツリー３１０におけるマークアップ・テキスト３０２からのソース文書詳細を含む。このソース文書詳細は、ウェブ・ページに関連がある。ＨＴＭＬオブジェクトおよびＣＳＳオブジェクトに加えて、マークアップ・パーサー３０６は、ブラウザーによって解釈することもできる文書タイプ(doctype)およびソース内コメント(in-source comments)というような、マークアップ・テキスト３０２からの他の詳細も含む。また、マークアップ・パーサー３０６は、マークアップ・テキスト３０２におけるソース文書詳細の位置を示す、文書ノード・ツリー３１０におけるテキスト・オフセットも含む。テキスト・オフセットは、文書ノード・ツリー３１０の各ノードを、そのノードに関連付けられたマークアップ・テキストにマッピングする。このように、文書ノード・ツリー３１０とマークアップ・テキスト３０２との間のリンクは、解析プロセスの間維持される。これは、マークアップ・パーサー３０６を、ブラウザー内に統合される従来のパーサーから差別化する。従来のパーサーは、性能上の理由からレンダリングの間にソース文書詳細を破棄するまたは変形させてしまい、ソース文書とレンダリングされる文書との間のリンクを全く維持しないことが多い。

[0030] 図３に示す例では、文書ノード・ツリー３１０はキャラクター番号の範囲をテキスト・オフセットとして用いる。例えば、文書ノード・ツリー３１０は、親ノード「ＤＩＶ」に対してテキスト・オフセット「テキスト・スパン：１−４２」を含む。これは、マークアップ・テキスト３０２におけるオブジェクト「ＤＩＶ」の位置を示す。同様に、文書ノード・ツリー３１０は、属性「ｉｄ」に対してテキスト・オフセット「テキスト・スパン：６−１５」、子ノード「Ｐ」に対してテキスト・オフセット「テキスト・スパン：２３−３４」、および子ノード「Ｈｅｌｌｏ」に対してテキスト・オフセット「テキスト・スパン：２６−３０」を含む。このように、文書ノード・ツリー３１０内にあるオブジェクト毎にテキスト・オフセットを含むことによって、文書ノード・ツリー３１０内にある各オブジェクトを、このオブジェクトに関連付けられたソース文書マークアップ・テキストにマッピングする。

[0031] ＤＯＭビルダー３１４は、ＤＯＭと、このＤＯＭを表すビュー・ノード・ツリーとを文書ノード・ツリー３１０から構築する。ＤＯＭの各エレメントが文書ノード・ツリー３１０において関連付けられたオブジェクトにリンクされ、これによって、そのオブジェクトに関連付けられたソース文書マークアップ・テキストにリンクされるように、ＤＯＭビルダー３１４は、ビュー・ノード・ツリーの各ノードを文書ノード・ツリーの対応するノードにマッピングする。一実施形態では、ＤＯＭビルダー３１４は、ＤＯＭに対する修正を追跡するために、イベント・リスナーをＤＯＭに注入する。

[0032] 一実施形態では、ＤＯＭビルダー３１４は、ＪＳエレメントを構築する。一旦実行すると、ＪＳエレメントはＤＯＭエレメントおよびビュー・ノード・ツリー内における対応するノードを構築および／または修正することができる。これらのＤＯＭエレメントは、文書ノード・ツリー３１０内部に対応するノードを有さない場合もある。

[0033] 一実施形態では、ＤＯＭビルダー３１４はブラウザー非依存(browser agnostic)ＤＯＭを構築する。このＤＯＭは、Internet Explorer、FireFox、Chrome、Safari、またはOperaというようないずれの特定のブラウザーにも依存しない。他の実施形態では、選択されたブラウザーに基づいてＤＯＭが構築されるように、ＤＯＭビルダー３１４が選択される。ＤＯＭビルダー３１４は、ＤＯＭ構築の基になる、Internet Explorer、FireFox、Chrome、Safari、またはOperaというような特定のブラウザーをユーザーが選択する選択肢を含むこともできる。構築されたＤＯＭは、ブラウザー３１８によって表される。一実施形態では、ブラウザー３１８はＷ３Ｃ準拠ブラウザーである。図３に示す例では、ブラウザー３１８は、マークアップ・テキスト３０２によって定められるテキスト「Ｈｅｌｌｏ」を含むＤＯＭエレメントを表示する。

[0034] ビュー・ノード・ツリーおよび文書ノード・ツリー３１０は、ブラウザー３１８内にあるＤＯＭエレメントをマークアップ・テキスト３０２にリンクする。例えば、ブラウザー３１８内において「Ｈｅｌｌｏ」を選択または強調することによって、マークアップ・テキスト３０２内において関連付けられたマークアップ・テキストが選択または強調される。逆に、マークアップ・テキスト３０２内において「Hello」を選択または強調することによって、ブラウザー３１８において関連付けられたＤＯＭエレメント「Ｈｅｌｌｏ」が選択または強調される。

[0035] ＤＯＭ修正リスナー３２２は、ブラウザー３１８内における、ＤＯＭ転換(mutation)のような、ＤＯＭエレメントに対する変更を追跡する。一実施形態では、ＤＯＭ修正リスナー３３２は、ＡＰＩ１０６および／またはスクリプト１０８（図１）によるＤＯＭエレメントに対する変更を追跡する。一実施形態では、ＤＯＭ変更リスナー３２２は、ＤＯＭエレメントに対する変更毎に、変更記録を生成する。各変更記録は、ビュー・ノード・ツリーのノードによって、修正されたＤＯＭエレメント、およびこのノードに加えられた変更を特定する。また、変更記録は、削除または挿入されたＤＯＭエレメントを特定することもできる。ＤＯＭ修正リスナー３２２は、次に、変更記録に基づいて、文書ノード・ツリー３１０において対応するノードを更新する。

[0036] 一実施形態では、ユーザーがプロパティ・パネルまたは他の適したメカニズムによってエレメント属性および／またはスタイル・プロパティを修正することによって、文書ノード・ツリー３１０を通じて、ＤＯＭエレメントに対して変更を行うことができる。この実施形態では、プロパティ・パネルは、エレメントに対する変更毎に変更記録を生成する。各変更記録は、文書ノード・ツリーのノードによって修正すべきエレメントを特定し、更にノードに加えられる変更を特定する。変更記録は、変更記録に基づいて文書ノード・ツリー３１０内のノードを更新する。ＤＯＭビルダー３１４は、次に、ブラウザー３１８におけるＤＯＭの表現が修正を含むように、更新された文書ノード・ツリー３１０に基づいて、ＤＯＭ、およびこのＤＯＭを表すビュー・ノード・ツリーを更新する。

[0037] マークアップ・シリアライザー３２８は、マークアップ・テキスト３０２を更新するために、文書ノード・ツリー３１０内の変更情報をシリアル化する。マークアップ・シリアライザー３２８は、更新された文書ノード・ツリー３１０と一致させるために、マークアップ・テキスト３０２を修正するのに必要な情報を含むように、文書ノード・ツリー３１０に対する変更をフォーマットする（例えば、ＤＯＭ修正リスナー３２２またはプロパティ・パネルからの変更記録による）。一実施形態では、マークアップ・シリアライザー３２８によって提供される情報は、マークアップ・テキスト３０２において行われようとする変更の位置を示すテキスト・オフセット、および指示された位置に入れる新たな値を含む。一実施形態では、マークアップ・シリアライザー３２８は、ユーザー行為に応答してバッチ・プロセスでマークアップ・テキスト３０２を変更するために、文書ノード・ツリー３１０に対する複数の変更についての変更情報を組み合わせて１つのシリアル化データー・ファイルにする。他の実施形態では、マークアップ・シリアライザー３２８は、多数のデーター・ファイルを含むバッチ・プロセスにおいてマークアップ・テキスト３０２を更新することができる。

[0038] また、変更は、ソース・コード・エディター内においてマークアップ・テキスト３０２に対して行うこともできる。一実施形態では、マークアップ・テキスト３０２に対する変更の後、マークアップ・パーサー３０６は、文書ノード・ツリー３１０を更新するために、マークアップ・テキスト３０２の部分的解析を実行する。他の実施形態では、マークアップ・テキスト３０２に対する変更の後、マークアップ・パーサー３０６は、文書ノード・ツリー３１０を更新するために、マークアップ・テキスト３０２の完全な解析を実行する。次いで、ＤＯＭビルダー３１４は、マークアップ・テキスト３０２に対する変更がブラウザー３１８において反映されるように、ＤＯＭ、およびこのＤＯＭを表すビュー・ノード・ツリーを更新する。

[0039] 図４は、文書ノード・ツリー４０４にマッピングされたＨＴＭＬテキスト４０２の一例４００を示すブロック図である。ＨＴＭＬテキスト４０２から文書ノード・ツリー４０４を構築するために、図３を参照して以上で説明および図示したマークアップ・パーサー３０６のような、マークアップ・テキスト・パーサーによって、ＨＴＭＬテキスト４０２を解析する。図４に示す例では、文書ノード・ツリー４０４が親ノード「ＤＩＶ」ならびに子ノード「ＳＰＡＮ」および「Ｐ」を含むように、ＨＴＭＬテキスト４０２を解析する。子コード「ＳＰＡＮ」は更に他の子ノード「TEXT(Hello)」を含む。子ノード「P」は、更に他の子ノード「Text(World)」、および値が「foo」である「class」のプロパティを含む。

[0040] このように、文書ノード・ツリー４０４は、ＨＴＭＬテキスト４０２のソース文書詳細を、構造化されたツリー・フォーマットで維持する。図３を参照して先に説明および図示したように、文書ノード・ツリー４０４は、各親ノードおよび子ノードに関連付けられたＨＴＭＬテキスト４０２内におけるＨＴＭＬテキストの具体的な位置を示すために、それぞれ、親ノードおよび子ノード毎にテキスト・オフセットを含む。

[0041] 図５は、ビュー・ノード・ツリー５０８にマッピングされた文書ノード・ツリー５０６の一例５００を示すブロック図である。文書ノード・ツリー５０６は、マークアップ文書５０２についてのソース文書詳細を、構造化されたツリー・フォーマットで供給する。ビュー・ノード・ツリー５０８は、ＨＴＭＬインスタンス・マネージャー５０４におけるＤＯＭの一インスタンスを表す。一実施形態では、ＨＴＭＬインスタンス・マネージャー５０４はビュー・ノード・ツリーの多数のインスタンスを管理することができる。一実施形態では、ＨＴＭＬインスタンス・マネージャー５０４内においてＤＯＭを表すビュー・ノード・ツリー５０８は、選択されたブラウザーに基づく。ＨＴＭＬインスタンス・マネージャー５０４は、ビュー・ノード・ツリー５０８の基になるInternet Explorer、FireFox、Chrome、Safari、またはOperaというような特定のブラウザーをユーザーが選択する選択肢を含むことができる。

[0042] ビュー・ノード・ツリー５０８の各ノードは、各ノードを文書ノード・ツリー５０６における関連するノードにマッピングする識別子を含む。一実施形態では、図３を参照して以上で説明および図示したＤＯＭビルダー３１４によって、ビュー・ノード・ツリーの各ノードに識別子が割り当てられる。一実施形態では、識別子は番号である。図５に示す例では、ビュー・ノード・ツリー５０８の識別子「１０５」が、文書ノード・ツリー５０６の親ノード「ＤＩＶ」にマッピングされている。同様に、識別子「１０６」が子ノード「ＳＰＡＮ」にマッピングされ、識別子「１０７」が子ノード「TEXT(Hello)」にマッピングされている。このように、ビュー・ノード・ツリーの各識別子は、ビュー・ノード・ツリーのノードを、文書ノード・ツリーにおいて関連するノードにリンクする。

[0043] 図６は、ブラウザー・インスタンス６１４によって表されるＤＯＭに対するビュー・ノード・ツリー６１０の一例６００を示すブロック図である。アプリケーション６０２は、ビュー・ノード・ツリー６１０を管理する、ＨＴＭＬインスタンス・マネージャー６０８を含む。一実施形態では、ＨＴＭＬインスタンス・マネージャー６０８は、ビュー・ノード・ツリーの多数のインスタンスを管理する。アプリケーション６０６は、ブラウザー・インスタンス６１４を管理するインスタンス・マネージャー６１２を含む。一実施形態では、インスタンス・マネージャー６１２は多数のブラウザー・インスタンスを管理する。ブラウザー・インスタンス６１４は、ＤＯＭのインスタンスを表す。アプリケーション６０２は、通信リンク（ＣＯＭ）６０４を介してアプリケーション６０６に通信可能に結合される。

[0044] ビュー・ノード・ツリー６１０の各ノードの識別子は、ビュー・ノード・ツリー６１０において各「DOM Proxy」によって示されるように、ブラウザー・インスタンス６１４によって表される関連ＤＯＭエレメントにリンクされる。つまり、ブラウザー・インスタンス６１４によって表される各ＤＯＭエレメントは、ビュー・ノード・ツリー６１０のノードにリンクまたはマッピングされる。したがって、ブラウザー・インスタンス６１４内に表される各ＤＯＭエレメントは、ビュー・ノード・ツリーおよび文書ノード・ツリーによって、マークアップ・テキスト・ソース文書におけるマークアップ・テキストにリンクされる。

[0045] 図６に示す例では、ビュー・ノード・ツリー６１０の識別子「１０５」が、ブラウザー・インスタンス６１４によって表されるＤＯＭエレメントの識別子「１０５」に対するＤＯＭプロキシーにリンクされている。同様に、識別子「１０６」は識別子「１０６」に対するＤＯＭプロキシーにリンクされ、識別子「１０７」は、識別子「１０７」に対するＤＯＭプロキシーにリンクされている。この例では、ビュー・ノード・ツリー６１０は、子ノード「TEXT(Hello)」（図５）をブラウザー・インスタンス６１４内にあるＤＯＭエレメント「Hello」にリンクする識別子「１０７」を含む。

[0046] 図７は、修正前後における文書ノード・ツリーの一例を示すブロック図である。文書ノード・ツリー７０２は修正前であり、文書ノード・ツリー７０４は修正後である。この例では、フォント・サイズを７０６において示す１０ポイントから７０８に示す２５ポイントに変更するために、オブジェクトHelloに対して変更を行う。修正前において、マークアップ・テキストを解析して文書ノード・ツリー７０２を構築し、文書ノード・ツリー７０２を用いて、ブラウザーにおいて表されるＤＯＭを構築した。

[0047] 一実施形態では、この修正はマークアップ・テキストに対して行われる。修正されたマークアップ・テキストは、次に、部分的に解析されるかまたは完全に解析される。一実施形態では、解析の間にツリー・ディフィング・アルゴリズム(tree diffing algorithm)を用いて、文書ノード・ツリーに対する変更を判定する。図７に示す例では、解析の後、文書ノード・ツリー７０４が供給され、オブジェクトHelloがHelloに変更されている。この文書ノード・ツリーに対する変更から、図８に示すような変更記録８００が生成される。

[0048] 図８は、修正に対する変更記録８００の一例を示すブロック図である。変更記録の一例８００は、図７を参照して以上で説明および図示したフォント・サイズに対する修正についてである。他の例では、変更記録８００は、他の適した値、プロパティ、および／またはスタイルを修正するため、あるいはＤＯＭエレメントを挿入および／または削除するために用いることもできる。変更記録８００は、修正が行われるノード「STYLE」、修正されている値またはプロパティ「font-size」、示されたプロパティに対する古い値「10pt」、および示されたプロパティに対する新しい値「25pt」を含む。変更記録８００を用いて、文書ノード・ツリーが変更され、この変更は、ビュー・ノード・ツリーおよびブラウザーによって表されるＤＯＭを更新するために、インスタンス・マネージャー（図５）に転送される。したがって、マークアップ・テキスト、文書ノード・ツリー、およびブラウザーによって表されるＤＯＭは、マークアップ・テキストに対する修正後、同期されることになる。

[0049] 他の実施形態では、ＤＯＭエレメントに対する変更は、エレメント属性および／またはスタイル・プロパティによって行われる。一実施形態では、エレメント属性および／またはスタイル・プロパティは、プロパティ・ペインまたはウェブ開発ツールの他の適したメカニズムによって修正される。プロパティ・ペインは、以前に説明したようにマークアップ・テキストにおいてではなく、文書ノード・ツリーにおいてエレメント属性および／またはスタイル・プロパティを変更するために用いることができる。この実施形態では、エレメント属性および／またはスタイル・プロパティに対する修正に応答して、プロパティ・ペインによって、図８に示すような変更記録８００が生成される。変更記録８００を用いて、文書ノード・ツリーが更新され、ビュー・ノード・ツリーおよびブラウザーによって表されるＤＯＭを更新するために、変更はインスタンス・マネージャー（図５）に転送される。加えて、文書ノード・ツリーにおけるテキスト・オフセットによって文書ノード・ツリーとマークアップ・テキストとの間に規定されるマッピングに基づいて、修正に関連付けられたマークアップ・テキストも更新される。この例では、テキスト「10pt」の位置におけるマークアップ・テキストは、テキスト「25pt」と置き換えられる。したがって、エレメント属性および／またはスタイル・プロパティに対する修正の後、マークアップ・テキスト、文書ノード・ツリー、およびブラウザーによって表されるＤＯＭは同期されることになる。

[0050] 他の例では、ＤＯＭエレメントに対する変更は、ＤＯＭ転換イベントによって検出される。ＤＯＭ転換イベントによって検出されるＤＯＭエレメントに対する変更は、例えば、ＪＳの実行のためであることがある。一実施形態では、ユーザー行為またはタイマーに基づいてＤＯＭを表すビュー・ノード・ツリーを分析して変更を見つけることによっても、ＤＯＭエレメントに対する変更が判定される。ＤＯＭ転換イベントによって検出される各変更、またはビュー・ノード・ツリーの分析によって判定される各変更は、図８に示すような変更記録８００を生成するために用いられる。変更記録８００を用いて、文書ノード・ツリーおよびマークアップ・テキストが更新される。したがって、ＤＯＭに対する修正の後、マークアップ・テキスト、文書ノード・ツリー、およびブラウザーによって表されるＤＯＭは同期されることになる。

[0051] 図９は、マークアップ・テキスト・ソース文書に対する修正に基づいて実行中のウェブ・ページを動的に更新し、この実行中のウェブ・ページに対する修正に基づいてマークアップ・テキスト・ソース文書を動的に更新する方法の一実施形態を示す流れ図である。９０２において、マークアップ・テキスト・ソース文書（例えば、図３を参照して先に説明および図示したマークアップ・テキスト３０２）を、ソース・コード・エディターにおいて開く。９０４において、このマークアップ・テキスト・ソース文書にマッピングされる文書ノード・ツリー（例えば、図３を参照して先に説明および図示した文書ノード・ツリー３１０）を構築する。９０６において、ＤＯＭ、および文書ノード・ツリーにマッピングされたＤＯＭを表すビュー・ノード・ツリー（例えば、図５を参照して説明および図示したビュー・ノード・ツリー５０８）を構築する。９０８において、ブラウザーにおいてＤＯＭを表現する（例えば、図１を参照して先に説明および図示した実行表現１０４）。

[0052] ９１０において、ＤＯＭエレメントに対する修正を追跡して、第１変更情報を提供する（例えば、図８を参照して説明および図示した変更記録８００）。第１変更情報は、ＤＯＭ修正リスナー３２２（図３）によって提供することができ、あるいはユーザーによるエレメント属性および／またはスタイル・プロパティの修正によって提供することもできる。９１２において、マークアップ・テキスト・ソース文書を更新するために、第１変更情報をマークアップ・テキスト・ソース文書に適用する(apply)。最初に第１変更情報に基づいて文書ノード・ツリーを更新し、次いで第１変更情報および文書ノード・ツリーにおけるテキスト・オフセットに基づいてマークアップ・テキスト・ソース文書を更新することによって、第１変更情報をマークアップ・テキスト・ソース文書に適用する。

[0053] ９１４において、マークアップ・テキスト・ソース文書を追跡して、第２変更情報（例えば、図８を参照して先に説明および図示した変更記録８００）を提供する。９１６において、ブラウザーにおいて表現されるＤＯＭエレメントを更新するために、第２変更情報をＤＯＭエレメントに適用する。最初に第２変更情報に基づいて文書ノード・ツリーを更新し、次いで文書ノード・ツリーに基づいてＤＯＭおよびこのＤＯＭを表すビュー・ノード・ツリーを更新することによって、第２変更情報をＤＯＭエレメントに適用する。

[0054] 実施形態は、ブラウザーにおいて表現されるＤＯＭを、ＤＯＭエレメントを構築するために用いられるマークアップ・テキスト・ソース文書におけるマークアップ・テキストとリンクするウェブ開発ツールを提供する。基のソース・コードと構築されるＤＯＭエレメントとの間に正確なマッピングが維持されるように、マークアップ・テキスト・ソース文書を解析してＤＯＭを１つずつ組み立てていく。開示したウェブ開発ツールを用いると、実行ページにおけるＤＯＭエレメントに対する修正に基づいて、対応するソース・コードを動的に更新することができ、ソース・コードに対する修正に基づいて、実行ページにおける対応するＤＯＭエレメントを動的に更新することができる。

[0055] 以上、本明細書では具体的な実施形態について例示し説明したが、本発明の範囲から逸脱することなく、種々の代替実施態様および／または等価な実施態様を、図示および説明した具体的な実施形態の代わりに用いてもよいことは、当業者には認められよう。本願は、本明細書において論じた具体的な実施形態のあらゆる改変または変形も包含することを意図している。したがって、本発明は特許請求の範囲およびその均等物によってのみ限定されることを意図することとする。

Claims

文書ノード・ツリーが、当該文書ノード・ツリーの各ノードに対応するテキスト・ソース文書内にあるテキストの位置を示すテキスト・オフセットを含むように、文書ノード・ツリーを構築するためにテキスト・ソース文書を解析するステップと、
前記文書ノード・ツリーから、文書オブジェクト・モデル（ＤＯＭ）と、前記ＤＯＭを表すビュー・ノード・ツリーとを構築するステップであって、前記ビュー・ノード・ツリーの構築が、前記ビュー・ノード・ツリーを前記文書ノード・ツリーにマッピングすることを含む、ステップと、
前記ＤＯＭの実行表現を供給するステップと、
第１変更情報を提供するために前記ＤＯＭに対する修正を追跡するステップ、または第２変更情報を提供するために前記テキスト・ソース文書に対する修正を追跡するステップの内１つと、
を含む、方法。
請求項１記載の方法において、更に、
前記テキスト・ソース文書を更新するために前記第１変更情報を前記テキスト・ソース文書に適用するステップ、または前記ＤＯＭの実行表現を更新するために、前記第２変更情報を前記ＤＯＭに適用するステップの内１つを含む、方法。
請求項１記載の方法において、前記ＤＯＭに対する修正を追跡するステップが、ＤＯＭ転換を追跡するステップを含む、方法。
請求項１記載の方法において、前記第１変更情報が、前記文書ノード・ツリーにおいて編集、削除、または挿入するノードと、前記ＤＯＭに対する修正に対応するデーターとを特定する、方法。
請求項１記載の方法において、前記第２変更情報が、前記文書ノード・ツリーにおいて編集、削除、または挿入するノードと、前記テキスト・ソース文書に対する修正に対応するデーターとを特定する、方法。
請求項１記載の方法において、前記ＤＯＭに対する修正を追跡するステップが、プロパティ・パネルまたは前記ＤＯＭの実行表現の直接操作の内一方によって適用されるユーザーの編集を追跡するステップを含む、方法。
請求項１記載の方法において、前記ビュー・ノード・ツリーを前記文書ノード・ツリーにマッピングするステップが、前記ビュー・ノード・ツリーの各ノードに識別子を割り当てるステップを含み、前記ビュー・ノード・ツリーの各識別子が、前記文書ノード・ツリーの対応するノードにマッピングされ、
前記第１変更情報が、前記ＤＯＭの修正に対応する、前記ビュー・ノード・ツリーにおけるノードの識別子を含む、方法。
請求項１記載の方法であって、更に、
複数のＤＯＭ修正についての第１変更情報をシリアル化するステップを含む、方法。
請求項８記載の方法であって、更に、
前記テキスト・ソース文書を更新するために、前記シリアル化された第１変更情報を前記テキスト・ソース文書に適用するステップを含む、方法。
方法を実行するように計算デバイスを制御するためのコンピューター実行可能命令を格納するコンピューター読み取り可能記憶媒体であって、前記方法が、
文書ノード・ツリーの各ノードがテキスト・オフセットとマークアップ・テキスト・ソース文書詳細とを含むように、文書ノード・ツリーを構築するためにマークアップ・テキスト・ソース文書を解析するステップであって、前記文書ノード・ツリーの各ノードにおけるテキスト・オフセットが、前記文書ノード・ツリーの各ノードに対応する、前記マークアップ・テキスト・ソース文書内における前記マークアップ・テキストの位置を示す、ステップと、
前記文書ノード・ツリーから、文書オブジェクト・モデル（ＤＯＭ）と、前記ＤＯＭを表すビュー・ノード・ツリーとを構築するステップであって、前記ビュー・ノード・ツリーの構築が、前記ビュー・ノード・ツリーを前記文書ノード・ツリーにマッピングすることを含む、ステップと、
各ＤＯＭエレメントが、前記ビュー・ノード・ツリーおよび前記文書ノード・ツリーによって、前記ＤＯＭエレメントに関連付けられたマークアップ・テキストにリンクされるように、前記ＤＯＭの実行表現を供給するステップと、
第１変更情報を提供するためにＤＯＭエレメントに対する修正を追跡するステップと、
第２変更情報を提供するために前記マークアップ・テキスト・ソース文書に対する修正を追跡するステップと、
を含む、コンピューター読み取り可能記憶媒体。