Monaca x NIFTY Cloud mobile backend カメラ写真をアップ・ダウンロードするサンプル

Overview

元の記事：リンク

Monacaを用いて作ったアプリとmobile backendを連携して、スマホカメラで撮った写真をmBaaSサーバにアップロードする機能を実装するサンプルコードとなります。
* HTML/CSS/JavaScriptでマルチプラットフォーム（iOS/Android/Windowsなど）にアプリを開発できる統合開発環境Monaca
* スマホアプリのサーバ側機能（プッシュ通知、会員管理、DBなど）をサーバ開発不要で実装できるNIFTY Cloud mobile backend

Demo

MonacaでgithubのURL（https://github.com/ncmbadmin/monaca_file_updownload/archive/master.zip）をインポートし、アプリケーションキーとクライントキーを設定してください。
「Take picture and save」ボタンを押すと、カメラが起動します。写真を撮ると、自動的にmBaaS上へファイルを保存します。
保存したファイルをダウンロードし、画面に表示します
起動画面

取得完了画面

Requirement

Monaca環境
Nifty cloud mobile backend Javascript SDK version 1.2.6　ダウンロード：Javascript SDK
※version 2.0.0はまだ準備中です。

Installation

Monacaで新規アプリ作成し、プロジェクトをインポートする。
- Monacaの利用登録する Monaca
- Monacaで新規プロジェクトを作成する
Monacaでアプリ作成する: プロジェクトインポートを選択し、「URLを指定してインポートする」と選び、以下のURLからインポートする。
https://github.com/ncmbadmin/monaca_file_updownload/archive/master.zip
MonacaでカメラPhonegapプラグインを有効にさせる

mobile backendでアプリ作成する
- mobile backend 利用登録 NIFTY Cloud mobile backend
Monacaで作成したアプリをmobile backendサーバーと連携させる
- Monacaでアプリケーションキー、クライアントキーを設定し、初期化を行う: www/js/ncmb_push_start.js

キーをコピーし、追記します。

動作確認
- Monacaでビルドし、動作確認します
- ダウンロードしたファイルを表示する

Description

コードの説明

File: www/index.html

初期化設定

var appKey    = "YOUR_APP_KEY";
var clientKey = "YOUR_CLIENT_KEY";
var fileName = "uploaded.jpg"; //保存File名

///// Called when app launch
$(function() {
  NCMB.initialize(appKey, clientKey);
});

上記のコードでアプリケーションキーとクライアントキーを指定し、
NCMB.initialize(appKey, clientKey)　でmBaaSサーバと連携を行います。

カメラ処理
```JavaScript
　　　function snapPicture () {
navigator.camera.getPicture (onSuccess, onFail,
{ quality: 50, destinationType: Camera.DestinationType.DATA_URL});

 //成功した際に呼ばれるコールバック関数
 function onSuccess (imageData) {
     var byteCharacters = toBlob(imageData);
     var NCMBFile = new NCMB.File(fileName, byteCharacters, "image/png");
     NCMBFile.save().then(function() {
       //NCMBサーバーからファイルをダウンロード
       var getFile =  new NCMB.File(fileName);
       var image_canvas = document.getElementById("showImage");
       getFile.fetchImgSource(image_canvas);
     },
     function(error) {
     　// The file either could not be read, or could not be saved to NCMB.
       alert(JSON.stringify(error));
     });
 }

 //失敗した場合に呼ばれるコールバック関数
 function onFail (message) {
     alert ('エラーです: ' + message);
 }

　　 }
```

NCMBFileを利用してsave()メソッドを実行すると、ファイルを非同期にてアップロードします。
アップロードが成功したら、getFileを利用してファイルのダウンロードを行います。
imgタグ"showImage"のドキュメントオブジェクトをfetchImgSource()に渡し、ダウンロードしたファイルの中身を表示させます。

Usage

サンプルコードをカスタマイズすることで、様々な機能を実装できます！
データ保存・データ検索・会員管理・プッシュ通知などの機能を実装したい場合には、
以下のドキュメントもご参考ください。

Contributing

Fork it!
Create your feature branch: git checkout -b my-new-feature
Commit your changes: git commit -am 'Add some feature'
Push to the branch: git push origin my-new-feature
Submit a pull request :D

License

MITライセンス
NIFTY Cloud mobile backendのJavascript SDKのライセンス

【サーバ機能 x ハイブリッドアプリ】カメラ写真を撮って、サーバーにアップし、共有するサンプルアプリを作ってみました！