今年の Google I/O では、AI を活用した開発に役立つ新しい製品とツールを発表しました。また、デベロッパーの皆さんが、Google のツールの力を最大限に活用し、最も高性能な AI モデルをアプリやゲームに統合することで、ユーザーにとって素晴らしく革新的な体験を構築できるよう、Gemini API デベロッパー コンペティションを開始しました。このコンテストでは、カスタマイズした電気自動車バージョンのデロリアン（と多額の賞金）を獲得するチャンスがあります。

I/O クロスワードの遊び方

遊び方は次の通りです。

ステップ 1 : 4 つのマスコットからチームを選びましょう。選んだマスコットの色が、単語を解いたときにマスが変わる色になります。選んだチームの合計得点に各自のスコアが反映されます。

ステップ 2 : 次に、ボード上の好きな場所からスタートしましょう。

ステップ 3 : 単語が解けないときは、「ヒントを見る」ボタンを試してみてください。yes か no で回答できる質問を投げかけることで、解答に導きます。(最大 10 回まで) 

ステップ 4 : 連続で単語を解くほど、リーダーボードの順位が (チームでも個人でも) 上がります！スコアを投稿し、Google Developer Program のプロフィール用バッジを獲得しましょう。



ゲーム開発に活用した技術の裏側

Gemini: ブランドにとって安全で、時事性があり、クリエイティブなコンテンツ

I/O クロスワードを作成することが目的だったので、今年の I/O でグーグルが発表した内容を元に、単語やヒントを作成したいと思いました。そこで、Gemini Advanced に YouTube 上にアップロードされている Google I/O の基調講演 3 時間分を読み込んでもらい、I/O の製品発表を楽しく学ぶための、時事的な技術関連の単語とヒントを作成してもらいました。

Gemini アプリは、Google の最先端のAI モデルを誰でもすぐに利用できるよう、会話型インターフェースを通じて提供しています。今回私たちが Gemini Advanced を活用した主な理由は、他の多くの LLM と比較しても、ナレッジ カットオフが直近で、最新の情報をインターネットから取得できるためです。


Gemini API: Gemini モデルの機能を活用して、体験を構築する

しかし、本当にエキサイティングなのは、皆さん自身が同じ Gemini モデルを使ってさまざまなサービスを構築できることです。Gemini API を使用すると、Google の AI モデルを皆さんのアプリケーションに統合できます。今回のクロスワード パズルでは、エンゲージメントを高め、離脱を減らすために、Gemini API と Firebase Genkit を活用し、プレイヤーが行き詰まったときにゲームを続けられるように設計された「ヒント」機能を加えました。これらは、あらゆるアプリのバックエンドに AI 機能を簡単に追加できる新しいフレームワークです。 プレイヤーが「ヒントを聞く」ボタンをクリックして質問すると、Genkit フローが「はい」か「いいえ」で答えられるような質問を受け取り、関連する手がかりや過去の質問を収集、この情報を Gemini 1.5 Flash モデルに送信します。そして、ユーザーへの質問に「はい」か「いいえ」の回答をするように具体的に指示されたモデルは、プレイヤーを正しい単語へと導きます。 この機能の詳細については、Firebase ブログの詳しい記事 (英語) をご覧ください。



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

ゲームの UI は Flutter で構築されています。Flutter のプラットフォームに対する柔軟性とパフォーマンスの高さは、ダイナミックでインタラクティブなゲームを構築する上で最適な選択でした。クロスワード ボードをレンダリングし、スムーズなナビゲーションを可能にするために、Flutter の InteractiveViewer ウィジェット (英語) を採用しました。このウィジェットは、大きなコンテンツ エリアでのパンやズームといったユーザー インタラクションを処理するように設計されているため、広大なクロスワード グリッドを探索するのに理想的でした。 このゲームは、プレイヤーが同じボード上で同時にプレイするコラボレーション体験を提供しているため、優れたゲーム体験を可能にするにはパフォーマンスがとても重要です。そのため、このゲームは Google I/O (英語) で Flutter ウェブアプリの Stable チャンネルに移行した WebAssembly (WASM) にコンパイルされています。InteractiveViewer ウィジェット内での行列変換の使用や、WASM が高いフレームレートを維持するために、どのように役立ったかといったトピックについての詳細は、ブログ (英語) をご覧ください。

Firebase: ホスティング、ボードのリセット、ゲーム体験の確保

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

