0.はじめに

どうも、はじめして　いっぺい　です。
HTML,CSS,JavaScriptは使いこなせるようになってくると楽しいです。

1.作りたいイメージ

突然ですが、ネットワークグラフってご存知ですか？

ネットワークグラフって物事の可視化するのに便利ですよね。

私も考えを整理したくて様々なツールを使ってみたりはしたのですが、

（マインドマップ、マキネーションツール、フローチャート、図形ツール・・・）

どれもピンと来ていなくて

【詳細】それぞれのツールの感想について

・マインドマップ → 中心から広げられるのはいいけど、枝葉を中心にして伸ばすのは狭い・マキネーションツール　→　流れを動かして見れるのはいいけど、もうちょっとシンプルのが欲しい・フローチャート → こんな感じでいいけど、情報の保存が難しい。図の保存？編集も大変？・図形ツール　→　文字サイズとかの調整が大変？

ノートにメモするようにグラフをかいて、整理したり保存したい。（そして、見やすく編集しやすくてシンプルなのがいい）

今回はネットワークグラフを完成させるところまでいきませんが、
HTMLとCSSとJavaScriptが連携して動くところを掴めると思います。

2.欲しい機能

・葉っぱを配置する
・葉っぱをドラッグで移動させたい

ほんとはもっとある

・シンプルにテキスト保存したい・保存したテキストは、人に読める形にしたい・ブラウザを開けばすぐ書き始められて書き出しもしたい・文字サイズは見やすくしたい・自由に葉っぱを動かしたい（そして枝も追従したい）・葉っぱを追加したい位置に追加したい・保存したデータの読み込みに対応したい・無限に広がるタイプにしたい・葉っぱを素早くドラッグしたら枝を伸ばしたい&つなげたい・もちろん葉っぱの名前の編集もしたい

3.それっぽくコーディングしてみる

実装すること

テキストボックス
追加ボタン(形だけ)
HTML要素をドラッグしたい
ほどほどのスタイリング
データ構造を決める

HTML

タグはシンプルです。

index.html

<!-- 省略 -->
<body>
  <div id="inputBox"><!-- インプット領域 -->
    <!-- テキストボックス -->
    <input type="text" id="textContent">
    <!-- 送信ボタン -->
    <input type="button" id="addButton" value="done" onclick="done()">
  </div>
  <div id="drawArea"><!-- アウトプット領域 -->
  </div>
</body>
<!-- 省略 -->

CSS

葉っぱの要素はposition: fixedにして要素を動かせるようにします。

style.css

/* 余白を取らない設定 */
body {
  margin: 0;
  padding: 0;
}

/* インプット領域 */
#inputBox { 
  padding: 5px;
  top: 0;
  width: 100%;
}

/* テキストボックスの横幅 */
#textContent {
  width: 85%;
}

/* ボタンサイズ */
#addButton {
  width: 10%;
}

/* 葉っぱの設定 */
.nodes {
  position: fixed;
  background-color: palegreen;
}

JavaScript

配列にオブジェクトを入れてデータの形を決める
配列からcreateElementで要素を作る
その要素をいろいろ設定してdivに追加する

script.js


//JSONの配列に葉っぱのオブジェクトを入れる
let JSON_Data = [{
  id: 0,
  PosX: 100,
  PosY: 100,
  title: "葉っぱ"
}]

//アウトプット領域の部分を選択
const drawArea = document.querySelector("#drawArea")

//葉っぱを追加する処理を書きたいけど今回はconsole.log
function done() {
　　console.log("done")
}

//上で書いたJSONオブジェクトの配列をループする
//value:配列の中身 index:現在の配列の順番 array:元の配列
//※今回使うのはvalueのみ
JSON_Data.forEach((value, index, array) => {
  //ラベルタグを作成
  const label = document.createElement('label')
  
  //タグの文字列
  label.innerHTML = value.title;

  //要素の位置　'px'をつけるのは忘れがち
  label.style.left = value.PosX + 'px'
  label.style.top = value.PosY + 'px'
　　
  //取得できるようにidを設定
  label.id = value.id

　//ドラッグ機能をつける
  label.draggable = true;

  //スタイリング用にクラスをつける
  label.classList.add("nodes")

  //ラベルにイベントリスナーをつける
  label.addEventListener("dragend", (event) => {
    //ドラッグが終わった位置にラベルを配置する
    event.target.style.left = event.clientX + 'px'
    event.target.style.top = event.clientY + 'px'
    
    //ラベルの座標の位置も更新する
    JSON_Data[event.target.id].left = event.clientX
    JSON_Data[event.target.id].top = event.clientY
  })

　//画面に追加
  drawArea.appendChild(label)
})

4.結果

Webアプリとしての出来としてはしょっぱいですかね？

JSFiddleのサンプル

実は、このWebアプリの欲しい機能を全部実装したものがあります！

もし、そんなツールが欲しかったんだよねっていう人は使ってみてください
→OnlineMapTool

ここまで記事をご覧いただきありがとうございました。

ぜひ今回のサンプルコードを見比べながら実行してみてください