Curl® 言語で書かれたプロジェクトでは、オブジェクトが中心的な役割を果たします。このため、アプレットとパッケージを構成するオブジェクトを検証する機能は非常に便利です。Curl 統合開発環境 (IDE) では、インスペクタがこの機能を提供します。これにより、アプレット内の各種要素が互いにどのように動作しているか （または動作していないか） を理解することができます。
インスペクタを使用すると、Curl 言語で書かれたアプレット内の可視オブジェクト （画面上に表示されるものすべて） の詳細を検証することができます。このツールを使用して、画面上のレイアウトをどのように構成するか、一連のオブジェクトが予想どおりにレイアウトされない理由はなぜか、などについて判断することができます。
インスペクタは、オブジェクトのインスペクト中に Curl アプレットを停止しません。アプレット実行中にインスペクタを使用してオブジェクト内の変更を見ることができます。
インスペクタにはいくつかのウィンドウがあり、各ウィンドウは独自の機能を実行します。
- メインの インスペクタ ウィンドウは、オブジェクトの属性と継承に関する詳細を表示します。
- グラフィック階層 ウィンドウは、グラフィック オブジェクト間の関係を表示します。
- グラフィック統計 表示は、指定のグラフィック オブジェクトの幅と高さ設定を示します。
| 要約： | - グラフィック オブジェクトをインスペクトするには、[Ctrl] キーを押しながらオブジェクトを右クリックし、[インスペクト] を選択します。
- インスペクタは選択したオブジェクトの属性を表示します。
- インスペクトしているオブジェクトが他のオブジェクトを参照する場合は、他のオブジェクトも選択してインスペクトしてください。
- 式を評価してその結果をインスペクトすることができます。
|
インスペクタ を起動するには、[Ctrl] キーを押しながら、Curl アプレットのオブジェクト上にマウス ポインタを置いて右クリックします。ショートカット メニューが表示されます。ショートカット メニューから ［インスペクト ［オブジェクト名］] を選択します。メインのインスペクタ ウィンドウが開き、オブジェクトの詳細が表示されます。
動作中のインスペクタを見るには、
[Ctrl] キーを押しながら、下に示された
RectangleGraphic オブジェクトのどれかを右クリックし、
[インスペクト [RectangleGraphic (xx)]] を選択します。
| 例:
インスペクトする四角形 |
 |
{HBox spacing=4pt,
{RectangleGraphic fill-color="red", width=1in, height=0.4in},
{RectangleGraphic fill-color="green", width=1in, height=0.6in},
{RectangleGraphic fill-color="blue", width=1in, height=0.8in}
}
| |
インスペクタ ウィンドウが表示され、選択した
RectangleGraphic に関する情報が表示されます。インスペクタ は、ディバガ のスタック トレースと同様、 2 列形式で情報を表示します。左の列はオブジェクトの属性、右の列は属性の値を表示します。インスペクタの最初に開いた時に、右の列には何も情報が表示されません。
マウスポインタを、最初の行の [オプション設定] にかざすと、
テキストが赤色に変換することに留意してください。
これは、エントリを拡張して追加情報を表示できることを示しています。
インスペクタの [オプション設定] を左クリックすると、現在インスペクトしている RectangleGraphic に設定されたオプションを表示することができます。
例で使用されている四角形では、インスペクタは色、幅、高さを表示します。
インスペクタの [オプション設定]の下部には、継承するクラスがリスト表示されています。
この例では、リストの最初の項目は
RectangleGraphic で、これはインスペクトするオブジェクトのインスタンス化に使用したクラスです。
RectangleGraphic は FillShape から継承するため、
FillShape がリストの次の項目に表示されます。FillShape は Graphic から継承するため、
その次の項目に表示されます。このように順番に表示されます。Visual は 2 つのクラス
GraphicOptions と GuiEventTarget から継承するため、リストはやや複雑になります。
この場合、GraphicOptions のすべてのスーパークラスが最初にリストされ、GuiEventTarget
のスーパークラスが次にリストされます。
インスペクタでは、以下のボタンが含まれているツールバーが提供されています。
| ボタン名 | 機能 |
|---|
| グラフィック | インスペクタで現在開かれているオブジェクトの グラフィック階層 が開きます。 |
| 評価 | Curl 言語の式を評価するための 評価 ダイアログが開きます。
［OK］ をクリックすると、式から返された値をインスペクトするための新しいインスペクタウインドウが開きます。 |
| 最新情報に更新 | 現在インスペクタウインドウで開いてるオブジェクトにアクセスし、オブジェクトの現在の状態に基づいて、インスペクタの全フィールドの値を更新します。 |
| コピー | インスペクタ ウインドウの現在の内容をクリップボードにコピーします。 |
| 印刷 | インスペクタ ウインドウの現在の内容をプリンタに送信します。 |
インスペクタの右列は、左列のオブジェクト属性の値を表示します。属性の値がオブジェクトを参照する場合、値をクリックしてインスペクタの焦点をそのオブジェクトに切り替えることができます。たとえば、fill-color に関連する {ColorFillPattern} 値をクリックすると、RectangleGraphic の色指定に使用された ColorFillPattern の詳細が表示されます。
このオブジェクトは、前にインスペクトした RectangleGraphic と同様にしてインスペクトできます。前にインスペクトしたオブジェクトに戻る場合は、前のオブジェクト をクリックします。
インスペクタの [評価] コマンドを使用して、現在実行中のアプレット内のグローバル変数値にアクセスし、その値を変更する式を評価します。アプレットがデバッグ中の場合はアプレットが停止するので、変数へのアクセスや変更はできません。特別なプロシージャ
{OBJ address} を [評価] コマンドと一緒に使用することができます。
OBJ プロシージャの詳細については、
式ペイン を参照してください。
たとえば、次のような Curl ソースコードを含む新規アプレット ファイルを作成します。
{curl 8.0 applet}
{let a:VBox={VBox {bold one}, {italic two}, {big Three}}}
{value a}
ファイルを保存して実行します。アプレットをインスペクトするには、アプレットを実行しているブラウザ ウィンドウで [Ctrl] キーを押しながら右クリックし、コンテキスト メニューから [インスペクト] を選択します。
アプレット内の変数 a はグローバルなので、式を評価することでこれにアクセスすることができます。[ツール] メニューの [評価] コマンドをクリックして [評価] ダイアログボックスを開き、次のようにタイプします。
{{a.ordered-children.read-one}.get-text}
[OK] をクリックすると、新規のインスペクタ ウィンドウが開き評価の結果が表示されます。
評価ウィンドウで入力した式は、
VBox の最初の子オブジェクト、
bold テキスト プロシージャのテキストにアクセスします。式の評価結果は
String one
となり、これが新規のインスペクタ ウィンドウに表示されます。
| 要約： | - グラフィック階層は、グラフィック オブジェクト間の関係を表示します。
- グラフィック階層を開くには、インスペクタのツールバーを使用するか、[Ctrl] キーを押しながら直接オブジェクトを右クリックし [グラフィック階層] を選択してください。
|
インスペクタの焦点がグラフィック オブジェクトになると、ツールバーの [グラフィック] ボタンが使用可能になります。このボタンをクリックしてグラフィック階層ウィンドウを開きます。ウィンドウに、グラフィック オブジェクトとその子オブジェクト間の関係が表示されます。
Curl アプレットをブラウザで表示している場合は、[Ctrl] キーを押しながら、右クリックしてショートカットメニューから [グラフィック階層［オブジェクト名］] を選択すると、オブジェクトのグラフィック階層ウィンドウに直接移動することができます。
グラフィック階層ウィンドウを表示するには、[Ctrl] キーを押しながら次の例の四角形のいずれか右クリックし、[グラフィック階層] を選択します。
| 例:
これらの四角形を使用してグラフィック階層ウィンドウを開く |
 |
{HBox spacing=4pt,
{RectangleGraphic fill-color="red", width=1in, height=0.4in},
{RectangleGraphic fill-color="green", width=1in, height=0.6in},
{RectangleGraphic fill-color="blue", width=1in, height=0.8in}
}
| |
グラフィック子オブジェクトを持つことができるすべてのグラフィック オブジェクト （
Box から継承するすべてのオブジェクト） は、名前の左横に青い三角マーク付きで表示されます。オブジェクトの子を表示するには、その三角マークをクリックします。オブジェクトに子オブジェクトがない場合は、三角マークが回転しますが表示は変化しません。
グラフィック階層ウインドウには、以下のボタンを含むツールバーがあります。
| ボタン名 | 機能 |
|---|
| ルート | 全グラフィック階層を表示します。 |
| 親 | 現在のオブジェクトの親とそのコンテンツを表示します。 |
| 印刷 | グラフィック階層 の現在のコンテンツをプリンタに送信します。 |
ツールバーの [親] ボタンをクリックすると、表示が拡張してグラフィックの親 （このオブジェクトを格納するオブジェクト） と兄弟オブジェクトがグラフィック階層の上部に表示されます。
上の例では、クリックした
RectangleGraphic を含む
HBox と、
HBox に含まれる他の四角形が表示されます。
[親] を繰り返しクリックして、グラフィック階層を 1 ずつ上に移動します。現在読んでいるドキュメントのコンテンツを構成するグラフィック オブジェクトが見えてきます。
[ルート] ボタンをクリックすると、グラフィック階層全体を表示できます。これによって、現在インスペクト中のオブジェクトを含む
View オブジェクトに含まれている全オブジェクトのグラフィック階層が表示されます。
| 要約： | - グラフィック階層内のオブジェクトをクリックすると、グラフィック統計が表示されます。
- これは、オブジェクトを右クリックしてコンテキスト メニューから選択しても表示できます。
- グラフィック統計を使用すると、スクリーン上のオブジェクトをいくつかの方法でハイライト表示して識別できます。
- 詳細グラフィック統計表示は、オブジェクトの境界とエラスティック プロパティの検証に使います。
|
グラフィック階層内に示されたグラフィック オブジェクトの名前にマウス ポインタを置くと、名前が赤字に変わります。これをクリックするとグラフィック統計ウィンドウが表示されます。
オブジェクトのグラフィック統計ウィンドウは、[Ctrl] キーを押しながらアプレットのオブジェクトを右クリックし、グラフィック統計 [ObjectName (nn)]を選択しても開くことができます。
グラフィック統計ウィンドウを使用して、グラフィック階層内の任意のオブジェクトを識別します。現在のサイズや幅、高さ設定などのオブジェクトの詳細な情報もここで確認することができます。
グラフィック統計ウインドウには、以下のボタンを含むツールバーがあります。
| ボタン名 | 機能 |
|---|
| インスペクト | 現在のオブジェクトに対してインスペクタウインドウを開きます。 |
| アントレース | TraceFrame オブジェクトを取り除きます。 |
| トレース | TraceFrame オブジェクト内に現在のオブジェクトをラップします。 |
| 更新 | 現在の グラフィック統計 ウインドウで開いてるオブジェクトにアクセスし、
オブジェクトの現在の状態に基づいて、
インスペクタの全フィールドの値を更新します。 |
| コピー | グラフィック統計 ウインドウの現在の内容をクリップボードにコピーします。 |
| 印刷 | グラフィック統計 ウインドウの現在の内容をプリンタに送信します。 |
スクリーン上では非表示でも、オブジェクトのレイアウトに影響を与えるコンテナ オブジェクト （前述の HBox の例など） をインスペクトする必要がある場合があります。また、複数の同一オブジェクトのうち、どれをインスペクトするか判断が必要な場合もあります。このような場合、[背景色の設定] および [ボーダー色の追加] ボックスを使用してオブジェクトの色を変更、およびボーダー色を追加して、オブジェクトをスクリーン上で目立たせることができます。
また、
[トーレス] ボタンを使用して、インスペクトするオブジェクトを
TraceFrame オブジェクトにラップすることもできます。
[ボーダー色の追加] ボックスと [トレース] の違いは、[トレース] はオブジェクトの境界を実際のとおりに表示することです。
[ボーダー色の追加] ボックスはオブジェクトの周囲にボーダー色を追加するため、周囲にスペースを追加することになり、レイアウトが変わります。このため、
[トレース] の場合よりもその効果が顕著に出ます。オブジェクトの実際の位置を正確に見る場合には
[トーレス] を使用します。オブジェクトの識別を目的とする場合は
[ボーダー色の追加] を使用します。
オブジェクトの周囲からトーレスを削除するには、[アントレース] ボタンをクリックします。
グラフィック統計表示は、選択したオブジェクトのサイズ設定や実際のサイズについての詳細情報も表示します。この情報を表示するには、[詳細を表示] チェックボックスをクリックします。
詳細情報は、オブジェクト境界のいくつかのアウトライン内に表示されます。濃いアウトラインは、オブジェクトの現在の垂直/水平境界を表します。淡いアウトラインは、オブジェクトの現在の境界に一致しない場合に、最小の推奨する境界を示します。アウトラインの中心に、オブジェクトの内部起点 をマークする円が表示されます。ウィンドウ内の黒の要素は、オブジェクトのセル境界 を示します。青の要素は子の境界 を示します。
アウトラインの上下左右に、境界の垂直/水平座標を示す小さいボックスが表示されます。このボックス内の数字は、オブジェクトの内部起点に対する相対座標をポイントで示しています。ポイントは小数点第一位で四捨五入されます。この座標ボックスにマウス ポインタを置くと、座標の詳細情報が表示されます。
ポップアップ表示には、ボックスの座標値とオブジェクトのどのサイズ属性が座標値に設定されているかが示されます。各座標は次の項目を表します。
- 最小サイズ
- 現在のサイズ （拡張）
- ユーザー設定サイズ
これらのサイズは セル境界 と子の境界 の両方について示されます。またポップアップ リストには、座標に適用されているすべてのプロパティも表示されます。上の例では、座標はオブジェクトのセル境界と子の境界について拡張、ユーザー設定、最小の各サイズを示しています。
境界アウトラインで文字「E」を含むボックスは、境界のエラスティック プロパティをインスペクトする際に使用します。このボックス上にマウス ポインタを置くと、境界
Elastic 設定 （オブジェクトが領域にフィットするために可能な伸縮） が表示されます。
詳細については、『API リファレンス』の
Elastic の項目を参照してください。
単純な場合は、セルのエラスティック情報 （黒の E） は子オブジェクトのエラスティック情報 （青の E） と同じですが、この 2 行が異なる場合もよくあります。オブジェクトにボーダーまたはマージンがある場合、セルのエラスティックは、子オブジェクトのエラスティック サイズ設定にボーダーやマージンを追加したものになります。また、セルのエラスティックを変更する width、height、horigin、 vorigin などの多数のオプションがあります。
インスペクタ使用中、Curl アプレットはアクティブな状態を維持するので、インスペクト中のオブジェクトのレイアウトが変わることがあります。グラフィック統計ウィンドウの [ツール] メニューから [更新] コマンドを使用して、現在の選択オブジェクトの状態を反映させて統計表示を最新の情報に更新します。
グラフィック オブジェクトのコレクションが予想通りに表示されない場合には、詳細グラフィック統計表示の情報を利用すると便利です。子エラスティックとセルのエラスティックを比較して、オブジェクトのオプションがサイズ設定を予想外に変更していないかどうか検証します。
また、セル境界を関連セルのエラスティックユーザー設定サイズ （セル ユーザー設定
）、最小サイズ （セル最小
） と比較して、オブジェクトにユーザー設定サイズ が指定されているかどうか、または最新のレイアウト変更で異なるサイズに伸張/圧縮されていないかどうかを検証します。
最後に、子の境界を子エラスティックのユーザー設定サイズ/最小サイズ （青色の E） と比較して、オブジェクトの指定サイズに対してオブジェクトの子スロットに実際の領域がどのように割り当てられているかを検証します。
たいていの場合、予想外のグラフィック レイアウトの原因は、グラフィック オブジェクトに指定された何らかのオプションが適切に設定されていないことにあります。この場合、子エラスティックをセルのエラスティックと比較してみると、しばしば問題が明らかになります。それ以外の場合は、オブジェクト自体の表示に問題はないものの、セルのエラスティック ボックスとセル境界を比較してみると、オブジェクトのサイズ設定が守られていないことが明らかになることがあります。これは一般的に次の 2 つの原因となります。
- オブジェクトのグラフィックオブジェクトまたはその祖先の他の子オブジェクトによって示されたサイズ設定とのインタラクション。
- オブジェクトの祖先のどこかで指定されているオプション （通常は height または width）。
前者を検証するには、グラフィック階層でこのオブジェクトの兄弟にナビゲートし、グラフィック統計でそのエラスティック値をチェックします。必要に応じて、このオブジェクトの叔父
と他の祖先の兄弟も検証します。
後者を検証するには、同様にこのオブジェクトのグラフィック祖先をナビゲートして、オブジェクトの子エラスティックとセルのエラスティック間の不一致が発生している場所を検索し、不適切なオプションが設定されていないかどうかをチェックします。
Copyright © 1998-2019 SCSK Corporation.
All rights reserved.
Curl, the Curl logo, Surge, and the Surge logo are trademarks of SCSK Corporation.
that are registered in the United States. Surge
Lab, the Surge Lab logo, and the Surge Lab Visual Layout Editor (VLE)
logo are trademarks of SCSK Corporation.
