Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

This article is a Private article. Only a writer and users who know the URL can access it.
Please change open range to public in publish setting if you want to share this article with other users.

Google Antigravity で Material 3 Expressive 風のタイマーアプリを作ってみた

0
Last updated at Posted at 2025-12-09

お知らせ

この記事は 公立はこだて未来大学 Advent Calendar 2025 Part 3 の記事です。 kCat 氏に誘われたので急遽飛び乗りで参加させていただきます。
(Part 1: こちら / Part 2: こちら)

なお、本記事は未来大生限定公開としますので、外部への共有はお控えください。

自己紹介

「誰だお前」 という声が四方八方から聞こえてきそうなので、自己紹介を簡単に書きました。

  • 筆者: Girky0815 (公立はこだて未来大学 情報システムコース 学部4年)

    • 特にSNSをやっていないためハンドルネームはありません。GitHubやゲームでのユーザー名を書かせていただきます。
  • 出身地: 北海道函館市

    • 函館市で来春より公務員として就職するので、函館から生涯出ないと思います。
  • 趣味: ゲーム(Warframe等、TPSや音ゲーなども。いずれも弱い)、アニメ鑑賞(1クール3~5本程度)、生成AIに丸投げしてのアプリ制作(いわゆるバイブコーディング)。

  • サークル: 所属なし

    • 学業優先を貫いたらこうなりました(成績は通算GPA2.6と普通です)
  • その他学内活動: TAをやっていました(25年前期システム管理方法論、25年後期プログラミング基礎ABクラス)。

    • 受講生の役に立てたかは微妙でしたが...
  • 好きなデザイン: Material 3 Expressive(奇抜すぎないもの), Material 3, Fluent Design. あえて言うなら デジタル庁デザインシステム(Material Designに類似か)

    • アプリ等のUI/UXにはうるさい方だと思います。
  • ひとこと(?): SNSは一切やっていません。多分自閉症です(自覚症状たくさん)。あまりプログラミングはできないほうです。

以前気まぐれで作った自己紹介サイトのプロフィール(2025年6月に更新したきりですが)

はじめに

2025年11月18日、Google は Gemini 3 Pro のリリースに合わせて、新エディター 「Google Antigravity」 を公開しました。

普段から趣味でバイブコーディングにより自分用のアプリ制作をしている私は、「最新のAIエディターの実力はいかほどか?」と強い興味を持ちました。そこで本記事では、Antigravity をフル活用(というか、ほぼ丸投げ)して自分のためのアプリを開発しましたので、その使用感を共有させていただきます。

アプリ制作の動機

ことの発端は、大学の卒業研究中間セミナーの発表練習でした。指導教員の先生が練習用にプレゼンテーション用タイマーを使っていたのですが、「自分も同じようなものが欲しい」と思ったことです。

すぐに Google Play を探してみましたが、私の環境(Windows と Android の両方で使いたい)に合致する「良さげな」アプリが見当たりません。「なければ作ればよい、ついでに新しいエディタも試してみたい」という、割としょうもない動機で制作を開始することにしました。
もちろん制作開始は中間セミナー後です(流石に発表練習中にやるほどの余裕はないです)。

注意事項

  • 作者はアプリ制作の素人です。
  • コーディング能力があまりないのでコードの9割はGeminiが書いています。
  • 色々ツッコミどころがあるかもしれませんが、生ぬるい目で見てもらえますと幸いです。

作ったものの紹介

まずは完成品(というより現時点での最新版)の画面をご覧ください。

image.png

↑図1 Windows版タイマー画面

image.png

↑図2 Windows版設定画面

image.png

↑図3 おまけのカラーパレット画面(アプリ内で使用している色一覧)

↑図4 Android版(横画面は非推奨)

今回開発したのは、**「プレゼンタイマー Prime (仮)」**というアプリです。

※命名センスについては触れないでください。私が好きなゲーム『Warframe』に出てくる、上位版アイテムに付けられる呼称である「Prime」を付けただけです。 実態は、先生や学生がよく使っているこの iOSアプリをリスペクト(いわゆるパクリスペクト)したタイマーアプリです。Warframe 風の命名をするなら下位互換である「MK-1」を使って「MK-1 プレゼンタイマー(仮)」にしておいた方が良かったかもしれません。

機能面でのこだわりとしては、Material 3 Expressive 風のデザインを採用している点です。Windows 11 (x64) および Android 12L以上 (arm64) で動作するように作成しました。

一応ダークテーマにも対応しています。作者はダークテーマが苦手なのであまりテストできていないのですが、問題なく動作することを確認しています。

使用した技術・環境

今回の開発で使用した主要なツールと技術スタックについて解説します。

1. 開発環境: Google Antigravity

今回の主役である、Google 製の新しいコードエディターです。Visual Studio Code (VS Code) をベースとしているため、操作感は馴染み深く、VS Codeと共通するUIの日本語化も拡張機能で可能です。

