- ベストアンサー
外部CSVをサイトに読み込み表示できるでしょうか？また値によって背景色を変えるということは可能でしょうか？
外部にあるCSVをサイトに読み込んで表示するということは可能でしょうか？ またCSVを行単位で読み込み、その値によって背景色を自動で変えるということは可能でしょうか？ JavaScript初心者です。どうかご指導宜しくお願いいたします。ｍ＜_ _＞ｍ CSV例 ------------------------ 1行目 +10 2行目 -15 3行目 +5 4行目 0 表示例 ------------------------- http://farm4.static.flickr.com/3266/3116370342_2d0374218e_m.jpg 値（＋）: 背景（青） 値（－）: 背景（赤） 値（0）: 背景（黒）
- meet88
- お礼率83% (20/24)
- JavaScript
- 回答数14
- ありがとう数19
- みんなの回答 （14）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
こんどはPHP? <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>TEST</title> <style type="text/css"> .ctype0 { background-color:#e8e; width:100px; height:32px; font-size:24px; color:black; text-align:right; } .ctype1 { background-color:#bbb; width:100px; height:32px; font-size:24px; color:black; text-align:right; } .ctype2 { background-color:#8cc; width:100px; height:32px; font-size:24px; color:black; text-align:right; } </style> <body> <table><tr> <?php $openfile = file_get_contents('test.csv'); $csv_gyo = split("\n", $openfile); foreach( $csv_gyo as $a ){ $v = intval($a); if( $v<0 ){ $css='ctype0';} elseif ( $v>0 ){ $css='ctype2';} else { $css='ctype1'; } echo "<td class=\"$css\">$a</td>"; } ?> </tr></table>
その他の回答 (13)
サーバーがPHPをサポートしてないとか・・・ CSVを忘れて、小さなところから始めてみてはどうでしょう？ <html> <style> .ctype0{font-size:50em} </style> <body> <div id="css0"></div> <script> document.getElementById('css0').innerHTML = 'abcdefg'; document.getElementById('css0').className = 'ctype0'; </script>
No10とNo11で動くと思うのですが・・・
<div id="css0"></div> として スクリプトから document.getElementById('css0').innerHTML = 'abcdefg'; で<div></div>の中に文字列が挿入 document.getElementById('css0').className = 'ctype0'; にするとスタイルが変えられます PHPでやるなら、そちらへどうぞ！
お礼
ご返答ありがとうございます。 しかしどう書いたら動くのか全くわからずギブアップです。 ＞<div id="css0"></div> ＞として ＞スクリプトから ＞document.getElementById('css0').innerHTML = 'abcdefg'; ＞で<div></div>の中に文字列が挿入 ＞document.getElementById('css0').className = 'ctype0'; ＞にするとスタイルが変えられます <body>や<head>の中のにいろいろ置き方を試しましたがダメでした。 document.getElementByIdについて調べてもしているのですが理解できずにいます。 ご教授していただいたjavascriptを動かす知識がなく、どすることもできず 別な方法も探すしかなく、PHPでのCSV読み込みを見つけましたが これも、背景色の設定で立ち止まってしまいまいた。 手の打ちようがなくなりました。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>TEST</title> <script type="text/javascript" src="prototype.js"></script> <style type="text/css"> .ctype0 { background-color:#e8e; width:100px; height:32px; font-size:24px; color:black; text-align:right; } .ctype1 { background-color:#bbb; width:100px; height:32px; font-size:24px; color:black; text-align:right; } .ctype2 { background-color:#8cc; width:100px; height:32px; font-size:24px; color:black; text-align:right; } </style> <body> <h4>どうであれタグにIDをふり、それに代入する</h4> 例えば<span id="csv0"></span>とか<span id="csv1"></span>にして後から代入する <hr> <table> <tr><td id="csv2"></td><td>こんなのとか</td></tr> <tr><td id="csv3"></td><td>こんなのとか</td></tr> </table> <hr> <table> <tr><td id="csv4"></td><td id="csv5"><td id="csv6"><td id="csv7"><td id="csv8"><td id="csv9"></tr> <tr><td id="csv10"></td><td id="csv11"><td id="csv12"><td id="csv13"><td id="csv14"><td id="csv15"></tr> </table> <p> なんとなく、ずるいような感じだけど・・・。 </p> <script type="text/javascript"> if( buf = getFileCSV( 'test.csv' ) ) { data = buf.split("\n"); for( var i=0, m=data.length; i<m; i++){ var e=document.getElementById('csv'+i); if(e) { with( e ){ innerHTML = ((data[i]>0)?'+':'')+data[i]; className = data[i]<0? 'ctype0':(data[i]>0?'ctype2':'ctype1'); } } } } function getFileCSV( fileName ){ var ret = ''; new Ajax.Request( fileName + '?d='+(new Date).getTime(), { method:"get", asynchronous : false, onSuccess:function(o){ret=o.responseText;}}); return ret; } </script> 思っていることを、伝えることは難しいものです。 できる限り推測して理解してあげようと回答者の方々は考えていると 思いますが、「度が過ぎる」と思うラインが私には存在します。 もともと、完成版に近いような、コードを書くこと（丸投げ）を 嫌う人が多くいます。でも、自分が勉強する過程で参考になったのは コピペしてまさに動くコードでした。なのでできるだけ動くものを 書きたいと思っています。そして「（最初は）解説はしない」です。 ＞何時間かCSSの設定を書き足して背景の大きさを変えようとしているのですがどうしてもフォントの大きさに比例した程度にしかできません。 というのがありました。そこまでやれるのなら、その過程でやっている ことを見せてくださいね！ そこから私が学ぶこともあったりします。 自分なりに質問に答え、勉強している身なので間違いがあると思います。 鵜呑みにはしないようにしてください。
お礼
内容から、取り組み方に至るまでのご指導、大変にありがとうございます。 私自身あまりにも恥ずかしい試行錯誤のレベルなので、自分のやっている過程を上げると愛想をつかされてしまう部分もあるのではないかと心配していました。 早速実行しようと試みていますが ＞どうであれタグにIDをふり、それに代入する の理解につまずいています。 CSVのデータにIDをふるものかと解釈し 値の前にIDなる物をふってみました。 例えば1 ----------- id=1 -5 id=2 10 id=3 -3 例えば２ --------------- 1 -5 2 10 3 -3 例えば２ --------------- 1,-5 2,10 3,-3 結果、IDのつもりが値としてそのまま読み込まれて終わりました。 全くとんちんかんな勘違いをしていると思います。
補足
私なりに別の方法も探してみました。PHPを使うやり方です。 CSVの読み込みまでは以下でいけるのですが、値によって背景色を変えるというところがわかりません。PHPでそこまで出来るのかわかりませんが、何か良い方法があればご指導お願いいたします。ｍ＜_ _＞ｍ <html> <head> <?php $openfile = file_get_contents('test.csv');//CSVの読み込み $csv_gyo = split("\n", $openfile); ?> </head> <body> <td width="100" height="30" valign="middle"> <?php echo "<TABLE>"; echo "<TR><TD>".$csv_gyo[0]."</TD</TR>";//１行目の表示 echo "</TABLE>"; ?> </td> </body> </html>
>一行の値を背景中央、ボーダー無しで表示し１ユニットとして考えられれば一番かと思っています。サイト上では、列、行に複数並べますが、もしHTML上でユニットとしてレイアウトできるようであれば自由度は高いのかとも 意味がわかりません。 ユニットって何？ まだHTMLで書いてくれたほうが、もしくは理想を画像に してくれたほうが理解しやすい。 CSVのデータを表にするのではないの？
お礼
pipiさん 仕事で出ており返答遅くなって申し訳ありません。ｍ＜_ _＞ｍ 表示の仕方はページによって異なり、何タイプかあるのです。 http://farm4.static.flickr.com/3128/3119619839_f3a029172f.jpg?v=0 http://farm4.static.flickr.com/3124/3120447738_e25880b163.jpg?v=0 http://farm4.static.flickr.com/3127/3120447750_a20b9ce202.jpg?v=0 個別にてCSVの任意行を指定して表示できれば、HTML上でレイアウトし表にできるのかと考えた次第です。 http://farm4.static.flickr.com/3223/3120447730_8442034604.jpg?v=0
cssの設定は<tr>に対して設定しています。 希望のものを実現するには、<td>に対して行うように変更しなければなりません。 もしくは、<colgroup>を<table>の後につけるようにするか・・ 微妙だな～。 レコードの項目はどうなってるの？１つだけ？ それとも、1個目は、左寄せ。２個目は右寄せとか？ 個別にするの？ ちと面倒だなぁ～まぁいずれ日があけてからね
お礼
一行の値を背景中央、ボーダー無しで表示し１ユニットとして考えられれば一番かと思っています。 サイト上では、列、行に複数並べますが、もしHTML上でユニットとしてレイアウトできるようであれば自由度は高いのかとも・・・不可能でしょうか？ ＞cssの設定は<tr>に対して設定しています。 ＞希望のものを実現するには、<td>に対して行うように変更しなければなりません。 全体的に変えないといけないのですね。重ねてお手数をかけることになってしまいます 私はど素人ゆえに、ちょっとした変更でも、勝手が大幅に変わってくるといった要領が見えないでおります。 ご教授を頂きながら、即座に察せられない不器用さ、誠に恐縮しております。m<_ _>m
うんだべぇ～ えがったべぇ～！^^; csvの指定行ですが、一度で全行読み込むことしかできないかも？ すでにdata[x]で指定行のレコードの読み出しができます。
お礼
data[x]が指定行だったんですね！ありがとうございます＾＾ これで、やりたい事の基本的な動作は得られたと思います。 あとはCSSの設定をして、サイトへの埋め込みという段階になるのかと思います。 何時間かCSSの設定を書き足して背景の大きさを変えようとしているのですが どうしてもフォントの大きさに比例した程度にしかできません。 背景の横幅、縦幅、センター出しなどは、どのように書けば適切なのでしょうか 度々ながら、ご教授の程よろしくお願いいたします。ｍ＜_ _＞ｍ
prototype.jsの入手先 http://www.prototypejs.org/download
お礼
pipiさん 本当にありがとうございますｍ＜_ _＞ｍ 試してみたところ、出てきました！！ 全く諦めかけていたところだったので、なおさら感動しました（泣） IEでもFirefoxでもChromeでも表示されました！ これからCSSをいじってみます。 ちなみに、CSVの指定行を読み込むということは可能でしょうか？
訂正。 <div id="tb"></tb> を <div id="tb"></div> に。 prototype.jsでAjaxを使用。CSVファイルはtab区切り "'とかは未処理。レコードの第一項目を判定基準に CSSを決定。ハードルは高い？がんばって！
お礼
pipiさん 記述の方、大変ありがとうございますｍ＜_ _＞ｍ 質問してはじめてわかったのですが、ただでさえ難しいレベルの事であり、ドベの初心者の私には雲を掴むぐらいのことだというのがわかりました。 テストしてみたいのですが、私のレベルではまずprototype.jsの書き方がわからなくて（汗） Ajaxという単語は聞いたことがあるというぐらいで、内容は未知との遭遇といった感じです。 こんな私の為に、わざわざ記述までしていただけた事に感謝いたします。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>TEST</title> <script type="text/javascript" src="prototype.js"></script> <style type="text/css"> .ctype0 { background-color:#fdd; } .ctype1 { background-color:#ddd; } .ctype2 { background-color:#ddf; } </style> <body> <div id="tb"></tb> <script type="text/javascript"> var html ='<table border="1">', buf, data, fd=[],css; if( buf = getFileCSV( 'test.csv' ) ) { data = buf.split("\n"); for( var i=0, m=data.length; i<m; i++){ fd = data[i].split("\t"); css = fd[0]<0? 'ctype0':(fd[0]>0?'ctype2':'ctype1'); html+='<tr class="'+css+'">'; for( var j=0,n=fd.length; j<n; j++) html+='<td>'+fd[j]+'</td>'; html+='</tr>'; } html+='</table>'; document.getElementById('tb').innerHTML = html; } function getFileCSV( fileName ){ var ret = ''; new Ajax.Request( fileName + '?d='+(new Date).getTime(), { method:"get", asynchronous : false, onSuccess:function(o){ret=o.responseText;}}); return ret; } </script>
- 1
- 2
お礼
pipiさん ご回答ありがとうございます。ｍ＜_ _＞ｍ ご教授して頂いた以下で、CSVの行を読み込み、サイト上で横一列に表示される形まできました。値による背景色の変更も機能しています！もう一歩まできました。(今まで私はDOCTYPEの宣言が間違っていたようです） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <head> <title>TEST</title> <style type="text/css"> .ctype0 { background-color:#e8e; width:100px; height:32px; font-size:24px; color:black; text-align:right; } .ctype1 { background-color:#bbb; width:100px; height:32px; font-size:24px; color:black; text-align:right; } .ctype2 { background-color:#8cc; width:100px; height:32px; font-size:24px; color:black; text-align:right; } </style> </head> <body> <table><tr> <?php $openfile = file_get_contents('test.csv'); $csv_gyo = split("\n", $openfile); foreach( $csv_gyo as $a ){ $v = intval($a); if( $v<0 ){ $css='ctype0';} elseif ( $v>0 ){ $css='ctype2';} else { $css='ctype1'; } echo "<td class=\"$css\">$a</td>"; } ?> </tr> </table> </body> </html> ---------------------------------------------------- あとは、CSVの指定行のみの表示となりますが 上記の記述に以下を書き加えると、サイト上でその部分の表示はabcdefgと表示されるだけとなってしまします。 CSVの指定行の表示はどうやったらいいのでしょうか・・ <div id="css0"></div> <script> document.getElementById('css0').innerHTML = 'abcdefg'; document.getElementById('css0').className = 'ctype0'; </script>
補足
ご教授頂いたことを参考に、未熟ながらも私なりに試行錯誤し、これでいけました。 _pipi_さん今まで本当にありがとうございます。感謝感激です（泣） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <head> <title>TEST</title> <style type="text/css"> .ctype0 { background-color:#e8e; width:100px; height:32px; font-size:24px; color:black; text-align:right; } .ctype1 { background-color:#bbb; width:100px; height:32px; font-size:24px; color:black; text-align:right; } .ctype2 { background-color:#8cc; width:100px; height:32px; font-size:24px; color:black; text-align:right; } </style> </head> <?php $openfile = file_get_contents('test.csv'); $csv_gyo = split("\n", $openfile); ?> <body> <table><tr> <td> <?php if( $csv_gyo[0]<0 ){ $css='ctype0';} elseif ( $csv_gyo[0]>0 ){ $css='ctype2';} else { $css='ctype1'; } echo"<td class=\"$css\">".$csv_gyo[0]."</td>";//1行目 ?> </td> </tr></table> </body> </html>