コンテンツへスキップ
Tags

,

GoではじめるWebAssebmly その2「JavaScriptイベントハンドリング」

by : 2018/12/14

WebAssebmlyはWebブラウザ上でバイナリファイル（テキスト形式もあり）を実行できる環境です。JavaScriptと異なりコードの漏洩がなく、実行速度も高速というのがメリットです。

WebAssebmlyは元々Rustで開発することが多かったですが、最近では様々なプログラミング言語が対応しています。その一つがGoです。Go 1.11からWebAssembly向けにもコンパイルできるようになっています。

一般的なWebAssemblyはDOMやネットワーク操作が行えません。それに対してGo 1.11ではJavaScript APIを使えるようにした syscall/js パッケージを用いることで、DOMやネットワーク操作を可能にしています。

そこで今回はDOMのクリックイベントをWebAssemblyで扱う方法を紹介します。

まずGoのコードです。今回はmain.goとしています。最初に syscall/js をインポートします。


import "syscall/js"

view raw

index.go

hosted with ❤ by GitHub

そして、トップレベルのDOMであるドキュメントを作成します。


document := js.Global().Get("document")

view raw

index.go

hosted with ❤ by GitHub

IDやクラスを使ってDOMを取得します。


button := document.Call("getElementById", "btn")

view raw

index.go

hosted with ❤ by GitHub

取得したボタンに対してコールバックを指定します。


cb := js.NewCallback(func(args []js.Value) {
println("Clicked");
})

view raw

index.go

hosted with ❤ by GitHub

ボタンのクリックイベントにコールバックを指定します。


button.Call("addEventListener", "click", cb)

view raw

index.go

hosted with ❤ by GitHub

最後にプログラムが終了しないようにチャネルを待ち受けます。


<-make(chan struct{}, 0)

view raw

index.go

hosted with ❤ by GitHub

これで完成です。全体のコードは次のようになります。


package main
import "syscall/js"
func main() {
document := js.Global().Get("document")
button := document.Call("getElementById", "btn")
cb1 := js.NewCallback(func(args []js.Value) {
println("Clicked");
})
button.Call("addEventListener", "click", cb1)
<-make(chan struct{}, 0)
}

view raw

index.go

hosted with ❤ by GitHub

HTMLを準備する

HTMLはボタンを貼り付けだけのものです。


<html>
<head>
<meta charset="utf-8">
<script src="wasm_exec.js"></script>
<script>
const go = new Go();
WebAssembly.instantiateStreaming(fetch("main.wasm"), go.importObject).then((result) => {
go.run(result.instance);
});
</script>
</head>
<body>
<button id="btn">クリック</button>
</body>
</html>

view raw

index.html

hosted with ❤ by GitHub

JavaScriptファイルを用意する

専用のJavaScriptファイルを設置します。


$ cp "$(go env GOROOT)/misc/wasm/wasm_exec.js" .

view raw

index.

hosted with ❤ by GitHub

Goをコンパイルする

最後にGoファイルをコンパイルして WebAssebmly化します。


$ GOOS=js GOARCH=wasm go build -o main.wasm

view raw

index.

hosted with ❤ by GitHub

サーバを立ち上げる

Webサーバは goexec を用います。インストールは go get -u github.com/shurcooL/goexec になります。インストールされたら以下のコマンドでHTTPサーバを立ち上げます。


$ goexec 'http.ListenAndServe(":8080", http.FileServer(http.Dir(".")))'

view raw

index.

hosted with ❤ by GitHub

これで http://localhost:8080/ でアクセスできます。

試す

では実際に試しているところです。ボタンをクリックすると開発者ツールのコンソールにログが出力されます。

このようにしてGoのコードからイベントハンドリングができます。

Goを使うことでWebアプリケーションをまるっとWebAssemblyで提供できる可能性が出てきました。高速、かつコードの隠蔽化も実現しますのでWebアプリケーションの可能性を飛躍的に向上できるでしょう。

ぜひトライしてみてください。

From → HTML5

コメントは受け付けていません。

«
»
%d人のブロガーが「いいね」をつけました。