path: root/files/ja/dom_inspector/internals/index.html

---
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>  &lt;toolbox id="tbxInsToolbox"&gt;
    &lt;menubar id="mbrInspectorMain"/&gt;
    &lt;toolbar id="tbInspectorPrimary"/&gt;
  &lt;/toolbox&gt;

  &lt;vbox id="bxInspectorMain" flex="1"/&gt;</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>