【gzip対応】自分のWEBサイトにWebGLゲームを埋め込む

2025年1月11日

unityroomみたいなやつを自分のサイトで作りたい！

UnityでWebGLビルドしたゲームを、ブラウザで公開する場合、主に以下の方法があります。

1.unityroomやPlicyやUnity Playなどのゲーム公開サイトからゲームをアップロードし、公開
2.GitHub Pagesでゲームを公開
3.自分のWebページでゲームを公開

1の方法はカンタンにゲームをアップロード・公開することが出来る反面、ゲームを配置しているWebページの編集は出来ません。たとえば、起動前のロード画面を編集することは出来ませんし、ゲームを配置しているWebページをイジることも出来ません。

2のGitHubPagesの方法の場合、HTML/CSSを編集出来るものの、URLはGitHubドメインになりますし、gzip圧縮したビルドデータで公開するにはちょっと難しそうでした。

この記事では、冒頭にあるように、自分のWEBページに、WebGLビルドしたゲームを埋め込んでみたので、そのやり方を共有します。

★作ったもの
(1)WebGLビルドしたゲーム(gzip形式)
(2)(1)を埋め込んだ自作Webページ(このページ)
(3)ビルドファイルのアップローダー(次回解説)

★前提知識
・HTML初歩的な知識

★試したWebサイトの環境
・WordPress(このサイトもWordPress製です)
・ConoHa Wingのレンタルサーバー
※他のレンタルサーバーでも恐らく似たようなことは出来るとは思います。
今回紹介する方法は、.htaccessを編集する必要があるので、.htaccessを編集出来ないレンタルサーバーの場合今回の方法は使えないかもしれません。軽く調べた限り、Wixだと編集出来ないみたいです。

gzip形式のゲームを自分のWebサイトに埋め込む手順

手順①：gzip形式でWebGL用にビルドする

まずは、Unity側のビルドの設定です。unityroomと同じgzip形式で圧縮してビルドします。
具体的な方法は以下のページで解説しているのでご確認ください。

手順②：ゲーム公開用のパスを作る

次に、ゲーム公開用のパスを作ります。
ConoHa Wingの場合、ファイルマネージャーからパスを追加出来るので、ルートの配下にフォルダを作りました。
このtestplayroomというURLを、ゲームを公開するパスにします。

手順③：ビルドデータをサーバーにアップロード

これも使用されているサーバーによると思うのですが、ConoHa Wingの場合、ファイルマネージャーとからアップロードができました。ファイルマネージャー機能がないサーバーの場合、FFFTPなどのソフトを使うと出来ると思います。

アップロードする対象は、UnityでWEBGLビルドすると出来上がる以下のファイルたちです。

・index.html
・TemplateDataフォルダ
・Buildフォルダ配下の以下のファイル達
　→xxxx.data.gz / xxxx.framework.js.gz / xxxx.loader.js / xxxx.wasm.gz

index.htmlを編集すれば、アップロードしたWebページの見た目やテキスト、ボタンなどの機能を編集出来ます。
ビルドファイルのパスは、Rootフォルダ以下を下記の構成にしています。
TemplateData内の画像データを差し替えればロード中の画像や、ローディングバーの表記も変えられます。

testplayroom/
├── Build/
│   ├── loader.js
│   ├── data.gz
│   ├── framework.js.gz
│   ├── wasm.gs
├── TemplateData/
├── index.html

ちなみに、ファイルマネージャーからしかアップロード出来ないと不便なので、アップローダーも作りました。その方法は次回紹介します。

手順④：.htaccessの編集

最後に、サーバーにある、.htaccessを編集します。
これは何のファイルかというと、Webサーバーの動作をディレクトリ単位で制御できるファイルのことです。

このファイルの在処は、ご使用のサーバーのヘルプページを見ていただくのがよいと思います。
今回使用しているConoHa Wingというレンタルサーバーでは、Conohaコントロールパネルから.htaccessが編集が出来ました。

.htaccessに設定する値は以下の通りです。

<IfModule mod_mime.c>
  AddEncoding gzip .gz
  AddType application/javascript .js.gz
  AddType application/wasm .wasm.gz
  AddType application/octet-stream .data.gz
</IfModule>

<IfModule mod_headers.c>
  <FilesMatch "\.js\.gz$">
    Header set Content-Type application/javascript
    Header set Content-Encoding gzip
    Header set Cache-Control "public, max-age=31536000"
  </FilesMatch>
  <FilesMatch "\.wasm\.gz$">
    Header set Content-Type application/wasm
    Header set Content-Encoding gzip
    Header set Cache-Control "public, max-age=31536000"
  </FilesMatch>
  <FilesMatch "\.data\.gz$">
    Header set Content-Type application/octet-stream
    Header set Content-Encoding gzip
    Header set Cache-Control "public, max-age=31536000"
  </FilesMatch>
</IfModule>

これは、.gzのファイルをgzip形式として認識してちゃんと処理してね、とブラウザに知らせるためのオマジナイです。
このオマジナイがないと、gz形式のファイルを読み込んでくれません。

手順⑤：アップロードしたゲームをプレイしてみる

