メディアアートのためのバックエンド構築入門(Chap.03 追加、更新、削除編)

こちらの記事の続きです。

Chap.03 追加、更新、削除編

最初に実行結果の動画をあげておきます。

サーバのサンプルコード

一応、サンプルを追加、更新、削除に分割して用意したのですが、 前回の内容がわかれば読める気がするので、 全ての処理が含まれるサンプルコードを紹介しようと思います。

実行方法は前回と同じく以下のようになっています。

cd backend-for-new-media-art/chap05-update/node-server
npm install
npm run db:init
npm start

前回は GET http://localhost:3000/balls しかルーティングしていませんでしたが、 このサンプルコードでは以下のようにルーティングしています。

  • POST /balls: 円の情報を追加する
  • DELETE /balls/:id: 指定したIDの円の情報を削除する
    • :id には削除対象の円のIDを入れる
  • PUT /balls/:id: 指定したIDの円の情報を更新する
    • :id には更新対象の円のIDを入れる

ここでHTTPリクエストメソッドについて少し説明しておきます。

HTTPリクエストにはメソッドという情報があります。 例えば GET http://localhost:3000/ballsPOST http://localhost:3000/balls は同じURLですが、 HTTPメソッドが異なるので別物のリクエストになります。

このように、同じURLだとしても、メソッドを使い分けることで 「サーバに対してどのようなリクエストを出すのか?」 ということを表現します。

詳細はこちらをご確認ください。

https://developer.mozilla.org/ja/docs/Web/HTTP/Methods

Copy
const express = require('express')
const app = express()
app.use(express.json())
const port = 3000
const sqlite3 = require('sqlite3')
const db = new sqlite3.Database('./db.sqlite')
app.get('/balls', (req, res) => {
db.serialize(() => {
db.all('select * from balls', (err, row) => {
if (err) {
console.error(err)
}
res.json({
balls: row,
})
})
})
})
app.post('/balls', (req, res) => {
console.log(req.body)
const x = req.body.x
const y = req.body.y
const r = req.body.r
db.run('insert into balls(x, y, r) values (?, ?, ?)', [x, y, r], (err) => {
if (console.error(err)) {
console.error(err)
}
res.status(201).json({
success: true,
});
})
})
app.delete('/balls/:id', (req, res) => {
console.log(req.body)
db.run('delete from balls where id = ?', [req.params.id], (err) => {
if (console.error(err)) {
console.error(err)
}
res.status(201).json({
success: true,
});
})
})
app.put('/balls/:id', (req, res) => {
console.log(req.body)
db.run('update balls set x = ?, y = ? where id = ?', [req.body.x, req.body.y, req.params.id], (err) => {
if (console.error(err)) {
console.error(err)
}
res.status(201).json({
success: true,
});
})
})
app.listen(port, () => {
console.log(`http://localhost:${port}`)
})

サンプルスケッチ

こちらをスケッチの操作方法は以下のようになっています。

  • 作成: キーボードの c を押すとマウスの座標に円が追加される
  • 削除: 円にマウスが載っている状態でキーボードの d を押すと円が削除される
  • 更新: 円をドラッグ&ドロップすると円の座標が更新される
Copy
import http.requests.*;
String API_URL = "http://localhost:3000/balls";
ArrayList<Ball> balls;
void setup() {
size(640, 480);
balls = new ArrayList<Ball>();
loadBalls();
}
void draw() {
background(0);
for (Ball ball : balls) {
ball.draw();
}
}
void keyPressed() {
if (key == 'c') {
PostRequest post = new PostRequest(API_URL);
post.addHeader("Content-Type", "application/json");
JSONObject ball = new JSONObject();
ball.setFloat("x", (float)mouseX / width);
ball.setFloat("y", (float)mouseY / height);
ball.setFloat("r", random(1));
post.addData(ball.toString());
post.send();
balls.clear();
loadBalls();
} else if (key == 'd') {
for (Ball ball : balls) {
if (dist(mouseX, mouseY, ball.x, ball.y) < ball.r) {
DeleteRequest delete = new DeleteRequest(API_URL + "/" + ball.id);
delete.addHeader("Content-Type", "application/json");
delete.send();
break;
}
}
balls.clear();
loadBalls();
}
}
void loadBalls() {
GetRequest get = new GetRequest(API_URL);
get.send();
JSONObject result = parseJSONObject(get.getContent());
JSONArray ballsData = result.getJSONArray("balls");
for (int i = 0; i < ballsData.size(); i++) {
JSONObject ballData = ballsData.getJSONObject(i);
Ball ball = new Ball(
ballData.getInt("id"),
ballData.getFloat("x") * width,
ballData.getFloat("y") * height,
ballData.getFloat("r") * 9 + 1
);
balls.add(ball);
}
}

次の記事では、 前回の記事で少し触れたリレーションを扱おうと思います。


メディアアートやクリエイティブコーディングのためのバックエンド構築入門(Chap.03 追加、更新、削除編)

By Katsuya Endoh, 2024-06-24