QRコード生成

2016-04-20 03:02

キービジュアル

QRコードを生成する

こんばんは、日暮です。今回はQRコード生成用のJSライブラリを試してみました。

仕事でWebサイトを作っていることもあり、テストサイトのアドレスをQRコードにしてスマホで読み込むということが度々あります。以前はMacのDashboardのウィジェットでやっていたのですが、OSをアップデートしたらDashboardが消えてしまったので、いいソフトがないか探していました。(後で気がついたのですが、Dashboardは普通にアプリケーションに入っているのですね・・・)
あまり気に入ったアプリが無かったので、どうせなら自分で作ってみようということで、いくつかJSのライブラリを探してみました。
すると、jQuery.qrcodeというライブラリが見つかりました。

ライブラリ選定のポイントは、QRコードの生成時に通信が発生しないことと、カスタマイズ性です。テストサイトということもあり、できるだけ外部に情報を送りたくないということがあります。また、今後QRコードを表示したいということがあるかもしれないので、デザインを色々いじれることもこのライブラリを選んだポイントです。

いざ実装!

実装は非常に簡単でした。
ライブラリを読み込んで、数行のスクリプトを記述するだけでQRコードを表示することができました。
オプションなども結構細かくでき、基本的にはこのライブラリだけで大体のことはできると思います。

オプション

QRコード生成時にオプションを設定することで、QRコードを細かく設定することが可能です。
オプションとしては、下記のようなものがありました。

  • QRコードに入れる情報(URLやテキストを設定)
  • QRコードの大きさ
  • QRコードの色
  • QRコードの背景色
  • QRコードの細かさ
  • QRコードの誤り訂正レベル
  • QRコードのエリアの大きさ
  • QRコードの丸み
  • QRコードの中に表示するテキスト
  • テキストエリアのデザイン
  • テキストサイズ
  • テキストの横位置
  • テキストの縦位置
  • テキストの色
  • QRコードの中に表示する画像

試しに自分で使いそうなものでデモを作ってみました。よかったら使ってみてください!
QRコードジェネレーター

まとめ

QRコードが非常に簡単に作れることが分かったので、今度何かに提案してみたいと思います。

レッツQRライフ♪

higurashi

著者:higurashi(Planer / Engineer)

テクニカルディレクターとしてWebサイトや展示系コンテンツの制作などに携わる。 好きなことは旅行とビール。