たからもののプログラムを他人になかなか紹介できない経験がありますか。それならばCodeFlowerでやってみましょう。以下はCodeFlowerの元家です。JSONデータを読み込んでd3ツールで可視化するやりかたです。
自分のほうは、それをベースにしてもうちょっと使いやすいものを改善してみました。
環境構築
tomcat789のいずれ＋jdk8以上にします。アプリは、以下のURLからダウンロードしてください。
https://github.com/efwGrp/qittaSamples
jdk15以上は追加jarが必要です。上記サイトから入手してWEB-INF/libに入れてください。
jsp説明
codeflower.jspには、elfinderのファイル管理を置いています。作成ボタンはjsイベントを実行します。※これだけです。
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="efw" uri="efw" %>
<!DOCTYPE HTML>
<HTML>
<HEAD>
<META HTTP-EQUIV="CONTENT-TYPE"CONTENT="TEXT/HTML;CHARSET=UTF-8">
<TITLE>efw Input Test</TITLE>
<!-- Efwクライアントの取り込み-->
<efw:Client lang="jp"/>
</HEAD>
<BODY>
<h1>世界に一つだけの花を作りましょう</h1>
<efw:elFinder home="upload" />
<br>
<button onclick="Efw('codeflower_create')">作成 & ダウンロード</button><br>
</BODY>
</HTML>
jsイベント説明
コメントで説明しますね。
var codeflower_create={};
codeflower_create.paramsFormat={};
codeflower_create.fire=function(params){
//再帰的にuploadファイルの中身を分析してJSONを作成する。
function getChildrenFromFolder(folder){
var lst=absfile.list(folder,true);
var ret=[];
for(var i=0;i<lst.length;i++){
var item=lst[i];
if(item.mineType=="directory"){
if (!item.isHidden)//非表示フォルダを対象しない
ret.push({"name":item.name,"children":getChildrenFromFolder(item.absolutePath)});
}else{
var size=Math.sqrt(item.length);//ファイルサイズの平方根の数字で画面の円の大きさを決める
var showSize=(item.length/1000).format("#,##0.0")+" kb";
ret.push({"name":item.name,"size":size,"showSize":showSize});
}
}
return ret;
}
//テンプレートを読む
var html=file.readAllLines("template/template.html","UTF-8");
//uploadフォルダの内容でJSONを作成
var json={"name":"root","children":getChildrenFromFolder(file.getStorageFolder()+"/upload")};
//テンプレート内容にJSONを代入する。
html=html.replace("{@@@@}",JSON.stringify(json));
//htmlファイルを作成する
file.writeAllLines("myflower.html",html,"UTF-8");
return (new Result())
.runat("body")
.attach("myflower.html")//ダウンロード
.deleteAfterDownload();//サーバファイルを削除
}
花を作る
プロジェクトフォルダをelFinderにドラッグ＆ドロップします。
作成ボタンを押して、ファイルが作成されます。
ファイルを開くと綺麗な花（アジサイか）が咲きますね！それぞれのプロジェクトはそれぞれのソースコード特徴で、「世界に一つだけの花」になりますよね。
一つずつの円をマウスで当たると名称とサイズを表示されます。URLはこちらです。
https://efwgrp.github.io/efw4_codeflower/efw4.X.html
利用するjsファイルは、WEB-INF/storage/template/template.htmlのテンプレートファイルに記載しています。それらのファイルは、サンプルフォルダから入手できます。
今回のサンプルは以下のリンクからダウンロードできます。