#blog2navi()
*NativeScriptでQRコードを出力する [#ob9b54c6]
NativeScriptでQRコードを出力するには、[[NativeScript ZXing:https://www.npmjs.com/package/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:https://www.npmjs.com/package/qrcode-generator]]というものがありました。~
以下、組み込み方です。
+ jsファイルの配置~
qrcode.jsを適当な場所に配置します。私は &inlinecode{common/qrcode.js};~
+ 生成用メソッドを作成~
QRコードを生成するメソッドを作成し同一ディレクトリに置きました。パラメータは固定にしています。XML内にbase64形式で埋め込むため、サンプルにはありませんでしたが &inlinecode{createDataURL()};という関数を呼び出してします。&inlinecode{createImgTag()};ではHTMLのIMGタグもセットで生成されますが、&inlinecode{createDataURL()};だとbase64形式の画像データ文字列だけを返してくれます。
#code(JavaScript){{{
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;
}}}
+ XMLを用意する~
QRコードを表示したい場所に以下のようにImageタグを書きます。
#code(JavaScript){{{
<Image class="qrcode" src="{{ qrcode }}"/>
}}}
+ 埋め込み~
あとは &inlinecode{qrcode};に&inlinecode{createDataURL()};で生成した文字列を埋め込めばOKです。
#code(JavaScript){{{
const qrcodeGenerator = require("../../common/qrcode/qrcode-generator");
:
let context;
const url = "適当なURL";
context.qrcode = qrcodeGenerator.createQrcode(url);
component.bindingContext = context;
}}}
画像サイズはCSSなどで適当に調整してみてください。~
あとは別のスマホで正常に読み込めれば完了です。
#htmlinsert(twitterbutton.html)
RIGHT:Category: [[[NativeScript>日記/Category/NativeScript]]] - 11:53:09
----
RIGHT:&blog2trackback();
#comment(above)
#blog2navi()