(6)/キャラクターファイル

　ねこみみか第6話。

• サンプル：ねこみみか(6)/キャラクターファイル

　今回、見た目的には変化ありません。
　でもJavaScriptまわりを大きく変えました。関数に分けたりとか。
　それと、キャラクターの情報を別ファイルにまとめました。

characters.xml

<?xml version="1.0" encoding="UTF-8" ?>
<chars>
    <char>
        <id>ナレーション</id>
        <color>#000000</color>
        <name>　</name>
    </char>
    <char>
        <id>風太</id>
        <color>#000099</color>
        <name>風太</name>
    </char>
    <char>
        <id>恋歌</id>
        <color>#990000</color>
        <name>恋歌</name>
    </char>
    <char>
        <id>レカン</id>
        <color>#006600</color>
        <name>レカン</name>
    </char>
</chars>

　キャラ名、色等をまとめてあります。
　キャラは<char_id>タグで指定します。

characters.xml

<?xml version="1.0" encoding="UTF-8" ?>
<pages>
<!-- 略 -->
    <page>
        <character>Renca0503.gif</character>
        <char_id>恋歌</char_id>
        <text>「ふーた」</text>
    </page>
<!-- 略 -->
</pages>

　IDといいつつ名前そのままだけど。
　で、JavaScriptでこっちも読み込むようにしました。

main.js

// charの入った配列。
var chars = null;

/**
*  charsの中から、該当するキャラを取得します。
*/
function findChar( char_id )
{
    for( iF1 = 0; iF1 < chars.length; ++iF1 )
    {
        var charData = chars[iF1];
        if( charData.id.indexOf( char_id ) == 0 )
        {
            return charData;
        }
    }
}

/**
*   XMLの要素から値を取得します。
*/
function getElementValue( element, name )
{
    return element.getElementsByTagName( name )[0].childNodes[0].nodeValue;
}

/**
    character.xmlを読み込みます。
*/
function loadCharacters()
{
    if( chars != null )
    {
        return;
    }

    // XMLHttpRequestを取得します。
    var ajax = createXMLHttpRequest();
    // URL を指定して、そこから情報を取ってきます。
    ajax.open( "GET", "characters.xml" );

    // 状態が変化したら呼ばれるイベントハンドラをセットします。
    ajax.onreadystatechange 
        = function()
        {
            if    (
                ( ajax.readyState == 4 ) && 
                ( ajax.status == 200 )
                )
            {
                // ちゃんと読み込めてたら<char>を取得。

                chars = new Array( ajax.responseXML.documentElement.getElementsByTagName( "char" ).length );

                // <char>を取得します。
                for( iF1 = 0; iF1 < chars.length; ++iF1 )
                {
                    var charElement
                        = ajax.responseXML.documentElement.getElementsByTagName( "char" )[iF1];

                    var charData = new Object();
                    charData.id
                        = getElementValue( charElement, "id" );
                    charData.color
                        = getElementValue( charElement, "color" );
                    charData.name
                        = getElementValue( charElement, "name" );
                    chars[iF1] = charData;
                }
            }
        }

    ajax.send( '' );
}

　配列はArrayオブジェクトで作るんですね。
　characters.xmlを読み込み、<char>タグの数だけ配列のサイズを確保して、それぞれにセット、という感じ。

　今回見た目はあまり関係ないけど、次がちょっと大変かも。
　なんせ、恋歌とレカン、ふたり画面に出さないといけないんで……。