クロスワードが完成すると、ボード全体がリセットされるため、ゲームは常にオン状態で、新しいユーザーが参加してもすぐにプレイできます。この機能は Cloud Functions for Firebase によって実現されています。 Flutter アプリが Firestore に直接アクセスする場合、App Check と anonymous auth を設定してリーダーボード API を保護し、認証されたユーザーだけがアクセスできるようにします。Firebase Authentication を使用すると、ゲームに参加するすべてのユーザーが匿名で認証され、個々のスコアを追跡し、リーダーボードに表示することができます。

Dart Frog and Cloud Run: フロントエンドとバックエンドのコード共有

Dart で構築されたバックエンドは、API コールの管理、データベースとの連携、Flutter アプリからのリクエスト処理を行います。Cloud Run は自動スケーリング機能を提供し、スムーズなユーザー エクスペリエンスを保証します。 

不正行為を防ぐため、Dart Frog (英語) バックエンドを採用しています。アプリは Firestore からデータを読み込むことができますが、変更を加えることができるのは Dart Frog バックエンドのみです。このアーキテクチャと認証メカニズムにより、フェアプレーが保証されます。

遊んでみよう

I/O クロスワードを実際に体験してください。ご興味のある方のために、コードはオープンソース化されています。私たちは、この事例を Gemini API デベロッパー コンテストで、皆さんの作品に活かしていただけることを楽しみにしています。 開発を始めるにあたって、開発プロセスをサポートするためのコンテンツ (英語) をご用意しました。ぜひご覧ください。
Posted by Tamao Imura - Developer Marketing Manager, Google Developer Marketing 

開発者の皆様からは、Flutter は多数のプラットフォームで優れたアプリの迅速な構築に役立つとのフィードバックをいただいています。最新のユーザーの調査によると、

  • 開発者の 91% が Flutter によってアプリの構築と公開にかかる時間が短縮されたと回答しています。
  • 開発者の 85% が Flutter によって以前より優れたアプリを作成できるようになったと回答しています。
  • 開発者の 85% が、これまでより多数のプラットフォーム向けにアプリを公開できるようになったと回答しています。


Sonos による最新のブログ投稿では、Sonos がこの 2 つ目で強調している、セットアップ エクスペリエンスの刷新について述べています。

「これまで当社のチームが提供してきたものとは違い、Flutter が「プレミアム」のレベルを大幅に高めたといっても過言ではありません。デザイナーにとって最も重要なことは、新しい UI を簡単に構築できることです。それにより、ダメな仕様を却下することに時間を取られることなく、取り組みの繰り返しに時間をかけられます。それに価値があると認められたので、Flutter を試してみたのです。」

Flutter 3 の概要

この度、Flutter のサポート対象のプラットフォームを拡充した Flutter 3 を紹介します。Flutter 3 では 1 つのコードベースから 6 つのプラットフォームに対応したアプリが構築きるので、開発リソースが少ないスタートアップ企業であってもアイデアをより多くのユーザーに届けることができます。

前回のリリースでは、iOS と Android にウェブと Windows サポートを追加しましたが、Flutter 3 では macOS と Linux アプリの安定サポートを追加します。プラットフォーム サポートの追加には、ピクセルのレンダリング以上のものが必要です。例えば、入力とインタラクションの新しいモデル、コンパイルとビルドのサポート、ユーザービリティと国際化、プラットフォーム特有のインテグレーションなどがあります。今回のリリースの目標は、基盤となるオペレーティング システムを最大限活用しつつ柔軟性をもたらすこと、またできる限り多数の UI とロジックを共有することです。

macOS に関しては、Google は Universal Binary を利用し、Intel と Apple シリコンの両方のサポートに投資しています。Universal Binary サポートにより、アプリを両方のアーキテクチャでネイティブに実行される実行可能ファイルにパッケージ化できます。Linux では、Canonical と Google が協力して、高度に統合された、最善の開発オプションを提供しています。

Flutter が優れたデスクトップ エクスペリエンスを実現する例として、今回、ベータ版としてリリースする Superlist があります。Superlist は、新しいタスク一覧と個人の計画にリスト、タスク、フリーフォームのコンテンツを組み込んだ新しいアプリによってコラボレーションを加速します。Superlist チームは、迅速かつ信頼できるデスクトップ エクスペリエンスを実現できる点から Flutter を選択しました。そして、チームの今日までの実績から、この選択が有意義であったことが証明されています。


