Symfoware

Symfowareについての考察blog

Cordova(コルドバ)チュートリアル14 カメラAPIの利用

Cordova(コルドバ)チュートリアル13 連絡先APIの利用
こちらの続きです。

動作は確認できませんでしたが、連絡先情報を取得する方法を学びました。

次のステップに進みます。
Module 14: Using the Camera API



Module 14: Using the Camera API



カメラAPIの使い方を学びます。
従業員が写真を取り、撮影された内容を画面に表示します。



1. カメラAPIを使用するためにプラグインを追加します。


$ cordova plugin add org.apache.cordova.camera




2. index.htmlのemployee-tplにカメラを起動して写真を表示する領域を定義


  1. <li class="table-view-cell media">
  2. <a hre="#" class="push-right change-pic-btn">
  3.      <span class="media-object pull-left"></span>
  4.      <div class="media-body">
  5.          Change Picture
  6.      </div>
  7. </a>
  8. </li>






3. EmployeeView.jsでクリックイベントを受け取る処理を追加


  1. this.$el.on('click', '.change-pic-btn', this.changePicture);





4. 同じくEmployeeView.jsにカメラを起動する処理を追加


  1. this.changePicture = function(event) {
  2. event.preventDefault();
  3. if (!navigator.camera) {
  4.      alert("Camera API not supported", "Error");
  5.      return;
  6. }
  7. var options = { quality: 50,
  8.                      destinationType: Camera.DestinationType.DATA_URL,
  9.                      sourceType: 1,     // 0:Photo Library, 1=Camera, 2=Saved Album
  10.                      encodingType: 0     // 0=JPG 1=PNG
  11.                  };
  12. navigator.camera.getPicture(
  13.      function(imgData) {
  14.          $('.media-object', this.$el).attr('src', "data:image/jpeg;base64,"+imgData);
  15.      },
  16.      function() {
  17.          alert('Error taking picture', 'Error');
  18.      },
  19.      options);
  20. return false;
  21. };





