既存の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独自の機能として、認証機能を追加してみたいと思います。
