☁︎ 基調講演

生成 AI に関する革新的な取り組みを行う企業の取り組みや、Google Cloud の最新ソリューションをお届けします。DAY1 は、LINEヤフー、星野リゾートなどいち早く生成 AI を活用されている企業が登壇し、ビジネス変革のヒントをお届けします。DAY2 は、開発者目線で Google Cloud が提供する生成 AI のコンセプトや、日本テレビ、ヤマト運輸、トヨタ自動車、三井住友フィナンシャルグループなど、業界をリードする企業がいかに Google Cloud を活用しているか、語ります。

☁︎ おすすめセッション

以下に、一部ご紹介します。当日のライブ配信がないこと、また席数に限りがあるので、気になるものがあれば、イベント登録をした後に、早めにセッション登録いただきますよう、お願いします。


日本時間 8 月 1 日（木）、2 日（金）に、旗艦イベント Google Cloud Next Tokyo '24 を開催します。待望のセッション情報が公開されました！

☁︎ 基調講演

生成 AI に関する革新的な取り組みを行う企業の取り組みや、Google Cloud の最新ソリューションをお届けします。DAY1 は、LINEヤフー、星野リゾートなどいち早く生成 AI を活用されている企業が登壇し、ビジネス変革のヒントをお届けします。DAY2 は、開発者目線で Google Cloud が提供する生成 AI のコンセプトや、日本テレビ、ヤマト運輸、トヨタ自動車、三井住友フィナンシャルグループなど、業界をリードする企業がいかに Google Cloud を活用しているか、語ります。

☁︎ おすすめセッション

以下に、一部ご紹介します。当日のライブ配信がないこと、また席数に限りがあるので、気になるものがあれば、イベント登録をした後に、早めにセッション登録いただきますよう、お願いします。


【AI と機械学習】生成 AI Innovation Awards 最優秀賞！AI と人を共進化に導く学習業務活用支援

ソフトバンク Axross の学習の業務定着化支援機能での Vertex AI など Google Cloud をフル活用したアーキテクチャを紹介します。新機能である協働ノートでの学び、意見を Vertex AI 支援で発散 / 収束させ、組織独自のノウハウ ドキュメント化を促進、知識 / スキルを可視化 / 数値化します。それらデータ活用で人に合わせて支援 AI 自体が進化、AI と人が協調的に進化する AI 時代最適なプラットフォームの提案です。


【アプリケーション開発】サーバレスでモバイルアプリ開発！ NTTコム「ビジネスdアプリ」のアーキテクチャ

NTTコミュニケーションズが中小企業向けに開発したモバイルアプリ「ビジネスdアプリ」は社員内製によって開発しています。Google Cloud のサーバレス サービスを徹底的に活用することによって、開発チームはプログラム開発に集中でき、短期間で開発をすることができました。本セッションでは Google Cloud のサーバレス サービスの活用のコツと注意点を解説します。


【インフラストラクチャ】同時接続数 185 万人を支えたパルワールドのインフラ最前線

発売 1 か月で総プレイヤー数 2500 万人を記録したパルワールド。大ヒットの裏側で起きた数々のエピソードや危機的事態を乗り切ったノウハウについて紹介します。


【データ分析】楽天グループの大規模データ分析ツール「Rakuten Analytics」における BigQuery 活用

「Rakuten Analytics」は、楽天グループの膨大なアクセスログを集約し、アナリストやデータ サイエンティストがデータのポテンシャルを最大限に引き出せるように設計された分析プラットフォームです。BigQuery を活用することによってパフォーマンスが大きく改善され、社内のデータドリブンな文化の実現に大きく前進したストーリーについて解説します。


【生産性とコラボレーション】Gemini for Google Workspace 最新アップデート

進化し続ける Gemini for Google Workspace の最新アップデート情報をお届けいたします。業務部門において、どのように利用されているのか？導入におけるメリット、最新機能をご紹介いたします。


開催概要

名称 : Google Cloud Next Tokyo '24（略称 Next Tokyo '24）

