(7)/属性の取得

　ねこみみか第7話。

• サンプル：ねこみみか(7)/属性の取得

　2キャラ同時表示に対応しました。
　まず、とりあえず3キャラを<img>タグで表示。ただし透明gifで見えなくしておくけど。

index.html

<!-- キャラクター -->
<DIV class="caracter">
    <IMG class="left" ID="character_left" SRC="Transparent.gif">
    <IMG class="center" ID="character" SRC="Transparent.gif">
    <IMG class="right" ID="character_right" SRC="Transparent.gif">
</DIV>

　次にスタイルシートでそれぞれの位置を設定。

main.css

/** キャラクター */
div.caracter
{
    position: absolute;

    left: 0px;
    top: 32px;

    z-index: 10;
    overflow: visible;
}

/** キャラクター（左） */
div.caracter img.left
{
    position: absolute;

    left: 30px;
    top: 0px;

    z-index: 11;
    overflow: visible;
}

/** キャラクター（中央） */
div.caracter img.center
{
    position: absolute;

    left: 190px;
    top: 0px;

    z-index: 11;
    overflow: visible;
}

/** キャラクター（右） */
div.caracter img.right
{
    position: absolute;

    left: 350px;
    top: 0px;

    z-index: 11;
    overflow: visible;
}

　アニメーションとか考えるとフリーに位置を指定できる方がいいんだろうけど、とりあえずこれで。
　画像をどの位置に表示するかは、属性で設定。

00000000.xml

    <page>
        <character align="right">Renca0601.gif</character>
        <character align="left">Lecan0703.gif</character>
        <char_id>恋歌</char_id>
        <text>「…………」</text>
    </page>

　align属性を<character>タグに持たせるようにしました。
　最後はJavaScriptで属性の取得。

00000000.xml

    // <character>の中身を取得します。
    if( pageElement.getElementsByTagName( "character" ).length != 0 )
    {
        page.characters = new Object;

        for( iF1 = 0; iF1 < pageElement.getElementsByTagName( "character" ).length; ++iF1 )
        {
            var align = "" + pageElement.getElementsByTagName( "character" )[iF1].getAttribute( "align" );
            var url = pageElement.getElementsByTagName( "character" )[iF1].childNodes[0].nodeValue;

            if( align.indexOf( "left" ) == 0 )
            {
                page.characters.left = url;
            }
            else if( align.indexOf( "right" ) == 0 )
            {
                page.characters.right = url;
            }
            else
            {
                page.characters.center = url;
            }
        }
    }

　属性の取得はElementオブジェクトのgetAttribute()メソッドで、属性名を指定して取得します。
　引数ふたつのもあるみたいだけど、それはIEでは使用できなかったんで引数ひとつだけで。
　取得できなかったらnullになるけど気にしないで文字列化。
　「leftとright以外」ってしてるのは、基本的には画面上に二人出ることは少ないと思うんで、一人だけの時にはこれまで通り簡単に表記できるようにするため。
　属性にしたのもその関係ってことで。

　……こ、今回テキスト的なボリュームもあったし、表情の書き起こしもかなりの数だったんで結構疲れた……。
　やっぱり週刊になりそうです……。