Home » ソフトウェア » Webアプリケーション » WebアプリケーションでFONTX形式のフォントを使うドライバ

WebアプリケーションでFONTX形式のフォントを使うドライバ

プログラミング
2020.09.25

Webアプリケーションで「FONTX」形式のフォントを使用するためのドライバ「FONTX for Web」を作成しました。

目的

このドライバの目的は、昔のパソコンソフト（主にゲーム）をWebアプリケーションとして復刻する際に、当時の雰囲気を再現するとともに、近年ひとつの表現手法として認識されている「ピクセルアート」の制作に資することを目的としています。

FONTXとは

FONTXとは、DOS/V純正のフォントドライバ$FONT.SYSにかわる、ユーザー有志による非純正フォントドライバのことで、1990年代後半には、DOSの終焉とともにFONTX自体はその役割を終えますが、2000年代後半になると、FONTXで使用されていたフォントファイルの形式が、マイコンボードなどの低解像度ディスプレイに日本語を表示するためのフォントの規格として再び利用されるようになっています。

【参考記事】FONTXファイルの使いかた

構成

FONTX for Webは、次のファイルから構成されます。

fontxweb-x.y.z.js（x.y.zはバージョン番号です。）　…　FONTX for Webの本体です。

unicodeToSjis-x.y.z.js（x.y.zはバージョン番号です。）　…　UnicodeからShift_JISへのコード変換テーブルです。FONTX形式はShift_JISのコード体系に基づいており、フォントパターンを得るためには、対象の文字のShift_JISコードを知る必要があります。putText関数、putTextAsImage関数（後述）を使う場合には、このスクリプトの読み込みが必要です。

配置場所は、
https://www.minagi.jp/apps/util/
です。直接参照するか、ダウンロードしたものを別途配置してご利用ください。

使い方

1.初期化

var fxw=new FONTXWEB();

2.フォントファイルの読み込み

fxw.setFontFileFromUrl(url[, callback]);

url　：　FONTX形式のファイルのURLの配列。

callback　：　コールバック関数を指定します。setFontFileFromUrlは非同期処理であるため、処理が終わり次第callbackで指定された関数を呼び出します。フォントファイルの読み込みが正常に完了した場合は引数としてこのオブジェクト自身が、失敗したときはnullが渡されます。

なお、ローカルファイルを読み込むときは、

fxw.setFontFileFromLocal(file[, callback]);

関数を使用します。第１引数の種類以外はsetFontFileFromUrlと同じです。

file　：　フォントファイルを示すFileオブジェクトの配列

FONTX形式のフォントファイルは半角文字用のものと全角文字用のものがありますが、FONTX for Webはフォントファイルの種類を自動で判定し、半角文字用と全角文字用のデータをそれぞれひとつずつ保持します。同じ種類のファイルを複数回読み込んだ場合は、最後に読み込んだものだけが保持されます。

3.Canvasコンテキストの設定

fxw.setCanvasRenderingContext2D(context);

FONTX for WebはCanvasオブジェクト上にフォントを描画します。描画対象となるCanvasRenderingContext2Dオブジェクトを指定します。

putCharやputTextを実行する前にこの関数を呼び出しておく必要があります。

context　：　2Dレンダリングコンテキスト

4.文字の描画

4-1.1文字描画

fxw.putChar(sx, sy, sjiscode[, textColor[, backColor]]);

setCanvasRenderingContext2Dで指定された2Dレンダリングコンテキストの座標（sx,sy）の位置にsjiscodeで指定された１文字を描画します。sjiscodeはShift_JISのコードです。textColorで文字色を指定できます。色はCSSで使用できる形式で指定します。（’red’、’#ff0000’、’rgb(255,0,0)’など）　省略した場合は黒になります。backColorを指定した場合、文字の点のない部分をその色で塗りつぶします。省略するかnullを指定した場合は、文字の点のない部分には何もしません。

4-2.テキスト描画

fxw.putText(sx, sy, text[, textColor[, backColor]]);

描画する文字をShift_JISコードではなく、通常のテキストで指定します。この関数を使用するためには「unicodeToSjis-x.y.z.js」を読み込んでおく必要があります。

その他の関数

FONTXWEBの関数

Canvasコンテキストの取得

fxw.getCanvasRenderingContext2D();

getCanvasRenderingContext2Dで設定したCanvasRenderingContext2Dのオブジェクトを返します。

Canvasコンテキストの消去

fxw.clearCanvasRenderingContext2D();

setCanvasRenderingContext2Dでの設定を消去します。設定されていたCanvasRenderingContext2Dオブジェクトそのものは変更されません。setCanvasRenderingContext2D(null);を実行するのと同じです。

ANK文字のフォントデータを取得する

fxw.getAnkData();

setFontFileFromUrlまたはsetFontFileFromLocalによって最後に読み込まれたANK文字データのオブジェクト（FONTXWEB.FONTXDATA）を返します。

漢字のフォントデータを取得する

fxw.getKanjiData();

setFontFileFromUrlまたはsetFontFileFromLocalによって最後に読み込まれた漢字データのオブジェクト（FONTXWEB.FONTXDATA）を返します。

