ウェブ地図サービスの構築
石油精製会社が顧客に全国のガソリンスタンドの位置と周辺施設を案内するWeb地図サービスの開発に参加しました。当時のWeb地図は画像をずらして動かす方式がほとんどで、このサービスはブラウザの中で地図をドラッグし拡大する方を選びました。インターネットが遅かった時期なので、地図が開くのに時間がかかったり地図画像がずれて見えたりすると、位置案内そのものが成り立ちませんでした。地図画像と元の地図データを画面座標に合わせる作業、データ転送量を減らす作業、移動・拡大の切り替えを担当しました。
画像をずらすWeb地図ではなく、ブラウザの中で動く地図
このWeb地図サービスは、顧客が全国のガソリンスタンドの位置と周辺施設をブラウザで探せるサービスです。当時のWeb地図は画像を横にずらして動かす方式がほとんどでした。このサービスは地図のドラッグや拡大・縮小をブラウザの中でそのまま受け付ける方を選びました。地図ライブラリと元の地図データを組み合わせてこの地図を実装する開発に参加しました。

地図画像と元データがずれない位置合わせ
Web地図は細かく分けた地図画像(タイル)をつなぎ合わせて表示し、その上に元の地図データの位置を載せます。両者の座標が少しでもずれると、ガソリンスタンドの印がとんでもない場所に表示されます。タイルと元の地図データを画面座標に合わせて配置し、サービス画面でずれて見える箇所を探して地図画像を修正する作業を担当しました。

遅い回線でも地図が開くよう減らした転送量
Web地図は画面を埋める地図データを毎回受け取る必要があり、当時のインターネットではその量を受け取るのにも時間がかかりました。地図データの転送量を減らし表示方式を整えて、遅い回線でも地図が開くようにしました。サーバーとやり取りするデータも、タグで囲む重い形式からより短く書ける形式に変え、通信量を減らしました。

ドラッグや拡大のときに位置を見失わない画面の切り替え
地図をドラッグしたり拡大・縮小したりするとき画面がぷつりと切り替わると、利用者はいまどこを見ているのかを見失います。移動と拡大・縮小の間に自然な切り替え効果を入れ、縮尺が変わる間も位置を追えるようにしました。このサービスで作った地図技術は、その後ガソリンスタンド位置案内サービス、新都市のバス情報地図、海外のサービスへと移植されました。

この仕事のポイント
ブラウザの中でドラッグし拡大するWeb地図
地図画像と元の地図データを画面座標に合わせた位置合わせ
遅い回線でも地図が開くよう減らしたデータ転送量
インサイト
GA4 client_storage: 'none'은 정말 쿠키를 막을까?
두 달 전 이 블로그에 「GA4 쿠키 없이 쓰기」라는 글을 썼습니다. clientstorage: 'none' 으로 쿠키 저장을 끄고, 자체 분석이 쓰던 익명 ID 를 clientid 로 넘기면 쿠키 0개로 GA4 를 쓸 수 있다는 내…
GA4 Measurement Protocol: gtag.js 없이 서버에서 이벤트 보내기
랜딩 페이지의 전송량을 파일 단위로 쪼개 보다가, 가장 큰 파일이 우리 코드가 아니라는 것을 알았습니다. Google Analytics 의 gtag.js 였고, 방문 한 번에 176KB 를 받고 있었습니다. 페이지 전체가 1,094K…
중소 제조업 AI 도입 순서: DX를 먼저 끝내야 할까?
공장을 가진 중소·중견 제조기업 16만여 곳 가운데 스마트공장을 도입한 곳은 19.5%입니다. 회사가 작을수록 이 비율은 더 떨어집니다. 중소벤처기업부가 2025년 4월에 낸 제1차 스마트제조혁신 실태조사 결과입니다. 그림: 기업 규…
Next.js loading.tsx와 404: 버튼이 화면보다 먼저 살아나게 하기
관리 화면 왼쪽 위에 사이드바를 접고 펴는 ☰ 버튼이 있습니다. 폭 하나 바꾸는 버튼인데, 대시보드에서 누르면 2초 넘게 아무 반응이 없었습니다. 레이아웃만 바꾸는 일이 왜 이렇게 오래 걸리는지부터 들여다봤습니다. Next.js 16…



