SAI IT Solution ブログ

WEBページにQRコードを表示する

2019.10.25 / SAI 瀧澤

WEB制作 備忘録

WEBページにQRコードを表示することがたまにあります。
実装は正直難しくないので、都度ググって実装してきました。
今回もQRコードの表示について調べることがあったので、備忘録として簡単にまとめておきます。
jquery や API を使えば、サーバに依存することなく、共用サーバなどでも手軽に実装できます。

 

 

【jquery】

・jquery.qrcode.js を下記よりダウンロード

  https://github.com/jeromeetienne/jquery-qrcode

・下記コードでQRコードを表示できます。

- - - - -

<!DOCTYPE html>

<html>

<body>

<div id="output"></div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

<script type="text/javascript" src="jquery.qrcode.min.js"></script>

<script>

$(function(){

$('#output').qrcode({width: 400, height: 400, text: "https://www.sai.co.jp/"});

})

</script>

</body>

</html>

- - - - -

 

 

【QR code API】

・imgタグのsrc属性にQR code APIのURLを入力する

・下記コードでQRコードを表示できます。

- - - - -

<img src="https://api.qrserver.com/v1/create-qr-code/?data=https://www.sai.co.jp/&size=400x400" />

- - - - -

 

 

【Google Chart API】

・Google Chart APIは現在、非推奨とのこと

 

 

logo sai
Webサイト制作 お客様のゴールに向けてご予算、ご要望に添えるWEBサイト制作をご提供します。
越境EC 中間システム
プログラミング教室 Swimmy 無料体験実施中!