最大の特徴はやはり Gemini 3 Pro を統合した強力なAI支援機能でしょう。現在はパブリックプレビュー版として公開されており、レート制限もかなり緩いため、無料でかなり使い倒すことができます。導入方法についてはクイックスタートの記事などが参考になります。

私は6月頃にGoogleが展開していた太っ腹な企画、Google AI Pro 学生1年間無料を申請して利用していたので、緩いレート制限で利用できました。Google AI Pro は月2,900円と高いですが、これに加入していなくても1週間ごとにレートは回復し、ある程度は使えるらしい(具体的な回数等は書いていないため不明)です。
個人的には、大学卒業後(=Google AI Pro非加入)は週末に個人開発する、という具合ならよさそう。

2. フレームワーク: Flutter

アプリ本体は Google 開発のオープンソースUIフレームワーク Flutter (Dart言語) を採用しました。単一のコードベースから Android, Windows, Linux, Web といったマルチプラットフォーム向けにビルドできるのが強みです。

マルチプラットフォームについて

言うまでもないと思いますが、そのプラットフォーム向けの環境構築(Android なら Android SDK のインストール、Windows なら Visual Studio のビルド環境)が必要です。

↓必要なものはflutter doctorで確認できます。

> flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel beta, 3.39.0-0.2.pre, on Microsoft Windows [Version 10.0.26200.7309], locale ja-JP)
[✓] Windows Version (11 Home 64 ビット, 25H2, 2009)
[✓] Android toolchain - develop for Android devices (Android SDK version 36.1.0)
[✓] Chrome - develop for the web
[✓] Visual Studio - develop Windows apps (Visual Studio Community 2022 17.14.20)
[✓] Connected device (3 available)
[✓] Network resources

• No issues found!

※iOS や macOS向けのアプリを作ることもできますが条件が非常に厳しく、XCode をインストールした Mac PC が必要らしいです。

今回は依存関係周りの面倒なエラーで悩まされたくなかった(ハルシネーションに左右される傾向がある)というのと、マルチプラットフォームで開発できる(= Windows 用にも Android 用にも作れる)ことから選択しました。

3. デザイン: Material 3 Expressive

デザインには、2025年5月に公開された最新のシステム Material 3 Expressive を採用しました。これは従来の Material 3 よりも「遊び心のあるUI」を目指しており、フォント使いや形状、色使いが特徴的です。Google Pixel 6以降 (Android 16 QPR1~) のUI(設定、Pixel天気等)や、Google製のアプリ(電卓、ウォレット、Files、GMail等)で採用されており、一部のアプリでも採用例が少ないですが採用されています。

しかし、Flutter 純正コンポーネントでの完全対応はまだ行われていなかったため(現在、Flutter のコードから Material Design の分離を行っているようです。この対応が終わってから対応させるらしいので、対応は来年以降でしょうか)、今回は以下のカスタム実装を行いました。

  • フォント: 可変フォント軸を活用できる Google Sans Flex と、フォールバック用に Noto Sans JP を採用。Google Sans Flex は Google のブランドフォントであり、Google PixelのUIでも使われています。これらは SIL Open Font License なので自由に利用できます。

  • デザイン(角丸の項目やカラースキーム等): 既存のOSSコンテンツの例を参考に実装しました。

  • ダイナミックカラー: OSのアクセントカラーを抽出し、アプリ全体の色設定を自動生成する仕組みを導入。

    ↑図5 ダイナミックカラーをONにした画面(Android 16, デフォルトの青)

「Material 3 Expressive ダサい」というGoogle検索候補もありますが、私は奇抜すぎなければ見やすいので気に入っています。

4. GitHub Actions の利用

アプリのビルドとリリース作成のフローは GitHub Actions で自動化しました。特にこだわったのは、リリースの下書きにビルド成果物を自動配置しつつ、自分でパッチノートを書けるように、リリースを下書き状態にするよう設定した点です。
パブリックリポジトリなら無料(?)らしいので、ここぞとばかりに利用してみました。

Google Antigravity を使ってみた感想

さて、ここからが本題です。実際に Antigravity を使ってアプリを一本作りきってみて感じた、手触りやAIの実力について正直に書いていきます。

エディターとしての使い心地

ベースが VS Code なので、移行コストはほぼゼロでした。普段使い慣れている拡張機能もそのまま使えますし、操作に迷うことはありません。それでいて、サイドバーには常に賢いAIが待機しているという安心感があります。

Gemini 3 Pro のコーディング能力

肝心のコーディング能力ですが、結論から言うと**「かなり優秀」**でした。

【ロジックの実装】
「タイマーのカウントダウン処理を書いて」と指示すれば、概ね一発で動作するコードが返ってきます。バグがあった場合も、症状を伝えるだけで修正案を計画・提示してくれ、承諾すれば自動で修正されます。構文エラーや括弧の閉じ忘れ程度なら、こちらが指摘するまでもなく勝手に直してくれていました。

