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

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

1 件のコメント:

  1. Thanks for sharing, nice post! Post really provice useful information!

    Giaonhan247 chuyên dịch vụ mua hàng trên ebay việt nam và vận chuyển ship hàng từ mỹ về việt nam uy tín với bảng giá gửi hàng đi mỹ cùng với hướng dẫn chi tiết cách mua hàng trên amazon về VN uy tín.

    返信削除