Slide 1

Slide 1 text

wasmって何? WebAssemblyはじめての方へ 2022/10/19 nako

Slide 2

Slide 2 text

自己紹介 ● nako@9時間睡眠 ● Elixir/Phoenix初心者コミュニティ 『piyopiyo.ex』オーガナイザー ● 会社員。Webサービスのサーバサイ ドエンジニア ● Elixir10周年のお祝いにSnapCamera エフェクトを作りました:D

Slide 3

Slide 3 text

WebAssemblyとは?

Slide 4

Slide 4 text

WebAssemblyとは? ● WebAssembly(略称:Wasm)は、 ブラウザでプログラムを高速実行するための 「ブラウザ上で動くバイナリコードの新しいフォーマット(仕様)」です。 ● WebAssemblyの開発はMozilla、マイクロソフト、Google、Appleといった主要ブラ ウザの開発者により行われています。

Slide 5

Slide 5 text

WebAssemblyを利用したサービスが出来るまで C/C++/Rustなどで記述されたソースコードをコンパイルし、 wasmコードを生成する。 生成したwasmコードをWebアプリとして アップロードする。 JavaScriptコードから呼び出したり、 wasmコードからJavaScriptコードを呼び出す ことができる。 C/C++/Rust などの ソースコード コンパイラ wasm コード Webアプリケーション wasm コード Java Script HTML CSS

Slide 6

Slide 6 text

Google Earthを開発ツールで 見てみると、wasmファイルが あることがわかります。

Slide 7

Slide 7 text

WebAssemblyの歴史 2015年6月17日 開発開始を公式にアナウンス 2016年3月15日 主要ブラウザ (Firefox, Chromium, Google Chrome, Microsoft Edge) 上で UnityによるAngry Botsというデモが行われた 最初の目標としてCとC++からのコンパイルをサポートすることを目指し、 Rust がバージョン1.14以降で、Goがバージョン1.11以降で、Kotlin/Nativeがバー ジョン0.4以降で対応するなど、他のプログラミング言語のサポートも進められ た 2017年3月7日 WebAssemblyに標準対応した初のブラウザとなる Firefox 52.0がリリースされ た 2017年11月 MozillaはSafariとEdgeがWebAssemblyに対応したと発表し、すでに対応して いるChromeとFirefoxを含め、主要なブラウザすべてでサポートされることに なった 2019年12月5日 W3C勧告「WebAssembly Core Specification」が策定され、WebAssemblyは 正式なウェブ標準に認定された

Slide 8

Slide 8 text

WebAssemblyが使えるプログラミング言語 https://github.com/appcypher/awesome-wasm-langs より 🥚進行中、🐣不安定だが使える、🐥本番環境で使える 🐥 .Net、🐥 AssemblyScript、🥚 Ballerina、🐥 Brainfuck、🐥 C、🐥 C#、🐥 C++、🐣 C4wa、🐥 Clean、🥚 Co、🐥 COBOL、🥚 Crystal、🐣 D、🐣 Eel、🐣 Elixir、 🐥 F#、🥚 Faust、🥚 Forest、🐥 Forth、🐥 Go、🥚 Grain、🥚 Haskell、🐣 Java、 🐣 JavaScript、🥚 Julia、🐣 Kotlin/Native、🥚 Kou、🐣 Lisp、🐥 Lobster、🐥 Lua、 🐣 Lys、🐥 Never、🥚 Nim、🥚 Ocaml、🐣 Pascal、🐣 Perl、🐣 PHP、🥚 Plorth、🐣 Poetry、🐣 Python、🐣 Prolog、🐣 Ruby、🐥 Rust、🐣 Scheme、🐣 Scopes、🐣 Swift、🐥 TypeScript、🥚 Wase、🐥 WebAssembly、🥚 xcc、🐥 Zig

Slide 9

Slide 9 text

WebAssemblyでよく使われる言語 よく使われる言語は ● Rust ● C++ ● AssemblyScript が多いようです。 ※調査は2021年6月、196カ国 (米国21.8%、ドイツ9.1%、  中国9.1%など)に分散した 250人のITエンジニアが回答

Slide 10

Slide 10 text

WebAssemblyとElixir ● Wasmex ○ https://github.com/tessi/wasmex ○ Wasmexは、Elixirのための高速で安全なWebAssemblyとWASIランタイム ○ 2020年に開発開始 ○ 定期的にバージョンアップがあり、開発が進んでいる ● Firefly ○ https://github.com/GetFirefly/firefly ○ BEAM言語用の新しいコンパイラとランタイム ○ 2018年に開発開始

Slide 11

Slide 11 text

WebAssemblyが 使われているプロダクト

Slide 12

Slide 12 text

WebAssemblyが使われているプロダクト 『Made with WebAssembly』というサイトで確認できます。 https://madewithwebassembly.com/ Google Earth、 Unity、Figmaといった WebAssemblyを使った サービスが確認できます。

Slide 13

Slide 13 text

国内事例:VKET CLOUD ● 自社の所有する仮想空間でサービス展開を可能にするVRエンジン ● Webリンクからの簡単なアクセス、3Dアバターを使った音声とチャットによるコミュ ニケーション、美しい仮想空間での様々なサービス展開が可能です

Slide 14

Slide 14 text

国内事例:メルカリレンズβ ● メルカリレンズβでは、カメラの入力をサーバーに送信せず、デバイス内で高速に機 械学習に関連する処理を実行 ● 物体検出の数値計算のバックエンドにWebAssemblyを用いている。 ● https://engineering.mercari.com/blog/entry/20211222-mercari-lens/ より ● 2021/12/16公開

Slide 15

Slide 15 text

ご清聴ありがとう ございました!