お久しぶりです！いやー、ブログの更新も久しぶりになってしまいました。
さて、タイトルにもある通り、ついに動画制作の強い味方になるWebアプリをリリースしました！
今日は、このアプリの紹介と、開発中に「うわー、これハマった！」ってなったポイントを、赤裸々に語っていこうと思います。
ぶっちゃけ、何作ったの？
皆さんは、動画やチラシなんかに地図を載せたい時、どうやって作ってますか？
Google Mapをスクリーンショットする人、よく見かけますよね。あとは、Google Mapをなぞってオリジナルの地図を作る、なんていう猛者もいるかもしれません。
もちろん、これらの方法も素晴らしいんです。でも、ちょっと「うーん…」って思う部分、ありませんか？
- Google Mapのスクリーンショット: どうしても余計な情報まで写っちゃう。「この辺だけ見せたいのに、周りの情報も一緒に入ってきちゃう…」みたいな。拡大しても、限界がありますよね。
- なぞって作る: これは…地道な作業ですよね。色を塗ったり、デザインを考えたり。正直、時間も労力もかかります。
そこで、「もっと手軽に、自分好みの地図を作りたい！」という思いから、このWebアプリが誕生しました。OpenStreetMapのデータを活用しつつ、面倒な作業を省いて、サクッと地図が作れるように工夫したんです。
https://street-map-studio-jp.vercel.app/
使うのは超カンタン！
1. まずは「どこ」の地図か決めちゃおう
「都道府県」と「市区町村」をテキストボックスに入力してください。すると、候補が出てくるので、表示したい地域を選びます。日本全国、どこでもOK！
2. 地図を自分好みにカスタマイズ！
地域を選ぶと、地図が表示されます。
左側のメニューで、道路や線路の表示・非表示を切り替えたり、線の太さや色を自由に変えたりできちゃいます。まるで、デジタルな地図のパレットですね！
さらに、ちょっとした編集も可能なんです。例えば、「この道を通ったんだよね！」という場合、実際に移動したルートを線でなぞることもできます。
※ ただ、ちょっぴり注意点があって、線が引けるのは、取得した道路や線路の上だけなんです。そこだけは、ご容赦ください！
3. 完成！あとはダウンロードするだけ
「出力」ボタンを押せば、地図を画像としてダウンロードできます。PNG、JPEG、BMP、お好きな形式でどうぞ！
こんな感じで、国土地理院の情報を追加するかしないかで、ちょっと雰囲気が変わるんです。動画の用途に合わせて選んでみてくださいね。
| 国土地理院なし | 国土地理院あり |
|---|---|
| 出力時に国土地理院のライセンスも追加 | |
 |  |
開発中に「うわー！」ってなったこと
道路・線路データの取得でタイムアウト連発…（泣）
地図の肝となる道路や線路のデータは、OpenStreetMapの「Overpass API」というものから取得しています。これは、建物データなんかも取れる、とっても便利なAPIなんです。
[Overpass APIのリンク]
ただ、これがですね…取得するデータ量が膨大になると、頻繁にタイムアウトしてしまうんです。特に、大都市のデータなんて、まさに「デカ盛り」状態。タイムアウトの嵐に、何度心が折れそうになったことか…。
最初は、APIを「セルフホスト」してみようかと考えました。Dockerイメージも提供されているので、いけるかな？と。
https://github.com/wiktorn/Overpass-API
ところが、セットアップが全然終わらない！ログを見ると、データのダウンロードは終わってるのに、インポートに半日以上かかっても終わらない…。これは、ちょっと現実的じゃないと、セルフホストは断念しました。
「他に何か手はないのか…」と、ネットの海をさまよっていたら、運命の記事に出会ったんです。
https://note.com/barsaka/n/n25874d08420d
内容は、Overpass APIの「手前」にキャッシュサーバーを立てて、リクエストを一旦そこで受ける、というもの。キャッシュにあればそのまま返し、なければOverpass APIに投げる、という賢い方法です。
「これだ！」と思い、早速試してみたところ、なんとタイムアウトが劇的に減ったんです！まるで、魔法のようでした。
私は、このキャッシュサーバーを「Cloudflare Workers」を使って構築しました。エッジでキャッシュが効くので、レスポンスも速いし、タイムアウト問題もかなり解消されました。この記事には、本当に感謝しかありません。
まとめ
ということで、今回は「動画用に差し込む地図を作るためのWebアプリ」についてご紹介しました。
地図の編集機能も充実しているので、あなたの動画制作が、もっともっと楽しく、もっともっと楽になるはずです。
もし「こんな機能が欲しい！」とか、「ここ、ちょっとバグってるよ！」なんてことがあれば、お気軽にX（旧Twitter）でご連絡くださいね！お待ちしています。
