JP2014523576A

JP2014523576A - ソース・コードの実行エレメントへのリンク

Info

Publication number: JP2014523576A
Application number: JP2014516982A
Authority: JP
Inventors: ファニング，マイケル・シー; ホール，マシュー; リンスコット，ゲイリー; アンドリュー，フェリックス・ジーティーアイ; ショウマン，ケネス・エイ; トヴォルン，エフゲニー
Original assignee: Microsoft Corp
Current assignee: Microsoft Corp
Priority date: 2011-06-23
Filing date: 2012-05-30
Publication date: 2014-09-11
Anticipated expiration: 2032-05-30
Also published as: WO2013103374A3; EP2724254A2; CN103620586A; US10540416B2; JP5941539B2; KR101975616B1; US20120331374A1; CN103620586B; WO2013103374A2; KR20140038469A; EP2724254A4

Abstract

本方法は、文書ノード・ツリーが、当該文書ノード・ツリーの各ノードに対応するテキスト・ソース文書内にあるテキストの位置を示すテキスト・オフセットを含むように、文書ノード・ツリーを構築するためにテキスト・ソース文書を解析するステップを含む。本方法は、文書ノード・ツリーから、文書オブジェクト・モデル（ＤＯＭ）と、このＤＯＭを表すビュー・ノード・ツリーとを構築するステップを含む。ビュー・ノード・ツリーの構築は、ビュー・ノード・ツリーを文書ノード・ツリーにマッピングすることを含む。本方法は、ビュー・ノード・ツリーおよび文書ノード・ツリーによって、ＤＯＭのＤＯＭエレメントが、ＤＯＭエレメントに対応するテキスト・ソース文書内におけるテキストにリンクされるように、ＤＯＭの実行表現を供給するステップを含む。
【選択図】図３

Description

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

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

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

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

図１は、ウェブ開発ツールの一実施形態を示すブロック図である。図２は、図１に示すウェブ開発ツールの態様を実現するのに適した計算デバイス／環境の一実施形態を示すブロック図である。図３は、ウェブ開発ツールの一実施形態を示す機能ブロック図である。図４は、文書ノード・ツリーにマッピングされたＨＴＭＬテキストの一例を示すブロック図である。図５は、ビュー・ノード・ツリーにマッピングされた文書ノード・ツリーの一例を示すブロック図である。図６は、ブラウザー・インスタンスによって表されるＤＯＭに対するビュー・ノード・ツリーの一例を示すブロック図である。図７は、ソース・コード・エディターにおけるマークアップ・テキストを、ブラウザー内において著される関連ＤＯＭエレメントとリンクする方法の一実施形態を示す流れ図である。図８は、文書ノード・ツリーのノードのテキスト・オフセットを更新または無効化する方法の一実施形態を示す流れ図である。

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

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

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

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

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

[0019] また、実行表現１０４は、実行スクリプト１０８およびアプリケーション・プログラミング・インターフェース（ＡＰＩ）も含むことができる。スクリプト１０８およびＡＰＩ１０６は、実行表現１０４内部においてＤＯＭ１１０の中にあるＤＯＭエレメントを修正することができる。一実施形態では、テキスト・ソース文書の内、ＤＯＭ１１０の実行表現１０４の修正のためにＤＯＭ１１０の実行表現１０４ではもはや表されていない部分が、視覚インディケーターによってそのように示される。一実施形態では、実行表現１０４内におけるＤＯＭエレメントの選択に応答して、ＤＯＭエレメントに関連付けられたテキスト・ソース文書１０２内におけるソース・コードの位置が、ユーザーに報告される。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

[0034] ＤＯＭ修正リスナー３３２は、ブラウザー３１８内における、ＤＯＭ転換(mutation)のような、ＤＯＭエレメントに対する変更を追跡する。一実施形態では、ＤＯＭ修正リスナー３３２は、ＤＯＭエレメントに対する修正を追跡して、文書ノード・ツリー３１０内におけるテキスト・オフセットに無効の印を付けるか、あるいは文書ノード・ツリー３１０内にあるテキスト・オフセットを、ＤＯＭエレメントおよび／または属性を作成するおよび／または上書きすることに関与するＪＳの実行位置と置き換える。一実施形態では、ＤＯＭ修正リスナー３２２は、ＡＰＩ１０６および／またはスクリプト１０８（図１）によるＤＯＭエレメントに対する変更を追跡する。一実施形態では、ＤＯＭ修正リスナー３２２は、修正されたＤＯＭエレメントに関連付けられた文書ノード・ツリーのノードを更新または挿入して、ＤＯＭエレメントに対する修正に関与するスクリプトのラインを示す。

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

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

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

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

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

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

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

[0042] 図７は、ソース・コード・エディターにおけるマークアップ・テキストを、ブラウザーにおいて関連するＤＯＭエレメントとリンクする方法７０２の一実施形態を示す流れ図である。７０４において、マークアップ・テキスト・ソース文書（例えば、図３を参照して以上で説明および図示したマークアップ・テキスト３０２）をソース・コード・エディターにおいて開く。７０６において、マークアップ・テキスト・ソース文書にマッピングされた文書ノード・ツリー（例えば、図３を参照して以上で説明および図示した文書ノード・ツリー３１０）を構築する。７０８において、ＤＯＭ、および文書ノード・ツリーにマッピングされたＤＯＭを表すビュー・ノード・ツリー（例えば、図５を参照して以上で説明および図示したビュー・ノード・ツリー）を構築する。

