はじめに

こんにちは。デザインとフロントエンドの狭間をずっと漂っていた結果、猛暑の日本に辿り着いたマンです。
このたび初めて技術ブログなるものを書いてみました。

地図は普遍的なUI

Google Mapって素敵ですよね
地球規模の情報量に抜群のUI。ストリートビューを使った観光の擬似体験。
時にNetflix以上に時間を溶かしてくれる存在。

一方で、観光地にあるイラストてんこ盛りの地図看板などは、その土地の楽しさや親近感を爆速で感じさせてくれたり。

地図は情報を伝えるための普遍的なUIと言えます。

本題である、MapNJは、そんな「地図で伝えたい！」を少しだけお手助いするスクリプトです。

MapNJとは？

MapNJは、 SVGで作成された地図イラストを操作できる小さなスクリプト です。

MapNJが定義する「地図」とは、複数の エリア と、それに対応した ラベル で構成されるものを指します。

さらに幾つかの補助パーツを利用することにより、それっぽいUI になります。
まずはデモをご覧ください。

デモ - Nexus of R

このように、エリアのアクティブ・非アクティブ状態を管理し、それに付随したデザインを提供すること がMapNJの役割になります。

最大の特徴

MapNJ最大の特徴（目的）は、デザイナーとエンジニアの役割分担にあります。

デザイナーはデザインソフト上で、MapNJ独自の命名ルールを利用しデザインを行う必要があります。
これにより、SVGをコード上に展開した時点で既にMapNJの最低限の機能が使える状態になります。

以後、デザイン修正が起こるたびに、このルールに用い、デザイナーとエンジニアは連携を維持します。

意外に意思疎通が難しい2つの世界

デザインとコードの作業分担が行われている現場などでは、互いの責任が曖昧になりがちです。
また、異なる領域に特化したメンバー同士がアサインされた場合、相手の作業内容を想像することすら困難なケースもあります。

「共有すべきルール」をあらかじめ提示することで、相互理解や歩み寄りが生まれたら良いなと感じ、この形を選びました。

そのため、解説サイトの「デザイン素材素材作成」では、Nodeモジュールの紹介サイトでありながら、一番にデザイナーの作業内容を詳細に示すことを心がけました。

チュートリアル　

ここでは実際に、いくつかの機能を使い、シンプルなUIを作ってみようかと思います。

また、解説サイトでは網羅的な情報を掲載しておりますので、もしこのサンプルで、MapNJに興味を持ってくださった方は、是非こちらもご覧ください... 嬉

では、チュートリアルです!!

1. 基本コードを実装

本来、操作対象には地図イラストのようなものを想定していますが、今回は極力説明をシンプルにしたいため、「信号機」のような見た目のものを題材にします。

画像はFigmaの画面のスクリーンショットです。それぞれのデザインノードの名前はMapNJの命名規則に従っています。これを素材としてsvgを書き出します。

Tips
Figmaの場合、SVG書き出し画面で「ID属性を含める」のチェックを入れた上で書き出しを行います。


<!-- [1] svgをラップする任意の要素を準備 -->
<div id="your-mapnj">
  <!--[2] デザインしたSVG要素の貼り付け -->
  <svg width="600" height="400" viewBox="0 0 600 400" fill="none" xmlns="http://www.w3.org/2000/svg">
    <circle id="mapnj-area-blue" cx="204" cy="200" r="40" fill="#0EA5E9" />
    <circle id="mapnj-area-yellow" cx="300" cy="200" r="40" fill="#EAB308" />
    <circle id="mapnj-area-red" cx="396" cy="200" r="40" fill="#EF4444" />
  </svg>
</div>

<!-- [3] MapNJをCDNで利用 -->
<script src="https://cdn.jsdelivr.net/npm/mapnj@latest/dist/MapNJ.min.js"></script>

<!-- [4] インスタンス化 -->
<script>
  const mapnj = new MapNJ("#your-mapnj");
</script>

