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の利用登録する
-
Monacaでアプリ作成する: プロジェクトインポートを選択し、「URLを指定してインポートする」と選び、以下のURLからインポートする。
https://github.com/ncmbadmin/monaca_file_updownload/archive/master.zip -
MonacaでカメラPhonegapプラグインを有効にさせる
-
mobile backendでアプリ作成する
- mobile backend 利用登録
NIFTY Cloud mobile backend
- mobile backend 利用登録
-
Monacaで作成したアプリをmobile backendサーバーと連携させる
- Monacaでアプリケーションキー、クライアントキーを設定し、初期化を行う: www/js/ncmb_push_start.js
キーをコピーし、追記します。
- 動作確認
- Monacaでビルドし、動作確認します
- ダウンロードしたファイルを表示する
- 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サーバと連携を行います。
- カメラ処理
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のライセンス