Google Antigravityをインストール、アプリを作ってみる

1. はじめに

晴れてMAC miniを手に入れました。ureshiiiiiiii
ということで、ここ最近急速に成長しているAIに追いつくべく、勉強不熱心なりにAntigravityを取り入れます。

Antigravityをダウンロード

以下からDownload for Apple Siliconを選択してダウンロードします。

Antigravityをセットアップ

初期設定

どんどん進みます。

今回はStart freshを選択します。

• Start fresh：イチから設定
• Import from VS Code：VS Codeの設定を引き継ぐ

画面カラーはお好みで選びます。

ユーザとAIの権限配分を決めます。今回はReview-driven developmentを選択します。これはAIの操作はすべてユーザの承認が必要というものになります。

• Secure Mode（セキュアモード）
  • 最も制限が強いモードです。AIによるコードの実行や変更に対して、常に厳格なセキュリティ制限をかけたい場合に選択します。安全性を最優先し、勝手な動作を最小限に抑えます。
• Review-driven development（レビュー駆動開発）【推奨】
  • AIが何かを実行（ターミナル操作やJavaScriptの実行など）しようとするたびに、ユーザーに「レビュー（承認）」を求めます。
• Agent-driven development（エージェント駆動開発）
  • レビューの頻度を減らし、AIが自律的にタスクをこなす範囲を広げます。
• Custom configuration（カスタム設定）
  • 「ターミナルの実行は自動でいいけど、JavaScriptの実行は毎回確認したい」といったように、右側のポリシー項目を個別に設定できます。

次はデフォルトで進みます。

Googleサインインします。

ログイン完了後、ポリシー同意のためチェックを入れて次に進みます。

これでAntigravityの初期設定は完了です。

日本語設定

左側一番下のMarketplaceにて、日本語が使えるようにするためJapanese Language Packをインストールします。
インストール後左下に言語の変更と再起動のポップアップが出てくるので、そのボタンを押下します。

再起動すると画面は日本語設定になります。
続いて、チャットの設定も日本語にするため、右上のアイコンから右が塗りつぶされている四角をクリックしてチャット画面を開きます。
三点リーダーからCustomizationsを押下します。

CustomizationsのなかにRulesが表示されるので、+Grobalを押下します。
表示された画面に、返答はすべて日本語で行なってくださいと記述し、Rulesの横の丸矢印を押下して、設定を更新します。

Agent残機確認のための拡張機能

無料モードの場合、Agentの利用には上限があります。しかし残りどのくらい利用できるかを確認することができないので、それを確認するための拡張機能を追加します。
MarketplaceにてAntigravity Cockpitをインストールします。

右下に追加された項目にポインターをあてると、残りAgentがどのくらい利用できるかを確認できるようになります。
また押下してあげると、設定画面が開き、AgentごとのGroupを作成することができます。最初はデフォルトで設定されているので、お好みにカスタマイズしましょう。
また

Antigravityでアプリを作ってみる

まずはOpen Agent Managerを押下します。

Agent Manager画面が出てきます。

Start new conversation横で、WorkspacesかPlaygroundかを選択することができます。（今回WorkspacesとしてAntigravityというフォルダを追加しているので、画像ではそれが表示されています）

• Workspaces；フォルダ
• Playground：特定のフォルダのセットアップが不要で、一時的な遊び場（Sandbox）のような領域で作業が可能です。作業の結果をWorkspacesに昇格させることも可能です。
  

Agentの利用時はモードが二つあるので、好きな方を選択します。

• Planning：複雑なタスクや、慎重に進めたいときに適しています。
  • 動作: コードを書く前に、まず「タスクリスト」や「実装計画（Implementation Plan）」というドキュメント（Artifacts）を作成し、ユーザーに提示します。
• Fast：単純な作業や、スピードを優先したいときに適しています。
  • 動作: 計画書を作らず、指示を受けたら即座にコードの編集やコマンドの実行を開始します。
    

好きなエージェントを選択して、指示を与えます。
今回はタスク管理アプリを作成してもらいます。（タスク管理アプリを作成してください。）
しばらく待った後Open Editorが表示されるので押下します。

アプリ実装計画書が作成されるので、内容を確認します。

また計画書とは別に、どのようなTaskアプリになるかを例として作成してくれています。（右のチャット欄から選択できます）

もし要望があれば、追加で変更要望を出すことができます。
問題がなければ、Proceedを押下して実装を開始します。

作業の途中に確認が入るので、問題なければconfirmを押下します。
こうして作業を進めていき、自動的にタスク管理アプリが完成しました。

タスクの追加、編集、削除、入れ替えができるようになっています。
しかしブラウザ上での動作なので、またこれをMacデスクトップアプリ、そして将来的にはiOSモバイルアプリにしていきたいと思います。

最後に

アプリをほいほいつくることに少し抵抗がありましたが、こんなに簡単にAIが作ってくれるなら、自分が使いたいアプリをどんどん作っていこうと思いました。
少しずつAI関連の知識を深めていきたいと思います＾＾

Appendix

ここにMacアプリ、iOSアプリに進化する様子を記載していこうと思います〜。

🐣ME「これはブラウザ上でしか動作しないの？」

🤖AIの回答↓

- 現在の状態
    - HTML/CSS/JavaScriptで構築されたWebアプリ
    - ブラウザでfile://プロトコルまたはWebサーバー経由で動作
    - LocalStorageを使用してデータを保存

他のプラットフォームで動作させる選択肢
このアプリを他の環境で動作させたい場合、以下のような選択肢があります:

1. デスクトップアプリ化 🖥️
    - Electronを使用してWindows/Mac/Linux用のネイティブアプリに変換
    - 既存のコードをほぼそのまま使用可能
    - メリット: スタンドアロンアプリとして配布可能
2. モバイルアプリ化 📱
    - CapacitorやCordovaを使用してiOS/Android用アプリに変換
    - PWA (Progressive Web App)として対応
    - メリット: アプリストアで配布可能
3. Webサーバーでホスティング 🌐
    - GitHub Pages、Netlify、Vercelなどでホスティング
    - どこからでもアクセス可能
    - メリット: インストール不要、URLでアクセス
4. PWA (Progressive Web App) 📲
    - Service Workerとマニフェストファイルを追加
    - ブラウザから「ホーム画面に追加」でアプリのように使用
    - メリット: オフライン対応、プッシュ通知可能

🐣ME「一旦Mac用でデスクトップアプリ化してほしいです。将来的にはIOSのモバイルと同期して使えるようにして欲しいです。」

🤖AIの回答↓

（諸々省略してます）
- 段階的アプローチ（今回はローカルアプリ、将来クラウド同期）で問題ないか
- ブラウザからのデータ移行機能の必要性
Implementation Plan📝
    Electronを使用したMac用デスクトップアプリ化の実装計画。既存のWebアプリをネイティブアプリに変換し、将来的なiOS同期機能のための基盤を整備する。段階的なアプローチで、まずはローカルストレージを使用したスタンドアロンアプリを構築。

承認すると、アイコンの作成やアプリの基本構成の作成をしてくれました。
その後依存関係のインストールに進みましたが、なんせ新規MACなもので、homebrewやnpmなどなにもインストールしていない状態なので作業が進みませんでした。
そこはAIと連携しながらインストールを進めていきます。