こんにちは。櫻井です。
今までQRコードを設置するときは基本的に画像を生成して配置していたんですが、本番とテスト環境で配置するQRコードを変えたい場面で画像を替えなきゃいけないのだと替え忘れが恐いなと思い。
google Chromeのプラグインでも現在開いているページを瞬時にQRコード生成して表示してくれるプラグインがあったりするしJSでやる方法があるんじゃないかと調べてみました。
今回はそのやり方の備忘録。
JSでQRコードを生成する
JSで生成したい場合はプラグインを使えば簡単にできました。
今回はQRCode.jsを使用しました。
See the Pen createQRcode by knap_develp (@knap_develp) on CodePen.
簡単にソースを説明します。
まずgetUrlはURLを取得する関数になっています。
引数が空なら現在開いているページのURLを返します。
引数が入っている場合は引数を返します。
qrcodeでQRコードを生成します。
new QRCodeの第一引数でどこにQRコードを出力するのかを指定します。
第二引数で細かい設定をしていきます。
textはQRコードを読み取ったときに返す内容になります。今回はURLを返します。
widthは幅、heightは高さを表します。
colorDarkはQRコードの模様の色を指定します。
colorLightはQRコードの背景の色を指定します。
jqueryの場合はjquery-qrcodeというプラグインもあって色々選択肢がありそうです。
PHPでもライブラリをインストールすればできそうなのでそっちはまた別で試してみたいと思います。