Google Maps Platform を初めて使用される場合、まずはマップ上にマーカーを置いてみた人も多いのではないでしょうか。多くの場合、それが Google が持つ現実世界の知見を活用し、世界中のあらゆる場所においてユーザー向けの臨場感あふれる便利なマップ エクスペリエンスの構築を実現するための第一歩となったりします。ユースケースや業界の違い、ウェブ向けなのかモバイル向けなのかにかかわらず、多くの場合、マーカーがマップベースのエクスペリエンスの中核となっています。

デベロッパー コミュニティから数多く寄せられる要望が、簡単に使用できる高度なマーカー機能でした。このたび、Google Maps Platform チームは皆様の要望にお応えすべく、Maps JavaScript API 用の「高度なマーカー」のプレビュー版をリリースいたします。これにより、高度にカスタマイズされ高速に動作するマーカーの作成が可能となり、上質なユーザー エクスペリエンスの提供、ブランドの紹介、時間とリソースの節約が実現します。

主な機能とユースケース

Google マップの赤いピンのカスタマイズ

デフォルトの赤いピンを簡単にカスタマイズする機能は、デベロッパーからの要望が特に多かった機能です。高度なマーカーの新しい「PinView」クラスでは、画像ではないため、デフォルトのピンの色、背景、アイコン、枠線をコードで直接変更できるようになります。

これにより、さまざまなユースケースが可能となります。小売店は店舗の場所を示すマーカーを、ブランドのカラーに合わせて変更することができます。旅行会社はホテル周辺の施設のカラーやアイコンを変更することで、ユーザーに周囲の環境に基づいて理想のホテルを選んでもらいやすくすることが可能です。また、ロジスティクス企業は、リアルタイムで変化する荷物または車両の状況を反映して、マーカーの色を変更することができます。

マーカーをカスタマイズする際には、アイコンや写真といった自身が保有する画像アセットを使用するという選択肢もあります。これにより、PNG や SVG といった HTML の「img」タグでサポートされた画像ファイルを使用することが可能となります。また、CSS を使用して高度なマーカーを動的にスタイル設定およびアニメーション化して、サイズ、不透明度、ポジション、カラーなどを変更することも可能で、これまで以上に簡単に Google マップへ動的なマーカー エクスペリエンスを追加できるようになります。これにより、たとえば、ロゴやその他のブランド アセットを使用して、ブランディングをより周到にマップに組み込むことができるようになります。

SVG 画像を使って構築され、カスタムでアニメーション化されたマーカーの見本のモックアップ

カスタム マーカーで生み出す、コンテキストに沿ったインタラクティブな体験

カスタマイズした高度なマーカーは、カスタムの HTML 要素を使用することでも作成できます。作成したマーカーは、ユーザーとのインタラクションにも対応し、高い柔軟性を持つ CSS のスタイルにも適用させることが可能です。この機能であれば、これまでは複雑なカスタム オーバーレイを使用しなければ構築が難しかった、美しく、魅力的で、インタラクティブなマーカー エクスペリエンスを生み出すことが可能となります。たとえば、不動産会社の場合は、ユーザーの操作に応じて物件の価格を表示するマーカーを作成でき、それにより、物件の住所、面積、寝室や浴室の数といった追加の有益な情報を表示することができます。

不動産会社が HTML 要素を使用したカスタム マーカーを使って物件の価格を表示する場合のサンプル

デモにアクセスして、ここで紹介したユースケースやその他のユースケースをご確認ください。 

向上したマーカーのパフォーマンスとアクセシビリティ

高度なマーカーは従来型のマーカーよりも 66% 読み込みが速く、より素早いパンやズームを提供します¹。また、高度なマーカーでは、大量のマーカーに対する高速な読み込みもサポートしています。

高度なマーカーを使用した 500 のマーカーを含む地図の読み込み、パン、ズーム

