地域情報ページ作成方法の解説

地域情報ページ作成方法

地域情報ページの作成方法に関して、解説したいと思います。
このページは、以下の二つのファイルで構成されています。

  1. index.html: HTMLファイル。

  2. Gotochi.js: JavaScriptファイル(JSプログラムを書きます)。

  3. BootStrapのサンプルをダウンロード

作成方法に関しては以下の通りです。

  1. HTMLファイルは、BootStrap exampleからダウンロードしてきたファイルを修正する形で作成しました。

  2. JSファイルは一からすべて作成しました。

HTMLファイルに関しては、BootStrapを使用するため次の設定をしています。

  • ダウンロードしたBootStrapサンプルの読み込みの設定(linkタグ)。
  • 外部のJS(Masonry)の読み込みの削除(linkタグ)。
  • ツイッターカードの設定。

BootStrap以外の設定を変更しました。以下の手順を見ていけばご理解いただけると思います。

作成手順

  1. BootStrap exampleからサンプルをダウンロードしてきます。

  2. 解凍して「masonry」フォルダのindex.htmlファイルをコピーして
    適当な場所に配置します。※マイドキュメントフォルダなど。

  3. mansonryの読み込み部分を削除する。

  4. 中身のコンテンツboddyタグ内部を修正し、自分の意図する形に修正。
    ※この部分に関しては、BootStrapとHTMLの学習が必要になります。

  5. JSを起動するためのファンクションをbodyタグのonload属性に設定する。
    ※Gotochi.jsファイルを読み込むためのlinkタグを追加する

  6. JSプログラムからアクセスしたいタグにIDを付ける。

  7. 選択したときに取得したい情報(hokkaido)などをdata属性に設定する。

  8. 「5」で設定したファンクションの実装を行う。

  9. JSプログラムで読み込むデータ配列の作成。※後ほど説明します。

  10. 適当な都道府県を表示してみる。

  11. 複数の都道府県表示を行うため、データの追加作成を行う。

JSの実装に関して。

JSプログラム、JavaScriptプログラムに関して解説します。
JavaScript、略してJSは主にウェブブラウザでHTMLタグを取得し操作する事
を行います。しかし、これ以外にもNode.js, Vue.jsなどいろいろな
ライブラリがあり、それぞれに使い方があるのでそれを調べて学習する必要
がありますが、それは必要になったときに学習するということでよいと
思います。

どういうことか?といいますと、Node.jsにしろVue.jsにしろJavaScriptで
あることには変わりないので、JavaScriptがわかれば学習にかかる時間は
少なくて済むということです。

余談。

筆者は、それなりに年を取っているので、JavaScriptの基本がわかるレベル
にあります。なので、Node.jsなどもある程度、作成するものによりますが
よほどでない限り、ドキュメントを見ながらプログラムを作成することが
できます。ある程度熟達したプログラマーはほとんどこの領域にあるので
気軽に質問してよいと思います。

むしろ積極的に質問してほしいです。なぜなら「知っていることをしゃべる
のは楽しいから」です。

JSプログラムの内容に関して

今回作成したプログラムに関して解説いたします。プログラムの仕様として
以下のものがあります。※自分で決めた仕様になります。

  1. 都道府県を選択したときに、それに紐づく市町村を表示する。
  2. 市町村が選択されたときに、次の項目を表示する。
    ・各市町村に関するYoutube動画の表示。
    ・対象の市町村がどの地域・地方に存在するか表示。
    ・各市町村のホームページ。
    ・各市町村の情報があるツイッター。
    ・楽天APIを使用し「XX市町村のふるさと納税」で取得できる商品一覧。

仕様の実現方法。

「1.都道府県を選択したときに、それに紐づく市町村を表示する」に関して。

