システムメンテナンスのお知らせ

業務で、WEBサイトにCSVデータを表示させたいと考えています。

CSVデータは、毎日更新されるもので、行数も日々変更されます。
項目の中に「レベル」という項目があり、この「レベル」の値を使って、
ツリー表示出来ないかと考えています。

希望としては、決められたフォルダに決められたファイル名で、
CSVデータを置けば、自動的にWEB上にツリー表示されるという
ことです。

J-query等で、これを実現出来るプラグインが無いか探しているのですが、
なかなか希望に合うものが見つからず、困っています。
(CSVをWEB表示するものは見つかるのですが、ツリー表示出来る
ものが見つかりません)

何か、良い方法があれば、ご教示頂けませんでしょうか?


コード  レベル 品名  規格 ・・・・    コード     レベル 品名  規格 ・・・・ 
1234    1   AAA   aaa       -1234       1    AAA   aaa
2345    2   BBB   bbb        ∟2345     2    BBB  bbb
3456    3   CCC   ccc          ∟3456   3    CCC  ccc
4567    3   DDD   ddd          ∟4567   3    DDD  ddd
5678    3   EEE   eee           ∟5678   3    EEE  eee
6789    4   FFF   fff             ∟6789  4    FFF   fff
7890    3   GGG  ggg           ∟7890   3    GGG  ggg

gooドクター

A 回答 (8件)

ANo5です。



>ご推察の通り、自分の力量として、自作というのはハードルがかなり高いのです。
スクリプトで処理する以上は、ある程度の理解は必要となります。
ほとんど知らなくても使えるもの(=ライブラリ等)で、可能な範囲で我慢するか、少しだけ覚えるかのどちらかですね。

読み込みからテーブル表示までを何らかのライブラリでできたとして、その後で表示だけ変える例をご参考までに。
 ・表の形式を標準的なテーブルにしていますが、
  実際の表示の構造と合わせる必要があります。
 ・便宜上ボタンのクリックで表示を変えるようにしてありますが、
  実装は表示後続けて処理することになるでしょう。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head><title>sample</title>
<meta http-equiv="Content-Script-Type" content="text/javascript">

<script type="text/javascript">
function change(tbl){
var bdy = tbl.getElementsByTagName("tbody")[0];
var i = 0, rw, cell, indent, pre;

while(rw = bdy.rows[i++]){
indent = +rw.cells[1].innerHTML;
if(indent){
indent--, pre = indent==0?"―":"∟";
} else {
indent = 0, pre = "";
}
cell = rw.cells[0];
cell.style.paddingLeft = indent*2.5 + "em";
cell.innerHTML = pre + cell.innerHTML;
}
}
</script>
</head>

<body>

<table id="hoge" border=1>
<thead><tr>
<th>コード</th><th>レベル</th><th>品名</th><th>規格</th>
</tr></thead>
<tbody>
<tr><td>1234</td><td>1</td><td>AAA</td><td>aaa</td></tr>
<tr><td>2345</td><td>2</td><td>BBB</td><td>bbb</td></tr>
<tr><td>3456</td><td>3</td><td>CCC</td><td>ccc</td></tr>
<tr><td>4567</td><td>3</td><td>DDD</td><td>ddd</td></tr>
<tr><td>5678</td><td>3</td><td>EEE</td><td>eee</td></tr>
<tr><td>6789</td><td>4</td><td>FFF</td><td>fff</td></tr>
<tr><td>7890</td><td>3</td><td>GGG</td><td>ggg</td></tr>
</tbody>
</table>

<div>
<p><input type="button" value="change"
onclick="change(document.getElementById('hoge'));this.disabled = 'disabled'">
← クリックで表示を変更
</div>

</body>
</html>
    • good
    • 0
この回答へのお礼

ありがとうございます!

>スクリプトで処理する以上は、ある程度の理解は必要となります。
>ほとんど知らなくても使えるもの(=ライブラリ等)で、可能な範囲で我慢するか、
>少しだけ覚えるかのどちらかですね。
はい、何とか少しでも理解しようとは思っています。
頂いたサンプルで、どんな処理が行われているかを理解出来るようにはなりたいですね。

自分でゼロから作り上げるのは、かなりハードルが高いですが、既にあるコードを
解読するのは、辞書(ネット検索)引きながらであれば、何とかなるかなと思いますので。

理想としては、下記サイトのようなツリーを実現したいと思っています。
(ネットで検索して、探り当てました。このプラグインを何とか使えればなと考えている
ところです)

http://www.webdlab.com/jquery/treemenu/

お礼日時:2014/12/12 15:07

#1 の補足より。



> レベルは、1の子が2、2の子が3、3の子が4...となります。
BBBがAAAの子であるとどう判断するのでしょうか。
- レベル1の品名が複数あったら、レベル2の品名に対してどうやって親を判定しますか。
- 直前のレベルの一つ少ない品名を親とするのでしょうか。直前にレベルの一つ少ない親がなかったらどうしますか。

