きり丸の技術日記

技術・エンジニアのイベント・資格等はこちらにまとめる予定です

ピュアな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

正直よく分かりません。README等にも記載はありませんでした。「L:1,M:0,Q:3,H:2」の4種類があるそうです。

数字は特に深い意味を持っていないようで、順番が右になるにつれてQRコードが細かい模様になります。

f:id:nainaistar:20210908235241p:plain

各メソッドの説明

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でのシェアや、今後も情報発信しますのでフォローよろしくお願いします。

参考情報

f:id:nainaistar:20210908235205p:plain