Claude 3.5 と Galileo AIでモバイルアプリを開発してみた

はじめに

最近自分が使用するためのTodoアプリをFlutterで開発しました。きっかけはスマホをGoogle Pixel6からNothing Phone (2a) に機種を変更したのですが、Nothing phoneで採用されているNothing OSのデザインがシンプルでとても気に入っていて、このOSにあうUIデザインのアプリを使いたいなと思ったのがきっかけです。というのもOS画面やアイコンはNothing OSになるのですが、アプリの中のUIまでは当たり前ですがNothing OSにはならないのです。

Nothing OS

そこで週末のプロジェクトとしてNothingOSっぽいUIのTodoアプリを開発することにしました。以下のように技術選定や方針などを決めてから着手を始めました。

開発方針

• AIを活用しUIデザインとコードを生成する

• シンプルな機能だけで、複雑な機能実装はしない

• Flutterを使ってAndroid/iOS両プラットフォームに対応する

AIを活用しUIデザインとコードを生成する
日頃からAIを活用してWebアプリやサーバサイドの開発をしていますが、考えてみたらモバイルアプリの開発はしたことがありませんでした。ですので今回はまずAIだけでデザインと実装をしていくことにしました。

シンプルな機能だけで、複雑な機能実装はしない
アプリやシステムを開発しようと思うとついアレもこれもとなってしまい肥大化してしまうので、必要最小限のものだけでまずはAIを使って作ることにしました。

Flutterを使ってAndroid/iOS両プラットフォームに対応する
Nothing OSで使いたいアプリなので、Android対応だけでもいいのですが、AIで開発するにあたってそもそもFlutterとは相性がいいと思っていたので、Flutterを採用することで結果的に両プラットフォーム対応します。ちなみに弊社ではFlutter開発の案件はよく対応をしていますが、私自身はAndoridやiOSのネイティブ開発は経験がありますが、Flutterの開発は初めてです。

最終的に完成したアプリ

アプリのUIはAIでデザインしましたが、Nothing OSっぽい雰囲気にするデザイン部分の作り込みや調整は自分で行いました。また最初のベースとなる部分のコードはほとんどAIで作成しましたが、ローカルプッシュの実装はAndroidManufestやgradleなどの設定が大部分なので自分で調べて実装しました。またSupabaseでバックエンド実装と認証機能も実装しました。こちらはAndroid studioにGithub Copilotのプラグインを入れることで簡単に実装ができました。

一連の実装を進めていく中で、試行錯誤を色々としたことで自分なりに知見を蓄積できましたので、AIを使ってFlutterアプリを開発する手順を記載していきます。

全体の流れ

全体の流れといってもそれほどやることは多くありません。

1. 要件定義

2. TodoアプリのUIをGalileo AIで作成

3. Claude 3.5 SonnetでFlutterコードを生成

ちなみに今回はFlutterアプリを開発する環境構築や、後述する使用するAIサービスの加入方法の解説のようなものは記載しません。

1.要件定義

今回はとにかくシンプルなTodoアプリを作ります。

• タスクを登録する

• タスクの完了/未完了をチェックボックスで変更できる

• 未完了タスク一覧と完了タスク一覧を切り替えできる

• タスク名や状態を変更できる

これくらいのシンプルな機能とします。

2.Galileo AIでUIデザイン

UIのデザインにはGalileo AIを使います。Galileo AIはプロンプトを入力しただけでUIを生成できます。サービス自体が英語なので日本語が使えないかと思ってしまいますが、実は日本語のプロンプトでもちゃんと生成してくれます。また生成されたデザインはFigmaにコピペすることができます。

以下のプロンプトを入力しました。

TODO管理ツールのUIをデザインしてください。
- 期限を設定できる
- マテリアルデザインでUIをデザインする
- タスクのステータスを、完了・未完了でタブで切り替える

Galileo AIは入力したプロンプトに対して1種類の画面を生成し、それに対して２つのデザインを提案してくれます。

こちらを採用します。

タスク一覧画面

Todoアプリではタスク自体の編集も行いたいので、続けて以下のプロンプトを入力しました。

タスクの詳細画面を作成してください
- タスク名を変更できる
- タスクの状態（完了・未完了）を変更できる
- 日付変更できる

タスク詳細画面

概ね要求通りですが、日付選択がただのテキストフィールドになっています。ここはカレンダーアイコンから選択できるようになっている方が自然なので、生成された画像の上にある[Edit]ボタンを押してからプロンプトを追加します。こうすることでデザインを継承しつつピンポイントで変更したい部分の修正を行えます。

日付はカレンダーのアイコンをタップして、デイトピッカーを表示し選択できるようにしてください

タスク詳細画面

イメージに近いUIになりました。Statusの文字が太字なのが変ですが、細かい部分は実装時に人間が修正したほうが早いのでこのまま採用にします。AIで生成する場合は細かいニュアンスは伝えにくかったりするので人間が補完してあげるスタンスでいると効率的です。

3.Claude でコード生成

UIデザインができたらコードの生成をします。今回はClaude 3.5 Sonnetを使ってコード生成をします。Chat-GPT4oでも問題ないと思いますが、最近はClaudeの評判がいいので、個人的にもよく使っています。

とりあえずUIデザインだけをClaudeに渡してどんなコードになるかを確認します。画像を添付して、

FlutterでTodoaアプリを作ります。

とメチャクチャシンプルなプロンプトだけ入力して生成してみます。そうするとどんどんコードを書いてくれます。また実装はされていないが、こういう機能を入れたらいいのでは、という提案もしてくれます。

できたコードはmain.dartに全部記述できるようになっています。実際のアプリ開発では運用のことを考慮して、画面ごとにファイルを分けたり、関数を別ファイルにしたりする必要はあります。プロンプトにファイルを分けて実装することを指示すると別ファイルにしてくれますが、今回は効率を考えてmain.dartだけで完結するコードで実行していきます。

実際にAndroid Studuoでmain.dartを書き換えてシュミレータで実行してみます。

驚くことにしっかり動作しました！あんな1行だけのプロンプトでもUI画面をつけてあげれば動作するアプリを生成してくれます。ただよく見るとタスク一覧画面に、完了/未完了を切り替えるタブがありませんね。追加のプロンプトを記述していきます。

タスク一覧画面にIncompleteとcompleteを切り替えるタブがありません。
切り替え用のタブを追加して表示の切り替えをできるようにしてください。

追加のプロンプトもこれくらい簡単で問題ないです。出来上がったコードをmain.dartにコピペして実行してみます。

タブが追加されました。試しにtask1のチェックボックスにチェックを入れると、ちゃんとCompletedに移動します。

これで簡単なTodoアプリが完成しました！めちゃくちゃ簡単にできましたね。Galileo AIとClaudeのプロンプトを全部合わせても12行しか書いていません。

実際にはClaudeが提案してくれたみたいに、データを永続化したり、ローカルプッシュを実装したり、ちゃんとアプリとして使えるようになるには色々機能が必要です。FlutterやAndroid Studuioの知識も必要になりますが、AIで最低限のコードは生成できることがわかったと思います。

バッカムでは、AIを活用した開発環境やワークフロー改善のレクチャー・コンサルティングを行なっています。もっと詳しく知りたい方、AI導入を検討している方ぜひお問い合わせください。victoria@backham.me