日時 : 日本時間 2024 年 8 月 1 日（木） ~ 2 日（金）

会場 : パシフィコ横浜 ノース

対象 : 開発者から CEO まで、クラウド テクノロジーを使ったビジネス課題の解決を探求する、すべての方


- お問い合わせ - 

Google Cloud Next Tokyo 運営事務局

E-mail: gc-nexttokyo-info@google.com



この記事は Google Maps Platform デベロッパー マーケティング担当 Ahsan Ashraf による Google Maps Platform Blog の記事 "Google I/O '24: Introducing Gemini model capabilities for Places API, 3D Maps in the Maps JavaScript API, and open-source React components" を元に翻訳・加筆したものです。詳しくは元記事をご覧ください。 ...

この記事は Google Maps Platform デベロッパー マーケティング担当 Ahsan Ashraf による Google Maps Platform Blog の記事 "Google I/O '24: Introducing Gemini model capabilities for Places API, 3D Maps in the Maps JavaScript API, and open-source React components" を元に翻訳・加筆したものです。詳しくは元記事をご覧ください。

編集者注 : この投稿は、Google が毎年開催しているデベロッパー カンファレンスでの Google Maps Platform に関する最新のニュースをお伝えする、Google I/O 2024 シリーズの一部です。JavaScript で Photorealistic 3D Maps を使用して臨場感あふれる地図可視化エクスペリエンスを作り出す方法と、Places API の Gemini モデル機能を使用してエクスペリエンスを構築する方法について、詳しくは、5 月 16 日に実施したセッションに登録してご確認ください。

20 年ほど前、最初の Google Maps API が世界に向けてリリースされ、ウェブとモバイルにわたる地理空間エクスペリエンスに革命を引き起こしました。それ以来、Google Maps Platform はデベロッパー コミュニティとともに進化し、シンプルな 2D マップから高解像度の衛星画像や、現実的な 3D モデルにまで拡大してきました。マップデータを可能な限り最新の状態に保つ基盤として AI を活用し、AI とコンピュータ ビジョンがそれらのデータをすべて融合させてより没入感のあるエクスペリエンスを実現しています。

今回は、Google Maps Platform 3D データセットの可能性の限界をさらに押し広げる新機能についてお知らせします。これは、AI をデータ利用の枠を超えて初めてプロダクト領域にまで拡張し、お客様が Google のサービスを活用して容易に構築できるようにするものです。まず、Places API を皮切りに、Gemini モデルの機能を Google Maps Platform に導入していきます。また、Google が長年醸成してきたレンダリング技術を活用して、最も使われている API である Maps JavaScript に Photorealistic 3D Maps を導入します。さらに、オープンソースの React コンポーネント ライブラリのリリースにより、Google Maps Platform を使用した構築がこれまでよりも迅速かつ効率的になります。

Places API の AI を活用した機能により、ユーザーが最適な場所を見つけやすくする

Places API 向けの Gemini モデル機能が試験運用版でリリースされ、生成 AI による場所やエリアに関する有益な概要を表示できるようになりました。場所の概要は、レストラン、ショップ、観光スポット、公園などの場所に表示されます。ユーザーが探している場所をすばやく見つけやすくなり、場所のカスタム説明を自分で書く必要がなくなります。エリアの概要は、ある場所から徒歩圏内にあるショッピング施設、レストラン、観光スポットの概要を示して、近くでユーザーができるアクティビティーを把握しやすくします。

また、より詳しいコンテキストが提供されるため、特定の検索結果が表示される理由をユーザーが理解しやすくなります。AI を利用したコンテキスト検索結果により、「犬を同伴できるカフェ」とユーザーが検索すると、関連した食事スポットのリストが表示されます。さらに、レストランのレビューやレストランを訪れた犬の写真が目立つように表示されます。こうした新機能の詳細については、お知らせのブログをご覧ください。

ユーザーは、場所の概要によって、レストランを見つけ、選択することがより簡単になります。


Maps JavaScript API で没入型エクスペリエンスを作り出す

