技術 - WebAssemblyの記事一覧
Local PDF - クライアントサイドでPDFをマージ
Webアプリケーションは便利ですが、サーバサイドで動く際には常にセキュリティに注意が必要です。一旦サーバに送られたデータは消されているかは分からず、容易にアップロードはできません。しかしローカルでのみ動作するWebアプリケーションなら安心して利用できます。今回紹介するLocal PDFはローカルでのみ動作するWebアプ...
Edgesearch - Cloudflare Workersを使った全文検索エンジン
Cloudflare WorkersはCloudflareの提供するサービスで、CDNのエッジ上で任意のJavaScriptコードを実行できる環境です。サーバレスで実行され、即座に結果が得られます。そんなCloudflare Workersで何ができるのか、それを体験できるのがEdgesearchです。## Edges...
v86 - Webブラウザでx86をシミュレーション
Webブラウザで各種OSを実行するような試みが多数あります。それっぽいUIにしているだけというものもあれば、一つのOSについて忠実に再現しようとしているものもあります。古いOSであれば、現状のWebブラウザでも十分に使い物になる速度で動作していたりします。今回紹介するv86のアプローチはもっと広く、x86をWebブラウ...
AR Sudoku Solver - ARを使って数独の答えを表示
数独は日本はもちろん、世界中で楽しまれているパズルです。数字の数によって難易度が異なり、上級なものになると何日も悩み続けないと解けないかも知れません。しかし、コンピュータであれば瞬時に解けるでしょう。今回紹介するAR Sudoku Solverはまさにそんな数独を解くためのソフトウェアです。面白いのはARを用いることで...
JPEG.rocks - WASMを使ってクライアントサイドでJPEG画像を最適化
オンライン上では画像コンテンツが多用されています。その結果、1ページの容量が大きくなり、ネットワーク負荷が高まっています。表示上では不要なデータを削除することで、画像データは大幅に軽減できます。今回紹介するJPEG.rocksはプライバシーに配慮したJPEG最適化ツールです。## JPEG.rocksの使い方トップペー...
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の...