各都道府県を選択するためのセレクトボックスを作成し、47都道府県を
OPTIONタグでセットする。具体的にはOPTIONタグの表示部分に都道府県名、
data属性に各都道府県のキー(hokkaidoなど)をセットして各項目を選択し
たときに、キーをJSプログラムで取得できるようにする。
そして、キーは、データ配列の大文字(UpperCase)で以下のように定義する。
「大文字の各都道府県キー = [市町村名, 市町村のホームページURL
, ユーチューブ埋め込みURL, Twitter埋め込みHTMLコード, facebookURL
, 地域のイメージファイルURL, 対象になる地域名(よみ)];」

プログラムの内容に関して。

・HTMLファイルに読み込むファンクションを設定。
bodyタグのonload属性で「selectLv1()」というファンクションを起動する
ように設定する。
これにより、HTMLファイルが表示されたときに「selectLv1()」が起動する。

・JSプログラム。
都道府県セレクトボックスと市町村セレクトボックスにイベントリスナー(
ファンクション)を登録する、これによりセレクトボックスの値を選択した
ときに起動する処理を定義することができる。

具体的なコード

画面表示時にonloadで実行するファンクション「selectLv1()」で処理を行っています。
行っていることは、都道府県、市町村のセレクトボックスの変更時に起動するファンクションを登録しているだけです。
まずは、コード全体をみてから、細かい部分を解説します。

コード全体

function selectLv1() {
    // 市町村のイベントリスナー登録
    let citySelectBox = document.getElementById('shityoson');
    citySelectBox.addEventListener('change', (event) => {
      // データ取得
      let cityObj = event.srcElement[event.srcElement.selectedIndex];
      let cityUrl = cityObj.value;
      let cityName = cityObj.text;
      // 表示する市町村の値セット
      document.getElementById('targetCity').innerHTML = cityName; // 表示する市町村
      let cityPage = document.getElementById('targetCityHomePage');
      cityPage.src = '';
      cityPage.innerHTML = cityName + ' <a href="' + cityUrl + '"  target="_blank">ホームページを開く</a> :  <span> ';// ホームページリンク
      // まちのよみがな
      document.getElementById('yomi').innerText = cityObj.dataset.yomi;
      // 地方のイメージ
      document.getElementById('tiho').src = cityObj.dataset.tiho;
      // 地方の読み仮名
      document.getElementById('tihoYomi').innerHTML = '<a href="' + cityObj.dataset.tiho + '"><b>' + cityObj.dataset.tihoYomi + ' ちほう</b></a>※リンク先に大きい地図';

      // FaceBookのリンク
      cityPage.innerHTML += cityObj.dataset.facebook == '' ? "<font size='3'>FaceBookリンク</font>" : "<a href='" + cityObj.dataset.facebook + "'><font size=\'3'>FaceBookへのリンク</font></a></span>";
      // ふるさと納税対象市町村
      document.getElementById('hurusatoNozei').innerText = cityName + "のふるさと納税";
      let hurusato = document.getElementById('hurusatoNozeiPage');
      hurusato.src = '';
      hurusato.src =  "https://zenryokuservice.com/project/rakuten/php/rakutenCatalog.php?category=" + cityName + "ふるさと納税";
      // 画面のリロード処理が走ってくれるようだ。。。
      hurusato.onload = function() {
//        let hurusatoDoc = this.contentWindow;
//        hurusatoDoc.getElementById('category').value = cityName + "ふるさと納税"
//        hurusatoDoc.getElementById('reloadButton').onClick();
      };

      // Youtubeの表示
      document.querySelector('#targetUrl').childNodes[0].src = cityUrl;// iframeで表示するURL
      document.getElementById('videoComment').innerText = cityObj.dataset.you == '' ? "動画の選別中です" : cityName + "の動画です";
      document.getElementById('youtubeVideo').src = cityObj.dataset.you == '' ? "https://www.youtube.com/embed/dZMAphYDiYo" : cityObj.dataset.you;

      // Tweetの埋め込み
      let tweetTitle = document.getElementById('tweetTitle').innerHTML = cityObj.dataset.tweet == '' ? "Twitter表示の工事中です" : cityObj.dataset.tweet;
      let tweetUrl = document.createElement('script');
      tweetUrl.src = 'https://platform.twitter.com/widgets.js';
      tweetUrl.onload = function(e) { e.target.src };
      let tweetEle = document.getElementById('tweetEmbbed');
      tweetEle.appendChild(tweetUrl);
    });

    // 都道府県のSELECTボックスの取得
    let selectbox = document.getElementById("todohukenList");

    // 初回はイベントリスナーを起動するのでイベント生成
    const eve = new Event('change');

    // 都道府県のイベントリスナーの登録
    selectbox.addEventListener('change', (event) => {
      // 選択した都道府県をタイトルにセット
      let todohuObj = event.srcElement[event.srcElement.selectedIndex];
      let todohuIdx = todohuObj.dataset.todohu;
      let totohuTItle = document.getElementById("targetTodohu");
      // シンボルイメージセット
      let img = document.getElementById('todohuFlag');
      img.src = KENKI[todohuIdx];
      // 都道府県名のセット
      totohuTItle.innerHTML = todohuObj.text;

      // セレクトボックスを初期化する
      let shityoson = document.getElementById("shityoson");
      if (shityoson.hasChildNodes()) {
        while(shityoson.childNodes.length > 0) {
            shityoson.removeChild(shityoson.firstChild);
        }
      }
      // 指定都道府県の市町村をセットする(YoutubeUrlも取得)
      let targetSityosons = TODOHU[todohuIdx];
      for (let i = 0; i < targetSityosons.length; i++) {
        let option = document.createElement("option");
        option.text = targetSityosons[i][0];
        option.value = targetSityosons[i][1];
        // YoutubeUrlを格納
        option.dataset.you = targetSityosons[i][2] == '' ? '' : targetSityosons[i][2];
        // ツイッター埋め込み
        option.dataset.tweet = targetSityosons[i][3] == '' ? "ツイートの検索中" : targetSityosons[i][3];
        // FacebookURLの埋め込み
        option.dataset.facebook = targetSityosons[i][4] == '' ? '' : targetSityosons[i][4];
        // まちのよみがな
        option.dataset.yomi= targetSityosons[i][5] == '' ? '' : targetSityosons[i][5];
        // 地方の画像
        option.dataset.tiho = targetSityosons[i][6] == '' ? '' : targetSityosons[i][6];
        // 地方の読み
        option.dataset.tihoYomi = targetSityosons[i][7] == '' ? '' : targetSityosons[i][7];

        // セレクトボックスに追加
        shityoson.appendChild(option);
      }
      // 市町村の初回イベント処理
      const even = new Event('change');
      citySelectBox.dispatchEvent(even);
    });

    // 初回のイベント処理実行
    selectbox.dispatchEvent(eve);
}

