QRコードを作ろう【JavaScript編】

QRコードを作ろう【JavaScript編】

初めに

以前の記事で、「.NET Framework」を使いQRコードを作成しましたが、windowsでしか動かないし、そのビルドしたソフトがないと使えないのでちょっとめんどくさいですね。
そこで今回「JavaScript」でQRコードを作っていこうと思います。

使用ライブラリ

・Zxing.js

JavaライブラリのJS移植版ZXing.jsを使っていきます。

実装

ファイルを作る

好きな場所に（任意の場所に）index.htmlを作ってください。

ファイルの中に基本的なhtmlの宣言を書いておきます。

<!DOCTYPE html>
<html lang="ja">
    <meta charset="utf-8">
    <head>
        <title>QRコード作成デモ</title>    
    </head>
    <body> 
    </body>
</html>

スクリプト読み込み

最初にZXingのJSファイルを読み込みます。<head>の＜/title>の次の行に記入してください。

<script type="text/javascript" src="https://unpkg.com/@zxing/library@latest"></script>
<script type="text/javascript" src="https://unpkg.com/@zxing/browser@latest"></script>

表示部を作成する

QRコードを作るためのデータ入力部と、QRコード作成ボタンと、表示部を作ります。

<label>データ：<input type="text" id="orgData" value="testdata"></label>
<button id="writeButton" onclick = "clicked()" >QRコードを作る</button>

<div id="insQR"></div>

QRコードを作るスクリプトを書く

スクリプト読み込みの後に次のスクリプトを書きます

<script>
             function clicked(){
                const dataText = document.getElementById('orgData');
                const writeQR = document.getElementById('insQR');
                
                const zx = new ZXing.BrowserQRCodeSvgWriter();
                //QRコード作成
                const qrcode = zx.write(dataText.value, 200, 200);
        
                if (writeQR.hasChildNodes()) {
                    writeQR.removeChild(writeQR.lastElementChild)
                }
                writeQR.appendChild(qrcode);
            }
</script>

完成

完成画面

作ったファイルをブラウザで開いてください。

このような画面が出てきて「QRコードを作る」ボタンを押すと下にQRコードが出てきます。

完成コード

<!DOCTYPE html>
<html lang="ja">
    <meta charset="utf-8">
    <head>
        <title>QRコード作成デモ</title>    
        <script type="text/javascript" src="https://unpkg.com/@zxing/library@latest"></script>
        <script type="text/javascript" src="https://unpkg.com/@zxing/browser@latest"></script>
        <script>
            function clicked(){
                const dataText = document.getElementById('orgData');
                const writeQR = document.getElementById('insQR');
                
                const zx = new ZXing.BrowserQRCodeSvgWriter();
                const qrcode = zx.write(dataText.value, 200, 200);
        
                if (writeQR.hasChildNodes()) {
                    writeQR.removeChild(writeQR.lastElementChild)
                }
                writeQR.appendChild(qrcode);
            }
        </script>
    </head>
    <body> 
        <h2>QRコード作成デモ</h2>   
        <label>データ：<input type="text" id="orgData" value="testdata"></label>
        <button id="writeButton" onclick = "clicked()">QRコードを作る</button>

        <div id="insQR"></div>

    </body>
</html>