GitHub Pagesを使ってUnity製ゲームをスマホのブラウザで動かす

　GitHub PagesでUnity製スマホ向けゲームを公開する時にやったこと

環境

　Unity 2020.3.22f1
　Visual Studio Code 1.63.2
　git version 2.34.1.windows.1

動かしたいゲーム

　スマホ向け2Dパズルゲーム
　スマホ縦画面を想定して制作(9:16)

WebGLで書き出す

　[Unity：作ったゲームをWebGLビルドで公開する]
(https://dianxnao.com/unity%ef%bc%9a%e4%bd%9c%e3%81%a3%e3%81%9f%e3%82%b2%e3%83%bc%e3%83%a0%e3%82%92webgl%e3%83%93%e3%83%ab%e3%83%89%e3%81%a7%e5%85%ac%e9%96%8b%e3%81%99%e3%82%8b/)
　ここを参考にWebGL設定をする

　iOSで動かすには

　Graphics APIsをWebGL 1.0にしておく

　Compression FormatをDisabledにしておく

　WebGL TemplateはMinimalで
　(後でいじるのでCanvas WidthとCanvas Heightは適当で)

GitHubにアップロードする

　自分で作ったWebページをインターネット上に公開しよう！
　【Unity】GitHub PagesでWebGLを表示した話

　ここを参考に出力ファイルを丸ごとGitHubにアップロードする

　Webでプッシュできる容量なら良いのだがダメだったのでVScodeでgitを使った
　VSCodeでGit・GitHubを使う方法を解説する【2021最新】

index.htmlを改変して9:16固定にする

index.html(一部)

<script>
      var canvas = document.getElementById("unity-canvas");

      function resize()
      {
        canvas.style.height = document.documentElement.clientHeight + "px";
        canvas.style.width = ((document.documentElement.clientHeight / 16 )* 9) + "px";
        if (((document.documentElement.clientHeight / 16 )* 9) > document.documentElement.clientWidth)
        {
          canvas.style.width = document.documentElement.clientWidth + "px";
          canvas.style.height = ((document.documentElement.clientWidth / 9 )* 16) + "px";
        }
      }
      
      resize();

      window.onresize = resize;
</script>

　ウィンドウがリサイズされたらcanvasの高さと幅を調節するjavascriptを追記します

　まとめ

　WebGL1.0にする
　GitHubにアップロードしてGitHub Pagesで公開
　index.htmlにjavascriptを入れてレイアウト調節