さらに数多くのユーザー補助機能の改良も行いました。これにより、スクリーン リーダーやキーボードの操作を活用したユーザー向けのプロダクトを作成することが可能になりました。こうした改良により、ユーザーはマーカーをドラッグ＆ドロップで移動するという操作をすべてキーボードで行うことができます。マーカーのタイトルはスクリーン リーダーで自動的に取得され、マーカーはユーザー補助ロールにデフォルト設定されます。

高度なマーカーでは、スクリーン リーダーまたはキーボードの操作を利用したプロダクトの作成が可能

高度なマーカーを使ってみる

高度なマーカーは、最近プレビュー リリースされたデータドリブンのスタイル設定と同様に、Maps JavaScript API 用 Dynamic Maps に組み込まれており、Cloud ベースのマップスタイル設定に最新の機能として追加されています。高度なマーカーの使用の開始と追加の機能についての詳細は、こちらのドキュメントと次の動画をご確認ください。

皆様が、高度なマーカーを活用して、マップ エクスペリエンスの基礎的な部分をどのように再検討されるのかを楽しみにしております。

1 高度なマーカーについて、500 のマーカーを配したマップを使って内部でベンチマーク テストを行いました。実際の結果は、高度なマーカーの構成、アプリケーションの実装、ブラウザ、ハードウェアの仕様などを含むさまざまな要因によって変わります。

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

Posted by 丸山 智康 (Tomoyasu Maruyama) - Developer Relations Engineer

Google Maps Platform では、デベロッパーの皆様が革新的な地理空間情報を活用したサービス構築が行えるよう、便利な新機能の継続的な開発や提供に努めています。たとえば、一般ユーザーが毎日使用している Google マップの最新のイノベーションを API として提供したり、ご要望の多い機能をプラットフォームに追加しています。このたび、新しい Routes API で「環境に優しいルート選択」の提供を開始することを発表致します。Google マップのユーザーアプリですでに利用することができる環境に優しいルート選択を使用すると、燃料消費を抑えるように最適化されたルートを選択できます。さらに、世界中のデベロッパーから多くの要望が寄せられた、高度なルート選択、地図のカスタマイズ、住所確認などの新機能も発表します。これらの新機能を使用すると、アカウントの登録時や決済時にユーザーの住所を確認したり、より有益で柔軟なルートをドライバーに提供したり、高度にカスタマイズされたマーカーを作成できるため、ユーザー エクスペリエンスが向上し、業務効率が高まります。

より有益かつ柔軟な、環境に優しいルートの提示

Google はここ数年間、運送業界や物流業界の最大手企業と密接に連携し、モビリティ サービスを通じて、カスタマー エクスペリエンスや配送業務の大規模な改善を支援してきました。このたび多数のご要望にお応えして、これらの高度なルート選択機能の多くを、環境に優しいルート選択とともに、利用可能な国のすべての Google Maps Platform デベロッパー向けにリリースいたします。

環境に優しいルート選択で、より一層サステナブルなナビゲーションと、燃料消費を抑えるための最適化を実現

ドライバーが Google マップで環境に優しいルート選択を利用すると、米国エネルギー省の国立再生可能エネルギー研究所の分析情報と欧州環境機関のデータに基づいて、最も燃料効率が良いルートを見つけることができます。リリース以来、削減してきた二酸化炭素排出量は推定で 50 万トン以上にのぼります。これは、燃料自動車 10 万台分の二酸化炭素排出量削減に相当します。年内には、環境に優しいルート選択をデベロッパー向けに提供開始できる見込みです。

これにより、環境に優しいルート選択を有効にするオプションを製品やアプリに組み込んで、燃料消費の節約に貢献できるようになります。エンジンの種類を選択し、リアルタイムの交通情報を有効にすると、環境に優しいルート選択を使用した場合の燃料効率やエネルギー効率を、最も正確に見積もることができます。たとえば、配送業者やライドシェアリング サービスは、燃料消費量と節約量を 1 回の走行、複数回の走行、あるいは保有する車両全体で測定して、業績の向上につなげられます。

環境に優しいルート選択は、Google マップですでに利用可能となっている場所で、数か月以内にプレビュー版の提供が開始されます。登録すると最新情報を受け取ることができます。