Maps JavaScript API の Photorealistic 3D Maps の試験運用版リリースは、使い慣れた単一の API を通じて構築される没入型ウェブ エクスペリエンスの新時代をもたらします。デベロッパーは初めて、Google 独自のレンダリング技術を使用して Google の高解像度 3D マップにシームレスにアクセスできるようになります。これにより、デベロッパーの選択肢が増え、使いやすさが向上するため、開発を効率化してエンドユーザーに卓越したエクスペリエンスを確実に提供できます。

JavaScript の Photorealistic 3D Maps は、ネイティブのウェブ プログラミング言語で 3D データの活用を実現し、デベロッパーがレンダリング ツールを追加することなく魅力的なエクスペリエンスを生み出せるようにします。不動産のバーチャル ツアーを強化する、旅行サイトで世界中の行き先を魅力的に演出する、ハイパーリアルな都市環境を作成するなど、JavaScript の Photorealistic 3D Maps を使用すると、3D の没入型エクスペリエンスをこれまで以上に簡単に構築できます。いずれも、Google の広範囲にわたる対象地域と信頼できるインフラストラクチャによって実現されます。Maps JavaScript API を使用して 3D マッピング エクスペリエンスを構築する方法の詳細については、お知らせのブログをご覧ください。

こちらの 3D マップを覧ください。以下のインタラクティブな 3D マップを使用して、息をのむようなアマルフィ海岸を探索しましょう。海岸に沿って移動したり、ズームインして名所であるアマルフィ大聖堂を見つけたりしてください。エンドユーザーのために何を実現できるか、想像してみましょう。

インタラクティブなマップ : JavaScript の Photorealistic 3D Maps を使用して作成されたインタラクティブな 3D マップでアマルフィ海岸を旅することができます

React コンポーネントを使用して迅速かつ簡単に構築する

昨年の Google I/O では、デベロッパーがマップをより迅速かつ簡単に構築できるウェブ コンポーネントのリリースを発表しました。今年は React Google Maps Library の公式 1.0 リリースを発表します。これは、React ウェブアプリに Maps JavaScript API コンポーネントを統合するためのライブラリとして Google の協力の元初めて作成されたものです。

import React from 'react';

import {createRoot} from 'react-dom/client';

import {APIProvider, Map} from '@vis.gl/react-google-maps';


const App = () => (

  <APIProvider apiKey={API_KEY}>

    <Map

      style={{width: '100vw', height: '100vh'}}

      defaultCenter={{lat: 22.54992, lng: 0}}

      defaultZoom={3}

      gestureHandling={'greedy'}

      disableDefaultUI={true}

    />

  </APIProvider>

);


const root = createRoot(document.querySelector('#app'));

root.render(

    <App />

);


このライブラリを使用すると、デベロッパーは Maps JavaScript API によって提供されるすべての機能を React アプリケーションに簡単に統合できます。ご利用方法の詳細については、お知らせのブログをご覧ください。


詳細

上記の進歩は、マップでできることの限界を押し広げ、デベロッパーが次世代の地理空間サービスを構築できるようにするという Google の取り組みを反映しています。上記の新しいプロダクトや機能の詳細については、Google I/O テクニカル セッションをご覧ください。また、Maps Compose ライブラリに焦点を当てたワークショップが 5 月 16 日から視聴できます。皆様が構築されるサービスを楽しみにしております。

Google Maps Platform に関する詳しい情報はこちらをご覧ください。ご質問やフィードバックはページ右上の「お問い合わせ」より承っております。

この記事は Justin Donnelly による Chromium Blog の記事 "How Machine Learning improved the Chrome address bar on Windows, Mac and ChromeOS" を元に翻訳・加筆したものです。詳しくは元記事をご覧ください。 ...
この記事は Justin Donnelly による Chromium Blog の記事 "How Machine Learning improved the Chrome address bar on Windows, Mac and ChromeOS" を元に翻訳・加筆したものです。詳しくは元記事をご覧ください。


