Camera Widgetを使って画像取り込みアプリを作ってみた

#目次
1. はじめに
2. 実装方法
    3. 画面作成
    3. 撮影時の画像データを保存する
    4. 撮影した画像データを取得・表示する
    5. Camera Widgetの便利機能
3. まとめ

#はじめに
今回は、Camera Widgetの利用方法について、
実際の画像取り込みアプリを作りながら説明を行います。

Camera Widgetは、銀行系の本人確認書類取り込みアプリや
在庫の記録をアップロードするためのアプリ、プロフィール写真の設定などに
よく用いられていますので、使い方を参考にして是非活用していただきたいと思います！

#実装方法
今回は、画像を取り込んで、撮影したデバイスの情報や撮影日時を表示するアプリを作成します。

【完成イメージ】
<blockquote class="twitter-tweet"><p lang="und" dir="ltr"><a href="https://t.co/LgrVEHX7db">pic.twitter.com/LgrVEHX7db</a></p>&mdash; Kony (@Kony12763790) <a href="https://twitter.com/Kony12763790/status/1263114209925017600?ref_src=twsrc%5Etfw">May 20, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

##画面作成
では早速画面の作成を行います。

今回は、画像をアップロードするための画面と撮影した情報を表示する画面の2画面を作成しました。

frmCamera（画像をアップロードするための画面）
<img width="284" alt="スクリーンショット 2020-05-20 15.48.27.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/1a771162-2842-79fc-d2a1-82e7a68f9c3e.png">

frmConfirm（撮影した情報を表示する画面）
<img width="283" alt="スクリーンショット 2020-05-20 15.48.39.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/e4fdd3d9-c6e3-67a9-f263-164ebd1b97a7.png">

画像をアップロードするために、早速CameraWidgetの配置を行います。
<img width="1140" alt="スクリーンショット 2020-05-20 23.45.27.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/b27209ef-837b-994c-1d2e-09b5053b95c5.png">

Widgetのデザインは自由に変更できますので、お好みのデザインに変更してください。
<img width="253" alt="スクリーンショット 2020-05-20 15.50.28.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/38f751e4-8d5f-8711-095a-33a598916093.png">

たったのこれだけで、CameraWidgetをタップすると、カメラの起動が可能になります！

##撮影時の画像データを保存する
今回は、カメラ起動後に撮影した画像の情報を保存したいので、
CameraWidgetを選択した状態でアクションメニューを開き、
`onCapture`アクションを使ってアクションを追加していきます。

`onCapture`アクションは、写真を撮影したときに呼び出されるアクションです。
その他にもこのようなアクションがあるので、活用してみてください。

<img width="386" alt="スクリーンショット 2020-05-20 23.46.45.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/7c0cded5-19d7-a52e-87eb-165c4c1679e9.png">

| アクション名|　内容 |   
|:-----------------|:------------------|
|onCapture|ユーザーが写真を撮影すると呼び出されます|
|onCaptureFailed|ユーザーがアクセス許可のポップアップで[許可しない]をタップした場合、およびiPhoneの設定でカメラのプライバシーがオフになっているときに呼び出されます|
|onFailure|CameraWidgetを使用してエラーが発生すると呼び出されます。|
|onImageSaveFailed|画像をフォトアルバムに保存できないとき、またはデータ保存エラーの場合に呼び出されます。|

では、frmCameraControllerに`onCapture`アクションを設定していきます。

