JavaScriptでQRコードを作成【jQuery】

JavaScriptでQRコードを作成【jQuery】 WEBデザイン

JavaScriptでQRコードをサクッと作成してWebサイトに表示したい。

そんなときにすぐに使える「jQuery.qrcode.js」を紹介します。

QRコード内の日本語も文字化けしないように対策します。

スポンサーリンク

jQuery.qrcode.jsの利用方法

jQuery.qrcode.jsとは

簡単な手順でQRコードを生成し、SVGで表示してくれます。

■jquery-qrcode【GitHub】
https://github.com/jeromeetienne/jquery-qrcode

SVGとはScalable Vector Graphics(スケーラブル・ベクター・グラフィックス)の略で、読んで字のごとく、拡大縮小(スケーラブル)に対応したVector形式の画像フォーマットです。
Vector形式とは、画像やグラフィックスを描写するための数値情報まとめたもので、画面に表示する際にその数値情報を元に描写するため、拡大縮小してもぼやけたり潰れたりして画像が劣化することなく、大きな画像でもファイルサイズが軽くなるのが特徴です。
ちなみに、「ベクター形式、ベクタ形式、ベクトル形式」などと呼ばれますが全て同一です。

サイトに直接アップロードして利用する場合

jQueryとjQuery.qrcode.jsをダウンロードして任意の場所(※例としてjsフォルダ)にアップロードしましょう。

■jQueryダウンロードぺージ
https://jquery.com/download/

jQueryダウンロードぺージ

最新のJQueryを右クリック→「名前を付けてリンク先を保存」でダウンロードしましょう。

■jquery-qrcode【GitHub】
https://github.com/jeromeetienne/jquery-qrcode

jquery-qrcodeダウンロードページ

「Clone or Download」をクリック→「Download ZIP」にてzipファイルをダウンロードします。

zipファイルを解凍して「jquery.qrcode.min.js」を利用する

zipファイルを解凍し、「jquery-qrcode-master」フォルダ内にある「jquery.qrcode.min.js」を利用します。

「jquery-3.4.1.min.js」と「jquery.qrcode.min.js」をサーバーの「js」フォルダにアップロードすればjQuery.qrcode.jsを利用する準備は完了です。

以下がHTMLソースです。

CDNを利用する場合

CDNでも利用できますのでこちらの方が便利です。

コードの解説

7行目でQRコード化するテキストを入力します。

8行目で日本語が文字化けしないように対策してあります。

それ以外は「jQuery.qrcode.js」を利用する際の基本的なコードです。

デモ

See the Pen
voVgyE
by Ketsunosuke (@onoredekaiketsu)
on CodePen.


上のデモのQRコードを読み込んでも、日本語は文字化けせずにちゃんと表示されています。

QRコードを読み込みテスト(拡大)

QRコードを読み込みテスト

スポンサーリンク

設定のオプション

生成されるQRコードの大きさ(width、height)をピクセル単位で指定できます。

10行目のwidthとheightの設定値を変更するだけで、生成されるQRコードの大きさが変わります。

■デモ(縦横を160ピクセルで指定した例)

See the Pen
dxgNOx
by Ketsunosuke (@onoredekaiketsu)
on CodePen.


大きさはお好みで変更しましょう。

以上で解決です。