MENU

【これならわかる!】Antigravity使い方の基礎「電卓」を作る

アイキャッチ

「Antigravityをインストールしたけど何をしたらいいのかわからない」
「なにか指示を出すとRunとかProceedとか出てきて止まってしまう。そのボタンを押していいのかわからない」

と、Antigravityを使用するのをためらっていませんか?

いち関係者の私

私もそうでした。

なによりあの黒い画面。

意味不明なアルファベットがものすごい勢いで書かれていくのにはビビりますよね。

しかし安心してください。

Antigravityは生成AIが考えている過程を可視化しているだけで、普段Geminiを使っていても同じようなことは起きているのです。

筆者は地域の生成AI講座でAntigravityのすごさと可能性について紹介をしています。

ある人は「鳥肌がたった!」と感動していました。

この記事ではそんなAntigravityの使い方について、具体例を上げながら使い方の初歩を詳しく解説していきます。

この記事を読んでわかること
  • Antigravityアプリ開発「はじめの一歩」
  • 「電卓アプリ」の作り方
  • アプリ起動の方法
  • 「電卓アプリ」機能追加のやり方

では行ってみましょう!

※この記事はインストールと初期設定が完全に終了していることを前提にしています。
まだの方は「【ちょー初心者向け】Antigravityのインストール方法」を参考にしてください。

目次

Antigravityの使い方|そもそもAntigravityとは

パソコンを見てる女性

Antigravityは、2025年11月に登場したプログラミング不要でアプリなど作ってくれるGoogleの新しいAIツールです。

たとえば「簡単に使える電卓アプリを作って」と頼むと、AIが自分で考えて形にしてくれます。

いち関係者の私

プログラミングの知識がない初心者でも、まるで魔法のようにツールを作ることができるのです。

Antigravityはその設計思想の斬新さで「今、最も熱いAIツール」と言われているのです。

「Antigravityさん🤵🏻‍♂️」がいると考える

楽しげにパソコンを見ている女性

イメージとしては、「Antigravityさん🤵🏻‍♂️」という優秀な人物が、開発パートナーとしてあなたのパソコンの中にいるようなものです。

あなたが「こういうものを作りたい」と指示を出すと、Antigravityさん🤵🏻‍♂️が代わりにキーボードを叩いてAIに指示し、設計図を書いて、「これでいいですか」と聞いてくれます。

あなたは「いいですよ」「いや、もっとこうして」と指示を出すだけです。

さっそくAntigravityさんに頼んでアプリの開発をしましょう。

h2:Antigravity使い方その前にひとつ準備

アプリ開発を行う前に一つだけ準備をしましょう。

Antigravityは、あなたのパソコンの中に様々なファイルを作りながら作業をします。

いち関係者の私

そのファイルが散らからないように、あらかじめフォルダを作っておきましょう。

自分のパソコンの中の適当な部分、Macならば「書類」あたりが適当だと思うのですが、そこにフォルダを1つ使い作ってください。

名前は何でもいいのですが、アプリ開発をしますのでここでは「kaihatsu」としておきましょう。

必ずアルファベットを使ってください。スペースキーは使わないでください。

kaihatuフォルダの画像

Antigravityの使い方「電卓アプリ」を作ろう

ディスプレーを見つめる女性

では最初のアプリを作ってみましょう。

いち関係者の私

ここでは「電卓」を作ります。

ネットを見ると「こんなすごいことができます!」のような記事がありますが、初心者にはハードルが高いことが多いのです。

まずはAntigravityがどんな挙動をするのか簡単なアプリで試していきましょう。

次の手順で詳しく解説します。

  1. Open Folderから「電卓」専用フォルダをつくる
  2. エディター画面について
  3. いよいよプロンプトを入れる!その前にモデルを確認
  4. 「電卓」を作る最初のプロンプト
  5. 黒い画面にアルファベットがものすごい勢いで表示!
  6. 「Run」と出て突然ストップする
  7. 今度は「Accept All」
  8. 電卓アプリはどうやって使うのか?
  9. つまずいたらAntigravityに聞く
  10. 「http://localhost:8765」と出ているが公開しても大丈夫か聞く

ステップが多いと感じるかもしれませんが、最初ですので、誰にでもわかるように細かく分けています。

では早速作ってみましょう。

Open Folderから「電卓」専用フォルダをつくる

ウインドウに下図のような「Open Folder」が出ているでしょうか。

出ていない方は「ファイル」から「新しいウインドウを作る」を選んでください。

画面が出てきたら、この青い部分のOpen Folderをクリックします。

