QRコードを簡単作成、Webページにツール掲載も
様々な場所で利用されているDENSOのQRコード。これを便利に使うためのライブラリをWebアプリ化しました。QRコードの色や背景の色、サイズを変更でき、日本語にも対応しています。アプリを自サイトに掲載する際の方法も載せています。
ライセンス情報
「QRコード」は株式会社デンソーウェーブの登録商標です。
このQRコード作成アプリのコアにはjquery-qrcodeを利用しています。
Copyright (c) 2011 Jerome Etienne, http://jetienne.com MIT-LICENSE
また、日本語入力時Shift-JISへの変換にはencoding.jsを使っています。
Copyright (c) 2014-2019 Polygon Planet MIT-LICENSE
jquery-qrcodeはjQueryの機能を使ってつくられています。
MIT-LICENSE
ちなみにjQueryとはJavaScriptで書かれたツールで、JavaScriptのプログラム記述を容易にしたりブラウザによる挙動の違いを吸収してくれるものです。
Webに掲載したい場合
このQRコード作成ツールをWebに掲載したい場合はhtmlのbody内に次のように記述します。
<!-- jQuery読み込み -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- jQuery QR code読み込み -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
<!-- 文字コードライブラリ読み込み -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/encoding-japanese/1.0.30/encoding.min.js"></script>
<!-- HTML部 -->
<h3>QRコード作成ツール</h3>
<div class="defaultdiv">
<p>
下のテキストボックスにQRコード化したい文字を入れて、作成ボタンを押してください。
<p>
<input type="text" id="txtqr" name="txtqr" style="width:90%">
</p>
<p><span>QR色:</span><input type="color" id="txtcolor" name="txtcolor" value="#000000"></p>
<p><span>背景色:</span><input type="color" id="txtbgcolor" name="txtbgcolor" value="#ffffff"></p>
<p><span>サイズ:</span><input type="range" id="txtsize" name="txtsize" min="100" max="600" value="150"><span id="lblsize">150</span>px</p>
<p>
<button id="btnmake" style="width:45%">作成</button>
<button id="btnclear" style="width:45%">クリア</button>
</p>
</div>
<hr>
<div><p>作成した文字列</p><p><span id="qrtxt"></span></p></div>
<hr>
<div id="qrcodearea"></div>
<hr>
<!-- スクリプト部 -->
<script>
jQuery(function($){
$('#txtsize').on('input',function(){
$('#lblsize').html($('#txtsize').val());
});
$('#btnmake').click(function() {
var strqrorg = $('#txtqr').val();
var strqrsjis = Encoding.convert(strqrorg, 'SJIS');
var strcolor = $('#txtcolor').val();
var strbgcolor = $('#txtbgcolor').val();
var strsize = $('#txtsize').val();
$('#qrcodearea').html('');
$('#qrcodearea').qrcode({width: strsize, height: strsize, text: strqrsjis, foreground: strcolor, background: strbgcolor});
$('#qrtxt').text(strqrorg);
})
$('#btnclear').click(function() {
$('#txtqr').val("");
$('#txtbgcolor').val('#ffffff');
$('#txtcolor').val('#000000');
$('#txtsize').val(150);
$('#lblsize').html(150);
})
})
</script>
解説
scriptタグで始まる先頭の3行はそれぞれインターネット上にあるjavascriptライブラリ(CDN)を読み込んでいます。順にjQueryライブラリ、QRコードライブラリ、Shift-JISエンコードライブラリです。
Shift-JISエンコードライブラリは、日本語のQRコード化はエンコードをShift-JISに変換しないといけないために設定しています。もし英数字だけの変換でしたら不要です。
jQueryになじみのない方に少しだけ解説しておきますと、$('#...')でidが...の要素を取得することができます。
QRコードライブラリが読み込まれていれば、jQueryで選択した要素に対してqrcode()というメソッドが有効になります。そのメソッドに対し幅と高さ、変換対象の文字列を渡すとQRコードが生成されます。
これらの作業はページを開いた側のブラウザ上で行われるため、内容がサーバに届くことがなく安全です。
CDNライブラリについて
jQuery、jquery-rqcode、encoding.jsは外部ファイルを読み込んでいます。これを読まれる段階ではCDNサービスが終了していたり、バージョン等が変わっている場合がありますので、必要に応じて読み替えてください。
QRコード作成ツール
下のテキストボックスにQRコード化したい文字を入れて、作成ボタンを押してください。
QR色:
背景色:
サイズ:150px
作成した文字列
作成したQRコードはpng画像となっていますので必要に応じて保存できます。ブラウザがchromeの場合は画像を右クリックして「名前を付けて画像を保存」を選択してください。