Chrome のアドレスバー（オムニボックスとも呼ばれます）は、毎日何十億回も使われているツールで、ウェブを簡単に検索できるようにしています。これを使うと、タブやブックマークをすばやく探すことも、以前にアクセスしたウェブページに戻ることも、情報を検索することもできます。

最新リリースの Chrome（M124）では、PC 版 Chrome のアドレスバーに機械学習モデルを組み込み、これまで以上に正確かつ適切にウェブページを提案できるようにしました。今後は、このモデルを使って、検索候補の関連性スコアの改善も行いたいと考えています。ここでは、今回の組み込みにつながったいくつかの重要な知見や、新しいモデルに期待されることについて、詳しくお伝えします。

これまでの経緯

アドレスバー担当チームのエンジニアリング リードである私にとって、すべてのリリースは特別なものですが、今回のリリースはとりわけ身近で大切なものです。初めて Chrome のアドレスバーに携わったとき、ユーザーに使いやすいと思ってもらうためのアイデアを周りに尋ねました。その 1 番の答えは、「スコアリング システムを改善する」でした。問題は、スコアが悪いことではありませんでした。実際、URL や検索語句を表示するアドレスバーの機能は、魔法のように感じられることがあります。問題は、それに 柔軟性がないことでした。 手作業で作成して調整する方法はうまく機能しましたが、それを改善したり、新しいシナリオに適応させたりするのは困難でした。そのため、スコアリング システムは長い間ほとんど手つかずのままでした。

その大半の期間、明らかに向かうべき方向となっていたのが、ML でトレーニングしたスコアリング モデルでした。しかし、ここにたどり着くまでに、多くの失敗を重ねることになりました。これほど長い間、この課題を解決できなかったのは、文字通り毎日何十億回も使われている機能の中核となる仕組みを置き換えるのが難しかったためです。ソフトウェア エンジニアリング プロジェクトは、「飛行機を飛ばしながら作る」と表現されることがあります。このプロジェクトは、「世界中のすべての飛行機が飛んでいる間に、すべての座席を交換する」ようなものでした。規模が非常に大きく、変更はすべてのユーザーに直接影響します。

有能で献身的なこのようなチームの努力がなければ、この野心的な取り組みは不可能でした。途中でぶつかったり、壁を突破しなければならなかったり、予期せぬ問題が発生してペースが落ちることもありましたが、ユーザーのためにどうしても正しい形でこれを行いたいという誠実な気持ちに突き動かされてきました。

意外な知見

ML システムで作業する楽しみの 1 つは、個人やチームでは困難または不可能な規模で、 すべての データを考慮したトレーニングを行えることです。そして、それは意外な知見につながる可能性があります。

このプロジェクトで一番驚いたのは、特定のシグナル、すなわち前回のナビゲーションからの時間のスコアリング曲線を見たときでした。このシグナルで期待されるのは、小さいほど（特定の URL に移動したのが最近であるほど）、関連性スコアが高くなることでした。

そして実際に、モデルはそのように学習しました。しかし、詳しく見てみると、驚くべきことがわかりました。ナビゲーションからの時間が非常に短い場合（数時間、数日、数週間ではなく、数秒だった場合）、モデルが算出する関連性スコアは、 減少 していたのです。トレーニング データを確認したところ、ユーザーが実際には望んでいない URL に移動し、すぐに Chrome のアドレスバーに戻って、もう一度試すパターンが記録されていることがわかりました。その場合、移動した URL は、ほぼ間違いなく、ユーザーが望んだものでは ありません。そのため、2 回目の試行との関連性スコアは低くなるはずです。

よく考えてみれば、これは当然のことです。そして、ML でスコアリングを始めていなければ、このシナリオを反映させるために、古いシステムに新しいルールを追加していたはずです。しかし、トレーニング システムは、このパターンを見つけて学習してくれました。その前には、このようなことが起きているとは、誰も想像できませんでした。

今後について

