木はじめに最近は色々なライブラリが公開されて使えるようになり、QRコードの読み取りも簡単にできるようになりました。ここではWebサイトから自身のPCのカメラを使ってそのカメラにかざされたQRコードを読み取って、読み取った内容をSlackに通知するところまでの手順をメモします。具体的には、自分のパソコンのローカル環境にWordPressを構築し、そのWordPressで必要なJavascriptを読み込むだけで実現できます。非常に簡単で驚きました。今回はInstascan.jsというJavascriptライブラリを使用しました。できるようになること自身のPCのカメラにQRコードをかざすと、カメラがその内容を読み取ってブラウザのコンソールツールにQRコードの内容を表示します。以下のGIF画像では、SlackにもQRコードの内容を指定したチャネルに通知しています。前提と想定WordPressである必要は全くないですが、今回はWordPressで構築したWebサイトを使いました。GitHub)ただし、ここで使用したInstascan.jsというライブラリは、いずれ非推奨となるgetUserMedia()を使用しています。当面は動作しますが、将来的にはこちらのライブラリが更新されるのを待つか、もしくは違うライブラリへの切り替えが必要となると思います。私の場合は完全に趣味の範囲の使用のため手っ取り早いInstascan.jsを使用しました。実際、非常に簡単に使うことができました。公式サイトの指示通りにinstascan.min.jsを以下のリリースページからダウンロードします。GitHubあとはinstascan.min.jsを自分のWebサイトのJavascriptのコードを置いているフォルダに置きます。自身のWebサイトのヘッダー部分</head>の直前でinstascan.min.jsを読み込みます。>の後になると思います。?>/assets/js/instascan.min.js"></script></head>あとはInstascan.jsの公式サイトに掲載されているサンプルコードを</body>や</main>タグの直前に設置します。id="preview"></video>がWebカメラが捉えている映像を表示するエリアになります。これだけでQRコードの読み取りが可能になります。試しに、上記のコードを設置したページにアクセスしてみると、以下のようにカメラの使用許可要求が出ると思います。以前にビデオチャットを使用した時に許可した場合は、この要求は出ません。Camera)以外のカメラを接続済でそちらを使用したい場合は、以下のようにプルダウンメニューから選択します。カメラが起動し、カメラにQRコードをかざすと、以下の画像のようにインスペクターツールのコンソールに読み取り結果が表示されます。messageというQRコードを読み取った結果になります。任意の文字列を含むQRコードの作成方法については後述しています。Chromeなどほとんどのブラウザに標準で搭載されています。Firefoxの場合は以下のようにWebページ上で右クリックして「要素の調査」をクリックして起動できます。他のブラウザも同様に右クリックに同じような名前のメニューがあります。インスペクターツールの中にいくつかタブがありますが、コンソールは以下のようにインスペクタという名前の多分隣にあります。読み取ったQRコードの内容をSlackに通知するあとは読み取った内容をSlackに通知するためのコードを追加すれば目的の動作になります。以下のコードが最終形です。</script>任意の文字列を含むQRコードの作成方法ちなみに、任意の文字列を含むQRコードを作成するには、QRコードを生成してくるWebサービスを使うのが便利です。APIを使用しました。APIの使い方は以下のサイトにわかりやすく詳しく書かれているためそちらを参照して頂ければと思います。APIのURLにQRコードのサイズや含めたい情報をくっつけるだけです。http://chart.apis.google.com/chart?cht=qr&chs=[QRコードのサイズ]&chl=[QRコードに含める情報](例)http://chart.apis.google.com/chart?cht=qr&chs=150x150&chl=https://virment.com/まとめ非常に簡単にWebカメラや内蔵カメラをQRコードスキャナーとして使えるようになりました。QRコード自体がかなり色々な応用ができる上、例えば読み取ったQRコードの情報をJavascriptからSlackに通知したりメール送信したりすることもできます。これを使えば、例えば社員証や学生証などにQRコードを印刷し、それを読み取って認証するようなシステムも簡単に作れそうです。リアルタイムに同期するデータベースを使ったWebアプリやモバイルアプリを開発する上で大変強力なFirebaseの設定と実際にWebサイトからデータを追加してみるまでの手順をメモします。コメントをキャンセルメールアドレスが公開されることはありません。virtualiment。