環境に優しいルート選択と燃料節約量の見積もりの例を示すサンプル

新しい Routes API でより有益かつ柔軟なルートを提供

今回、さらに、新しい Routes API のプレビュー リリースを発表します。これは、Directions API と Distance Matrix API のパフォーマンスを最適化したバージョンであり、デベロッパーはより有益で柔軟なルートをユーザーに提供できるようになります。

新しい Routes API は、ビジネスにおいて重要な役割を果たしている Directions API と Distance Matrix API の基本機能に基づいて構築されています。たとえば、リアルタイムの交通量を反映する最新のルートや、複数の出発地と目的地を組み合わせた複雑な行列計算から算出される距離や到着予定時刻などの機能です。さらに、より有益で柔軟なルートを提供し、到着予想時刻の精度を向上するために、次のような高度な新機能も備えています。

• 二輪車（オートバイ）用ルート（利用可能な地域）

• ルートの費用をより正確に算出するための通行料金データ（利用可能な地域）

• ルートのリアルタイムの交通状況の可視化

• 地点に通過地点と停止地点のいずれかを選択可能

• レイテンシを低減するためのきめ細かいコントロール

• 環境に優しいルート選択（年内に提供予定）

新しい Routes API は、プレビュー版で提供を開始しました。この新しい API の機能と利点について詳しくは、プロダクトのブログをご覧ください。

オートバイ用ルートと通行料金データの例を示すサンプル

Address Validation でアカウント登録、決済、配送を改善

住所は、人や場所を見つけるだけではなく、商品を配達し、銀行口座を開設するためにも必要なものです。しかし、無効な住所データは、ビジネスの時間や費用の浪費につながることがあります。最近の調査では、オンライン注文での住所の誤字や脱字は、その大半が住所確認ツールを導入していれば回避できていたことが明らかになっています¹。この問題を解決するため、無効な住所入力の検出に役立つ新しい API、Address Validation の提供を開始します。Address Validation は、住所の構成要素の特定、エラーの修正、住所に不足しているデータの補完によって、注文のキャンセル、カスタマー サポート チケットの発行、払い戻しを防ぐためのツールです。これには、グローバルに収集されている Google Maps Platform のプレイスデータ、Google が蓄積している幅広い地域の住所情報、広範囲の住所が網羅されている米国内の郵便データが活用されています。Address Validation を導入すると、アカウント登録や決済がスムーズになるため、ユーザー エクスペリエンスが向上し、ビジネスの時間や費用を節約できます。

Address Validation は、今後数か月以内に一部の市場で一般提供が開始される予定です。登録すると最新情報を受け取ることができます。

Address Validation が住所の構成要素を識別し、住所が存在することを確認

「高度なマーカー」で独自のマーカーを作成

デフォルトの赤いピンをコード内で簡単にカスタマイズする機能と、SVG 要素と HTML 要素を使用してカスタム マーカーを作成する機能は、いずれもデベロッパーからの要望が特に多かった機能です。このたび、このオプションを備えた Maps JavaScript API 用の「高度なマーカー」のプレビュー リリースを発表いたします。 

高度なマーカーを使用すると、Google マップの赤いピンを簡単にカスタマイズできます。デフォルトのピンの色、背景、アイコン、枠線をコードで直接変更でき、画像は必要ありません。SVG を直接的にサポートしているため、ブランドのロゴなどの画像を使用してカスタム マーカーを作成できます。また、CSS を最大限に活用して、ユーザーの操作に反応する HTML 要素を使用したカスタム マーカーを作成できます。たとえば、不動産業の場合は、ユーザーの操作に応じて住宅価格を表示するマーカーを作成できます。高度なマーカーを使うと、作業効率も向上します。読み込みが速くなり、パンやズームがよりスムーズになるうえ、豊富な種類のマーカーを高速で読み込んでお使いいただけます。

カスタム HTML 要素を使用して作成された高度なマーカーのサンプル

