QRコードは、大量の情報を素早く読込める非常に優れた2次元バーコードの規格です。WEBサイトへの誘導、QRコード決済、ビジネスシーンでの活用等、様々な用途で使用されています。
Tipsでは、JavaScriptを使用してQRコードをHTML上に出力する方法を紹介します。
※「QRコード」は株式会社デンソーウェーブの登録商標です。
QRコードとは
QRコードは1994年 株式会社デンソーウェーブが開発した技術です。
小さい画像で、多くの情報を持つことができ、360度どの角度からでも読取ることができます。
また、特許が開放されており、QRコードは規格・仕様がオープン化されているため、QRコードの規格自体は無料で使用することができます。
JavaScriptでQRコードを出力する方法
JavaScriptのライブラリを使用すると簡単にQRコードをHTMLに出力することができます。
Tipsではqrcodejsの使用方法をご紹介します。
■qrcodejs
https://davidshimjs.github.io/qrcodejs/
qrcodejsの読込み設定
qrcode.min.jsファイルをサーバーに配置する場合
qrcodejsのサイトからファイルをダウンロード後、サーバーに配置して利用します。
ダウンロードしたzipファイルを展開後に出力されるqrcode.min.jsをサーバーにコピーしてhtmlから読込むように設定してください。
qrcode.min.jsと作成したhtmlを同階層に配置した場合はhtml内で以下を設定して読込みます。
<script src="qrcode.min.js"></script>qrcode.min.jsファイルをCDNから読込む場合
qrcode.min.jsファイルはCDNから読込むこともできます。
html内で以下を設定して読込みます。
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js" integrity="sha512-CNgIRecGo7nphbeZ04Sc13ka07paqdeTu0WR1IM4kNcpmBAUSHSQX0FslNhTDadL4O5SAGapGt4FodqL8My0mA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> QRコードのサンプル
サンプルについて
サンプルでは、「QRコード生成」ボタンをクリック時、入力欄に設定されたurlをQRコードとして出力します。
以下リンクからサンプルをダウンロードできます。
ダウンロードしたファイルに含まれる htmlをブラウザで実行することで、サンプルの確認ができます。
QRコードのサンプル 詳細説明
入力欄にid属性を設定①
入力欄に設定されたurlをQRコードとして出力します。
サンプルでは入力欄の要素にアクセスできるようにid属性を設定しています。
例) 入力欄のid属性にINP01を設定
<input type="url" class="input" value="https://www.migaro.co.jp/tips" id="INP01" placeholder="URLを入力してください。" >ボタンにid属性を設定②
ボタンをクリックした際に、QRコードを作成するため、「QRコード生成」ボタンをhtmlに定義します。サンプルでは、cssフレームワークのBulmaを使用しているため、アンカータグでボタンを定義しています。もちろん、通常のinput type=”button” 等でも問題ありません。
ボタンが識別できるように設定をしてください。
例) ボタンのid属性にINP01を設定
<a class="button is-info load-b" id="CRTQR"><i class="fas fa-qrcode mr-2"></i>QRコード生成</a>QRコード出力先にid属性を設定③
QRコード出力先のタグを設定します。
サンプルではdivタグにid属性QRを設定しています。
例) 出力先のid属性にQRを設定
<div id="QR" class="container m-4 is-justify-content-center is-flex">
</div>ボタンクリック時の処理記述
「ボタンにid属性を設定②」で設定したボタンのクリック時には、以下の流れで処理が実行されます。
- 「QRコード出力先にid属性を設定③」で設定した出力先のコンテンツをクリア
- qrcodejsのQRCodeのオブジェクトをnewでインスタンス化
- QRCodeオブジェクト作成時にオプションを設定して
「入力欄にid属性を設定①」入力欄に設定された文字のQRコードを「QRコード出力先にid属性を設定③」要素へ出力
JavaScriptの定義は以下になります。
<script>
// 読込後
window.addEventListener('load',function() {
// 入力欄の要素を取得
var inp01 = document.getElementById('INP01');
// ボタンの要素を取得
var bnt01 = document.getElementById('CRTQR');
// ボタン クリック時の処理を追加
bnt01.onclick = function(){
// QRコードの出力先をクリア
document.getElementById('QR').textContent = '';
// QRコード作成
var qrcode = new QRCode('QR', {
text: inp01.value,
width: 128,
height: 128,
correctLevel : QRCode.CorrectLevel.H
});
}
});
</script>おわりに
JavaScriptのライブラリを使用すると、簡単にQRコードを作成することができますので、是非ご活用ください。