skimemo

• 追加された行はこの色です。
• 削除された行はこの色です。
• skimemo - 日記/2019-05-06/NativeScriptでQRコードを出力する へ行く。
• skimemo - 日記/2019-05-06/NativeScriptでQRコードを出力する の差分を削除

#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: &#x5b;[[NativeScript>日記/Category/NativeScript]]&#x5d; - 11:53:09
----
RIGHT:&blog2trackback();
#comment(above)
#blog2navi()