mieki256's diary

mieki256's diary

2026/02/19(木) [n年前の日記]

2026/02/19(木) [n年前の日記]

2026/02/19(木) [n年前の日記]

#2 [golang] Go言語で作成したアプリをブラウザ上で動かしたい

#2 [golang] Go言語で作成したアプリをブラウザ上で動かしたい

最近の日記

検索

過去ログ表示

#2 [golang] Go言語で作成したアプリをブラウザ上で動かしたい

最近の日記

カテゴリ一覧

検索

過去ログ表示

◎ 動作確認のみをしたい :

◎ wasmを生成 :

◎ taskfileに手順を書いておく :

◎ 動作確認のみをしたい :

◎ wasmを生成 :

◎ taskfileに手順を書いておく :

◎ 動作確認のみをしたい :

◎ wasmを生成 :

◎ taskfileに手順を書いておく :

Windows11 x64 25H2 + Go 1.25.7 64bit + Ebitengine で作成したアプリを、Webブラウザ上で動かしてみたい。

以下のページが参考になった。ありがたや。

_WebAssembly - Ebitengine

先日作成した Ebitengine のサンプル相当を wasm に変換してアップロードしてみた。Firefox 147.0.4 64bit、Google Chrome 145.0.7632.110 64bit上では動いてくれた。

_img/_2026/20260219_golang_wasm/index.html

golang って凄いな…。こんなにサクッとブラウザ上で動かせてしまうのか…。さすが Googleが作ったプログラミング言語…。Web上での利用についても抜かりが無い…。

動作確認をするだけなら、wasmserve というGo言語製のツールが便利らしい。インストールは以下。Go言語がインストール済みであること。

go install github.com/hajimehoshi/wasmserve@latest

> which wasmserve
"C:\Users\USERNAME\go\bin\wasmserve.exe"

利用時は、プロジェクトフォルダをカレントディレクトリにして以下を打つ。終了は Ctrl + C。

wasmserve .

8080番ポートで待ち受けるので、Webブラウザで _http://localhost:8080/ を開けばいい。

Windows特有の処理を入れてないプロジェクトなら、すんなりブラウザ上で動いてくれた。

最初、多重起動禁止処理用にWin32 APIのMutexを使っているプロジェクトで試したら、DLL がどうとか言われてエラーが出てしまった…。どのOSでも動きそうな作りに留めておかないとダメっぽい。

wasmファイルを作成してWebサーバ上に関連ファイルを置くことで、ブラウザ上でも動作するようになるらしい。

とにもかくにも、まずは wasmファイルを作らないと話にならない。見た感じでは、以下を行ってからビルドすると wasm を作れるようだなと…。

環境変数 GOOS に "js" を指定。
環境変数 GOARCH に "wasm" を指定。
この状態でビルドをすると wasmファイルが作成される。出力ファイル名の指定(-o hoge.wasm)も必要。

PowerShellなら以下。

$Env:GOOS = 'js'
$Env:GOARCH = 'wasm'
go build -o game.wasm main.go
Remove-Item Env:GOOS
Remove-Item Env:GOARCH

コマンドプロンプトなら以下。

set GOOS=js
set GOARCH=wasm
go build -o game.wasm main.go

この wasmファイルを動作させるには、wasm_exec.js も必要になるらしい。Go言語(golang)に同梱されているので、プロジェクトフォルダにコピーする。Go 1.24以降と1.23以前で場所が違うらしいので注意。

Go 1.24以降 : (Goインストール場所)\lib\wasm\wasm_exec.js
Go 1.23以前 : (Goインストール場所)\misc\wasm\wasm_exec.js

ちなみに、Goのインストール場所は、go env GOROOT で得られる。go env xxxxxx で、Goに関する環境変数が確認できる模様。

PowerShell なら以下。

# Go 1.24以降
$goroot = go env GOROOT
cp $goroot\lib\wasm\wasm_exec.js .

# Go 1.23以前
$goroot = go env GOROOT
cp $goroot\misc\wasm\wasm_exec.js .

今回は、プロジェクトフォルダ内に該当ファイルをコピーしてくるbatファイル、get_wasm_js.bat を作成して対応してみた。AI(Google Gemini)に作成してもらった。