高度なマーカーは、最近プレビュー リリースしたデータドリブンのスタイル設定と同様に、Maps JavaScript API 用 Dynamic Maps に組み込まれており、クラウドベースのマップのスタイル設定に最新の機能として追加されています。JavaScript 用の高度なマーカーは、数週間後にプレビュー版の提供が開始される予定です。登録すると最新情報を受け取ることができます。

Google は、デベロッパーの皆様が Google Maps Platform を使用して構築する、現実世界を体現したクリエイティブで革新的な地理空間サービスから、絶えず新しい着想をいただいています。今後も皆様からのフィードバックに耳を傾け、優れた体験を実現するために必要な機能を提供できるよう、尽力してまいります。新しい機能の提供開始に関する最新情報を受け取るには、こちらからご登録ください。皆様が構築されるサービスを楽しみにしております。

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

Posted by 丸山 智康 (Tomoyasu Maruyama) - Developer Relations Engineer 

ユーザーは信頼性と予測可能性を期待しています。そこで Google は、お客様のアプリケーションを支える Google Maps Platform サービスの背景にある信頼度に関するコミットメント情報をみなさんが簡単に特定できるようにしたいと思っています。一貫したリリース ステージは、お客様が使用しているプロダクトや機能の能力、サポート、運用準備状況をお知らせします。このたび、リリースステージを、「試験運用版」、「プレビュー」、「一般提供」に更新しました。これらのリリース ステージの名称は、お客様のニーズに応じていつ新しいプロダクトや機能を試すかを決定する際に役立ちます。

米国時間 9 月 24 日より、Google Maps Platform のすべての新機能は「試験運用版」、「プレビュー」、「一般提供」のそれぞれのステージでリリースされます。詳細は、リリース ステージのドキュメントをご覧ください。まず、試験運用版のプロダクトは、プロトタイプに対するお客様からのフィードバックを得ることに重点を置いています。プレビューでは、プロダクトまたは機能のテストと評価ができます。プレビュー リリースでは、本番環境に適用する前にコードの更新や統合テストを行う目的で設定されています。一般提供の状態では、安定したサービスとなっており、本番環境で使用する準備ができた状態で、サービスレベル目標やサービスレベル契約に基づいたサポートを提供します。なお、それぞれのステージで、同様のプロダクトや機能が利用できるとは限りません。国、業種、その他の要因で、制限されたカスタマー グループでのみ利用可能な場合がありますので、あらかじめご確認の上ご利用ください。

この更新が、Google Maps Platform での構築のお役に立てれば幸いです。

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

Chrome のパフォーマンスを向上するという点では、「これで十分」ということは決してありません。今回の速さと好奇心の投稿では、Android 版 Chrome の起動時間を 20% 以上高速化した方法に迫ります。これは、起動時にタブのインタラクティブなフリーズドライ プレビューを表示することで実現しました。以降では、スクリーンショットでは何が不十分なのか、なぜタブをフリーズドライすることが優れたブラウザにつながるのかについて説明します。

背景と目的

ウェブ コンテンツのレンダリングにはときに重い計算処理が必要で、ネイティブ アプリケーションよりも遅く感じられることがあります。ネットワークから動的にリソースを読み込んだり、JavaScript を実行したり、CSS やフォントなどをレンダリングしたりするには、たくさんの作業が必要です。この問題はモバイル デバイスで特に顕著で、デバイスのメモリが制約となり、Chrome が一度に少数のウェブページしか読み込めないこともよくあります。

ここから生じるのが、必要に迫られた場合（タブ スイッチャーのような一時的な UI や、たくさんのウォームアップ作業が行われる起動時など）に、ウェブ コンテンツを軽量に表現する方法はないかという疑問です。これを行う標準的な手法はスクリーンショットです。スクリーンショットは見た目を正確に表現できるので、ユーザーは何が開いているかを一目で理解できます。しかし、スクリーンショットは最後に表示したものしか表現できず、完全に静的なので、ウェブページよりも制限が強くなります。

この一時的なウェブ コンテンツのイメージがより便利でインタラクティブになり、本物のページが準備できるまで待つ間に利用できるならどうでしょうか。

