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

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

既存のカンバンシステムをmBaaSに置き換えてみよう(タスクのインポート/エクスポート)

f:id:mbaasdevrel:20180119145425p:plain

既存のWebアプリケーションのバックエンドをmBaaSに置き換えてみる連載になります。一つずつ順番に紹介していきますので、同じようなシステムのリプレイスで参考にしてもらえるはずです。

前回はタスクのCRUD操作をmBaaSに対応させましたので、今回はデータのインポート/エクスポートについて処理をしていきたいと思います。

データのエクスポート

実はデータのエクスポートについては何も変更がいりません。元々、tasksをJSON.stringifyで表示しているだけなので、そのまま利用できます。ただしobjectIdなどの不要なデータも付いてしまっているので、インポート時に除外しなければなりません。

データのインポート

データのインポート処理では、入力されたJSONに対してTaskクラスを復元しながら取り込んでいきます。注意点として、下記のフィールドはインポート対象外になります。

  • objectId
  • createDate
  • updateDate
  • acl

元々のインポート処理は次のようになっています。インポート先のワークスペース名を入力させ、そのワークスペースに対してタスクデータを取り込んでいきます。

function onClickBtnImportOk(){

  $("#labelWorkspaceName").removeClass("required");
  $("#labelImportJson").removeClass("required");

  try {
    var workspaceName = $("#inputImportWorkspaceName").val();  
    if(workspaceName.trim() === ''){
      $("#labelWorkspaceName").addClass("required");
      $("#inputImportWorkspaceName").focus();
      return false;
    }

    var tasksTemp = JSON.parse($("#inputImportJson").val());
    if(confirm(message("confirm_import_tasks"))){

    var workspaceId = generateWorkspaceId();
    workspaces[workspaceId] = workspaceName;
    saveWorkspaces();
    tasks = tasksTemp;
    currentWorkspace = workspaceId;
    saveTasks();
    switchToWorkspace(workspaceId);
      hideModals();

      return true;
    }
  } catch (e) {
    alert(message("error_invalid_json"));
    $("#labelImportJson").addClass("required");
    $("#inputImportJson").focus();
    return false;
  }
}

ではこの処理をmBaaSに置き換えてみると次のようになります。ワークスペースの作成と保存(saveWorkspaces)、タスクデータから上記のプロパティの削除処理が入っています。

function onClickBtnImportOk(){

  $("#labelWorkspaceName").removeClass("required");
  $("#labelImportJson").removeClass("required");

  try {
    var workspaceName = $("#inputImportWorkspaceName").val();  
    if(workspaceName.trim() === ''){      
      $("#labelWorkspaceName").addClass("required");
      $("#inputImportWorkspaceName").focus();
      return false;
    }

    var tasksTemp = JSON.parse($("#inputImportJson").val());
    if(confirm(message("confirm_import_tasks"))){
      var workspaceId = generateWorkspaceId();
      var workspace = new Workspace;
      workspace
        .set('name', workspaceName)
        .set('id', workspaceId)
        .set('last', true);
      workspaces[workspaceId] = workspace;
      saveWorkspaces()
        .then(() => {
          tasks = {};
          for (var i in tasksTemp) {
            // インポートしたデータから規定のカラムを削除
            var taskTemp = tasksTemp[i];
            delete taskTemp.objectId;
            delete taskTemp.acl;
            delete taskTemp.createDate;
            delete taskTemp.updateDate;
            tasks[i] = taskTemp;
          }
          saveTasks();
          switchToWorkspace(workspaceId);
          hideModals();
        })
      return true;
    }
  } catch (e) {
    alert(message("error_invalid_json"));
    $("#labelImportJson").addClass("required");
    $("#inputImportJson").focus();
    return false;
  }
}

まとめ

ここまでの処理でカンバンシステムのバックエンドをすべてmBaaSに置き換えられました。index.htmlはローカルにあっても構いませんが、データはmBaaSに保存されることで他のコンピュータと共有したり、他のブラウザとのデータ共有も実現できます。

次回はmBaaS独自の機能として、認証機能を追加してみたいと思います。

中津川 篤司

中津川 篤司

NCMBエヴァンジェリスト。プログラマ、エンジニアとしていくつかの企業で働き、28歳のときに独立。 2004年、まだ情報が少なかったオープンソースソフトの技術ブログ「MOONGIFT」を開設し、毎日情報を発信している。2013年に法人化、ビジネスとエンジニアを結ぶDXエージェンシー「DevRel」活動をスタート。