0.はじめに
どうも、はじめして いっぺい です。
HTML,CSS,JavaScriptは使いこなせるようになってくると楽しいです。
1.作りたいイメージ
突然ですが、ネットワークグラフってご存知ですか？
ネットワークグラフって物事の可視化するのに便利ですよね。
自分も考えを整理したくて様々なツールを使ってみたりはしたのですが、
（マインドマップ、マキネーションツール、フローチャート、図形ツール・・・）
どれもピンと来ていなくて
【詳細】それぞれのツールの感想について
・ マインドマップ → 中心から広げられるのはいいけど、枝葉を中心にして伸ばすのは狭い
・ マキネーションツール → 流れを動かして見れるのはいいけど、もうちょっとシンプルのが欲しい
・ フローチャート → こんな感じでいいけど、情報の保存が難しい。図の保存？編集も大変？
・ 図形ツール → 文字サイズとかの調整が大変？
ノートにメモするようにグラフをかいて、整理したり保存したい。（そして、見やすく編集しやすくてシンプルなのがいい）
今回はネットワークグラフを完成させるところまでいきませんが、
HTMLとCSSとJavaScriptが連携して動くところを掴めると思います。
2.欲しい機能
・ 葉っぱを配置する
・ 葉っぱをドラッグで移動させたいほんとはもっとある
・ シンプルにテキスト保存したい
・ 保存したテキストは、人に読める形にしたい
・ ブラウザを開けばすぐ書き始められて書き出しもしたい
・ 文字サイズは見やすくしたい
・ 自由に葉っぱを動かしたい（そして枝も追従したい）
・ 葉っぱを追加したい位置に追加したい
・ 保存したデータの読み込みに対応したい
・ 無限に広がるタイプにしたい
・ 葉っぱを素早くドラッグしたら枝を伸ばしたい&つなげたい
・ もちろん葉っぱ名の編集もしたい
3.それっぽくコーディングしてみる
実装すること
- テキストボックス
- 追加ボタン(形だけ)
- HTML要素をドラッグしたい
- ほどほどのスタイリング
- データ構造を決める
HTML
タグはシンプルです。
<!-- 省略 --><body><divid="d1"><!-- インプット領域 --><!-- テキストボックス --><inputtype="text"id="t1"><!-- 送信ボタン --><inputtype="button"id="b1"value="done"onclick="done()"></div><divid="d2"><!-- アウトプット領域 --></div></body><!-- 省略 -->CSS
葉っぱの要素はposition: fixedにして要素を動かせるようにします。
/* 余白を取らない設定 */body{margin:0;padding:0;}/* インプット領域 */#d1{padding:5px;top:0;width:100%;}/* テキストボックスの横幅 */#t1{width:85%;}/* ボタンサイズ */#b1{width:10%;}/* 葉っぱの設定 */.nodes{position:fixed;background-color:palegreen;}JavaScript
- 配列にオブジェクトを入れてデータの形を決める
- 配列からcreateElementで要素を作る
- その要素をいろいろ設定してdivに追加する
//JSONの配列に葉っぱのオブジェクトを入れるletj=[{id:0,PosX:100,PosY:100,title:"葉っぱ"}]//アウトプット領域の部分を選択constd2=document.querySelector("#d2")//葉っぱを追加する処理を書きたいけど今回はconsole.logfunctiondone(){ console.log("done")}//上で書いたJSONオブジェクトの配列をループする//v:配列の中身 i:現在の配列の順番 a:元の配列j.forEach((v,i,a)=>{//ラベルタグを作成constl=document.createElement('label')//タグの文字列l.innerHTML=v.title;//要素の位置 'px'をつけるのは忘れがちl.style.left=v.PosX+'px'l.style.top=v.PosY+'px' //取得できるようにidを設定l.id=v.id //ドラッグ機能をつけるl.draggable=true;//スタイリング用にクラスをつけるl.classList.add("nodes")//ラベルにイベントリスナーをつけるl.addEventListener("dragend",(event)=>{//ドラッグが終わった位置にラベルを配置するevent.target.style.left=event.clientX+'px'event.target.style.top=event.clientY+'px'//ラベルの座標の位置も更新するj[event.target.id].left=event.clientXj[event.target.id].top=event.clientY}) //画面に追加d2.appendChild(l)})4.結果
Webアプリとしての出来としてはしょっぱいですかね？
でも、あれやこれやを作りたいな〜 どうしたら作れるだろう？
と考えながらコーディングを学ぶと楽しみながら力がつきますね
実は、このWebアプリの完成版があったりするのですが、
どうにかしてマネタイズ出来ないかな〜って奮闘しています
ここまで記事をご覧いただきありがとうございました。
ぜひ今回のコードを見比べながら実行してみてください