トピックス

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コードになります。

デモ

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コードを表示させなければいけない！という時には利用してみてはいかがでしょうか？