Gemini Developers Competition参加報告

Gemini Developers Competitionに参加したので、日記としてまとめておきます。

Googleの持つ生成AI「Gemini」を使って、AIを使ったアプリケーションを作成するコンペティションで、2024年5月14日~2024年8月12日(UTC)までが提出期間でした(執筆時点では結果は審査中です)。 なんと、総額100万ドル(日本円だと1.5億ぐらい)の賞金があるということで結構参加者が多かったのではないでしょうか。

賞金の一覧です。

イノベーションカテゴリ

1. 最も影響力のあるアプリ：　30万ドル
2. 最も便利なアプリ：　20万ドル
3. 最もクリエイティブなアプリ：　20万ドル

テクノロジーカテゴリ

1. ベストFlutterアプリ：　5万ドル
2. ベストAndroidアプリ：　5万ドル
3. ベストウェブアプリ：　5万ドル
4. ARCoreの最適な活用方法：　5万ドル
5. Firebaseの最適な活用方法：　5万ドル
6. ベストゲームアプリ：　5万ドル

このコンペティションに気が付いたの6月頭ぐらいでした。その少し前からアプリ開発に興味が出てきてFlutterを勉強しようかと思っており、検索していたらこのコンペティションを見つけました。

当初は全く参加することを考えておらず、ReactNative vs Flutterどっちがいい！？みたいな超初歩的なところから勉強を始めていました。 結局6月はFlutterの基礎を勉強をして終わってしまいました。7月に入ってFlutterの基礎がだいたい理解できたので、せっかくアプリを作るならコンペティションに応募してみようかなと思い立ちました。

まず考え始めたのが、アプリの内容よりもアーキテクチャをどうするかという点。入賞が目的ではなく、自分のスキルアップが目的だったので、色々新しいものを試してみたいと思いました。 結局行きついたのが、アプリ部分はFlutterで、バックエンドサーバとしてGC Functionsを使うという構成でした。 認証部分にはFirebase Authenticationを使うので、Firebase functionsとして使えました。 また、直近のアップデートでFirebase functionsのランタイムにPythonが使えるということで、Pythonを使ってFirebase functionsを実装しました。 実装としてはFlutterから直接Gemini APIを使い、バックエンドサーバを持たない方法がシンプルだと思いましたが、将来的な拡張性を考えてバックエンドを使うことにしました。

ここからフロントエンド、バックエンドどちらも並行で作っていくという辛い開発がはじまります。。ただ、幸いアプリのアイデアはすぐに決まったので、それを具体化して実装していけばいいという状態ではありました。

アプリは Tabiai という名前で、ユーザーの行きたい場所やしたいことを文章で入力すると、それに合った旅行プランを提案してくれるというアプリです。

開発中(7月)

7月中は結構まったり作業をしていました。Flutterの基礎を学びながら、アプリのデザインを考えたり、バックエンドのAPIをどうするかを考えたりしていました。 優先度的にはバックエンドのAPIを作ることが一番だと思っていたので、まずはそこから始めました。

僕は普段AI開発のロジックを書くときはPythonを使うことが多く慣れていたのでそこまで苦労はしませんでした。ただ、バックエンド部分はデプロイが必要なのでGithub Actionsを使ってのCI/CDでエラーが出てしまい、それを解決するのに時間がかかりました。 例えば、Pythonのバージョンは3.12を強制されたり、環境変数はSecrets Managerを使ってかつFirebaseライブラリの環境変数呼び出しのデコレーターを使わないといけなかったり専用の書き方が必要でした。（しかも使ってる人が少ないので事例もあんまりネット上にない・・）

また、今回のアプリでは地図情報をふんだんに使うので、Google Maps APIを使いました。このAPIも結構癖があり、Field maskという情報を制限するためのパラメータに関するドキュメントが全然なかったり、エラーが出たときのエラーメッセージがわかりにくかったりしました。 逆に普段仕事でしているような、Geminiを使ったAIのロジックに関しては結構スムーズに進めることができました。もちろん、想定外の動作をすることも多く提出日ギリギリまで何回も修正を繰り返しました。

開発(8月)

8月に入ってからはほぼ毎日のようにプライベートの時間のほとんどを使って開発をしていました。特にフロントエンドの開発がまったく進んでおらず、1週間前でまだスクリーン1枚(文字を入力できる)を表示するだけの状態でした。 フロントエンドは前述の通りFlutterを使って実装しました。全体的な技術は最新のものを使えたんじゃないかと思っています。以下はざっくりとした利用技術です。

• フォルダ構成:　個人的にこの記事が参考になりました。Flutterのディレクトリ構成を考える
• riverpod, riverpod_generator
  状態管理はriverpodを使いました。riverpod_generatorを使って自動生成することで、状態管理のコードを書く手間を省くことができます。
• flutter_hooks riverpodを使うまでもない1つのウィジェット内での状態管理に使えて便利です。Reactは経験があるのでuseState, useEffectは違和感なく使えました。
• freezed APIとやり取りする際にToJSON, FromJSONを自動生成してくれるので便利です。
• go_router Flutterのルーティングライブラリです。使いやすくて便利です。
• L10n Flutterの多言語対応ライブラリです。簡単に多言語対応ができるので便利です。

と、出来る人のようにまとめましたが、実際の開発はかなり苦労しました。Providerの使い方が良く分からなかったり、Column中でFlexibleを使うとエラーが出てしまったりとたぶん初心者だから出るエラーで心が折れそうになりました。