市町村のイベント処理ファンクション

  1. 市町村のセレクトボックスを取得する

    let citySelectBox = document.getElementById('shityoson');
  2. 市町村セレクトボックスにイベント処理を登録する、変更時のイベント「change」を指定して登録する

    citySelectBox.addEventListener('change', (event) => {
    });
  3. 市町村の変更時の処理
    セレクトボックスの選択した項目、OPTIONタグを取得する

      // データ取得
      let cityObj = event.srcElement[event.srcElement.selectedIndex];

    OPTIONタグから設定している値を取得する(URL, data属性の値)

      let cityUrl = cityObj.value;
      let cityName = cityObj.text;

    HTMLでID「targetCity」としているタグに市町村名をセット

      // 表示する市町村の値セット
      document.getElementById('targetCity').innerHTML = cityName; // 表示する市町村

    「targetCityHomePage」としているタグを取得する

      let cityPage = document.getElementById('targetCityHomePage');

    このタグにリンクを設定、同様に読み仮名などを設定する、ふるさと納税に関しては依然作成したPHPファイルにパラメータを渡して起動する

      cityPage.src = '';
      cityPage.innerHTML = cityName + ' <a href="' + cityUrl + '"  target="_blank">ホームページを開く</a> :  <span> ';// ホームページリンク
      // まちのよみがな
      document.getElementById('yomi').innerText = cityObj.dataset.yomi;
      // 地方のイメージ
      document.getElementById('tiho').src = cityObj.dataset.tiho;
      // 地方の読み仮名
      document.getElementById('tihoYomi').innerHTML = '<a href="' + cityObj.dataset.tiho + '"><b>' + cityObj.dataset.tihoYomi + ' ちほう</b></a>※リンク先に大きい地図';
      // FaceBookのリンク
      cityPage.innerHTML += cityObj.dataset.facebook == '' ? "<font size='3'>FaceBookリンク</font>" : "<a href='" + cityObj.dataset.facebook + "'><font size=\'3'>FaceBookへのリンク</font></a></span>";
      // ふるさと納税対象市町村
      document.getElementById('hurusatoNozei').innerText = cityName + "のふるさと納税";
      let hurusato = document.getElementById('hurusatoNozeiPage');
      hurusato.src = '';
      hurusato.src =  "https://zenryokuservice.com/project/rakuten/php/rakutenCatalog.php?category=" + cityName + "ふるさと納税";
      // 画面のリロード処理が走ってくれるようだ。。。
      hurusato.onload = function() {
    //        let hurusatoDoc = this.contentWindow;
    //        hurusatoDoc.getElementById('category').value = cityName + "ふるさと納税"
    //        hurusatoDoc.getElementById('reloadButton').onClick();
      };
    
      // Youtubeの表示
      document.querySelector('#targetUrl').childNodes[0].src = cityUrl;// iframeで表示するURL
      document.getElementById('videoComment').innerText = cityObj.dataset.you == '' ? "動画の選別中です" : cityName + "の動画です";
      document.getElementById('youtubeVideo').src = cityObj.dataset.you == '' ? "https://www.youtube.com/embed/dZMAphYDiYo" : cityObj.dataset.you;
    
      // Tweetの埋め込み
      let tweetTitle = document.getElementById('tweetTitle').innerHTML = cityObj.dataset.tweet == '' ? "Twitter表示の工事中です" : cityObj.dataset.tweet;
      let tweetUrl = document.createElement('script');
      tweetUrl.src = 'https://platform.twitter.com/widgets.js';
      tweetUrl.onload = function(e) { e.target.src };
      let tweetEle = document.getElementById('tweetEmbbed');
      tweetEle.appendChild(tweetUrl);

    都道府県のイベント処理ファンクション

    市町村のイベントとほぼ変わらないが、都道府県が選択された後に、市町村のセレクトボックスの値をセットするようにしている。

    // 都道府県のイベントリスナーの登録
    selectbox.addEventListener('change', (event) => {
      // 選択した都道府県をタイトルにセット
      let todohuObj = event.srcElement[event.srcElement.selectedIndex];
      let todohuIdx = todohuObj.dataset.todohu;
      let totohuTItle = document.getElementById("targetTodohu");
      // シンボルイメージセット
      let img = document.getElementById('todohuFlag');
      img.src = KENKI[todohuIdx];
      // 都道府県名のセット
      totohuTItle.innerHTML = todohuObj.text;
    
      // セレクトボックスを初期化する
      let shityoson = document.getElementById("shityoson");
      if (shityoson.hasChildNodes()) {
        while(shityoson.childNodes.length > 0) {
            shityoson.removeChild(shityoson.firstChild);
        }
      }
      // 指定都道府県の市町村をセットする(YoutubeUrlも取得)
      let targetSityosons = TODOHU[todohuIdx];
      for (let i = 0; i < targetSityosons.length; i++) {
        let option = document.createElement("option");
        option.text = targetSityosons[i][0];
        option.value = targetSityosons[i][1];
        // YoutubeUrlを格納
        option.dataset.you = targetSityosons[i][2] == '' ? '' : targetSityosons[i][2];
        // ツイッター埋め込み
        option.dataset.tweet = targetSityosons[i][3] == '' ? "ツイートの検索中" : targetSityosons[i][3];
        // FacebookURLの埋め込み
        option.dataset.facebook = targetSityosons[i][4] == '' ? '' : targetSityosons[i][4];
        // まちのよみがな
        option.dataset.yomi= targetSityosons[i][5] == '' ? '' : targetSityosons[i][5];
        // 地方の画像
        option.dataset.tiho = targetSityosons[i][6] == '' ? '' : targetSityosons[i][6];
        // 地方の読み
        option.dataset.tihoYomi = targetSityosons[i][7] == '' ? '' : targetSityosons[i][7];
    
        // セレクトボックスに追加
        shityoson.appendChild(option);
      }
      // 市町村の初回イベント処理
      const even = new Event('change');
      citySelectBox.dispatchEvent(even);
    });

