2015年12月24日木曜日

QRコードを作成 - qrcode.js -

こんにちは。上河佑里恵です。
寒いですので、体を冷やさないようにショウガを食べるようにしています。
体が温まりますので、おすすめです。


本日は、フロントエンド技術(HTML、CSS、Javascript)を使用し、
QRコードを作成する方法についてご紹介させていただきます。


QRコードはシンプルな機能ですが、
情報を公開するのにとても役立っています。
店舗情報や整理券など、すぐに簡単に情報をえ入手たい場面は多くあります。
簡単に作成することができるようになったのも、普及した要因の一つだと思います。


今回ご紹介するのは、qrcode.jsです。
qrcode.jsは、簡単にQRコードを生成することができる、
JavaScriptプラグインです。

qrcode.js

http://davidshimjs.github.io/qrcodejs/

WebStorm

https://www.jetbrains.com/webstorm/

※上記リンクは別のウィンドウで開きます。


WebStormは、エディタ、バージョン管理、デバッグを行う、IDEです。
JavaScriptやHTML5の開発に適しています。

WebStormでプロジェクトをスタートします。

WebStorm Project


ダウンロードしたqrcode.jsをWebStormのプロジェクトに取り込みます。

HTMLページに<script>タグでqrcode.jsを宣言します。

qrcode.js
qrcode.js含む、3つのファイルを用意しました。
WepStorm

試してみます。
【実行環境】
OS: Windows10
ブラウザ: Chrome

空欄に所定の情報を入力して、「QRコード作成」ボタンを押下します。

QRコード作成画面

(1) 普通に(正しく)入力
正しく入力
(2) 空欄あり
空欄あり

(3) 特異な値として、環境依存文字あり
  はしごだか(髙)と、たつさき(﨑)を記載しました。

特異な値あり
今回はデフォルト形式でQRコードを表示しています。
サイズ: 256px * 256px
容量 : 9.05KB
HTMLやCSSなどの、ほかのフロントエンド技術と組み合わせることにより、
QRコードの色や大きさを自由に変えることもできます。

次に、作成したQRコードを読んでみます。
「QRコードリーダー for iPhone」でQRコードを読んだ画面を掲載します。
【実行ツール】
QRコードリーダー: Takashi Wada「QRコードリーダー for iPhone」
            https://appsto.re/jp/wzV5I.i
               ※上記リンクは別のウィンドウで開きます。

(1) 正しく入力
正しく入力

(2) 空欄あり
空欄あり


(3) 特異な値(環境依存文字)あり
特異な値(環境依存文字)あり

全パターンとも、入力したとおりに文字を表示しています。

ちなみに、「QRコードリーダー for iPhone」の画面の機能については
いたってシンプルで、難なく操作することができました。

左下のボタンで、
QRコードを読み取る画面に戻ります。
さらに、読み取り画面から
「スキャン履歴」を閲覧・削除できます。

右下のボタンで、
「メールで送る」
SMSで送る」
「読み取り内容をコピーする」
の3つから、読み取った内容を共有する方法を選択します。

デバイスからメールで送信した読み取り内容は、
一般的なテキスト形式でPCに送られてきました。

(1) 普通に(正しく)入力
-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-
NAME :QRコード
NEARS:大森
PHONE:1234567890
EMAIL:qrqrqr@qrqrqr.code
URL  :qrcode/jquery.sugudekiru
-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-

(2) 空欄あり
-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-
NAME :
NEARS:大森
PHONE:123123123
EMAIL:
URL  :qrcode/jquery.queryq
-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-

(3) 特異な値(環境依存文字)あり
-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-
NAME :髙﨑
NEARS:高崎
PHONE:222333444
EMAIL:gumma/gumma.gumma
URL  :gummma/gummma.gunma
-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-


QRコードは新しい技術ではありませんが、
IoT、特にウェアラブルデバイスのような、身に着けて手軽に情報を取り扱いたいものに
活用できるのではないでしょうか。


参考文献:

jquery.qrcode.js
http://jeromeetienne.github.io/jquery-qrcode/

日経ソフトウェア 2015年9月号
http://www.amazon.co.jp/%E6%97%A5%E7%B5%8C%E3%82%BD%E3%83%95%E3%83%88%E3%82%A6%E3%82%A8%E3%82%A2-2015%E5%B9%B4-09-%E6%9C%88%E5%8F%B7/dp/B00ZD9E4DC

※上記リンクは別のウィンドウで開きます。

0 件のコメント:

コメントを投稿