ニフクラ mobile backend（mBaaS）お役立ちブログ

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

ニフティクラウド mobile backend × Monacaを使ってみよう（写真アップロード/ギャラリー編）

写真 ファイルストア 過去記事 Monaca Tips

スマホアプリ開発初心者でもWeb技術（HTML/JavaScript/CSS）を使ってスマホアプリ開発がはじめられるMonaca。開発環境の用意もいらず、Webブラウザさえあれば開発がはじめられます。そのMonacaはニフティクラウド mobile backendと連携しており、簡単に接続できるようになっています。前回のTodoに続き、今回は写真アップロード/ギャラリー機能を解説します。これはニフティクラウド mobile backendのファイルストア機能を使ったサンプルになります。

HTMLファイルの内容

まずはHTMLの主要な部分を見ていきます。ファイルは www/gallery.html になります。

www/gallery.html

<div class="grid-table">
    <div class="grid-table-body">
    </div>
</div>
  :
<div class="no-border-button tappable" style="position : relative">
    ＋ 画像をアップロードする
    <form action="">
    <input type="file" id="image-file" name="image" style="opacity: 0.0; position : absolute; left : 0; right : 0; top : 0; bottom : 0; z-index : 20;" />
    </form>
</div>
  :
<div class="templates">
    <div class="grid-table-cell" id="grid-table-cell-template">
        <img src="" >
    </div>
</div>
  :
<script src="js/gallery.js"></script>
<script>
GalleryController.init();
</script>

 

 

にはテンプレートが入っています。画像をグリッドで並べるためのテンプレートです。ニフティクラウド mobile backendから取得した写真データをテンプレートを使ってHTMLにし、

 

の中に敷き詰めていきます。

こちらが実際に表示したときの例です。

JavaScriptの内容

では次にそれらの処理を行っているJavaScriptファイルを見てみましょう。ファイルは js/gallery.js です。

js/gallery.js

var GalleryController = {
    init : function() {
        $(function() {
            GalleryController.prepare();
        });
    },
    // onload時の処理を行う
    prepare : function() {
        $('#image-file').change(function() {
            GalleryController.upload();
        });
          :
        this.refresh();
    },

まず最初にHTML側に書いてある GalleryController.init() を実行しています。これは GalleryController.prepare() を実行しているだけです。prepareではまず ファイル選択がされた時に、GalleryController.upload() を実行するように指定されています。そしてその下ではthis.refresh()を実行しています。

this.refresh() の内容はニフティクラウド mobile backendから画像を取得して、それらをグリッドで表示する処理になります。処理は以下の通りです。

var query = new NCMB.Query("file");
query.find({
  success: function(files) {
    GalleryController.render(files);
  },
  error: function(err) {
    // 失敗
    console.log(err);
  }
});

NCMB.Query(“file”) というクエリを生成して、後は query.find でニフティクラウド mobile backend からデータを取得しています。たった2行でデータ取得ができてしまいます。そしてデータが取れればsuccessが呼ばれて、 GalleryController.render(files) を実行します。

// 画像をリストにして表示する
var cellTemplate = $('#grid-table-cell-template')[0];
var fragment = document.createDocumentFragment();
files.map(function(file) {
  var cell = cellTemplate.cloneNode(true);
  $('img', cell).attr('src', downloadImage(file.get('fileName')));
  return cell;
}).forEach(function(tableCell) {
  fragment.appendChild(tableCell);
});
$('.grid-table-body').empty().append(fragment);
hideSpinner();

こちらが表示処理になります。取得したfilesを順番に処理して最後にまとめて $(‘.grid-table-body’) に要素を追加しています。これだけでニフティクラウド mobile backendからデータを取得し、表示するまでの処理が完了です。

写真をアップロードする

次に写真のアップロードです。写真を選択すると、自動的にアップロードが開始されるようになっています。

var fileInput = $("#image-file")[0];
if (fileInput.files.length > 0) {
  var file = fileInput.files[0];
  if ((/\.(png|jpg|jpeg|gif)$/i).test(file.name)) {
    if (window.cordova) {
      delete File;  // Avoid conflict with PhoneGap File API
    }
    var ncmbFile = new NCMB.File(file.name, file);
    ncmbFile.save().then(function() {
      // アップロード成功
      GalleryController.refresh();
      hideSpinner();
    }, function(error) {
      // アップロード失敗
      alert(error);
      hideSpinner();
    });
    showSpinner();
  }
}

実際にファイル処理を行っているのは次の2行です。

var ncmbFile = new NCMB.File(file.name, file);
ncmbFile.save()

これだけでファイルのアップロードができてしまいます。とても簡単ですね。アップロードが終わった後は、 GalleryController.refresh() を実行して表示をリフレッシュしています。これにより、今アップロードしたファイルがグリッドに表示されるようになります。

以下はアップロードしたときの表示です。少し待つと自動的に表示がリフレッシュされて、写真が追加されます。

このデモを動かした動画がこちらになります。

http://www.youtube.com/watch?v=MQsjPp13MGo

いかがでしょうか。Monacaを使えばWeb IDEを使って開発環境の構築不要でスマホアプリが開発できます。さらにニフティクラウド mobile backendを組み合わせることでサーバサイドの仕組みをコーディングレスで利用できるようになります。

開発環境もサーバサイドの仕組みもいらないというのは初心者にとってのとっかかりはとてもスムーズなのではないでしょうか。さぁ、今すぐニフティクラウド mobile backend × Monacaによるアプリ開発をはじめましょう！

f:id:mbaasblog:20180927104348p:plain