Unity WebGLをスマホ対応させたい！画面が切れる問題を解決した方法
今回、Unityでゲームを作ってWebGLで公開することにしました。パソコンの画面で表示させることが出来てほっとしていたのも束の間、なんと携帯で見ると画面が切れているではありませんか。この状態を解決するため、何日も試行錯誤して「もうお手上げ！」と絶望していました。
自分のサイト（ロリポップ）にゲームを載せているのですが、特に携帯のブラウザ対応は一筋縄ではいきませんでした。
試行錯誤の末、無料で公開されている「Better Unity WebGL Template」とUnity内のちょっとした設定変更だけで、パソコンでも携帯でもピッタリ表示させることに成功しました。
今回は、私が運営しているゲームに適用した「スマホ対応の最短ルート」を、備忘録としてまとめておきます。
1. GitHubから「神テンプレート」をダウンロードする
まず、スマホ対応を簡単にしてくれるテンプレートを入手します。
GitHubの「Better Unity WebGL Template」のページへ行き、緑色の「Code」ボタンから「Download ZIP」をクリックして保存します。
グレッグマン（greggman）さんの Better Unity WebGL Template をお借りしました。このテンプレートのおかげで助かりました！ありがとうございます。
2. Unityプロジェクトへの導入手順
ダウンロードしたZIPを解凍します。解凍して出てきた『WebGLTemplates』フォルダを、UnityのProjectウィンドウ内にある『Assets』フォルダの直下へドラッグアンドドロップします。
３．Unity側の設定
Canvas Scaler
①UI Scaler Modeを「ScaleWithScreenSize」
②ScreenMatchModeを「Expand」 これだけで、画面からはみ出る問題が解決します。
BuildSetting>Publishing Settings
①読み込みエラーを防ぐために「Compression Format」をDisabled（なし）
②「Decompression Fallback」のチェックを外す
Compression FormatをDisabled（なし）にすると、この項目は自動的に
消えるか、設定不要になります。
＊最初は確実性を取って圧縮なし（Disabled）にしましたが、設定を見直して Brotli ＋ Decompression Fallback を試したところ、ロリポップでも問題なく動作し、さらに読み込みも速くなりました！
BuildSetting>Resolution and Presentation
①キャンバスサイズはゲームを作成したときのサイズ
②テンプレートはBetter2020を選択
４.lolipopサーバーへ
「index.html」や「Buildフォルダ」など、中身をバラしてサーバーの公開フォルダへ置く
５．まとめ
これらを設定してビルドし直したところ、あんなに苦戦していたスマホ表示が嘘のように綺麗に
収まりました！
パソコンでもスマホでも、プレイヤーがストレスなく遊べる環境が整って大満足です。
同じ悩みで「お手上げ」になっている方の参考になれば幸いです。