XVCD Debuggerを使用したXVCDのデバッグ

2. XVCD Debuggerの起動～ステップ実行

この章では、バグのないXVCDを使い、XVCD Debuggerを起動してXVCDスクリプトの実行を制御する方法までを学びます。必要なものは、表示対象となるXML文書ファイルと、XVCDによるボキャブラリコンポーネントです。

2.1. XML文書定義

まずデバッグ対象となるXML文書ファイルを用意します。ここでは、次のようなXML文書を作成します。まだXVCDファイルは作成していませんが、あらかじめこのXML文書に関連付けるXVCDファイルを指定しておきましょう。これから作成するXVCDのファイル名は、HelloWorld.xvcdとします。

<?xml version="1.0"?>

<?com.xfy vocabulary-connection href="HelloWorld.xvcd" ?>
<hw:document xmlns:hw="http://xmlns.example.com/developer/tutorial/helloworld"> 
    <hw:message> Hello World! </hw:message> 
    <hw:message> Hello xml World! </hw:message> 
    <hw:message> Hello xfy World! </hw:message> 
</hw:document>

このXML文書は、hw:document要素の子要素としてhw:message要素があります。また、hw:message要素の中にそれぞれ「Hello World!」と「Hello xml World!」、「Hello xfy World!」という文字列が書かれています。

XML文書が作成できたら、HelloWorld.xmlというファイル名で適切なフォルダに保存します。

2.2. XVCDによるボキャブラリコンポーネントの作成

次に、XVCDによるボキャブラリコンポーネントを作成します。上記のXML文書を表示するために、今回はXVCDスクリプトで次のようなボキャブラリコンポーネントを作成します。

<?xml version="1.0" encoding="UTF-8"?>
<xvcd:xvcd
    version="1.0"
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:xvcd="http://xmlns.xfy.com/xvcd"
    xmlns:hw="http://xmlns.example.com/developer/tutorial/helloworld"
    >
	
    <xvcd:user-data name="page_title" value="HelloWorld example"/>
	
    <xvcd:vocabulary name="HelloWorld" match="hw:document" call-template="root"/>

    <xvcd:template name="root">
        <xvcd:variable name="body_title" select="hw:message[2]/text()"/>
		
        <html>
            <head>
                <title>
                    <xvcd:value-of select="xvcd:user-data('page_title')"/>
                </title>
            </head>
            <body>
                <h1>
                    <xvcd:value-of select="$body_title"/>
                </h1>
                <xvcd:apply-templates select="hw:message"/>
            </body>
        </html>
    </xvcd:template>
    
    <xvcd:template match="hw:message">
        <p>
            <xvcd:value-of select="."/>
        </p>
    </xvcd:template>
</xvcd:xvcd>

このボキャブラリコンポーネントは、hw:message要素の内容を表示するだけの簡単なものです。なお、XVCD Debuggerの機能を説明するために、ユーザーデータや変数を使用しています。

作成したXVCDは、HelloWorld.xmlと同じフォルダにHelloWorld.xvcdというファイル名で保存します。

2.3. XVCD Debuggerの起動

さっそく、作成したHelloWorld.xmlとHelloWorld.xvcdでXVCD Debuggerの動作を確かめましょう。まず、xfy ClientからXVCD Debuggerを起動します。続いて、xfy Clientで作成したファイルを開いて、XVCD Debuggerの動作を確かめられる状態にします。ここまでの操作手順は、次のとおりです。

xfy Clientを起動します。
［XVCD Debugger］をクリックして、XVCD Debuggerを起動します。
xfy Clientの［ファイル - 開く］を選択します。
HelloWorld.xmlを選択して、［開く］をクリックします。

いかがですか、次の図のように表示されましたか？

XVCD Debuggerの起動

ここで、XVCD DebuggerのソースビューとXVCDビューをご覧ください。ソースビューでは何も選択されていません。一方、XVCDビューではxvcd:user-data要素が選択されています。これは、ボキャブラリコネクションがxvcd:user-data要素を処理している時点で、XML文書ではどの要素も変換処理の対象となっていないことを意味しています。

