Typescript でQRコードの画像ファイルを生成する

Typescript でQRコードの画像ファイルを生成する

QRコードの画像ファイルを生成する方法を紹介します。

1. NPMパッケージ

Node Moduleの node-qrcodeを使用します。

https://www.npmjs.com/package/qrcode

インストールは

npm install --save qrcode

で完了です。

2. QRCodeGeneratorクラス

node-qrcode自体は、誤り訂正レベルなど様々なオプションを設定できますが、今回は簡単に QRコードをPNGファイルに出力することに特化したクラスを作成してみました。

    // QRCodeFileGen.ts
    import * as QRCode from "qrcode";
    interface _IQRCodeOption {
        filename:string,
        type:string,
    }
    export class QRCodeFileGenClass {
        option: _IQRCodeOption;
        toFile(filepath:string, filetype:string, value:any){
            this.option = {
                filename: filepath,
                type: filetype
            }
            QRCode.toFile(this.option.filename, value, this.option);
        }
    }

toFile関数には以下の引数を持ちます。

  • filepath: 出力先のファイルパス。拡張子つき。
  • filetype: 出力ファイルの拡張子。今回は.pngを指定します。
  • value: QRコードに記録する値です。文字列でも数字でもOKです。

3. QRCodeGeneratorクラスの使用方法

    // index.ts
    import {QRCodeFileGenClass} from "./QRCodeFileGen"
    const _QRCodeFileGen = new QRCodeFileGenClass();
    let filepath:string = __dirname + "/test.png"
    let filetype:string = ".png"
    let value:string = "testvalue"
    _QRCodeFileGen.toFile(filepath, filetype, value);

import してインスタンスを生成して、toFile関数を呼び出しているだけです。 出力先は__dirnameで、Javascriptが実行されるルートフォルダとしています。

QRCodeFileGen.ts のダウンロードはこちらから。

[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]

実践TypeScript【電子書籍】[ 吉井健文 ]
価格:3726円 (2019/7/23時点)

[

楽天で購入

](https://hb.afl.rakuten.co.jp/hgc/18648e8b.7d833591.18648e8c.ed1bab3c/?pc=https%3A%2F%2Fitem.rakuten.co.jp%2Frakutenkobo-ebooks%2F5456816fd8833397a6aa8b80647873ad%2F%3Fscid%3Daf_pc_bbtn&m=http%3A%2F%2Fm.rakuten.co.jp%2Frakutenkobo-ebooks%2Fi%2F18341447%2F%3Fscid%3Daf_pc_bbtn&link_type=picttext&ut=eyJwYWdlIjoiaXRlbSIsInR5cGUiOiJwaWN0dGV4dCIsInNpemUiOiIyNDB4MjQwIiwibmFtIjoxLCJuYW1wIjoicmlnaHQiLCJjb20iOjEsImNvbXAiOiJkb3duIiwicHJpY2UiOjEsImJvciI6MSwiY29sIjoxLCJiYnRuIjoxfQ==)

速攻でメモできる QuickNote リリースしました!

QuickNoteは動作が超軽量でサクサクかけるノートアプリです。一瞬の閃きを逃さずにノートを開き書き始めることができます。 アカウント登録も不要です。お試しあれ!

Excel操作をコマンドで! proBoarderExcel

Excelはマウスで操作するのが基本ですが、マウス操作に疲れてはいませんか? キーボードでExcel操作ができるようになるアプリです。オープンソースで無料です。

積み上げ! Daily Stack リリースしました!

Daily Stack は日々の積み上げを管理するToDoアプリです。過去の積み上げの振り返りだけでなく、ツイート機能もあります。 アカウント登録不要ですぐに使い始めることができます。

ExecNote.app リリースしました!

ExecNoteは、コードが実行できるMarkdownアプリケーションです。Markdownドキュメント内に記載したコードをクリックすると実行ができます。わざわざターミナルを 起動させる必要がありません!無料ですのでもしよければダウンロードをお願いします。

About Me

11年目のシステムエンジニアです。アプリで生活や仕事を改善したい🐱仕事効率化、自動化のアプリ開発が得意です、ご相談ください。 🚀エンタメ系アプリの開発も模索中🐬社内SEや個人アプリ開発者、システムエンジニアになりたい人と繋がりたい🐱