get_wasm_js.bat

@echo off
setlocal enabledelayedexpansion

echo [INFO] Searching for Go's wasm_exec.js...

:: Get GOROOT path from Go environment
for /f "tokens=*" %%i in ('go env GOROOT') do set "GOROOT_PATH=%%i"

:: Define possible paths (New in Go 1.24+ and Old in Go 1.23-)
set "NEW_PATH=%GOROOT_PATH%\lib\wasm\wasm_exec.js"
set "OLD_PATH=%GOROOT_PATH%\misc\wasm\wasm_exec.js"

:: Check New Path
if exist "%NEW_PATH%" (
    copy "%NEW_PATH%" .
    echo [SUCCESS] Copied wasm_exec.js from Go 1.24+ location.
    goto :end
)

:: Check Old Path
if exist "%OLD_PATH%" (
    copy "%OLD_PATH%" .
    echo [SUCCESS] Copied wasm_exec.js from legacy Go location.
    goto :end
)

:: Error handling
echo [ERROR] could not find wasm_exec.js in Go distribution.
echo [DEBUG] Tried: 
echo   1: %NEW_PATH%
echo   2: %OLD_PATH%

:end
echo [DONE] Execution finished.

配布時は以下が必要になる。

index.html
wasm_exec.js
game.wasm

index.html は前述のページの内容をコピペして利用させてもらった。game.wasm のところを、自分で生成した wasmファイル名に修正しておくこと。

index.html

<!DOCTYPE html>
<script src="wasm_exec.js"></script>
<script>
const go = new Go();
WebAssembly.instantiateStreaming(fetch("game.wasm"), go.importObject).then(result => {
    go.run(result.instance);
});
</script>

プロジェクトフォルダ内でローカルサーバ(Webサーバ)を立ち上げて、Webブラウザでアクセスして動作確認してみる。

Python 3.x が入っている環境なら、以下を打てば簡易ローカルサーバを立ち上げられる。終了は Ctrl + C。

python -m http.server 8080

_http://localhost:8080/ を開いて動けば成功。

毎回ビルドするたびに環境変数を指定するのも面倒だなと…。batファイルで対応してもいいけれど、先日 Task(taskfile)というツールをインストールしたことだし、そちらで対応してみよう…。

Taskfile.yml

version: '3'

tasks:
  default:
    cmds:
      - task --list

  res:
    desc: Make resource .syso
    env:
      GOOS: windows
      GOARCH: amd64
    cmds:
      - go-winres make

  build:
    desc: Build GUI version
    deps: [res]
    env:
      GOOS: windows
      GOARCH: amd64
    cmds:
      - go build -ldflags="-H windowsgui"

  run:
    desc: Development
    cmds:
      - go run .

  clean:
    desc: remove *.exe and *.syso
    cmds:
      - rm -f *.exe
      - rm -f *.syso

  build-wasm:
    desc: Build the Ebitengine game for WebAssembly
    env:
      GOOS: js
      GOARCH: wasm
    cmds:
      - go build -o game.wasm main.go      
    sources:
      - ./main.go
    generates:
      - ./game.wasm

  serve:
    desc: Run a local server to test the WASM build
    cmds:
      - wasmserve .

  chkenv:
    desc: Check OS env
    cmds:
      - echo GOOS is %GOOS%
      - go env GOOS

task build-wasm と打てば wasm がビルドできる。

env: を指定することで、環境変数を一時的に変更することが可能らしい。
sources: と generates: の指定で、どのファイルを使ってどのファイルを作成するのか指定できる。main.go と game.wasm を指定してるから、main.go と game.wasm のタイムスタンプを見て、main.go のタイムスタンプが game.wasm より新しい時だけビルドが行われるようになる。

ただ、この項目を指定したら、exeを作るためのビルド時に「GOOS, GOARCHがおかしい」と言われてエラーになった…。res: や build: の設定項目内に env: を用意して、GOOS=windows, GOARCH=amd64 を指定することで対応することにしてみた。

[ ツッコむ ]

以上です。

Prev - 2026/02 -