Cordovaのチュートリアルをやってみる 第十三回

# 使用したもの(環境)
 1. cordova
 1. visualStudioCode
 1. windows10
 1. Android
 

---

# チュートリアルを訳しながらやってみる
チュートリアルのページは下記。

[Module 14: Using the Camera API](http://ccoenraets.github.io/cordova-tutorial/camera-api.html)

前回のチュートリアル。

[Cordovaのチュートリアルをやってみる 第十二回](https://qiita.com/tokky_se/items/17ecaefeb5475c342782)

環境構築については別途まとめてあるので下記参照。

[cordova&VSCodeで環境を構築するまでの右往左往メモ。](https://qiita.com/tokky_se/items/346429d234c91bece11d)

---


# Module 14: Using the Camera API
In this section, you use the Cordova Camera API to provide the user with the ability to take a picture of an employee, and use that picture as the employee's picture in the application. 
このセクションでは、従業員の写真を撮りアプリケーション内の従業員の写真として使える機能を提供する、CordovaのCamera APIを使用していましょう。

We do not persist that picture in this sample application.
このサンプルアプリケーションでは、この写真をそのまま使用していません。

以下のコードは、アプリケーションをCordovaアプリケーションとしてデバイス上で実行している場合にのみ動作します。
つまり前回と同じで、デスクトップ上のブラウザでテストすることはできません。

1\. カメラプラグインをプロジェクトに追加します。

```console
cordova plugin add cordova-plugin-camera
```
2\. index.htmlの employeeテンプレートに下記を追加します。

```html 
<li class="table-view-cell media">
  <a hre="#" class="push-right change-pic-btn">
      <span class="media-object pull-left"></span>
      <div class="media-body">
          Change Picture
      </div>
  </a>
</li>
```

3\. EmployeeViewのinitializeメソッドに、下記コードを追加します。

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

4\. EmployeeViewでchangePictureイベントハンドラを定義します。

```js
this.changePicture = function(event) {
  event.preventDefault();
  if (!navigator.camera) {
      alert("Camera API not supported", "Error");
      return;
  }
  var options =   {   quality: 50,
                      destinationType: Camera.DestinationType.DATA_URL,
                      sourceType: 1,      // 0:Photo Library, 1=Camera, 2=Saved Album
                      encodingType: 0     // 0=JPG 1=PNG
                  };

  navigator.camera.getPicture(
      function(imgData) {
          $('.media-object', this.$el).attr('src', "data:image/jpeg;base64,"+imgData);
      },
      function() {
          alert('Error taking picture', 'Error');
      },
      options);

  return false;
};
```

テスト前に解説を。  
詳しいことはreadmeを読めばわかると思うのでざっくりだけ解説します。  
https://github.com/apache/cordova-plugin-camera

チュートリアルでは、  
camera.getPicture(successCallback, errorCallback, options)  
を使用しています。

```js
quality: 50, // 保存されたイメージの品質。0〜100の範囲で表されます。100は通常、ファイル圧縮による損失なしでフル解像度です。
destinationType: Camera.DestinationType.DATA_URL, // 戻り値の形式を選択します。この場合はbase64でエンコードされた文字列で返却されます。
sourceType: 1, // 画像のソース元を選択します。コード中のコメントにもある通り、1はカメラです。
encodingType: 0 // 返される画像ファイルのエンコーディングを選択します。コード中のコメントにもある通り、0はJPGです。
```

ほかパラメータの解説は、下記にありますので、気になったら読んでみてください。  
https://github.com/apache/cordova-plugin-camera#module_camera.CameraOptions

successCallbackとerrorCallbackはそのまま処理成功時と処理失敗時のコールバックファンクションを渡します。  
チュートリアル中のコードでは、成功した場合は  
changePictureのイベントが設定されたmedia-objectクラスを持つ要素のsrc属性に"data:image/jpeg;base64,"+imgDataを設定します。(imgDataはカメラから取得した画像のURL)  
エラーの場合はアラートを表示します。

5\. アプリケーションをテストしてみましょう。
![test.gif](https://qiita-image-store.s3.amazonaws.com/0/196422/60c1ae0b-7c79-65d8-0721-4b6dc8509731.gif)

人ではないですが、最近のお気に入りのカップを撮影してみました。

ただし、変更を保存する機能はないので、最初の画面に戻ると画像は戻ってしまいます。


---

# 参考URL

[Module 14: Using the Camera API](http://ccoenraets.github.io/cordova-tutorial/camera-api.html)

[Cordovaのチュートリアルをやってみる 第十二回](https://qiita.com/tokky_se/items/17ecaefeb5475c342782)

[cordova&VSCodeで環境を構築するまでの右往左往メモ。](https://qiita.com/tokky_se/items/346429d234c91bece11d)