QRコードを自動で生成するjQueryプラグイン「jquery.qrcode.js」の使い方

qr
このエントリーをはてなブックマークに追加
PR

jQueryプラグイン「jquery.qrcode.js」でQRコードを表示させる

携帯電話やスマートフォン等のカメラ付き端末で、簡単に文字列を読み取ることが出来るQRコードをjQueryのプラグイン「jquery.qrcode.js」を使って表示させる方法です。

プラグインのダウンロードはgifhubより

DOWNLOAD

 

STEP 1 jQueryとプラグインを読み込む

<!-- jQueryの読み込み -->
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>

<!-- qrcodeの読み込み -->
<script src="jquery.qrcode.min.js"></script>

まずは、HTMLファイルでjQueryとjQueryプラグインを読み込みます、それぞれのパスは環境に合わせて変更してください。

 

 

STEP 2 QRコードを表示したいタグを作っておく

<div id="qrcode"></div>

QRコードを表示させたいところに、タグを作ってQRコードとわかるようにID、もしくはCLASSを付けておきます。このタグがimgタグに入れ替わるようなイメージをしてもらえればいいかと思います

 

 

STEP 3 QRコードの生成の指定

<script>

$(window).on("load",function(){
  $('#qrcode').qrcode("文字列を入れる");
});

</script>

単純には、これで完成です。オプションも指定可能で、サイズや古いIEにも対応させるのかどうか等の設定が出来ます。

 

 

オプション サイズ指定をする

$('#qrcode').qrcode({width: 64,height: 64,text: "文字列を入れる"});

widthに横幅、heightに高さを指定します、単位は不要です。textのところには文字列を入れます、ダブルクォーテーションは消してはいけません。

 

 

オプション 旧IEにも対応した table モード

$('#qrcode').qrcode({render : "table",text : "文字列を入れる"});

render で table を指定することでtableモードで実行します。通常はcanvasモードで実行されます。

 

プラスアルファ 現在表示中のページのURLで自動生成する

$('#qrcode').qrcode(location.href);

このようにすることで、javascriptで現在の表示中のページのURLを取得しますので生成されるQRコードは表示中のページのURLになります。jQueryを使っていますので、他にもtitleの取得なども手軽に行うことが出来ます。

PR

COMMENT

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー CC0 PHOTO 無料で使える高画質な写真をダウンロード、クレジット表記、リンク不要

9ineBBの最新情報をチェック・購読

Twitter Facebook Google+ Feedly RSS

どこをクリックしてもこの表示を消せます
(3日後以降に再度表示されます)