また、比較的新しい概念である Material 3 Expressive についても、ある程度「それっぽいUI」を生成できました。AIも完全に理解しているわけではなさそうでしたが、「この色を使って」「ここをもっと丸くして」と具体的に指示を出すことで、理想のデザインに近づけることができました。あとは、実際にMaterial 3 Expressiveを利用しているリポジトリを参照させて真似させるような手法により、再現度を高めていきました。

↑図6 アプリのUI(左)と Google Pixel の設定UI(右)の比較
Material 3 Expressive を採用した Google Pixel の設定画面と比較してもほぼ同じような仕上がりになりました。
背景色が若干違いますが、少し濃いほうがコントラストが高まり見やすいと思ったのでそうしています。

開発スピードの変化

開発体験は劇的に変わりました。コードブロックのコピペ作業(生成AIにコードコピペ/ファイル添付して作業指示、レスポンスからコピペしてエディターへ)から解放され、構文エラーによるイライラもよほどのことがない限り勝手に直してくれるので激減しました。GitHub Actions のワークフロー(.github/workflows/release.yml)の定義に至っては、私は1行も書いていません。Actions を実行して失敗したとしても、GitHub Actionsのエラー発生箇所のログを貼り付けるだけで修正してくれるので、面倒な設定ファイル周りのストレスが皆無でした。

気になった点・課題

いくつか気になった点もありました。以下は私が使っていて気になった点です(手探りだったので使い方に問題があるかもしれませんが)。

まず、①日本語化の不完全さです。「Customizations」(AIにルールを設定する)で日本語応答を指示しても英語になることがほとんどでした。そのため、最初の入力で「出力は日本語で行うこと」などを毎回入れなければなりませんでした。毎度入れるのは若干面倒です。

また、②長文・大容量ファイルのコンテキスト維持にも課題を感じました。コンテキストウィンドウの関係上仕方がない部分はあるものの、チャットが長くなったり、実装が進んでいって main.dart が肥大化していくと(この時点で2,000行を超えていました)、AIがエラーログをテキストファイルとして抽出し始めたり、修正ループに陥ったりと、(コーディングがほとんどできない人間でも分かるくらい)謎の挙動をとることがありました。AIにコーディングさせるにもリファクタリングは必要ですね。

そして現状では、③ビルドエラー(Build Error)をAIエディタ上で認識できない(flutter analyze等が使える場合を除く)ため、エラーログを手動でフィードバックする必要がある点は、完全自動化への壁だと感じました。

UXとして気になった点は、④フォルダーを開く・ウィンドウを新しく開く時に Windows Terminal の画面が出てきてしまうことです。ターミナルで何も開いていなければすぐ消えるのであまり気にはなりませんが、ターミナルを立ち上げていた場合にはエディターの上にターミナルが出てきて邪魔になりました(ターミナルの設定等でなんとかできるかもしれませんが)。VS Code ではこのような挙動がなかったので少し気になりました。バグだと信じたい...

また、インストール時/更新時にインストーラーがWindows セキュリティ(旧 Windows Defender)によりウイルス判定されるのも少し面倒でした。まあ初期リリースのアプリあるあるでしょうから、今後改善されるかな(?)とは思いますが。

まとめ

総評として、Antigravity はプレビュー段階ながら、個人の趣味開発なら十分にメインエディタとして採用できるレベルだと感じました(Antigravity以外のエディタは使用していませんので)。興味がありましたら Google Antigravity を使って開発してみてはいかがでしょうか。

今回はFlutter(Dart言語)で開発しましたが、研究の合間でもし時間があればKotlin(Compose)でもアプリを作れるか試してみようかと思います。

今回作成した「プレゼンタイマー Prime」は、自己満足の産物ではありますが、今後もAIに丸投げしながら気ままに機能追加をしていく予定です。Flutter の Material 3 Expressive 公式対応が進むことにも期待しています。

作ったアプリのリポジトリ

Windows版はzipを解凍するだけ、Android版はAPKのインストールで動作するようになっています。誰も使わないと思いますがよかったらどうぞ。
Girky0815/presentationtimer_prime: プレゼンタイマー Prime(仮)

Android 版について

Android版は Obtainium (Google Playで配信されておらず、GitHubのリリースページなどからのみ入手できるアプリ(俗に言う野良アプリ)を管理するためのアプリ 参考文献) 用のリンクを用意してみました。Google Play 公開の手間を省きたい個人開発者にはおすすめの配信方法です(日本語を中国語フォントで表示するので若干見にくいですが)。Obtainiumをインストールしていれば、READMEにあるバナーをタップするだけで追加画面に遷移します。

さいごに

本記事では Google Antigravity を使って実際に簡単なアプリを制作してみた感想を書かせていただきました。

最後まで読んでいただきありがとうございました。
よろしければ Part1Part2 含め他の方が投稿されているアドベントカレンダーの記事もぜひご覧ください。

kCat氏曰く、まだ枠に余裕があるらしいので何かアウトプットしてみたい、という人はよかったらぜひ。
私も余裕があったらまた何か書きたいです。

※本記事は文章構成に Gemini 3 Pro を一部使用しました。

0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?