イントロダクション
前回は、目標ブレークによる「イメージの具現化」について記載しました。
今度は、これをプログラムで描画します。目的は以下の通りです。
追伸
これは、クリックなど細かな操作が出来なかった。なので、D3.jsを使う事にしました。
<目的>
- 計画などは、やっているうちにより良い方法や、新しい手順などが出てくるもの。作ったブレークツリーを更新する機能を実装する。
- 不特定多数の人が目標ブレークを使用して「イメージの具現化」を行える様にブラウザからの入力〜ブレークツリーの表示を行う
※テストにご協力してくれると嬉しいです。よろしくお願いします。
- 自分が描いている目標達成プロジェクトの作業フローを描き、タスクを一覧化する
<今回のやること>
今回は「静的な目標ブレークツリー」を作成します。
使用するもの(言語、ライブラリ)はJSでTreant.jsを使用します。JS(JavaScript)は、自分からすると多少癖のある言語ですが、以下の点でとても優れた言語です。
- 汎用性＝ブラウザ、サーバーサイド、PC上で簡単に動かせる
- ライブラリの豊富さ＝〜.jsと言うライブラリがたくさんあるので専門知識などなくてもいろんなことができる
- 公開が簡単＝レンタルサーバーなどで、HTMLファイルにスクリプトを記載すればそれだけで、プログラムが動くので簡単に公開できるし、学習コストも低い(わかりやすい)
今回の作成するものは、下の様なものです。シンプルなツリー状のイメージ(絵？)です。
中の文字がちょいと見辛いのですが。。。JSで表示すると以下の様になります。
今回の作成するものは、下の様なものです。シンプルなツリー状のイメージ(絵？)です。
中の文字がちょいと見辛いのですが。。。JSで表示すると以下の様になります。ちなみにサンプルはこちらにアップしてあります。
Treant.jsの実装
htmlファイルに以下のコードを書いて、Treant.jsを読み込みます。
ちなみに、ローカル(PC)上からJSファイルにアクセスできても、レンタルサーバーなどではできない場合があります(セキュリティ上)。もしうまく表示できない場合は、下のコードの「http://」と「https://」を使い分けて表示できるか試してみてください。
<script src="http://fperucic.github.io/treant-js/vendor/raphael.js"></script>
<script src="http://fperucic.github.io/treant-js/Treant.js"></script>
つまり、ウェブ上でGitにアクセスできないと上のコードは動きませんので注意を…
前置きはこんなものです。本題に入ります。
ダイアグラムの作成
上に表示した、目標ブレークツリーはTreant.jsで作成しました。内訳は下の様になります。
<htmlファイル>
<DOCTYPE html>
<head>
<script src="http://fperucic.github.io/treant-js/vendor/raphael.js"></script>
<script src="http://fperucic.github.io/treant-js/Treant.js"></script>
</head>
<body onload="createDefaultTree()">
<div id="breakTree" style="height="500"</div>
</body>
ここでは高さを指定してやらないと、自分の場合はツリーの下の部分が表示されませんでした。そして、初期表示に描画されなかった部分はスライドバーなどで移動した時に再描画処理を入れないとうまく表示してくれない様です。。。残念。。。
そして、問題のJSの処理部分です。良いサンプルがありましたのでそちらも参照ください。
/**
* デフォルトの目標ブレークツリーを作成する
* Treant.jsを使用する
* @see https://codepen.io/shoyan/pen/qNOMoN
*/
function createDefaultTree() {
simple_chart_config = {
chart: {
container: "#breakTree",
levelSeparation: 150,
siblingSeparation: 15,
subTeeSeparation: 15,
rootOrientation: "NORTH",
node: {
HTMLclass: "tennis-draw",
drawLineThrough: false
},
connectors: {
type: "straight",
style: {
"stroke-width": 2,
"stroke": "#ccc"
}
}
},
nodeStructure: {
text: { name: "Lv0:最終目標" },
children: [
{
text: { name: "Lv1:具現化項目A" },
children: [
{text: {name: "Lv2:実行項目A-1"}},
{text: {name: "Lv2:実行項目A-2"}},
{text: {name: "Lv2:実行項目A-3"}}
]
},
{
text: { name: "Lv1:具現化項目B" },
children: [
{text:{name: "Lv2:実行項目B-1"}},
{text: {name: "Lv2:実行項目B-2"}},
{text: {name: "Lv2:実行項目B-3"}}
]
},
{
text: { name: "Lv1:具現化項目C" },
children: [
{text: {name: "Lv2:実行項目C-1"}},
{text: {name: "Lv2:実行項目C-2"}},
{text: {name: "Lv2:実行項目C-3"}}
]
},
//// Lv2の子ノード ////
]
}
};
var my_chart = new Treant(simple_chart_config);
console.log(my_chart);
}
手間取ったところ
上のサンプルコードを見ながら作成しました。しかし、ノードのレベルを下げて３階層目に表示しようとした時に、プロパティの設定方法がわからなくて苦労しました。
＜ミスっていたところ＞
children: [
text: {name: "XXXX"},
children: [
{name: "XXXX"},
{name: "XXXX"}
]
]
と作成していたのですが、よくよく見ると下の様に「text」が必要だったことに気がつかず。。。
children: [
text: {name: "XXXX"},
children: [
{text: {name: "XXXX"}},
{text: {name: "XXXX"}}
]
]
まだ、初期表示しただけなのでこれから色々と実装していきます。
でわでわ。。。
