Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Goで作ったWebAssemblyで画像加工
Search
from-unknown
March 20, 2019
Technology
1
610
Goで作ったWebAssemblyで画像加工
Goで作成したGifアニメーションを作成するプログラムがWasmで動くかどうかを試した過程で学んだことをスライドにしました。
from-unknown
March 20, 2019
Tweet
Share
More Decks by from-unknown
See All by from-unknown
GoでWebAssembly
fromunknown
0
1.2k
Golang+Firestore
fromunknown
1
1.2k
Goで作る初めてのHTTPサーバー
fromunknown
1
1.5k
NGO APIを支える技術
fromunknown
0
120
Other Decks in Technology
See All in Technology
期待しすぎずに取り組む両面 TypeScript
shozawa
2
290
10分でわかるfreeeのQA
freee
0
230
Cloud Friendly(?) Jenkins. How we failed to make Jenkins cloud native and what we learned?
onenashev
PRO
0
110
Tohoku.Tech #1 「EC-CUBE/AWSの構築をChatGPTに相談してみました」by テンダ
jun2882
0
140
実務への応用例から考える 変更に強いオブジェクト指向設計 / 20240324-ooc2024
bengo4com
7
5.3k
統計的学習理論読み Chapter 2
kmatsui
1
210
KubeCon EU 2024 : Knative Maintainers Session
salaboy
0
370
生成AI・LLM時代における 機械学習エンジニアとしてのキャリア戦略・開発戦略 / my-career-and-development-strategies-for-ml-engineer-2024
yuya4
4
300
データマネジメントを支える武器としてのメタデータ管理
10xinc
1
440
TCA入門したてなので、自分が馴染みのある実装と比較しながらキャッチアップしてみる
fumiyasac0921
1
370
技術イベントはなんとかひねり出す 日経の技術広報の取り組み/techpr3
nishiuma
0
220
オブジェクト指向CSSが叶えたかったことと、CSSのいま / The aims of Object-oriented CSS and the current state of CSS usage
shinkufencer
11
3.6k
Featured
See All Featured
Building Effective Engineering Teams - LeadDev
addyosmani
25
1.8k
The Illustrated Children's Guide to Kubernetes
chrisshort
28
46k
YesSQL, Process and Tooling at Scale
rocio
160
13k
Clear Off the Table
cherdarchuk
82
310k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
28
5.9k
Fontdeck: Realign not Redesign
paulrobertlloyd
75
4.8k
Raft: Consensus for Rubyists
vanstee
130
6.2k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
185
15k
Scaling GitHub
holman
456
140k
Fashionably flexible responsive web design (full day workshop)
malarkey
397
65k
A Modern Web Designer's Workflow
chriscoyier
689
190k
Designing Experiences People Love
moore
135
23k
Transcript
GoでWebAssembly @from_unknown
アジェンダ • WebAssemblyとは ◦ 利点と制約 • GoでWebAssemblyをビルドする • ブラウザ上で実行するためには •
気になるポイント ◦ 性能は? ◦ Goroutineは? • まとめ
WebAssemblyとは • バイナリのインストラクションフォーマットである • 複数の言語で書くことができる ◦ C、C++、Rust、Go(次期バージョン正式対応)など • ネイティブに近い速度で実行できる •
Javascriptを置き換えるのではなく、補完するものである • 主要ブラウザがWebAssemblyの1.0に対応されている
WebAssemblyの利点 • 効率的で実行速度が早い • バイナリにコンパイルされるため、テキストのJavascriptよりサ イズが小さい • 既存のCやC++などの資産を活かせる
WebAssemblyの制約 • サンドボックスの中で実行され、Javascriptと同様の制約を受 ける(Same-originなど) • 使用できるリソースの量は制限される • マルチスレッドやガーベージコレクションは現時点ではサポー トされていない •
HTML内のDOMの操作を直接できない ◦ DOMの操作はJavascriptを介して操作する
GoでWebAssemblyをビルドする Go and wasm: generating and executing wasm with Go
https://blog.gopheracademy.com/advent-2017/go-wasm/ こちらも参考にしました サクッと Go → WebAssembly を試す https://qiita.com/cia_rana/items/bbb4112b480636ab9d87
GoでWebAssemblyをビルドする 以下の方法でWebAssembly対応が入ったbetaを取得する • githubのgolang/goからソースを取得してビルドする ◦ 既にmasterにWebAssembly対応が入っている • githubのgolang/goのリリースからgo1.11betaXをダウンロー ドしてくる •
公式のサブレポジトリにあるgo1.11betaXコマンドを使う
GoでWebAssemblyをビルドする WebAssembly対応が入ったGoコマンドのGOOSとGOARCHに 以下を指定してビルドするだけ GOOS=js GOARCH=wasm go build … 簡単ですね!
ブラウザ上で実行するためには • WebAssemblyをブラウザ上で実行するには、 WebAssembly.instantiate()に以下を渡す必要がある ◦ wasmファイル(ArrayBufferなどに読み込む必要あり) ◦ (Optional)importObject ▪ ここで渡したJavascriptのObjectがGo側から呼べる
※wasmファイルをArrayBufferなどにしなくても読み込める instantiateStreaming()が推奨されている様ですが、ブラウザサ ポートがマチマチの様です。
ブラウザ上で実行するためには wasm形式にコンパイルしたGoを実行するには • Javascriptでwasmファイルを取得する • go/src/misc/wasm内の以下のソースが必要 ◦ wasm_exec.js • WebAssembly.instantiate()にwasmファイルとwasm_exec.js
内のGo.importObjectを渡す ◦ wasm対応で追加されたsyscall/jsと連携している ◦ これのお陰でGo側からDOMの操作が出来る
気になるポイント • 性能は? • Goroutineは? デモ
まとめ • GoでWebAssemblyは簡単に出来る • ただし、まだBeta版なので仕様が変わることもあり • wasm_exec.jsと連携することでJavascriptを実行することが 出来る • wasmにすることで何でも性能がよくなる訳ではない
◦ 軽い処理より重い処理に向いている • まだまだ発展途上なので今後に期待
ご清聴ありがとうございました!