クリエイティブ

【初心者】Antigravityの使い方|最短で初めてのアプリを完成させる手順解説

[PR]当サイトはアフィリエイトプログラムによる収益を得ています。

この記事は、プログラミングの知識がないアプリ開発初心者の方が、Antigravityを使って、最短で初めてのアプリを完成させるための記事です。

最短に特化して、余分な説明は最小限です。とにかく手っ取り早く、最短で、初めてのアプリを完成させたい方は、ぜひ読み進めてください。

この記事でわかること
  • Antigravityでアプリを作る最短手順
この記事のゴール
  • Antigravityのインストール・初期設定完了
  • 初めてのアプリを自分の手で完成させる

Step0:事前準備

動作環境

  • OS
    • Windows: Windows 10 以降
    • macOS: macOS 10.15 (Catalina) 以降(Apple Silicon Mac推奨)
    • Linux: Ubuntu 20.04 以降(または同等のディストリビューション)
  • RAM (メモリ)
    • 4GB以上(快適な動作には8GB以上推奨)
  • ディスク容量
    • 500MB以上の空き容量

必要なもの

  • Chromeウェブブラウザ
  • Gmailアカウント(個人用 Gmail アカウント)

以上を事前に準備しておきましょう。

Step1:Antigravityをインストールする

公式サイトからダウンロードする

antigravity.google」にアクセスします。

「Download for MacOS」ボタンをクリックすると、ダウンロードページに進みます。

自分の環境に沿うものをダウンロードしてください。

インストールを完了させる

ダウンロードが完了したら、dmgファイルを開きます。

「Antigravity.app」を「Applications」フォルダにドラッグ&ドロップします。これでインストールは完了です。

Step2:初期設定をする

アプリを起動してセットアップを始める

Antigravityを開きます。

「Next」をクリックしてセットアップに進みます。

セットアップの各項目を設定する

エディターテーマの選択

特にこだわりがなければ、DarkでOKです。

どれを選んでも機能に違いはありません。

エージェントの使い方の選択

画像の通り設定します。

エディタ設定

こちらも画像の通り設定します。

Googleアカウントでログインし利用規約を確認する

Googleアカウントでのログイン

「Sign in with Google」をクリックし、自分のGoogleアカウントでログインします。

利用規約の確認と承認

内容を確認した上でチェックボックスにチェックを入れ、「Next」をクリックします。

以上でセットアップは完了です。

Step3:アプリを作成する

画面の構成を把握する

セットアップが完了すると、Antigravityのメイン画面が開きます。

左側がエディターエリアで、作成されたファイルの確認や編集に使います。右側がエージェントエリアで、AIへの指示や会話はここで行います。

エージェントエリアの下部にはAIモデルを選択する箇所があります。

Gemini・Claude・GPTなど複数のモデルから選択できます。

作業フォルダを作成する

エディターエリア中央の「Open Folder」をクリックします。

Macの任意の場所に新しいフォルダを作成してください。今回は「FirstApp」という名前にします。

これで作業フォルダの準備は完了です。

プロンプトを入力する

エージェントに、作りたいアプリの内容を入力します。今回は「ポモドーロアプリ」を作ります。

プロンプト例は以下のとおり。

ポモドーロタイマーのアプリを作りたい。

入力できたら送信ボタンをクリックします。

計画を確認して承認する

エージェントがアプリの実装計画(Implementation Plan)を作成して提示してくれます。

内容を確認して問題なければ、「Proceed」をクリックして実装を開始します。

実装が進むと、エージェントからブラウザ拡張機能のインストールを求められることがあります。

Google Antigravityを使ってみる

これはエージェントが動作確認のためにブラウザを自動操作するために必要なものです。

「Install extension」をクリックしてインストールしてください。

実装が完了すると、変更されたファイルの一覧が表示されます。

内容を確認して「Accept all」をクリックすると、すべての変更が確定されます。

Step4:完成したアプリを確認する

アプリの起動方法をエージェントに聞く

できたアプリを実際に開いてみましょう。

開き方がわからない場合は、そのままエージェントに聞いてしまいましょう。

エージェントエリアの入力欄に以下のように入力します。

アプリの開き方は?

案内された手順の通りにアプリを開きましょう。

今回は、画面左側のエクスプローラーからindex.htmlをChromeブラウザにドラッグ&ドロップして開きました。

アプリを開いて動作を確認する

ブラウザでアプリを開きます。

「Start」ボタンをクリックしてタイマーが動くかどうか確認しましょう。

正しく動作していれば初めてのアプリ完成です。

初アプリ完成、次にできること

以上でAntigravityを使った初めてのアプリ作成は完了です。

今回の講座はいわば入り口。Antigravityを使いこなせばもっと便利なもの・自分の思い描くものを簡単に作ることができます。

ここまで体験してみて、「もっと実用的なアプリを作りたい」「自分のアイデアをどう形にすればいいか知りたい」と感じた方は、ぜひ感想や知りたいことの要望などお寄せいただければと思います。

要望があれば、役立つアプリを作るための考え方や、Antigravityをより使いこなすための具体的なTipsを更新していきます。