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

概要

この技術資料は、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
    }
}

解説

  • [DllImport("__Internal")]: UnityのC#コードからJavaScript関数を呼び出すための宣言です。
  • PrintMessage(): JavaScriptのPrintMessage関数を呼び出します。
  • #if UNITY_WEBGL && !UNITY_EDITOR: WebGLビルド時のみコードを実行するプリプロセッサディレクティブです。

シーンへのスクリプトの追加

  1. Unityエディターで新しい空のGameObjectを作成します。
  2. CallJavaScript.csスクリプトをGameObjectにアタッチします。

WebGLビルドの設定

  1. Unityエディターで、File > Build Settingsに移動します。
  2. プラットフォームをWebGLに切り替え、Switch Platformをクリックします。
  3. 必要なビルド設定を行い、Build and Runを選択してWebGLビルドを作成します。

実行結果

  • WebGLビルドをブラウザで実行すると、ポップアップで「広告を表示します！」と表示されます。
  • これにより、UnityからJavaScript関数が正常に呼び出されていることが確認できます。

参考

C#,Unity

Posted by hidepon