skimemo


skimemo - 日記/2019-05-06/NativeScriptでQRコードを出力する

_ NativeScriptでQRコードを出力する

NativeScriptでQRコードを出力するには、NativeScript ZXingが一般的なようです。
ライセンスはApache2.0で一見問題無いように見えますが、よく読むと以下の記述があります。

However for entities that need a support contract, changes, enhancements and/or a commercial license please contact me at http://nativescript.tools.

ただし、サポート契約、変更、機能強化、および商用ライセンスが必要な事業体については、http://nativescript.toolsで私に連絡してください。

商用で使う場合は連絡しろとあり、HPを見に行くと有料のような気配。私は製品に組み込みたかったので、他の手段を探したところ、QR Code Generatorというものがありました。
以下、組み込み方です。

  1. jsファイルの配置
    qrcode.jsを適当な場所に配置します。私は common/qrcode.js
  2. 生成用メソッドを作成
    QRコードを生成するメソッドを作成し同一ディレクトリに置きました。パラメータは固定にしています。XML内にbase64形式で埋め込むため、サンプルにはありませんでしたが createDataURL()という関数を呼び出してします。createImgTag()ではHTMLのIMGタグもセットで生成されますが、createDataURL()だとbase64形式の画像データ文字列だけを返してくれます。
    Everything is expanded.Everything is shortened.
      1
      2
      3
      4
      5
      6
      7
      8
      9
     10
     11
     12
     13
     14
     15
     16
     17
     18
     19
     20
     21
     22
     23
    
     
     
    -
    |
    !
    -
    |
    |
    |
    |
    |
    |
    |
    |
    |
    |
    |
    -
    |
    |
    !
    !
     
    
    const qrcode = require("./qrcode");
     
    /**
     * QRコードを生成する
     */
    function createQrcode(text) {
        const typeNumber = "0";
        const mb = "UTF-8";
        const errorCorrectionLevel = "M";    // L/M/Q/H
        const mode = "Byte";    // 日本語が入る場合は Kanji
     
        qrcode.stringToBytes = qrcode.stringToBytesFuncs[mb];
     
        var qr = qrcode(typeNumber || 4, errorCorrectionLevel || 'M');
        qr.addData(text, mode);
        qr.make();
      
        // return qr.createTableTag();
        // return qr.createSvgTag();   
        // return qr.createImgTag();
        return qr.createDataURL();
    }
    exports.createQrcode = createQrcode;
  3. XMLを用意する
    QRコードを表示したい場所に以下のようにImageタグを書きます。
    Everything is expanded.Everything is shortened.
      1
    
     
    
                "qrcode" src="{{ qrcode }}"/>
  4. 埋め込み
    あとは qrcodecreateDataURL()で生成した文字列を埋め込めばOKです。
    Everything is expanded.Everything is shortened.
      1
      2
      3
      4
      5
      6
      7
      8
    
     
     
     
     
     
     
     
     
    
    const qrcodeGenerator = require("../../common/qrcode/qrcode-generator");
     
         :
     
        let context;
        const url = "適当なURL";
        context.qrcode = qrcodeGenerator.createQrcode(url);
        component.bindingContext = context;
    画像サイズはCSSなどで適当に調整してみてください。
    あとは別のスマホで正常に読み込めれば完了です。
Category: [NativeScript] - 11:53:09



 
Last-modified: 2019-05-06 (月) 11:53:09 (112d)