地獄の多言語対応

今回の一番の反省点は日本語と英語どっちも対応させたことです。Geminiのコンペはワールドワイドなものなので英語が必須です。ただ、自分が日本語ネイティブなのでなんとなく日本語も使えるように実装していました。 これが思った以上に時間がかかりました。Flutterの多言語対応はそこまで大変じゃなかったのですが、バックエンドの特にGeminiのプロンプトを両言語に対応させるのがとても大変でした。 最終的に提出したのは全部英語なので、日本語対応は無駄になってしまいました。これはもう少し計画を立ててから実装すべきでした。

妹のサポート

Flutterのアプリを作っていて気になっていたのがアプリのアイコンでした。僕は全くデザインのセンスがないので、どうしようかと思っており、デザインを専攻している妹に何かアイデアはないか聞いてみました。 すると、二つ返事で「どれがよさそう？」と様々なアイコンを作ってくれました。どのアイコンも良くできていて、最終的にはその中から選ぶことができました。自分が作るとその分だけ開発の時間が減ってしまうので、本当に助かりました。

提出直前(3日前から)

提出日は元々8/12の17:00(JST)だったと記憶していますが、どこかのタイミングで8/13の9:00(JST)に変更されました。 これがスタートダッシュが大幅に遅れていた僕にはとても助かりました。ちょうどいいことに12日は休みだったので、一気に開発を進めることができました。 最後の3日間は睡眠時間は4時間ぐらいで、ほぼずっとPCの前に座っていました。徹夜は次の日のパフォーマンスに影響が出るので、出来るだけしないように意識していました。

謎のYoutube動画の作成

今回のコンペで特徴的だったのが、提出物にYoutube動画を作成することが必須だったことです。アプリを作って終わりではなく、そのアプリの使い方や特徴を説明する動画を作成する必要がありました。 これがチームであれば分担して作成することができるのですが、個人でやるとなるとかなり大変です。動画編集は身内の旅行ログを編集したことがあったので1,2日がっつり使えばなんとかなるだろうと思っていましたが、実際にやってみるとかなり大変でした。

ナレーションはGoogle CloudのTTS(Text to Speech)を使って自動生成し、無料の動画素材を探して、Davinci Resolveで編集しました。せっかくならBGMも入れたかったので、Sunoで生成したものを使いました。 デモの録画の際に１つ事件があり、Android Emulatorで録画をしていたのですが、アプリを最小化して最大化すると真っ白になってしまうというバグが発生しました。ネット上の情報を見て設定を変えたのですが、すると今度はエミュレータ自体がエラーで起動しなくなってしまいました。 このとき8/13の朝1:00ぐらいで、もうダメだと思いました。最後の最後でエミュレータが使えなくなるというのはかなりショックでした。結局、エミュレータを使わずに自分のスマホでなんとかデモを録画することができました。

3分もある動画を作るのは大変かと思ってましたが、いざ作ってみるとデモの時間が結構長くなってしまい、泣く泣くカットする部分が多かったです。

提出

最終的に提出したのは13日の朝4:30ぐらいでした。本当はアプリを公開して触れるようにしたかったのですが、間に合わなかったです。 1か月以上プライベートの時間をかけて作ったアプリなので、提出時に不備がないか不安で何回もルールとか読みなおし、何とか提出することができました。 提出できた時の達成感はすごかったです。

タイトルは Tabiai です。ユーザーが行きたい場所やしたいことを文章で入力すると、それに合った旅行プランを提案してくれるアプリです。

以下が妹が作ってくれたアイコンです。

以下がアプリのYoutube動画です(1:30~デモがはじまります)。

まだまだ、改善点はたくさんあると思いますが、自分としても便利なアプリができたと思っています。 もう少しブラッシュアップしたら、ぜひ公開してみたいと思います。

興味を持ってくれる人が増えてこのアプリが盛り上がっていけるといいなぁと思います！もし開発に興味がある、旅行xAIを進めたい、開発者がどんな奴か見てみたいという方がいれば、ぜひ連絡してください！(上部のお問い合わせから連絡できます)

僕の経験談からのおすすめです。

1. GoogleのCodelabsをやる: 初めてのFlutterアプリ

最初にGoogleのTutorialをやることをおすすめします。Flutterの基本的な使い方がわかります。このリンク以外にもCodelabsにはFlutterに関するチュートリアルがたくさんあるので、それらをやることで基本的な使い方がわかると思います。

2. Flutterの書籍を仕上げる (おすすめはFlutter実践開発)

ネット上の情報だけではなかなか理解が難しいと思います。しっかり学習するのであれば書籍を読むことをおすすめします。 この本はFlutterの基本的な使い方から、実際にアプリを作るまでの流れが書かれています。新しい本なのでこれからFlutterを始める方はこれを読めば初心者を脱することができると思います。 僕はこれを買ってかなりサクサク進められたのでとても楽しく学習できました。

3. 必須ライブラリ群の使い方を学ぶ

Flutterの魅力の一つに、豊富なライブラリがあることが挙げられます。ここに関してこのライブラリまとめページがとても分かりやすいです。 個人的に1つ選べと言われて選ぶのはRiverpodです。かつ、riverpod_generatorを使った自動生成を覚えられるととても便利だと思います。

4. 実際にアプリを作る

後はもう実践の身です。まだ分からない部分も多いと思いますが、調べながら実装していくのが一番の近道だと思います。