借り初めのひみつきち

仮ブログです。

任意コード実行可能なホームページ作った。

今年作った自作アプリの紹介します。

TL; DR

このアプリは Web ブラウザ上で PC をエミュレーションします。
技術的には WebAssembly、 Canvas、 WebWorker、 WebAudio、 WebMIDI などを利用しています。

かんたんな紹介

もともと osz という自作 OS をサイトで紹介するためにブラウザで実行可能な PC エミュレーターを探していました。
JavaScript で動作するものはいくつか見つけたのですが、パフォーマンスなどに満足できるものがなかったので自作することになりました。
「Playground」という名前はブラウザ上で手軽に自作 OS を試してもらおうという願いでつけられた名前です。

現在は FreeDOS や osz がそれなりに動くようになり、ゲームなどもある程度動きます。

f:id:neriring16:20191214214819p:plain
f:id:neriring16:20191214215425p:plain
f:id:neriring16:20191214215224p:plain
f:id:neriring16:20191214214844p:plain

はりぼて OS は起動画面が出るものの、今一歩動作不良状態です。

f:id:neriring16:20191214214954p:plain

技術的なお話

実は数年前に今とは別のアプローチで実装した同名のエミュレータがありました。
エミュレータ本体は 7shi 氏の 8086run*1 をサーバーで実行し、ブラウザ上のターミナルエミュレータと WebSocket で接続して利用していました。
それなりに動いていましたが、サーバーで実行する必要がある等の制約のため、公開前に開発終了になりました。

それから数年、 WebAssembly が登場してこなれて来たようなので新たに自作することにしました。

このエミュレータは CPU コアと周辺デバイスが完全に独立しており、フロントエンドは現在ベタ書きの JavaScript です。
バックエンドは CPU コアが WebAssembly (clang) 、周辺デバイスは TypeScript で一緒に WebWorker で動作しています。
現在は UI が貧弱なためデバッグ支援機能などがあまり多くないですが、一応 CPU コアは外部からレジスタ操作をしたり1命令ずつ実行する機能があり、ユニットテストではこれらの機能を node.js から呼び出しています。

CPU 世代はリセット時にいつでも変更できますが、世代の判別によく使われる命令を除いてほとんどの命令の動作には影響ありません。本来実行できない世代の命令でも実行できます。

画面モードはテキストモードとグラフィックスモードがあり、テキストモードではブラウザのフォントを使って描画するので近代的なデバイスの上では非常に綺麗なレンダリングになります。グラフィックスモードは現在 320 x 200 モードしかサポートしていません。

WebMIDI に対応していて MPU-401 互換デバイスとして振る舞うので iPad で SOUND Canvas から音を鳴らすような使い方もできます。

f:id:neriring16:20191214220746p:plain