XML文書内の要素が変換処理の対象となったときに、ソースビューに表示されている要素が選択状態になります。

2.4. ステップ実行

XVCDスクリプトは、ノードごとの処理を１ステップとして実行されます。XVCDスクリプトの実行をステップ単位で制御するためにXVCD Debuggerが提供する機能は、次の３つです。

ステップイン
ステップアウト
ステップオーバー

ここでは、これらの方法の違いを説明します。

2.4.1. ステップイン

ステップインは、「選択されているノードの中」に実行の流れを進めていきたいときに使用します。これから実行する内容に子ノードがない場合には、兄弟ノードに実行が進みます。

さっそくステップインを使ってXVCDスクリプトの処理を進めてみましょう。現在、xvcd:user-data要素が選択されています。［ステップイン］を繰り返しクリックして、html要素までXVCDスクリプトの処理を進めてください。

ステップ実行したときのXVCDビューの選択位置

ステップ実行しても、XVCDビューの選択位置が変化しないことがあります。例えば、xvcd:user-data要素やxvcd:variable要素、xvcd:value-of要素、テキストノードが選択されているときは、１回ステップ実行しても、選択位置は変わりません。

xvcd:user-data要素やxvcd:variable要素、xvcd:value-of要素の場合、ステップイン実行でいったん属性値を評価するため、すぐには選択位置が変わりません。

テキストノードの場合、ステップ実行でテキストノードにさしかかったときは、まずその開始行が選択されます。テキストノードの範囲は開始タグの終了位置と終了タグの開始位置の間です。開始タグの終了位置がテキストノードの開始行となるので、結果的に、XVCDビューで開始タグのある行が２回選択されるように見えます。

例えば、次のようなXVCDスクリプトをデバッグする場合、内容が「TEXT NODE」のテキストノードに処理がさしかかると、「TEXT NODE」のある行ではなく、開始タグの<a>が選択されます。

<a>          // <a>の終了位置からテキストノードが開始。
   TEXT NODE // この行ではなく、１行目が選択状態になる
</a>         // </a>の開始位置までがテキストノード

ブレークポイントを設定できる位置は、テキストノードの開始行です。上の例では、「TEXT NODE」のある行ではなく、開始タグの<a>がある行にブレークポイントを設定できます。

<a>          // テキストノードのブレークポイント設定位置
   TEXT NODE 
</a>

ステップ実行したときのXVCDビューの選択位置の移動順序

ステップ実行したとき、XVCDビューでは、次の要素の役割順に選択位置が移動します。

グローバルなスコープを持つ要素（グローバル変数、ユーザーデータなど）
テンプレート要素（xvcd:vocabulary要素やxvcd:template要素など）

選択位置の移動順は、XVCDスクリプト内の記述順序に依存しません。XVCDスクリプト内で上から順番に選択されるのではなく、グローバルなスコープを持つ要素が先に選択され、そのあとでテンプレート要素が選択されます。

例えば、次に挙げるXVCDスクリプトでステップ実行すると、XVCDビューでは、まずxvcd:user-data要素が選択され、次にxvcd:vocabulary要素が選択されます。

// 最初にグローバルなスコープを持つ要素を選択
<xvcd:user-data name="page_title" value="HelloWorld example"/>

// 次にテンプレート要素を選択
<xvcd:vocabulary name="HelloWorld" match="hw:document" call-template="root"/>

<xvcd:template name="root">
    <xvcd:variable name="body_title" select="hw:message[2]/text()"/>
		
    <html>
        ...（略）...
    </html>
</xvcd:template>

グローバルなスコープを持つ要素をテンプレート要素の下に移動した次のスクリプトでも、ステップ実行すると、xvcd:user-data要素、xvcd:vocabulary要素の順に選択されます。

// xvcd:user-data要素をxvcd:vocabulary要素より下に書いても、
// グローバルなスコープをもつxvcd:user-data要素から選択される
<xvcd:vocabulary name="HelloWorld" match="hw:document" call-template="root"/>

<xvcd:template name="root">
    <xvcd:variable name="body_title" select="hw:message[2]/text()"/>
		
    <html>
        ...（略）...
    </html>