Javaでも学習したが、3項演算子が使っていますので、補足です。
<書式>

論理式 ? TRUEの場合 : FALSEの場合;

サンプル

let ans = 1 < 10 ? "aaa" : "bbb";

上記の変数「ans」には"aaa"が入る。

JS はてなブログ 〜サイドバーに動的処理を入れる〜

イントロダクション

現在(2019-08-31)自分は「はてなブログ」では、「計画やプログラムの理論部分など」どちらかというと高レベルな部分(人間に近い部分)を記載しています。リンク先は「テキストRPGの仕様作成」について記載しています。

しかし、基本はプログラムのことを記載しているので、やはり何かしらのプログラムを入れたいと思っているのですが、問題が。。。。

JSをどこに書く?

やりたいことは、はてなブログの、サイドバーに、IFRAMEで他のページを読み込んで表示しています。(PHPでの楽天APIの実行結果)実際左のリンクにパラメータを与えて表示内容を切り替えています。。。

しかし、現状はパラメータが固定なので(ハードコーディングなので)折角のAPIが意味なし状態になっています。

なので、今回はJSで動的に切り替えられるように改修を加えようと考えています。

問題1

初めのこの問題で全て解決しそうですが、JSをどこに書き起動させるか?
これを解決する必要があります。

先ほど、はてなブログにJSを記載してみたのですが、window.onloadのイベントハンドラで処理を行うと、サイドバーを読み込む前に処理が走ってしまうので初期値を設定したいDOM(HTMLタグ(今回はIFRAME)))を取得できません。

