いまの時代、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