Go + WASMで始めるWeb Frontend開発 / Web frontend development using Go and WebAssembly
Go + WASMで始めるWeb Frontend開発 / Web frontend development using Go and WebAssembly
Go + WASMで始めるWeb Frontend開発 / Web frontend development using Go and WebAssembly
WebAssemblyはWebブラウザ上のみならず、ユニバーサルバイナリとして様々な環境で実行できるようになっています。WebAssemblyはバイナリだけでなく、テキスト形式にもでき、S式として可読性も多少あるフォーマットです。 そこで作られたのがwasm2ktです。WebAssemblyを読み込み、kotlinおよびJavaに変換するソフトウェアです。 wasm2ktの使い方 最初にC言語からWebAssemblyにします。 echo -e "#include <stdio .h>\nint main() { printf(\"hello world\\\n\"); for (int n = 0; n < 10; n++) printf(\"%d,\", n); printf(\"\\\n\"); return 0; }" > hello.c docker run --rm -v $(
From Spring Boot 2 to Spring Boot 3 with Java 21 and Jakarta EE
This book is about wasm-bindgen, a Rust library and CLI tool that facilitate high-level interactions between wasm modules and JavaScript. The wasm-bindgen tool and crate are only one part of the Rust and WebAssembly ecosystem. If you're not familiar already with wasm-bindgen it's recommended to start by reading the Game of Life tutorial. If you're curious about wasm-pack, you can find that documen
GitHub - lastmjs/wasm-metal: A bare metal physical implementation of WebAssembly. That's right, a WebAssembly CPU.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Webassembly initial steps tutorial or how to start with wasm
Introduction UPDATE: we create a new tutorial using emscripten, which is a more standard way of working with webassembly. Webassembly is a new new standard being emerging that could be very used in the future, this technology is being developed in a W3C Community Group with Apple, Google, Microsoft and Mozilla. The initial focus of the project is C/C++, so this is not a high level lenguage. Webass
Shared components used by Firefox and other Mozilla software, including handling of Web content; Gecko, HTML, CSS, layout, DOM, scripts, images, networking, etc. Issues with web page layout probably go here, while Firefox user interface issues belong in the Firefox product. (More info)
GitHub - extism/extism: The framework for building with WebAssembly (wasm). Easily load wasm modules, move data, call functions, and build extensible apps.
Extism is a lightweight framework for building with WebAssembly (Wasm). It supports running Wasm code on servers, the edge, CLIs, IoT, browsers and everything in between. Extism is designed to be "universal" in that it supports a common interface, no matter where it runs. Note: One of the primary use cases for Extism is building extensible software & plugins. You want to be able to execute arbitra
はじめに "Rust and WebAssembly"の公式チュートリアルに一通り目を通したのでこれを拡張して遊んでみます。最近巷では感染症の数理モデルで遊ぶのが流行っているようなので、これをセルオートマトンにしたシミュレーションアプリを作ります。ただ、チュートリアル通りにゲームのロジック側をRustで記述しつつcanvasの描画やイベントハンドラをJavaScriptで書くのも味気ないので、ここではWeb側の描画・操作も全てRustで書きます。 GitHubコード 動作デモページ 1 感染症の数理モデル 感染症の流行過程を記述する数理モデルとして最も基本的なものにSIRモデルと呼ばれるものがあります。SIRモデルはまず人口を S (Susceptible): 感受性保持者（これから感染する人） I (Infected): 感染者 R (Recovered): 免疫獲得者（感染症から回復し
はじめに Rustで生成したWebAssemblyとJavaScriptをつなぎ合わせるインタフェースを生成してくれるwasm-bindgenというツールがあります。 wasm-bindgenを使うことで、若干面倒なWebAssembly周りのメモリ操作やデータの受け渡しを楽に行うことができます。 Rustの構造体やメソッドをJavaScriptのクラスとしてラップすることも可能です。 wasm-bindgenのデモとしてマンデルブロ集合を描いてみましょう。 誰もが描いたことがある（？）以下のような図ですね。 本稿の完成版+ズーム機能を付け加えたデモを以下で公開しています。 https://ionic-wasm-mandelbrot.likr-lab.com/ また、関連のソースコードはGitHubで公開しています。 https://github.com/likr/ionic-wasm-m
WasmをさわってJSとの速度比較をしてみた
モチベーション WebAssembly(Wasm)とは何かを知る 具体的な実装イメージはどんな感じか（WasmコンパイルをRustで行う場合） JSとの速度比較をする WebAssembly(Wasm)とは Webブラウザ上で、JSよりももっと高速に実行できる技術 厳密には、Webじゃなくても動くし、アセンブリでもない Wasmという言語があるわけではなく、C, C++, Rust, Goなどの言語からWasmファイルを生成し、各環境で利用する（ブラウザじゃなくても動作する） JSの上位互換として思われがちだが、Wasm自体は計算しか出来ないので、JSと協調させて動作させるWeb周辺技術という扱いが正しいです。 2022年現在では、メジャーなモダンブラウザはWasmをサポートしており、Google Meetのぼかし機能だったり、顔や手のトラッキング系のJSライブラリなど身近なところでWas
WASM File Hash Online Calculator - MD5, SHA1, SHA2 (SHA256), SHA512
Compatibility Mode. The browser does not support WebAssembly error can arise in outdated browser versions or because that feature isn't enabled. Calculates MD5, SHA1, SHA2 (SHA256), SHA512 hashes at once The browser does all calculations without uploading to the server Supports unlimited files of any size
GitHub - syumai/go-wasm-todo-list: ToDo List App implemented in Go + WebAssembly.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.
wasi-sdk,wit-bindgenとjcoでWebPに対応した画像diff wasm componentを作成する
Visual Regression Test をサポートする reg-actions をリリースしたという記事のTODOとして挙げたのだが、reg-viz/reg-cliのwasm化とwebp対応を進めたいと思っていた。 今回はその第一歩として画像diffライブラリのwebp/wasm化対応と、その際に躓いた内容などを記載する。 TL;DR webpをサポートした画像diffライブラリをRustで書き、wit-bindgenとjcoでnode.js,denoから使用できるようにした webpのサポートにはlibwebpを使用した 当初はwasm32-unknown-emscriptenで進めていたがComponent化で問題が発生した wasi-sdkを利用し、wasm32-wasiにtargetを変えることでimportをwasi_snapshot_preview1に揃えることで上記を回
Modfy - FFMPEGをWASM化して動画変換
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 動画変換を行うソフトウェアは多数あります。簡易的なものであればVLCを使ったり、QuickTimeなどでもできるでしょう。より高度な変換をしたい場合にはFFMPEGが使えますが、コマンドラインだけで目的としている動画を作るのはとても大変です。 そこで使ってみたいのがModfyです。Webベースで使える動画変換ソフトウェアです。 Modfyの使い方 メイン画面です。左側に動画をドラッグ&ドロップします。 登録しました。次に変換条件を指定していきます。 動画はフォーマットの変換、トリム、アスペクト比の変更、連結などが用意されています。 変換中です。 変換した動画はModfy上で再生できます。 ModfyはFFMPEGをWebAssemblyで変換し、Webブラウザ上で使えるようにしてい
GitHub - duckdb/duckdb-wasm: WebAssembly version of DuckDB
DuckDB is an in-process SQL OLAP Database Management System. DuckDB-Wasm brings DuckDB to every browser thanks to WebAssembly. Duckdb-Wasm speaks Arrow fluently, reads Parquet, CSV and JSON files backed by Filesystem APIs or HTTP requests and has been tested with Chrome, Firefox, Safari and Node.js. Learn more about DuckDB-Wasm from our VLDB publication or the recorded talk. Try it out at shell.du
はじめに こんにちは、主にWebフロントエンドエンジニアをしているきーくん(komura-c)です。今回は業務とは関係なく、ffmpeg.wasmに興味を持ったため、ブラウザ上で動かしてみました。主にフロントエンド側の処理について追って、書いてみたのでぜひ読んでみてください！ はじめに ffmpegとは ffmpeg.wasmとは ffmpeg.wasmをブラウザ上で動かす おわりに ffmpegとは ffmpegはオーディオ、ビデオなどを変換、処理するためのライブラリ、ツール群です。 https://github.com/FFmpeg/FFmpeg ffmpegのコードは主にLGPLライセンスで公開されていますが、依存ライブラリにより多様なライセンスが適用されています。 https://github.com/FFmpeg/FFmpeg/blob/master/LICENSE.md 歴史の
web-sys: Closures View full source code or view the compiled example online One of the features of #[wasm_bindgen] is that you can pass closures defined in Rust off to JS. This can be a bit tricky at times, though, so the example here shows how to interact with some standard web APIs with closures. src/lib.rs #![allow(unused)] fn main() { use js_sys::{Array, Date}; use wasm_bindgen::prelude::*; us
WASM Stack Machine
WASM Stack Machine titzer@google.com Last Updated: 2016-08-17 Motivation and Background WASM is a new, portable, size- and load-time-efficient executable format suitable for compilation to the web. A serialized AST representation of functions allows simple and efficient verification and compil...
こんにちは、CX事業本部のうらわです。 以前書いた以下の記事ではwasi-sdkをダウンロードしてClangでC++のコードをWASMにコンパイルし、wasmtimeを使用してブラウザ外でWASMを実行してみました。 今回は、引き続きwasi-sdkを利用し、今度はWASMをブラウザで実行してみます。 環境 Macで実施します。webサーバを実行するためにpythonも使用します。 $ sw_vers ProductName: Mac OS X ProductVersion: 10.15.7 BuildVersion: 19H15 $ python --version Python 3.8.5 本記事のコードは以下のGitHubリポジトリに格納してあります。 実装 まずはsrc/calc/calc.cppを作成します。 引数のdouble型の値を10,000,000倍して四捨五入するという
はじめに 本記事では、Go言語とRustで同じ機能を持つWASMを書き、３つの観点で比較した つくったもの 複数のファイルをZipアーカイブに変換しダウンロードする機能を持つWASMを、Go言語とRustで作成した 環境等 Mac Mini (M1) Darwin root.local 23.1.0 Darwin Kernel Version 23.1.0: Mon Oct 9 21:28:12 PDT 2023; root:xnu-10002.41.9~6/RELEASE_ARM64_T8103 arm64
wasm-bindgen / DOM Hello World!を改造してSVGを出力してみます。全体のコードは以下にあります 準備 npmとwasm-packをインストールしておきます。 npmのインストール方法は環境に合わせて適当に構築してください（詳しくないので丸投げ） web-sys web-sysはwasm-bindgenでのsubcrateで、 DOM Web Audio 2D canvas Web GL fetch の機能からなる低水準のAPIです。今回使うのはDOMの部分で、これによりDOMを操作してSVGを挿入する事が出来ます。ますweb-sys crateをCargo.tomlに追加してみましょう： [package] name = "dom" version = "0.1.0" authors = ["The wasm-bindgen Developers"] edit
Introduction DuckDB, the in-process DBMS specialized in OLAP workloads, had a very rapid growth during the last year, both in functionality, but also popularity amongst its users, but also with developers that contribute many projects to the Open Source DuckDB ecosystem. DuckDB cannot "only" be run on a variety of Operating Systems and Architectures, there's also a DuckDB-WASM version, that allows
Rustのクロスプラットフォーム対応ゲームライブラリであるMacroquadが面白そうなので、使い方をまとめたいと思います。 公式サイトはこちら。 https://macroquad.rs 前提Rustが導入済みであること → 導入方法環境OS:Windows 10rustc 1.50.0 (cb75ad5db 2021-02-10)cargo 1.50.0 (f04e7fab7 2021-02-04)rustup 1.24.2 (755e2b07e 2021-05-12)toolchain:stable-x86_64-pc-windows-gnuMacroquadとはそもそも何？Rust製のゲーム用ライブラリであり、クロスプラットフォーム(Web、Windows、Mac、Linux、Android、iOS)に対応しておりシンプルなコードですぐに実行出来るのが特徴です。 。まずは以下のUR
この記事は以下のツイートから始まる疑問に対する回答みたいな記事です。 満たしたい要件としては、ASP.NET Core Blazor WebAssembly をフロントにしつつ、サーバーサイドは ASP.NET Core で Web API も作れて、同じサイトにフロントエンドとバックエンドの両方を配置できるようなプロジェクトを作ることです。 箇条書きにすると以下のような感じですね。 フロントエンドは ASP.NET Core Blazor WebAssembly バックエンドは ASP.NET Core Web API (もしくは Minimal APIs) 発行すると1つに纏まってフロントエンドとバックエンドと同じサイトに配置できる 先に解説 ASP.NET Core は DI コンテナ内にどんなサービスを登録するかということと、どんなミドルウェア（リクエストを処理するパイプライン）を
This project is a proof-of-concept aiming at building C# applications into WebAssembly, by using Mono and compiling/linking everything statically into one .wasm file that can be easily delivered to browsers. The process does not use Emscripten (or Binaryen) but instead uses the experimental WebAssembly backend of LLVM with clang and lld to generate the final .wasm code. The goal is to use as few d
SQLite 3.40 Released With WASM Support For Web Browsers, Recovery Extension - Phoronix
Show Your Support: This site is primarily supported by advertisements. Ads are what have allowed this site to be maintained on a daily basis for the past 19+ years. We do our best to ensure only clean, relevant ads are shown, when any nasty ads are detected, we work to remove them ASAP. If you would like to view the site without ads while still supporting our work, please consider our ad-free Phor
つくったもの FlappyBirdのFerrisバージョン。名付けてFlappyFerris。 quicksilverとは quicksilverとはRustで書かれた2Dゲームエンジンで、Web(wasm)、Desktop(Windows, macOS, Linux)に対応したクロスプラットフォームのゲームを作ることができる。Gitの履歴によると、2018年10月に開発が始まって2019/12/9時点でver0.3.2なので、まだ比較的新しいゲームエンジンといえる。 公式ドキュメントによると、以下の機能が売りのようだ。 2Dジオメトリ（ベクタ、長方形、円等、図形処理） キーボードと3つのマウスボタンサポート OpenGLベースの描画 多くの画像フォーマット サウンド 非同期アセット読み込み デスクトップとWebの統一的なコードベース ncollide2dベースのコリジョン rusttyp
先日Cloudflare Workersでウェブページの本文を抽出したくなったことがありました。本文抽出といえば、@mozilla/readabilityが使えそうです。しかし依存に含まれるnwsapiにはFunctionコンストラクタが多用されており*1、Cloudflare Workersでは動作しません。これを修正するのも大変そうです。 そこで、TinyGoを使用してgo-readabilityをwasmにコンパイルしてみることにしました。 TinyGo のドキュメントUsing WASM | TinyGo のままではCloudflare Workersでは動かなかったので、TinyGoに含まれるwasm_exec.jsを少し修正したり*2、 import側もwasmファイルをfetchしているのを変更したり*3すると無事動きました。 動作するコードは https://github.
はじめに サーバでなくブラウザ側で画像処理が動く WebAssembly 版 ImageMagick 〜 magick-wasm の使い方と 2023年初頭での状況報告です。 https://github.com/dlemstra/magick-wasm magick-wasm 本体にまだブラックボックス要素があるので、本体自体の解説はせず、今回は、実際に magick-wasm を使う事ができた。でも機能的に物足りなく感じた。それだけの解説エントリです。 4月20日に開発者のアナウンスにて、次リリース(恐らく 0.0.20)から wasm を js ファイルに含めないとの宣言がありました。 https://twitter.com/MagickNET/status/1648982963491618817 この記事で説明した手順では動かせなくなるかもしれません。少なくとも index.mjs
GitHub - makepad/makepad: Makepad is a creative software development platform for Rust that compiles to wasm/webGL, osx/metal, windows/dx11 linux/opengl
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
便利そうなツールを作ったという紹介です。 Ruby 30th LT に出したのですが落ちたので供養として書きました。 解決しようと思った課題 Ruby には RuboCop という linter 兼 formatter があります。 RuboCop に元々入っているルール（Cop と呼ばれます）だけでも十分に便利なのですが、自身の Ruby プロジェクトに合わせて独自のルール（Custom Cop）を作ることができます。 Custom Cop の作り方： Rubocop でカスタムルールを作る - MoneyForward Developers Blog https://sinsoku.hatenablog.com/entry/2018/04/24/02291 RuboCop の Cop の実装について - Qiita 記事に書かれているように、 ちょっとした実装で Custom Cop
Wasmerが「py2wasm」を発表、PythonからWebAssemblyに変換 インタープリタより3倍高速実行可能に
Wasmerが「py2wasm」を発表、PythonからWebAssemblyに変換 インタープリタより3倍高速実行可能に：Nuitkaを利用し高速化、難読化 WebAssembly（Wasm）ランタイムを開発するWasmerは、PythonプログラムをWebAssemblyに変換し、ベースラインインタープリタよりも3倍高速に実行できるようにする「py2wasm」を発表した。
wasm GC Proposalのために作られた実験的な関数型言語処理系Wamlが面白そう - Arantium Maestum
自分で実装している型システムに再帰型をつけたくてiso-recursive typesで検索していたらwasm garbage collectorのGitHubレポジトリで行われている侃侃諤諤な議論を見つけて読み漁っていた。 その中で見つけたのがwasmの中心的な人物であるAndreas RossbergがwasmのGC proposalを試すために書いた実験的なコンパイラWaml： github.com Rossbergはwasmのreference interpreterを実装したりしている。ML界隈ではF-ing Modulesや1MLなどのモジュール関連の研究やstandardにできるだけ忠実なSMLのレファレンス実装HaMLetなどで有名。 このWamlはwasmのGC proposalがちゃんとした言語処理系のコンパイル先として必要な機能を備えているか評価するために、できるだけ
Web24 - WASM
uta8a @uta8a connpass.com/event/211877/ Security, WASMは必ず見ようと思います。(他も気になる) GWっぽいワクワクイベントで楽しみ～ #web24 2021-05-01 12:55:23 Takuo Kihira @tkihira 登壇します: connpass.com/event/211877/ "Web24 - Web についてひたすら議論する 24h"。5月8日 16:10 より予定されている WebAssembly のセッションに、 @nullpo_head -san, @voluntas -san, @bokuweb17 -san と一緒に登壇します。一歩踏み込んだリアルな wasm の議論予定です！よろしくお願いします！ 2021-05-01 23:20:54
GitHub - kxkx5150/Super-Famicom-wasm: スーパーファミコン wasm Emulator
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Gada / ymtszw on Twitter: "SQLiteをwasmビルドしてブラウザで動くようにする →SQLiteはデータ実態が単一のDBファイル →このファイル読み出しをHTTP range requestに裏側ですげ替える実装を差し込む →DBファイルをGitHub… https://t.co/Nv7GGerExX"
SQLiteをwasmビルドしてブラウザで動くようにする →SQLiteはデータ実態が単一のDBファイル →このファイル読み出しをHTTP range requestに裏側ですげ替える実装を差し込む →DBファイルをGitHub… https://t.co/Nv7GGerExX
高い生産性を持ち多くの開発者から人気のテキストエディタ「Vim」。 これまでにすでに多数のプラットフォームに移植されていますが、本日紹介する「vim.wasm」は、そのなかでもかなりユニークなWebブラウザで動作するバージョンのVimです。 VimのCのソースコードをWebブラウザのクライアントサイドで動作する低水準のプログラミング言語WebAssembly(wasm)に変換し、ブラウザ上でVimの機能を実現するという仕組みです。 現在まだ開発作業は継続中で、Vimの全ての機能を使用することはできませんが、Vimの基本的なカーソル移動などは利用可能で、今後の発展に期待ができるものとなっています。 vim.wasmの使用方法 vim.wasmを使用するには公式サイトにブラウザでアクセスするのが簡単です。macOS版のChromeでアクセスすると以下のような画面が表示されます。 ▲サイトトップ
Google Geminiでゲーム移植？ブラウザゲームの"Rust+WASM版"をAIに作らせる | Agar.io 2024 - Qiita
Google Geminiでゲーム移植？ブラウザゲームの"Rust+WASM版"をAIに作らせる | Agar.io 2024JavaScriptgameRustAIWebAssembly 皆さんは Google AI Studio を使っていますか？ このサービスは、テキストや画像だけでなく、動画やコードなどの様々なデータを理解し、Gemini に質問したり指示したりできる強力なツールです。 ただ、注目すべきは かなり長いプログラムのコードを食わせてそれを解析できる ということです。 以下は slither.io というブラウザゲームのjsファイルを丸ごと食わせて解説してもらった例 コードを全部読まなくても、Gemini に解析してもらってどういう処理があるとか、サーバーとどんな通信を行っているのかを聞くとかなり精度良く回答が帰ってきます。 つまり、コードの中身をほとんど読まなくてもだい
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
wasm2kt - WebAssemblyファイルをKotlin/Javaに変換 MOONGIFT
RustでWasm Runtimeを書いた in UV_Study
Introduction - The `wasm-bindgen` Guide
1232205 - wasm: Baseline JIT
Rust+WASMで感染症の数理シミュレーション - Qiita
Wasm3 on X: "I regret to inform the community that since my own house was destroyed by russians who invaded my country, Wasm3 has entered a minimal maintenance phase. https://t.co/i8BNxMtIJ5"
wasm-bindgenでマンデルブロ集合 - Qiita
ffmpeg.wasmをブラウザ上で動かしてみた - voicy tech blog
web-sys: Closures - The `wasm-bindgen` Guide
wasi-sdkでWASMを試す（ブラウザで実行する） | DevelopersIO
WASM書いてみた（Go vs Rust） - Qiita
wasmからDOMを操作してSVGを描画する - Qiita
Using DuckDB-WASM for in-browser Data Engineering
【Rust+WebAssembly(wasm)】ゲームライブラリMacroquad使おうその1 | eda3-dev
.NET 8 の Blazor で WASM + API のプロジェクトを作る
GitHub - migueldeicaza/mono-wasm
Rustとquicksilverでwasmゲームを作ってみる - Qiita
go-readabilityをwasmにしてCloudflare Workersで本文抽出する - *iroi*
WebAssembly 版 ImageMagick 〜 magick-wasm の紹介 - Qiita
rubocop-ast.wasm を作った - カレーの恩返し
vim.wasm - Webブラウザで動作するWebAssembly移植版Vim | ソフトアンテナ