QRコードを作成できるJqueryプラグイン – [jquery.qrcode.js]

JqueryQRコード

以前に書いた短縮URLについていろいろと考えていたら、なぜかQRコードにたどり着きました。

長ったらしいURLをいろんな床に記載するよりQRコードをポンっと載せてここからアクセスしてね!としたほうが人を呼び込みやすいような気がします。

QRコードを読み込んだら、短縮URLだった…というような場合、短縮URLってなんの用途で使うんだろうと思いました。

で、QRコードについてちょっと調べていたら、割と簡単に実装できるJqueryのQRコード作成プラグインを発見。今のところ、自分にとっての使い道は皆無ですが、気になったので使い方を確認。

ダウンロード

以下のURLからZipファイルをダウンロードし解凍

解凍したフォルダ直下にある、「jquery.qrcode.min.js」を使用します。

コード

Jqueryと一緒に読み込み

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="jquery.qrcode.min.js"></script> 

下記のコードを記載するだけで利用可能

<div id="output"></div>

$("#output").qrcode({text:’https://www.google.com/’});

URL入力用フォーム作成

但し、これではなにも使えないので、テキストボックスにQRコードを作成したいURLを入力して出力できるようにする。

[html]

<input type="text" id="input" name="query">
<button id="button">click</button>
<div id="output"></div>

[Jquery]

$(function(){
$('#button').click(function(){ //ボタンをクリックすると発動
var input = $('#input').val(); //テキストボックスに入力された値を取得
$("#output").qrcode({text:input}); //#outputに画像を出力
});
});

コード追加

出力画像を重複しないように回避

しかしこのままではボタンをクリックするごとに画像がどんどん増えていくので、クリックしたら以前の画像を消去するように以下を追加

$(function(){
$('#button').click(function(){ //ボタンをクリックすると発動
$("#output").html(''); //#outputを空にする
var input = $('#input').val(); //テキストボックスに入力された値を取得
$("#output").qrcode({text:input}); //#outputに画像を出力
});
});

テキストボックスが空の場合の対処

テキストボックスが空の場合でもボタンをクリックするとQRコードが出力されてしまうので、以下を追加。

$(function(){
$('#button').click(function(){ //ボタンをクリックすると発動
$("#output").html(''); //#outputを空にする
var input = $('#input').val(); //テキストボックスに入力された値を取得
if (input!="") { //値が空でない場合
$("#output").qrcode({text:input}); //#outputに画像を出力
}
else { //値が空の場合
$("#output").text('blank'); 「blank」と表示
}
});
});

おまけ

QRコードをURLや電話番号等の特定の情報に限定したい場合は正規表現でチェックを行う

入力をURLに限定する場合

if (input.match(/^http(s)?://([\w-]+\.)+[\w-]+(/[\w- ./?%&=]*)?$/)) {
$("#output").qrcode({render:'table',background:'#FFF100',foreground:'#FF69B4',width:64,height:64,text:input});
}
else {
$("#output").text('URLではありません');
}

入力をメールアドレスに限定する場合

if (input.match(/^[A-Za-z0-9._+]+@[A-Za-z]+.[A-Za-z]$/)) {
$("#output").qrcode({render:'table',background:'#FFF100',foreground:'#FF69B4',width:64,height:64,text:input});
}
else {
$("#output").text('blank');
}

メールアドレス判定に使用する正規表現には色々ありますが、最低限の判定になっています。メールアドレス判定の正規表現いろいろについては別途勉強します。

※追記 – 生成されたQRコードをpngファイルに変換

このままではQRコードがhtml5のcanvas要素として出力されており、一部ブラウザからは画像として保存ができませんでした。

ですので、canvas要素をpngに変換する処理を追加。

toDataURL() でcanvasをpngに変換

javascriptのtoDataURL()メソッドでcanvas要素をpng or jpgに変換できます。

まずはcanvasを取得しなくてはいけませんが、jquery.qrcode.min.jsによって出力された要素は以下のようにIDが指定されておらず、所得できません。

<canvas id="canvas" width="256" height="256"></canvas>

ですので、 jquery.qrcode.min.js に以下を追記します。

var c=document.createElement("canvas"); //この後に
c.id ="canvas"; これを追記

MIT Licenseなので改変は問題ないでしょう。念のためmin.jsの冒頭に以下のライセンスを追記しました。


Copyright (c) 2011 Jerome Etienne, http://jetienne.com
Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
“Software”), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:
The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

https://github.com/jeromeetienne/jquery-qrcode/blob/master/MIT-LICENSE.txt

これでcanvas要素にIDが追加されます。

<canvas id="canvas" width="256" height="256"></canvas>

ということで、#canvasからcanvas要素を取得する。

以下のサイトを参考にしました。

var canvas = $("#canvas")[0]; //#canvasからcanvas要素を取得。[0]をつけるのがポイント。
var img_src = canvas.toDataURL("image/png"); //toDataURLでpng形式に変換
$("#output").html(''); //canvas要素を削除
$("#output1").attr("src",img_src); //pngを表示

JqueryQRコード