この新しい ML モデルを使って、ユーザー エクスペリエンスを向上させる多くの新しい可能性を開くことができると考えています。たとえば、1 日の中の時間帯を区別して関連性を向上させるなど、新たなシグナルを組み込むことができます。モバイル、エンタープライズ、アカデミックといったユーザーごとに、あるいは言語や地域の違いなどに応じて、特定の環境向けの特別なバージョンのモデルをトレーニングすることも模索したいと考えています。

さらに、ユーザーが Chrome のアドレスバーを操作する方法は、時間の経過とともに変化することがわかっています。そのため、関連性スコアもそれに合わせて変化させる必要があると考えています。新しいスコアリング システムを使えば、これまで以上に新鮮なシグナルを収集し、時間の経過とともに新しいモデルを定期的に再トレーニング、評価、展開することができます。


Posted by Eiji Kitamura - Developer Relations Team

この記事は プロダクト マネージャー James Harrison とグループ プロダクト マネージャー Matt Moore による Google Maps Platform Blog の記事 "Provide AI-powered place and area summaries, with Gemini model capabilities for Places API" を元に翻訳・加筆したものです。詳しくは元記事をご覧ください。 ...


この記事は プロダクト マネージャー James Harrison とグループ プロダクト マネージャー Matt Moore による Google Maps Platform Blog の記事 "Provide AI-powered place and area summaries, with Gemini model capabilities for Places API" を元に翻訳・加筆したものです。詳しくは元記事をご覧ください。

編集者注 : この投稿は、Google が毎年開催しているデベロッパー カンファレンスにおける Google Maps Platform に関する最新ニュースをお伝えする、Google I/O 2024 シリーズの一部です。Places API の Gemini モデル機能を使用したエクスペリエンスの構築方法について詳しくは、5 月 16 日開催のセッションをご覧ください。

20 年近くにわたり、開発者の皆様は Google のプロダクトを利用して革新的なマップ活用サービスを生み出してきました。このたび Google は、Google Maps Platform に Gemini モデル機能を導入し、開発者の皆様がさらなるイノベーションを推進できるよう支援いたします。最初に導入されるのは Places API です。開発者の皆様は、評価、口コミ、営業時間など、2 億 5,000 万件以上の企業や場所に関する豊富な情報を利用するだけでなく、生成 AI を活用した、場所やエリアに関する有益な要約をご自身のアプリやウェブサイトに表示できるようになります。頻繁に更新されるこれらの要約では、Gemini モデルを使用して、3 億人を超える Google マップ投稿者コミュニティによる場所に関する情報やインサイトを分析しているため、できる限り最新の情報を表示するのに役立ちます。

Places API のもうひとつのアップデートは、AI を活用したコンテキスト検索結果の向上です。ユーザーがプロダクト内で場所を検索すると、検索に関連する口コミや写真を表示できるようになり、より簡単に場所を比較して意思決定を下せるようになります。これらの機能は現在、試験運用版としてすべての開発者の皆様にご利用いただけます。コンテキスト検索結果は世界中が対象となっていますが、場所とエリアの要約は米国でのみ利用可能で、今後対象国を順次増やしていく予定です。デモを試して、その仕組みをご確認ください

Gemini モデルを使用した、Places API での場所とエリアの要約

これらの新機能により、ユーザーはあなたのアプリやウェブサイトで、求めている情報をより素早く簡単に見つけられるようになります。また、より深いインサイトや要約が提供されるという利点もあり、その地点のカスタム説明を自ら書く必要がなくなります。

場所についての短い要約と長い要約で、ユーザーがその場所を素早く理解できるようにする

たとえば、レストラン予約アプリで、ユーザーが自分たちのグループにぴったりのレストランを把握できるようにしたいと仮定します。アプリでレストランを検索すると、名物料理やハッピーアワーの情報、お店の雰囲気など、重要なすべての情報がすぐに要約として表示されます。これにより、ユーザーは個々のレストランを詳しく調べなくても、どこに行くかを簡単に決めることができます。

