ページ解析パネル（拡張機能）

１．概要

ページ解析パネルは拡張機能です。使用するには、ScriptBrowserK オプション画面の［拡張機能］ページで、有効にすると使用できます。

以下の機能があります。

Webページのドキュメントツリーを表示する機能。
選択した要素の XPath やスクリプトでアクセスするためのパスを表示する機能
選択した要素のHTML ソースを表示する機能。
選択した要素のスタイルを表示する機能。（[CSS]タブ）
選択した要素の属性を表示する機能。（[属性]タブ）
XPath 式を評価して、戻り値（HTML要素）を表示する機能。（[XPathの確認]タブ）

２．使用方法

[解析]ボタンをクリックすると、パネル左側にアクティブなタブのWebページのドキュメントツリーが表示されます。

各タグの後ろに id 属性と class 属性が表示されます。id 属性の値は、# の後に、class 属性の値は .（ピリオド）の後に続けて表示されます。

また、タグの子要素がテキストノード１つだけの場合は、表示を簡潔にするために末尾に「#text:」に続けてテキストの内容が表示されます。

各要素をクリックすると下記の動作を行います。
（注意）テキストノードをクリックした場合は、その親要素に対して下記の動作を行います。

ブラウザでその要素が赤い枠線でハイライト表示します。
ページ解析パネル上部に要素のパスを表示します。
[CSS]タブに要素のスタイル属性を一覧表示します。
[属性]タブに要素の属性を一覧表示します。

３．表示されるパス形式について

ドキュメントツリー内の要素をクリックするとパネル上部に要素のパスが表示されます。

フレームを使用したページでは、先頭にフレームのパスが追加表示されます。

パスの表示形式の切り替えはツールバー部分の[パス形式]で行います。
以下、個々のパスの表示形式について解説します。

XPath

指定した要素を XPath 形式で表示します。但し、該当する子要素が１つしか存在しない場合（[1]の場合）は表示しません。

例）/html/body/table/tbody/tr/td/div[2]

詳細(属性)

上の「XPath」の表記に加えて、id 属性と class 属性の値を表示します。

id 属性の値は、# の後に、class 属性の値は .（ピリオド）の後に続けて表示されます。

例）/html/body(#top)/table(#nobg.vbody)/tbody/tr/td/div[2](.articles)

詳細(要素数)

上の「詳細(属性)」の表記に加えて、要素数を表示します。

要素数は要素番号の後に /（スラッシュ）に続けて表示されます。但し、該当する子要素が１つしか存在しない場合（[1/1]）は表示しません。

例）/html/body(#top)/table(#nobg.vbody)/tbody/tr/td/div[2/4](.articles)

スクリプト

スクリプト内でそのまま使用できる形式を表示します。

例1）ActiveDocument.body.all.tags("table").item(0).Rows(0).Cells(0).all.tags("li").item(15)

例2）AnchorOfCaption(ActiveDocument.body, "記事一覧", 0)

例3）SearchImgAlt(ActiveDocument.body, "記事一覧", 0)

４．ツールバーの解説

解析

アクティブなタブのWebページを解析してドキュメントツリーを表示します。

クリア

ドキュメントツリーを消去します。

要素を検索

マウスでブラウザ上の要素をクリックすると、該当するドキュメントツリーの要素が選択されます。

パス形式

選択した要素のパスを表示する形式を指定します。パスの形式についてはパス形式についてを参照してください。

パスをコピー

パネル上部に表示されているパスをクリップボードにコピーします。

要素をブラウザで選択

選択中の要素のテキストをブラウザで選択状態にします。

要素のソースを表示

選択中の要素のHTMLソースをエディタで表示します。
エディタは[ScriptBrowserKオプション]-[ブラウザの動作]ページの[HTMLソースを表示するエディタ]で指定します。

５．[CSS]タブ

選択した要素のスタイル属性を一覧表示します。

[値が設定されている属性のみ表示]をチェックすると、デフォルトと異なる値が設定されている属性のみが表示されます。
チェックを外すと、全ての属性が表示されます。このとき、デフォルトの値と同じ属性は淡色表示されます。

６．[属性]タブ

選択した要素の属性を一覧表示します。

[値が設定されている属性のみ表示]をチェックすると、値が設定されている属性のみが表示されます。
チェックを外すと、全ての属性が表示されます。このとき、値が設定されていない属性は淡色表示されます。

７．[XPathの確認]タブ

XPath式を評価して、結果を確認することができます。

XPath式を入力して、[確認]ボタンをクリックすると、下に該当する要素や値が表示されます。

表示された要素をクリックすると、ドキュメントツリーで該当する要素が選択されます。

[クリア]ボタンを押すと、結果表示部分をクリアします。