</xvcd:template>

// xvcd:user-data要素が最初に選択される
<xvcd:user-data name="page_title" value="HelloWorld example"/>

グローバルなスコープを持つ要素がXVCDスクリプトに存在しない場合は、テンプレート要素が選択されます。

// グローバルなスコープを持つ要素がないときは、テンプレート要素が選択される
<xvcd:vocabulary name="HelloWorld" match="hw:document" call-template="root"/>

<xvcd:template name="root">
    <xvcd:variable name="body_title" select="hw:message[2]/text()"/>
		
    <html>
        ...（略）...
    </html>
</xvcd:template>

html要素が選択されている状態で［ステップイン］をクリックすると、html要素の中に実行の流れが進みます。このとき、デスティネーションビュー内にデスティネーションDOMツリーが作成され、html要素が選択状態になります。これは、ボキャブラリコネクションがデスティネーションDOMツリーにhtml要素を作成したことを意味します。

html要素の中に実行の流れを１ステップ進めたので、現在はhead要素が選択されています。では、もう一度［ステップイン］をクリックして、title要素を選択しましょう。

いかがですか、次の図のように表示されましたか？

ステップイン

2.4.2. ステップアウト

ステップアウトは、「選択されているノードを呼び出したノード」まで一気に抜け出します。選択されているノードを呼び出したノードがない場合は、兄弟ノードへ進みます。

試してみましょう。現在使用しているXVCDスクリプトでは、title要素が選択されています。この状態で［ステップアウト］をクリックすると、title要素を呼び出したhead要素の終了タグへ実行の流れが進みます。

いかがですか、次の図のように表示されましたか？

ステップアウト

2.4.3. ステップオーバー

ステップオーバーは、「選択されているノードの呼び出しが終わった直後」まで、実行を進めます。これから実行する内容に子ノードがない場合には、兄弟ノードに実行が進みます。

試してみましょう。現在、head要素の終了タグが選択されています。［ステップイン］をクリックして実行を１ステップだけ進めると、body要素の開始タグが選択されます。

body要素の選択

この状態で［ステップオーバー］をクリックすると、XVCDスクリプトの実行は、body要素内の処理をすべて終えて、body要素の終了タグまで進みます。

いかがですか、次の図のように表示されましたか？

ステップオーバー

2.5. スクリプトの続きの実行開始

XVCDスクリプトを普通に実行するときは［開始］をクリックします。ブレークポイントが設定されているときは、ブレークポイントが設定されている行で処理が一時停止します。

それでは、［開始］をクリックして、XVCDスクリプトを最後まで実行します。xfy Clientに制御が移ります。いかがですか、次の図のように表示されましたか？

開始

2.6. まとめ

ここで学んだことをまとめておきます。

XVCD Debuggerの起動
XVCD Debuggerを起動したあと、xfy ClientでXML文書を読み込むと、デバッグを開始できます。
XVCD Debuggerのデバッグ機能
XVCDスクリプトの実行をステップ単位で制御するために、XVCD Debuggerはステップイン、ステップアウト、ステップオーバーの３つの機能を提供します。また、XVCDスクリプトを普通に実行するときは、［開始］をクリックします。

3. ブレークポイントの利用

「XVCD Debuggerの起動～ステップ実行」では、XVCDスクリプトの実行をステップ単位で制御するXVCD Debuggerの基本機能について学びました。この章では、XVCD Debuggerを使ってXVCDスクリプトの実行を指定した位置で止める方法を説明します。引き続き、「XVCD Debuggerの起動～ステップ実行」で使用したHelloWorld.xmlとHelloWorld.xvcdを例に説明します。

XVCDスクリプトの実行を指定した位置で止めるには、ブレークポイント機能を使用します。ブレークポイントとは、XVCDスクリプトの実行を途中で止める「場所」を指します。ブレークポイントが設定された「場所」に処理がさしかかると、XVCDスクリプトの実行が一時停止します。

XVCD DebuggerのXVCDビューでは、ブレークポイントを設定できる要素は、青い文字で表示されています。ブレークポイントをつけたい行の左端をダブルクリックすると、ブレークポイントを設定できます。ブレークポイントを設定すると、ブレークポイントを設定した位置にが表示されます。

