Unity WebGL ブラウザの大きさに合わせる

#Unity側だけの知識ではハマる！
ブラウザの大きさに応じて画面をリサイズしていくような処理は、
Unity側で出来ないことはないけど手軽ではないという結論に至った。
htmlやjavascript、cssの知識を活用して今回はこの問題を解決する。

##１.Unity側の作業
Unity側の作業はロゴを消すぐらい。

File>Build Settings>Player Settings
Resolution and Presentation
WebGL TemplateをDefault→Minimalへ変更

念の為下記も設定しておくといいかも。

• File>Build Settings>Player Settings
• Resolution and Presentation
• Default Screen Width {Canvas Scaler Refernce resolution xの値}
• Default Screen Height {Canvas Scaler Refernce resolution yの値}

※ここの値は書き出されたindex.htmlのcanvasのwidthとheightに反映されるだけなので、不要っちゃ不要。

##２.windowsResize.jsの作成（js久しぶりすぎて、ほとんど忘れてた。。）

var container;
var canvas;
var timer = 0;

//初期化
function init() {
    canvas = document.getElementById('canvas');
    container = document.createElement('div');
    container.style.width = window.innerWidth + 'px';
    container.style.height = window.innerHeight + 'px';
    container.style.overflow = 'hidden';
    container.appendChild(canvas);
    document.body.appendChild(container);
    document.body.style.margin = '0px'
}

//サイズ変更処理
function resize() {
    container.style.width = window.innerWidth + 'px';
    container.style.height = window.innerHeight + 'px';
    canvas.width = window.innerWidth * window.devicePixelRatio;
    canvas.height = window.innerHeight * window.devicePixelRatio;
}

window.onload = function () {
    init();
    resize();
};

//ブラウザの大きさが変わった時に行う処理
(function () {
    var timer = 0;
    window.onresize = function () {
        if (timer > 0) {
            clearTimeout(timer);
        }
        timer = setTimeout(function () {
            resize();
        }, 200);
    };
}());

##３.windowsResize.jsの配置
書き出したindex.htmlと同階層にwindowsResize.jsを置く。

##４.書き出し後のindex.htmlの修正
・index.htmlに1行追加

<script type="text/javascript" src="windowResize.js"></script>

※head内だったらどこでもOK。タグの間に書くとか斜め上のことはやらないでください。

##５.最後に
後はUnity側のUI配置を画面サイズが変わっても崩れないように配置すればOK（これが一番大変そう）