2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

PR: MIERUNE
MIERUNEとカジュアルにお話ししませんか？ MIERUNE CHAT受付中！
About Promotions
@nkmr_RL
in

イベントで地図を使ったアプリケーションを作る時に知っておきたいこと

2
Last updated at Posted at 2026-09-20

はじめに

2026年9月に、JAWS SONICというイベントが開催されたのですが、縁あってイベントで使う地図アプリの開発に関わらせて頂きました。

運営メンバーや開発メンバーの方々のおかげで、イベントは無事に成功したのですが、いつか誰かが同じようにイベントで使用する地図アプリを作ることになるかもしれないので、「イベントで地図を使ったアプリケーションを作る時に知っておきたいこと」として、地図に関するアレコレをまとめておこうと思います。誰かの参考になれば、嬉しいです。

なお、想定している読者

  • JAWS-UG等のイベントで、地図ページを作ることになった人
  • 地図アプリ、興味あるけどよく分からんという人

想定していない読者

  • 普段からGISだのMapLibreだのを触っている人

JAWS SONICとは

日本のAWS User Group「JAWS-UG」による24時間ぶっ通しのOnline Festival
JAWS SONIC & MIDNIGHT JAWS が2026年、約6年ぶりに開催されます！

本イベントでは、日本全国に散らばる68のJAWS-UG支部のうち約8割の協力のもと、24時間リレー形式で最新技術からコミュニティの知見までを網羅します。

クラウド技術に触れ始めた初心者からベテランまで、24時間どこで参加していただいてもOK！みんなで盛り上がりましょう！！

というわけで、色々なセッションや企画が24時間ぶっ通しで行われる、なかなかロックなイベントが開催されました！

今年のテーマは「THE MARATHON」といういうことで、SORACOMデバイスを使った（ガチ）マラソン企画もありました！！マラソンイベントのルール等は以下のとおりです。

要するにポイント予想ゲームではあるのですが、せっかくならランナーの位置情報やチェックポイントの位置を地図上で見たいですよね！

なので、それらを「地図上で可視化する」部分をお手伝いしました！

地図に求められた要件

今回のイベントで地図に求められた要件は以下のとおりです。

  • ランナーの位置情報を表示したい
  • チェックポイントを中心とした半径200mの円を表示したい
  • 地図の見た目をイベントのイメージカラーに合わせたい
  • ポイント獲得時に、派手なエフェクトを入れたい

イベントで利用する地図なだけあって、やっぱり「見た目」に関する要件が多いですね。

この記事では、このうち 「地図の見た目をイベントのイメージカラーに合わせたい」 に焦点を当てて、解説していきます。
（他の要件は今回のマラソン企画固有の実装感が強く、「今後の参考に」という主旨がブレるので割愛します）

地図アプリを作る時に知っておきたいこと

背景地図

地図アプリを作る上で外せないのが背景地図です。ベースマップとも呼ばれます。
皆さんが地図を使ったアプリケーションを見た時に、海とか山とか建物とか道路とかが表示されると思いますが、それです。

要するに地図そのものなので、地図アプリの見た目はこの背景地図が支配していると言っても過言ではありません。

国土地理院がいくつか背景地図を公開しているので、見てみましょう。

標準地図と淡色地図を見比べた画像がこちらです。見た目の印象が違いますね。
gsi-basemap-comparison.png

見た目をカスタムできる背景地図

世の中には複数の背景地図が存在するため、イベントのイメージに近いものはあるかもしれません。でも、イベント向けに見た目を拘ると、「テーマカラーを使いたい」「このカラーコードにしたい」といった要望が出てきます。

そんなワガママを叶えてくれるのがベクトルタイルです。
これについて深掘りすると、記事が書き終わらなくなるので、ここでは「見た目をカスタムしたいなら背景地図はベクトルタイル形式のものを使う！」という雑い理解をして頂ければ十分です。

地図ライブラリ

地図を使ったWebアプリケーションを作る場合、地図ライブラリを使うことが一般的です。世の中には色々な地図ライブラリが存在していて、背景地図の見た目をカスタマイズしやすいものや3D可視化に強いものなど、ライブラリによって得意とする領域が異なります。

今回は「背景地図の見た目をカスタムしたい」という要件があるので、ベクトルタイルを表示できるライブラリを選ぶ必要があります。ベクトルタイルを表示する地図ライブラリとして、ここではMapLibre GL JS を紹介しておきます。

MapLibre GL JSでは、地図の見た目を style.json というJSONファイルで定義します。「水域は何色」「道路は何色で何px」「ズーム14以上になったら建物を表示」といったルールは全てこのファイルに書きます。

style.json
{
  "version": 8,
  "sources": { ... },
  "layers": [
    {
      "id": "water",
      "type": "fill",
      "source": "protomaps",
      "source-layer": "water",
      "paint": { "fill-color": "#0B0B18" }
    }
  ]
}