3.1. XVCDスクリプトの再実行

HelloWorld.xvcdのデバッグを最初から実行するには、xfy Clientの［表示 - 最新の情報に更新］を選択するか、ブラウズバーのをクリックします。前回のデバッグを終了していない場合は、XVCD Debuggerの［開始］をクリックしてデバッグ処理を終了させたあと、最初から実行し直します。ただし、再実行したときにブレークポイントを設定していないと、XVCDスクリプトはそのまま最後まで実行されます。デバッグを最初から実行する前に、ブレークポイントを設定しましょう。

3.2. ブレークポイントの設定・無効化・有効化・解除

ここでは、HelloWorld.xvcd内のxvcd:variable要素とp要素にブレークポイントを設定しましょう。

xvcd:variable要素の左端の余白をダブルクリックして、ブレークポイントを設定します。同様に、p要素にもブレークポイントを設定します。

ブレークポイントの設定

p要素はループ処理の内側にあります。このままでは、p要素に処理がさしかかるたびに止まります。そこで、p要素に設定したブレークポイントをいったん無効化します。ブレークポイントを無効化するには、ブレークポイントの上で右クリックし、表示されるメニューで［ブレークポイントの無効化］を選択します。無効化されたブレークポイントは、XVCDビューでの表示がからに変わります。

ブレークポイントの無効化

それでは、XVCDスクリプトを再実行しましょう。xfy Clientの［表示 - 最新の情報に更新］を選択するか、ブラウズバーのをクリックします。すると、xvcd:variable要素に設定した最初のブレークポイントまで実行した時点で、一時停止します。

一時停止

もう一度［開始］をクリックします。XVCDビューの選択位置は変化しません。これは、ブレークポイントを設定した行の処理は２つあるので、その両方にブレークポイントの対象となるためです。このような動作をするのは、ステップ実行したときに選択位置が変わらない要素やテキストノードに設定されたブレークポイントで停止したときです。詳しくは「ステップ実行したときのXVCDビューの選択位置」をご覧ください。

さらにもう一度［開始］をクリックすると、p要素に設定したブレークポイントでは実行が一時停止せず、XVCDスクリプトは最後まで実行されます。これは、先ほどブレークポイントを無効にしたためです。

ここで、p要素のブレークポイントを有効にします。XVCD Debuggerの［編集 - ブレークポイント一覧］を選択してください。［ブレークポイント一覧］ダイアログボックスが表示されます。［ブレークポイント一覧］ダイアログボックスの［ブレークポイント一覧］に、ブレークポイントが設定されている位置が、XVCDファイル名と行番号で表示されます。［ブレークポイント一覧］でチェックボックスがオフになっているのは、無効なブレークポイントです。一方、チェックボックスがオンになっているのは、有効なブレークポイントです。

今回の場合、［ブレークポイント一覧］には２つのブレークポイントが表示されます。

ブレークポイント一覧

チェックボックスがオフになっている32行目のブレークポイントは、ブレークポイントを無効にしたp要素の行です。このブレークポイントを選択して、［有効化］をクリックすると、チェックボックスがオンになります。この状態で［OK］をクリックして、［ブレークポイント一覧］ダイアログボックスを終了します。

XVCDビューを見ると、p要素の左端にが表示されています。これでブレークポイントが有効になりました。

ブレークポイントの有効化

それでは、もう一度HelloWorld.xvcdをデバッグしましょう。XVCDスクリプトを最初から実行し直します。xfy Clientの［表示 - 最新の情報に更新］を選択するか、ブラウズバーのをクリックします。前回の処理を終了していない場合は、XVCD Debuggerのデバッグ処理を最後まで終了させたあと、最初から実行し直します。

XVCD Debuggerで［開始］をクリックして処理を進めてください。p要素に設定したブレークポイントで実行が一時停止します。

p要素で一時停止

今度はp要素に設定したブレークポイントを解除してみましょう。ブレークポイントを解除するには、次の方法があります。

