Mapbox サンタ追跡：その構築方法

Mapbox全体で、チームは常に私たちのテクノロジーを活用した創造的な方法を模索しています。インスピレーションの源となるのは、ホリデーシーズンであることもあります。

Mapboxの開発者リソースの責任者であるChris Whongは、最近、Mapbox Dev Jamを開催し、楽しくてお祭り気分を盛り上げるプロジェクト「サンタ追跡Webアプリ」をハックするために集まった同僚たちの作品を紹介しました。Dev Jamでは、Mapboxを使用して想像力豊かで洗練されたWebアプリケーションを作成する様子を間近で見ることができます。 

季節のひらめき

最初のサンタトラッカープロジェクトは、2023年後半にSlackでの会話でのカジュアルなアイデアとして始まり、すぐに勢いを増しました。休日を祝い、Mapbox Globe機能を試すための内部のサイドプロジェクトとして始まったものが、Mapbox内のさまざまなチームの人々の創造性と専門知識を反映した、洗練された機能豊富なアプリケーションへと変貌しました。

貢献者には、セキュリティチームのビリー・ブライアント、ラスタチームのビル・モリス、マップレンダリングチームのダニエル・エケ、ビジネスチームのキーラン・マッキャン、そしてマップスタイリングをサポートするトピ・チュカノフ、Mapbox GL JS の雪エフェクトのアレクセイ・ロマノフなどの協力者が含まれています。彼らは協力して、自分たちのコンセプトを現実のものとし、その過程でいくつかの創造的な機能を開発しました。

サンタトラッカーを構築する

サンタトラッカープロジェクトは、Mapboxの地図がデザインからリアルタイムアニメーションまで、卓越したユーザーエクスペリエンスの基盤となることを示すことを目的としていました。アイデアをブレインストーミングした後、チームはプロトタイピングと反復を開始し、ヘルシンキからシアトルまでのタイムゾーンを越えた非同期コラボレーションのおかげで、昼夜を問わず作業しました。

データ

サンタトラッカーのルートは、NORADが提供するサンタの経路のオープンデータに基づいており、Bill MorrisがJSONに適合させました。Billは、現在の年のデータに合わせて時間と場所のパラメータを更新して、現在の年の予測を反映させ、ルートデータが国際日付変更線を越える際の処理方法を修正して、サンタが最も効率的な経路をたどるようにしました。最終的なWebアプリは、実行時にルートJSONデータをライブで解析します。

デザイン

赤と緑の地図テーマを試した後、チームはスノーグローブに触発された地図スタイルを目指すことにしました。地図スタイルはMapbox Studioで作成され、お祝いの冬のテーマが強調されています。スキートレイルと山岳マッピングに触発された最終的な地図スタイルには、雪の多いパレット、微妙なテクスチャ、魔法のような冬の美学が含まれています。思慮深いデザインにより、配達されたプレゼント、配達された石炭の塊、食べられたミルクとクッキーに関する実行統計などの楽しいクリエイティブなタッチで、没入型でリラックスできるホリデー体験が保証されました。

アニメーション

サンタの移動経路をアニメーション化することは、楽しい挑戦でした。当初、サンタは非常にぎくしゃくした動きで飛び回っているように見え、特にズームアウトしてMapbox Globeビュー全体を見ると、見ていられませんでした。Billy Bryantは、Mapbox GL JSのカメラコントロールを使用して、ポイント間のルートアニメーションをスムーズにする方法を見つけ出し、サンタが地球上を穏やかに飛行しているように見えるようにしました。 

チームはまた、雪のアニメーション効果を追加したいと考えており、これは実装方法をハッキングするための特に実り多い分野となりました。Daniel Ekeは、ラスターレイヤーとカスタムレンダリングの型破りな実装を使用して、季節の魅力を高めるきらめく降雪効果を作成するソリューションを構築しました。2024年版では、チームは新しいベータ版Mapbox 3D気象効果を試しています。

スノーグローブ効果

最後のクリエイティブな仕上げとして、チームはChatGPTの助けを借りてBilly Bryantが作成したスノーグローブのグラフィックの中に地図を配置したビューを追加しました。透明なレイヤーと要素の正確な配置のトラブルシューティングを行った後、チームはインタラクティブな地球地図の魅力的で珍しいプレゼンテーションに満足しました。誰かがスノーグローブを「振る」と、「イースターエッグ」さえあります。

Dash away, dash away, dash away, all!

チームは、2023年のクリスマス前に、サンタ追跡の最初のバージョンを同僚や世界と共有するために、ぎりぎりのタイミングで完成させました。Mapboxのデモドメインで静的なサイトとしてデプロイしたことで、サイトのオーバーヘッドが簡素化され、共有しやすくなりました。アプリケーションのコードはすべてブラウザの開発者コンソールで確認でき、その仕組みに関心のある方は参考にできます。

チームは、昨年サンタ追跡に対して社内外から寄せられた熱意に感激しており、今年のホリデーシーズンに向けて、更新されたバージョンを再び共有できることを楽しみにしています。Mapboxのサンタ追跡は、https://labs.mapbox.com/santa-tracker/で体験できます。

Mapboxで構築し、共有する

Mapbox Youtubeチャンネルで、サンタトラッカーの作成者とのDev Jamの全編をご覧ください。また、2025年にはさらに多くのDev Jamにご期待ください。

サンタトラッカーは、Mapboxツールが開発者が創造的に問題を解決し、効果的に共同作業を行い、アイデアを実現する方法を例示しています。これは、何が可能かを示す楽しくてお祝いの例です。ホリデイトラッカー、カスタム視覚化、またはまったく新しいものであっても、Mapboxはアイデアをコンセプトから現実にするためのツールを提供します。あなたが構築したものをぜひ見てみたいです。#BuiltWithMapboxを使用してソーシャルメディアで共有してください。