簡単レシート印刷 receiptline の API を調べてみた

日本発のオープンソース receiptline でレシート印刷に少しずつトライしています。
何と超速でマクドナルドのレシートを再現している方を発見！びっくりこ！

落札したレシートプリンターは無事届きました。
しかしまだ準備ができていないので、前回利用した開発ツールを引き続き使います。
今回は receiptline の API です。

開発ツールは何をしている？

開発ツールの左側の編集エリアに文字を入力すると、右側のレシート用紙にプレビューが表示されます。
Web ブラウザーのデベロッパーツールを使って、開発ツールの内部を解析してみました。

入力データ

ReceiptLine

^^領収書|
2019/07/20 01:23|
#NGC17TH|

缶ビール | ¥211~
シュークリーム | ¥129*

出力データ

見やすいように整形して、  を   に置換しておきました。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="576px" height="168px" viewBox="0 0 576 168" preserveAspectRatio="xMinYMin meet" version="1.1">
    <defs>
        <filter id="receiptlineinvert" x="0" y="0" width="100%" height="100%">
            <feFlood flood-color="#000"></feFlood>
            <feComposite in="SourceGraphic" operator="xor"></feComposite>
        </filter>
    </defs>
    <g font-family="'MS Gothic', 'San Francisco', 'Osaka-Mono', 'Courier New', 'Courier', monospace" fill="#000" font-size="24" dominant-baseline="text-after-edge">
        <g transform="translate(0,48)">
            <text transform="scale(1,2)" x="504,528,552">領収書</text>
        </g>
        <g transform="translate(0,72)">
            <text x="384,396,408,420,432,444,456,468,480,492,504,516,528,540,552,564">2019/07/20&#xa0;01:23</text>
        </g>
        <g transform="translate(0,96)">
            <text x="480,492,504,516,528,540,552,564">#NGC17TH</text>
        </g>
        <g transform="translate(0,120)">
            <text x="0">&#xa0;</text>
        </g>
        <g transform="translate(0,144)">
            <text x="0,24,48,72">缶ビール</text>
            <text x="516,528,540,552,564">¥211&#xa0;</text>
        </g>
        <g transform="translate(0,168)">
            <text x="0,24,48,72,96,120,144">シュークリーム</text>
            <text x="516,528,540,552,564">¥129*</text>
        </g>
    </g>
</svg>

ソースコード

開発ツールの内部で、入力データを出力データに変換しているはずです。
ソースコードを解読して、該当部分を探し出しました。

designer/script/receiptline-designer.js

const printer = {
    cpl: Number(cpl.textContent),
    encoding: /^ja/.test(window.navigator.language) ? 'cp932' : 'cp437'
};
const svg = receiptline.transform(edit.value, printer);

ありました。transform メソッドです。
引数は、編集エリアの文字列と、オプション (レシート用紙の桁数、日本語 or 英語)。
戻り値は SVG の文字列です。これを DOM に変換して表示しています。

アプリ開発では、このメソッドに渡す文字列の組み立て処理がメインになりますね。

サンプルプログラム

receiptline パッケージには、コピーして使えるサンプルプログラムが添付されています。
・・・はじめからこちらをチェックすべきでしたね。

Web ブラウザー用

example/js/ja.html

// for SVG output
const printer = {
    // cpl: characters per line (required)
    cpl: 48,
    // font: Japanese, encoding: utf-8 (required)
    encoding: 'cp932',
    // upsideDown: ignored (optional)
    upsideDown: false,
    // gamma: ignored (optional)
    gamma: 1.0,
    // command: SVG (optional)
    command: 'svg'
};
const svg = receiptline.transform(reader.result, printer);

テキストファイルを読み込んで、変換して、表示しています。
中身は開発ツールのソースコードとほとんど一緒です。

Node.js 用

example/nodejs/start.js

sock.on('connect', () => {
    const command = receiptline.transform(text, printer);
    sock.write(command, /^<svg/.test(command) ? 'utf8' : 'binary');
});

テキストデータを HTTP で受信して、変換して、仮想プリンターへ送信しています。
開発ツールを起動する designer.js のソースコードと全く同じでした。

変換 API を使ったプログラミングは後日トライすることにします。
次回は仮想プリンターを試してみようと思います。