Unity WebGLとJavaScriptの連携ガイド（チュートリアル）

2024年11月13日

1. 概要
2. 準備
- 2.1. 1. フォルダー構成
3. JavaScriptファイルの作成
- 3.1. 解説
4. Unityスクリプトの作成
- 4.1. 解説
5. シーンへのスクリプトの追加
6. WebGLビルドの設定
7. 実行結果
8. 参考

概要

この技術資料は、Unity WebGLビルドでJavaScriptとやり取りするための基本的な方法を解説します。UnityからJavaScript関数を呼び出し、ブラウザの機能を活用することで、Webページとのインタラクションが可能になります。

準備

1. フォルダー構成

JavaScriptコードをUnityプロジェクト内で管理するために、Assetsフォルダー内にPluginsというサブフォルダーを作成します。このフォルダーに.jslib拡張子のJavaScriptファイルを配置します。

JavaScriptファイルの作成

以下のコードをMyJavaScript.jslibという名前のファイルに保存し、Assets/Pluginsフォルダーに配置します。

MyJavaScript.jslib:

mergeInto(LibraryManager.library, {
  PrintMessage: function () {
    console.log("広告を表示します！");
    alert("広告を表示します！");
  },
});

解説

mergeInto(LibraryManager.library, {...}): JavaScriptの関数をUnityで使用できるようにするための記述です。
PrintMessage: JavaScriptの関数で、ブラウザのコンソールに「Hello from JavaScript!」というメッセージを出力します。

Unityスクリプトの作成

Unityスクリプトを作成し、JavaScript関数を呼び出します。

CallJavaScript.cs:

using System.Runtime.InteropServices;
using UnityEngine;

public class CallJavaScript : MonoBehaviour
{
    // JavaScriptの関数をインポート
    [DllImport("__Internal")]
    private static extern void PrintMessage();

    void Start()
    {
        // WebGLビルド時のみJavaScriptを呼び出す
        #if UNITY_WEBGL && !UNITY_EDITOR
            PrintMessage();
        #endif
    }
}