あなたに次の選択肢を用意するサイト
Thoth Coworker
~ プログラミングの次++ ~
For
新社会人 / 新学生 / 新院生 / 新研究者
カテゴリ
WebサイトにQRコードを載せる
Facebookシェア Twitterツイート LINEで送る
Links
ThothChildren
Thoth VisAlgo
Thoth YOSO
Top Views
New
Top
Web
Webサイトに小機能を追加していく
WebサイトにQRコードを載せる
P
ポイント
WebサイトにQRコードを載せる
とりあえずWebサイトにQRコードを表示するための記事
  • Point 1
    WebサイトでQRコードを表示
    WebサイトのリンクなどをQRコードにしたい場面などがあります.どんなQRコードスキャナもQRコードを読み込めます.
  • Point 2
    WebブラウザでQRコード生成
    どこで作られても同じ文字列からは同じQRコードが作られます.また作るのに計算資源は必要ないためブラウザで作成することができます
  • Point 3
    qrcode.jsを使用
    WebブラウザでQRコードを生成できるqrcode.jsを使用します.他にもこういったライブラリはありますが、どれも同程度の使いやすさです.
P
ステップ概要
WebサイトにQRコードを載せる
Step
1
とりあえずWebサイトにQRコードを載せる
あらかじめ決めた文字列のQRコードをWebブラウザで生成する.
Step
2
Webブラウザで文字列変えてそのQRコードを生成
サイトの文字入力の値に応じてQRコードを何度も生成します.
Step
3
QRコードについて
QRコードの特性について簡単に解説します.
Step
1
とりあえずWebサイトにQRコードを載せる
今回はqrcode.jsを用いてQRコードをブラウザで生成して表示するプログラムを作成します.
まずはこれから用意するディレクトリ構成です.
今回Webサーバは立ち上げずに行います.
Folder : QRコードを生成して表示するためのフォルダ構成
index.html
qrcode.min.js
qrcode.min.jsについては下記で取得して保存してください.
qrcode.min.jsのGithubソース
リンク
それでは今回使うindex.htmlのソースです.
下記をメモ帳でindex.htmlとして保存してください.
HTML : 予め決まった文字列のQRコードをその場で生成して表示するソース
index.html
    
      <html>
	<head>
	  <script src="./qrcode.min.js"></script>
	</head>
	<body>
	  <div id="qrcode"></div>
	  <script type="text/javascript">
	    new QRCode(document.getElementById("qrcode"), "http://thothchildren.com");
	  </script>
	</body>
      </html>
上記ができたら、index.htmlをWebブラウザにドラッグアンドドロップしてみてください.
QRコードが表示されます.
index.htmlをドラッグ&ドロップしたときの様子
QRコードをスキャンできるアプリで開くとhttp://thothchildren.comと出てくるかと思います.
index.htmlをドラッグ&ドロップしたときの様子

index.htmlの解説

非常にわかりやすく短いコードですので、解説は不要かと思います.
QRCodeにQRコードを表示して欲しい領域のエレメントと、QRコードにして欲しい文字列を渡します.
QRコードが生成されると指定された箇所にcanvas要素が挿入されます.
Step
2
Webブラウザで文字列変えてそのQRコードを生成
それでは次に文字列を変えてはその場でQRコードを生成して更新するコードを作成しましょう.
index.htmlと同じフォルダにindex-edit.htmlとして保存してください.
HTML : 編集できる文字列のQRコードをその場で生成して表示するソース
index-edit.html
    
<html>
  <head>
    <script src="./qrcode.min.js"></script>
  </head>
  <body>
    <div id="qrcode"></div>
    <input onchange="updateQRCode(this)" value="http://thothchildren.com"></input>
    <script>
      var initQRCode = new QRCode(document.getElementById("qrcode"), "http://thothchildren.com");

      function updateQRCode(e){
	  var newurlstr = e.value;
	  document.getElementById("qrcode").innerHTML = "";
	  new QRCode(document.getElementById("qrcode"), newurlstr);
      }
      
    </script>
  </body>
</html>
index-edit.htmlをWebブラウザにドラッグ&ドロップしてください.
下記のようになり、一番下にテキストボックスができます
その文字列を編集してEnterを押すと画像が変わり、スキャンすると適切にQRコードも変更されていることがわかるかと思います.
index-edit.htmlをドラッグ&ドロップしたときの様子

index-edit.htmlの解説

先ほどと異なり、関数を使っています.
inputタグの中で変更があった場合にonchangeでupdateQRCode関数を呼ぶようにしました
    
      function updateQRCode(e){
	  var newurlstr = e.value;
	  document.getElementById("qrcode").innerHTML = "";
	  new QRCode(document.getElementById("qrcode"), newurlstr);
      }
この関数では、初めに新しく更新された文字列をnewurlstrに受け取り、すでにqrcodeをIDに持つdivタグの中身を削除します.
その後はじめにQRコードを作った時と同じようにnewurlstrを渡してQRCodeをnewして生成しなおします.
Step
3
QRコードについて
ここでは簡単にQRコードについてまとめておきます.
ポイント : QRコードは
  • どんな文字列でもコードにしてくれる
  • 文字列が長いとよりマスの多いQRコードになる
  • 文字列が一緒ならどこで作っても同じコード
  • どのQRコードリーダでも同じように読める
  • 一部が読めなくても読み取れる
上記がQRコードの特徴です.
WebサーバでQRコードを作ってブラウザに送るとデータの転送量も基本的に増えるので、ブラウザ側で作った方が減らせます.また、処理は軽いですが可能な限りサーバーでやらないですむのならブラウザ側で済ませたいです.文字列はどのようにしても同じ結果が得られますし、またどの端末で読み取っても同じ規格なので読み取れます.文字列の長さが変わっても対応ですが、見た目が少しずつ複雑になっていきます.
一部が読み取れなくともコードが読み取れるのもQRコードの強みです.
Done