index.htmlはこうなります。


  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  6.     
  7.     <link href="assets/ratchet/css/ratchet.css" rel="stylesheet">
  8.     <link href="assets/css/styles.css" rel="stylesheet">
  9.     <link href="assets/css/pageslider.css" rel="stylesheet">
  10. </head>
  11. <body>
  12. <script id="home-tpl" type="text/template">
  13.     <header class="bar bar-nav">
  14.         <h1 class="title">Directory</h1>
  15.     </header>
  16.     <div class="bar bar-standard bar-header-secondary">
  17.         <input class='search-key' type="search"/>
  18.     </div>
  19.     <div class="content"></div>
  20. </script>
  21. <script id="employee-list-tpl" type="text/template">
  22.     <ul class="table-view">
  23.         {{#each this}}
  24.         <li class="table-view-cell media">
  25.          <a href="#employees/{{ id }}">
  26.              <img class="media-object pull-left" src="assets/pics/{{pic}}">
  27.              <div class="media-body">
  28.                  {{firstName}} {{lastName}}
  29.                  <p>{{title}}</p>
  30.              </div>
  31.          </a>
  32.         </li>
  33.         {{/each}}
  34.     </ul>
  35. </script>
  36. <!-- 社員詳細表示 -->
  37. <script id="employee-tpl" type="text/template">
  38. <header class="bar bar-nav">
  39.      <a class="btn btn-link btn-nav pull-left" href="#">
  40.          <span class="icon icon-left-nav"></span>
  41.      </a>
  42.      <h1 class="title">Employee</h1>
  43. </header>
  44. <div class="content">
  45.      <div class="card">
  46.          <ul class="table-view">
  47.              <li class="table-view-cell media">
  48.                  <img class="media-object pull-left emp-pic" src="assets/pics/{{pic}}">
  49.                  <div class="media-body">
  50.                      {{ firstName }} {{ lastName }}
  51.                      <p>{{ title }}</p>
  52.                  </div>
  53.              </li>
  54.              <li class="table-view-cell media">
  55.                  <a href="tel:{{ officePhone }}" class="push-right">
  56.                      <span class="media-object pull-left icon icon-call"></span>
  57.                      <div class="media-body">
  58.                          Call Office
  59.                          <p>{{ officePhone }}</p>
  60.                      </div>
  61.                  </a>
  62.              </li>
  63.              <li class="table-view-cell media">
  64.                  <a href="tel:{{ cellPhone }}" class="push-right">
  65.                      <span class="media-object pull-left icon icon-call"></span>
  66.                      <div class="media-body">
  67.                          Call Cell
  68.                          <p>{{ cellPhone }}</p>
  69.                      </div>
  70.                  </a>
  71.              </li>
  72.              <li class="table-view-cell media">
  73.                  <a href="sms:{{ cellPhone }}" class="push-right">
  74.                      <span class="media-object pull-left icon icon-sms"></span>
  75.                      <div class="media-body">
  76.                          SMS
  77.                          <p>{{ cellPhone }}</p>
  78.                      </div>
  79.                  </a>
  80.              </li>
  81.              <li class="table-view-cell media">
  82.                  <a href="mailto:{{ email }}" class="push-right">
  83.                      <span class="media-object pull-left icon icon-mail"></span>
  84.                      <div class="media-body">
  85.                          Email
  86.                          <p>{{ email }}</p>
  87.                      </div>
  88.                  </a>
  89.              </li>
  90.              <li class="table-view-cell media">
  91.                  <a hre="#" class="push-right add-location-btn">
  92.                      <span class="media-object pull-left"></span>
  93.                      <div class="media-body">
  94.                          Add location
  95.                      </div>
  96.                  </a>
  97.              </li>
  98.              <li class="table-view-cell media">
  99.                  <a hre="#" class="push-right add-contact-btn">
  100.                      <span class="media-object pull-left"></span>
  101.                      <div class="media-body">
  102.                          Add to contacts
  103.                      </div>
  104.                  </a>
  105.              </li>
  106. <!-- 2. カメラ領域追加 -->
  107.              <li class="table-view-cell media">
  108.                  <a hre="#" class="push-right change-pic-btn">
  109.                      <span class="media-object pull-left"></span>
  110.                      <div class="media-body">
  111.                          Change Picture
  112.                      </div>
  113.                  </a>
  114.              </li>
  115.          </ul>
  116.      </div>
  117. </div>
  118. </script>
  119. <script src="cordova.js"></script>
  120. <script src="lib/fastclick.js"></script>
  121. <script src="lib/jquery.js"></script>
  122. <script src="lib/router.js"></script>
  123. <script src="lib/pageslider.js"></script>
  124. <script src="js/services/memory/EmployeeService.js"></script>
  125. <script src="lib/handlebars.js"></script>
  126. <script src="js/EmployeeListView.js"></script>
  127. <script src="js/HomeView.js"></script>
  128. <script src="js/EmployeeView.js"></script>
  129. <script src="js/app.js"></script>
  130. </body>
  131. </html>





EmployeeView.jsはこんな感じ


  1. var EmployeeView = function(employee) {
  2.     
  3.     
  4.     // 4. カメラ処理
  5.     this.changePicture = function(event) {
  6.      event.preventDefault();
  7.      if (!navigator.camera) {
  8.          alert("Camera API not supported", "Error");
  9.          return;
  10.      }
  11.      var options = { quality: 50,
  12.                          destinationType: Camera.DestinationType.DATA_URL,
  13.                          sourceType: 1,     // 0:Photo Library, 1=Camera, 2=Saved Album
  14.                          encodingType: 0     // 0=JPG 1=PNG
  15.                      };
  16.      navigator.camera.getPicture(
  17.          function(imgData) {
  18.              $('.media-object', this.$el).attr('src', "data:image/jpeg;base64,"+imgData);
  19.          },
  20.          function() {
  21.              alert('Error taking picture', 'Error');
  22.          },
  23.          options);
  24.      return false;
  25.     };
  26.     
  27.     this.addToContacts = function(event) {
  28.         event.preventDefault();
  29.         console.log('addToContacts');
  30.         if (!navigator.contacts) {
  31.             alert("Contacts API not supported", "Error");
  32.             return;
  33.         }
  34.         var contact = navigator.contacts.create();
  35.         contact.name = {givenName: employee.firstName, familyName: employee.lastName};
  36.         var phoneNumbers = [];
  37.         phoneNumbers[0] = new ContactField('work', employee.officePhone, false);
  38.         phoneNumbers[1] = new ContactField('mobile', employee.cellPhone, true);
  39.         contact.phoneNumbers = phoneNumbers;
  40.         contact.save();
  41.         return false;
  42.     };
  43.     
  44.     this.addLocation = function(event) {
  45.      event.preventDefault();
  46.      navigator.geolocation.getCurrentPosition(
  47.          function(position) {
  48.              alert(position.coords.latitude + ',' + position.coords.longitude);
  49.          },
  50.          function() {
  51.              alert('Error getting location');
  52.          });
  53.      return false;
  54.     };
  55. this.initialize = function() {
  56.      this.$el = $('<div/>');
  57.      this.$el.on('click', '.add-location-btn', this.addLocation);
  58.      this.$el.on('click', '.add-contact-btn', this.addToContacts);
  59.     
  60.      // 3. カメラ処理
  61.      this.$el.on('click', '.change-pic-btn', this.changePicture);
  62. };
  63. this.render = function() {
  64.      this.$el.html(this.template(employee));
  65.      return this;
  66. };
  67. this.initialize();
  68. }






エミュレーターで実行する前に設定を変更しておきます。

Back CameraをEmulatedに。
SD Cardに100MB割り当てておきます。

567_01.png


エミュレーターで実行して、Change Pictureをクリック。

567_02.png


カメラが起動しました。青いボタンがシャッターです。

567_03.png


撮影出来ました。チェックマークで確定です。

567_04.png


カメラは起動したのですが、画面描画は更新されず。
エミュレーターだからと信じることにしました。



関連記事

テーマ:プログラミング - ジャンル:コンピュータ

  1. 2015/02/22(日) 19:27:00|
  2. 備忘録
  3. | トラックバック:0
  4. | コメント:0
  5. | 編集
<<Cordova ビルド時、エミュレーターの再起動は不要 | ホーム | Cordova(コルドバ)チュートリアル13 連絡先APIの利用>>

コメント

コメントの投稿


管理者にだけ表示を許可する

トラックバック

トラックバック URL
http://symfoware.blog68.fc2.com/tb.php/1652-22421018
この記事にトラックバックする(FC2ブログユーザー)