```javascript:frmCameraController.js
define({ 
//カメラ撮影時に端末情報と撮影日時を保存
  onCapture : function(){
    //撮影日時を取得 
    this.getDate(); 
    //撮影時のデバイス情報と撮影日時を格納
    var imgInfo = {
      "img" : this.view.camera.base64,
      "deviceName" : kony.os.deviceInfo().name,
      "deviceModel" : kony.os.deviceInfo().model,
      "deviceVersion" : kony.os.deviceInfo().version,
      "datetime" : this.getDate()
    };
    //取得したデータをローカルストレージに保存
    kony.store.setItem("imgInfo",imgInfo);
  },

//カメラ撮影日時を取得
  getDate : function(){
    var now = new Date();
    var year = now.getFullYear();
    var month = now.getMonth() + 1;
    var day = now.getDate();
    var hour = now.getHours();
    var minute = now.getMinutes();
    var second = now.getSeconds();
    if (month.toString().length == 1) {
      month = '0' + month;
    }
    if (day.toString().length == 1) {
      day = '0' + day;
    }
    if (hour.toString().length == 1) {
      hour = '0' + hour;
    }
    if (minute.toString().length == 1) {
      minute = '0' + minute;
    }
    if (second.toString().length == 1) {
      second = '0' + second;
    }
    var dateTime = year.toString() + "年" + month.toString() + "月" + day.toString() + "日" + hour.toString() + "時" + minute.toString() + "分" + second.toString()+ "秒";
    return dateTime;
  }

 });
```

それぞれ説明していきます。

`"img" : this.view.camera.base64,`
上記のように、
this.view.camera.base64や
this.view.camera.rawByteと記載することによって、
撮影したデータを取得することができます。

その他、いくつかKonyの便利なAPIを使っているので、簡単に説明します。

`kony.os.deviceInfo()`：
アプリを利用しているデバイスの情報を取得することができます。
利用している端末によってアプリの操作を変えたり、マーケティングのために利用者のデバイス情報を取得するのに役立ちます。
**Konyはマルチデバイスでのアプリ開発が可能なので、
iOS、Androidにかかわらずデバイスの情報を取得することができるのが良い点ですね:ok_hand_tone1:**

このメソッドを使って取得できる代表的なものを紹介しますので、適宜利用してみてください。

| 値名 |　内容 |   
|:-----------------|:------------------|
| screenWidth |デバイスの向きを判別して、デバイスの画面幅を取得|
| screenHeight |デバイスの向きを判断して、デバイスの画面高さを取得|
| name |iPhone、iPad、Windows Phone、SPAなど端末の名前を取得|
| model |iPhone XR等端末のモデル名を取得|
| version |デバイスのOSバージョンを取得|
| hasforcetouchsupport |デバイスがForce Touchをサポートしているか特定する。サポートしている場合はtrueとなる|
| hasCamera |デバイスにカメラを搭載されているかを特定する。カメラが利用可能な場合は、trueとなる|

参考：https://docs.kony.com/konylibrary/visualizer/viz_api_dev_guide/content/kony.os_objects_deviceinfo.htm

`kony.store.setItem`
こちらを利用することによって、オフラインの場合でもデータを保存することができます。
kony.store.setItemは、文字通りデータを保存するための機能ですが、その他にもデータを削除・取得する機能もあります。

| 値名 |　内容 |   
|:-----------------|:------------------|
| kony.store.clear |保存されたデータのキーと値を空にすることができます。キーと値のペアがない場合、何も起きません|
| kony.store.getItem |保存されたデータのキーを指定することで、データを取得することができます。※frmConfirmで使います。|
| kony.store.removeItem |キーを指定することで、保存されたデータを削除することができます。該当のキーがない場合は何も起きません。|
| kony.store.key |保存されているデータのキーを取得します|
| kony.store.setItem |キーと値を設定することで、データを保存することができます|
参考：https://docs.kony.com/konylibrary/visualizer/viz_api_dev_guide/content/data_store_library.htm

Controllerでアクションの作成が完了したら、
`onCapture`のアクションメニューで`Invoke Function`を選択し、
`onCapture`を設定することを忘れないようにしましょう。
<img width="599" alt="スクリーンショット 2020-05-21 9.24.30.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/4fb1d1de-89b4-4a05-55f2-b21f42cccf6b.png">


ここまでで、写真を撮影したデバイス情報と撮影日時が取得できました。
次に、保存したデータを取得して表示を行います。

