きり丸の技術日記

技術検証したり、資格等をここに残していきます。

ピュアなJavaScript(ECMAScript)でQRコードを生成する(qrcodejs)

仕事で必要になったので、QRコード生成ライブラリのqrcodejsを素振りします。

Star数が10.5Kと調べたQRコード生成ライブラリの中でも多かったです。懸念点は2015年に更新が止まっていることですね。

ゴール

QRコード生成ライブラリのqrcodejsを素振りする。

環境

  • Windows
    • Chrome
  • JavaScript
  • qrcodejs

使い方

公式のREADME.mdに載っているとおりです。

指定したDOMに対してQRコードを上書きします。

注意点は、基本的なことですが次のとおりです。

  1. qrcode.min.jsを同一ディレクトリに配備する
  2. scriptの読み込むタイミングを最後(後ろの行)にする
    1. DOMを先に読み込むことができない為
<div id="qrcode"></div>

<script type="text/javascript" src="qrcode.min.js"></script>
<script type="text/javascript">
var qrcode = new QRCode(document.getElementById("qrcode"), {
   text: "https://github.com/hirotoKirimaru",
   width: 128,
   height: 128,
   colorDark : "#ffffff",
   colorLight : "#000000",
   correctLevel : QRCode.CorrectLevel.H
});
</script>

各パラメータの説明

text

URLのこと。

width & height

横幅と縦幅のこと。初期値はどちらも256。

colorDark & colorLight

colorDarkがQRコードを描画する色、colorLightがQRコードを描画する背景色です。

初期値はcolorDarkが#ffffff、colorLightが#000000です。

correctLevel

誤り訂正レベルです。QRコードが汚れたり、見えない箇所が多くなっても正しく読み込めるようにするための設定値です。誤り訂正レベルが高いほど、不必要な情報量が増えます。

「L:1,M:0,Q:3,H:2」の4種類があります。数字は特に深い意味を持っていないようで、順番が右になるにつれてQRコードが細かい模様になります。具体的に、どの設定値であれば何%の誤り訂正ができるか等々は記載していませんでした。

各メソッドの説明

clear

挙動不明。QRコードが消えると思ったら、特に動きはないようです。

qrcode.clear();

makeCode

描画した後にQRコードのURLを書き換えます。URLが変わるので、QRコードも書き換わります。

qrcode.makeCode("新しいURL");

備考

依存関係がないので、qrcode.min.jsだけ読み込めば動きます。

しかし、GitHubにアップロードされているminifyされたコードにはライセンスが記載されていません。ですので、ライセンスを追記する必要があります(この追記方法でよいかは不明です)

他のライセンスを回避する方法もあります。Source Mapを使用するとSource Mapから元のライセンスファイルを確認できるため、minifyされたコードに直接ライセンスを追記する必要はないようです。

ソースコード

GitHub Pagesで公開しているので、ブラウザで挙動確認できます。

公開しているソースコード。

終わりに

QRコードを表示するのは簡単に終わりました。ただ、各パラメータの単語の意味が分からなかったので、そちらを調査することに時間がかかってしまいました。

また、minifyされたソースコードにライセンスが入っておらず、その対応の調べ方にも時間かかってしまいました。相談に乗っていただいたYoichiro Shimizuさんには感謝です。


この記事がお役に立ちましたら、各種SNSでのシェアや、今後も情報発信しますのでフォローよろしくお願いします。

参考情報