Anti-GravityとStitchで高速Androidアプリ開発！CLIを活用した自動生成の全手順

本日は、Anti-Gravity、Stitch、Android CLI（コマンドラインインターフェース）といったツールを組み合わせ、Androidアプリケーションを効率的に構築する方法について詳しく解説します。GoogleエコシステムやMCP（Marketplace Content Provider）のような外部ツールも活用できます。今回は、音符、スケール、コードを学習できる音楽理論アプリを構築する例を通じて、その全工程をご紹介します。Stitchでデザインを作成し、それをAnti-Gravityに取り込み、実際のネイティブコンポーネントとして画面を構築します。最終的には、実際のデバイスで動作させるまでを追っていきます。Anti-Gravityを使ったAndroidアプリ開発に興味がある方は、ぜひ参考にしてください。さっそく、具体的な手順を見ていきましょう。

1. Stitchを活用したアプリデザインの抽象化

Stitchは、アプリケーションのアイデアを抽象的な形で表現する場所です。Anti-Gravityから始めて後で画面を取り込むことも、Stitchで始めてエージェントに構築させることも可能です。どちらの方法でも柔軟に開発を進められます。

1.1 アプリケーションのプロンプト入力

今回のアプリケーションのプロンプトは、『ユーザーが音符、スケール、コードを学習する音楽理論学習アプリケーション』です。このプロンプトをStitchに投入し、画面の構築を開始します。

1.2 画面の生成と確認

Stitchは、最初に構築したい画面について確認を求めてきます。今回は、最初の4つのモバイル画面で進めることを選択します。エージェントが画面と個々の要素を構築する様子を確認できます。すべての画面が完成すると、アプリケーションに追加される異なる高レベルの画面の概要が表示されます。

1.3 画面のエクスポート

その後、構築された4つの画面すべてを選択し、「エクスポート」をクリックします。これにより、デザイン情報が次のステップで使用できるようになります。

2. Anti-GravityとGoogle開発ツールのセットアップ

次に、StitchからエクスポートしたデザインをAnti-Gravityに取り込み、Android開発に必要なツールをセットアップします。

2.1 MCP（Stitch MCPサーバー）のセットアップ

Stitchからエクスポート後、MCPセクションに移動し、「MCPをセットアップ」をクリックすると、ドロップダウンにAnti-Gravityが表示されます。これをエージェントにコピーし、Anti-Gravityに戻り、「Stitch MCPサーバーをセットアップ」と指示します。これにより、Stitch MCPサーバーがAnti-Gravity内のグローバルMCPレジストリに追加され、この会話でStitch MCPツールにアクセスできるようになります。

2.2 Build with Google Androidプラグインの追加

続いて、Anti-Gravity内に「Build with Google Android」プラグインを追加します。以下の手順で追加します。

プロジェクト設定に移動します。
「カスタマイズ」セクションに移動します。
一番下にある「Build with Google plugins」までスクロールします。
Androidをクリックし、「ダウンロード」を選択します。

このプラグインをダウンロードすることで、Android CLIを呼び出すために必要なスキルが提供されます。これにより、エージェントはAndroidエコシステムのさまざまな部分を呼び出す方法や、デバッグ時に参照すべき場所に関するコンテキストを得ることができます。完了後、設定画面を閉じ、メインプロンプトに戻ります。

3. Anti-GravityによるAndroidアプリケーションの構築とエミュレーターでの実行

これで、Anti-Gravityでアプリケーションを構築し、エミュレーターで実行する準備が整いました。

3.1 アプリケーションの構築指示

StitchでMCPがセットアップされたので、Stitchからプロンプトをコピーし、Anti-Gravityに貼り付けます。これは、Anti-Gravityに、追加したMCPツールを使ってどの画面をプルする必要があるかのコンテキストを与えます。

次に、プロンプトの最後に「これらの画面を使用してAndroidアプリケーションを構築し、エミュレーターで実行してください」という指示を追加し、エージェントに送信します。これにより、バックグラウンドでアプリの構築が開始されます。

3.2 エミュレーターでの実行と検証

エージェントはツール承認を求めてくるので、プロジェクト内で許可します。すると、Androidエミュレーターが起動し、Anti-Gravityが既に「Hello World」アプリケーションを起動していることを確認できます。

ここでは、エージェントにWebビューではなく、Jetpack Compose（Googleが推奨するAndroidのネイティブUIを構築するための最新ツールキット）によるネイティブビューを使用するよう指示しています。Anti-Gravityは、アプリケーション内のさまざまなタブをタップするコマンドをエミュレーターに送信し、スクリーンショットを撮影することでAndroidアプリケーションを検証します。

Anti-Gravityがまとめた最終概要では、Stitchから取得したすべての画面、入力として使用されたHTMLと画像、そして実際に構築された内容の詳細を確認できます。エミュレーター上でアプリを実際に操作し、期待通りに機能することを確認できます。これらは実際のJetpack Composeビューを使用しており、さらにプロンプトを追加することで、エージェントにさらなるカスタマイズを依頼することも可能です。

4. 実機へのデプロイ

Anti-Gravityで構築したAndroidアプリケーションを実機にデプロイすることも簡単です。

4.1 USBデバッグの有効化とデプロイ

電話を接続するだけで済みます。以前に設定していない場合は、USBデバッグを有効にするよう求められます。その後、エージェントに「接続された実機でアプリケーションを実行してください」と指示できます。エミュレーターと同様に、アプリを操作し、先に見たクイズも試すことができます。

まとめ

このように、Anti-Gravity、Stitch、そしてBuild with Google Android CLIプラグインを組み合わせることで、最初のAndroidアプリケーションを効率的かつ簡単に構築することができました。デザインの抽象化からネイティブコンポーネントの生成、エミュレーターでのテスト、さらには実機へのデプロイまでの一連のプロセスが、エージェントのサポートによってスムーズに進められます。

この経験が、Anti-Gravityを使ったAndroidアプリケーション構築の旅の始まりとなることを願っています。Androidエコシステムには探求すべきことがたくさんありますので、ぜひAndroid開発者向けドキュメントをご確認ください。皆さんが何を構築するか、楽しみにしています！

参考動画: https://www.youtube.com/watch?v=4rwvcOu1JxE

ポイント