# Antigravity の操作で迷ったとき

Antigravity を初めて触る前提で、画面の見方と基本操作をまとめます。

---

## フォルダを開く

起動直後の画面の中央にある青いボタン「Open Folder」（フォルダーを開く）を押し、デスクトップに展開した `0826_handson` フォルダそのものを選択します。すでに別のフォルダを開いている場合は、上部メニューの「File」から「Open Folder」を選んでも同じです。画面表示は英語です。ファイル単体を開くのではなく、フォルダごと開くことが必要です。フォルダを初めて開くときは信頼確認のダイアログが出ることがありますが、自分で用意したフォルダなのでそのまま進めて構いません。

---

## 画面の見方

開いた直後の画面は4つの区画に分かれています。

- **左サイドバー（File Explorer）**: フォルダ内のファイル一覧です。`output/meeting-organizer.html` などをここから開けます。
- **中央（エディタ）**: 選んだファイルの中身が表示されます。研修中に自分で書き換える必要はありません。
- **下部（Terminal）**: コマンドを打つ欄です。プレビュー用にローカルサーバを立てるときに使います（この資料の最後の項を参照してください）。それ以外の場面では使いません。
- **右サイドバー（Agent タブ → Agent Manager）**: ここでAIに指示を出します。

---

## Agent Manager の3列

右サイドバーの Agent タブを開くと、Agent Manager が3列で表示されます。

1. **左列**: プロジェクト一覧と Playground。
2. **中央列（Inbox）**: これまでのやり取りがスレッドで並びます。各スレッドには Idle（待機中）／ Running（実行中）／ Blocked（止まっている）のいずれかの状態が付きます。
3. **右列**: プロンプトを入力する欄と、実行結果が表示される欄です。

指示を送ったあと、状態が Running から Idle に変われば完了です。Blocked のまま動かない場合は、いったん別の指示を送り直してみてください。

---

## モデルを選ぶ

チャット入力欄のすぐ下に、モデル選択のドロップダウンがあります。ここから「Gemini 3.5 Flash (Low)」を選んでください。選んだモデルは、その回の実行が終わるまで維持されます。既定のモデルが別のものになっている場合があるので、指示を送る前に毎回目視で確認する習慣をつけてください。

---

## チャットで指示する

右列の入力欄に、日本語で指示を書いて送信します。最初は軽い指示（例えば「output/meeting-organizer.html の行数を教えてください」）で応答が返るかを確認しておくと安心です。本番の修正指示は `hints/修正指示の書き方.md` の書式で送ります。

---

## 変更を確認する

Antigravity がファイルを書き換えると、変更箇所が差分として表示されることがあります。差分が出ている場合は、変更前後の行を見比べてから次の操作に進んでください。差分の見え方が分からない場合は、中央のエディタで該当ファイルを開き直せば最新の内容が表示されます。

---

## プレビューする

修正したHTMLを確認する一番早い方法は、Finder（Mac）またはエクスプローラー（Windows）から `output/meeting-organizer.html` をダブルクリックしてブラウザで開くことです。単一HTMLで外部依存がないため、この方法が最速です。Antigravity の中から確認したい場合は、チャット欄に `/browser` と入力する方法もあります。ターミナルからローカルサーバを立てて開く方法は、次の項にまとめています。

---

## ターミナルからローカルサーバで開く

ダブルクリックで開く方法のほかに、Antigravity のターミナルからローカルサーバを立てて開く方法もあります。**どちらの方法でも同じように動きます**ので、やりやすいほうを選んでください。

事前セットアップで Node.js を入れていただいています。ターミナルを開き、次のコマンドを実行してください。

```
npx serve output
```

ターミナルは、上部メニューの「Terminal」から「New Terminal」を選ぶと画面下部に出ます。

初回は `serve` というツールを取得してよいか確認されますので、`y` を入力して進めます。起動すると `http://localhost:3000` のようなアドレスが表示されますので、ブラウザで開いて `meeting-organizer.html` を選択してください。ファイルを書き換えたあとは、ブラウザの再読み込みだけで最新の内容が表示されます。

- 止めるときは、ターミナルの画面で `Ctrl` キーを押しながら `C` を押します。
- コマンドが見つからないという表示が出た場合は、Node.js のインストールが済んでいない可能性があります。その場合はダブルクリックで開く方法で進めてください。研修の内容はどちらの方法でも変わりません。
- ポートが使用中という表示が出た場合は、別の番号（`http://localhost:3001` など）で起動します。表示されたアドレスをそのまま開いてください。