ブレークポイントが設定された行でダブルクリックする
ブレークポイントが設定された行の上で右クリックし、表示されるメニューで［ブレークポイントの削除］を選択する

ブレークポイントの解除

それでは、［開始］をクリックして、処理を進めましょう。ブレークポイントは削除したので、処理がp要素にさしかかっても実行は一時停止しません。XVCDスクリプトの処理は、最後まで進んで終了します。

3.3. まとめ

ここで学んだことをまとめておきます。

再デバッグの手順
XVCDスクリプトを最初から実行するときは、xfy Clientの［表示 - 最新の情報に更新］を選択するか、ブラウズバーのをクリックします。
ブレークポイントの設定・無効化・有効化・解除
ブレークポイントは、XVCDビューで設定します。また、［ブレークポイントの一覧］ダイアログボックスを使用すると、ブレークポイントを追加・解除したり、ブレークポイントの状態を変更したりできます。

4. 変数やプロパティの調査

「ブレークポイントの利用」では、ブレークポイントの使い方を説明しました。この章では、デバッグしているXVCDスクリプトで使用されているユーザーデータや変数などの値を調べます。引き続き、「XVCD Debuggerの起動～ステップ実行」で使用したHelloWorld.xmlとHelloWorld.xvcdを例に説明します。

4.1. 処理中の値の調べ方

HelloWorld.xvcdを最初から実行します。xfy Clientの［表示 - 最新の情報に更新］を選択するか、ブラウズバーのをクリックしてください。前回のデバッグを終了していない場合は、XVCD Debuggerの［開始］をクリックしてデバッグ処理を終了させたあと、最初から実行し直します。

設定した１つ目のブレークポイントまで実行して一時停止したら、次の図のようにブレークポイントを設定してください。

変数の調査

続いて、xvcd:variable要素の処理を完了するために、［ステップイン］を２回クリックします。このときプロパティビューのいちばん上の行を見ると、名前欄に「body_title」、値欄に「Hello xml World!」と表示されています。

変数の値を表示

もう一度［開始］をクリックして実行を進めます。次に設定したブレークポイントで実行が一時停止します。先ほど宣言した変数が使用されている個所です。プロパティビューを見ると、まだ名前欄に「body_title」、値欄に「Hello xml World!」と表示されています。ここで［ステップイン］をクリックして、１ステップ進めてください。デスティネーションビューに変数の値が表示されるのが確認できます。

プロパティビュー

変数のほか、ユーザーデータや名前空間なども同様の手順で調査できます。

以上で、デバッグのための基本的な操作や機能の説明は、ひととおり終わりました。［開始］をクリックして、デバッグを終了しましょう。XVCD Debuggerのメニューで［ファイル - 終了］を選択し、XVCD Debuggerを終了してください。

4.2. まとめ

ここで学んだことをまとめておきます。

変数やプロパティの調査
プロパティビューには、XVCDスクリプトで使用されている変数やプロパティ、ユーザーデータなどの値が表示されます。変数やプロパティ、ユーザーデータなどの値を調べるときは、ブレークポイントやステップ実行を利用して、値を調べたい個所でXVCDスクリプトの実行を一時停止します。

5. デバッグ実演

「変数やプロパティの調査」で、デバッグしているXVCDスクリプトで処理されているユーザーデータや変数などの値を調べる方法を学びました。これで、XVCD Debuggerの基本操作をひととおり学んだので、この章ではいままで学んだ基本操作を組み合わせて、実際にXVCDスクリプトの誤りを探し、取り除いてみます。

引き続き、HelloWorld.xmlとHelloWorld.xvcdを使って説明します。

5.1. XVCDの編集

HelloWorld.xvcdをテキストエディタで開き、以下のように編集します。強調文字で表記した個所が変更された個所です。この変更では、新しい変数「nodeToShow」に３つ目のhw:message要素のノードを設定します。そして、設定した変数を変換後のHTML文書の本文として表示します。

