WebページにPC-98エミュレータを埋め込む

先日、 VZ Editor for Web というWebページを公開しました。ページ内でPC-98エミュレータが起動してVZ Editorを試せるというものです。

このページのHTMLソースを見てみると、PC-98エミュレータを埋め込んでいる部分は次のたった2行であることがわかります。

  <script src="https://unpkg.com/np2-wasm@0.3.1/dist/elements.js" type="module"></script>
  <PC-9801 cpu-clock="15MHz" memory="2MB" fdd1="fd98_2hd.img" fdd2="VZ_98.XDF" no-mouse></PC-9801>

<PC-9801> という見慣れないタグがあります。これは一体なんでしょうか。

最近のブラウザにはカスタム要素と呼ばれる、JavaScriptから新しいHTMLタグを定義する機能があります。上のコードでは、<script>タグで読み込まれるスクリプトが<PC-9801>タグを定義しています¹。このスクリプトは拙作の np2-wasm ライブラリで、Neko Project II のWebAssembly移植を<PC-9801>タグの内側で動かします。

エミュレータの設定は <PC-9801> タグの属性で指定します。上のコードはCPUクロックが15MHz、メモリが2MBのエミュレータを作成し、２台のフロッピーディスクドライブに fd98_2hd.img²とVZ_98.XDF³をそれぞれセットして起動する、という意味になります。fdd1 と fdd2 に指定するのはディスクイメージのURLですが、同一生成元ポリシーが適用されるため別のサイトにあるディスクイメージを直接読み込むことはできません。

利用可能な属性の一覧などは np2-wasm のドキュメントを参照してください。JavaScript APIもあって、そちらを使うとエミュレータの挙動をより細かく制御できます。

このようにディスクイメージさえ用意すれば、PC-98エミュレータをWebページに簡単に埋め込むことができます。PC-98時代の資産をお持ちの著作権者の皆様は、Web上で動く形で共有してみてはいかがでしょうか。

1. ちなみにどんな名前のタグでも定義できるわけではなく、名前にハイフン (-) が含まれる必要があります。確かに "PC-9801" にはハイフンが入っていますね ↩

2. FreeDOS(98)のディスクイメージにVZ Editor起動用のAUTOEXEC.BATを追加したもの ↩

3. VZ Editorのディスクイメージ ↩