解決

はてなブログで、「onload」イベントを使用すると、コンテンツ(ブログのサイドバーなどの記事内容)が読み込まれる前に処理が走るので、DOM(HTMLタグ)の取得ができません。

なので、イベント処理を行うタイミングを変更します。起動するタイミングは「」です。コードに書くと下のようになります。

document.addEventListener("DOMContentLoaded", function(event) {
    loadIframe();
});

function loadIframe() {
   var data = ["pc", "guitar", "健康", "java", "占い", "github", "blender"];

   var selected = Math.floor( Math.random()*(6-0)+0);

   var iframeDom = document.getElementById("rakutenAPI");
   iframeDom.src= "https://zenryokuservice.com/project/rakuten/php/rakutenCatalog.php?category=" + data[selected];
   iframeDom.style="height: 1200px; margin: auto;";
}

初めに、iframe.srcに渡すURLパラメータ用の配列を用意します。(var data)
次に、乱数で0-6までの整数を取得します。
Math.floor()は整数を取得するのに使用しています。Math.random()は小数点付きの値を返却するので、整数になるようにしています。
以下省略。。。

記載する部分は、詳細設定のheadタグ部分に記載しました。以下のような手順でやりました。

  1. サイドバーの編集で使用するタグにIDをつけて定義(HTMLで記述)
  2. headタグの部分にJSを記載し「DOMContentLoaded」のイベントハンドラを設定してやります。

実行結果はこちらのページを見てくれれば。。。

でわでわ。。。



JavaScriptでユーザー認証 〜シンプルな認証処理〜

イントロダクション

最近作成している、GoogleMapを使用したページがある程度見れるものになってきたので、そろそろと公開できるような形にしたいと思い、ちょいとギミックを追加します。

パスワード認証