製品に合わせて要約をカスタマイズできるよう、短い要約（平均約 100 文字）と長い要約（平均約 400 文字）の 2 つの長さの要約を利用できます。レストラン、ショップ、スーパーマーケット、公園、映画館など、さまざまな種類の場所で利用できます。また、今後さらに増える予定です。短い要約は、Gemini モデルを使用することでより頻繁に更新されるようになり、手作業で記述した要約と比較して、これまでよりはるかに多くの米国内の場所で利用できるようになりました。長い要約は、さらに豊富な概要を提供します。レストランのおすすめ料理、雰囲気、サービスの質など、Places API でこれまで利用できた情報よりも多くの詳細情報を含めることができます。

場所の長い要約を使って、ユーザーが食事をする場所を簡単に決められるよう支援できることを示す架空の例


エリアの新しい要約で地理的エリアのおすすめスポットを強調

ときには、ある場所の周辺エリアのおすすめスポットを説明することも有効です。Gemini モデルを使用したエリアの新しい要約により、ユーザーはある場所から徒歩圏内にあるショップ、レストラン、アトラクションの概要を確認できるようになったため、その場所で何をするかを決めやすくなります。たとえば、自動車メーカーは、運転手が充電中に訪れる場所を選べるよう、カフェ、レストラン、店舗など、EV 充電スタンドの近くにある場所の要約を運転手に提供できます。

EV 充電スタンドの近くにある場所をまとめてエリアの要約で表示している架空の例


コンテキスト検索結果で関連性の高い口コミや写真を提供

最後に、AI を活用して多くのコンテキストを含めることで、その検索結果が表示される理由をユーザーが理解しやすくしました。たとえば、地元のレストランを検索できるアプリがある場合、「犬連れ OK のレストラン」と検索すると、関連する食事スポットのリストと一緒に、関連する口コミや口コミの抜粋、レストランを訪れた犬の写真が表示されます。こうした情報は、ユーザーがより多くの情報に基づいて意思決定をするのに役立ち、提供される結果への信頼度が高まります。

コンテキスト検索結果で関連性の高いクチコミや写真を提供している架空の例


エリア要約コンテンツの詳細

新機能の概要をご紹介したので、そのうちの 1 つについて、仕組みやプロジェクトでの使用方法を技術的に詳しく見ていきましょう。

以下のレスポンス places.AreaSummary オブジェクトは、エリア内にあるおすすめスポットの包括的な概要をユーザーに提供することを目的としています。関連するトピックで場所を分類し、場所ごとに簡単な説明を提供することで、ユーザーがその近くにあるさまざまな選択肢をすばやく把握できるようにします。これは、知らない地域を探索したり、特定の関心（カフェやレストランを探すなど）に基づいて行き先を決めたりする際に特に便利です。

電気自動車充電スタンドがあるエリアの要約を見ていきましょう。付近のカフェに関するレスポンス データに特に注目します。

AreaSummary { 

content_blocks: [ 

{ 

topic: "概要"

...

}

{ 

topic: "コーヒー"  // コンテンツ ブロックのテーマ

content: { 

text: "Acme Bread は、スープ、サラダ、サンドイッチのほか、コーヒーや焼き菓子も提供しています。Happy Coffee は人気のカフェで、特製ロースト、軽食、クイック サービスを提供しています。Perky Coffee は、コーヒー、紅茶、朝食の専門店で、ファミリー向けの健康的な環境で食事を提供しています。"

}

references: { } // コンテンツ ブロックの構成に使用する場所のプレイス ID

}

{ 

topic: "レストラン"

...

}

{ 

topic: "店舗"

...

}

]

}

AreaSummary オブジェクトには content_blocks というオブジェクトの配列が含まれます。個々のオブジェクトは、エリア内の特定のトピックやカテゴリを表します。類似する場所をグループ化することで、エリアに関する情報を整理します。各ブロックは以下の情報を提供します。

  • トピック : " 概要 "、" コーヒー "、" レストラン "、" 店舗 " といったコンテンツのカテゴリ。
  • コンテンツ : そのカテゴリに含まれる場所の説明。多くの場合、具体的な名前と提供するサービスについて言及します。
  • 参照する場所 : コンテンツで言及した場所を参照するプレイス ID の配列。これは、要約を特定の場所の詳細に関連付けます。

