Next.jsのAPP routerとTailwind CSSのgrid layoutでデフォルメ日本地図
Next.jsのAPP routerを使って、Tailwind CSSのgrid layoutでデフォルメした日本地図を作った。
以下がGithub paegsに上げたサンプルページ。Github paegsはGithub Actionsのnode.jsのバージョンと、next exportの記述でつまづいた。vercelに比べるとめんどくさいね。
以下がGitHubのページ。
Next.jsで作っているのでReactの記述だけど、classNameの記述ほかもろもろをちょっといじれば、いろんなものに流用できる。
需要はあんまりないだろうけど、もしかしたら誰かの役に立つかもしれない。教育用とか。
以下はとりあえずの説明。
事前準備 tailwind.config.ts
tailwind.config.tsにグリッドの設定を追加する。
Taildwind CSSのグリッドは横が12、縦が6がデフォルトのmaxなので、これを拡張する。
詳細は以下の公式ドキュメントで。
Mapコンポーネント
以下のような地図のコンポーネントを読み込んでいるだけ。
grid layoutで縦15×横14を作って、各県を基本1マスとしてなんとなくそれっぽい並びで配置する。
col-start- row-start-で場所を指定して、1×1以外の県は、col-span- row-span-でサイズを指定する。
例えば北海道は、上から1番目、左から13番目のマスからスタートして、横2マス、縦2マスになるようにしている。
今回作った地図は、1マスが正方形になるようにデザインしてある。
横はgridで指定の幅が14分割されるだけ。
ただし、県名を入れる場合、3文字の県がネックになる。今回作ったものでは、神奈川と和歌山が1×1マスになるので、文字サイズのレスポンシブ調整は独自設定になっている。文字サイズは地図をはめ込む横幅が変わるだけで崩れるので、使う時に調整が必要なところ。
縦は、gridの「一番大きいサイズのものに統一される」性質を利用して、「東京」にだけ設定してある。
gridで計算される幅と縦の長さが同じになれば正方形になるので、スクリーンのサイズから不要な要素（例えばpaddingとか）を引いて、それを14で割った数値をmin-hに設定している。
正方形にするために14で割った数字をそのまま使っているが、この数字に対していろいろすることで、自分が思う通りのアスペクト比にしたりできる。
幅が変わるとそのまま縦サイズが変動して正方形が維持される。多分、幅350pxぐらいまでは対応できている。
最大横幅を760pxしているので、md幅以上になるとサイズが固定される。一応横幅固定していないフルサイズ版もサンプルとして作ってある。
バリエーション
マップのバリエーションとして、ボーダーで囲ったものと色付き、ホバー有り無し、県名無し、最大横幅を指定していないフルサイズを作ってある。
何かに流用する場合は、目的に一番近そうなものを再調整して使用する。
ボーダータイプのマップは、3文字県の横幅がきつくなるので調整が少しめんどくさい。
カラーやホバーは県ごとに設定してあるので個別に変えられる。リンクやオーバーレイなどで使うことを想定している。
peerを使って各地方ごとのリンクとかホバーとかも作れる想定。gapを使わずにあれこれやることで、疑似的に地方ごとの区切りとかも作れる。この辺りは今後追加したい。
今後の追加予定
六十六州を作る予定。というか、本当はこれが主目的だったり。
あとは、都道府県のものでも、北海道と沖縄を別枠にして、PCの場合は比率を横長にするみたいなやつとか。
Discussion