ココまで出来てればゲームが遊べるようになっているはずです。
先ほどアップロードしたinex.htmlがあるページに飛んでみましょう！

私の場合は、以下のパスにアップロードしたので、

public_html > yurinchi2525.com > handon > testplayroom

アップロードしたゲームが遊べるURLは以下のようになります。
https://yurinchi2525.com/handon/testplayroom

また、index.htmlも、Unityが吐き出すデフォルトファイルをちょっぴり編集し、Unityのロゴなどを削除しています。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>オレのゲームだぜ！</title>
    <link rel="shortcut icon" href="TemplateData/favicon.ico" />
    <link rel="stylesheet" href="TemplateData/style.css" />
    <style>
      /* フッター内のタイトル、フルスクリーンボタン、ロゴを非表示 */
      #unity-build-title,
      #unity-fullscreen-button,
      #unity-logo-title-footer {
        display: none;
      }
      /* 余白を削除*/
      html,
      body {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
      }

      /* Unityのコンテナに余計な余白がないよう設定 */
      #unity-container {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      /* UnityのCanvasに無駄な余白を持たせない */
      #unity-canvas {
        display: block;
        margin: 0;
        padding: 0;
        width: 960px; /* 必要に応じて調整 */
        height: 540px; /* 必要に応じて調整 */
        box-sizing: border-box;
      }

      /* フッターは完全に非表示 */
      #unity-footer {
        display: none;
      }
    </style>
  </head>
  <body>
    <div id="unity-container" class="unity-desktop">
      <canvas id="unity-canvas" width="960" height="540" tabindex="-1"></canvas>
      <div id="unity-loading-bar">
        <div id="unity-logo"></div>
        <div id="unity-progress-bar-empty">
          <div id="unity-progress-bar-full"></div>
        </div>
      </div>
      <div id="unity-warning"></div>
      <div id="unity-footer">
        <div id="unity-logo-title-footer"></div>
        <div id="unity-fullscreen-button"></div>
        <div id="unity-build-title">FitBody</div>
      </div>
    </div>
    <script>
      var canvas = document.querySelector("#unity-canvas");
      function unityShowBanner(msg, type) {
        var warningBanner = document.querySelector("#unity-warning");
        function updateBannerVisibility() {
          warningBanner.style.display = warningBanner.children.length
            ? "block"
            : "none";
        }
        var div = document.createElement("div");
        div.innerHTML = msg;
        warningBanner.appendChild(div);
        if (type == "error") div.style = "background: red; padding: 10px;";
        else {
          if (type == "warning")
            div.style = "background: yellow; padding: 10px;";
          setTimeout(function () {
            warningBanner.removeChild(div);
            updateBannerVisibility();
          }, 5000);
        }
        updateBannerVisibility();
      }

      var buildUrl = "Build";
      var loaderUrl = buildUrl + "/Build.loader.js";
      var config = {
        arguments: [],
        dataUrl: buildUrl + "/Build.data.gz",
        frameworkUrl: buildUrl + "/Build.framework.js.gz",
        codeUrl: buildUrl + "/Build.wasm.gz",
        streamingAssetsUrl: "StreamingAssets",
        companyName: "DefaultCompany",
        productName: "FitBody",
        productVersion: "0.1.0",
        showBanner: unityShowBanner,
      };

      if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
        var meta = document.createElement("meta");
        meta.name = "viewport";
        meta.content =
          "width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, shrink-to-fit=yes";
        document.getElementsByTagName("head")[0].appendChild(meta);
        document.querySelector("#unity-container").className = "unity-mobile";
        canvas.className = "unity-mobile";
      } else {
        canvas.style.width = "960px";
        canvas.style.height = "540px";
      }

      document.querySelector("#unity-loading-bar").style.display = "block";

      var script = document.createElement("script");
      script.src = loaderUrl;
      script.onload = () => {
        createUnityInstance(canvas, config, (progress) => {
          document.querySelector("#unity-progress-bar-full").style.width =
            100 * progress + "%";
        })
          .then((unityInstance) => {
            document.querySelector("#unity-loading-bar").style.display = "none";
          })
          .catch((message) => {
            alert(message);
          });
      };

      document.body.appendChild(script);
    </script>
  </body>
</html>

手順⑥：ゲームを配置したURLを埋め込んでみる

最後に、先程の手順で作ったアップロードしたゲームを、別のページに埋め込んでみましょう。
このページの冒頭では、HTMLの<iframe>タグを使って、手順⑤でアップロードしたページを埋め込んでいます。

このサイトでの埋め込みのHTMLは以下のとおりですが、高さ・幅の数値は各サイトで最適な値に合わせていただくのが良いと思います。

<div style="position: relative; width: 100%; max-width: 100%; margin: 0 auto; overflow: hidden;">
  <iframe 
    src="手順5のURL" 
    style="width: 100%; height: 540px; border: none; margin: 0; padding: 0; display: block;" 
    scrolling="no">
  </iframe>
</div>

これで完成です！
この記事の冒頭にあるような、WebGLゲームの埋め込みが出来ました！

また、Webページのサイドにウィジェットがあると、ゲーム画面の端が切り取られる事象が発生したので、このページではウィジェットをオフにしています。