ニフクラmBaaSお役立ちブログ

スマホアプリ開発にニフクラmBaaS。アプリ開発に役立つ情報をおとどけ!

Monacaアプリでスクリーンショットを撮ってファイルストアにアップロードする

アプリで操作中の画面を残しておきたいと思うことがあります。Monacaアプリであれば専用のプラグイン、gitawego/cordova-screenshot: screenshot plugin for cordova/phonegapがあります。今回はこのプラグインを使って取得したスクリーンショットをファイルストアに保存する方法を紹介します。

DataURIとして取得

最初の取得ですが、画像として保存してしまうとカメラロールに入ってしまいます。これは何度もスクリーンショットを保存したり自動的に残しておく場合は好まれないでしょう。

そこでスクリーンショットのデータを保存しないよう、DataURIとして取得します。

navigator.screenshot.URI(function(error,res){
  // res.URI としてデータが返ってきます
  // 引数は画像形式と品質です
}, 'png', 100);

この res.URI はBase64エンコードされたデータになるので、これをBlob形式に変換します(via javascript - Blob from DataURL? - Stack Overflow)。

let dataURItoBlob = function(dataURI, dataTYPE) {
    var binary = atob(dataURI.split(',')[1]), array = [];
    for(var i = 0; i < binary.length; i++) array.push(binary.charCodeAt(i));
    return new Blob([new Uint8Array(array)], {type: dataTYPE});
}

後はこのblobデータをファイルストアにアップロードします。

var blob = dataURItoBlob(res.URI, 'image/png');
ncmb.File.upload('screenshot.png', blob)
  .then(function(data) {
    alert('アップロード完了しました');
  })
  .catch(function(err) {
    alert('エラーが発生しました');
    alert(JSON.stringify(err));
  })

ncmb.File.upload にはblobデータを渡します。また、ファイル名は今回は固定ですが、何らかのユニークな名前を付ける方が良いでしょう。

このようにすることでスクリーンショットの撮影とファイルストアへの保存が簡単に実現できます。


今回のコードはNCMBMania/Monaca_Screenshot_To_FileStoreにアップロードしてあります。実装時の参考にしてください。

ファイルストア (JavaScript) : 基本的な使い方 | ニフティクラウド mobile backend