メディアアートのためのバックエンド構築入門（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/balls と POST 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}`)
})
view raw chap05-update/node-server/app.js delivered with ❤ by emgithub

サンプルスケッチ

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

  • 作成: キーボードの 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);
  }
}
view raw chap04-delete/ClientApp/ClientApp.pde delivered with ❤ by emgithub

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

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

By Katsuya Endoh, 2024-06-24

[JavaScript] [Processing] [B4NMA]