Treant.js イメージ作成〜ダイヤグラムにイメージを表示する〜

イントロダクション

前回作成した、ダイヤグラムは文字をメインに表示しているので、横長でとても見づらいものになりました。

この問題を解決するために、「イメージファイル」を使用して、「直感」に頼る方法で目標ブレークツリーを作成しようと考えました。

イメージファイルの作成

設計=デザインをすると言う部分で、いかにも「デザイン」な作業になってしまいました。(苦手なのです。。。)自分は、絵を描いたり、造形デザインなどをやったことがなく、またやる気もありませんので大きな問題になりました。

答えは、以下の中どれかになると思います。

  • 「できる人に頼る」
  • 「他の方法を模索」
  • 「自分で学習してやる」

時間との兼ね合いになると思います。どの手段でも良いと思います。そして。自分は真ん中の項目「他の方法を模索」を行うことにしました。

そして、他の方法というのは「既にあるものを使う」という手段になります。

<手順>

  1. 目標ブレーク用イメージルールを作成する
  2. シンボルについて調査する
  3. 目標ブレーク用カテゴリに対応するシンボルをカスタムする

こんな感じでやろうと思います。

イメージの作成ルール

このルールは実際に目標ブレークツリーを後悔した後で、ヘルプの様な形で「このマークはどんな意味?」に応えられる様なドキュメント(説明書的な)を表示する時に使用するドキュメントになります。

目標ブレークカテゴリ一覧

Lv0: 目標カテゴリ(方向性)
<創造・実行>

作成する、貯金する、〜へ行く etc...
<学習・習得>

資格を取る、歴史関連のドキュメント作成、英語の学習 etc...
<生活習慣>

ダイエット、生活リズム改善、朝活 etc...
Lv1: 実行カテゴリ(目標行動)
<デザイン・アート系>

絵画, 彫刻, イラスト, 漫画 etcの作成
<音楽系>

バンド, コンサート出演、楽器や歌 etc...をやる
<ファッション系>

お洒落の勉強, 着こなし, アクセサリ etc...
<スポーツ系>

スポーツ全般, 格闘技, 登山 etc...
<コミニティ(参加する・作る)>

サークル、グループなどの立上げ、参加 etc...
<プログラム・WEB系>

プログラミング関連, WEBデザイン etc ...
<園芸・農業系>

家庭菜園, 盆栽, 花, 食べれる野草 etc ...
<オートスポーツ(車・バイク・船)>

車, バイク, ヨット, ゴーカート etc ...
<ゲーム系>

カードゲーム, ボードゲーム, TRPG, TVゲーム
<グルメ・料理>

料理関連、食べ歩き, お酒 etc ...
学問(数学。歴史,科学)

お手軽料理レシピ作成, つまみ作成 etc ...
<占い・スピリテュアル系>

タロットカード, 星占い , 魔術, 呪術 etc ...
<ホビー(漫画・アニメ・鉄道・フィギュア・etc)>

上記に含まれないカテゴリ
Lv2: 成果物カテゴリ(作成するもの)
<実物・制作物>

作成物, 目的のもの, 実行結果
<日記・ノート・ドキュメント>

実行の記録, 研究結果, まとめ etc ...
<資格・免許>

TOEIC, 電気工事士, 中小企業診断士 etc ...
 こんな感じのカテゴリ一覧に対してそれぞれの項目にイメージ(絵)を当てはめていきます。

当然、自分はデザイン(絵や、造形)に関しては無頓着なので「まるでダメ」です。余談ですが、学生の頃の美術の成績は5段階で「2」でした(笑)

調査を行う

「絵心がない」問題を解決するために自分が使用する手段は「既にあるものを使う」です。具体的にどの様にするかというと以下の様な手順を踏みます。

  1. どんなものを描きたかったのか再度確認する
    → 各カテゴリに対応するシンボルマークを描く
  2. シンボルについて調査する、あわよくばそのシンボルを修正して自分用に改造して使用する(著作権など注意する)
    <参考サイト>
    古代錬金術のシンボル
    三神(創造・維持・破壊)
    インディアン(ホピ族など)シンボル → ここのサイトをメインにする
  3. 上記のサイトか自分のイメージに近いものを選択する、ただし「イメージ作成のルール」に則して作成する

