読者です 読者をやめる 読者になる 読者になる

DIGITAL COFFEE-デジタルコーヒー

どうでもいいことを呟くどうでもいいブログ

JavaScriptでQRコードを生成するメモ

テック

たまにはSEっぽい記事を投稿します。

どうも、PlugOutです。

 

今まで全然知らなかったんですが、JavaScriptを使って簡単にQRコードが生成できるようなので個人的なメモを兼ねてご紹介。

と言っても、ただ作るだけなら以下のようなサイトで十分事足りるんですけどね。

www.cman.jp

 

ネットを探すといくつか便利なライブラリが公開されているようなのですが、僕がオススメするのは、「jQuery」のプラグインjquery-qrcode」です。

(ネットを探すとjQueryに依存しないライブラリもいくつかあったので、もし何らかの理由でjQueryが使えない場合には探してみると良いかもしれません)

github.com

 

使い方は簡単でjQueryjquery.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("");

 

実装サンプル:

<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コードを張っておきます。

f:id:PlugOut:20160126232115p:plain

 

ではでは!