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使いたくないという人はこちらをどうぞ。