Web Technologies WebApp

APIとは？RhinoComputeとReactを例にわかりやすく解説！

API（Application Programming Interface）は、ソフトウェア同士がやり取りをするためのルールや仕組みのことです。これを利用することで、異なるプログラムが簡単にデータの送受信を行えます。今回は「RhinoCompute」と「React」を使った具体例で、APIをわかりやすく解説します！

APIの役割とは？

APIは、プログラム間の「橋渡し役」です。例えば、以下のようなやり取りが行われます：

  1. フロントエンド（React）：ユーザーが見て操作する部分（ボタンやスライダー）。
  2. バックエンド（RhinoCompute）：3Dモデルを作る処理や計算を担当。
  3. API：ReactとRhinoComputeの間でデータをやり取りする窓口。

実際の流れを考えてみる

  1. ユーザー操作
    Reactで作ったウェブページで、スライダーを動かして「箱の高さ」を設定し、「生成」ボタンを押します。
  2. APIを通じたリクエスト
    Reactが「高さ50mmの箱を作りたい」というリクエストをRhinoComputeに送ります。
  3. 計算の実行
    RhinoComputeがリクエストを受け取り、3Dモデルを生成します。
  4. レスポンスを返す
    生成された3Dモデルのデータ（例：GLB形式や3DM形式）がRhinoComputeからReactに送られます。
  5. 結果の表示
    Reactがレスポンスを受け取り、ブラウザに3Dモデルを表示します。

APIを使うときの重要な要素

RhinoComputeとReactの連携を例に、APIの要素を詳しく見てみましょう。

  1. エンドポイント
    APIを呼び出すためのURLです。RhinoComputeでは、たとえば次のようなURLを使います：
    http://localhost:6500/grasshopper
    このURLにリクエストを送ると、Grasshopperを使った計算が実行されます。
  2. HTTPメソッド
    APIが受け付けるリクエストの種類です。主なものは：
    • GET：データを取得する。
    • POST：データを送信して処理を行う（RhinoComputeではこれが主）。
  3. リクエストボディ
    ReactからRhinoComputeに送るデータです。たとえば、「高さ50mmの箱を作って」という情報をJSON形式で送ります： { "height": 50 }
  4. レスポンス
    RhinoComputeがReactに返すデータです。GLB形式や3DM形式で生成したモデルデータを送ります。

RhinoComputeとReactのAPI実装例

ReactでAPIを呼び出すコード

Reactで「生成」ボタンを押したときにRhinoComputeのAPIを呼び出します。

const generateModel = async (height) => {
  const response = await fetch('http://localhost:6500/grasshopper', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ height }),
  });
  const data = await response.json();
  console.log('生成されたモデルデータ:', data);
};

PythonでRhinoComputeの設定

Flaskを使ってRhinoComputeにデータを送る場合：

from flask import Flask, request, jsonify
import compute_rhino3d.Util
import compute_rhino3d.Grasshopper as gh

app = Flask(__name__)

@app.route('/generate', methods=['POST'])
def generate():
    data = request.json
    height = data.get('height')
    # Grasshopper用のデータを作成
    input_data = [{"name": "Height", "value": height}]
    # RhinoComputeでGrasshopperを実行
    output = gh.evaluate_definition('path/to/your.gh', input_data)
    return jsonify(output)

if __name__ == '__main__':
    app.run(port=5000)

RhinoComputeとReactをAPIでつなぐメリット

  1. 複雑な処理を簡単に分担できる
    • RhinoComputeが3Dモデルの生成を担当。
    • Reactがユーザーインターフェース（UI）を担当。
  2. 再利用性が高い
    RhinoComputeのAPIは、他のプロジェクトでも利用可能。
  3. リアルタイム処理が可能
    Reactから操作した結果をすぐにブラウザで確認できる。

実際のツールの例

役割ツール説明
フロントエンドReactユーザーが操作する部分（ボタンやスライダー）
バックエンドFlaskRhinoComputeへのリクエストを管理
3D計算RhinoComputeGrasshopperを使って3Dモデルを生成
データ形式GLB/3DM生成されたモデルを保存する形式

まとめ

APIを使うと、ReactとRhinoComputeのような異なるプログラムがスムーズに連携できます。RhinoComputeは3Dモデルの生成に特化し、Reactはその結果をブラウザに表示する役割を果たします。この連携を通じて、効率的なアプリケーション開発が可能になります。

APIの基本を理解したら、ぜひRhinoComputeを使ったプロジェクトに挑戦してみてください！

-Web Technologies, WebApp