skimemo

_ 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形式の画像データ文字列だけを返してくれます。
   

   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タグを書きます。
   

   1

   "qrcode" src="{{ qrcode }}"/>

4. 埋め込み
   あとは qrcodeにcreateDataURL()で生成した文字列を埋め込めばOKです。
   

   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などで適当に調整してみてください。
   あとは別のスマホで正常に読み込めれば完了です。