いまの時代、JavaScript側でQRコードを生成できるんですね

ということで、試してみた。手を抜くために、angular-qr というのを使いました。

結果(デモ)

• 今回、作ったものの ⇒ http://hkusu.github.io/AngularJS_QR_demo/
  • 英数字を入力すると、リアルタイムでQRコードが生成されます。

導入手順

前提

• 開発環境 は Mac OS X (Mavericks) です。
• AnuglarJS の環境構築は、Yeoman と generator-angular を使いました。
  • 雛型を作るまでの手順は、前に投稿したこちらと同じ感じ。
    • AngularJS の Yeoman雛型に Application Cache を導入

手順(AngularJSの雛型の生成後)

• Bower で angular-qr をインストール

   $ bower install angular-qr --save
  

• $ grunt bower-install とするか、もしくは index.html に下記を追記します。

  app/index.html

   <script src="bower_components/qrcode/lib/qrcode.js"></script>
   <script src="bower_components/angular-qr/src/angular-qr.js"></script>
  

• AngularJS に組み込み

  app/scripts/app.js

   'use strict';
   
   angular.module('qrTestApp', [
     'ngCookies',
     'ngResource',
     'ngSanitize',
     'ngRoute',
   +  'ja.qr'
   ])
   〜
  

• この状態で使えるようになっているはずなので、後は Controller と View を書きます。

  app/scripts/controllers/main.js

   'use strict';
   
   angular.module('qrTestApp')
     .controller('MainCtrl', ['$scope', function ($scope) {
   
       $scope.string = '';
   
     }]);
  

  app/views/main.html

   <div ng-controller="MainCtrl">
       <div class="header">
         <h3 class="text-muted">QRコードのテスト</h3>
       </div>
       <p>
           <input type="text" placeholder="http:// ※日本語はNG" size="30" ng-model="string">
       </p>
       <br>
       <p>
           <qr text="string" size="150"></qr>
       </p>
   </div>
  

• 以上！

ほか

• 今回のソースはこちらに置いておきます。
  • https://github.com/hkusu/AngularJS_QR_demo