エリアの要約、場所の要約、コンテキスト検索結果をプロジェクトに追加する方法について詳しくは、ドキュメントをご確認ください。

実際に API 使ってみるには

試験運用中は、Places API の Gemini モデルの新機能とコンテキスト検索結果を無料でお試しいただけます。利用を開始して各機能の仕組みを把握するには、デモをご確認ください。また、公開 Issue Tracker でフィードバックや機能リクエストをお送りいただくこともできます。Places API の Gemini モデル機能を使用した地理空間エクスペリエンスの構築方法について詳しくは、I/O セッションをご覧ください。皆様が構築されるサービスを楽しみにしております。

Google Maps Platform に関する詳しい情報はこちらをご覧ください。ご質問やフィードバックはページ右上の「お問い合わせ」より承っております。

この記事は Google Maps ソリューション エンジニア、Ken Nevarez による Google Maps Platform Blog の記事 "Google Maps Platform Graduates React Integration Library to 1.0" を元に翻訳・加筆したものです。詳しくは元記事をご覧ください。

編集者注 : この投稿は、Google が毎年開催しているデベロッパー カンファレンスでの Google Maps Platform に関する最新のニュースをお伝えする、Google I/O 2024 シリーズの一部です。最新情報の詳細を確認するには、5 月 16 日の I/O 技術セッションか、Maps Compose ライブラリのワークショップに登録してください。



この記事は Google Maps ソリューション エンジニア、Ken Nevarez による Google Maps Platform Blog の記事 "Google Maps Platform Graduates React Integration Library to 1.0" を元に翻訳・加筆したものです。詳しくは元記事をご覧ください。

編集者注 : この投稿は、Google が毎年開催しているデベロッパー カンファレンスでの Google Maps Platform に関する最新のニュースをお伝えする、Google I/O 2024 シリーズの一部です。最新情報の詳細を確認するには、5 月 16 日の I/O 技術セッションか、Maps Compose ライブラリのワークショップに登録してください。


これまで数か月にわたって着実な成長を遂げ、コミュニティから積極的なサポートを得てきましたが、このたび React Google Maps ライブラリのリリースを発表いたします。これは Maps JavaScript API の React インテグレーション ライブラリの公式 1.0 リリースです。 11 月の最初のアルファ版リリースから構築されたこのライブラリにより、React.js のデベロッパーは豊富な地理空間エクスペリエンスを素早く構築できるようになりました。

React Google Maps ライブラリが提供するもの

  • React インテグレーション : 直感的な開発体験により Maps JavaScript API の要素を React のコンポーネントとして取り入れ、状態管理と、基礎となるマップ インスタンスにアクセスするためのフックを完備。
  • 拡張性 : コンテキストとフックにより、特定のユースケースに適したカスタム コンポーネントの作成が可能。
  • フレームワーク スイートのインテグレーション : React Google Maps ライブラリとデータ可視化パワーハウスである deck.gl の強みを組み合わせ、Google マップ上に魅力的な 2D と 3D の WebGL/WebGPU ビジュアリゼーションをオーバーレイ。

React サポートの歴史

現在と比較してウェブの状況が大きく異なっていた 2005 年のことです。Maps JavaScript API はオンライン マッピングを一変させ、その後の数年間で、React のようなフロントエンド フレームワークはウェブ開発に革命をもたらしました。

Google は React の優位性を認識し、ラッパー ライブラリとチュートリアルを活用したサポートを開始しました。それを基に React Google Maps ライブラリのアルファ版リリースが誕生しました。これは React コンポーネントと、Maps JavaScript API を簡単に統合するためのフックを提供する、Google が資金提供した最初のライブラリです。

オープンなコラボレーションへの貢献

