ふと、今回の旅行何か国目だったんだろう、と思った時に手軽に使える地図塗りつぶしサービスを探してみたのですが、アプリをダウンロードしないと行けなかったり、ユーザー登録が必須だったり、色合いが好みじゃなかったりしたので、自分で開発してみました。
最近は開発といってもほとんどchatGPTに書いてもらえるので、こだわらなければ数時間で終わってしまいました。
chatGPTへの依頼の流れ
最初はsvgというものを知らず、白地図のpng画像でも用意すれば良いのかと思ったのですが、この指示ではchatGPTが画像上の座標を指定して色を付ける方法を提案してきました。
それはとてもやっていられないので、どうすればよいのか聞いてみたところ、svgベースの地図を使えと。
参考リンクは有料だったり、地図のsvgはなかったりしたのですが、無事無料のsvg画像をダウンロードすることができました。
svg画像をテキストで開くと各国の位置が title="United Arab Emirates" id="AE"のような形で記載されているんですね。すごい。
どのサイトの画像を使うことにしたのか教えたら、コードを直してくれました
流石に全ての国のコードを書いてはくれないので、参考文献の地域分類を使いながら、svgのタグになっているほぼすべての国をExcelでHTMLコードに書き起こしました。
全部選択すれば地図の色が全て変わっているように見えるというのを基準にしたので、204か国あります。（日本の外務省の認識だと196か国）
- https://help.adjust.com/ja/article/countries-by-region
- https://www.mext.go.jp/content/1422972_04.pdf
細かい指示は、後から追加すればコードを書き直してくれます。
例えば、最初の依頼では国コードを入力して塗りつぶすボタンを押すと地図に色がつくコードが来たのですが、チェックボックスで複数選ばせたかったので後から依頼しました。
指示の出し方はそんなに工夫しなくても、chatGPTがどう解釈したかをちゃんと説明してくれます。
chatGPTがくれたコードがうまく動かなかったら、エラーの内容や問題点を指摘すれば修正してくれます。
自分が手元で修正したコードは、定期的にchatGPTに「こう直したよ」と教えておくことで、次回コードを作るときに手元の修正も含めたコードを送ってくれます。
ここまで簡単だと開発しても何の勉強にもなってない感があるのですが、svg画像ってこれだったんだというのが分かっただけでも今回は収穫かな。
Canvasの操作は以前自力で作った誰でも表彰WEBサービスで一応触ったことがあったし、良しとしましょう。