QRコードの作成方法

URLなどの長くなってしまいがちな文字を簡単に受け渡しのできるQRコード。
弊社システムの来場受付などでも活躍するこのQRコードを作成する方法をご案内いたします。

作成方法

2種類の作成方法をご案内いたします。
①「APIサービスの利用」
URLの末尾にお問い合わせ番号やメールアドレスなどのQRコードにしたい内容を記載することでQRコードを生成することができます。

②「JQueryを利用」する方法。
WEBページを生成する延長でQRコードを生成します。

①APIサービスの利用

メリット

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

デメリット

あくまで他社サービスを利用しているため、いつ終了になるかわからないため、
長期利用の場合などにいつの間にか使えなくなっている可能性がある。
(メール等でQRコードをコードを配布後に使用できなくなると受付で混乱が起こるなど)

案内

・QR code generator
URLは https://api.qrserver.com/v1/create-qr-code/?size=450×450&data= で、以降にパラメーターを設定

例)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での作成方法

メリット

ページとして生成されるため、APIサービスの利用とことなりサービス終了などの
影響を受けない。

デメリット

ページとして作成する必要があるので、メール文面に直接QRコードを乗せるのではなく、QRコードを載せたページへのURLを記載することになるので、1アクション必要になる。

案内

下記2ファイルをダウンロードいただき、SSLサーバーにアップロードする。
※そのまま利用しないでください。
※アップロード先がない場合はオプション:SSLサーバ内画像設置よりお申し込みください。

jquery.min.js
jquery.qrcode.min.js

・QRコードを表示したい位置に
<div id=”qrcode”></div>

・QRコード化したいパラメーターを設置
$(‘#qrcode’).qrcode(‘[パラメーター]’);

・記入例

<!-- QRコード start -->
<script src="https://www.pi-pe.co.jp/sslimg/channel-r3/sdp/jquery.min.js"></script>
<script src="https://www.pi-pe.co.jp/sslimg/channel-r3/sdp/jquery.qrcode.min.js"></script>
<script>
jquery('#qrcode').qrcode({width: 64, height: 64, text: "information"});
</script>
<script>
$('#qrcode').qrcode('$mail$');
</script>
<!-- QRコード end -->


・サンプルURL(パラメーターとしてtest@pi-pe.co.jpを付与)