※ 本記事は広告を利用しています
今回は静的・動的にQRコードを作成したい！と思った時に便利なQRコードを作成できるプラグインのご紹介です。
目次
QRコードが作れるプラグイン一覧
QRコードが作成できるjavascript・jQueryのプラグインを探してみるといくつか見つかります。
例えば下記の３種類などがあります。
- qrcodejs
https://github.com/davidshimjs/qrcodejs - jquery.qrcode.js
https://github.com/jeromeetienne/jquery-qrcode - QRious.js
https://github.com/neocotic/qrious
今回は「QRious.js」で作成するサンプルをご紹介
今回はjavascriptだけで作られている「QRious.js」での実装方法を参考にご紹介します。とても簡単なのでCDNを利用すればコピペだけで最短１分での実装も可能です。
デモ
ページを表示した際にQRコードが表示される設定です。
デモとして、本記事のURLをQRコードしました。
このように表示されます。それでは実際に実装方法を見てみましょう。
サンプル
下記QRコードを表示させるための記述になります。今回CSSはなくても問題なく表示ができます。装飾したい場合などに活用しましょう。
サンプル：HTML
QRコードを表示する場所の記述です。
<canvas id="sampleQR"></canvas>
サンプル：javascript
プラグインの読み込み（CDN）
時短でするならCDNが素早く設置可能です。
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrious/4.0.2/qrious.js"></script>
プラグインの読み込み（ダウンロード）
ダウンロードしたデータを使いたいという場合はgithubからダウンロードしましょう。
ダウンロードはこちら
<script src="任意の階層/qrious.min.js"></script>
bodyの閉じタグ付近
(function() {
var qr = new QRious({
element: document.getElementById('sampleQR'),
value: '任意のURLなど'
});
})();
これだけの記述でQRコードが表示されます。javascriptに苦手意識があっても簡単に設定ができます。
CDNを利用すれば、ファイルのダウンロードも不要なのでコピペするだけで最短１分あればQRコードを表示することができます。
任意のものを入力してQRコードにしたいということもあるでしょう。次はもう一段階踏み込んだ設定もしてみます。
発展①：任意のURLを入力してQRコードを作成
デモ
下記の入力欄にQRコードで生成したい文字列を入力してください。
この場合のhtml、javascriptの記述は下記になります。今回は入力欄の見た目も調整しましたのでCSSもサンプルとして記述しています。
HTML
<div class="gradeup"> <div class="gradeup-input"> <input type="text" id="gradeup1Input"> <button type="button" id="gradeup1Btn">QR作成</button> </div> <canvas id="gradeup1QR"></canvas> </div>
javascript
document.getElementById('gradeup1Btn').addEventListener('click', () => {
var gradeup1Input = document.getElementById('gradeup1Input').value;
(function() {
var qr = new QRious({
element: document.getElementById('gradeup1QR'),
value: gradeup1Input
});
})();
});
CSS
.gradeup-input {
margin:24px 0 0;
display: flex;
justify-content: space-between;
max-width: 600px;
input {
width: calc( 100% - 88px);
height: 48px;
padding: 0 10px;
border:1px solid #ccc;
}
button {
width: 80px;
height: 48px;
border:1px solid #ccc;
}
}
発展②：固定のURLと任意の文字列を合体したQRコード
URLは編集できないように固定のものを設定し、末尾に異なる文字列をパラメータとして合体したURLになったものをQRコードにしたい、などの場合もあるかもしれません。
例えば、ユーザー毎に固有の情報などを入力させて「https://〇〇/?parameter=任意の文字列」というような場合です。今回は本記事のURLの後ろに入力した値を付与したQRコードになります。
デモ
HTML
<div class="gradeup"> <div class="gradeup-input"> <input type="text" id="gradeup2Input"> <button type="button" id="gradeup2Btn">QR作成</button> </div> <div class="gradeup-qr"><img id="gradeup2QR"></div> </div>
javascript
URLを固定するにはjavascriptの中にあらかじめ入れておくのがポイントです。
document.getElementById('gradeup2Btn').addEventListener('click', () => {
var gradeup2Input = '任意のURL/?parameter=' + document.getElementById('gradeup2Input').value;
var qr3 = new QRious({
value: gradeup2Input,
});
document.getElementById("gradeup2QR").src = qr3.toDataURL('image/png');
});
CSS
.gradeup-input {
margin:24px 0 0;
display: flex;
justify-content: space-between;
max-width: 600px;
input {
width: calc( 100% - 88px);
height: 48px;
padding: 0 10px;
border:1px solid #ccc;
}
button {
width: 80px;
height: 48px;
border:1px solid #ccc;
}
}
いかがでしょうか？QRを読み込んで見ると本記事のURL＋入力した任意の文字列がパラメータとして付いたURLになっています。
また最初のデモなどはcanvasで表示されていましたが、発展②で表示したものはpng画像として表示していますので、QRコードを保存するといったことも可能です。
まとめ
どのプラグインも比較的簡単に設置できるものばかりなので、実装するところに合わせてお好きなものを使用してみてください。
今回ご紹介した「QRious.js」にはオプションもいくつかあり、色やサイズなどのカスタマイズも可能で、簡単にカスタマイズが可能です。もしQRコードを表示させなければいけない！という時には利用してみてはいかがでしょうか？
