技術 - WebAssemblyの記事一覧
sql.js - SQLiteをWASM化したWebデータベース
HTML5ではIndexedDBというデータベースAPIが実装されています。しかし、若干利用法が独特な分、なかなか使いこなすのが難しいようです。昔ながらのRDBMSであったり、廃止になってしまったWebSQLデータベースの方が使いやすかったかも知れません。今回紹介するsql.jsはSQLiteをEmscriptenを使...
markdown-wasm - WebAssemblyでMarkdownをHTMLに変換
MarkdownをHTMLにするライブラリは多数あります。それらを使ってWebページ上でHTMLを表示している方は多いでしょう。しかし巨大なMarkdownコンテンツになると解析、HTMLへ変換するのに時間がかかるようになります。これはリアルタイムプレビューが求められるエディタでは致命的な問題です。そこで使ってみたいの...
Modfy - FFMPEGをWASM化して動画変換
動画変換を行うソフトウェアは多数あります。簡易的なものであればVLCを使ったり、QuickTimeなどでもできるでしょう。より高度な変換をしたい場合にはFFMPEGが使えますが、コマンドラインだけで目的としている動画を作るのはとても大変です。そこで使ってみたいのがModfyです。Webベースで使える動画変換ソフトウェア...
ffmpeg.wasm - 動画変換のFFMPEGをWebAssemby化
動画の変換を行うコマンドとして有名なのがFFMPEGです。利用されている方も多いでしょう。数多あるコーデックに対応するために、関連ライブラリも数多く存在します。その結果、インストール時の肥大化、複雑化が避けられません。何らかの理由でFFMPEGがインストールできないという方は、ffmpeg.wasmを使ってみるのはいか...
WebGui - WebGL上でImGuiを使ってUIを構築する
OpenGLでUIを作る際にはImGuiのようなライブラリを使います。ゲームや3Dなどを使っている人にとってはよく使い慣れたライブラリかも知れません。ではWebGLな環境ではどうなるでしょうか。WebGuiはWebGL環境でImGuiを使った実証デモになります。WebAssemblyを使っており、高速に動作します。##...
Piccolo - ローカルやWebで遊べるオセロゲーム
ちょっと時間が空いた時、ちょっと休憩したいと思わないでしょうか。頭をしっかり使った分、リラックスさせたくなります。寝たりするのもいいですが、ちょっと頭の使い方を変えるだけでリフレッシュできたりします。今回紹介するPiccoloはGUIまたはWebで遊べるオセロゲームです。## Piccoloの使い方こちらはWeb版です...
WACC - WebAssemblyを使って固有のコーリングカードを生成
離席時に誰かから電話や訪問があった際に使われるのがコーリングカードです。日本でも付箋紙を貼ったり、名刺を置いておいたりするでしょう。オンラインやリモートワークの時代になり、徐々にそうした文化も失われていきそうです。WACCが提案するのはコーリングカードをWebAssemblyで作るというアイディアです。固有の形状を生成...
Pixelated video - Webカメラの映像をドット絵に変換
ドット絵は昔ながらの味わいがあって楽しいものです。グラフィックスが洗練された現代にあっても、ドット絵が好きという人は多いでしょう。写真などをドット絵風にする場合、単にモザイクのようにマス目に区切ればいいという訳ではありません。そんなドット絵変換を体験できるのがPixelated videoです。Webカメラの映像をドッ...
Photon - WebAssemblyで高速画像編集
WebAssembly（WASM）の大きな特徴として、その実行速度が挙げられます。Webブラウザ上で実行されるJavaScriptでは限界があった速度も、WebAssemblyであればネイティブ並の速度で実行できます。そんな実行速度の速さを活かしたソフトウェアがPhotonです。WebAssemblyの力で画像を処理し...
COBOL Pong - COBOL製。Webで動くピンポンゲーム
最近ではあまり聞かなくなってきましたが、ある程度の年齢のエンジニアたちの中には、最初にCOBOLから入ったという人たちがいます。今でも勘定系では数多く使われているすごい言語です（開発したのが軍人、かつ女性
Paint By Wasm - 画像からカラーパレットを生成
デザインを行う際に、色数が多すぎるのはよくありません。数種類の絞り込まれたカラーパレットを作り、そこから選んで使うのが一般的でしょう。そのためカラーパレットを作るのが最も重要な作業になります。写真やイラストなどからカラーパレットを作る場合、便利そうなのがPaint By Wasmになります。## Paint By Wa...
Play FLV in Browser - FLVファイルをWeb上で再生する
Flashといえば、2000年代を代表するWeb技術でした。HTML5とスマートフォン（iPhone）の登場によって一気に主役の場を奪われましたが、それでもかつて作成した資産が多数残っています。例えばFlash製の動画コンテンツもその一つです。今回はFlv形式の動画ファイルをHTML5で再生するPlay FLV in ...
WASM-ImageMagick - ImageMagickをWebAssemblyでWebアプリから使いやすく
様々なローカルアプリケーションがWeb化していますが、JavaScriptの実行速度はネイティブアプリケーションに比べて劣ってしまいます。しかしWebAssemblyを用いることで大幅に改善できます。今回紹介するWASM-ImageMagickは名前の通り、ImageMagickをWebAssembly化したソフトウェ...
ffmpeg.js - Web上で使えるFFMPEG
WebAssemblyを使うことで、これまでのWebでは難しかったスピードでアプリケーションを実行できるようになります。DOMやネットワークが使えないといった制限はありますが、計算処理を高速に行えるのは大きなメリットです。そんなWebAssemblyでは既存のソフトウェアをEmscriptenを通してWebAssmbl...
wasm2lua - WebAssemblyをLuaに変換
WebAssemblyはユニバーサルバイナリとも表現されます。どんな言語であってもWebAssemblyに変換できれば、各プログラミング言語にあるWebAssembly環境（機能拡張など）で実行できます。そんな万能的に使えるWebAssemblyをあえてLuaに変換するのがwasm2luaです。## wasm2luaの...
WASM Flate - WebAssemblyを使ってファイルを圧縮/伸張
WebAssemblyは標準機能としてはDOMやネットワークが使えないので、その適用部分に悩む人も多いでしょう。Webアプリケーションにおいて、UIやネットワークに触れない部分は多くありません。しかし、ローカルアプリケーションとして考えれば、そのようなアプリケーションの方が多いはずです。今回紹介するWASM Flate...
Prism - Rubyが使えるWebフロントエンドフレームワーク
Webブラウザで唯一実行が保障されているプログラミング言語はJavaScriptです。しかし規模の大きなシステムを書きたがらなかったり、サーバサイドは別な言語を使っているケースもあります。そこで今回はRubyでWebアプリケーションが書けるPrismを紹介します。## Prismの使い方デモです。!
Kagura - RustだけでWebアプリケーションを開発するフレームワーク
WebAssemblyを開発する際の最も基本的な言語となるのがRustです。WebAssemblyでは元々DOMやネットワーク操作ができませんが、Rustのwasm-bindingによってWebブラウザ側のAPIを実行できるようになりました。その結果、WebAssembly活用の幅が広がったと言えます。Kaguraはそ...
tinysearch - WebAssemblyを使ったWebブラウザ用全文検索
Webサイトには検索機能をつけるのが基本です。その多くの場合、サーバサイドでデータベースを検索し、その結果を返すようになっています。またはコンテンツデータをあらかじめクライアントサイドに持っておいて、JavaScriptで絞り込んだりします。今回紹介するtinysearchはクライアントサイドで検索を行います。特徴的な...
WebAssembly.sh - WebAssembly製のWebターミナル
Webブラウザでも十分ターミナルが実装できるようになってきました。あえて専用のソフトウェアをインストールする必要もなく、すぐにサーバにアクセスできます。公開鍵認証などは多少面倒ですが、十分使えるレベルです。今回紹介するWebAssembly.shもそんなターミナルの一つですが、WebAssemblyで作られており、PW...