QRious.js

JavaScriptのライブラリQRious.jsで任意の文字列をQRコードで出力 [canvasとpngファイルを出力]

2022年8月16日 7分

QRコードをWebで生成して何かに使うことはあまりありませんが、jQuery不要のネイティブなJavaScriptで簡単にQRコードを作れるライブラリがあるので、そのご紹介です。

ライブラリを中心として、カスタマイズも容易なのでチェックしてみてください。

QRious.js
任意の文字列をQRコードで出力するサンプル
実装の手順と方法
ざっくりとしたコードの解説
さいごに

QRious.js

「QRious.js」は、指定した文字列でQRコードをHTML5の canvas で生成してくれるJavaScriptライブラリです。

オプションも豊富で、背景色やサイズなど細かな指定も可能で、カスタマイズもしやすいライブラリです。

できることや詳細については、以下の公式ページも併せてご覧ください。

公式ページ QRious

任意の文字列をQRコードで出力するサンプル

早速、サンプルです。

テキストフィールドに文字列やURLを入力して、「QRコードを生成」のボタンクリックで生成されるQRコードは2つです。

QRコードで生成したい文字列を入力してください。

デスクトップで見た時に、左が canvas タグで生成されたもので、右が png ファイルで生成されたものです。どちらも、テキストフィールドに入力した文字が生成されます。

かかかず

ので、右側のpngファイルは右クリックでローカルに保存可能です。

<canvas>タグ

<canvas> タグはグラフィックキャンバス要素で、HTML5とJavaScriptを組み合わせてグラフィックやアニメーションを描画することができる機能です。

実装の手順と方法

コードの解説の前に、実装の手順と方法について解説します。ここで全体の流れについて把握しておきましょう。

QRious.js本体の読み込み

はじめに、QRious.js本体の読み込み設定を行いましょう。使用方法は、<head>〜〜</head>内にいずれかの方法で読み込ませるだけです。

読み込ませる方法は以下の通り、「ダウンロードして使用する場合」か「CDNの場合」のどちらかです。

コードを表示

<!-- ダウンロードの場合 -->
<script src="/path/to/qrious.js"></script>

<!-- CDNの場合 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrious/4.0.2/qrious.js"></script>

HTMLを記述

ライブラリを <head>〜〜</head> で読み込みができたら、設置したい場所に以下のHTMLを記述します。

コードを表示

<div class="qrblock">
  <p class="qrcomment">QRコードで生成したい文字列を入力してください。</p>
  <input id="isbn" type="text" name="isbn" value=""> <button id="getqrInfo" class="btn btn-default">QRコードを生成</button>
</div>
<div id="qrOutput">
  <canvas id="qr"></canvas>
  <div><img id="newImg"></div>
</div>

JavaScriptを記述

次にJavaScriptのコードをページに記述します。

コードは <body>〜</body> で、</body> の閉じタグ（クロージングタグ）の前に記述しましょう。

コードを表示

document.getElementById('getqrInfo').addEventListener('click', () => {
  // 入力された文字列を取得
  var userInput = document.getElementById('isbn').value;
  var query = userInput.split(' ').join('+');
  // QRコードの生成
  (function() {
     var qr = new QRious({
       element: document.getElementById('qr'),
       // 入力した文字列でQRコード生成
       value: query
  });
  qr.background = '#FFF'; //背景色
  qr.backgroundAlpha = 0.8; // 背景の透過率
  qr.foreground = '#6bb6ff'; //QRコード自体の色
  qr.foregroundAlpha = 1.0; //QRコード自体の透過率
  qr.level = 'L'; // QRコードの誤り訂正レベル
  qr.size = 240; // QRコードのサイズ
     // QRコードをflexboxで表示
     document.getElementById('qrOutput').style.display = 'flex';
  })();
// png出力用コード
var cvs = document.getElementById("qr");
var png = cvs.toDataURL();
document.getElementById("newImg").src = png;

});

CSSを記述

最後に、CSSを記述して見た目を整えて完了です。

コードを表示

