CatHand Blog

アプリ開発やMac弄り

json-serverとGoogle Spreadsheetでモックサーバーを作る

json-serverはREST APIモックサーバーが簡単に作れるOSSです。

github.com

json-serverではモックデータはjsonで記述するのですが、非エンジニアにもデータが作成しやすいようにGoogle Spreadsheetでデータを作成できるようにしてみました。

Google Spreadsheetでシートがモデルに対応するようにデータを作成します。

qiita.com

↑の記事を参考にScript Editorを開き、Web Appを作成します。コードは↓。

function getData(sheetName) {
  var sheet = SpreadsheetApp.getActive().getSheetByName(sheetName);
  var rows = sheet.getDataRange().getValues();
  var keys = rows.splice(0, 1)[0];
  return rows.map(function(row) {
    var obj = {};
    row.map(function(item, index) {
      obj[String(keys[index])] = String(item);
    });
    return obj;
  });
}

function sheetnams() {
  return SpreadsheetApp.getActiveSpreadsheet().getSheets().map(function(x) {return x.getName();});
}

function doGet() {
  var data = {};
  sheetnams().forEach(function(name) { data[name] = getData(name)});
  return ContentService.createTextOutput(JSON.stringify(data, null, 2))
  .setMimeType(ContentService.MimeType.JSON);
}

このコードは doGet() を実行すると↓のようなjson-serverで読めるjsonを生成します。

{
  "account": [
    {
      "username": "test@example.com",
      "password": "test1234",
      "user_id": "1"
    }
  ],
  "user": [
    {
      "id": "1",
      "name": "山田 太郎",
    },
    {
      "id": "2",
      "name": "山田 花子",
    }
  ]
}

あとはこれをjson-serverに食わせてやれば良いです。

% json-server {↑で公開したWeb AppのURL}

これで

  • Google Spreadsheetでmockデータを作成
  • デバッグ実行時はローカルサーバを立てて開発
  • リリース時、CIサービスでjson-serverのmockをfirebaseへデプロイする
  • リリースビルドはfirebaseのmock apiを参照する

のような運用が可能になりました。