皆さんご存知「パスワード認証」を実装します。
これを実装すれば、「<入力>」「<送信>」などのボタン押下で、不特定多数の人に地図データを登録される心配がなくなります。

パスワード認証の実装

シンプルにボタンをクリックしたらパスワード入力ダイアログボックスが表示され、入力→認証という流れで処理を行います。
パスワードは見つけられないように、サーバーサイド(PHP)で持つことにします。つまり実装としては下のような感じになります。

認証準備

まずは、入力とデータの送信が出来ないようにボタンを非表示にします。
これはシンプルにHTMLでstyle="display: none"を設定してやります。具体的には以下のようなHTMLコードに変更します。
<Before>

        <button class="butt1" onclick="sideWinHandle(sideWin)"><入力>   </button>
        <button class="butt2" onclick="postData()"><送信>  </button>

<After>

        <button name="loggedIn" class="butt1" onclick="sideWinHandle(sideWin)" style="display: none;"><入力></button>
        <button name="loggedIn" class="butt2" onclick="postData()" style="display: none;"><送信></button>
        <button onclick="openLoginForm()"><Login> </button>

そして、ボタン押下時に走らせる処理onclick="openLoginForm()"を設定します。
これが出来たら、あとはJSの実装のみです。

ズバリ下のような実装を追加します。ちょっと特殊なのはprompt()です。

function openLoginForm() {
var input = prompt("Login Form");
    if ('パスワード' === input) {
        var loggedInButton = document.getElementsByName("loggedIn");
        loggedInButton.forEach(but => {
            but.style = "display: visible";
        });
    }
}

これで下のように動きます。

  1. 「Login」ボタンを押下
  2. プロンプトが開き、入力を求める
  3. 入力した値がJSのinput変数に代入される(上のコード参照)

シンプルに実装できていると思います。

問題が1つ

この実装だと、パスワードがバレバレで、セキュリティ的にアウトです。しかし、今回の実装はあくまでサンプルなのでまぁよしとします。

実際の使用方法

実際は入力して判定するときにクライアント側ではなく、サーバー側(PHPなど)で判定を行います。
今の自分の実装だと、入力した値をサーバーに送信(Ajax通信)して判定結果をもとに画面の表示・非表示を切り替えるなどを行うのが、安全なやり方だと思います。

ぢつは。。。

今の実装をしていて気がつきました。「ハナっからこーすればいいよな?」と思っております。初めの初期表示時に処理を行うことに執着していて気がつかなかった次第です。



JS XmlHttpRequest 〜JSでの同期/非同期通信〜

イントロダクション

ブラウザアプリを作成しています。
GoogleMapへのデータ登録と表示を行うシンプルなものです。

設計と思想

今回の実装は、PHPを使用するけどサーバーサイドとクライアントサイドを分断して実装しようと思いましたので以下のようなファイル構成で実装しています。
<クライアント>

  • SampleMap.html
  • SampleMap.js

<サーバー>

  • InsertMap.php
  • GetMapInfo.php

XmlHttpRequest

ここで使用するのはXMLHttpReuqstを使用して実装します。
リクエストのタイプは2つあります。

  1. データを送信しないGET
    XMLHttpReuqst.send(); // 引数なし
  2. データを送信する[POST]()
    XMLHttpReuqst.send(data); // 引数あり

これらは用途により使い分けます。世間巷でよくある$ajaxなどはこれを使用しているのでテクノロジー的には大差ありません。

とりあえずはこんな形で実装します。

しかし

実装したのだけれど、ファイルの送信がうまくいかず。。。以前イメージファイルの送信に以下のようなコードでリクエストを飛ばし、DBへのデータ登録まで確認したのだけれど、またうまくいかなくなりました。

怪しいところ

HTML側のFormに余計な属性をつけた。

enctype="multipart/form-data"

しかし、これは関係ないようでした。どこなのだろうか?
絶賛戦闘中です(笑)



D3.js ダイヤグラムを表示 〜サンプルを実行する〜

イントロダクション