ケーススタディ : コールド スタート時に高速にウェブ コンテンツを表示する

Android 版 Chrome アプリのコールド スタートは高価で、起動してからウェブページの描画を始めるまでの時間（First Contentful Paint / FCP）の中央値は 3.4 秒です。ページの HTML、CSS、JS、フォントを処理するにはたくさんの作業が必要なので、他のアプリと比べると遅く感じられるかもしれません。

しかし、起動時にインタラクティブなページのスナップショットを表示できたとしたらどうでしょうか。

このスナップショットを、フリーズドライ タブと呼びます。これは実際のウェブページからさまざまな機能を取り除いたものですが、十分な内容とインタラクティブ性を持ち合わせているため、静的なスクリーンショットよりも有用です。スクリーンショットに欠けていた重要な要素は、リンクを開いたり、ページのコンテンツをスクロールしてビューポート外の内容（iframe も含む）を見たりする機能です。

フリーズドライ タブは、このすべての機能に加えて、ほかの機能も実現できます。実際のウェブページよりも速く起動し、完全なページが準備できるまでの間にもコンテンツを利用できるように、十分な機能を提供します。ページが読み込まれると、自動的かつシームレスにそのページに切り替わります。

テストの結果、フリーズドライ タブを使うことで、起動してからページのすべてのコンテンツを描画するまでの時間の中央値が 2.8 秒まで短縮できました（通常の描画を始める場合に比べて最大 20% 高速）。すべてのコンテンツが表示され、ほとんどの場合、レイアウトのずれも起こらないので、一層速く感じられます。

フリーズドライ タブの詳細

ウェブページをフリーズドライするため、ページの視覚的な状態を一連のベクター グラフィックとしてキャプチャします。その際に、すべてのハイパーリンクも取得します。後に、そのベクター グラフィックを単純にラスタライズし、軽量な形で「再構築」（再生）します。これにより、完全なウェブページ（ビューポートの外側のコンテンツも含む）を表示するレンダリング コストを省きつつ、ハイパーリンクをサポートできます。

この形式には、スクリーンショットよりも多くのメリットがありますが、ウェブページのすべての機能が利用できるわけではありません。そのため、私たちは、実際のページを読み込むには少し時間がかかるときに、スクリーンショットよりもインタラクティブな表示をしたい場合は、この形式で一時的な表示をするのが最適な方法であると考えています。

技術開発における主な課題

この技術を構築できたことは、興味深くやりがいのある経験でした。特に難しいのは、iframe のコンテンツを集約すること、サブフレームのスクロールをサポートすること、すべてのジオメトリを扱うことです。

しかし、最も興味深い挑戦はパフォーマンスでした。

キャプチャ

ページをキャプチャするときにコンテンツを保存するのは単純な作業です。CSS でスタイル設定した DOM のジオメトリは簡単にベクター グラフィックに変換でき、ベクター グラフィックは小さくて、保存が簡単です。

ページのイメージをこの形式で保存するのも単純ですが、高解像度のイメージはサイズが大きくて（0.1～10 MB）圧縮も O(100 ms) と遅く、MB 単位のメモリのオーバーヘッドもかかります。そのため、イメージをそのままデフォルトのエンコードで保存するのが通例ですが、イメージが大きくなると対応できない場合があります。

フォントは、内包する各グリフの描画方法を記述したファイルです。中国語のように文字の種類が多い言語や、絵文字のようにイメージで構成されている場合、フォント ファイルのサイズは特に大きくなります。英語フォントは 1 つあたり 100 kB 程度のものが多いですが、絵文字のフォントは簡単に数 MB に達します。ページには複数のフォントが埋め込まれていることが多く、そういったフォントはローカル システムに保存されないため、キャプチャするデータの一部として保存しなければなりません。初期テストでは、見た目を完全に再現できるように、ページで使われているすべてのフォントを保存しようとしました。しかし、この方法で保存すると、ページによっては 100 MB ほどのサイズになることがありました。パフォーマンスとストレージの観点から考えて、これは受け入れられません。