react-google-maps の健全で持続可能な環境を醸成するために、Google は OpenJS Foundation と提携しました。この財団は、node.js、ESLint、Jest など、重要な JavaScript プロジェクトを手掛けたことで知られています。OpenJS Foundation は、地理空間データ可視化フレームワークのスイートである vis.gl をホストしており、vis.gl は 5 年間にわたり @deck.gl/google-maps を維持してきました。vis.gl は react-google-maps にオープンなガバナンスを提供し、Google はその維持と進化に積極的に貢献します。

React Google Maps ライブラリの使用 : CARTO 社の例

CARTO 社は React と Google マップを deck.gl と組み合わせてアプリケーションを構築しています。そのうちの一つが、米国で暴風雨が発生したときに保険に及ぼす影響を予測するこのアプリケーションです。

CARTO と deck.gl が提供する大規模な地理空間アプリケーションの多くは、Google Maps Platform とのインテグレーションにより、開発者にもエンドユーザーにも使い慣れた環境を提供しています。不動産や環境分野でのユースケースの可視化では、高解像度の衛星画像やストリートビューとのスムーズなインテグレーションがなければ、そのインパクトははるかに小さいものになることでしょう。

「CARTO では、React と Google Maps Platform を日常的に使用しています。このリリースが vis.gl コミュニティの他のプロジェクトに加わるのを見ると、私たちは非常に嬉しくなります。地理空間と React のエコシステム双方にとって素晴らしい未来が待っていると思います。」 
- CARTO 社、プリンシパル レンダリング エンジニア、Felix Palmer 氏

最新の React と deck.gl が使用されたアプリケーションにおいて、React Google Maps ライブラリはこのインテグレーションをより簡単で、シームレスで、信頼性の高いものにします。Google マップを React コンポーネントとして扱うことで、必須である Maps JavaScript API を宣言的な UI に変換する負担がなくなります。さらに、deck.gl とのシームレスなインテグレーションにより、パフォーマンスの高い地理空間ビジュアリゼーションを簡単に作成できます。

実際に簡単な例をご紹介します。


const App = () => {

  return (

    <APIProvider apiKey={process.env.GOOGLE_MAPS_API_KEY}>

      <Map

        defaultCenter={config.mapCenter}

        defaultZoom={config.mapZoom}

      >

        <AdvancedMarker position={config.markerPosition} />

        <MapControl position={ControlPosition.TOP_LEFT}>

          <ResetMapButton />

        </MapControl>

      </Map>

    </APIProvider>

  );

};


const ResetMapButton = () => {

  const map: google.maps.Map | null = useMap();

  const resetMap = useCallback(() => {

      if (!map) return;


      map.setCenter(config.mapCenter);

      map.setZoom(config.mapZoom);

  }, [map]);


  return <button onClick={resetMap}>Reset Map View</button>;

};



ここまで見てきたように、@vis.gl/react-google-maps で利用可能なフックとコンポーネントを使用することで、貴重な開発時間を節約し、アプリケーションの複雑さを軽減できます。これにより、アプリケーションは Google マップのほとんどの機能について、メンテナンスがより容易で常に最新の状態が保たれる React のネイティブ バージョンが利用できるようになり、他のコードベースとも適合します。

実際に使ってみる

ドキュメントとサンプルは React Google Maps ライブラリのウェブサイトでご覧ください。一般的なユースケース（例 : Place Autocomplete）や複雑なユースケースについて開発者をさらにサポートするために、ステップバイステップのチュートリアル codelab や、このライブラリの React コンポーネントを他のウェブ コンポーネントと統合するためのコードサンプルも提供しています。このライブラリについて他の開発者とやり取りをするには、Google Maps Platform Discord サーバーの #react チャネルに参加してください。最後に、React で Maps JavaScript API を使用するために、こちらの動画チュートリアルのプレイリストで学習されることもお薦めします。

Google は、React Google Maps ライブラリが「1.0」という一つのマイルストーンに到達したことで、React ベースの Google Maps Platform プロジェクトの新しい時代が到来すると信じています。このエキサイティングな取り組みを共に体験してくださりありがとうございます。

Google Maps Platform に関する詳しい情報はこちらをご覧ください。ご質問やフィードバックはページ右上の「お問い合わせ」より承っております。