見出し画像

JavaScriptでQRコードを作ろ！

donguri

Python、Swiftと試して来たので次はJavaScriptでの作り方です。JavaScriptでは

を使って作ります。簡単に最小限で作ります。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>QRコード</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
</head>
<body>
<div id="qrcode"></div>
<script type="text/javascript">
new QRCode(document.getElementById("qrcode"), "http://jindo.dev.naver.");  
</script>
</body>
</html>

これでQRコードが表示されます。

基本構造に、まずライブラリの読み込み、

<script src = "https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>

HTML表示部分

<div id="qrcode"></div>

そして最小限のスクリプト

<script type="text/javascript">
　　new QRCode(document.getElementById("qrcode"), 　　"http://jindo.dev.naver.");
</script>

URLを入れてボタンを押せばQRコードが表示されるようにします。

window.addEventListener('load',function()　・・・　ページ読み込んだ時に

var inputText = document.getElementById('inp');　・・・　入力欄
var gBtn = document.getElementById('btn');　・・・　ボタン

で作りたいデータの取得する入力欄、押せばQRコードを作るボタンをスクリプトで使えるようにします。

gBtn.onclick = function(){　　・・・　ボタンを押した時の動作を定義

document.getElementById('QR').textContent = '';　　表示エリアをクリア

あとは、ボタンを押した時の動作はQRCode.jsで記述されているコードをそのままm書きます。

全体です。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>QRcode</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
</head>
<body>
<p>
　<input type="url" id="inp" placeholder="URLを入力してください。" >                  
　<button id="btn"  >QRコード</button>
</p>
<div id="QR" ></div>
              
  <script>
    window.addEventListener('load',function() {  
    var inputText = document.getElementById('inp');
　　 var gBtn = document.getElementById('btn');
    gBtn.onclick = function(){
        document.getElementById('QR').textContent = '';
        var qrcode = new QRCode('QR', {
          text:  inputText.value,
          width: 128,
          height: 128,
          correctLevel : QRCode.CorrectLevel.H
        });  
      }      
    });
  </script>
 
</body>
</html>

これを実行すると


読み取りについては以下で解説されています。


この記事が気に入ったらサポートをしてみませんか？