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

#目次

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

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

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

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

【完成イメージ】

pic.twitter.com/LgrVEHX7db

— Kony (@Kony12763790) May 20, 2020

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

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

frmCamera（画像をアップロードするための画面）

frmConfirm（撮影した情報を表示する画面）

画像をアップロードするために、早速CameraWidgetの配置を行います。

Widgetのデザインは自由に変更できますので、お好みのデザインに変更してください。

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

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

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

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

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

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にかかわらずデバイスの情報を取得することができるのが良い点ですね

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

値名	内容
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を設定することを忘れないようにしましょう。

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

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

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をつけることを忘れないようにしてください。
これを付けないと、データが型を判別できずうまく表示することができません。

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

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

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

完成アプリをみてみましょう！

pic.twitter.com/LgrVEHX7db

— Kony (@Kony12763790) May 20, 2020

「写真を撮る」ボタンでカメラの起動、 「確認する」ボタンで次の画面に遷移して写真の情報が表示できていますね！

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

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

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

↓Camera Optionsを開いた時の画面
ここでデバイスによって、フラッシュをOnにするかOffにするかの設定を行うことができます。

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

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

#参考
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