2024年に MapNJ というSVGベースの地図イラスト操作のためのnpmモジュールを作った。（JavaScriptプラグインのようなもの）
当時、観光系のWEBサイトを仕事でよく実装することがあったのだが、 決まって観光エリアを分割表示したような地図UIのをクライアント側から要望された。
これはエリア毎にマウスホバーにより色が更新されたり、クリックでページ遷移したり、また何かポップアップを出したりなど、インタラクション要素も必要となるのだが、基本的な要望を盛り込み汎用スクリプトとして公開したのがこれだ。
以下のような最もシンプルな定義で、とりあえずエリア毎に、アクティブと非アクティブの状態を色分け表現できる（任意のエリアをマウスホバーすることによりそのエリアがアクティブカラーになる）
import MapNJ from 'mapnj';
const mapnj = new MapNJ('#your-mapnj');また、特徴としてSVGを操作対象としており、レスポンシブによる最適化がすでにベースにある。 png画像群とスライスのようなレガシー技術を組み合わせ、デバイス幅毎に、クリック要素の位置を調整する、といった煩雑な実装は必要ない。
また、このスクリプトの特徴として、デザイナー側にもコード定義の責任の一端を担ってもらうという点がある。 これはFigmaやIllustrator上のレイヤー名が、コード側の重要な判別キーになることを意味している。
デザイナーとエンジニアの役割分担を明確に、また互いに情報を明示的に共有したかった。
当時、気合を入れてNuxtで 利用方法解説サイト を作ったのだが長らく更新できていない。ただ必要に応じてオプションをちょくちょく増やしたりしている。🦮
なんとなく汎用性の幅を再定義したく近々、破壊的な抜本的改良をしたいなと思っている。
ちなみに当時NewJeansがめちゃくちゃ流行ってて好きだったのでモジュールに「NJ」の文字を加えた。