#qrOutput {
    display: none;
}
.qrblock {
    display: block;
    text-align: center;
}
p.qrcomment {
    background: #eff1f5;
    text-align: center;
    color: #707070;
    padding: 7px 35px 8px;
    border-radius: 9999px;
    display: inline-block;
    margin: 0 0 25px;
    position: relative;
}
p.qrcomment:after {
    content: "";
    position: absolute;
    bottom: -25px;
    left: 50%;
    margin-left: -15px;
    border: 15px solid transparent;
    border-top: 15px solid #eff1f5;
    z-index: 1;
}
#qrOutput {
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
    padding: 20px;
}

かかかず

これで完成です！

ざっくりとしたコードの解説

コードは、「QRコードの入力フィールドと出力する要素」のHTML・「QRコードを出力」のJavaScriptと「見た目を整える」CSSの3種類です。順に解説していきます。

HTML

HTMLでは、まずはじめにQRious.js本体を読み込ませる必要があります。ダウンロードの場合はGitHubにあるので、そちらからダウンロードをして、設置したパスを記述します。

外部リンク QRious ダウンロード先

もしくは、CDNでも配信されているので好きな方で <head>〜〜</head> の中に設置をしましょう。

<!-- ダウンロードの場合 -->
<script src="/path/to/qrious.js"></script>

<!-- CDNの場合 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrious/4.0.2/qrious.js"></script>

設置が完了したら、次に設置したい場所へ以下のHTMLを記述します。

<div class="qrblock">
  <p class="qrcomment">QRコードで生成したい文字列を入力してください。</p>
  <input id="isbn" type="text" name="isbn" value=""> <button id="getqrInfo" class="btn btn-default">QRコードを生成</button>
</div>
<div id="qrOutput">
  <canvas id="qr"></canvas>
  <div><img id="newImg"></div>
</div>

このコードは、文字列を入力するテキストフィールド・QRコードを生成するボタン・QRコードの出力先の3つが含まれます。

JavaScript

JavaScriptは、「getqrInfo」のid名を持つ button タグのクリックで処理が開始されます。

処理が開始されると、テキストフィールドの文字列を取得してQRコードを生成し、canvas と img タグにそれぞれ出力されて、ビューにQRコードが表示されます。

document.getElementById('getqrInfo').addEventListener('click', () => {
  // 入力された文字列を取得
  var userInput = document.getElementById('isbn').value;
  var query = userInput.split(' ').join('+');
  // QRコードの生成
  (function() {
     var qr = new QRious({
       element: document.getElementById('qr'),
       // 入力した文字列でQRコード生成
       value: query
  });
  qr.background = '#FFF'; //背景色
  qr.backgroundAlpha = 0.8; // 背景の透過率
  qr.foreground = '#6bb6ff'; //QRコード自体の色
  qr.foregroundAlpha = 1.0; //QRコード自体の透過率
  qr.level = 'L'; // QRコードの誤り訂正レベル
  qr.size = 240; // QRコードのサイズ
     // QRコードをflexboxで表示
     document.getElementById('qrOutput').style.display = 'flex';
  })();
// png出力用コード
var cvs = document.getElementById("qr");
var png = cvs.toDataURL();
document.getElementById("newImg").src = png;

});

QRコードの仕様はオプションで指定

出力されるQRコードの仕様は、JavaScriptのコード内で指定します。上記のコードだと qr.background〜〜から始まる箇所で、色やサイズの指定が可能です。

使用可能なオプションは、以下ページの下部にあるので、参考にしてみてください。

外部リンク QRious

かかかず

サンプルを作ってて思ったのですが、pngファイルを生成する .toDataURL() メソッドは便利ですね。

CSS

CSSは、文字列を入力するテキストフィールドや、吹き出しやレイアウトに関する記述が中心の内容です。

#qrOutput {
    display: none;
}
.qrblock {
    display: block;
    text-align: center;
}
p.qrcomment {
    background: #eff1f5;
    text-align: center;
    color: #707070;
    padding: 7px 35px 8px;
    border-radius: 9999px;
    display: inline-block;
    margin: 0 0 25px;
    position: relative;
}
p.qrcomment:after {
    content: "";
    position: absolute;
    bottom: -25px;
    left: 50%;
    margin-left: -15px;
    border: 15px solid transparent;
    border-top: 15px solid #eff1f5;
    z-index: 1;
}
#qrOutput {
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
    padding: 20px;
}