アプリでもっと教えて！goo

タイムマシーンがあったら、過去と未来どちらに行く？

外部CSVをサイトに読み込み表示できるでしょうか？また値によって背景色を変えるということは可能でしょうか？

解決済

質問者：meet88
質問日時：2008/12/18 02:31
回答数：14件

外部にあるCSVをサイトに読み込んで表示するということは可能でしょうか？
またCSVを行単位で読み込み、その値によって背景色を自動で変えるということは可能でしょうか？
JavaScript初心者です。どうかご指導宜しくお願いいたします。ｍ＜_ _＞ｍ

CSV例
------------------------
1行目 +10
2行目 -15
3行目 +5
4行目 0

表示例
-------------------------
http://farm4.static.flickr.com/3266/3116370342_2 …

値（＋）: 背景（青）
値（－）: 背景（赤）
値（0）: 背景（黒）

この質問への回答は締め切られました。

質問の本文を隠す

回答 (14件中1～10件)

ベストアンサー優先
最新から表示
回答順に表示

No.11ベストアンサー

回答者： _pipi_
回答日時：2008/12/20 16:01

こんどは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>

- 0
- 件

No.14

回答者： _pipi_
回答日時：2008/12/21 08:37

サーバーが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>

この回答への補足

ご教授頂いたことを参考に、未熟ながらも私なりに試行錯誤し、これでいけました。
_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>

補足日時：2008/12/22 04:21

- 0
- 件

この回答へのお礼

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>

お礼日時：2008/12/21 22:46

No.13

回答者： _pipi_
回答日時：2008/12/21 08:30

No10とNo11で動くと思うのですが・・・

- 0
- 件

No.12

回答者： _pipi_
回答日時：2008/12/20 16:04

<div id="css0"></div>

として
スクリプトから
document.getElementById('css0').innerHTML = 'abcdefg';
で<div></div>の中に文字列が挿入
document.getElementById('css0').className = 'ctype0';
にするとスタイルが変えられます

PHPでやるなら、そちらへどうぞ！

- 0
- 件

この回答へのお礼

ご返答ありがとうございます。
しかしどう書いたら動くのか全くわからずギブアップです。

＞<div id="css0"></div>
＞として
＞スクリプトから
＞document.getElementById('css0').innerHTML = 'abcdefg';
＞で<div></div>の中に文字列が挿入
＞document.getElementById('css0').className = 'ctype0';
＞にするとスタイルが変えられます　

<body>や<head>の中のにいろいろ置き方を試しましたがダメでした。
document.getElementByIdについて調べてもしているのですが理解できずにいます。

ご教授していただいたjavascriptを動かす知識がなく、どすることもできず
別な方法も探すしかなく、PHPでのCSV読み込みを見つけましたが
これも、背景色の設定で立ち止まってしまいまいた。
手の打ちようがなくなりました。

お礼日時：2008/12/20 21:29

No.10

回答者： _pipi_
回答日時：2008/12/20 09:14

<!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の設定を書き足して背景の大きさを変えようとしているのですがどうしてもフォントの大きさに比例した程度にしかできません。

というのがありました。そこまでやれるのなら、その過程でやっている
ことを見せてくださいね！　そこから私が学ぶこともあったりします。
自分なりに質問に答え、勉強している身なので間違いがあると思います。
鵜呑みにはしないようにしてください。

この回答への補足

私なりに別の方法も探してみました。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>

補足日時：2008/12/20 13:39

- 0
- 件

この回答へのお礼

内容から、取り組み方に至るまでのご指導、大変にありがとうございます。
私自身あまりにも恥ずかしい試行錯誤のレベルなので、自分のやっている過程を上げると愛想をつかされてしまう部分もあるのではないかと心配していました。

早速実行しようと試みていますが
＞どうであれタグに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のつもりが値としてそのまま読み込まれて終わりました。
全くとんちんかんな勘違いをしていると思います。

お礼日時：2008/12/20 10:32

No.9

回答者： _pipi_
回答日時：2008/12/19 08:30

>一行の値を背景中央、ボーダー無しで表示し１ユニットとして考えられれば一番かと思っています。

サイト上では、列、行に複数並べますが、もしHTML上でユニットとしてレイアウトできるようであれば自由度は高いのかとも

意味がわかりません。
ユニットって何？
まだHTMLで書いてくれたほうが、もしくは理想を画像に
してくれたほうが理解しやすい。
CSVのデータを表にするのではないの？

- 0
- 件

この回答へのお礼

pipiさん　仕事で出ており返答遅くなって申し訳ありません。ｍ＜_ _＞ｍ

表示の仕方はページによって異なり、何タイプかあるのです。
http://farm4.static.flickr.com/3128/3119619839_f …
http://farm4.static.flickr.com/3124/3120447738_e …
http://farm4.static.flickr.com/3127/3120447750_a …

個別にてCSVの任意行を指定して表示できれば、HTML上でレイアウトし表にできるのかと考えた次第です。
http://farm4.static.flickr.com/3223/3120447730_8 …