前回までは「Treant.js」を使用してダイヤグラムを作成していました。駄菓子菓子、イベントハンドルができない(クリックしたときの処理を追加できない)ので諦めてD3.jsを使用することにしました。ブラウザで起動するアプリにしたいのでJSからは逃げられないのでした。。。

D3.js

上記のリンクにあるサンプルを参考にD3.jsを使用します。そして、クリックイベントにも対応している様なのでそちらの心配もしなくて良いです。(ここが肝心)

使用したことのないライブラリを使用するときは意図する実装ができるかどうかを確認してから使用すると自分の様に無駄な時間を使わなくて良いと思います。

ちなみに、初心者は大いに無駄な時間も使ってください(笑)。JSとはいえプログラムであることには変わりないので、処理(コード)をどんどん深掘りして読んだり、実行したりしていくと「これならいける!」とか「ダメだこりゃ。。。」などの様な「結論」にたどり着きます。これを何度か経験しておくと後々役にたつと思います。

上記のサンプルを実行すると下の様に表示されました。コピペです。

サンプルの画像と多少違うけど。。。まぁ放っておきます。

そして、サンプルコードを見てみます。

今回はJSとHTMLを分けてやりたいのでコピッたソースを下の様に分けました。

<HTML>

<body onload="treeMain()"> ... </body>

<JS> Gitにアップしてあります

こぴったコードをtreeMain()メソッドで囲みました。変数宣言のみの部分はメソッドの外にあります。

これをカスタムして、目標ブレークツリーを作成しようと思います。

https://zenryokuservice.github.io/GoalAchievement/

でわでわ。。。









Treant.js ドキュメントの見方〜ワンポイントレッスン的な〜

実質、メモになっています(笑)

Treant.jsのAPIドキュメント(connector)

ここのページを参照して、下の様なドキュメントがあります。

ここに記載しているものはちゃんと読めばわかるのでしょうが、英語だから部分的に読んでしまいがちです。。。。「chart」プロパティの内容に関して記載しています。なのでダイヤグラムを作成するときに使用した設定データの「chart」プロパティに何を設定するのか記載していると思われます。(仮定です)

下のコードはGitにアップしています。

