Link to Youtube Video (visible only when JS is disabled)
今年の Google I/O では、AI を使った開発に役立つ新しいプロダクトやツールを発表しました。また、Gemini API デベロッパー コンペティションも始めました。これは、私たちのツールのパワーを活用し、最高の能力を持つ AI モデルを組み込んでユーザーのためにすばらしい仕組みを開発してもらうためのイベントで、カスタムビルドされたデロリアン スーパーカーの電気自動車（そして多額の賞金！）をもらえるチャンスでもあります。
そこで今回は、I/O Connect イベント シリーズが始まったことをお祝いしつつ、皆さんに多少のインスピレーションを与えるため、I/O で発表された反響の高いツールの中から、Gemini API を組み込んだものを紹介したいと思います。I/O クロスワードは、クラシックなクロスワード パズルをひとひねりしたもので、I/O に関するさまざまな知識を試せるだけでなく、Flutter や Firebase、Gemini API の力を実際に確認できるものでもあります。
では、詳しく見ていきましょう！
ステップ 1: マスコットを選んでチームを選択します。チームはボードで色分けされ、全員のスコアが総合スコアになります。
ステップ 2: ボードで単語を解答する場所を選びます。
ステップ 3: 単語がわからない場合は、[Hint] ボタンをクリックして、Yes か No で答えられる質問を 10 問まで尋ねることができます。
ステップ 4: リーダーボードにスコアを送信し、Google デベロッパー プログラムのプロフィール バッジを獲得して、クロスワードを解いたことを世界に共有できます！
では、このゲームを開発するために使ったテクノロジーを詳しく見ていきましょう！
これは自然なことですが、I/O クロスワードで使う単語や手がかりは、今年の I/O で私たちがお話ししたさまざまなことが原点になっています。今回は、Gemini Advanced に YouTube で 3 時間に及ぶ Google I/O の基調講演の映像を見せ、テクノロジー関連のホットな単語や手がかりを作成してもらいました。このクロスワードを解くことで、I/O でのプロダクトの発表について楽しく学べるようになっています。
Gemini アプリを使えば、誰でも最先端のモデルを使って仕事の創造性を高めることができます。今回特に活用したのは、Gemini Advanced です。他の多くの LLM よりも最新の知識を取り入れており、インターネットの最新情報にもアクセスできるからです。
しかし、本当にエキサイティングなのは、皆さんも同じ Gemini モデルを使って開発できることです。Gemini API を使うと、この AI モデルをアプリケーションに組み込むことができます。ここでは、エンゲージメントを高めて離脱を減らすため、クロスワードにひとひねりを加えました。それが、困ったプレーヤーがゲームから離れないようにする「ヒント」機能です。これには、Firebase Genkit と Gemini API を使っています。この新しいフレームワークがあれば、アプリのバックエンドに AI 機能を簡単に追加できます。
プレーヤーがヒントを尋ねるボタンをクリックし、Yes または No で答えられる質問をすると、質問を受け取った Genkit フローは、関連する手がかりや過去の質問を収集し、その情報を Gemini 1.5 Flash モデルに送信します。このモデルは、Yes または No で答えを返すように特別に指示されており、正しい単語に向かって誘導してくれます。
この機能の基盤には、ほかにも多くの仕組みが使われています。詳しくは、Firebase ブログの詳細記事をご覧ください！
ゲームの UI は Flutter で作られています。Flutter はあらゆるプラットフォームを横断して柔軟でパフォーマンスが高いので、ダイナミックでインタラクティブなゲームを開発するには、うってつけの選択肢でした。
クロスワード ボードは Flutter の InteractiveViewer ウィジェットを使ってレンダリングし、スムーズなナビゲーションを実現しました。このウィジェットは、広いコンテンツ領域でパンやズームなどのユーザー インタラクションを扱えるように設計されているため、広大なクロスワード グリッドを動き回る用途にぴったりでした。
このゲームは、プレーヤーが同時に同じボードでプレイするコラボレーション体験であるため、優れたゲーム エクスペリエンスを実現するにはパフォーマンスが重要になります。そこで、ゲームを WebAssembly（WASM）にコンパイルしました。Flutter ウェブアプリの WASM は、今回の Google I/O で安定版チャンネルに移行しています。
InteractiveViewer ウィジェットで行列変換を行う方法や WASM を使って高フレームレートを維持する方法など、詳しいトピックは、Flutter の詳細記事で解説しています。
Firebase は、バックエンド機能を提供するためにプラットフォーム間で動作する多数のツールを提供しました。ライブ アプリケーションは Firebase Hosting でホストされ、アプリケーションからのすべてのデータは Firestore に保存されます。 Firestore はリアルタイムで動作し、世界中のユーザーがパズルを完了するとライブ アップデートを保存し、ユーザーがゲームに参加したりゲームから離脱したりすると自動的にスケールアップおよびスケールダウンします。
クロスワードが完成すると、ボード全体がリセットされます。つまり、ゲームは常にプレイ可能で、新しいユーザーはいつでも参加してすぐにプレイできます。この機能は、Cloud Functions for Firebase で実現しています。
Flutter アプリが Firestore に直接アクセスする場合は、App Check と匿名認証を設定してリーダーボード API を保護し、認証されたユーザーのみがアクセスできるようにしています。ゲームに参加するすべてのユーザーは、Firebase Authentication を使って匿名で認証します。これによって個々のスコアを追跡し、リーダーボードに表示します。
Dart で開発したバックエンド環境は、API 呼び出しの管理、データベース操作、Flutter アプリからのリクエスト処理を行います。Cloud Run は、スムーズなエクスペリエンスを保証する自動スケーリングを提供します。
不正行為を防ぐため、Dart Frog バックエンドを使っています。アプリは Firestore を読み取れますが、変更できるのは Dart Frog バックエンドのみです。このアーキテクチャと認証を組み合わせることで、フェアプレイを保証しています。
まずは I/O クロスワードを体験してみてください。テクノロジーが気になる方のために、コードはオープンソースになっています。しかし、何よりも重要なのは、私たちが学んだ教訓を Gemini API デベロッパー コンペティションの作品に活かすことです。皆さんの作品を見るのが待ちきれません。
簡単に始められるようにするために、開発プロセスをご案内するデベロッパー学習 Pathway を公開しました。ぜひご覧ください！
