javaScriptでQRコードを生成する

javascriptでQRコードを作成する方法を紹介します。
QRコードの作成自体実は<img>タグを使用し、srcにGoogle APIを当てれば簡単に出力できます。
なぜ、わざわざjavaScriptを使用するのかというとGoogle APIの方に非推奨と記載されているからです。
かといって自作するかというとそれは難しい。。。
「符号理論とかガッツリ数学、、、」「誤り訂正符号懐かしいな~」
大半寝ていた授業で全く覚えていないし、コスパ悪いので諦めました。
既存のライブラリを使用して作成する方法です。
ライブラリは「qrcodejs」よりダウンロードしてください。
javaScriptでQRコードを作成する
上でダウンロードした中の圧縮版「qrcode.min.js」を使用します。
<div data-url="https://kumatech-lab.com"></div>
こんな感じに用意していたとします。urlはわざわざこんな風に持たせなくてもOKです。わかりやすいので、この形にしています。
const qrDiv = document.querySelectorAll( '[data-url]' );new QRCode( qrDiv, {text: qrDiv.getAttribute( 'data-url' ),width: 350,height: 350,colorDark : "#000000",colorLight : "#ffffff",} );
インスタンスを生成するだけでQRコードが表示されます。
引数に指定したエレメント内に作成されるので、今回だと<div></div>の中にQRコードが生成されます。
「text」は飛び先です。
width、heightで生成するサイズを決めることができます。
colorDark、colorLightで色の指定もできるようです。上の例では純粋に黒と白です。
まとめ
意外とあっさり作れてしまいました。
wordpressの投稿一覧部分に各投稿のqrを表示する形で使用してみましたが、一個一個ちまちま表示されることもなく、さっと表示してくれました。
jQueryで作成している例も見ましたが、あまりjQuery使いたくないという人はこちらをどうぞ。