Flutter 3 は、パフォーマンスの向上、Material You のサポート、生産性の向上など、基盤にもさまざまな改善が行われています。

このバージョンの Flutter では前述の取り組みに加え、開発用として Apple シリコンに完全にネイティブ対応しています。Flutter は M1 対応の Apple デバイスのリリース時点から互換性がありますが、現在では、Dart の Apple シリコン サポートを活用して、M1 対応のデバイスでのコンパイルのスピードをアップし、macOS アプリの Universal Binary をサポートしています。

このリリースでは、マテリアル デザイン 3 対応もほぼ完成しており、デベロッパーは適応性の高いクロスプラットフォームのデザイン システムによってダイナミックなカラーパターンや最新のビジュアル コンポーネントを活用できます。

詳細な技術情報のブログ投稿では、この他にも Flutter 3 のさまざまな新しい特長について触れています。

Flutter は、生産性が高く、移植可能なマルチプラットフォーム開発向けの言語である Dart を利用しています。今回の Dart での作業には、ボイラープレートを減少して可読性を高める新しい言語機能、試験運用版 RISC-V のサポート、アップグレード版の linter、および新しいドキュメントが含まれます。Dart 2.17 での新たな改善点について詳しくは、詳細に関するブログをご覧ください。

Firebase と Flutter

もちろん、アプリの構築には UI フレームワーク以上のことが含まれます。アプリのパブリッシャーは、認証、データ ストレージ、クラウド機能、デバイステストなどのサービスをはじめとする、アプリの構築、リリース、運用に役立つさまざまなツールを必要としています。Flutter をサポートするサービスは Sentry、AppWrite、AWS Amplify など多数あります。

Google のアプリサービス用には Firebase があり、SlashData によるデベロッパー ベンチマーク調査によると、Flutter デベロッパーの 63% がアプリに Firebase を使用しているとのことです。そのため、最近の数リリースでは Firebase を利用して、最大級のインテグレーションとして Flutter を拡張および統合しています。たとえば、Flutter の Firebase プラグインの 1.0 までには、ドキュメントやツールを改善し、FlutterFire UI など認証やプロファイル画面で再利用できる UI を備えた新しいウィジェットを追加しました。

Flutter/Firebase のインテグレーションは完了し Firebase 製品のコア部分の完全サポートになりました。ソースコードとドキュメントはメインの Firebase リポジトリとサイトへの移動を進めており、Firebase の Flutter 対応については、Android と iOS で足並みを揃えて行うのでご期待ください。

また、Firebase でよく利用されるリアルタイムの障害レポート サービス Crashlytics による Flutter アプリのサポートも大幅に改善しました。Flutter Crashlytics プラグインが更新されたことにより、重大なエラーをリアルタイムで追跡し、他の iOS や Android デベロッパーが利用しているものと同じ機能を活用できます。これには重要なアラートや「クラッシュしていないユーザー」などの指標があり、アプリの安定性を常に把握できます。Crashlytics の分析パイプラインがアップグレードされ、Flutter クラッシュのクラスタ化が改善され、問題のトリアージ、優先順位付け、解決の速度が向上しました。また、プラグインのセットアップ プロセスもスムーズになったため、Crashlytics を Dart コードから直接、わずか数ステップで起動して実行できるようになりました。

Flutter カジュアル ゲーム ツールキット

ほとんどのデベロッパーにとって、Flutter はアプリのフレームワークです。しかし、現在はカジュアル ゲーム開発のコミュニティも拡大しつつあり、Flutter のハードウェア アクセラレーションによるグラフィックのサポートや、Flame などのオープンソースのゲームエンジンが活用されています。カジュアル ゲーム デベロッパーの皆様に簡単に始めていただくため、今年の I/O では、テンプレートのスターター キットとベスト プラクティスに広告のクレジットとクラウド サービスを加えたカジュアル ゲーム ツールキットを発表します。

Flutter は高負荷の 3D アクション ゲーム向けに設計されているわけではありませんが、数億ものユーザーが利用している PUBG Mobile などの人気のあるゲームでは、ゲーム以外の UI には Flutter を利用しています。そして I/O では、Firebase と Flutter のウェブサポートを利用するピンボール ゲームを制作し、技術の進歩を紹介します。I/O ピンボールでは、カスタム デザインしたテーブルの周りを人気の Google のマスコットである Flutter の Dash、Firebase の Sparky、Android ロボット、Chrome の恐竜が囲んでおり、他の人と競って高いスコアを目指します。Flutter の多様性を紹介するには最適なゲームでしょう。

