JavaScript2017.02.05 2017.09.07 l＠ha

[JavaScript]QRコードの作成[Googl APIの使用]

Google APIを使用して指定したURLや文章のQRコードを作成してみます。

QR Codes | Infographics | Google Developers

/* ----HTML---- */
//QRコードを表示する領域
<div id="barCode"></div>
/*----------------*/

//QRコードにしたい文字列をエンコードします
var msg=encodeURIComponent("https://prokatsu.com/");


//素のJavaScriptの場合
var barCode = document.getElementById('barCode');

var img = '<img src='+'"https://chart.googleapis.com/chart?chs=300x300&cht=qr&chl=' + msg + '">';

barCode.innerHTML=img;


//JQueryの場合
var img=$('<img>').attr('src', 'https://chart.googleapis.com/chart?chs=300x300&cht=qr&chl='+msg);

$('#barCode').html(img);

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

/* ----HTML---- */

//QRコードを表示する領域

<div id="barCode"></div>

/*----------------*/

//QRコードにしたい文字列をエンコードします

var msg=encodeURIComponent("https://prokatsu.com/");

//素のJavaScriptの場合

var barCode = document.getElementById('barCode');

var img = '<img src='+'"https://chart.googleapis.com/chart?chs=300x300&cht=qr&chl=' + msg + '">';

barCode.innerHTML=img;

//JQueryの場合

var img=$('<img>').attr('src', 'https://chart.googleapis.com/chart?chs=300x300&cht=qr&chl='+msg);

$('#barCode').html(img);

このAPIのページへ行くと「Warning: This API is deprecated.」と上の方に表示されています。

これは非推奨を表しているので、そのうち使えなくなる可能性があります。使用する環境に考慮して使用しましょう。