こんな感じで作成開始します。

でわでわ。。。



Treant.js 〜ツリーダイヤグラムを描く〜

イントロダクション

前回は、目標ブレークによる「イメージの具現化」について記載しました。

今度は、これをプログラムで描画します。目的は以下の通りです。

追伸

これは、クリックなど細かな操作が出来なかった。なので、D3.jsを使う事にしました。

<目的>

  1. 計画などは、やっているうちにより良い方法や、新しい手順などが出てくるもの。作ったブレークツリーを更新する機能を実装する。
  2. 不特定多数の人が目標ブレークを使用して「イメージの具現化」を行える様にブラウザからの入力〜ブレークツリーの表示を行う
    ※テストにご協力してくれると嬉しいです。よろしくお願いします。
  3. 自分が描いている目標達成プロジェクトの作業フローを描き、タスクを一覧化する

<今回のやること>

今回は「静的な目標ブレークツリー」を作成します。

使用するもの(言語、ライブラリ)JSTreant.jsを使用します。JS(JavaScript)は、自分からすると多少癖のある言語ですが、以下の点でとても優れた言語です。

  • 汎用性=ブラウザ、サーバーサイド、PC上で簡単に動かせる
  • ライブラリの豊富さ=〜.jsと言うライブラリがたくさんあるので専門知識などなくてもいろんなことができる
  • 公開が簡単=レンタルサーバーなどで、HTMLファイルにスクリプトを記載すればそれだけで、プログラムが動くので簡単に公開できるし、学習コストも低い(わかりやすい)

いざ! Treant.js

今回の作成するものは、下の様なものです。シンプルなツリー状のイメージ(絵?)です。
中の文字がちょいと見辛いのですが。。。JSで表示すると以下の様になります。

今回の作成するものは、下の様なものです。シンプルなツリー状のイメージ(絵?)です。
中の文字がちょいと見辛いのですが。。。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);
}

手間取ったところ

上のサンプルコードを見ながら作成しました。しかし、ノードのレベルを下げて3階層目に表示しようとした時に、プロパティの設定方法がわからなくて苦労しました。

<ミスっていたところ>

children: [
   text: {name: "XXXX"},
   children: [
       {name: "XXXX"},
       {name: "XXXX"}
   ]
]

と作成していたのですが、よくよく見ると下の様に「text」が必要だったことに気がつかず。。。

children: [
 text: {name: "XXXX"},
 children: [
     {text: {name: "XXXX"}},
     {text: {name: "XXXX"}}
   ]
]

まだ、初期表示しただけなのでこれから色々と実装していきます。

 

でわでわ。。。



Java DEM 〜Javaで地図を作る〜

思いつきレベルですが。。。

Javaで地図を作りたいと思っております。GoogleMapの様にどこかのサーバーから位置情報とその場所にある地域情報(仮)を取得して表示する様なものを考えております。

GoogleMapではダメなのか?

ダメなんです。理由は以下の通り。

  1. GoogleMapでは対象の地域のみを描画する事が出来ない(多分)
  2. 2D表示と3D表示を切り替える、3D表示時にキャラクターも表示したい。
  3. ウェブに接続しなくても起動できる仕様にしたい。(Downloadしたものを使用)

作成後のイメージ

  1. クライアント端末上に現在位置とリンクしたポイント(IMG)を表示
  2. 位置情報より割り出した、市町村の形をしたMapを表示(2D)
  3. 3Dで作成したフィールド(ワールド)と2D画面を切り替えて表示する事ができる

使用しようと思っているライブラリ(jar)

dem4j -> これを使えるかどうかの検証(試しに使ってみる)する

 


export M2_HOME=/opt/apache-maven-3.2.5
export "PATH=$PATH:$M2_HOME/bin"

開発進捗管理〜Mange list of plans〜

やりたい事(To Do )

ラズパイをクライアント端末として使う

  • ラズパイの端末を作成する
    1. ラズパイのディスプレイ(7touch)を接続
    2. Wifiを接続
    3. Bluetoothを接続

ゲームの仕様を確定する

    1. TextRPGで作成するイメージを作る
    2. キャラクター作成方法の作成
    3. ゲーム進行の作成
    4. 現実とゲームのリンク方法を確立する

 

discordでプレイできるテキストRPGを作成する