|||||||||||||||||||||

なんぶ電子

- 更新: 

QRコードを簡単作成、Webページにツール掲載も

ページバナー

様々な場所で利用されているDENSOのQRコード。これを便利に使うためのライブラリをWebアプリ化しました。QRコードの色や背景の色、サイズを変更でき、日本語にも対応しています。アプリを自サイトに掲載する際の方法も載せています。

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の場合は画像を右クリックして「名前を付けて画像を保存」を選択してください。

筆者紹介


自分の写真
がーふぁ、とか、ふぃんてっく、とか世の中すっかりハイテクになってしまいました。プログラムのコーディングに触れることもある筆者ですが、自分の作業は硯と筆で文字をかいているみたいな古臭いものだと思っています。 今やこんな風にブログを書くことすらAIにとって代わられそうなほど技術は進んでいます。 生活やビジネスでPCを活用しようとするとき、そんな第一線の技術と比べてしまうとやる気が失せてしまいがちですが、おいしいお惣菜をネットで注文できる時代でも、手作りの味はすたれていません。 提示されたもの(アプリ)に自分を合わせるのでなく、自分の活動にあったアプリを作る。それがPC活用の基本なんじゃなかと思います。 そんな意見に同調していただける方向けにLinuxのDebianOSをはじめとした基本無料のアプリの使い方を紹介できたらなと考えています。

広告