どうも、まさとらん（@0310lan）です！
今回は、お手持ちのPCに搭載されているカメラや、USB接続のWebカメラなどを「QRコードリーダー」に変えてしまうJavaScriptライブラリのご紹介です！
すでに「QRコード」を読み取るスマホアプリなどが多く存在していますが、何と言っても自分でプログラミングしてオリジナルの「Webリーダー」を開発するのは楽しいです。
プログラムの練習や自由研究の題材にもオススメなので、ぜひ参考にしてみてください！
■「Instascan」とは？
「Instascan」は、PCのカメラにQRコードを読み取らせることで、一般的なリーダーアプリと同じように情報を取得することができるJavaScriptライブラリです。
公式の「サンプルデモ」があるので、まずは実際に試しながらどのようなツールなのか見てみましょう！
以下のURLリンクをPCのブラウザで開いてみてください！
（Chrome, Firefox, Opera, Edge推奨）
すると、カメラの使用を求めるメッセージが表示されるので「許可」をクリックします。
これは、QRコードをカメラで読み取るために必要ですね。
許可をすると、ブラウザ上にカメラの映像が表示されるので「QRコード」をカメラにかざします。印刷されたQRコードやスマホに表示されたものでもOKです。
画面左側に、読み取った情報（URLなど）が瞬時に表示されるのでコピーしておきましょう！
コピーしたURLをブラウザで開くと、そのWebページが表示されました！
（今回は、paiza開発日誌のブログURLをQRコードにしてみました。QRコードの作り方は後述します…）
このように、「Instascan」の読み取り精度・速度はかなり実用的なので、アイデア次第ではIoT開発などにも応用できるかもしれませんね。
■開発の準備をしよう！
それでは、早速JavaScriptでオリジナルの「QRコードリーダー」を開発していきましょう！
まず必要になるのは「instascan.js」ファイルなのですが、これはGitHubからダウンロードできるので先に入手しておきましょう。
上記サイトにある緑色のボタンをクリックすれば、ファイルをまとめてダウンロードできるようになります。
そして、基本的な「index.html」ファイルを次のように作成します。
<!-- index.html --> <!doctype html> <html> <body> <h1>Instascanサンプルデモ</h1> <!-- ここにカメラの映像を表示する --> <video id="preview"></video> <script src="instascan.min.js"></script> <script> //ここにJavaScriptプログラムを書いていく </script> </body> </html>
ポイントは「videoタグ」を挿入している点ですが、ここにカメラの映像が表示されるようになります。
あとは、「instascan.min.js」を読み込んでから、これから記述していくプログラムのコードを書くようにしていきましょう。
■「Instascan」でプログラミングしよう！
さて、ここからは実際に「Instascan」のプログラミング手法を詳しくみていきましょう！
「Instascan」のプログラムは大きく2つの要素に分かれており、1つはQRコードを読み取る「スキャン要素」と、もう1つはカメラ情報を取得する「カメラ要素」です。
まずは「スキャン要素」ですが、これは簡単で次のような構文で初期設定を書くことができます。
new Instascan.Scanner({ video: ビデオタグの要素 });
「Instascan.Scanner()」の引数に、先ほどHTMLに記述したvideoタグの要素を指定するだけでOKです。
他にもオプション設定として、ミラー反転機能やスキャン応答速度の設定など、いくつか用意されています。(詳細はコチラ)
あとは、生成したインスタンスのイベント処理として「scan」を設定し、QRコードの情報を取得するだけです！
scanner.addListener('scan', function ( value ) { //読み取ったQRコードの情報が「value」に格納されている });
もし、QRコードの内容がWebの「URLリンク」であれば、「value」の中にURLが格納されているというわけです。
ここまでのプログラムをまとめるとこうなります！
var videoTag = document.getElementById('preview'); var scanner = new Instascan.Scanner({ video: videoTag }); scanner.addListener('scan', function (value) { console.log( value ); });
次に「カメラ要素」をプログラミングしましょう！
ここでは、PCのカメラ情報を取得してブラウザに映像を表示するという処理を行います。
そこで、まずは利用可能な「カメラデバイス」を取得する処理を次のように記述します。
Instascan.Camera.getCameras()
.then(function ( cameras ) {
//QRコードの読み取り処理
})
.catch(function( err ) {
//エラー処理
});
このように記述することで、現在利用できるカメラがすべて配列データとして「cameras」に格納されます。
例えば、利用可能なカメラが1台しかない場合は、配列データの0番目にデバイス情報が格納されているので「cameras[0]」にアクセスすれば良いわけです。
QRコードの読み取りを開始するには「scanner.start()」の引数に、カメラのデバイス情報を指定すればOKです！
Instascan.Camera.getCameras()
.then(function (cameras) {
if (cameras.length > 0) {
//カメラのデバイス情報を指定して読み取りを開始する
scanner.start( cameras[0] );
}
else {
console.error('カメラが見つかりません！');
}
})
もし利用可能なカメラが無ければ、当然ながら配列にデータは格納されないので、上記のように「IF文」で条件分岐しておくと安心でしょう。
たったこれだけのプログラムですが、「QRコードリーダー」としてのWebアプリはほとんど完成しています！
ここまでの全ソースコードは、以下のリンクから閲覧できるのでぜひ参考にしてみてください！
（上記コードは、読み取った情報を表示する処理を少し付け加えています…）
■「QRコード」を読み取ろう！
それでは、作成した「QRコードリーダー」を実際に使ってみましょう！
…と、その前に「QRコード」を持っていない人のために、簡単に作成できる手順を先にご紹介しておきます。
今回は、WebのURL情報をGoogleのサービスを使って「QRコード」に変換しましょう。
【 Google URL Shortener 】
上記サイトにアクセスしたら、好きなWebページのURLを「入力ボックス」に貼り付けてボタンをクリックします。
次に、設定アイコンから「QR Code」の項目をクリックすれば完成です！
「QRコード」が表示されるので、スマホで写真を撮っておきましょう。
そして、先ほど作成した「QRコードリーダー」をブラウザで開いて、スマホをかざしてみましょう！
見事に「QRコード」の情報を取得できました！
現状は自動的に読み取りを開始する設定になっていますが、「scanner.start()」「scanner.stop()」を利用し、「スタート」「ストップ」ボタンを作って手動でスキャンするようなUIに変更してもいいでしょう。
もしくは、QRコードにフォーカスが当たったとき、そうでないときにイベントを発生させることも可能なので、そのタイミングでボタンを表示するような応用例も有効だと思います。
■JavaScript講座も公開中！動画でプログラミングが学べるレッスン
paizaでは、プログラミング未経験者・初心者向け学習サービス「paizaラーニング」を公開しています。
今回記事の中で使用しているJavaScriptが学べる入門講座をはじめとして、Python、Java、C言語、PHP、Ruby、SQL、HTML/CSSなど、プログラミング初心者でも動画で学べる入門レッスンが多数ございます。プログラミング初心者の方はぜひごらんください！
↓詳しくはこちら
■まとめ
今回は、「Instascan」の基本的なプログラミングについてご紹介しましたが、これだけでもアイデア次第では面白いWebアプリが作れると思います。
現状では、対応しているPCブラウザがChrome, Firefox, Opera, Edgeとなっており、IEには対応していないのでご注意ください。
（Safariに関しては、近いうちに最新verで対応する予定…）
「Instascan」は、プログラミング初心者の方でも手軽に楽しめるうえ、成果物として実用的なツールが作れるのでオススメだと思いますよ！
＜参考＞
「paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。
現在、普段有料公開しているHTML/CSSのレッスンを期間限定で連続無料公開中ですのでぜひごらんください。
そして、paizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。
スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。
