開発情報・ナレッジ

投稿者:SPIRERS ナレッジ向上チーム 2021年11月26日 (金)

QRコードの生成方法

長くなってしまいがちなURLを簡単に受け渡しできるQRコード。
来場受付などでも活躍するこのQRコードを生成する方法を2種類ご案内いたします。

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

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@pi-pe.co.jp」で生成したQRコード
<img src=”https://api.qrserver.com/v1/create-qr-code/?size=150×150&data=test@pi-pe.co.jp”>

jQueryで生成する方法

WEBページを生成する延長でQRコードを生成します。
■メリット
・サービス終了などの影響を受けない
■デメリット
・メール文面内では生成できない
・jsファイルをアップロードする必要がある
■手順
①jsファイルをアップロードする
下記zipファイル内の2つのjsファイルをSSLサーバーにアップロードします。
※アップロード先がない場合、SSLサーバ内画像設置オプションの利用がおすすめです。
②コードを設置する
下記コードを</head>の直前に記述します。
<!-- QRコード start -->
<script src="https://XXXXXX/jquery.min.js"></script>
<script src="https://XXXXXX/jquery.qrcode.min.js"></script>
<script>
jquery('#qrcode').qrcode({width: 64, height: 64, text: "information"});
</script>
<script>
$('#qrcode').qrcode('パラメーター');
</script>
<!-- QRコード end -->
・「https://XXXXXX/jquery.min.js」と「https://XXXXXX/jquery.qrcode.min.js」はアップロードしたjsファイルのURLに変更してください
・「パラメーター」部分はQRコード化したいパラメーターに変更してください
デモはこちら(パラメーターとしてtest@pi-pe.co.jpを付与)
解決しない場合はこちら コンテンツに関しての
要望はこちら