Antigravityを使って簡単なレスポンシブサイトを作ってみた

これはPC音痴かつビビりの私が、勇気を振り絞ってAntigravityとNode.jsを連動させ、レスポンシブサイトを作った記録です

色々な方に薦められてAntigravityをインストールしたのは良いのですが、自分がビビリなのでそこからどうしたら良いか暫く止まってしまいました。
ようやくnode.jsに連動させてどんどん作ったら良いと思いついたのはよいのですが、そもそも自分のPCにインストールされているnode.jsは「そのまま入れてしまった」もので、nvmで管理できるようになっておらず、これではAntigravityが自主的にプロジェクトを作成し各種ライブラリをインストールする際に、衝突が起きるのは必至という状況でした

それで、一度node.jsをアンインストールしてからnvmをインストールし、更にAntigravityでプロジェクトを作ってみたので、その顛末を記していきます

ただ、node.jsアンインストールについては以下のサイトをご覧ください
Node.jsを削除し、nvmで再インストールする

では、nvmのインストールからです

nvmのインストール

nvm-windows の導入と簡単な操作をやってみた
を参考に、

nvm-windowsのgithubページ
に行って、
新しいなりに安定していそうな
nvm-setup.zip
をダウンロードします

これを適切に解凍して、中のnvm-setup.exeをクリックし、
後は出てくるものを基本的に全部そのままで進めれば
インストールできます。

終わったら
コマンドプロンプトを開き、インストールしたnvmのバージョンが表示されることを確認しましょう。

nvm -version

node.jsのインストール

このnvmコマンドを使って、node.jsをインストールできます。
そのやり方としては

　最新バージョンをインストールする場合： nvm install latest
　特定バージョンをインストールする場合： nvm install (バージョン)

となります

なお、

nvm list available

で、インストール可能なnode.jsの一覧が取得できますので、まあ安定していそうなものを取得しましょう。

ここで注意！

以下の作業をしないと今後の作業でうまくインストールできない場合があります。注意しましょう

まずWindowsのPCですので、スタートメニューを左クリックして[設定]を開き、
上の検索窓に

UAC

と入力しましょう
これで
ユーザーアカウントの制御の設定
を開くことが出来ます

ここで、思い切って左のシークバーを一番下にしましょう。そうしないとAntigravityは「許可がありません」とエラーを出して止まってしまいます
少し怖いですが、作業の時間は我慢しましょう。作業が終わったらすぐ設定は戻す習慣を付けましょう

次に、一度これまで使ってきたターミナルを閉じて
ターミナル(管理者)を開きます

ここで、

Set-ExecutionPolicy RemoteSigned

と入力しないとnpmをインストールできなくなります。
これも怖いですが、作業の時間は我慢しましょう
終わったら

Set-ExecutionPolicy Restricted -Scope CurrentUser
で、戻しましょう

cdコマンドなどでプロジェクトを作りたいディレクトリに移動してから

nvm use 24.13.0

などと入力すると、node.jsとnpmがインストールされます

出来たら

node -v
npm -v

で、バージョンが出てくるようになれば成功です！

Antigravityのインストール

Antigravityのダウンロードサイト
から、Windows用のDownload for x64
をクリックしてダウンロードし、クリックして順に進めば
インストールできます

インストール出来たら、アプリの初期設定を適当に終わらせてから
Google アカウントでログインしましょう
使えるようになります

終わったら、Antigravityを日本語化しましょう

GoogleAntigravity 日本語化3点セット

メニューの日本語化

Ctrl + Shift + Pでコマンドパレットを開き、
「Configure Display Language」を選び日本語を選びます

AI応答言語の日本語化

私はGEMINIを言語に選んだのですが、
GEMINI.mdに

回答は常に日本語で行ってください

と書くだけで、無事に動きました

ドキュメントの日本語化と自動保存

# 回答言語およびプロジェクトドキュメント保存ルール

## 基本方針
- 特に指示がない限り、日本語で回答する。  
- 以下のドキュメントも**日本語で作成する**：  
  - 実装計画 (Implementation Plan)  
  - 修正内容の確認 (Walkthrough)  
  - タスクリスト (Task List)
  
## ドキュメント生成ルール
- **複雑なコード変更や新規機能の実装を伴わない** 単純な質問や情報取得タスクの場合、**ドキュメント (`task.md`, `implementation_plan.md`, `walkthrough.md`) は生成しない**こと。
- 特に、モデルが **Fast** の場合は、ドキュメント生成の省略を推奨する。
- ドキュメントを生成する必要がある場合は、ユーザーの明示的な許可を得ること。

## ファイル構成
- チャット内で作成した以下の3つのファイルを保存する：  
  - `task.md`  
  - `implementation_plan.md`  
  - `walkthrough.md`  

## 保存場所
- プロジェクト内の `docs` フォルダの下に新しいフォルダを作成する。  
- フォルダ名はこのチャットのトピックを表す適切な英語名とし、スペースはアンダースコアで区切る。   

これで一応は納得して使っております

使ってみる

Antigravity使ってみた
を参考にしております

アプリを開いた状態で、

ctrl + E

と入力すると、もう1つ「エディタ」が開きます

ここにNew conversation in と表示されますので、
そこに普通のチャットAIと同じように会話できます

まずプロジェクトのディレクトリパスを提示して、そこに誘導してあげてから
ここで

現在使っているディレクトリにnew_ag_project1という名前のフォルダがあると思いますが、
その中にNext.jsのプロジェクトを作って下さい

プロジェクトルートに .nvmrc を作成し 24.13.0 と記載してください。
PowerShellで .nvmrc のバージョンを読み取って nvm use してください（UAC通知なしに今はしました）。
node -v でバージョンが上記バージョンであることを確認できたら、npx create-next-app@latest ./ でプロジェクトを構築してください

などと入力すると、無事にプロジェクトを作ってくれます

そして

ではこのプロジェクトを実行してください

で、サーバーを始動します。ここでポート公開がOKか聞かれますが、怖いですがOKにして下さい

そして
http://localhost:3000
をブラウザで開き、無事動いていることを確認したら

このプロジェクトを止めてください

で、サーバーを止めてくれました

PC画面でヘッダー+フッター+3カラム、スマホ画面でヘッダー+フッター+「PC画面なら左カラムの部分がスマホ画面で左ドロワー、PC画面なら右カラムの部分がスマホ画面で右ドロワーになるようにする」

サブタイトル長いですね

上記の作ったプロジェクトに対して

PCなどのブラウザで見て見やすいようなデザイン、具体的には
PCモニターサイズの画面で見て、
ヘッダー・フッター・3カラムのあるレイアウトに出力されるように、このアプリを作り直してください

ところで、どのファイルを直したかも最後に教えてください

などと入力してみると、無事に作ってくれました

更に

このブラウザアプリを、

PC用のモニターサイズで見た時はデザインがそのままで、
スマホで見た時は、3カラムのうち左カラムは[左ドロワー]に、
右カラムは[右ドロワー]になるように、改造してください

などと入力すれば、古臭いレスポンシブサイトの完成です

もちろんセキュリティ面などで色々ありますので、注意してお使いください

最後に

安全のため、

ユーザーアカウントの制御の設定

で、シークバーを上から2番目に戻す

Set-ExecutionPolicy Restricted -Scope CurrentUser

で、迂闊にpowershellファイルを外部に実行させないようにする

これは守りましょう