Antigravityのopen folderのスクショ

ここから、先程作成した「kaihatsu」フォルダを探します。

Macのファインダー画像1

そして新規フォルダをクリックし「dentaku」というフォルダを作成します。

いち関係者の私

「開発」プロジェクトの中の「電卓チーム」というイメージですね。

下図では「Dentaku」と大文字が入っていますが、あまり好ましくありません。皆さんは小文字で書いてください😅

dentakuを新規で開こうとしている画像

「電卓アプリ」をつくるので「dentaku」としてわかりやすくしています。

すると

dentakuフォルダを選択している画像

こうなりますので、「開く」をクリックします。

dentakuのエディタ画面

ウインドウタイトルが「Dentaku」になっているのがわかります。

この状態になればAntigravityが「dentaku」の中にアプリを作ってくれます。

他にも例えばタイマーアプリをつくるときには「timer」フォルダを作るわけです。

いち関係者の私

ファインダーであらかじめ作っておいても構いません。

これであなたのAntigravityは「Dentaku」フォルダの中にアプリを作成するはじめの一歩が整いました。

エディター画面について

上の画面をエディター(Editor)画面といいます。

Antigravityはこの「エディター画面」と「エージェントマネージャー画面」がありますが、今回はこのエディター画面を使用します。

そしてこのエディター画面には3つの部分があります。

  • 左:エクスプローラー(「どのファイルがあるか」を探す場所)
  • 中:エディターまたはコードビュー(「ファイルの中身」をいじる場所)
  • 右:サイドパネル / チャットバネル(「AIに相談・命令」をする場所)

使用するのは主に右のチャットパネル、そしてその下のチャット欄です。

いち関係者の私

ここに従来のGeminiと同じように指示を書き込むことでアプリを作ります。

作り始めると、エクスプローラーとコードビューにたくさんの文字が出てきますが、今回はとりあえず眺めておく程度で大丈夫です。

いよいよプロンプトを入れる!その前にモデルを確認

いよいよプロントを入れられるようになったのですが、その前にもう一つだけ確認です。

それは右下のチャット欄に見えるところにある+マークです。この左側をクリックすると「Conversation Mode」が出てきます。ここにはPlaningとFastがあります。

Antigravityのチャット欄モデル選択

今回はPlaningを選んでおきましょう

簡単な作業をさせるにはFastで良いのですが、今回は1番最初の使用ですので、きちんと動くようにPlaningにしておきましょう

次にその右側「Model」です。これも様々なものを選ぶことができます。

Antigravityのチャット欄モデル選択2

今回はGoogle Gemini3.1Pro(High)を選んでおきましょう

いよいよプロンプトを入力します!

「電卓」を作る最初のプロンプト

「基本的な四則演算ができる電卓アプリを作ってください」

これだけです。

いち関係者の私

ここまでの手間を考えたらあっけないほど簡単です!

チャット欄への指示文の画像

黒い画面にアルファベットがものすごい勢いで表示!

初心者はこれにびっくりします。

「大丈夫か?」と思うのです。

いち関係者の私

私もそうでした

安心してください。大丈夫です。

Antigravityが「電卓」を作るためにコードを書いてくれているのです。

「Run」と出て突然ストップする

ここで私の場合(Antigravityはその時々で違う動きをします。同じようには動きません)は、下図のように「Run」という青いボックスが出て進行がストップしました。

エディタ画面Runでストップしている

壊れたのか?

と心配になりますが、これがヒューマン・インザ・ループという考え方のもとで導入されているAntigravityでの制作過程です。

ヒューマンインザ・ループとは人間がAIのアプリ制作過程のなかに入り、進行許可を出していくものです。

詳しくは「【ちょー初心者向け】Antigravityのインストール方法」を参考にして下さい。

いち関係者の私

Antigravityが「こんな風に作る予定ですが、本当に進めていいですか」と聞いているのです。

この画面のように日本語で出ていれば比較的わかりやすいので一度よく読んでみましょう。

今回はとにかくアプリを作るわけですから、「Run」を押します。

今度は「Accept All」

しばらくすると今度は「Accept All」が出てきました。

Acceptの上を読むと「もう完成しました」と出ていますね。

いち関係者の私

「もう終わったので了承して確認してください」ということですね。

「Accept All」をクリックします。

電卓アプリはどうやって使うのか?

ところで、電卓アプリはどこに生成されたのでしょうか。どうやって使うのでしょうか。

Accept Allの上のところをよく読むと

