[jQuery]QRコードを生成して表示する方法

めんどくさくなってきたし。

導入の考え方
jquery.qrcode
活用
1. jsで拾ってくる
2. wpタグをぶち込む
思うこと

導入の考え方

QRコードの画像を毎度毎度用意するのがダルい。

QRコードを用意する
photoshopとかillustratorでパス化する
svg形式で保存する
htmlに突っ込む

画像ファイルのサイズ調整はいつも悩むところで、書き出したら大体png形式、それは良いんだけど放り込む先のサイズと噛み合うか怪しいので、とにかく即座にsvg。汎用性、使い勝手を考えたらsvg。だからsvg形式で毎回作成してる。svgにすればパスデータだから、紙媒体だろうが画像だろうが何にでもどんなサイズでも放り込めるので超便利。当然WEBにも突っ込める。でもそれも疲れた。いちいちリネームしたり差し替えたり、めんどくさい。という、手間の話。

それと、WEBサイトのデザインにおいて、最近はSP用のデザインのみの組み方が流行りだしてる感じがある。PCで表示すると中央とか右側にSPレイアウトがそのまま表示されて、余白に賑やかしを配置してる。中にはQRを配置して、スマホから見ることを促してたりする。ということで、QRを使う機会は今後増えてくるんじゃないかなと思ったりする。現在でも既にあるっちゃあるけど。

ソースコード上で指定した内容をQRとして設置できるなら、そっちの方が導入も管理も楽じゃない？って感じ。

jquery.qrcode

使うのはこれ。

GitHub - jeromeetienne/jquery-qrcode: qrcode generation standalone (doesn't depend on external services)

qrcode generation standalone (doesn't depend on external services) - GitHub - jeromeetienne/jquery-qrcode: qrcode genera...

2018と古いけど問題なく使える。CDNもある。

こんな感じで使う。

<script src="https://code.jquery.com/jquery-3.6.1.js" integrity="sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.qrcode/1.0/jquery.qrcode.min.js" integrity="sha512-NFUcDlm4V+a2sjPX7gREIXgCSFja9cHtKPOL1zj6QhnE0vcY695MODehqkaGYTLyL2wxe/wtr4Z49SvqXq12UQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>$(function(){ $('#qrcode').qrcode('aaaaaaaaaa'); });</script>

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

こんな感じで出る。

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

色とかサイズとか、オプションを指定したい場合はこうなる。

$('#qrcode').qrcode({
	width: 640,
	height: 640,
	text: 'aaaaaaaaaa',
	render : "table",
	background : '#000',
	foreground : '#fff'
});

renderはcanvasかtableの択。tableでqrを作る状況は多分旧ブラウザ用。現行ブラウザではcanvasで問題ない。問題ない範疇でしょ、多分。

で、やってみたら分かるけど、書き出されたQRには余白がない。周囲の色と被ったらQRが拾えなくなる可能性があるんで、入れ子にして余白を作るのが安牌。オプションで枠の有無とか幅を指定できたら楽だったんだけどね。

活用

ベタ打ちだと使うたびに都度変更しないといけないのが面倒くさい。変数とかタグで指定すれば使い回しが楽になる。

jsで拾ってくる

let thipageUrl = location.href;
$('#qrcode').qrcode( thispageUrl );

URLを取得して放り込むわけで、だからパラメータを削ったり、逆に任意のものを足したり、トップページを出力することもできる。

jQueryでURLやパラメータを取得する方法【location】

jQueryでもJavaScriptのLocationオブジェクトが使えるので「location.プロパティ」でURLの様々な情報が取得できます。取得した情報をもとにif文を使ってページ毎に処理を変えることができるというわけです。

wpタグをぶち込む

$('#qrcode').qrcode( <?php home_url(); ?> );

wp環境で思いつくのはこれ。だけど、この記述はjsファイルに逃がせない。テーマ上で書かないとwpタグは動かないので注意。

思うこと

便利だけど至高ではないというか、依存しなきゃ回らないほどでもないというか。それこそ例のような形でQRを不特定多数でバンバン作らなきゃいけないなら必要だけど、常設なら使わなくても困らない。でもまあそれも考え方で、QRの差し替えは必要だけど編集者にWEBに明るくない人を据えるとか、そういう場合にはあるといいよねみたいな。工数減るしリスクも減るよねみたいな。状況に応じての選択肢でいいんじゃないでしょうか。