JavaScript / Node Module for Design
MapNJはSVGで作成されたイラストに小さなインタラクションを加えるスクリプトです。
SVGイラストをパーツ（エリアと呼びます。）に分割し、状態・配色・イベントなどを管理します。操作対象にはこのような地図イラストのようなものを想定しています。また周辺パーツの表示ルールも管理します。
エリアをクリックしてみてください 👉👇
🧌🦸♂️🧝♀️🤖
Welcome to techsyn!!
MapNJの特徴・作成経緯
MapNJはデザイナーとエンジニアの作業領域を分け、共にUIを管理できるよう考えて作りました。 そのため、デザインソフト側でスクリプトの動きを決定付ける重要な作業があります。 このルールは一見疎ましく見えます。一方で、ルールが存在しない複数回に渡る両者間で起こるソースの往来を想像してください。この場合、MapNJのルールに好感が持てる場合があります。
私は今までに観光地を題材にしたWebサイトを多く作りました。その際に頻繁に登場したUIにはMapNJのようなスクリプトが必要であり、ある種、私自身の作業効率のために作りました。非常にニッチなものであることを前提に、一方で、スクリプトの役割は、そのシンプル故に、全く異なるアイデアでも活用することが可能です。