CSVデータをツリー表示させたい

Question

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

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

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

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

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

例
コード　　レベル　品名　　規格　・・・・　　　　コード　　　　　レベル　品名　　規格　・・・・　
1234　　　　1　　　AAA　　　aaa　　　　　　　-1234　　　　　　　1　　　　AAA　　　aaa
2345　　　　2　　　BBB　　　ｂｂｂ　　　　　　　　∟2345　　　　　2　　　　ＢＢＢ　　ｂｂｂ
3456　　　　3　　　CCC　　　ｃｃｃ　　　　　　　　　　∟3456　　　3　　　　ＣＣＣ　　ｃｃｃ
4567　　　　3　　　DDD　　　ｄｄｄ　　　　　　　　　　∟4567　　　3　　　　ＤＤＤ　　ｄｄｄ
5678　　　　3　　　EEE　　　ｅｅｅ　　　　　　　　　　 ∟5678　　　3　　　　ＥＥＥ　　ｅｅｅ
6789　　　　4　　　ＦＦＦ　　　ｆｆｆ　　　　　　　　　　　　　∟6789　 4　　　　ＦＦＦ　　 ｆｆｆ
7890　　　　3　　　ＧＧＧ　　ｇｇｇ　　　　　　　　　　 ∟7890　　　3　　　　ＧＧＧ　　ｇｇｇ

fujillin · Accepted Answer

ANo5です。＞ご推察の通り、自分の力量として、自作というのはハードルがかなり高いのです。スクリプトで処理する以上は、ある程度の理解は必要となります。ほとんど知らなくても使えるもの（=ライブラリ等）で、可能な範囲で我慢するか、少しだけ覚えるかのどちらかですね。読み込みからテーブル表示までを何らかのライブラリでできたとして、その後で表示だけ変える例をご参考までに。　・表の形式を標準的なテーブルにしていますが、　　実際の表示の構造と合わせる必要があります。　・便宜上ボタンのクリックで表示を変えるようにしてありますが、　　実装は表示後続けて処理することになるでしょう。 sample

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

← クリックで表示を変更

think49 · Answer

#1 の補足より。

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

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

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

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

# Re: fujimasa_3さん

ORUKA1951 · Answer

＞イチからＣＧＩを勉強しないといけないですね。。(^-^; 
ですね。Perlのライブラリを探してみると
CPAN CSV 処理 - Google 検索( https://www.google.co.jp/search?q=CPAN%20CSV%20%E5%87%A6%E7%90%86&ie=utf-8&oe=utf-8&hl=ja )
あなたの言われるとおり(^^)、
＞結構、需要はありそうな気もするのですが、
です。
　⇒Excel出力のCSV取込みから学ぶ4つのCPANモジュール( http://www.slideshare.net/AkabaneHiroyuki/perl-beginners10-20130927 )
　⇒【perlメモ】CSVファイルを簡単に処理できるCPANモジュールText::CSV_XS | KUMA TYPE( http://blog.kumacchi.com/2010/12/perlcsvcpantextcsv_xs.html )
　⇒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プログラムを動作させても良い。

fujillin · Answer

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

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

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

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

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

ORUKA1951 · Answer

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%84%E3%83%AA%E3%83%BC%E8%A1%A8%E7%A4%BA%20%E6%8E%B2%E7%A4%BA%E6%9D%BF%20CSV&ie=utf-8&oe=utf-8&hl=ja
　CGIの中では最も簡単な部類に属しますから、手始めにどうぞ・・・

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

ORUKA1951 · Answer

jquery(javascript)を使うのではなく、ちゃんとサーバー側でCGIプログラムを動作させて作成すべきです。javascriptはすべてのユーザーに有効なわけではない。
　ごく単純にCSVを配列、およびハッシュ(連想配列)に入れてHTMLを出力させればすむ事です。
　この場合、配列のハッシュかな
・CSV形式の行から値のリストを取り出す( http://www.din.or.jp/~ohzaki/perl.htm#CSV2Values )
　$DATA{'3'}=((3456,3,CCC,ｃｃｃ,・・・),(4567,3,DDD,ｄｄｄ・・・),以下略);
　@value = (1,2,3,4・・・);
あとは、while(@vlalue){}

think49 · Answer

#1 です。

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

# Re: fujimasa_3 さん

think49 · Answer

要件がニッチな分野ですので csv-parser だけ既存コードを利用して出力部分は自前実装するしかない気がします。
csv to array的なライブラリは私も作ったことがあります。
CSV を array 化した後に DOM 出力部のコードを書けば原理的には可能です。
http://vird2002.s8.xrea.com/javascript/rfc4180.html
# apos さんが提案している仕様が面白そうですが、まだ手をつけるに至ってなかったり…。
# http://d.hatena.ne.jp/babu_babu_baboo/20140929#c1412320759

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

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

# Re: fujimasa_3 さん

CSVデータをツリー表示させたい

ANo5です。

#1 の補足より。

この回答への補足

＞イチからＣＧＩを勉強しないといけないですね。

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

No.2です。

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

#1 です。

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

この回答への補足

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング