長くなってしまいがちなURLを簡単に受け渡しできるQRコード。
来場受付などでも活躍するこのQRコードを生成する方法を2種類ご案内いたします。
来場受付などでも活躍するこのQRコードを生成する方法を2種類ご案内いたします。
APIサービスで生成する方法
URLの末尾にお問い合わせ番号やメールアドレスなどのQRコードにしたい内容を記載することでQRコードを生成することができます。
■メリット
・URLの末尾にパラメーターをつけるだけなので簡単
・メール文面など場所を選ばず活用できる
・メール文面など場所を選ばず活用できる
■デメリット
・他社サービスを利用しているため、いつの間にか使えなくなる可能性がある
■手順
・QR code generator
"&data="の後の"XXXXXX"部分にパラメーターを設定します。
"&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">
jQueryで生成する方法
WEBページを生成する延長でQRコードを生成します。
■メリット
・サービス終了などの影響を受けない
■デメリット
・メール文面内では生成できない
・jsファイルをアップロードする必要がある
・jsファイルをアップロードする必要がある
■手順
①jsファイルをアップロードする
下記zipファイル内の2つのjsファイルをSSLサーバーにアップロードします。
※アップロード先がない場合、SSLサーバ内画像設置オプションの利用がおすすめです。
※アップロード先がない場合、SSLサーバ内画像設置オプションの利用がおすすめです。
②コードを設置する
下記コードを</head>の直前に記述します。
・「https://XXXXXX/jquery.min.js」と「https://XXXXXX/jquery.qrcode.min.js」はアップロードしたjsファイルのURLに変更してください
・「パラメーター」部分はQRコード化したいパラメーターに変更してください
<!-- 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 -->
・「パラメーター」部分はQRコード化したいパラメーターに変更してください
デモはこちら(パラメーターとしてtest@spiral-platform.co.jpを付与)