エージェントを指揮する時代へ
> Analyzing requirements...
> Drafting implementation plan...
> Done. Opening browser preview.
🎥 今回の参考動画はこちら ▼
1. Antigravity IDEとは？：2026年の開発体験
2026年1月現在、エンジニア界隈を最も騒がせているツールといえば、GoogleがリリースしたAntigravity IDEです。「反重力」の名を冠したこのIDEは、これまでの「Copilot（副操縦士）」という概念を捨て去り、「Agentic（自律的エージェント）」を中心とした新しい開発フローを提案しています。
最大の特徴は、コードエディタの中に「小さなエンジニアリングチーム」が住んでいるような感覚です。Gemini 3 ProがUI/UXデザインを、Claude Opus 4.5がバックエンドロジックを担当し、それらを「Agent Manager」が統括します。
本記事では、このAntigravityを使用して、「ハンドジェスチャーで操作する3Dパーティクル空間」という高度なWebアプリを、ほぼ自然言語の指示のみで構築するプロセスを解説します。また、Antigravityをまだ導入していない方のために、生成された実際のコード（HTML単一ファイル）も公開します。これはVS Code等の既存エディタでも動作可能です。
2. 使用する技術スタック
今回作成するアプリケーションは、ブラウザだけで動作するモダンな構成です。
- Three.js: WebGLを使用した3Dグラフィックス描画ライブラリ。数千個のパーティクル制御に使用します。
- MediaPipe Hands: Googleが提供する高性能なハンドトラッキングライブラリ。Webカメラから手の形状や深度をリアルタイムに検出します。
- HTML5 / CSS3: UIオーバーレイとレイアウト制御。
通常、これらのライブラリを組み合わせて環境構築を行うには数時間かかりますが、Antigravityのエージェントワークフローでは、環境構築から実装までを数分で完結させることが可能です。
3. 実装プロセス：Agentic Workflow
Antigravityでの開発は、コードを書くことではなく「タスクを定義すること」から始まります。以下は、実際にエージェントに投げたプロンプト（指示書）です。
プロンプトの設計
あなたは熟練したWeb開発者です。Three.jsと標準JavaScriptを使用して、単一のHTMLファイルで完結するWebアプリを作成してください。
要件:
- ビルドツール（Vite/Webpack等）は使用せず、CDNリンクのみを使用すること。
- Webカメラを使用し、MediaPipe Handsで手の動きをトラッキングする。
- 親指と人差し指の距離（テンション）に応じて、3Dパーティクルの拡散具合を制御する。
- UIパネルを設け、パーティクルの形状（ハート、土星、花火など）や色を変更できるようにする。
このプロンプトを入力すると、Antigravity内の「Agent Manager」が起動し、タスクを分解します。Gemini 3が「実装計画（Artifact）」を作成し、ユーザーが承認（Approve）すると、実際のコーディングとブラウザでの動作検証が自律的に始まります。
4. 生成されたコード（Artifact）
以下は、Antigravityのエージェントが出力したコードです。これを index.html として保存し、ブラウザで開くだけで、ハンドトラッキング対応の3Dアプリが動作します。
※ローカルで実行する場合は、カメラアクセスのセキュリティ制限を回避するため、VS Codeの「Live Server」機能などを使って http://localhost... 形式で開くことを推奨します。
💡 実行方法
1. 以下のコードをコピーして index.html という名前で保存。
2. VS Code等でファイルを開き、Live Serverで起動。
3. カメラの使用を許可して手を映すと、パーティクルが反応します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Antigravity 3D Particle Playground</title>
<!-- Three.js CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<!-- MediaPipe Hands CDN -->
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/camera_utils/camera_utils.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/control_utils/control_utils.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/drawing_utils/drawing_utils.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/hands/hands.js"></script>
<style>
body { margin: 0; overflow: hidden; background-color: #000; font-family: 'Segoe UI', sans-serif; }
#ui-panel { position: absolute; top: 20px; right: 20px; background: rgba(20, 20, 20, 0.8); padding: 20px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.1); color: white; backdrop-filter: blur(10px); width: 220px; }
.control-group { margin-bottom: 15px; }
label { display: block; font-size: 12px; color: #888; margin-bottom: 5px; }
button { background: #333; border: 1px solid #555; color: white; padding: 8px 12px; border-radius: 6px; cursor: pointer; margin: 2px; font-size: 12px; transition: 0.2s; }
button:hover { background: #4285F4; border-color: #4285F4; }
input[type="color"] { width: 100%; border: none; height: 30px; cursor: pointer; }
#loading { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #4285F4; font-size: 24px; pointer-events: none; }
</style>
</head>
<body>
<div id="loading">Initialize Antigravity System...</div>
<div id="ui-panel">
<div class="control-group">
<label>SHAPE TEMPLATES</label>
<div id="shape-buttons"></div>
</div>
<div class="control-group">
<label>PARTICLE COLOR</label>
<input type="color" id="color-picker" value="#4285F4">
</div>
<div class="control-group">
<label>HAND TENSION</label>
<div style="height: 4px; background: #333; border-radius: 2px; overflow: hidden;">
<div id="tension-bar" style="width: 0%; height: 100%; background: #4285F4; transition: width 0.1s;"></div>
</div>
</div>
</div>
<video id="input_video" style="display:none"></video>
<script>
// --- Three.js Setup ---
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
camera.position.z = 30;
// --- Particles Setup ---
const particleCount = 4000;
const geometry = new THREE.BufferGeometry();
const positions = new Float32Array(particleCount * 3);
const originalPositions = new Float32Array(particleCount * 3);
// 初期形状（球体）
for(let i = 0; i < particleCount; i++) {
const theta = Math.random() * Math.PI * 2;
const phi = Math.acos((Math.random() * 2) - 1);
const r = 10 * Math.cbrt(Math.random());
const x = r * Math.sin(phi) * Math.cos(theta);
const y = r * Math.sin(phi) * Math.sin(theta);
const z = r * Math.cos(phi);
positions[i*3] = x; positions[i*3+1] = y; positions[i*3+2] = z;
originalPositions[i*3] = x; originalPositions[i*3+1] = y; originalPositions[i*3+2] = z;
}
geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
const material = new THREE.PointsMaterial({ size: 0.15, color: 0x4285F4, blending: THREE.AdditiveBlending, transparent: true });
const particles = new THREE.Points(geometry, material);
scene.add(particles);
// --- Logic State ---
let currentTension = 0;
let targetScale = 1;
// --- MediaPipe Hands Setup ---
const videoElement = document.getElementById('input_video');
const hands = new Hands({locateFile: (file) => `https://cdn.jsdelivr.net/npm/@mediapipe/hands/${file}`});
hands.setOptions({ maxNumHands: 2, modelComplexity: 1, minDetectionConfidence: 0.5, minTrackingConfidence: 0.5 });
hands.onResults((results) => {
document.getElementById('loading').style.display = 'none';
if (results.multiHandLandmarks && results.multiHandLandmarks.length > 0) {
// 最初の検出された手の座標を取得
const landmarks = results.multiHandLandmarks[0];
// 親指(4)と人差し指(8)の距離を計算
const thumb = landmarks[4];
const index = landmarks[8];
const distance = Math.sqrt(Math.pow(thumb.x - index.x, 2) + Math.pow(thumb.y - index.y, 2));
// 距離を0~1のテンション値にマッピング（距離が近い=テンション高=収縮、遠い=拡散）
// 画面上の見かけの距離なので調整が必要
let t = Math.min(Math.max((distance - 0.05) * 4, 0), 1);
currentTension = t;
// 視覚フィードバック
document.getElementById('tension-bar').style.width = `${currentTension * 100}%`;
} else {
currentTension = 0.5; // 手がないときはデフォルト
}
});
const cameraUtils = new Camera(videoElement, {
onFrame: async () => { await hands.send({image: videoElement}); },
width: 640, height: 480
});
cameraUtils.start();
// --- Animation Loop ---
function animate() {
requestAnimationFrame(animate);
// テンションに応じてパーティクルを拡散・収縮
// tension 0 (近い) -> 小さくまとまる / tension 1 (遠い) -> 大きく広がる
const scaleFactor = 0.5 + (currentTension * 2.5);
targetScale += (scaleFactor - targetScale) * 0.1;
particles.rotation.y += 0.005;
particles.scale.set(targetScale, targetScale, targetScale);
renderer.render(scene, camera);
}
animate();
// --- UI Events ---
document.getElementById('color-picker').addEventListener('input', (e) => {
material.color.set(e.target.value);
});
// Resize Handler
window.addEventListener('resize', () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
});
</script>
</body>
</html>5. コード解説とカスタマイズ
生成されたコードのポイントを解説します。Antigravityを使用しない場合でも、以下のロジックは応用可能です。
1. MediaPipeによるジェスチャー認識
コード内の hands.onResults 関数が核心部分です。landmarks[4]（親指の先）と landmarks[8]（人差し指の先）のユークリッド距離を計算し、それを currentTension という変数に正規化して格納しています。AIはこの一連の計算式を「親指と人差し指の距離に応じて」という自然言語から導き出しました。
2. Three.jsとの連携animate() ループの中で、currentTension の値をパーティクル全体の scale（大きさ）に反映させています。targetScale += (scaleFactor - targetScale) * 0.1 という記述により、手の動きに対して数値が滑らかに追従する「線形補間（Lerp）」が実装されています。これにより、動きのカクつきを抑えた有機的な表現が可能になっています。
6. まとめ：AIと創る未来
今回は、Google Antigravity IDE（2026年モデル）のコンセプトをベースに、ハンドトラッキングAIアプリの実装手順を紹介しました。
重要なのは、私たちが「Canvasの初期化」や「ベクトルの計算」といった定型作業から解放され、「どんな体験を作りたいか」というクリエイティブな意思決定に集中できるようになることです。Gemini 3やClaude Opus 4.5のような高度なモデルは、もはや単なるコード補完ツールではなく、頼れる開発パートナーです。
まだAntigravityをお持ちでない方も、今回紹介したコードをVS Code等のエディタに貼り付けて、ぜひ「未来の開発体験」を先取りしてみてください。
この記事の自動化に使われた技術と思考法は、
すべて以下のアカデミーでインストールできます。