つまり、style.jsonを書き換えれば地図の色は自由に変えることができます。イベントのテーマカラーに合わせたいなら、このファイルで指定すればOKです！

ラスタータイル（画像として配信される背景地図）だと、色を変えたければ画像そのものを作り直すしかありませんが、ベクトルタイルの場合、データ（ベクトルタイル）と見た目（style.json）が分離しているので、見た目のみを変更することが比較的容易です。

背景地図の権利の話

上述した地図ライブラリはあくまで「仕組み」なので、背景地図という「データ」の話をしておきましょう。

世の中には、公開されているベクトルタイルがいくつかあります。比較的有名なものとしてCARTOの背景地図が挙げられます。

アプリケーション構築時点では、APIキー等も必要なく無償で利用することができました。ただし、CARTOのページには以下のような記載がありました。

For commercial purposes, you will need an Enterprise license in order to use the CARTO Basemaps. To find out more about pricing, request a demo & we’ll be able to discuss your use case with you.

まず大前提として、地図データは基本的に著作物です。そのため、利用にあたっては作成者や配信元が定める利用規約を遵守する必要があります。

今回のイベントは無償のコミュニティイベントですが、特定企業（AWS）に関わる活動であり、Webサイト上にサポーター企業も明記されているため、「商用利用」とみなされる懸念が十分にあります。発生頻度は低いとしても、万が一規約違反となった場合、法的なトラブルへ発展するリスクも否定できません。

また、無償提供されている背景地図サービスは、配信側の都合による急な仕様変更や配信停止のリスクも存在します。

イベント運営において、以下のリスクを冒すことは避けるべきですよね。

  • 商用利用とみなされ、法的なトラブルに発展するリスク
  • イベント当日に地図が表示されなくなるリスク

というわけで、無償で配信されている背景地図をイベントページで利用することは基本的に避けた方が良いです。

背景地図の選択肢

では何を使えば良いのでしょうか。思いつく選択肢を整理してみます。

Amazon Location Service を使う

Amazon Location Serviceはベースマップも提供しています。JAWS-UGのイベントですし、候補として挙げるべきでしょう。実際、私も本イベントで利用することを検討しました。

ただ、懸念項目としてALSのベースマップはリクエスト数による従量課金になっていることが挙げられます。

イベント用の地図は、視聴者が何人来て、どれくらい地図を触るのかが事前に読めません。また背景地図におけるリクエスト数は、地図ページへの単純なアクセス数ではなく、ユーザーがどれだけ地図をグリグリ動かすのか、に強い影響を受けるので、なおのこと予測が難しいです。

盛り上がって、たくさんの方が地図を見てくれるのは嬉しい一方、その分費用が膨らんでしまうことを考えると当日の心労が一つ増えることになります。

そのため、本イベントでの使用は見送ることにしました。

OSM由来のタイルを自分で用意する

OpenStreetMap（以下、OSM）は「地図のWikipedia」と例えられるように、有志のボランティアによって整備されている地図です。利用する際にクレジット表記は必要となりますが、商用利用することも可能です。

有志のボランティアが整備している、とは言っても一般利用する分には十分な品質になっていますし、実際上述したCARTOの地図も、このOSMをベースに作られています。

要するにOSMベースの地図は一般利用するには十分使えるものなので、他人が配信しているものではなく、自分で配信しちゃおうぜ、ということです。

当然、タイルを用意して置く手間はかかるので、ちゃんと説明します。

Protomapsのビルドから必要な範囲を切り出す

OSM由来のベクトルタイルを手に入れる方法はいくつかありますが、一番手軽なのが Protomaps が公開しているビルド済みのPMTilesを使うことです。

PMTilesは、大量のタイルを1つのファイルにまとめた形式です。普通のタイル配信だと数百万個の小さなファイルをサーバーに置くことになりますが、PMTilesなら1ファイルで済みます。管理がとにかくラクです。

とはいえ、全球のPMTilesは巨大です。マラソンイベントで使うのは関東の一部だけなので、必要な範囲だけ切り出します。ここで使うのが go-pmtiles です。

GitHubのReleasesからバイナリをダウンロードして、パスの通ったところに置けば準備完了です。

./pmtiles extract https://build.protomaps.com/20260612.pmtiles kanto.pmtiles \
  --bbox=138.4,34.8,141.0,36.0 \
  --maxzoom=15

PMTilesはHTTP Range Requestに対応しているため、必要部分を切り出すために全球のデータを取得する必要はありません。上記のコマンドも、指定した範囲に該当する部分だけをサーバーから取得しています。

ちなみに、指定しているパラメータは以下のとおりです。

  • bbox（範囲） ：イベントで使う範囲より少し広めに取っておくのが安全です。地図は端まで表示すると外側が真っ白になるので、ぎりぎりで切ると見栄えが悪くなる懸念があります。
  • maxzoom（最大ズームレベル） ：この数字が大きくなるほど、詳細な地図データを表示できますが、当然ファイルサイズは跳ね上がります。ズームが1つ上がるとタイル数は4倍になるので、「どこまで拡大できる必要があるか」を要件から逆算して決めてください。建物の形が分かるところまで寄りたいなら15前後、街区が分かれば十分なら14でも足ります。