ツリー化の構造をとるなら「レベル」ではなく「フルパス」が必要な気がします。
[AAA > BBB > CCC] のようなパス情報がCSVデータにあれば、ツリー化は容易でしょう。
手前味噌ですが、以下のように実装できます。

■実装の流れ
1. rfc4180.js ( http://vird2002.s8.xrea.com/javascript/rfc4180.h … ) でCSVを配列化
2. 配列からツリー構造を判断し、ツリー化ライブラリに情報を渡すコードを書く
3. jsTree ( http://www.jstree.com/ ) でツリー化

自作する場合は 2. が課題ですね。

# Re: fujimasa_3さん

この回答への補足

言葉足らずで申し訳ありません。

>BBBがAAAの子であるとどう判断するのでしょうか。
 BBBのレベルが2なので、自身より前にあるレベル1のAAAが親になります。

>- レベル1の品名が複数あったら、レベル2の品名に対してどうやって親を判定しますか。

 レベル1は、一つしかありません。
 1を頂点にして、順次下がっていきます。
 レベル2のBBBを例にとると、親はAAAでしかあり得ません。
 もっと下位のレベルを例に取った場合は、ご推察の通り自身の直前のレベルが一つ少ないものが
 親になります。

>- 直前のレベルの一つ少ない品名を親とするのでしょうか。直前にレベルの一つ少ない親がなかったらどうしますか。

 レベル3の上には、必ずレベル2はありますし、レベル4の上にはレベル3があります。
 例えばCCCもDDDもEEEもGGGもBBBが親です。
 FFFはEEEが親になります(BBBの孫ですね)。
 

補足日時:2014/12/12 10:42
    • good
    • 0

>イチからCGIを勉強しないといけないですね。

。(^-^;
ですね。Perlのライブラリを探してみると
CPAN CSV 処理 - Google 検索( https://www.google.co.jp/search?q=CPAN%20CSV%20% … )
あなたの言われるとおり(^^)、
>結構、需要はありそうな気もするのですが、
です。
 ⇒Excel出力のCSV取込みから学ぶ4つのCPANモジュール( http://www.slideshare.net/AkabaneHiroyuki/perl-b … )
 ⇒【perlメモ】CSVファイルを簡単に処理できるCPANモジュールText::CSV_XS | KUMA TYPE( http://blog.kumacchi.com/2010/12/perlcsvcpantext … )
 ⇒Text::CSV CSVの操作:CPANのお勉強( http://cpan.ti-da.net/e3707605.html )
 ⇒PerlでCSVを扱う – Text::CSV_XS | Smart( http://rfs.jp/sb/perl/11/perl_text_csv_xs.html )

 CPAN( http://ja.wikipedia.org/wiki/CPAN )というのは、Perlのモジュールの置き場でして、何かしたいときはここを探す。

 Perl( Perl - Wikipedia( http://ja.wikipedia.org/wiki/Perl )は、javascriptなどと異なり、とても自然言語に近く、書き方もいろいろある。(それを嫌う人も多いけど・・)
Text::CSV_XS で取り込んだデータを階層リストだろうがtableだろうが、好きなように出力できる。
 それを表示させるHTMLもそき煮から出力させるなり、サーバーが対応していればSSLでCGIプログラムを動作させても良い。
    • good
    • 0
この回答へのお礼

詳しくご案内頂きまして、ありがとうございます。

イチから学習しながら実装するのは、時間的に厳しいものがあるのですが、
今後の課題として、考えたいと思います。

お礼日時:2014/12/12 10:28

ANo3様がおっしゃるようにサーバサイドで処理してしまうのが一番確実な方法と思いますが、そういう事情でもなさそうなので…




>J-query等で、これを実現出来るプラグインが無いか探しているのですが
ANo1様がおっしゃるように、ピッタリのライブラリを探すのは難しいように思います。

なさりたいことは比較的簡単で、レベル欄の数に合わせて第1項目の表示をインデントすれば良いだけのように思われます。paddingやmarginを利用してセットしてあげれば実現できそうです。
レベルの上限がわかっているのなら、CSSで事前に用意しておいてクラス名で処理してあげても良いですね。
接頭辞的なキャラクタ(あるいは画像?)も同時に追加してあげればよろしいかと。


CSVの読み込みをどのようになさろうと計画しているのかはよくわかりませんが、スクリプトで処理するにしても、
 1)CSVの読み込み~表示までを自作する
 2)CSVの読み込みはライブラリを利用し、表示部分だけ自作
 3)CSVの読み込み~表示まではライブラリを利用し、後からインデントだけ修正する
といった方法が考えられるかと思います。
2)、3)は汎用的なライブラリが作成されていますので、利用しやすいものを選択して使えばよろしいでしょう。

比較的自作部分の少ない3)を例にとれば、読み込みと表示が終わった時点で、各行(表示がテーブルかどうか不明ですが)について上記のようなインデントの処理を繰り返してあげればよいことになります。
読み込み~表示のライブラリにいろいろな機能(並べ替えとか)が付いていたりすると、その操作後におかしなことになる可能性があるので、シンプルなものを選ぶ必要があるのと、生成される表(ではないかも)の構造を調べるという作業は発生しますが・・・
    • good
    • 0
この回答へのお礼

ありがとうございます。

ご推察の通り、自分の力量として、自作というのはハードルがかなり高いのです。

なので、出来るだけ自作の少ない3)を考えたいと思います(^-^;

(もしくは、ツリー表示をあきらめて、CSVデータをそのまま表示させるか。。)

お礼日時:2014/12/11 18:07

No.2です。


>比較的簡単に組み込めるJ-queryで、何とかならないかと
 jquey--javascriptより、テキスト処理が得意なPerlを使ったCGIのほうがはるかに楽だと思います。
>結構、需要はありそうな気もするのですが、技術的には難しい内容なのでしょうか?
 掲示板とか・・CGIで作られている簡易なものは、ほとんどが先の方法でつくられていると思います。
 さすがに、大きな物になるとMySQL/postgreSQLなどのデータベースとPHP(orPerl)などでしょうが、簡単なものはほとんどすべて、CSVないし、平(ひら)のリストからHTML書き出していますからですから・・
 文字通り、膨大なものがあるでしょう。
 CGI ツリー表示 掲示板 CSV
  https://www.google.co.jp/search?q=CGI%20%E3%83%8 …
 CGIの中では最も簡単な部類に属しますから、手始めにどうぞ・・・

 なお、サーバーとの通信を行なうことになりますからjqueryというよりAjax( http://ja.wikipedia.org/wiki/Ajax )と考えたほうが良いでしょう。
    • good
    • 0
この回答へのお礼

そうですか。。。

イチからCGIを勉強しないといけないですね。。(^-^;

お礼日時:2014/12/11 15:26

jquery(javascript)を使うのではなく、ちゃんとサーバー側でCGIプログラムを動作させて作成すべきです。

javascriptはすべてのユーザーに有効なわけではない。
 ごく単純にCSVを配列、およびハッシュ(連想配列)に入れてHTMLを出力させればすむ事です。
 この場合、配列のハッシュかな
・CSV形式の行から値のリストを取り出す( http://www.din.or.jp/~ohzaki/perl.htm#CSV2Values )
 $DATA{'3'}=((3456,3,CCC,ccc,・・・),(4567,3,DDD,ddd・・・),以下略);
 @value = (1,2,3,4・・・);
あとは、while(@vlalue){}
    • good
    • 0
この回答へのお礼

ご回答ありがとうございます。

一応、社内での使用なので、javascriptは有効ということを
前提にしても良いのかなと思ってます。

というか、CGIプログラムは、全く知識も無く素人なので、
比較的簡単に組み込めるJ-queryで、何とかならないかと
思った次第です。

結構、需要はありそうな気もするのですが、技術的には難しい
内容なのでしょうか?

お礼日時:2014/12/11 13:59

#1 です。



ツリー化は既存のライブラリを使えば、少しは楽を出来そうですね。
https://www.google.co.jp/search?q=javascript+tree

# Re: fujimasa_3 さん
    • good
    • 0

要件がニッチな分野ですので csv-parser だけ既存コードを利用して出力部分は自前実装するしかない気がします。


csv to array的なライブラリは私も作ったことがあります。
CSV を array 化した後に DOM 出力部のコードを書けば原理的には可能です。
http://vird2002.s8.xrea.com/javascript/rfc4180.h …
# apos さんが提案している仕様が面白そうですが、まだ手をつけるに至ってなかったり…。
# http://d.hatena.ne.jp/babu_babu_baboo/20140929#c …

それからツリー化を実装するにあたって、ツリー表示用の部品をAAにする方法と画像にする方法がありますね。
画像にするなら用意する手間がかなります。

> 項目の中に「レベル」という項目があり、この「レベル」の値を使って、ツリー表示出来ないかと考えています。
階層の閾値としては使えますが、親子関係を表す指標がなければ仕様として成り立たないと思います。
例えば、品名BBBはレベル2ですが、「品名BBBの親がどれになるのか」の判断基準が必要です。

# Re: fujimasa_3 さん

この回答への補足

ご回答ありがとうございます。

品名BBBの親は、品名AAAになります。
レベルは、1の子が2、2の子が3、3の子が4...となります。

「csv-parser」の言葉の意味自体が分からないレベルです。。orz

補足日時:2014/12/11 13:53
    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!


人気Q&Aランキング