Save 37% off PRO during our Black Friday Sale! »

TinyGoでWasmを生成する / Compile Wasm by TinyGo

TinyGoでWasmを生成する / Compile Wasm by TinyGo

TinyGoでWebAssemblyをコンパイルした話

C9c3a6acd907b66995c09a3f56a7985d?s=128

Hayao Kimura

May 20, 2019
Tweet

Transcript

  1. ©2019 Wantedly, Inc. TinyGoͰWasmΛੜ੒͢Δ golang.tokyo #24 May 21, 2019 -

    Hayao Kimura
  2. ©2019 Wantedly, Inc. "CPVUNF • ໦ଜ ॣੜ @hachiblogʢ͸ͪ΅ʔʣ • Wantedly

    Inc. ͷ৽ଔʁ ̍೥໨ • goྺ൒೥ఔ౓ • ΧϝϥɺμΠϏϯά • ΩʔϘʔυࣗ࡞͍ͨ͠ͻͱ
  3. ©2019 Wantedly, Inc. 1. TinyGoͱ͸ • TinyGoͷಛ௃ • TinyGoͰͰ͖Δ͜ͱ 2.

    TinyGoͰWasmΛ࡞Δ • ͳͥTinyGoͳͷ͔ • WasmΛ࡞ͬͯΈΔ Agenda
  4. ©2019 Wantedly, Inc. TinyGoͱ͸

  5. ©2019 Wantedly, Inc. 5JOZ(Pͱ͸ • GoͷܰྔίϯύΠϥ • LLVMΛ࢖ͬͯίϯύΠϧ͍ͯ͠Δ • γϯάϧίΞΛ૝ఆ

    TinyGoͷಛ௃ https://github.com/tinygo-org/tinygo
  6. ©2019 Wantedly, Inc. 5JOZ(Pͱ͸ • ༷ʑͳϚΠίϯ্Ͱಈ࡞͢Δ • ֦ுϞδϡʔϧͳͲͷύοέʔδ΋ॱ࣍௥Ճத • WebAssembly͕ίϯύΠϧͰ͖Δ

    • ৄ͘͠͸ˠ TinyGoͰͰ͖Δ͜ͱ
  7. ©2019 Wantedly, Inc. TinyGoͰWasmΛ࡞Δ

  8. ©2019 Wantedly, Inc. 5JOZ(PͰ8BTNΛ࡞Δ • WebAssembly • ϒϥ΢β্ʹ͓͍ͯόΠφϦܗࣜͰ࣮ߦՄೳ • Wasm

    1.0͸ओཁͳϒϥ΢βͰಈ࡞Մೳ Wasmͱ͸ Wikipedia ΑΓҾ༻
  9. ©2019 Wantedly, Inc. 5JOZ(PͰ8BTNΛ࡞Δ • ຊՈGoίϯύΠϥͰ΋1.11ͰWasmʹରԠ͍ͯ͠Δ • αΠζ͕ͱͯ΋େ͖͘ͳΔ • TinyGoͰ͋Ε͹খ͘͞཈͑ΒΕΔ

    ͳͥTinyGoͳͷ͔
  10. ©2019 Wantedly, Inc. 5JOZ(PͰ8BTNΛ࡞Δ • htmlʹ͋ΔjpegΛWasmͰಡΈࠐΜͰhogehoge͍ͨ͠ • ຊՈGoίϯύΠϥͱͷWasmͷϑΝΠϧαΠζͷࠩΛ஌Γ͍ͨ • jpegͷྔ͕૿͑ͨ࣌ɺͲΕ͘Β͍଎͞ʹҧ͍͕ग़Δͷ͔஌Γ͍ͨ

    ΍Γ͍ͨ͜ͱ
  11. ©2019 Wantedly, Inc. 5JOZ(PͰ8BTNΛ࡞Δ ΍ͬͨ͜ͱ 1. jsͰbase64Τϯίʔυ 2. wasmʹ౉ͯ͠σίʔυ •

    ͜͜Ͱॏ͍ॲཧΛhogehoge͢Δ 3. base64ʹ࠶Τϯίʔυͯ͠jsʹฦ͢
  12. ©2019 Wantedly, Inc. 5JOZ(PͰ8BTNΛ࡞Δ ΍ͬͨ͜ͱ 1. jsͰbase64Τϯίʔυ 2. wasmʹ౉ͯ͠σίʔυ •

    ͜͜Ͱॏ͍ॲཧΛhogehoge͢Δ 3. base64ʹ࠶Τϯίʔυͯ͠jsʹฦ͢
  13. ©2019 Wantedly, Inc. 5JOZ(PͰ8BTNΛ࡞Δ ΍ͬͨ͜ͱ 1. jsͰbase64Τϯίʔυ 2. wasmʹ౉ͯ͠σίʔυ •

    ͜͜Ͱॏ͍ॲཧΛhogehoge͢Δ 3. base64ʹ࠶Τϯίʔυͯ͠jsʹฦ͢ function includeFile() { var obj = document.getElementById('getImage') var cvs = document.createElement('canvas'); cvs.width = obj.width; cvs.height = obj.height; var ctx = cvs.getContext('2d'); ctx.drawImage(obj, 0, 0); var data = cvs.toDataURL('image/jpeg'); document.getElementById('hidden').textContent = data.replace(/^data.*base64,/, '');; wasm.exports.convertFile(); }
  14. ©2019 Wantedly, Inc. 5JOZ(PͰ8BTNΛ࡞Δ ΍ͬͨ͜ͱ 1. jsͰbase64Τϯίʔυ 2. wasmʹ౉ͯ͠σίʔυ •

    ͜͜Ͱॏ͍ॲཧΛhogehoge͢Δ 3. base64ʹ࠶Τϯίʔυͯ͠jsʹฦ͢
  15. ©2019 Wantedly, Inc. 5JOZ(PͰ8BTNΛ࡞Δ wasmʹ౉ͨ͠ͱ͖ͷॲཧ import ( "syscall/js" "encoding/base64" "image/jpeg"

    "bytes" ) func convertFile() { global := js.Global() document := global.Get("document") image_string := document.Call("getElementById", "hidden").Get("textContent").String() data, _ := base64.StdEncoding.DecodeString(image_string) jpgI, _ := jpeg.Decode(bytes.NewReader(data)) //ॏ͍ॲཧ var buffer bytes.Buffer jpeg.Encode(&buffer,jpgI,nil) encode_string := base64.StdEncoding.EncodeToString(buffer.Bytes()) image_viewer := document.Call("getElementById", "hidden-reader") global.Call("eval","console.log('test')") image_viewer.Set("textContent",encode_string) }
  16. ©2019 Wantedly, Inc. 5JOZ(PͰ8BTNΛ࡞Δ wasmʹ౉ͨ͠ͱ͖ͷॲཧ import ( "syscall/js" "encoding/base64" "image/jpeg"

    "bytes" ) func convertFile() { global := js.Global() document := global.Get("document") image_string := document.Call("getElementById", "hidden").Get("textContent").String() data, _ := base64.StdEncoding.DecodeString(image_string) jpgI, _ := jpeg.Decode(bytes.NewReader(data)) //ॏ͍ॲཧ var buffer bytes.Buffer jpeg.Encode(&buffer,jpgI,nil) encode_string := base64.StdEncoding.EncodeToString(buffer.Bytes()) image_viewer := document.Call("getElementById", "hidden-reader") global.Call("eval","console.log('test')") image_viewer.Set("textContent",encode_string) }
  17. ©2019 Wantedly, Inc. 5JOZ(PͰ8BTNΛ࡞Δ wasmʹ౉ͨ͠ͱ͖ͷॲཧ import ( "syscall/js" "encoding/base64" "image/jpeg"

    "bytes" ) func convertFile() { global := js.Global() document := global.Get("document") image_string := document.Call("getElementById", "hidden").Get("textContent").String() data, _ := base64.StdEncoding.DecodeString(image_string) jpgI, _ := jpeg.Decode(bytes.NewReader(data)) //ॏ͍ॲཧ var buffer bytes.Buffer jpeg.Encode(&buffer,jpgI,nil) encode_string := base64.StdEncoding.EncodeToString(buffer.Bytes()) image_viewer := document.Call("getElementById", "hidden-reader") global.Call("eval","console.log('test')") image_viewer.Set("textContent",encode_string) }
  18. ©2019 Wantedly, Inc. ίϯύΠϧΤϥʔ 5JOZ(PͰ8BTNΛ࡞Δ ΍ͬͨ͜ͱ > tinygo build -o

    src/wasm.wasm -target=wasm src/export/wasm.go usr/local/go/src/image/ycbcr.go:176:20: todo: full slice expressions (with max): []byte
  19. ©2019 Wantedly, Inc. Θ͔ΒΜ Page Title Page Subtitle

  20. ©2019 Wantedly, Inc. ࠔͬͨ ࠔͬͨͱ͖͸ઌഐʹ૬ஊ Page Title Page Subtitle

  21. ©2019 Wantedly, Inc. TinyGoͰWasmΛ࡞Εͳ͔ͬͨ

  22. ©2019 Wantedly, Inc. TinyGoͰWasmΛ࡞Εͳ͔ͬͨ

  23. ©2019 Wantedly, Inc. TinyGoͰWasmΛ࡞Εͳ͔ͬͨ

  24. ©2019 Wantedly, Inc. TinyGoͰWasmΛ࡞Εͳ͔ͬͨ

  25. ©2019 Wantedly, Inc. ऴྃ Page Title Page Subtitle

  26. ©2019 Wantedly, Inc. 5JOZ(PͰ8BTNΛ࡞Εͳ͔ͬͨ • ରԠ͍ͯ͠ͳ͍ඪ४ύοέʔδ͕݁ߏ͋ͬͨ • ·ͩ·ͩTinyGoͰͰ͖ͳ͍͜ͱ͸ଟ͍ • ͱ͸͍͑ເͷ͋Δ࿩ʢcontributeͰ͖Ε͹͍ͨ͠

    • ίϯύΠϥͷษڧʹͳΔ͔΋ʁ
  27. ©2019 Wantedly, Inc. ·ͱΊ • TinyGoΛ࢖͑͹WasmΛίϯύΠϧͰ͖Δ • ͨͩ͠·࣮ͩ༻తͰ͸ͳͦ͞͏ • ϚΠίϯͷίʔυ͸ͱͯ΋ॻ͖΍͍͢ͷͰTinyGoΛҭ͍͖͍ͯͯͨ

  28. ©2019 Wantedly, Inc. TinyGoͰWasmΛੜ੒͢ΔͰ͖ͳ͔ͬͨ golang.tokyo #24 May 21, 2019 -

    Hayao Kimura