コミュニティ

Flutter が優れている点の 1 つは、単なる Google の製品ではなく、「みんなにとっての」製品であることです。オープンソースとは、誰もが参加し、貢献できることを意味します。新しいコードやドキュメントの提供、コアのフレームワークに新たな能力をプラスするパッケージの作成、お互いに学ぶための本の執筆やトレーニング コースの設定、あるいはイベントの企画やユーザー グループの設立など、さまざまなことができます。 

コミュニティを最もよく表すものとして、近頃 DevPost との提携によって Puzzle Hack チャレンジを開催し、デベロッパーの皆様に伝統的なスライドパズルを Flutter で再現してもらい、そのスキルを証明する場を設けました。ここではウェブ、デスクトップ、そしてモバイルがどのように結びつくかがわかりやすく紹介されました。ゲームはオンラインでも、店頭でもプレイできるようになったのです。 

優れた作品と優勝者の紹介を動画にまとめました。ご覧ください。


Flutter をご支援いただきありがとうございました。引き続き Flutter 3 をご利用ください。



受賞作品は Google I/O 2019 で発表します。

コンテストの詳細と応募方法については、flutter.dev/create（英語） をご覧ください。


コンテストの概要

期限: 応募期限は 4 月 7 日午後 11 時 59 分（太平洋夏時間: GMT -7）です。

応募方法: flutter.dev/create の応募フォームを使ってアプリを提出してください

受賞者と賞品: Flutter のエキスパートが、見た目の美しさ、コードの品質、アイデアの斬新さ、全体の完成度に基づいて応募作品を評価します。賞品として、フルスペックの iMac Pro、Google Home Max、Google Home Mini をご用意しています。

みなさまのご応募をお待ちしております！

Reviewed by Tomoko Tanaka - Developer Product Marketing Manager, Google Play


Flutter のベータ版では、Dart 2 のプレリリース版も動作します。コードからの UI の宣言が最低限の記述量で行えるよう改善されています。たとえば、Dart 2 は new や const を推論できるので、UI 構築時のボイラープレートを削減できます。次に例を示します。 

// Before Dart 2
Widget build(BuildContext context) {
  return new Container(
    height: 56.0,
    padding: const EdgeInsets.symmetric(horizontal: 8.0),
    decoration: new BoxDecoration(color: Colors.blue[500]),
    child: new Row(
      ...
    ),
  );
}

// After Dart 2
Widget build(BuildContext context) =>
  Container(
    height: 56.0,
    padding: EdgeInsets.symmetric(horizontal: 8.0),
    decoration: BoxDecoration(color: Colors.blue[500]),
    child: Row(
      ...
    ),
  );


Flutter のエコシステムの繁栄を目の当たりにして、私たちも興奮しています。Flutter で動作するパッケージは 1000 以上（SQLite、Firebase、Facebook Connect、共有プリファレンス、GraphQL 他多数）にのぼり、チャットには 1700 名以上が参加しています。コミュニティによって、Flutter Institute、Start Flutter、Flutter Rocks などの新しいサイトが生まれていることもうれしく思います。さらに、コミュニティが編集、発行する新しい Flutter Weekly ニュースレターを購読することもできます。

現在は、1.0 リリースを見据えて、安定化とシナリオの補完に重点的に取り組んでいます。Flutter のロードマップは、コミュニティに大いに触発されています。現在は、Flutter の既存アプリへの埋め込みの簡易化、インライン WebView、ルーティングおよびナビゲーション API の改善、Firebase サポートの追加、インライン マップ、コアエンジンの小型化といった機能に取り組んでいます。約 4 週間ごとに新しいベータ版をリリースする予定です。また、ぜひとも Issue Tracker で皆さんや皆さんのアプリにとって重要な問題に投票（👍）してください。

今こそ、Flutter を試してみる最善のタイミングです。スタートガイドを参照すると、まったく初めての方でも短時間で初めての Flutter アプリを実行できます。すでに Flutter をインストールしている方は、こちらの手順に従ってベータ版チャンネルに切り替えることができます。

皆さんのサポート、フィードバック、そして多くの貢献に心から感謝申し上げます。この旅を皆さんとともに続けられること、そして皆さんのアプリがリリースされることを楽しみにしています！



Reviewed by Takuo Suzuki - Developer Relations Team