<?xml version="1.0" encoding="UTF-8"?>
<xvcd:xvcd
    version="1.0"
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:xvcd="http://xmlns.xfy.com/xvcd"
    xmlns:hw="http://xmlns.example.com/developer/tutorial/helloworld"
    >
	
    <xvcd:user-data name="page_title" value="HelloWorld example"/>
	
    <xvcd:vocabulary name="HelloWorld" match="hw:document" call-template="root"/>

    <xvcd:template name="root">
        <xvcd:variable name="body_title" select="hw:message[2]/text()"/>
        <xvcd:variable name="nodeToShow" select="../hw:message[3]"/>
		
        <html>
            <head>
                <title>
                    <xvcd:value-of select="xvcd:user-data('page_title')"/>
                </title>
            </head>
            <body>
                <h1>
                    <xvcd:value-of select="$body_title"/>
                </h1>
                <xvcd:apply-templates select="$nodeToShow"/>
            </body>
        </html>
    </xvcd:template>
    
    <xvcd:template match="hw:message">
        <p>
            <xvcd:value-of select="."/>
        </p>
    </xvcd:template>
</xvcd:xvcd>

編集が完了したら、HelloWorld2.xvcdというファイル名で保存します。

また、HelloWorld.xmlをテキストエディタで開いて、関連付けられたXVCDファイルをHelloWorld2.xvcdに変更したあと、HelloWorld2.xmlというファイル名で保存します。

5.2. XVCDスクリプトの調査

では、HelloWorld2.xmlをxfy Clientで表示しましょう。xfy Clientで［ファイル - 開く］を選択します。表示された［開く］ダイアログボックスでHelloWorld2.xmlを選択し、［開く］をクリックします。

何も表示されない

変更したら、本文に３つ目のhw:message要素の内容「Hello xfy World!」が表示されません。これはどういうことでしょうか？

問題の原因を調べるために、XVCD Debuggerを使ってHelloWorld2.xvcdのデバッグをしましょう。XVCD Debuggerを起動し、xfy Clientの［表示 - 最新の情報に更新］を選択するか、ブラウズバーのをクリックしてください。

先ほど追加した変数を確かめます。まず、変数nodeToShowを設定する行にブレークポイントを設定します。次に、［開始］をクリックして処理をブレークポイントを設定した行まで進めます。

変数nodeToShowにブレークポイントを設定

処理が一時停止するので、［ステップイン］を２回クリックします。

プロパティビューをご覧ください。変数nodeToShowの値が表示されています。名前欄には「nodeToShow」と表示されているのに、値欄には何も表示されません。このことから、変数のselect属性に記述したXPath式がまちがっていることが推測できます。

プロパティビューで変数の値を調査

一般に、XPath式はコンテキストノードを起点とした相対位置で指定します。XPath式を記述するときにコンテキストノードの位置をまちがえると、ボキャブラリコネクションはXPath式を開発者の意図したとおりに解釈できません。これは、XVCDスクリプトで起きるトラブルの典型的なパターンの１つです。HelloWorld2.xvcdでは、コンテキストノードがhw:document要素なのに、XPath式を「message[3]」ではなく、「../message[3]」としています。そのため、XML文書内の階層を正しくたどることができませんでした。

コンテキストノードを調べたいときは次のようにします。プロパティビューでXPath式の評価結果を確認してください。

XVCDスクリプトのコンテキストノードを調べたい位置に、select属性の値に「.」を設定したxvcd:variable要素を追加します。
XVCD Debuggerで、追加したxvcd:variable要素までXVCDスクリプトの処理を進めます。
xvcd:variable要素で［ステップイン］をクリックし、設定された値をプロパティビューで確認します。

HelloWorld2.xvcdでコンテキストノードを調べるときの変更例は、次のとおりです。強調文字で表記した個所が変更された個所です。

