今回はHTML5の機能を利用した「QRコードリーダー」を作成します。
以前作ったJavaScriptによるカメラを操作するコードに、QRコードを読み取ってくれる便利ライブラリをくっつけただけのお手軽版。
PCやスマホに付いているカメラの映像を0.3秒毎にチェックし、QRコードが見つかったらQRに埋め込まれている情報を表示してくれます。見つかったQRコードの場所も簡単にマーキングする機能も付けてみました。
今回はHTML5の機能を利用した「QRコードリーダー」を作成します。
以前作ったJavaScriptによるカメラを操作するコードに、QRコードを読み取ってくれる便利ライブラリをくっつけただけのお手軽版。
PCやスマホに付いているカメラの映像を0.3秒毎にチェックし、QRコードが見つかったらQRに埋め込まれている情報を表示してくれます。見つかったQRコードの場所も簡単にマーキングする機能も付けてみました。
前回はアニメーションするQRコードを作成しましたが、今回はその応用です。時間とともにQRコードの情報が変化する「おみくじ」を作ってみたいと思います。
ついカットなっておみくじQRコードを作った。 pic.twitter.com/0pKlS1576g
— 勝部麻季人 🍮 (@katsube) 2019年6月8日
雑にいうと「ルーレット」ですね。すごい勢いでQRコードの内容が切り替わっていく中、その一瞬をQRコードリーダー読み取ることで、利用者から見るとランダムな結果が得られるというヤツです。
前回はQRコードの中央にちょっとした画像を貼り付ける「デザインQR」を作成しましたが、今回はその画像をアニメーションさせてみたいと思います。
アニメーションするQRコード作ってみた。
これくらいの大きさならQRコードリーダーも認識してくれる。紙はムリだけどデジタルサイネージとかWebで出すのに良いかもね。
(キャラはUNITYちゃん) pic.twitter.com/4TzPShoTmk— 勝部麻季人 🍮 (@katsube) 2019年6月8日
今回はQRコードの真ん中あたりに画像を埋め込む「デザインQR」をNodeで作成してみます。
通常のQRでも機能自体に問題ありませんが、以下のような欲求が出てきます。
今回はこれらを解消しようというお話です。
今回はNode.js上で簡単にQRコードが生成できるnode-qrcode
を利用し、動的にQRコードを生成してみたいと思います。
QRコード自体は非常に便利ですよね。2次元バーコードよりも情報量が増やせるため様々な用途に利用できます。
しばらく前から日本はQRコード決済が世を賑わせていますが、個人的には早く滅んでくれないかなと思っていますがそれはまた別の話しw なんでFeliCaから退化しとんねんw
探し物してたら見つけたブツ。
これすごい!久々にひざをたたきそうになったYO!
コロンブスの卵ですな(;´∀`)