##撮影した画像データを取得・表示する
次に`frmConfirm`で取得したデータを表示します。
コードは以下のように作成しました。

```javascript:frmConfirm.js
define({   
  //保存したデータを取得して表示
  postShow : function(){
    var imgInfo = kony.store.getItem("imgInfo");
    this.view.imgPhoto.base64 = imgInfo.img;
    this.view.txtDeviceName.text = imgInfo.deviceName;
    this.view.txtDeviceModel.text = imgInfo.deviceModel;
    this.view.txtDeviceVersion.text = imgInfo.deviceVersion;
    this.view.txtDatetime.text = imgInfo.datetime;

    kony.print(JSON.stringify(imgInfo));
  }
});
```

`postShow`で、`kony.store.getItem`を利用して保存したデータを取得します。
そして取得したデータを用意したWidgetにそれぞれ入れていきます。

画像データは、末尾にbase64
テキストデータは、末尾にtextをつけることを忘れないようにしてください。
**これを付けないと、データが型を判別できずうまく表示することができません。**

**:frowning2:アプリBuild時にデータが入ってこない場合や、エラーが発生してしまう場合**
`imgInfo`に入っている情報を確認するために、
上記のコードのように`kony.print()`を使うことで、デバッグ時にデータの中身を確認することができます。
エラーの切り分け時に活躍しますので、エラーで詰まった場合は活用してみてください。

こちらも同様にControllerでコードの作成が終わったら、
postShowのアクションメニューでpostShowを設定してください。

ここまでで、データの表示も完了しました。

完成アプリをみてみましょう！
<blockquote class="twitter-tweet"><p lang="und" dir="ltr"><a href="https://t.co/LgrVEHX7db">pic.twitter.com/LgrVEHX7db</a></p>&mdash; Kony (@Kony12763790) <a href="https://twitter.com/Kony12763790/status/1263114209925017600?ref_src=twsrc%5Etfw">May 20, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
「写真を撮る」ボタンでカメラの起動、
「確認する」ボタンで次の画面に遷移して写真の情報が表示できていますね！

##Camera Widgetの便利機能
上記で紹介したもの以外にもCamera Widgetには、GUIで設定できるものが色々あります。

<img width="371" alt="スクリーンショット 2020-05-21 10.01.02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/146bf8f4-7523-8b56-bbb8-9380f87350da.png">

代表的な機能を紹介しますので、アプリの用途によって活用してみてくださいね！

| 機能       |     内容 |   
|:-----------------|:-----------------|
| accessMode    |   キャプチャした画像の保存方法を指定します|
| Capture Mode   |カメラモードかビデオモードを選択できます  |
| Camera Source  |カメラを起動した時に、前面カメラを出すか背面カメラを出すかを設定できます。 |
| Camera Options  |カメラを起動した時の、フラッシュ機能について設定ができます。 |

↓Camera Optionsを開いた時の画面
ここでデバイスによって、フラッシュをOnにするかOffにするかの設定を行うことができます。
<img width="473" alt="スクリーンショット 2020-05-21 10.21.25.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/eb25e317-2030-0286-1485-c7643fdc9be3.png">

#まとめ
Camera Widgetを利用したアプリの作成を通して、
Widgetの説明以外にもアプリBuild時に便利な機能の説明やメソッドの説明を行いました。

どれも簡単に使えるもので、今回作成したアプリも30分程で完成しました！
Konyの標準機能を使うだけで、高速開発ができるので是非使ってみてくださいね:wave_tone1:

#参考
Camera Widgetの説明: 
https://docs.kony.com/konylibrary/visualizer/viz_widget_prog_guide/Content/Camera.htm
deviceinfoの説明： 
https://docs.kony.com/konylibrary/visualizer/viz_api_dev_guide/content/kony.os_objects_deviceinfo.htm
kony.storeの説明： 
https://docs.kony.com/konylibrary/visualizer/viz_api_dev_guide/content/data_store_library.htm