1分でできる無料JSONストレージjsonboxを使用した超簡単API作成

jsonboxとは

HTTP APIを介してJSONデータを保存、読み取り、変更ができる無料Webサービス。

公式サイトでJSONデータのURLをコピーしてHTTPリクエストを送信してデータストアを操作するだけなのでログインなどの面倒な作業は一切不要！

jsonboxのURL作成

まず公式サイトでJSONデータのURLをコピーする。(Copyをクリック)

https://jsonbox.io/

Copyを押すと下記のようなURLがコピーされる。(URLはランダム)

https://jsonbox.io/box_f7b6c58358498848a89c

コピーしたばかりだとURLにアクセスしても空の配列[]が返ってくるだけなのでターミナルからコマンドを実行してデータを追加する必要がある。

jsonboxの使い方

データの追加

データの追加は下記のような形式で追加する。

$ curl -X POST 'https://jsonbox.io/box_f7b6c58358498848a89c' \
-H 'content-type: application/json' \
-d '[{"name": "Sato", "age": 18}, {"name": "Tanaka", "age": 27}]'

追加後にURLにアクセスするとデータが読めるようになる。

_idと_createOnは自動で追加される。

[
  {
    "_id": "5d859799de71aa0017473cee",
    "name": "Sato",
    "age": 18,
    "_createdOn": "2019-09-21T03:23:05.979Z"
  },
  {
    "_id": "5d859799de71aa0017473cef",
    "name": "Tanaka",
    "age": 27,
    "_createdOn": "2019-09-21T03:23:05.979Z"
  }
]

https://jsonbox.io/box_f7b6c58358498848a89c

JavaScriptを使用すればWebサイトで読み込みも可能。

// <div id="r"></div>
fetch('https://jsonbox.io/box_f7b6c58358498848a89c')
  .then(res => res.json())
  .then(json => {
    let text = ''
    json.forEach(v => {
      text += `${v.name}は${v.age}才です。`
    })
    document.getElementById('r').textContent = text
  })
  // => Satoは18才です。Tanakaは27才です。

jsonboxのJSONをWebサイトで読み込んだサンプル

データの更新および

データの更新および削除はPUTやDELETEで実行する。

URLのうしろをスラッシュ(/)で区切って_idを指定する。

複数をまとめて行うことはできないため、すべて更新および削除したい場合は最初から作成し直したほうが良いだろう。

$ curl -X PUT 'https://jsonbox.io/box_f7b6c58358498848a89c/5d859799de71aa0017473cef' \
-H 'content-type: application/json' \
-d '{"name": "Yamada", "age": 35}'

$ curl -X DELETE 'https://jsonbox.io/box_f7b6c58358498848a89c/5d859799de71aa0017473cef'