QRコードを表示させる方法

URLを簡単に受け渡しできるQRコードを画面上に表示させたい場合があります。
今回は、来場受付などでも活躍するこのQRコードを生成する方法を2種類ご案内いたします。

URLの末尾にお問い合わせ番号やメールアドレスなどのQRコードにしたい内容を記載することでQRコードを生成することができます。

■メリット

・URLの末尾にパラメーターをつけるだけなので簡単
・メール文面など場所を選ばず活用できる

■デメリット

・他社サービスを利用しているため、いつの間にか使えなくなる可能性がある

■手順

・QR code generator
"&data="の後の"XXXXXX"部分にパラメーターを設定します。

<img src="https://api.qrserver.com/v1/create-qr-code/?size=150×150&data=XXXXXX">

例）パラメーターを「test@spiral-platform.co.jp」で生成したQRコード

<img src="https://api.qrserver.com/v1/create-qr-code/?size=150×150&data=test@spiral-platform.co.jp">

WEBページを生成する延長でQRコードを生成します。

■メリット

・サービス終了などの影響を受けない

■デメリット

・メール文面内では生成できない
・jsファイルをアップロードする必要がある

■手順

① jsファイルをダウンロードする
以下の2つのjsファイルをダウンロードし、サイトファイルにアップロードします。
・jquery-qrcode：https://github.com/jeromeetienne/jquery-qrcode：MITライセンス
・jquery.min.js：https://jquery.com/download/：MITライセンス
※サイトファイルでは、ファイル名に半角英数、ハイフン、アンダースコアしか使えないため、「.」は「-」に変換してアップロードしてください。

②アップロードファイルを読み込む

headでアップロードを行ったファイルを読み込む記述をします。

head

<script src="/_media/jquery-min.js"></script>
<script src="/_media/jquery-qrcode-min.js"></script>

③JavaScript の設定

QRを表示するためのスクリプトを記載します。

JavaScript

$(function () {
    $('#qrcode').qrcode("test@spiral-platform.co.jp");
});

④Bodyの設定

最後にQRコードを表示させるためのタグを設置して、完了となります。

body

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

設定後は動作確認を必ず行い、動作に問題がないか確認をしてください。
QRコードを表示する方法は、「qrcode.js」を利用して、Jqueryを使わず表示する方法など複数あります。
他にもこういう方法で表示する方法を知りたいや不具合などあれば、下記の「コンテンツに関しての要望はこちら」からご連絡ください。

開発情報・ナレッジ

APIサービスで生成する方法

jQueryで生成する方法

最後に

開発情報・ナレッジ