FJCT_ニフクラ mobile backend(mBaaS)お役立ちブログ

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

JavaScript SDKのキッチンシンクアプリを作る【ファイルストアメモアプリ編】

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

元々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となっています。

変更点について

以前、データストアを使ったメモアプリについて紹介しましたが、今回はファイルストアを使います。特徴としては一行のデータを検索するのではなく、ファイルを検索したり、アップロードする点にあります。

ファイル名はアプリケーション全体で共有されているので、ログインしている場合としていない場合で変更するようにします。

let user = ncmb.User.getCurrentUser();
if (user) {
  fileName = `memo.${user.objectId}.txt`;
}else{
  fileName = `memo.txt`;
}

そして既存データの取得方法ですが、このファイル名を使って ncmb.File.download メソッドを実行します。エラーが出る場合はまだファイルがない状態です。

// 既存データの取得
ncmb.File
  .download(fileName)
  .then(function(memo) {
    $('#memo').val(memo);
  })
  .catch(function(err) {
    // ファイルがまだない場合
    console.log(err);
  });

そして保存ボタンを押した際の処理として、ファイルの保存を行います。ログインしていれば、ACLを設定します。ファイルの内容はBlobでアップロードします。

$(page).find('.save').on('click', function(e) {
  e.preventDefault();
  let acl = new ncmb.Acl();
  if (user) {
    acl
      .setUserReadAccess(user, true)
      .setUserWriteAccess(user, true)
  }else{
    acl.setPublicReadAccess(true);
    acl.setPublicWriteAccess(true);
  }
  let blob = new Blob([$('#memo').val()], {type: 'text/plain'});
  ncmb.File
    .upload(fileName, blob, acl)
    .then(function() {
    })
    .catch(function(err) {
      showDialog('ファイル保存エラー', `ファイルの保存に失敗しました<br />${err}`);
    })
});


たったこれだけのコードでファイルストアを用いたメモアプリが完成します。メモはテキストデータなのでファイルストア/データストアどちらでも良いでしょう。しかし検索などを考えない、タイトルや付加情報が加わらないのであれば、ファイルストアの方が簡単かも知れません。

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