JavaScript SDKのキッチンシンクアプリを作る【ファイルストア編】 - ニフクラ mobile backend（mBaaS）お役立ちブログ

キッチンシンクというのは、何かのフレームワークやライブラリがあった時に、その殆どの機能を体験できる仕組みになります。それがあることでフレームワークの全体像が分かったり、何か開発していて困った時に参考とできるコードになります。

元々MonacaとNCMBではアカウント連携機能があるのですが、NCMBからMonacaへ誘導した際にチュートリアルアプリを表示する機能は約1年ほど前になくなっています。チュートリアルアプリはデータの登録をしたり、写真を表示するアプリでした。つまりデータストアとファイルストアが体験できるというものです。アプリ自体はJavaScript SDKのver.1を使っていましたので、今となっては参考にはしづらいものでした。

この記事では旧チュートリアルアプリに変わるキッチンシンクアプリを作っていきたいと思います。ステップを踏んで紹介していきますので、実際に試す際の参考にしてください。今回はファイルストアを使って写真を登録できるアプリを作ってみたいと思います。

利用するフレームワーク

今回利用しているフレームワーク、ライブラリは次の通りです。

Onsen UI
Monaca CLI
NCMB
Bower

今回はOnsen UIをjQueryから使う形で進めています。ライブラリはBower経由でインストールしています。アプリのプレビュー表示を行うのに便利なのがMonaca CLIになります。インストールは Node.js をインストール後、 npm コマンドで行えます。

$ npm i monaca -g

ベースのコード

今回はNCMBMania/kitchensink-monaca: MonacaとJavaScript SDKを使ったキッチンシンクアプリです。にコードをアップロードしてあります。こちらを参考にしてください。ベースはOnsen UI V2 JS Navigationとなっています。

変更点について

ファイルストアを使うのは簡単です。File.uploadを実行するだけです。

ncmb.File
  .upload(file.name, file, acl)

ただ、そのままアップロードしても面白くありませんのでプレビューが表示できるようにしたいと思います。

プレビューを表示する

iOSの場合、カメラの向きをEXIF情報に付与しているのですがうまく認識されずに写真が回転してしまうことがあります。それを防ぐために○というライブラリを使います。これを使ってCanvasタグを使って画像を表示する場合には次のようにします。

$(page).find('#photo').on('change', function(e) {
  file = e.target.files[0];
  loadImage(file, function(img) {
      $('#preview').append(img);
    },
    {
      maxWidth: 250,
      canvas: true
    }
  );
});

アップロード処理を行う

そして写真をアップロードします。この時、上記のfileオブジェクトを使うと簡単です。Canvasの内容を使おうと思うと若干コード量が増えてしまうでしょう。

$(page).find('#upload').on('click', function(e) {
  // ログインしている場合は権限設定を行う
  let user = ncmb.User.getCurrentUser();
  let acl = new ncmb.Acl();
  if (user) {
    acl
      .setUserReadAccess(user, true)
      .setUserWriteAccess(user, true)
  }
  ncmb.File
    .upload(`photoList-${file.name}`, file, acl)
    .then(function(obj) {
      load_image(obj.fileName);
    });
});

コツとして、ファイルストアは階層構造を使えないため、何の目的で使うファイル化によってプリフィックスを付けておくと便利でしょう。今回はphotoList-をつけています。

写真を表示する

ファイルストアはHTTPSアクセスを許可することもできますが、それでは権限管理ができません。権限管理された中で写真を表示する場合は File.download メソッドを使います。

let load_image = (fileName) => {
  var reader = new FileReader();
  reader.onload = function(e) {
    $('#photos').append(`
      <ons-col width="200px">
        <img width="200px" src="${reader.result}"
      </ons-col>
    `);
  };
  ncmb.File.download(fileName, "blob")
    .then(function(blob) {
      reader.readAsDataURL(blob);
    });
}

これはBlobデータとして取得されますので、FileReader APIを使ってdata URIに変換し、src要素に適用するのが良いでしょう。

初期表示

最初に写真を一覧表示する際には次のようにファイルストアを検索します。この時のキーとして使えるのがファイル名くらいなので、前述の通りファイル名で処理判別できるプリフィックスを付けておくのがお勧めです。

ncmb.File
  .regularExpressionTo('fileName', '^photoList\-.*')
  .fetchAll()
  .then(function(photos) {
    for (let i = 0; i < photos.length; i++) {
      load_image(photos[i].fileName);
    }
  })

JavaScript SDKにはデータ/ファイルストアを正規表現検索できる regularExpressionTo メソッドがあります。正規表現も文字列で渡す必要がある点に注意してください。

ここまでのコードで写真アップロードアプリができあがります。今回は自分の写真しか表示できないようにしていますが、公開設定にしたら全体に読み取り権限を付けたり、グループで共有などもできます。また、写真表示をHTTPSにできれば表示が並行処理になるので高速になるでしょう。この場合はユーザの指定したファイル名をそのまま使うのではなく、自動生成するのが良さそうです。

コードはNCMBMania/kitchensink-monaca: Monaca と JavaScript SDKを使ったキッチンシンクアプリです。にアップロードしてあります。Monacaアプリとして動かすこともできますのでぜひお試しください。