HTML側を準備しましょう。

任意のラップタグを用意し、ID属性を付与します。(IDはyour-mapnjとしました。)
Figmaより書き出されたSVGソースを貼り付けます。3つの丸を描いただけのものなので、SVGコードは非常にシンプルです。SVGの内包するタグにはmapnj-area-xx id属性 が付与されています。これら要素を、MapNJでは エリア と呼びます。
MapNJを読み込みます。今回はCDN https://cdn.jsdelivr.net/... を利用します。
ラップ要素のID名を第一引数としてインスタンス化します。

このコードだけで、とりあえずの状態管理機能が実装された状態になります。
是非、このコードをお手元のhtmlファイルのbodyタグに貼り、プレビューしてみてください。

Tips
SVGを書き出す際にid属性ではなく、data-name属性を利用する方法も存在します。

Tips
MapNJの利用は、「Nodeモジュール」「CDN」「Github Releaseから直接ソースをDL」の3つの方法があります。

2. デザイン調整

const mapnj = new MapNJ("#your-mapnj", {
  areaDefaultFillColor: "#555",
});

次に、少しデザインを調整してみます。
現在、エリアの「通常時（非アクティブ時）」の色はグレーです。もう少し濃いグレーに変更してみます。
先ほどのインスタンス化コードの第二引数を利用しオプションを渡します。上記のように訂正してください。
これでエリアの色が変更されました。

Tips
非アクティブ時・アクティブ時のいずれの状態も、エリアの「塗り」および「線」の色を自由に操作することが可能です。

また例では一括で色を指定していますが、エリア個別に色を指定することも可能です。

さらに、（今回のサンプルには登場しませんが）「ラベル」においても同じルールを適用することが可能です。

MapNJオプション

3. 連動コンテンツを追加

<div>
  <div data-mapnj="content" data-area-id="blue">青です!</div>
  <div data-mapnj="content" data-area-id="yellow">黄です!</div>
  <div data-mapnj="content" data-area-id="red">赤です!</div>
</div>

上記のコードを <div id="mapnj"> 内の、どこか適当なところに配置してください。
その上でいずれかのエリアをクリックしてください。
これらのコンテンツが連動し、表示・非表示されます。

Tips
これはオプションパーツと呼ばれるもので data-mapnj 属性を付与することで、特定の動作を行うパーツとして扱うことが可能になります。

MapNJオプションパーツ

4. 操作パーツを追加

<div>
  <button data-mapnj="selector" data-area-id="blue">青になれ!</button>
  <button data-mapnj="selector" data-area-id="yellow">黄になれ!</button>
  <button data-mapnj="selector" data-area-id="red">赤になれ!</button>
</div>

上記のコードを <div id="mapnj"> 内の、どこか適当なところに配置してください。
いずれかのbuttonをクリックすると、エリアとコンテンツが連動します。

5. イベントの利用

mapnj.on("AREA_CHANGE", (mapnj) => {
  if (mapnj.state.activeAreaId === "red") {
    alert("赤だから気をつけて!!");
  }
});

最後に、イベントを利用してみます。
mapnj定数に格納しているインスタンスに対し、onメソッドを実行します。 AREA_CHANGE イベントはその名の通り、エリアが切り替わった際に発火します。第二引数に渡したコールバック関数内では、mapnjのインスタンスをそのまま受け取れるため、ここでは、現在選択されているエリアのIDを判別し、アラートを表示するスクリプトを加えてみました。

最後に

41歳にして初めて技術ブログなるものを書いてみました。

普段は、WEBの技術を極力お仕事とは切り離し、デザインやアートとして気軽に楽しめるような、環境作りやモチベーションを大切にしています。

共感いただける人がいたら嬉しいです。

他にもFigmaプラグインなども作っているのですが、機会があればそれも紹介したいと思います。では!!

リファレンス

CHANGE LOG

24.08.16 : v0.2.0リリースに伴い、変更点に則しテキストを修正