I/O クロスワードの作り方

2024年6月26日

Jay Chang Senior Product Marketing Manager Developer Activations

Kelvin Boateng Product Marketing Manager Flutter & Dart

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 デベロッパープログラムのプロフィールバッジを獲得して、クロスワードを解いたことを世界に共有できます！

では、このゲームを開発するために使ったテクノロジーを詳しく見ていきましょう！

Gemini: ブランドセーフでホットかつクリエイティブなコンテンツ

これは自然なことですが、I/O クロスワードで使う単語や手がかりは、今年の I/O で私たちがお話ししたさまざまなことが原点になっています。今回は、Gemini Advanced に YouTube で 3 時間に及ぶ Google I/O の基調講演の映像を見せ、テクノロジー関連のホットな単語や手がかりを作成してもらいました。このクロスワードを解くことで、I/O でのプロダクトの発表について楽しく学べるようになっています。

Gemini アプリを使えば、誰でも最先端のモデルを使って仕事の創造性を高めることができます。今回特に活用したのは、Gemini Advanced です。他の多くの LLM よりも最新の知識を取り入れており、インターネットの最新情報にもアクセスできるからです。

Gemini API: Gemini モデルの機能を使ってエクスペリエンスを開発する

しかし、本当にエキサイティングなのは、皆さんも同じ Gemini モデルを使って開発できることです。Gemini API を使うと、この AI モデルをアプリケーションに組み込むことができます。ここでは、エンゲージメントを高めて離脱を減らすため、クロスワードにひとひねりを加えました。それが、困ったプレーヤーがゲームから離れないようにする「ヒント」機能です。これには、Firebase Genkit と Gemini API を使っています。この新しいフレームワークがあれば、アプリのバックエンドに AI 機能を簡単に追加できます。

プレーヤーがヒントを尋ねるボタンをクリックし、Yes または No で答えられる質問をすると、質問を受け取った Genkit フローは、関連する手がかりや過去の質問を収集し、その情報を Gemini 1.5 Flash モデルに送信します。このモデルは、Yes または No で答えを返すように特別に指示されており、正しい単語に向かって誘導してくれます。

この機能の基盤には、ほかにも多くの仕組みが使われています。詳しくは、Firebase ブログの詳細記事をご覧ください！

Flutter と Dart: インタラクティブユーザーインターフェースとマルチプラットフォームパフォーマンス

ゲームの UI は Flutter で作られています。Flutter はあらゆるプラットフォームを横断して柔軟でパフォーマンスが高いので、ダイナミックでインタラクティブなゲームを開発するには、うってつけの選択肢でした。

クロスワードボードは Flutter の InteractiveViewer ウィジェットを使ってレンダリングし、スムーズなナビゲーションを実現しました。このウィジェットは、広いコンテンツ領域でパンやズームなどのユーザーインタラクションを扱えるように設計されているため、広大なクロスワードグリッドを動き回る用途にぴったりでした。

このゲームは、プレーヤーが同時に同じボードでプレイするコラボレーション体験であるため、優れたゲームエクスペリエンスを実現するにはパフォーマンスが重要になります。そこで、ゲームを WebAssembly（WASM）にコンパイルしました。Flutter ウェブアプリの WASM は、今回の Google I/O で安定版チャンネルに移行しています。

InteractiveViewer ウィジェットで行列変換を行う方法や WASM を使って高フレームレートを維持する方法など、詳しいトピックは、Flutter の詳細記事で解説しています。

Firebase: ホスティング、ボードのリセット、ゲームエクスペリエンスの保護

Firebase は、バックエンド機能を提供するためにプラットフォーム間で動作する多数のツールを提供しました。ライブアプリケーションは Firebase Hosting でホストされ、アプリケーションからのすべてのデータは Firestore に保存されます。 Firestore はリアルタイムで動作し、世界中のユーザーがパズルを完了するとライブアップデートを保存し、ユーザーがゲームに参加したりゲームから離脱したりすると自動的にスケールアップおよびスケールダウンします。

クロスワードが完成すると、ボード全体がリセットされます。つまり、ゲームは常にプレイ可能で、新しいユーザーはいつでも参加してすぐにプレイできます。この機能は、Cloud Functions for Firebase で実現しています。

Flutter アプリが Firestore に直接アクセスする場合は、App Check と匿名認証を設定してリーダーボード API を保護し、認証されたユーザーのみがアクセスできるようにしています。ゲームに参加するすべてのユーザーは、Firebase Authentication を使って匿名で認証します。これによって個々のスコアを追跡し、リーダーボードに表示します。