「ローカルサーバーがポート 8765 で立ち上がりました!ブラウザを開いて、以下のURLにアクセスすると電卓アプリが使えます: 👉 http://localhost:8765」

と書いてあります。

弟子

ナンノコッチャ?

と、思いますよね。

つまずいたらAntigravityに聞く

Antigravityに聞いてみましょう。

「ローカルサーバーがポート 8765 で立ち上がりました!ブラウザを開いて、以下のURLにアクセスすると電卓アプリが使えます: 👉 http://localhost:8765」と書いてありますが、詳しくやり方を教えて下さい。

アプリの立ち上げ方の質問

すると

アプリの立ち上げ方の答え

ですから早速

「http://localhost:8765」これをChromeに入れてみます

ブラウザのアドレスバースクショ

すると

来ました!!

電卓アプリのスクショ

ポチポチと触ってみるとたしかに電卓です!!!

「http://localhost:8765」と出ているが公開しても大丈夫か聞く

ところで、http://localhost:8765というアドレスがこの記事に出てしまうので、次のように聞いてみました。

アドレスを公開する安全性の質問チャットのスクショ

こんな風に心配なことはすべてAntigravityに聞くことができます。

ちなみにこのような質問はFastで大丈夫です。

Antigravityの使い方|電卓の機能を追加する「べき乗」と「一次関数グラフ」

女性が一次関数のグラフを見ている
いち関係者の私

私が電卓を使う時にいつも迷うのが「べき乗」です。

たまにしか使わないので、どの順番にボタンを押すのか分からなくなるのです。

そこで、分かりやすくするためのボタンを作ってみましょう

次の指示をチャット欄に入れます

追加で次の2つの機能を加えてください。
1.べき乗: 「aのn乗」を表すボタンをつくり、a=、n=、と聞いてくるように設定してください。
2.y=ax+bのグラフを描けるようにしてください。a=、b=、と聞いてくるように設定してください

グラフを書く機能もついで入れるように指示をしました。

しばらくして作成が終わると次のように「walkthrough」が出てきます。

walkthroughのテキストスクショ

ここで出ているwalkthrough(ウォークスルー)」とは、ITや開発の分野では「一通りの手順や内容を順を追って説明するまとめ」のことです。

「確認方法」にある通り、このアプリはkaihatu→dentaku→iindex.htmlというファイルをクリックすると起動するようになっています。(ChromeなどのWEBブラウザで開きます。)

起動してみると下記のようになります。

あたらしい電卓アプリスクショ

anとGraghというボタンが追加されています。

anをクリックすると

べき乗の指示を出す窓

と出てきます。

いち関係者の私

これなら間違えずにべき乗を入力できます。

Graghもこの通り

関数の「傾き」を入れる窓

a=3、b=5を入力すると

一次関数グラフのスクショ

完璧ですね。

まとめ|なぜAntigravityを使うのか

女性が窓辺で微笑んでいる

今回紹介した使い方はAntigravityのほんの入り口です。

同じような電卓アプリはGemini-canvasでもgoogle AI studio-Buildでも作ることができます。

電卓だけならそちらの方が開発しやすいでしょう。

では、どうしてAntigravityを使うのでしょうか。

いち関係者の私

次のようなことが実現できるからです。

電卓で計算させた計算履歴をファイルとして残しておく。

弟子

えっ、それだけ?

と思うかもしれません。

まとめに変えて最後にこのことを説明しておきましょう。

Gemini-Canvasなどで作ったブラウザのアプリには「書き込み禁止」の鉄の掟があります。

Webブラウザ(SafariやChrome)は、セキュリティのために「勝手にパソコンの中のファイルを書き換えてはいけない」という非常に厳しいルールを持っています。

もし、ブラウザが勝手にファイルを作ったり書き換えたりできたら、怪しいサイトを開いた瞬間にウイルスを勝手に書き込まれてしまうからです。

ところがAntigravityは、パソコンの中でファイルを作ったり、書き換えたりすることができてしまうのです。

もちろんユーザーの許可を取っています。

途中で出てくるRunやProceedなどがその「許可」にあたるのです。

このことを理解しておくとAntigravityの本当のすごさがわかってきます。

Canvasなどでは実現できなかった、「〇〇がしたい!」という希望をいろいろかなえることができるようになるのです。

今まではその技術は一部のプログラマーだけのものでした。

いち関係者の私

私のようなものは全く手が出ませんでした。

しかし、Antigravityによって私でもできるようになったのです。

今回、あなたもその世界への入口に立ったことになります。

一緒に頑張って行きましょう!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

目次