前回

2015/10/21 追記

下記に、先頭部分だけ化けているという様な事を書いているが、実際には最上位ビットがたっている全ての byte が化ける模様. 下記に、自分がとった対応方法を記載した.
Karma で XHR で Binary File を読み込む Unit Test を書く / TypeScript による Alembic の読み込み 3

読み込んだ Binary Data が化ける問題

前回最後に書いた、XMLHttpRequest で読み込んだ Binary Data の先頭部分が化ける、という問題は解決. 原因は予想通り Karma の Web-Server にあった.

Karma 環境で問題の再現

GitHub に、自分の環境で発生した問題を再現するコードを上げた.
xmlhttprequest-data-corrupt

このテストをそのまま CI にも投げたところ、OS や Browser に関係なく再現した. どの環境でも、全く同じ値になって読み込まれている. 先頭の 1 byte が 0x80 で、それを全て 0 で埋めた 16 bytes のデータを XMLHttpRequest で読み込み、それを Uint8Array に入れて出力したのが下記.
Uint8Array{0: 239, 1: 191, 2: 189, 3: 0, 4: 0, 5: 0, 6: 0, 7: 0, 8: 0, 9: 0, 10: 0, 11: 0, 12: 0, 13: 0, 14: 0, 15: 0, 16: 0, 17: 0}

Karma Web-Server が怪しい

OS が変わっても、Browser が変わっても再現するという状況から、読み込んだデータとして化けた値を Web-Server から渡されているんだろうと想像 (で、前回の記事にも追記した). なので、他の Web-Server 環境で検証を行う事にした.

検証方法

XMLHttpRequest は file プロトコル環境下では使えないらしい. かといって、この検証のためだけにローカル環境に Web-Server を入れるのは嫌だ.

GitHub には、Repository 毎に Web Page を公開できる GitHub Pages というものがある. 今回はこれを使ってみた. 作り方は、下記の Help の中にある、Project Pages を参照.
https://help.github.com/articles/user-organization-and-project-pages/

検証結果

で、早速上記の Repository に検証用の Page を作ってみた結果が下記.
Verification page

とても質素…. そこは今回は問題ではなく、正しく読めている !! 事が重要. という訳で、原因は Karma の Web-Server だった…

一応、検証に使った html の内容を下記に書いておく.

index.html


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Verification page</title>
        <script type="text/javascript">
            function readBinFile(filename, elementId) {
                var request = new XMLHttpRequest();

                request.open('GET', filename);

                request.responseType = 'arraybuffer';
                request.addEventListener('loadend', function () {
                    if (request.status != 200) {
                        return ;
                    }

                    var content = (new Uint8Array(request.response)).toString();

                    var element = document.getElementById(elementId);
                    element.appendChild(document.createTextNode(content));
                });

                request.overrideMimeType('application/octet-stream');
                request.send();
            }

            function main() {
                readBinFile('0x7f.bin', '0x7F');
                readBinFile('0x80.bin', '0x80');
            }
        </script>
    </head>
    <body onload='main();'>
        <h1>Verification page</h1>
        <hr />
        <p>
            <h2>0x7F.bin</h2>
            <h3>ORIGINAL</h3>
            <div>[ 0x7F, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ]</div>
            <h3>READED</h3>
            <div id='0x7F'></div>
        </p>
        <p>
            <h2>0x80.bin</h2>
            <h3>ORIGINAL</h3>
            <div>[ 0x80, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ]</div>
            <h3>READED</h3>
            <div id='0x80'></div>
        </p>
    </body>
</html>

とはいえ

Unit Test 環境はなくせない… 特に今やっている特定のファイルフォーマットの読み込み処理なんて、Unit Test がないとやってられない.

とりあえず、Karma で動いている事を判別して、最低限の回避コードを仕込む事で逃げられないかを検討中…. 何か他に良い方法があったら教えて下さい.

今回、Alembic 関係ない.名前を失敗したなー

Karma で XHR で Binary File を読み込む Unit Test を書く / TypeScript による Alembic の読み込み 3

Karma で XHR で Binary File 読み込む時の問題 / TypeScript による Alembic の読み込み 2

前回