この難題を克服するため、フォントのサブセット化に注目しました。サブセット化とは、フォント ファイルからすべての未使用グリフを取り除くことです。これにより、ページに必要なフォントのみがデータに残ります。すると、100 MB だったページはわずか 400 kB（元のサイズの 1% 未満）になりました。

再生

もう 1 つの難題は、再生のパフォーマンスを妥当な範囲に保つことでした。ベクター グラフィックを表示するには、ラスタライズしてビットマップにしなければなりません。しかし、現在のスマートフォンの画面は 1 ピクセルあたり 32 ビットなので、コンテンツのビューポート 1 つでも容易に 10 MB を超えてしまいます。このビットマップのメモリ オーバーヘッドを減らすため、ユーザーがスクロールする際に動的にビットマップを生成するようにしました。

もう少し詳しく説明しましょう。ページのコンテンツは、ビューポートよりも小さなタイルに分割します。そして、ビューポートに現在含まれるすべてのタイルのビットマップを生成するとともに、スムーズなスクロールを実現するため、ビューポートの周囲にあるタイルをプリフェッチします。ビューポート外のビットマップを実際に表示するまで圧縮する実験をしたところ、10 MB からわずか 100 kB ほどまでメモリを節約できる可能性があることがわかりました。しかし、さらにパフォーマンス データを収集したところ、圧縮によって CPU に追加のオーバーヘッドがかかるため、ブラウザのジャンクや [FID] などが大幅に増加することがわかりました。そこで、この動作は削除し、タイルを小さくしてビューポート外のビットマップを積極的に破棄できるようにしました。

まとめ

フリーズドライ タブは、スクリーンショットに替わるものとして魅力的な選択肢です。一時的な表示や、すぐにウェブ コンテンツを準備できず、それが利用できるようになるまで待つ時間が長い場合には特に有効です。また、スクリーンショットよりも再現性に優れているほか、リンクやスクロールなど、ウェブページと同じように動作する便利なユーザー操作も可能です。

現在、Android 版の Chrome で使われているフリーズドライ タブによって、コールド スタートで 20% という体感可能な高速化が実現されています。この技術を他の場所で使うことも検討しています。

今回、コミュニティ主催のイベントでは、 サーバーレス、コンテナ を中心としたラボを扱います。本プログラム参加者は、Google Cloud Skills Boost （以下、Skills Boost ）を 30 日間無料で利用できます。

プログラム 概要

• プログラム期間 : 2022 年 10 月 12 日 ~ 11 月 9 日

• オンボーディング セッション : 2022 年 10 月 26 日（水）15:00 - 16:00
  （アーカイブでも視聴可能）※
  
  
• お申し込み : https://cloudonair.withgoogle.com/events/try-together-1012
  
  
• 対象 : Google Cloud を学びたい大学生以上の方
  
  
• 費用 : 無料
  
  
• 実施方法 : オンライン

※ Skills Boost を初めてご利用いただく方にもご安心いただけるように、オンボーディング セッションとして Skills Boost 使い方説明 をオンラインで実施します。（本セッションは、アーカイブでもご覧いただけます。セッションに参加できなくても、プログラムに参加して学習することは可能です）

Skills Boost スキルバッジ獲得者特典

1. スキルバッジを獲得した先着 1000 名様に、Google Cloud 特製トートバックをプレゼント
2. スキルバッジを獲得した先着 200 名様に、Google Cloud 特製トートバックと PC 保護ケースをプレゼント

Google Cloud Innovators メンバー向け追加オファー

Innovators メンバーの方、もしくは期間中に Innovators メンバーにご登録いただき、本プログラムでスキルバッジを 1 つ以上獲得された方には、上記プレゼントに加え、認定資格バウチャー 1 回分（日本語試験のみ）をプレゼントいたします！

コミュニティやグループを主催する方、チューターとして参加を希望する方

こちらからご登録ください。また、本プログラムにも必ずご登録ください。

コミュニティ主催の勉強会は随時情報を更新していきます。

これから Google Cloud を学びたい方は、ぜひご参加ください。

お申し込みはこちらからお願いします。