※ この記事は[DIGITAL COFFEE]から移動したものです。
今まで全然知らなかったんですが、JavaScriptを使って簡単にQRコードが生成できるようなので個人的なメモを兼ねてご紹介。
と言っても、ただ作るだけなら以下のようなサイトで十分事足りるんですけどね。
ネットを探すといくつか便利なライブラリが公開されているようなのですが、僕がオススメするのは、「jQuery」のプラグイン「jquery-qrcode」です。
（ネットを探すとjQueryに依存しないライブラリもいくつかあったので、もし何らかの理由でjQueryが使えない場合には探してみると良いかもしれません）
使い方は簡単でjQueryとjquery.qrcode.min.jsをscriptタグで読み込んだのち、「$().qrcode()」というメソッドにオプションを引数で与えてを実行するだけ。
$("#coffee").qrcode({text:"http://plugout.hatenablog.com/"});
と記載すると、属性に「id = "coffee"」を持ったHTMLタグの中身にQRコードの画像が追加されます。
（もちろん、textの値は任意の物に差し替えてくださいね）
またオプションにはwidthやheightも指定できるようなので、任意の大きさでQRコードを生成できます。
ただ一点だけ注意なのは、指定したHTMLタグの中に既に何かが入っている場合は上書きではなくて追加の形で画像が入ってくるので注意です。
なので例えば同じHTMLタグに対して2回メソッドを実行すると、QR画像が2つ表示されてしまいます。
もしボタンを押したらQRを表示するような実装を行いたい場合には、一度以下のようなコードで内容を消してしまうのが良いでしょう。
$("#coffee").html("");
実装サンプル：demo.html
<html>
<head>
<script src="jquery.min.js"></script>
<script src="jquery.qrcode.min.js"></script>
<script type="text/JavaScript">
$(function(){
$("#coffee").html("");
$("#coffee").qrcode({text:"http://plugout.hatenablog.com/"});
});
</script>
</head>
<body>
<div id="coffee"></div>
</body>
</html>
最後にこのサンプルで出力した、このブログのQRコードを張っておきます。
ではでは！