お礼日時：2008/12/19 20:57

No.8

回答者： _pipi_
回答日時：2008/12/19 00:56

cssの設定は<tr>に対して設定しています。

希望のものを実現するには、<td>に対して行うように変更しなければなりません。
もしくは、<colgroup>を<table>の後につけるようにするか・・
微妙だな～。
レコードの項目はどうなってるの？１つだけ？
それとも、1個目は、左寄せ。２個目は右寄せとか？
個別にするの？
ちと面倒だなぁ～まぁいずれ日があけてからね

- 0
- 件

この回答へのお礼

一行の値を背景中央、ボーダー無しで表示し１ユニットとして考えられれば一番かと思っています。
サイト上では、列、行に複数並べますが、もしHTML上でユニットとしてレイアウトできるようであれば自由度は高いのかとも・・・不可能でしょうか？

＞cssの設定は<tr>に対して設定しています。
＞希望のものを実現するには、<td>に対して行うように変更しなければなりません。

全体的に変えないといけないのですね。重ねてお手数をかけることになってしまいます
私はど素人ゆえに、ちょっとした変更でも、勝手が大幅に変わってくるといった要領が見えないでおります。
ご教授を頂きながら、即座に察せられない不器用さ、誠に恐縮しております。m<_ _>m

お礼日時：2008/12/19 02:42

No.7

回答者： _pipi_
回答日時：2008/12/18 22:41

うんだべぇ～　えがったべぇ～！^^;

csvの指定行ですが、一度で全行読み込むことしかできないかも？
すでにdata[x]で指定行のレコードの読み出しができます。

- 0
- 件

この回答へのお礼

data[x]が指定行だったんですね！ありがとうございます＾＾

これで、やりたい事の基本的な動作は得られたと思います。
あとはCSSの設定をして、サイトへの埋め込みという段階になるのかと思います。

何時間かCSSの設定を書き足して背景の大きさを変えようとしているのですが
どうしてもフォントの大きさに比例した程度にしかできません。

背景の横幅、縦幅、センター出しなどは、どのように書けば適切なのでしょうか
度々ながら、ご教授の程よろしくお願いいたします。ｍ＜_ _＞ｍ

お礼日時：2008/12/19 00:15

No.6

回答者： _pipi_
回答日時：2008/12/18 18:42

prototype.jsの入手先

http://www.prototypejs.org/download

- 0
- 件

この回答へのお礼

pipiさん　本当にありがとうございますｍ＜_ _＞ｍ
試してみたところ、出てきました！！

全く諦めかけていたところだったので、なおさら感動しました（泣）
IEでもFirefoxでもChromeでも表示されました！

これからCSSをいじってみます。
ちなみに、CSVの指定行を読み込むということは可能でしょうか？

お礼日時：2008/12/18 21:20

No.5

回答者： _pipi_
回答日時：2008/12/18 14:52

訂正。

<div id="tb"></tb>
を
<div id="tb"></div>
に。

prototype.jsでAjaxを使用。CSVファイルはtab区切り
"'とかは未処理。レコードの第一項目を判定基準に
CSSを決定。ハードルは高い？がんばって！

- 0
- 件

この回答へのお礼

pipiさん　記述の方、大変ありがとうございますｍ＜_ _＞ｍ

質問してはじめてわかったのですが、ただでさえ難しいレベルの事であり、ドベの初心者の私には雲を掴むぐらいのことだというのがわかりました。
テストしてみたいのですが、私のレベルではまずprototype.jsの書き方がわからなくて（汗）
Ajaxという単語は聞いたことがあるというぐらいで、内容は未知との遭遇といった感じです。

こんな私の為に、わざわざ記述までしていただけた事に感謝いたします。

お礼日時：2008/12/18 18:39

1 2 次の回答→

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

質問する（無料）

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

Excel（エクセル）条件付き書式の設定方法を教えて下さい。 2 2023/04/14 18:12
Windows 95・98 タスクバーの背景の色だけを変えたい。 2 2022/07/13 14:44
Excel（エクセル）こんなことできますか？例えば、sheetに貼り付けた図形のタイトルを、セルA1の文字で表示する。 5 2022/04/22 15:25
PHP htmlで複数の個数入力欄を表示させるには 1 2022/09/20 03:11
その他（ブラウザ） zoomのバーチャル背景が選べない 4 2022/12/08 12:38
その他（Microsoft Office）エクセル表の移動 2 2023/04/05 20:29
Windows 10 zoomで自分の顔の背景 3 2023/06/07 22:34
その他（Microsoft Office）マクロについて教えてください、、 5 2023/06/06 22:07
一眼レフカメラカメラ初心者です。 SONYのフルサイズカメラを購入し、レンズはTAMRONの20-40 F2.8の 5 2023/03/26 22:22
Visual Basic（VBA）昨日、質問した件『VBA にて、条件付き書式で背景色を設定しているセルの範囲で、背景色付きのセルをカ 4 2022/04/07 14:39

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

ページトップ

おすすめ情報

質問する（無料）

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

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

おすすめ情報