[0043] ７１０において、ブラウザーにおいてＤＯＭを表現する（例えば、図１を参照して以上で説明および図示した実行表現１０４）。７１２において、ブラウザーにおけるＤＯＭエレメントの選択を、ソース・コード・エディターにおいて関連するマークアップ・テキストにリンクするか、またはソース・コード・エディターにおけるマークアップ・テキストの選択を、ブラウザーにおいて関連するＤＯＭエレメント（１つまたは複数）にリンクする。ＤＯＭエレメントと関連するマークアップ・テキストとの間のリンクは、ビュー・ノード・ツリーおよび文書ノード・ツリーによって設けられる。

[0044] 図８は、文書ノード・ツリーのノードのテキスト・オフセットを更新または無効化する方法８００の一実施形態を示す流れ図である。８０２において、ＤＯＭの実行表現に対する修正を追跡する。ＤＯＭの実行表現に対する修正は、ＡＰＩ１０６、スクリプト１０８（図１）、または他の適したプロセスによる場合もある。８０４において、ＤＯＭの実行表現に対する修正に基づいて、文書ノード・ツリー内におけるノードのテキスト・オフセットを更新または無効化する。一実施形態では、ＤＯＭの実行表現に対する修正に関連付けられた、文書ノード・ツリー内における対応するノードのテキスト・オフセットを更新して、この修正に関与したＪＳの位置を示す。

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

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

Claims

文書ノード・ツリーが、当該文書ノード・ツリーの各ノードに対応するテキスト・ソース文書内にあるテキストの位置を示すテキスト・オフセットを含むように、文書ノード・ツリーを構築するためにテキスト・ソース文書を解析するステップと、
前記文書ノード・ツリーから、文書オブジェクト・モデル（ＤＯＭ）と、前記ＤＯＭを表すビュー・ノード・ツリーとを構築するステップであって、前記ビュー・ノード・ツリーの構築が、前記ビュー・ノード・ツリーを前記文書ノード・ツリーにマッピングすることを含む、ステップと、
前記ビュー・ノード・ツリーおよび前記文書ノード・ツリーによって、前記ＤＯＭのＤＯＭエレメントが、前記ＤＯＭエレメントに対応する前記テキスト・ソース文書内のテキストにリンクされるように、前記ＤＯＭの実行表現を供給するステップと、
を含む、方法。
請求項１記載の方法において、更に、
ＤＯＭ文書の前記実行表現に対する修正を追跡するステップと、
前記修正に基づいて、前記修正されたＤＯＭエレメントに対応する前記ビュー・ノード・ツリーのノードに対する前記テキスト・オフセットに無効の印を付けるステップ、または前記修正されたＤＯＭエレメントに対応するビュー・ノード・ツリーの前記ノードに対するテキスト・オフセットを、前記修正に基づいて更新されたテキスト・オフセットで置き換えるステップの内一方と、
を含む、方法。
請求項２記載の方法において、修正を追跡するステップが、ＤＯＭ転換イベントを追跡するステップを含む、方法。
請求項２記載の方法において、修正を追跡するステップが、前記ＤＯＭの実行表現のアプリケーション・プログラミング・インターフェース（ＡＰＩ）による修正を追跡するステップを含む、方法。
請求項１記載の方法であって、
前記ＤＯＭの実行表現におけるスクリプトの実行による、ＤＯＭエレメントの前記実行表現に対する修正を追跡するステップと、
前記ＤＯＭエレメントに対する修正に関与する前記スクリプトのラインを示すために、前記修正されたＤＯＭエレメントに関連付けられた前記文書ノード・ツリーのノードを更新するステップおよび挿入するステップの内一方と、
を含む、方法。
請求項１記載の方法において、前記ＤＯＭの実行表現を供給するステップが、ブラウザー・インスタンスにおいて前記ＤＯＭの実行表現を供給するステップを含む、方法。
請求項１記載の方法において、前記テキスト・ソース文書を解析するステップが、ハイパーテキスト・マークアップ言語（ＨＴＭＬ）パーサーまたはカスケーディング・スタイル・シート（ＣＳＳ）パーサーの内一方によって前記テキスト・ソース文書を解析するステップを含む、方法。
請求項１記載の方法において、前記テキスト・ソース文書を解析するステップが、指定されたブラウザーのパーサーに基づいて、前記テキスト・ソース文書を解析するステップを含む、方法。
請求項１記載の方法であって、更に、
前記テキスト・ソース文書を解析する前に、ソース・コード・エディターにおいて前記テキスト・ソース文書を開くステップを含む、方法。
方法を実行するように計算デバイスを制御するためのコンピューター実行可能命令を格納するコンピューター読み取り可能記憶媒体であって、前記方法が、
文書ノード・ツリーの各ノードがテキスト・オフセットとマークアップ・テキスト・ソース文書詳細とを含むように、文書ノード・ツリーを構築するステップであって、前記文書ノード・ツリーの各ノードにおけるテキスト・オフセットが、前記マークアップ・テキスト・ソース文書内において、前記文書ノード・ツリーの各ノードに対応する前記マークアップ・テキストの位置を示す、ステップと、
前記文書ノード・ツリーから、文書オブジェクト・モデル（ＤＯＭ）と、前記ＤＯＭを表すビュー・ノード・ツリーとを構築するステップであって、前記ビュー・ノード・ツリーの構築が、前記ビュー・ノード・ツリーを前記文書ノード・ツリーにマッピングすることを含む、ステップと、
前記ビュー・ノード・ツリーおよび前記文書ノード・ツリーによって、各ＤＯＭエレメントが、前記ＤＯＭエレメントに関連付けられたマークアップ・テキストにリンクされるように、ブラウザーにおいて前記ＤＯＭを表現するステップと、
を含む、コンピューター読み取り可能記憶媒体。