<?xml version="1.0" encoding="UTF-8"?>
<xvcd:xvcd
    version="1.0"
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:xvcd="http://xmlns.xfy.com/xvcd"
    xmlns:hw="http://xmlns.example.com/developer/tutorial/helloworld"
    >
	
    <xvcd:user-data name="page_title" value="HelloWorld example"/>
	
    <xvcd:vocabulary name="HelloWorld" match="hw:document" call-template="root"/>

    <xvcd:template name="root">
        <xvcd:variable name="body_title" select="hw:message[2]/text()"/>
        <!-- コンテキストノードを知りたいときは、「.」をxvcd:variable要素のselect属性に記述する -->
        <xvcd:variable name="context_node" select="."/>

        <xvcd:variable name="nodeToShow" select="../hw:message[3]"/>
		
        <html>
            <head>
                <title>
                    <xvcd:value-of select="xvcd:user-data('page_title')"/>
                </title>
            </head>
            <body>
                <h1>
                    <xvcd:value-of select="$body_title"/>
                </h1>
                <xvcd:apply-templates select="$nodeToShow"/>
            </body>
        </html>
    </xvcd:template>
    
    <xvcd:template match="hw:message">
        <p>
            <xvcd:value-of select="."/>
        </p>
    </xvcd:template>
</xvcd:xvcd>

これで問題の原因が分かりました。［開始］をクリックして、いったんHelloWorld2.xvcdのデバッグを終了します。XVCD Debuggerのメニューで［ファイル - 終了］を選択して、XVCD Debuggerを終了します。

5.3. スクリプトの修正

HelloWorld2.xvcdをテキストエディタで開き、以下のように編集します。強調文字で表記した個所が、変更された個所です。

<?xml version="1.0" encoding="UTF-8"?>
<xvcd:xvcd
    version="1.0"
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:xvcd="http://xmlns.xfy.com/xvcd"
    xmlns:hw="http://xmlns.example.com/developer/tutorial/helloworld"
    >
	
    <xvcd:user-data name="page_title" value="HelloWorld example"/>
	
    <xvcd:vocabulary name="HelloWorld" match="hw:document" call-template="root"/>

    <xvcd:template name="root">
        <xvcd:variable name="body_title" select="hw:message[2]/text()"/>
        <xvcd:variable name="nodeToShow" select="hw:message[3]"/>
		
        <html>
            <head>
                <title>
                    <xvcd:value-of select="xvcd:user-data('page_title')"/>
                </title>
            </head>
            <body>
                <h1>
                    <xvcd:value-of select="$body_title"/>
                </h1>
                <xvcd:apply-templates select="$nodeToShow"/>
            </body>
        </html>
    </xvcd:template>
    
    <xvcd:template match="hw:message">
        <p>
            <xvcd:value-of select="."/>
        </p>
    </xvcd:template>
</xvcd:xvcd>

HelloWorld2.xvcdを変更できたら、上書き保存してテキストエディタを終了します。

5.4. xfy Clientで表示

では、修正した結果を確認しましょう。正しいXPath式に修正したので、画面に「Hello xfy World!」と表示されるはずです。xfy Clientの［表示 - 最新の情報に更新］を選択するか、ブラウズバーのをクリックして、HelloWorld2.xmlを表示してみましょう。

いかがですか、次の図のように表示されましたか？

「Hello xfy World!」と表示

5.5. まとめ

ここで学んだことをまとめておきます。

XVCDスクリプトの調査
ステップ実行やプロパティビューなどのデバッグ機能を使用して、バグを再現するデータを集めることができます。
原因特定からコードの修正
集めたデータを分析してバグの原因が分かったら、XVCDスクリプトを修正します。

XVCD Debuggerを使用したXVCDのデバッグ

1. このチュートリアルの内容

2. XVCD Debuggerの起動～ステップ実行

2.1. XML文書定義

2.2. XVCDによるボキャブラリコンポーネントの作成

2.3. XVCD Debuggerの起動

2.4. ステップ実行

2.4.1. ステップイン

2.4.2. ステップアウト

2.4.3. ステップオーバー

2.5. スクリプトの続きの実行開始

2.6. まとめ

3. ブレークポイントの利用

3.1. XVCDスクリプトの再実行

3.2. ブレークポイントの設定・無効化・有効化・解除

3.3. まとめ

4. 変数やプロパティの調査

4.1. 処理中の値の調べ方

4.2. まとめ

5. デバッグ実演

5.1. XVCDの編集

5.2. XVCDスクリプトの調査

5.3. スクリプトの修正

5.4. xfy Clientで表示

5.5. まとめ