attributionの設定

OSMのデータを使う以上、クレジット表記は必須です。MapLibre GL JSなら、ソースの定義に attribution を書けば地図の右下に出ます。

map.addSource("protomaps", {
  type: "vector",
  url: "pmtiles://https://example.com/kanto.pmtiles",
  attribution: '<a href="https://www.openstreetmap.org/copyright">© OpenStreetMap contributors</a>'
});

ライセンスのリスクを避けるためにOSMを選んだのに、表記を忘れてしまっては本末転倒なので、ここは忘れずに入れてください。

スタイルをカスタムする

タイルが用意できたら、いよいよ見た目です。

style.jsonをゼロから書くのは、正直しんどいです。道路の種類だけでも高速道路・国道・生活道路……と分かれていて、レイヤー定義は数百行になります。

なので、既に用意されているテーマをベースにするのが現実的です。Protomapsのタイルを使うなら、公式のスタイル定義が用意されています。

light / dark / white / black / grayscale といったテーマが用意されているので、イベントのイメージに近いものを選んで、そこから必要に応じて色を差し替えていくことをお勧めします。

import { layers, namedFlavor } from "@protomaps/basemaps";

const style = {
  version: 8,
  glyphs: "https://protomaps.github.io/basemaps-assets/fonts/{fontstack}/{range}.pbf",
  sources: { ... },
  layers: layers("protomaps", namedFlavor("dark"), { lang: "ja" })
};

生成されたレイヤー定義に対して、イベントのテーマカラーに合わせたいレイヤー（水域、背景、道路など）の paint を上書きしていけば、イベント専用の見た目になっていきます。

タイルの配信

ここまで準備できたら、あとは PMTiles を配信するだけです。

前述の通り、PMTiles は HTTP Range Request（範囲指定取得）に対応した単一ファイル形式です。そのため、基本的には S3 などのオブジェクトストレージに配置するだけで、ベースマップとしてそのまま読み込むことができます。
（※フロントエンドの MapLibre GL JS 側で addProtocol を使って PMTiles プロトコルを登録する実装は必要です）

なお、実際に配信する際は以下の3点にご注意ください。

  1. CORS の設定
    地図を表示するページとタイルの配信元が別ドメインになるケースが多いため、S3 や CloudFront 側で適切な CORS 設定（Access-Control-Allow-Origin など）が必要です。

  2. CloudFront によるキャッシュ
    ユーザーが地図を操作するたびに細かなリクエストが大量に飛ぶため、S3 の前段に CloudFront を挟んでキャッシュを効かせる構成にしましょう。

  3. Range リクエストの疎通確認
    PMTiles は「1つの巨大なファイルの一部だけを切り出して読み込む」形式なので、Range リクエストが通らないと地図が表示されません。CloudFront 経由でも Range リクエスト（206 Partial Content）が正しく転送・処理されるか、設定を確認しておきましょう。

今回使用した背景地図

（本節は、会社に媚びを売るために、宣伝を仕込んでいるだけなのでスルーして良いです）

ちなみに今回のイベントでは、OpenStreetMapではなくMIERUNE地図タイルを使っています。（会社が使っていいよ、って言ったから）

MIERUNE地図タイルは基本的にOSMベースの地図なのですが、以下のような違いがあります。

  • ズームしてみると建物が3Dで立体表示される
  • 電車の路線名も表示される（実はOSMは路線名表示されていない）
  • 日本政府の見解に基づく国境表記になっている

まあ、あんまり宣伝感出るのもアレだし、正直スクショ準備するのも面倒なので、興味がある方はデモページでもご覧くだされ。

が、技術イベントで使うような値段じゃないので、忘れてもらってオッケーです！！

おわりに

というわけで、イベントで使う地図アプリを作るときに気を付けたいことについて、まとめてみました。（具体的な記述方法とかは書かなかったんですが、本記事の内容が頭に入っていれば、あとはAI様と一緒に開発するスタンスで大丈夫だと思います）

なお、実際のイベントではPMTilesを丸ごとダウンロードするのを防ぐために、本記事で話した構成とはちょっと違ったりするのですが、OpenStreetMapを使う限りは、タイルデータの保護は気にしなくて良いかなと思います。

また、感想的なことを書いておくと、こういったイベントのお手伝いは初めてだったのですが、普段関わらないような社外のエンジニアの方々と協力して、アプリケーションを作るというのは、とても貴重な経験をさせてもらったなと感じています。運営メンバー、開発メンバーの皆様、本当にありがとうございました！

今回私は、縁あってたまたまお声がけ頂いた形だったのですが、もしイベント用のアプリケーション開発をやってみたい、という方がいたら是非挑戦してみてほしいなと思います。きっと普段の仕事からは得られない何かが待っていますよ！

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?