本記事は、拙作「MSX BASIC Viewer」の特徴と、それを実現しているテクノロジーについて述べたものです。
「MSX BASIC Viewer」は、MSXパソコンで保存されたBASICプログラムのファイルを、MSX独自の「半角ひらがな」や「グラフィック文字」も含めて実機と同じように表示できるWebアプリケーションです。本作では、HTML5+CSS3といういわゆる「モダンWeb」のテクノロジーを活用することで、本作の特徴的な機能を実現しています。
実機と同じフォントでの表示 － Webフォント
これはMSXのフォントパターンを模したフォントファイルを用意し、CSS3の「Webフォント」の仕組みによって実現しています。この場合、ブラウザからは表示されている内容がテキストとして扱われるため、フォントの画像を用意して並べて表示する手法に対して、色や大きさを自由に変えられる、テキストとしてコピー＆ペーストができる（後述）というメリットがあります。
もともと、Webフォントを使ってMSXのプログラムをブラウザで表示する、というアイデアはgigamix onlineさん（ブログはこちら）がこちらの記事で提唱していたもので、私がそれに着想を得て、本作の前身である、Windows版の「MSX VIEWer」を作った、という経緯があります。
ただ、この当時（2004年ごろ）は、Webフォントが今のように標準化されておらず、Internet Explorerの独自機能であったため、Webアプリケーションとして実装するのは困難と考え、WindowsアプリケーションとしてMSX VIEWerを開発したのですが、後のWebテクノロジーの進化により、当初のアイデアがブラウザに依存しない一般的なWebアプリケーションとして実現できるようになったのです。
他のアプリにコピー＆ペーストしても文字化けしない － 文字コードの割付を工夫
MSX BASIC Viewerの大きな特徴の一つとして、MSX独自の「半角ひらがな」や「グラフィック文字」を実機に忠実に表示しながら、それを他のアプリにコピー＆ペーストしても文字化けを起こさないことがあげられます。
例えば、半角ひらがなの「あ」や、グラフィック文字の「時」を表示させると、実機と同じように半角文字として表示されますが、これをクリップボードにコピーして、他のテキストエディタなどにペーストすると、文字化けすることなく、全角の「あ」や「時」としてペーストされます。
これは、Windows版の「MSX VIEWer」にもない特徴です。この動作は、先のWebフォントを作成する際に、各文字のコード割当を工夫することにより実現しています。
先ほどの例で言うと、半角の「あ」は、MSXでは文字コード0x91（16進数の91）ですが、これをそのままWebフォントの0x91に割り付けると、本アプリ上では正しく表示されても、他のアプリケーションにペーストすると文字化けを起こしてしまいます。
そこで、本作で使用しているWebフォント上では、半角ひらがなの「あ」の字形を意味的に相当する、全角の「あ」のコードであるU+3042（Unicodeの0x3042）に割り当て、プログラム内では、半角の「あ」をコード変換してU+3042の文字として表示しています。WebフォントではそのU+3042の字形が半角ひらがなの「あ」になっているため、画面上ではMSXの半角ひらがなの「あ」のように表示されるのです。
しかし、その文字はブラウザにとってはあくまでも、全角の「あ」であるため、コピー＆ペーストすると、ペースト先には全角の「あ」としてペーストされ、ペースト先のアプリでも文字の意味は保ったまま、文字化けせずに表示されるのです。
この仕組みにより、従来の類似アプリケーションでは対応が困難だった、グラフィック文字（第１バイトが0x01の2バイト文字）にも、グラフィック文字専用のフォントを別に用意することなく対応しています。
再読み込みを必要としない表示設定の反映 － HTML5(JavaScript)+CSS3
Windows版MSX VIEWerでは、読み込んだBASICプログラムを内部でRTF（Rich Text Format）ファイルに変換して一時ファイルとして出力し、それをリッチテキストコントロール（Windowsアプリケーションの表示部品）に読み込ませることで表示を行っていました。
この方式では、文字のサイズや色の設定もRTFファイルに書式情報として書き込まれているため、設定を変更した場合は自動的に元のBASICプログラムファイルを再読み込みして、RTFファイルの作成とリッチテキストコントロールへの読み込みをやり直していました。
MSX BASIC ViewerはWebアプリケーションであるため、表示内容はCSSで修飾されたHTMLとして出力されており、JavaScriptによってCSSの設定値を変えることで文字サイズや色を変更することができるため、再読み込みなしに設定を反映することができます。
ただし、ASCII（半角）モードとシフトJIS（漢字BASIC相当）モードを切り替えたときや、ASCIIモードで国設定を変えたときは、上述の文字コードの変換ルールが変わるため、HTMLの再生成は行っています。この時でも、元のBASICプログラムの内容はキャッシュしているため、ファイルの再読み込みは発生しないようになっています。
【関連記事】MSX VIEWer開発裏話
