【Godot4】ASP.NET Core Web上でアプリを動かす

Godot4でエクスポートしたWeb(HTML5)のアプリをASP.NET Core Web上で動かしたい！

概要

今回の記事では、Godot4でエクスポートしたWeb(HTML5)のアプリをASP.NET Core Web上で動かす手順を掲載する。

どこに需要があるんだっていう感じのかなり特殊な環境なのではなかろうか。

仕様書

環境

Gogot 4.1.1
.NET 7.0

手順書

今回は例としてhttp://example.com/GodotApp/にアクセスするとGodotからエクスポートしたアプリが表示されるようにする。

まず、GodotからエクスポートしたファイルをASP.NET Core Webのプロジェクトのwwwroot/app/godot_appにコピーする。

Controllers/GodotAppControllers.csを作成して下記のような感じにする。

MVCを使う例。

using Microsoft.AspNetCore.Mvc;

namespace MyApp.Controllers
{
    public class GodotAppController : Controller
    {
        public IActionResult Index()
        {
            HttpContext.Response.Headers.Add("Cross-Origin-Embedder-Policy", "require-corp");
            HttpContext.Response.Headers.Add("Cross-Origin-Opener-Policy", "same-origin");
            return View();
        }
    }
}

Pageを使う場合は、Pages/GodotApp.chtml.csを下記のような感じにする。（この場合は）

using Microsoft.AspNetCore.Mvc.RazorPages;

namespace MyApp.Pages
{
    public class IndexModel : PageModel
    {
        public void OnGet()
        {
            HttpContext.Response.Headers.Add("Cross-Origin-Embedder-Policy", "require-corp");
            HttpContext.Response.Headers.Add("Cross-Origin-Opener-Policy", "same-origin");
        }
    }
}

ASP.NET Core Webでは.htaccessを使えないので、その分の処理をControllerやPageでやってる。

ただこれだけだと不十分で、chtmlから呼び出されるjsやpckなどのヘッダーにも同じような処理が必要になる。

startup.csのConfigure関数に処理を追加する。

        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            ...

            var provider = new FileExtensionContentTypeProvider();
            provider.Mappings[".pck"] = "application/octet-stream";

            app.UseStaticFiles(new StaticFileOptions
            {
                ContentTypeProvider = provider,
                OnPrepareResponse = context =>
                {
                    if (context.Context.Request.Path.StartsWithSegments("/app/godot_app"))
                    {
                        var path = context.Context.Request.Path;

                        if (provider.TryGetContentType(path.Value, out var contentType))
                        {
                            context.Context.Response.Headers[HeaderNames.ContentType] = contentType;
                        }

                        context.Context.Response.Headers.Add("Cross-Origin-Embedder-Policy", "require-corp");
                        context.Context.Response.Headers.Add("Cross-Origin-Opener-Policy", "same-origin");
                    }
                }
            });

            ...
        }

wwwroot/app/godot_appから読み込まれるファイルにもchtmlと同じようにヘッダーを追加するようになる。
もうひとつ大事な処理をやってて、IISやASP.NET Core Webでpckファイルをそのまま読み込めない。MIME-TYPEを設定すると読み込めるようになるので、application/octet-streamを設定する。

最後にchtmlを編集する。MVCの場合は/Views/GodotApp/Index.chtml、Pageの場合は/Pages/GodotApp.chtmlにGodotからエクスポートしたindex.htmlの中身をまるごとコピペする。

なるべくGodotから出力したファイルに手を加えたくないんだけども、chtmlに対応していない部分と外部のjsファイルをpckファイルを詠み込むために相対パスを始点を変更する修正をする。

相対パスを始点を変更するので<head>タグの中に<base>タグを追加する。

<!DOCTYPE html>
<html lang="en">
    <head>
        ...
        <base href="~/app/godot_app/" />
        ...
    </head>
</html>>

Godotからエクスポートしたindex.htmlにはメディアクエリが含まれてて、@が使われてるんだけども、chtmlでは@は別の意味を持つので@@としてメディアクエリとして使えるように修正する。
63行目のメディアクエリを下記のように修正する。（先頭に@を一つ追加する）

...

@@media only screen and (orientation:portrait) {
    #status-progress {
        width: 61.8%;
    }
}

...

ここまでやってブラウザでhttp://example.com/GodotApp/にアクセスするとGodotでエクスポートしたアプリが表示されるようになる。

まとめ（感想文）

Windows ServerでIISなサーバーでASP.NET Core Webで認証やらなんやらを行いつつGodotのアプリを起動したい場合に使えるかもね！

LinuxでApacheな感じならASP.NET Core Webを使うにしても、Apache側でなんとかした方が楽かな！多分！