diff options
Diffstat (limited to 'files/ja/orphaned/tools/add-ons/dom_inspector')
4 files changed, 454 insertions, 0 deletions
diff --git a/files/ja/orphaned/tools/add-ons/dom_inspector/dom_inspector_faq/index.html b/files/ja/orphaned/tools/add-ons/dom_inspector/dom_inspector_faq/index.html new file mode 100644 index 0000000000..1ed0f6d538 --- /dev/null +++ b/files/ja/orphaned/tools/add-ons/dom_inspector/dom_inspector_faq/index.html @@ -0,0 +1,44 @@ +--- +title: DOM Inspector FAQ +slug: DOM_Inspector_FAQ +tags: + - DOM_Inspector +translation_of: Tools/Add-ons/DOM_Inspector/DOM_Inspector_FAQ +--- +<div>{{ToolsSidebar}}</div><h3 id="Web_.E3.82.B5.E3.82.A4.E3.83.88.E3.82.92.E8.AA.BF.E3.81.B9.E3.82.8B.E3.81.AB.E3.81.AF.EF.BC.9F" name="Web_.E3.82.B5.E3.82.A4.E3.83.88.E3.82.92.E8.AA.BF.E3.81.B9.E3.82.8B.E3.81.AB.E3.81.AF.EF.BC.9F">Web サイトを調べるには？</h3> + +<p>Inspector の URL バーに URL を入力して Enter キーを押します。あるいは、Inspector の {{ mediawiki.external('ファイル') }} メニューから {{ mediawiki.external('URL を Inspect') }} を選びます。開いている XUL ウィンドウを調べたいのであれば、{{ mediawiki.external('ファイル') }} メニューから {{ mediawiki.external('ウィンドウを Inspect') }} を選びます。</p> + +<h3 id=".E3.83.89.E3.82.AD.E3.83.A5.E3.83.A1.E3.83.B3.E3.83.88.E3.81.AE_DOM_.E3.83.8E.E3.83.BC.E3.83.89.E3.83.93.E3.83.A5.E3.83.BC.E3.81.A7.E4.B8.80.E9.83.A8.E3.81.AE.E3.83.8E.E3.83.BC.E3.83.89.E3.81.8C.E8.B5.A4.E8.89.B2.E8.A1.A8.E7.A4.BA.E3.81.95.E3.82.8C.E3.82.8B.E3.81.AE.E3.81.AF.E3.81.AA.E3.81.9C.EF.BC.9F" name=".E3.83.89.E3.82.AD.E3.83.A5.E3.83.A1.E3.83.B3.E3.83.88.E3.81.AE_DOM_.E3.83.8E.E3.83.BC.E3.83.89.E3.83.93.E3.83.A5.E3.83.BC.E3.81.A7.E4.B8.80.E9.83.A8.E3.81.AE.E3.83.8E.E3.83.BC.E3.83.89.E3.81.8C.E8.B5.A4.E8.89.B2.E8.A1.A8.E7.A4.BA.E3.81.95.E3.82.8C.E3.82.8B.E3.81.AE.E3.81.AF.E3.81.AA.E3.81.9C.EF.BC.9F">ドキュメントの DOM ノードビューで一部のノードが赤色表示されるのはなぜ？</h3> + +<p>これらのノードは <a href="ja/XBL/XBL_1.0_Reference#.E7.84.A1.E5.90.8D.E3.82.B3.E3.83.B3.E3.83.86.E3.83.B3.E3.83.84">無名コンテントノード</a> であり、元のドキュメントによって生成されて DOM にあるものではないのです。</p> + +<h3 id=".E3.81.AA.E3.82.8B.E3.81.BB.E3.81.A9.E3.80.82.E3.81.A7.E3.81.AF.E3.80.81.E3.81.93.E3.82.8C.E3.82.89.E3.81.AE.E7.84.A1.E5.90.8D.E3.83.8E.E3.83.BC.E3.83.89.E3.82.92.E8.A1.A8.E7.A4.BA.E3.81.97.E3.81.9F.E3.81.8F.E3.81.AA.E3.81.84.E5.A0.B4.E5.90.88.E3.81.AF.E3.81.A9.E3.81.86.E3.81.99.E3.82.8C.E3.81.B0.E3.81.84.E3.81.84.E3.81.AE.E3.81.A7.E3.81.97.E3.82.87.E3.81.86.EF.BC.9F" name=".E3.81.AA.E3.82.8B.E3.81.BB.E3.81.A9.E3.80.82.E3.81.A7.E3.81.AF.E3.80.81.E3.81.93.E3.82.8C.E3.82.89.E3.81.AE.E7.84.A1.E5.90.8D.E3.83.8E.E3.83.BC.E3.83.89.E3.82.92.E8.A1.A8.E7.A4.BA.E3.81.97.E3.81.9F.E3.81.8F.E3.81.AA.E3.81.84.E5.A0.B4.E5.90.88.E3.81.AF.E3.81.A9.E3.81.86.E3.81.99.E3.82.8C.E3.81.B0.E3.81.84.E3.81.84.E3.81.AE.E3.81.A7.E3.81.97.E3.82.87.E3.81.86.EF.BC.9F">なるほど。では、これらの無名ノードを表示したくない場合はどうすればいいのでしょう？</h3> + +<p>{{ mediawiki.external('表示') }} メニューの {{ mediawiki.external('無名コンテントを表示') }} からチェックを外せば Inspector の中で無名ノードを隠せます。</p> + +<h3 id=".E5.85.83.E3.81.AE.E3.83.89.E3.82.AD.E3.83.A5.E3.83.A1.E3.83.B3.E3.83.88.E3.81.AB.E3.81.AA.E3.81.84.E7.A9.BA.E3.81.AE_.23text_.E3.83.8E.E3.83.BC.E3.83.89.E3.81.8C.E3.81.84.E3.81.A3.E3.81.B1.E3.81.84.E3.81.82.E3.82.8A.E3.81.BE.E3.81.99.E3.80.82.E3.81.93.E3.82.8C.E3.82.89.E3.81.AF.E4.BD.95.E3.81.A7.E3.81.97.E3.82.87.E3.81.86.EF.BC.9F_.E3.81.A9.E3.81.86.E3.81.97.E3.81.A6.E5.AD.98.E5.9C.A8.E3.81.97.E3.81.A6.E3.80.81.E3.81.A9.E3.81.86.E3.81.99.E3.82.8C.E3.81.B0.E5.8F.96.E3.82.8A.E9.99.A4.E3.81.91.E3.82.8B.E3.81.AE.E3.81.A7.E3.81.97.E3.82.87.E3.81.86.EF.BC.9F" name=".E5.85.83.E3.81.AE.E3.83.89.E3.82.AD.E3.83.A5.E3.83.A1.E3.83.B3.E3.83.88.E3.81.AB.E3.81.AA.E3.81.84.E7.A9.BA.E3.81.AE_.23text_.E3.83.8E.E3.83.BC.E3.83.89.E3.81.8C.E3.81.84.E3.81.A3.E3.81.B1.E3.81.84.E3.81.82.E3.82.8A.E3.81.BE.E3.81.99.E3.80.82.E3.81.93.E3.82.8C.E3.82.89.E3.81.AF.E4.BD.95.E3.81.A7.E3.81.97.E3.82.87.E3.81.86.EF.BC.9F_.E3.81.A9.E3.81.86.E3.81.97.E3.81.A6.E5.AD.98.E5.9C.A8.E3.81.97.E3.81.A6.E3.80.81.E3.81.A9.E3.81.86.E3.81.99.E3.82.8C.E3.81.B0.E5.8F.96.E3.82.8A.E9.99.A4.E3.81.91.E3.82.8B.E3.81.AE.E3.81.A7.E3.81.97.E3.82.87.E3.81.86.EF.BC.9F">元のドキュメントにない空の #text ノードがいっぱいあります。これらは何でしょう？ どうして存在して、どうすれば取り除けるのでしょう？</h3> + +<p>これらのテキストノードは実際は要素間の改行とスペースなのです。どうしてそれらを表示するのかについての長々とした議論は {{ Bug(26179) }} で行われています。</p> + +<p>都合の良いことに、{{ mediawiki.external('表示') }} メニューの {{ mediawiki.external('ホワイトスペースノードを表示') }} からチェックを外せば、Inspector の中でこれらの <a href="ja/Whitespace_in_the_DOM">ホワイトスペースノード</a> を隠せます。ただし、すべての空のテキストノードを隠せるわけではありません。連続するホワイトスペースをユーザエージェントがまとめることを CSS の <code><a class="external" href="http://www.w3.org/TR/CSS21/text.html#propdef-white-space">white-space</a></code> プロパティの値で制限しているノードが隠されることはありません。</p> + +<h3 id="DOM_.E3.83.84.E3.83.AA.E3.83.BC.E4.B8.AD.E3.81.AE.E7.89.B9.E5.AE.9A.E3.81.AE.E3.83.8E.E3.83.BC.E3.83.89.E3.82.92.E6.8E.A2.E3.81.99.E3.81.AE.E3.81.8C.E5.A4.A7.E5.A4.89.E3.81.A7.E3.81.99.E3.80.82.E3.83.84.E3.83.AA.E3.83.BC.E4.B8.AD.E3.82.92.E6.8E.A2.E3.81.99.E4.BB.A5.E5.A4.96.E3.81.AB.E3.82.82.E3.81.A3.E3.81.A8.E6.89.8B.E6.97.A9.E3.81.8F.E3.81.A7.E3.81.8D.E3.82.8B.E6.96.B9.E6.B3.95.E3.81.AF.E3.81.82.E3.82.8A.E3.81.BE.E3.81.9B.E3.82.93.E3.81.8B.EF.BC.9F" name="DOM_.E3.83.84.E3.83.AA.E3.83.BC.E4.B8.AD.E3.81.AE.E7.89.B9.E5.AE.9A.E3.81.AE.E3.83.8E.E3.83.BC.E3.83.89.E3.82.92.E6.8E.A2.E3.81.99.E3.81.AE.E3.81.8C.E5.A4.A7.E5.A4.89.E3.81.A7.E3.81.99.E3.80.82.E3.83.84.E3.83.AA.E3.83.BC.E4.B8.AD.E3.82.92.E6.8E.A2.E3.81.99.E4.BB.A5.E5.A4.96.E3.81.AB.E3.82.82.E3.81.A3.E3.81.A8.E6.89.8B.E6.97.A9.E3.81.8F.E3.81.A7.E3.81.8D.E3.82.8B.E6.96.B9.E6.B3.95.E3.81.AF.E3.81.82.E3.82.8A.E3.81.BE.E3.81.9B.E3.82.93.E3.81.8B.EF.BC.9F">DOM ツリー中の特定のノードを探すのが大変です。ツリー中を探す以外にもっと手早くできる方法はありませんか？</h3> + +<p>ご心配なく。ノード名、ID、あるいは属性と値の組み合わせで検索できます。検索したいドキュメントを調べている Inspector ウィンドウの {{ mediawiki.external('検索') }} メニューから {{ mediawiki.external('ノードを検索') }} を選んで検索条件を入力すればよいのです。</p> + +<p>ノードについて何も分かっていないなら、それをクリックして選択してみることもできます。そのノードをビューの中に表示させておいて、{{ mediawiki.external('検索') }} メニューから {{ mediawiki.external('クリックで要素を選択') }} を選び、それから調べたい要素をクリックするのです。</p> + +<div class="originaldocinfo"> +<h2 id=".E5.8E.9F.E6.96.87.E6.9B.B8.E3.81.AE.E6.83.85.E5.A0.B1" name=".E5.8E.9F.E6.96.87.E6.9B.B8.E3.81.AE.E6.83.85.E5.A0.B1">原文書の情報</h2> + +<ul> + <li>著者: Christopher Aillon</li> + <li>最終更新日: November 11, 2003</li> + <li>著作権: Portions of this content are © 1998–2007 by individual mozilla.org contributors; content available under a Creative Commons license | <a class="external" href="http://www.mozilla.org/foundation/licensing/website-content.html">詳細</a></li> +</ul> +</div> + +<div class="noinclude"> </div> + +<p>{{ languages( { "en": "en/DOM_Inspector_FAQ" } ) }}</p> diff --git a/files/ja/orphaned/tools/add-ons/dom_inspector/index.html b/files/ja/orphaned/tools/add-ons/dom_inspector/index.html new file mode 100644 index 0000000000..24db8f727c --- /dev/null +++ b/files/ja/orphaned/tools/add-ons/dom_inspector/index.html @@ -0,0 +1,69 @@ +--- +title: DOM Inspector +slug: DOM_Inspector +tags: + - DOM + - 'DOM:Tools' + - DOM_Inspector + - Extensions + - 'Extensions:Tools' + - Themes + - 'Themes:Tools' + - Tools + - Web Development + - 'Web Development:Tools' + - XUL + - 'XUL:Tools' +translation_of: Tools/Add-ons/DOM_Inspector +--- +<div>{{ToolsSidebar}}</div><p><strong>DOM Inspector</strong>（別名 <strong>DOMi</strong>）は、文書（普通はウェブページまたは <a href="ja/XUL">XUL</a> ウィンドウ）の <a href="ja/DOM">Document Object Model</a> を調査、ブラウズ、編集することができる開発ツールです。ドキュメントとその中のすべてのノードを様々な視点から見ることができる二分割ウィンドウを用いて DOM の階層を探索することができます。</p> + +<div class="note"> +<p>このツールは Firefox や Thunderbird のような XUL ベースのアプリケーションのためのアドオンです。 Firefox の中に組み込まれた DOM インスペクターについては、 <a href="/ja/docs/Tools/Page_Inspector">Page Inspector</a> のドキュメントをご覧ください。</p> +</div> + +<h2 id="Documentation" name="Documentation">ドキュメンテーション</h2> + +<dl> + <dt><a href="/ja/DOM_Inspector/Introduction_to_DOM_Inspector" title="ja/DOM_Inspector/Introduction_to_DOM_Inspector">DOM Inspector 入門</a></dt> + <dd>DOM Inspector を始めるのに役立つガイド付きのチュートリアルです。</dd> +</dl> + +<dl> + <dt><a href="/ja/DOM_Inspector/DOM_Inspector_FAQ" title="ja/DOM_Inspector/DOM_Inspector_FAQ">DOM Inspector FAQ</a></dt> + <dd><small>DOM Inspector に関するよくある質問への解答です。</small></dd> +</dl> + +<dl> + <dt><a class="external" href="http://kb.mozillazine.org/DOM_Inspector">MozillaZine の DOM Inspector ページ</a> (英語)</dt> + <dd>DOM Inspector に関するさらなる情報が載っています。</dd> + <dt><a href="http://asurkov.blogspot.com/2013/02/build-dom-inspector.html">DOM Inspector をビルドするには</a> (英語)</dt> + <dd>ソースファイルから DOM Inspector をビルドするブログの投稿です。</dd> +</dl> + +<h2 id="Getting_DOM_Inspector" name="Getting_DOM_Inspector">DOM Inspector の入手</h2> + +<dl> + <dt>Firefox と Thunderbird</dt> + <dd><a class="link-https" href="https://addons.mozilla.org/ja/firefox/addon/6622" title="https://addons.mozilla.org/ja/firefox/addon/6622">DOM Inspector</a> は AMO のウェブサイトからダウンロードしてインストールできます。（AMO を Firefox で閲覧している Thunderbird のユーザーはインストールのリンクを保存するか、 <a class="link-https" href="https://addons.mozilla.org/ja/thunderbird/addon/6622" title="https://addons.mozilla.org/ja/thunderbird/addon/6622">DOM Inspector for Thunderbird</a> のページに移動してください。）</dd> +</dl> + +<dl> + <dt>Thunderbird 2</dt> + <dd><a class="link-https" href="https://addons.mozilla.org/ja/thunderbird/addon/1806">DOM Inspector for Thunderbird 2</a> が <a class="link-https" href="https://addons.mozilla.org/ja/thunderbird/">Thunderbird Add-ons</a> から利用できます。または、以下のオプションで自分自身で Thunderbird をビルドしてください。</dd> +</dl> + +<pre>ac_add_options --enable-extensions="default inspector" +ac_add_options --enable-inspector-apis +</pre> + +<dl> + <dt>Mozilla Suite と SeaMonkey</dt> + <dd><small>{{ mediawiki.external('ツール') }} メニューから {{ mediawiki.external('Web 開発') }} > {{ mediawiki.external('DOM Inspector') }} を選択してください。{{ mediawiki.external('編集') }} > {{ mediawiki.external('設定') }} > {{ mediawiki.external('詳細') }} > {{ mediawiki.external('DOM Inspector') }} でサイドバーパネルをインストールすれば、インスペクタパネルを開いたまま Web サイトを訪れるだけで DOM を検査できます。</small></dd> +</dl> + +<h2 id="Report_a_bug_in_DOM_Inspector" name="Report_a_bug_in_DOM_Inspector">DOM Inspector のバグを報告する</h2> + +<p>便利なように、<a href="https://bugzilla.mozilla.org/enter_bug.cgi?format=__default__&product=Other%20Applications&component=DOM%20Inspector">Bugzilla の "DOM Inspector"</a> と名付けられたコンポーネントを使用してください。</p> + +<p>そこにいる <a href="https://hg.mozilla.org/dom-inspector" title="https://hg.mozilla.org/dom-inspector">DOM Inspector のコード</a> を知っている人を探すには、 <a class="link-https" href="https://wiki.mozilla.org/Modules/All#DOM_Inspector" title="https://wiki.mozilla.org/Modules/All#DOM_Inspector"><span class="external">DOM Inspector module listing</span></a> 参照してください。</p> diff --git a/files/ja/orphaned/tools/add-ons/dom_inspector/internals/index.html b/files/ja/orphaned/tools/add-ons/dom_inspector/internals/index.html new file mode 100644 index 0000000000..c67e458229 --- /dev/null +++ b/files/ja/orphaned/tools/add-ons/dom_inspector/internals/index.html @@ -0,0 +1,245 @@ +--- +title: DOM インスペクタの内部構造 +slug: DOM_Inspector/Internals +tags: + - コード + - ソース + - ツール + - 組織 +translation_of: Tools/Add-ons/DOM_Inspector/Internals +--- +<div>{{ToolsSidebar}}</div> + +<p>DOMインスペクタには3つの主要な面があります。 あなたが最も慣れ親しんでいるのは、<code>inspector.xul</code>ベースの主UIです。これは、DOM Inspectorが明示的にサポートしているアプリケーション（オーバーレイを介して配置されたメニューアイテム）からCtrl + Shift + I（またはCmd + Shift + I）を押すと表示される2ペインのインスペクタです。</p> + +<p><img alt="DOM Inspector primary UI inspecting browser.xul" class="default internal" src="/@api/deki/files/4686/=domi-edit-search-onclick.png"></p> + +<p>DOMインスペクタのプライマリUIに加えて、若干異なる（オブジェクトインスペクタとSeaMonkeyで使用されるDOMインスペクタのサイドバー）2つのトップレベルのインスペクタがあります。最初に、<code>inspector.xul</code>とそのエントリポイントに焦点を当て、後でこれらの他のインスペクタがどのように異なるかを説明するために焦点を絞ります。</p> + +<h2 id="高水準の観点からのDOMインスペクタ">高水準の観点からのDOMインスペクタ</h2> + +<p>DOMインスペクタのプライマリUIは、いくつかのツールバーと<strong>パネルセット</strong>で構成されています。パネルセットには2つの<strong>パネル</strong>が含まれています。 一方のパネルは検査された文書の変更に反応し、他方のパネルは第1パネルの選択の変化に反応する。これらはそれぞれドキュメントパネルとオブジェクトパネルです。（内部的には、パネルは「ペイン」と呼ばれることがありますが、パネルセットは常に「パネルセット」と呼ばれます）。</p> + +<p>パネルの目的は利用可能なビューアを管理することです。各パネルの上部には、ビューアリストから表示するビューア、現在アクティブなビューアの名前を表示するラベル、ビューア固有のコマンドを発行するための別のメニューボタンを選択できるメニューボタンが含まれているツールバーがあります 。</p> + +<p>ビューアは動的にロードされます。 パネルをあるビューアから別のビューアに切り替えると、古いビューアが破棄され、新しいビューアがその場所にロードされます。このようにして、パネルセットとパネルはフレームセットとフレームのように機能します。各パネルには実際には匿名の<code><a href="/ja/docs/Mozilla/Tech/XUL/browser" title="en/XUL/browser">browser</a></code>が含まれており、個々のビューアはブラウザに読み込まれた別々のドキュメントに存在するため、この比較は非常に適切です。 この分離により、視聴者はXUL、CSS、またはJSの衝突を心配することなく、ビューアのXULを独自のドキュメントで定義し、独自のスコープでロードすることができます。 これのもう1つの便利な結果は、適切に設定された開発プロファイルを使用すると、現在のビューアから戻って戻るだけで、開発の変更の影響をほとんど見ることができるということです。</p> + +<p>ビューアが書かれている方法についてこれを知っているので、私たちはDOMインスペクタのソースがどのように整理されているかを見ることができます。</p> + +<h2 id="ソースコードの構成">ソースコードの構成</h2> + +<p>DOM インスペクタリポジトリの最上位ディレクトリの内容は次のようになります</p> + +<ul> + <li>base/ + <ul> + <li>js/ + <ul> + <li>inspector-cmdline.js</li> + <li>Makefile.in</li> + </ul> + </li> + </ul> + </li> + <li>build/ + <ul> + <li>install.js</li> + <li>Makefile.in</li> + </ul> + </li> + <li>resources/ + <ul> + <li>content/ + <ul> + <li><var>…</var></li> + </ul> + </li> + <li>locale/ + <ul> + <li><var>…</var></li> + </ul> + </li> + <li>skin/ + <ul> + <li><var>…</var></li> + </ul> + </li> + <li>Makefile.in</li> + </ul> + </li> + <li>install.rdf</li> + <li>jar.mn</li> + <li>Makefile.in</li> + <li>makefiles.sh</li> +</ul> + +<p>ほとんどすべての興味深いものは resources/content/ にあります。その内容は次のようになります。</p> + +<ul> + <li>extensions/ + <ul> + <li>…</li> + </ul> + </li> + <li>jsutil/ + <ul> + <li>…</li> + </ul> + </li> + <li>prefs/ + <ul> + <li>…</li> + </ul> + </li> + <li>res/ + <ul> + <li>…</li> + </ul> + </li> + <li>tests/ + <ul> + <li>…</li> + </ul> + </li> + <li>viewers/ + <ul> + <li>…</li> + </ul> + </li> + <li>browserOverlay.xul</li> + <li>commandOverlay.xul</li> + <li>editingOverlay.xul</li> + <li>Flasher.js</li> + <li>hooks.js</li> + <li>inspector.css</li> + <li>inspector.js</li> + <li>inspectorOverlay.xul</li> + <li>inspector.xml</li> + <li>inspector.xul</li> + <li>keysetOverlay.xul</li> + <li>object.js</li> + <li>object.xul</li> + <li>popupOverlay.xul</li> + <li>sidebar.js</li> + <li>sidebar.xul</li> + <li>statusbarOverlay.xul</li> + <li>tasksOverlay-cz.xul</li> + <li>tasksOverlay-ff.xul</li> + <li>tasksOverlay-mobile.xul</li> + <li>tasksOverlay-sb.xul</li> + <li>tasksOverlay-tb.xul</li> + <li>tasksOverlay.xul</li> + <li>toolboxOverlay.xul</li> + <li>utils.js</li> + <li>venkmanOverlay.xul</li> + <li>ViewerRegistry.js</li> +</ul> + +<h3 id="オーバーレイ">オーバーレイ</h3> + +<p>オーバーレイがたくさんあることに気付くでしょう。 いくつかのオーバーレイは、ホスト統合オーバーレイとして記述することも、共有構造オーバーレイとして記述することもできます。</p> + +<h4 id="ホスト統合オーバーレイ">ホスト統合オーバーレイ</h4> + +<p>DOM Inspectorは汎用の拡張機能であり、Mozillaツールキットホストアプリケーションでの使用に適しています。 しかし、DOM Inspectorをホストアプリケーションで使用するには、メニュー項目やCtrl + Shift + I（またはCmd + Shiftなどの省略可能なキーボードショートカットなど）でDOM Inspectorを起動する方法が必要です + I）。 ホストアプリケーションはこれらの機能を提供する必要があります（通常、DOM Inspectorにはアプリケーションもバンドルされています）。または、DOM Inspectorは、ホスト統合オーバーレイで独自のメニュー項目とキーボードショートカットを提供することによって明示的にサポートする必要があります。</p> + +<p>DOM インスペクタは、独自のホスト統合オーバーレイを提供することにより、いくつかのMozillaプロジェクトアプリケーションを明示的にサポートしています。 これらのオーバーレイは次のとおりです。</p> + +<ul> + <li>browserOverlay.xul</li> + <li>tasksOverlay-cz.xul</li> + <li>tasksOverlay-ff.xul</li> + <li>tasksOverlay-mobile.xul</li> + <li>tasksOverlay-sb.xul</li> + <li>tasksOverlay-tb.xul</li> + <li>tasksOverlay.xul</li> + <li>venkmanOverlay.xul</li> + <li>prefs/prefsOverlay.xul</li> +</ul> + +<p><a href="https://developer.mozilla.org/ja/docs/DOM_Inspector/en/chrome.manifest" title="en/chrome.manifest">chrome manifest</a> をさらに調べると、DOM インスペクタはそのプライマリウィンドウで条件付きオーバーレイも使用することがわかります。</p> + +<pre><code>overlay chrome://inspector/content/inspector.xul chrome://communicator/content/utilityOverlay.xul application={92650c4d-4b8e-4d2a-b7eb-24ecf4f6b63a} +overlay chrome://inspector/content/inspector.xul chrome://communicator/content/tasksOverlay.xul application={92650c4d-4b8e-4d2a-b7eb-24ecf4f6b63a}</code> +</pre> + +<pre><code>overlay chrome://inspector/content/inspector.xul chrome://browser/content/baseMenuOverlay.xul application={ec8030f7-c20a-464f-9b0e-13a3a9e97384}</code> +</pre> + +<p>これらのホスト提供のオーバーレイにより、DOM インスペクタはホストアプリケーションと同様のルックアンドフィールを採用することができます。(上記はそれぞれ SeaMonkey と Firefox)</p> + +<p>resources/contents/ ディレクトリには、ホスト統合オーバーレイのカテゴリに該当しないオーバーレイがいくつかあります。これは、DOM インスペクタも共有オーバーレイを使用して独自のUIを構築するためです。</p> + +<h4 id="共有構造オーバーレイ">共有構造オーバーレイ</h4> + +<p>DOM インスペクタのメインのUIであるinspector.xulの内容を見てみると、目に見える要素はほとんどないことがわかります。この記事の執筆時点では、空の<code><a href="/ja/docs/Mozilla/Tech/XUL/menubar" title="en/XUL/menubar">menubar</a></code>と空の<code><a href="/ja/docs/Mozilla/Tech/XUL/toolbar" title="en/XUL/toolbar">toolbar</a></code>を含む<code><a href="/ja/docs/Mozilla/Tech/XUL/toolbox" title="en/XUL/toolbox">toolbox</a></code>と、空の<code><a href="/ja/docs/Mozilla/Tech/XUL/vbox" title="en/XUL/vbox">vbox</a></code>があります。</p> + +<pre><code> <toolbox id="tbxInsToolbox"> + <menubar id="mbrInspectorMain"/> + <toolbar id="tbInspectorPrimary"/> + </toolbox> + + <vbox id="bxInspectorMain" flex="1"/></code> +</pre> + +<p>ここで定義されているメニュー、ツールバー項目などはありません。<code><a href="/ja/docs/Mozilla/Tech/XUL/keyset" title="en/XUL/keyset">key</a></code> や <code><a href="/ja/docs/Mozilla/Tech/XUL/commandset" title="en/XUL/commandset">commandset</a></code> など、表示されない要素のほとんどは inspector.xul で定義されていません。これらは一連のオーバーレイから取り込まれ、DOMインスペクタの UI を定義する XUL を個別のユニットに編成することができます。inspector.xul 自体は主な DOM インスペクタウィンドウの基本的な構造とレイアウトを説明するスケルトンであり、ほとんどのコンテンツはオーバーレイによって追加されたままになっています。</p> + +<p>モジュラーオーバーレイを使用すると、すべてのオーバーレイが複数のコンシューマによって共有されるわけではありませんが、一般的なXULをDOM インスペクタのUIを構成するさまざまなドキュメントで共有することもできます。単一コンシューマオーバレイは、組織専用です。</p> + +<p>場合によっては、オーバーレイは他のオーバーレイによってオーバーレイされます。ホスト統合に使用されるオーバーレイを無視して、オーバーレイをオーバーレイするファイルにオーバーレイを子として接続することによって得られるツリー構造を想像すると、特定のファイルのホストに依存しないオーバーレイツリーを視覚化できます。inspector.xul用に拡張されたホストに依存しないオーバーレイツリーがあります：</p> + +<ul> + <li><a class="external" rel="freelink">chrome://inspector/content/inspector.xul</a> + + <ul> + <li><a class="external" rel="freelink">chrome://inspector/content/inspectorOverlay.xul</a></li> + <li><a class="external" rel="freelink">chrome://inspector/content/toolboxOverlay.xul</a></li> + <li><a class="external" rel="freelink">chrome://inspector/content/popupOverlay.xul</a> + <ul> + <li><a class="external" rel="freelink">chrome://inspector/content/editingOverlay.xul</a></li> + <li><a class="external" rel="freelink">chrome://inspector/content/viewers/d...pupOverlay.xul</a></li> + <li><a class="external" rel="freelink">chrome://inspector/content/viewers/s...pupOverlay.xul</a></li> + </ul> + </li> + <li><a class="external" rel="freelink">chrome://inspector/content/commandOverlay.xul</a> + <ul> + <li><a class="external" rel="freelink">chrome://inspector/content/viewers/d...andOverlay.xul</a></li> + </ul> + </li> + <li><a class="external" rel="freelink">chrome://inspector/content/keysetOverlay.xul</a> + <ul> + <li><a class="external" rel="freelink">chrome://inspector/content/viewers/d...setOverlay.xul</a></li> + </ul> + </li> + <li><a class="external" rel="freelink">chrome://inspector/content/statusbarOverlay.xul</a></li> + <li><a class="external" rel="freelink">chrome://global/content/globalOverlay.xul</a></li> + </ul> + </li> +</ul> + +<p>(ビューアのサブディレクトリ (viewers/dom およびviewers/styleRules) からのオーバーレイは、オーバーレイされたファイル内の <code>xul-overlay</code> 処理命令を使用して明示的にインポートされるのではなく、DOM インスペクタのクロムマニフェストで <a href="/ja/docs/Mozilla/Chrome_Registration" title="/en/chrome.manifest#overlay"><code>overlay</code> ディレクティブ</a> の結果としてロードされることに注意してください。)</p> + +<dl> + <dt>inspectorOverlay.xul</dt> + <dd> + <p>これは、依存関係を含む最上位のインスペクタが必要とするスクリプトをインポートします。 さらに、DOMインスペクタウィンドウの本体、つまり、パネルセット、ドキュメントおよびオブジェクトビューアパネル、およびドキュメントブラウザペインのコンテンツを定義します。 （ブラウザー・ペインは、文書およびオブジェクト・パネルが存在するという意味ではビューアー・パネルではなく、パネル・セットに関して上で定義したパネルの種類であり、ここでは「ペイン」がブラウザー・ペインに関して緩やかな意味で使用されています 一般的なUIフィクスチャについて説明します）。</p> + </dd> + <dt>toolboxOverlay.xul</dt> + <dd> + <p>このオーバーレイは、ツールバーのボタン、ロケーションバー、および「Inspect」ボタンを含むインスペクタツールボックスに表示されます。 toolboxOverlay.xulは、メニュー自体の内容を定義することなく、メニューバーの構造も定義します。</p> + </dd> + <dt>popupOverlay.xul</dt> + <dd> + <p>このオーバーレイは、メニューバーのメニューの静的構造の大部分を定義していますが、いくつかの例外があります。明らかな理由から、動的メニューの内容はここでは定義されていません。動的メニューには、[ファイル]メニューの[インスペクション]メニュー（[コンテンツドキュメントの検査]および[クロムドキュメントの検査]）ポップアップ、[表示]メニューの[ドキュメントビューア]および[オブジェクトビューア]メニューがあります。そのビューアのポップアップオーバーレイ（resources / content / viewer / dom / popupOverlay.xul）によって、DOMノードビューア（「Blink Selected Element」など）のみに影響を与える「表示」メニューの設定メニューが追加されます。 DOMメニュービューア以外の他のビューアはこれらの機能をサポートしていないので、[編集]メニューの[検索]メニューと[クリックして要素を選択]メニュー項目でも同じことが当てはまります。<br> + <br> + 他の編集メニュー項目は、複数のビューアのコンテキストメニューでも使用されます。そのため、ここでは menuitems の ID だけが参照され、 editingOverlay.xul から完全な定義がインポートされます。コンテキストメニューにこれらのメニューアイテムの1つまたは複数を含むビューアは、同じプラクティスに従います。<br> + <br> + インスペクタメニューに使用されるツールチップ（文書のタイトル（存在する場合）とそのメニューアイテムのURIを示すために使用されるもの）もここで定義されます。</p> + </dd> + <dt>commandOverlay.xul</dt> + <dd>外部 <code><a href="/ja/docs/Mozilla/Tech/XUL/command" title="en/XUL/command">command</a></code> 要素に委譲する popupOverlay.xul で提供されるメニュー項目には、ここで定義されたコマンドがあります。</dd> + <dt>keysetOverlay.xul</dt> + <dd>いくつかの popupOverlay.xul 提供のメニュー項目には、ここで定義された <code><a href="/ja/docs/Mozilla/Tech/XUL/key" title="en/XUL/key">key</a></code> があります。この記事の執筆時点では、編集メニュー項目に対応するキーはすべて正当な理由でeditingOverlayに存在します。</dd> + <dt>statusbarOverlay.xul</dt> + <dd>これは、DOM インスペクタのステータスバーの内容を定義します。 DOM インスペクタにはステータスバーがありませんので、これはまったく役に立たないものです。</dd> +</dl> diff --git a/files/ja/orphaned/tools/add-ons/dom_inspector/introduction_to_dom_inspector/index.html b/files/ja/orphaned/tools/add-ons/dom_inspector/introduction_to_dom_inspector/index.html new file mode 100644 index 0000000000..8cbdc19ec0 --- /dev/null +++ b/files/ja/orphaned/tools/add-ons/dom_inspector/introduction_to_dom_inspector/index.html @@ -0,0 +1,96 @@ +--- +title: DOMインスペクタのイントロダクション +slug: DOM_Inspector/Introduction_to_DOM_Inspector +tags: + - DOM インスペクタ +translation_of: Tools/Add-ons/DOM_Inspector/Introduction_to_DOM_Inspector +--- +<div>{{ToolsSidebar}}</div> + +<p>DOMインスペクタは Mozilla の拡張機能で、SeaMonkey の <strong>Tools > Web Development</strong> メニューからアクセスすることも、FirefoxとThunderbirdのToolsメニューからDOMインスペクタメニュー項目を選択することも、Ctrl/Cmd+Shift+I を使って開くこともできます。 DOMインスペクタはスタンドアロンです。 すべてのツールキットアプリケーションをサポートしており、独自のXULRunnerアプリに組み込むことも可能です。DOMインスペクタは、<a href="/ja/docs/DOM/DOM_Reference">DOM</a>の状態を検証するサニティチェックとして機能したり、必要に応じてDOMを手で操作するために使用できます。</p> + +<div class="note"><strong>メモ:</strong> Firefox 3以降、FirefoxではデフォルトでDOMインスペクタは含まれていません。MozillaアドオンWebサイトから<a href="https://addons.mozilla.org/ja/firefox/addon/dom-inspector-6622/">ダウンロードしてインストール</a>する必要があります。</div> + +<p>最初にDOM Inspectorを起動すると、Mozillaのメインブラウザのような2つのウィンドウのアプリケーションウィンドウが表示されます。 ブラウザと同様、DOMインスペクタにはアドレスバーと同じメニューがあります。 SeaMonkeyでは、追加のグローバルメニューが利用可能になります。</p> + +<p><img alt="domi.png" class="default internal" src="/@api/deki/files/4684/=domi.png"></p> + +<h2 id="ドキュメントの検査">ドキュメントの検査</h2> + +<p>DOMインスペクタが開くと、ホストアプリケーションに応じて関連付けられたドキュメントが読み込まれる場合と読み込まれない場合があります。 DOM インスペクタが自動的に文書を読み込んでいない場合や、検査したい文書以外の文書を読み込んでいない場合は、目的の文書をいくつか選択することができます。</p> + +<h3 id="File_.3E_Inspect_a_Window_.3E" name="File_.3E_Inspect_a_Window_.3E">コンテンツ文書の検査</h3> + +<p>Inspect Content DocumentのmenupopupはFileメニューからアクセスでき、現在ロードされているコンテンツドキュメントを一覧表示します。 FirefoxとSeaMonkeyブラウザでは、これらはタブで開いたWebページになります。ThunderbirdとSeaMonkey Mail and Newsでは、表示しているメッセージはここに表示されます。<img alt="domi-inspect-content-popup.png" class="default internal" src="/@api/deki/files/4690/=domi-inspect-content-popup.png"></p> + +<h3 id="File_.3E_Inspect_a_Window_.3E" name="File_.3E_Inspect_a_Window_.3E">Chromeドキュメントの検査</h3> + +<p>Inspect Chromeドキュメントのmenupopupには[ファイル]メニューからアクセスでき、現在ロードされているChromeウィンドウとサブドキュメントのリストが表示されます。ブラウザウィンドウとDOMインスペクタはすでに開いてこのリストに表示されている可能性があります。DOMインスペクタは、開いているすべてのウィンドウを追跡します。そのため、DOMインスペクタで特定のウィンドウのDOMを検査するには、通常通りにそのウィンドウにアクセスし、動的に更新されるmenulistからタイトルを選択します。</p> + +<p><img alt="domi-inspect-chrome-popup.png" class="default internal" src="/@api/deki/files/4689/=domi-inspect-chrome-popup.png"></p> + +<h3 id="File_.3E_Inspect_a_URL..." name="File_.3E_Inspect_a_URL...">任意のURLの検査</h3> + +<p>また、FileメニューのURL menuitemのInspectを使用するか、DOM InspectorのアドレスバーにURLを入力してInspectをクリックするかenterを押して、任意のURLのDOMを調べることもできます。 たとえば、アドレスバーにhttp://www.mozilla.orgを入力し、mozilla.orgホームページのDOM構造を確認できます。<br> + <br> + このアプローチを使用してクロム文書を検査<strong>しないでください</strong>。 代わりに、ドキュメントが通常の手段でロードされていることを確認し、検査のためにInspect Chromeドキュメントのmenupopupを使用して選択します。</p> + +<p><img alt="domi-inspect-chrome-popup.png" class="default internal" src="/@api/deki/files/4693/=domi-inspecting-mozilla.org.png"></p> + +<p>この方法でWebページを検査すると、DOM Inspectorウィンドウの下部にあるブラウザペインが開き、Webページが表示されます。 これにより、別のブラウザウィンドウを使用せずに、またはアプリケーションにブラウザをまったく埋め込まなくても、DOMインスペクタを使用することができます。 ブラウザペインに余分なスペースが必要な場合は、ブラウザペインを閉じることができますが、操作の視覚的な影響を監視することはできません。</p> + +<h2 id="Using_the_DOM_Inspector" name="Using_the_DOM_Inspector">DOM インスペクタの使用</h2> + +<p>興味のあるページまたはクロムのドキュメントを開くと、ドキュメントペインにDOMノードビューアがロードされ、オブジェクトペインにDOMノードビューアが読み込まれます。 DOM Nodesビューアには、DOMの構造化された階層的なビューが必要です。 ドキュメントペインをクリックすると、ビューアがリンクされていることがわかります。 DOMノードビューアから新しいノードを選択するたびに、DOMノードビューアが自動的に更新され、そのノードの情報が反映されます。 リンクされたビューアは、DOMインスペクタの使用方法を学ぶときに理解した最初の主要な側面です。</p> + +<h3 id="DOM_Inspector_Information_Types" name="DOM_Inspector_Information_Types">DOM インスペクタビューワー</h3> + +<p>これらのビューアは、DOMインスペクタが提供する2人の視聴者に過ぎないことに注意してください。他のビューアを使用することは可能ですが、今のところDOMノードビューアとDOMノードビューアの説明に固執します。<br> + <br> + DOM InspectorのドキュメントペインにあるDOM Nodesビューアを使用して、興味のあるノードを見つけて調べることができます。これがあなたのウェブとアプリケーションの開発にもたらした最大かつ最も直接的な利点の1つは、ページの興味ある部分またはユーザインターフェースの部分が定義されているマークアップおよびノードを含む。 DOMインスペクタの一般的な使い方の1つは、ユーザインターフェイスで使用されている特定のアイコンの名前と場所を見つけることです。これは簡単な作業ではありません。クロムドキュメントを調べている場合、DOMノードビューアでノードを選択すると、それらのノードのレンダリングされたバージョンがユーザーインターフェイス自体で強調表示されます。 （DOM Inspector APIのフラッシャーが特定のプラットフォームで正しく機能しないようにするバグがあることに注意してください）。<br> + <br> + たとえば、メインブラウザウィンドウを調べて、DOMノードビューアでノードを選択した場合（browser.xulにロードされているスクリプト要素の無限リストの場合のように、表示可能なUIを持たない要素を除く）、ブラウザインターフェイスのさまざまな部分が赤く点滅して強調表示されています。構造をトラバースして、DOMツリーの最上部の部分から、ユーザーが選択した検索エンジンを使用してクエリを実行できるようにする "search-go-button"アイコンなど、下位レベルのノードに移動できます。</p> + +<p><img alt="domi-edit-search-onclick.png" class="default internal" src="/@api/deki/files/4686/=domi-edit-search-onclick.png"></p> + +<p>ここで、「検索 - 移動 - ボタン」ノードのようなノードを選択すると、複数のビューアのいずれかを選択して、そのノードに関する情報をDOM Inspectorアプリケーションウィンドウのオブジェクトペインに表示できます。 menupopupはオブジェクトペインの左上隅からアクセスします。</p> + +<p><img alt="domi-object-viewers.png" class="default internal" src="/@api/deki/files/4692/=domi-object-viewers.png"></p> + +<p>検索の実行アイコンを表示するためにファイルの実際の名前が使用されているかどうかを確認するには、このメニューからCSSルールビューアを選択して、適用されているさまざまなセレクタとルールを確認します。要素に検索アイコンを適用するルールは、クラス単純セレクタを使用し、list-style-imageプロパティを使用して現在のテーマのファイルを指し示します。<br> + <br> + ビューアメニューから利用可能なビューアのリストは、DOMインスペクタの検査能力がどれだけ広範囲であるかを示しています。以下の説明は、これらの視聴者の概要を示しています。<br> + <br> + DOMノードビューアには、ノードノードの属性、またはテキストノード、コメント、処理命令のテキストコンテンツが表示されます。属性とテキストの内容を編集することもできます。<br> + <br> + Box Modelビューアは、配置とサイズを含むXULとHTML要素に関するさまざまな指標を提供します。<br> + <br> + XBLバインディングビューアには、要素に添付されたXBLバインディングが一覧表示されます。バインディングが別のバインディングを拡張する場合、バインディングmenulistは、それらを「ルート」バインディングに降順でリストします。<br> + <br> + CSSルールビューアには、ノードに適用されるCSSルールが表示されます。また、スタイルシートビューアと組み合わせて使用すると、CSSルールビューアには、そのスタイルシートから認識されたすべてのルールが順番にリストされます。プロパティを編集することもできます。擬似要素に適用されるルールは表示されません。<br> + <br> + JavaScript Objectビューアは、オブジェクトペインのサブジェクトの階層ツリーを提供します。 JavaScriptオブジェクトビューアでは、コンテキストメニューで適切なメニュー項目を選択することによってJavaScriptを評価することもできます。</p> + +<h3 id="DOM_ノードビューワーの基本的なアクション">DOM ノードビューワーの基本的なアクション</h3> + +<h4 id="クリックで要素を選択する">クリックで要素を選択する</h4> + +<p>DOM インスペクタのもう一つの強力なインタラクティブな機能は、DOM インスペクタを開いてこの機能を有効にしたときに、<strong style="font-weight: bold;">Edit</strong><strong> > Select Element</strong> をクリックして選択するか、DOM インスペクタアプリケーションの左上にある小さな虫めがねのアイコンをクリックすると、 ロードされたWebページのどこかをクリックするか、クロム文書を調べると、クリックした要素がDOMノードビューアのドキュメントペインに表示され、オブジェクトペインに表示されます。</p> + +<h4 id="DOM内のノードの検索">DOM内のノードの検索</h4> + +<p>DOMを検査するもう1つの方法は、ID、クラス、または属性で興味のある特定の要素を検索することです。 <strong>Edit > Find Nodes...</strong> を選択するか <code>Ctrl + F</code> を押すと、DOM Inspectorには、さまざまな方法で要素を検索できる検索ダイアログが表示され、<code><F3></code> ショートカットキーを使用して段階的に検索します。</p> + +<p><img alt="domi-find-appcontent.png" class="default internal" src="/@api/deki/files/4687/=domi-find-appcontent.png"></p> + +<h4 id="動的にDOMを更新する">動的にDOMを更新する</h4> + +<p>この序論で言及するもう1つの機能は、DOM Inspectorが、Webページ、ユーザーインターフェイス、およびその他の要素についてDOMに反映された情報を動的に更新できることです。 DOM Inspectorが特定のノードまたはサブツリーに関する情報を表示すると、個々のノードとその値が表示されます（DOMでは、属性は通常、要素のサブノードです）。 これらの属性の値を編集できるメニュー項目があるコンテキストメニューと編集メニューから、このリスト内の個々の項目に対してアクションを実行できます。</p> + +<p><img alt="domi-edit-search-onclick.png" class="default internal" src="/@api/deki/files/4686/=domi-edit-search-onclick.png"></p> + +<p>このインタラクティビティを使用すると、ディスク上のファイルに定義されているDOMを実際に変更することなく、要素のサイズを縮小したり、サイズを変更したり、アイコンを変更したり、レイアウトを微調整したりすることができます。</p> + +<p>Loving the Inspector</p> + +<p>DOM インスペクタは何かを理解することができますが、慣れてくると、Webページやインタフェースのこれらの構造化されたビューは、自分のアプリケーション開発の欠点であったことに気付くかもしれません。DOM インスペクタは、ページに関するすべての情報を明確かつ構造化された方法で提示するだけでなく、それらの構造を見つけて更新する方法を提供し、 Mozilla ブラウザで既に利用可能なショートカットやメニューから簡単にアクセスできます。Venkman (JavaScriptデバッガ) などのMozillaツールと連携して使用されるDOM Inspectorは、WebページやDOMベースのアプリケーションインターフェイスの完全な表示を提供します。</p> |