描画したテキストを画像として取得

fxw.putTextAsImage(text[, textColor[, backColor]]);

指定したテキストを描画した画像を返します。戻り値はData URIで、aタグのhref属性や、imgタグのsrc属性に与えることができます。この関数を実行するために、setCanvasRenderingContext2Dを実行しておく必要はありません。この関数を実行しても、setCanvasRenderingContext2Dで設定したCanvasRenderingContext2Dオブジェクトは保持されます。

この関数を使用するためには「unicodeToSjis-x.y.z.js」を読み込んでおく必要があります。

指定した文字のフォントデータの取得

fxw.getFontPattern(sjiscode);

sjiscodeで指定される文字に対応するフォントパターンデータの配列をUint8Array形式で返します。

バージョン番号の取得

fxw.getVersion();

FONTXWEBのバージョン番号を返します。
“＜メジャーバージョン＞.＜マイナーバージョン＞.＜アップデート＞”の形式の文字列で返します。

FONTXWEB.FONTXDATAオブジェクトの関数

いずれも引数はありません。

関数名戻り値説明
getNameフォント名FONTX形式フォントファイルに設定されるフォント名を文字列で返します。最大8文字です。
getWidth文字の幅（ピクセル数）文字の幅のピクセル数（0〜255）を返します。
getHeight文字の高さ（ピクセル数）文字の高さのピクセル数（0〜255）を返します。
getCodeFlagコードフラグ格納している文字の種類をコードで返します。
0:ANK文字
1:漢字
getCodeBlockNumberコードブロックの数getCodeFlagの戻り値が「1」の場合のみ存在します。getCodeBlockTablesで返される開始コードと終了コードの対の数です。
getCodeBlockTablesコードブロックの配列getCodeFlagの戻り値が「1」の場合のみ存在します。開始コードと終了コードの対の配列です。
{ start: [開始コード], end: [終了コード] }
の形式です。
getImageフォントデータの配列読み込んだファイルに含まれる全てのフォントパターンデータの配列（Uint8Array形式）です。
getFontSizePerChar1文字あたりのフォントパターンデータのバイト数Math.floor((getWidth() + 7) / 8) * getHeight()
を計算した値です。

コーディング例

[HTML]
<script type="text/javascript" src="https://www.minagi.jp/apps/util/fontxweb-1.0.0.js"></script>
<script type="text/javascript" src="https://www.minagi.jp/apps/util/unicodeToSjis-1.0.0.js"></script>
<body>
 <canvas id="myCanvas" width="208" height="158"></canvas>
</body>
[JavaScript]
window.onload = function () {
 var fxw = new FONTXWEB();
 var canvas = document.getElementById('myCanvas');
 canvas.style.imageRendering = 'pixelated';
 var ctx = canvas.getContext('2d');
 fxw.setCanvasRenderingContext2D(ctx);
	 fxw.setFontFileFromUrl(['https://www.minagi.jp/apps/fxw/sample/8x16rk.fnt',
 'https://www.minagi.jp/apps/fxw/sample/jiskan16.fnt'], main1);
}

function main1(fxw) {
 if(fxw){
  fxw.putText(0,0,'X11の16ドットフォント','black');
  fxw.putText(0,16,'Hello, world!','red');
  fxw.putText(0,32,'こんにちは、世界の皆さん！','blue');

  fxw.setFontFileFromUrl(['https://www.minagi.jp/apps/fxw/sample/7x14rk.fnt',
  'https://www.minagi.jp/apps/fxw/sample/k14.fnt'], main2);
 }
}

function main2(fxw) {
 if(fxw){
  fxw.putText(0,64,'X11の14ドットフォント','black');
  fxw.putText(0,78,'Hello, world!','red');
  fxw.putText(0,92,'こんにちは、世界の皆さん！','blue')

  fxw.setFontFileFromUrl(['https://www.minagi.jp/apps/fxw/sample/KNMHN12X.MNF',
  'https://www.minagi.jp/apps/fxw/sample/KNMZN12X.MNF'], main3);
 }	
}

function main3(fxw) {
 if(fxw){
  fxw.putText(0,122,'要町フォント','black');
  fxw.putText(0,134,'Hello, world!','red');
  fxw.putText(0,146,'こんにちは、世界の皆さん！','blue');
 }
}

実行結果

このサンプルでは、伊藤栄一郎（Eiichiro Ito）氏がX11のフォント（JIS X 9051）をFONTX形式に変換したものと、中村隆生氏（満開製作所／フォントプロジェクトチーム）の「要町フォント」を使用しています。

サンプルで使用しているフォントに関する文書

X11のフォント（16ドット）：16×16.txt

X11のフォント（14ドット）：14×14.txt

要町フォント：KANAME.DOC

実装例

実装例として、フォント情報および収録されている全フォントを表示するプログラムを作成しました。

改訂履歴

日付バージョン内容
2021.2.221.0.1putText関数、putTextAsImage関数において、半角文字を出力する場合は、「unicodeToSjis-x.y.z.js」を読み込んでいなくてもエラーとしないように変更。
2020.9.251.0.0初回リリース

［広告］
タイトルとURLをコピーしました