var config = {
    chart: {
        container: "#breakTree",
        levelSeparation:    150,
         siblingSeparation:  15,
         subTeeSeparation:   15,
         rootOrientation: "NORTH",

         node: {
             HTMLclass: "tennis-raw",
             drawLineThrough: false
         },
         connectors: {
             type: "straight",
             style: {
                 "stroke-width": 2,
                 "stroke": "#ccc"
             }
         }
    },

上記の部分で「chart: XXXX ...」と記載している部分がプロパティの内容になります。

そして、今回は下の様に変更したいと思っていますので。。。

1. 変更前
2. 変更後

上記コードの赤字の部分を下の様に変更しました。

levelSeparation: 50,

値を「150」〜「50」に変更しました。簡単に変更できました。やはりドキュメントは読んだ方が楽に作業が進みますな(笑)

しかし、クリックイベントの追加(addEventListener)が使えなく。。。クリックイベントの追加実装ができないため、Treant.jsを使用するのをやめることにします。。。。色々試したんだけどなぁ。。。

でわでわ。。。



Treant.js ダイヤグラムを作る 〜表にクリック時の処理を追加・ワンポイント〜

Treant.jsでのonClick追加方法

ツリーを表示した状態がこちら(Treant,jsでの描画)です。

そして、表示するのに以下の様にJSON形式でデータを設定します。

var config = {
    chart: {
        container: "#breakTree",
        levelSeparation:    150,
         siblingSeparation:  15,
         subTeeSeparation:   15,
         rootOrientation: "NORTH",

         node: {
             HTMLclass: "tennis-raw",
             drawLineThrough: false
         },
         connectors: {
             type: "straight",
             style: {
                 "stroke-width": 2,
                 "stroke": "#ccc"
             }
         }
    },

    nodeStructure: {
        //image: "./img/Lv0-1_創造実行.png",
        text: {id: "Ob0", name: "Lv0:最終目標" },
        children: [
            {
                text: {id: "Ob1", name: "Lv1:具現化項目A" },
                children: [
                    {text: {id: "Ob4", name: "Lv2:実行項目A-1"}},
                    {text: {id: "Ob5", name: "Lv2:実行項目A-2"}},
                    {text: {id: "Ob6", name: "Lv2:実行項目A-3"}}
                ]
            },
            {
                text: {id: "Ob2", name: "Lv1:具現化項目B" },
                children: [
                    {text:{id: "Ob7", name: "Lv2:実行項目B-1"}},
                    {text: {id: "Ob8", name: "Lv2:実行項目B-2"}},
                    {text: {id: "Ob9", name: "Lv2:実行項目B-3"}}
                ]
            },
            {
                text: {id: "Ob3", name: "Lv1:具現化項目C" },
                children: [
                    {text: {id: "Ob10", name: "Lv2:実行項目C-1"}},
                    {text: {id: "Ob11", name: "Lv2:実行項目C-2"}},
                    {text: {id: "Ob12", name: "Lv2:実行項目C-3"}}
                ]
            },
        ]
    }
};

ここまでの実装で上の画像の様に表示されます。実際のソースはGitにアップしてあります。

本題

ここで、画面を表示するときに以下の様なコードを記述します。

var diagram = new Treant(config);

この部分を以下の様に修正します。

var diagram = new Treant(config, callBack
    , document.getElementById("対象のタグID"));

そして、上記の「callBack」関数を定義します。

function callBack(treeObject) {
   treeObject.nodeDB.db[0].childAt(0)
         .nodeDOM.onclick = function(a) { console.log(a);};
}

この様な形でクリックした時のコールバック関数を実装することができます。

 

そして、もう1つ

stackOverflowを参照しました。設定データにコールバックを設定できる様です。

var config = {
   chart: "#ダイヤグラムを作成する要素のID",
   callback: {
      // ここに処理を記載する
   },

細かいところは、調査中です。

でわでわ。。。



JavaScript 連想配列 〜連想配列の初期化方法・ワンポイント〜

JavaScript(JS)による連想配列の初期化

var resoHairetu = [ key1: "値1", key2: "値2" ... ];

値の取得方法

rensouHairetu.key1;
rensouHairetu.key2;

作成した連想配列

/** 目標ブレークツリーの作成 */
var imageMap = {'1': "1_創造実行.png"
    , '2': "2学習習得.png"
    , '3': "3_生活習慣.png"
    , 'A': "A_デザイン_アート.png"
    , 'B': "B_音楽.png"
    , 'C': "C_ファッション.png"
    , 'D': "D_Sports.png"
    , 'E': "E_WebPrograming.png"
    , 'F': "F_園芸_農業.png"
    , 'G': "G_車_バイク.png"
    , 'H': "H_ゲーム.png"
    , 'I': "I_学問.png"
    , 'J': "J_占い_スピリチュアル.png"
    , 'K': "K_アニメ_漫画.png"
    , 'L': "L_グルメ_料理.png"
    , 'M': "M_ホビー.png"
    , 'a': "a_成果物_実物.png"
    , 'b': "b_日記_ノート_ドキュメント.png"
    , 'c': "c_資格_免許.png"
    , 'd': "d_仕組み_ネットワーク.png"
    , 'e': "e_コミニティ.png"
    , 'f': "f_貯金_ポートフォリオ.png"
    , 'g': "g_コレクション.png"
};


コンソール表示するときの呼び出し方

console.log(imageMap['a']);

余談

イメージファイル名をキー(ID)から取得する処理を作成中だったのでメモがてらにコマンドプロンプトでファイル名の一覧を取得する方法を記載いたします。

  1. イメージファイルのあるディレクトリに移動する
    「cd 移動したいディレクトリのパス」
    「ls」→現在いるディレクトリのファイルを一覧する

これでコピペできます。

ちなみに、ウィンドウズの場合は「dir」コマンドにオプション「/B」をつけて、「dir /B」と入力してやればおっけ〜。

でわでわ。。。