csvファイルを読み込み、該当項目をhtmlに表示する方法

下記のようなcsvファイルがサーバ上にあり、毎日最新情報に更新されます。
サーバ上の同階層にあるHTMLページに、csvファイルの一部に該当する項目を
表示したいのですが、どのようにしたら実現できるのかわかりません…。
どうか助けてください。よろしくお願いいたします。

■csvファイル（data.csv）
種類,国,売上目標,売上実績,前年売上
りんご,国内,100,90,80
バナナ,国内,100,80,90
りんご,海外,100,110,100
バナナ,海外,100,50,80

■HTMLページ(index.html)
売上達成率【国内】りんご90％ （前年比+10） | バナナ80%（前年比-10）
売上達成率【海外】りんご110％（前年比+10）| バナナ50%（前年比-30）

※マイナスになっている場合は赤字にしたいです。

No.9 ベストアンサー 回答者： fji 回答日時： 2017/09/12 01:35

No.5&6です。

何も表示されなかったとのことですので、
試しにfc2にアップロードしてみましたので、下記URLでも表示されないでしょうか。

https://fjicode.web.fc2.com/gooqa/9928341/index. …

もし上記サイトでうまく表示されましたら、上記サイトのソース表示から取得した方が手っ取り早いかもしれません。

この回答へのお礼

ありがとうございます！
作っていただいたもので表示することができました！
サーバーの影響なのか、shift-jisで読み込む指定のところでエラーが発生してると表示されたので、そこを削ってみたら表示することができました！
本当にありがとうございます！
とても助かりました！！！

お礼日時：2017/09/13 19:37

No.8 回答者： fujillin 回答日時： 2017/09/11 09:46

こんにちは

すでに回答が何種類かでていますので、参考までに。

サーバ側で読み込んで編集して出力するか、あるいはcsvファイルであればクライアント側（javascript利用）で読み込んで表示する方法とが考えられます。
javascriptの場合は、同一ドメインという制限がありますが、それに関しては問題はなさそうですね。

いずれの方法をとるにしても、あまりお詳しくは無いように見受けられますので、ライブラリ化されているものを利用するのが比較的簡単ではないかと思います。
検索すればたくさん見つかるはずですので、ご自身でも探してみると良いと思いますが、以下はその一例です。（javascriptのカテゴリなのでそちらを中心に・・）

1）csvを読み込むjavascriptライブラリ
http://papaparse.com/
配列データとして読み込むだけの機能ですが、その後の処理や表示は自分で自由に行うことになります。

2）csvを読み込んでtable表示するjavascriptライブラリ
http://jsgt.org/lib/jquery/plugin/csv2table/v002 …
https://github.com/danieldickison/js-csv-viewer
http://square-bracket.com/openjs
読み込んだcsvをそのままtable表示するものです。
ページネーションやソーティング、検索（フィルタリング）などの機能を備えたものもあります。
最初のものでは色を変えて表示する例（ご質問とは条件は違いますが）などもサンプルとして載せられているので、参考になるかも知れません。
三番目のものはjsonデータの読み込みのようです。

3）同様のphpのライブラリ
http://www.phpgrid.org/
機能的には2）と同様と思います

この回答へのお礼

参考URL教えてくださり、ありがとうございます！
ライブラリ化されてるもの、ありがたいです！
教えていただいた参考ページをみながら、応用してできないか試してみます！！！
皆さま本当に、ありがとうございます！

お礼日時：2017/09/12 00:57

No.7 回答者： zircon3 回答日時： 2017/09/11 08:54

No.4です。

> イメージはYahooファイナンス（下記URL）にアクセスした時に、日経平均株価がリアルタイムで表示されるように、
> サイトにアクセスした時に最新の売り上げ情報を地域別、売り物別に表示させたいと思っています。

No.2とNo.4ではご質問のタイトルにある「リアルタイム」という点についてはあえて触れなかったのですが、別途存在する（であろう）売り上げ集計システムと参照用に新規に作成するWebシステムの機能の間のインターフェースをファイルで行う、、、とした瞬間にリアルタイム性は無くなっています。
ファイル（今回お考えなのはCSVファイル）は恐らく一定時間間隔で作成されますからその間隔ごとのデータでしかありません。

それと一般にインターネットアプリケーションは「端末側からサーバに対して要求を行い、サーバがその要求に則した応答を返す」という仕組みで出来ています。
ですので最も簡単なのはHTMLの画面内にJavascriptなどを用いて「サーバーに対し一定間隔で最新情報を取りに行く」という仕掛けです。証券会社の株価表示のように売買が成立する都度情報を表示する仕組みも出来ますが、Webシステムの開発に関する知識や情報ならびに経験をお持ちでない方が勉強して開発するというののは大変失礼ながら無理があると考えます。
やるとすれば「端末側からサーバに対して要求を行い、サーバがその要求に則した応答を返す」という仕組みまででしょう。


で。

> 目的は、社内だけで使っているサイトに、日々の売り上げ状況を見える化するのが目的です。

ここにもファイルを使ったインタフェースとする事への問題があります。

まず、利用者数（＝端末数）は何人程度を想定されますか？　5人とか10人といったていっでしょうか？
アクセスがあるたび、手動で該当ページへのアクセスを行った場合と、一定間隔で最新情報を反映したページを表示しようとアクセスした場合、アクセスされるたびにファイルを読み込みその内容のHTMLを生成して送出する、、、という処理を行います。複数の端末から頻繁にアクセスが有る場合、通常のファイルではI/Oの負荷が高くなる可能性があります。Webサーバーのハードウェア仕様とファイルの大きさや数にもよりますが。

もう一つ非常に基本的な事ですがファイル名はどのように決めるのでしょう？
固定ですと最新の情報を入れたファイルの作成中にアクセスが来た際の考慮がWebサーバー側のプログラムに必要です。例えばファイルのオープンに失敗したら一瞬待って再度オープン要求を行うといった、
また、年月日＋時間や通し番号などを含んだファイル名の場合は一番大きいファイル名を調べてその内容を取得するといった考慮が必要なのと、どんどん作られるファイルを誰がどのようなタイミングで消すのかを考え、その機能を盛り込むことも必要です。


なお。。。

> サイトのindex.htmlと同じ場所にその日の売り上げ情報のcsvファイルが置かれるので、

この仕様はいくら社内のシステムでも乱暴すぎます。。。(^^;
端末側からは見えない（＝アクセス出来ない）場所に置くのが筋です。


最後に。
別途存在する（であろう）売り上げ集計システムはデータベースに売り上げ情報を格納しているのであれば、新規にお考えのWebシステムの機能はそのデータベースを参照して画面表示を行うのが本来の姿です。

参考まで。

この回答へのお礼

色々教えてくださりありがとうございます！
色々な課題があり、私にはかなり難しいのだとわかりました…。
知識も考えも足らず、お恥ずかしい限りです(ノ_＜)
教えていただいたアドバイスと課題を元に、もう一度再検討したいと思います。

お礼日時：2017/09/12 00:45

No.6 回答者： fji 回答日時： 2017/09/10 19:17

No5です。

うっかり売上実績と前年比の数値参照をミスっていました。
売上達成率を表示しているfor分の中身を下記に差し替えることで直るかと思います。

______for (var country in datas) {
________output += '<li class="tr"><li>売上達成率【' + country + '】';
________var nCount = 0;
________for (var item in datas[country]) {
__________if (nCount == 0) output += '<li>|';
__________output += '<li>' + item + datas[country][item][1] + '％';
__________var diff = datas[country][item][1] - datas[country][item][2];
__________output += '<li>（前年比<span class="' + (diff >= 0 ? "" : "red") + '">' + (diff >= 0 ? "+" : "") + diff + '</span>）';
__________nCount++;
________}
______}

この回答へのお礼

サンプル作っていただきありがとうございます！！！
そしてすみません…作っていただいたものを自分のサーバに置いてみたのですが、なぜか何も表示されませんでした…。（；＿；）
文字コードも合ってるようなのですが原因がわからず、せっかく作っていただいたのに申し訳ありません…。

お礼日時：2017/09/12 00:40

No.5 回答者： fji 回答日時： 2017/09/10 19:01

下記にJavaScriptのみでcsvファイルの読み込み＆html表示のサンプルを作ってみました。

HTMLファイルの文字コードはUTF-8を前提とし、csvファイルはShift-JISとして読み込んでいます。
またブラウザのセキュリティ上、ローカルPC上では通常では確認できないため、一度サーバ上にアップしてご確認してください。
※インデント調整に"_"を入れているため、半角スペース等に置換してください。

<!doctype html>
<html lang="ja">
<head>
__<meta charset="UTF-8">
__<style>
____ul {list-style-type:none; display:table; margin:0px; padding:0px;}
____li {display:table-cell; margin:0px; padding:0px;}
____li.tr {display:table-row;}
____.red {color:red;}
__</style>
__<script>
____function makeXHR() {
______xhr = null;
______if (!xhr) {try{xhr = new ActiveXObject('Microsoft.XMLHTTP');}catch(e){}}
______if (!xhr) {try{xhr = new ActiveXObject('Msxml2.XMLHTTP');}catch(e){}}
______if (!xhr) {try{xhr = new XMLHttpRequest();}catch(e){}}
______return xhr;
____}
____function onLoadText(text) {
______var lines = text.split("\n");
______var datas = [];
______for (var i = 1; i < lines.length; i++) {
________var cells = lines[i].split(",");
________if (cells.length < 5) continue;
________if (!datas[cells[1]]) datas[cells[1]] = [];
________datas[cells[1]][cells[0]] = [cells[2], cells[3], cells[4]];
______}
______var output = '<ul>';
______for (var country in datas) {
________output += '<li class="tr"><li>売上達成率【' + country + '】';
________var bFirst = true;
________for (var item in datas[country]) {
__________if (!bFirst) output += '<li>|';
__________bFirst = false;
__________output += '<li>' + item + datas[country][item][2] + '％';
__________var isPlus = datas[country][item][3] >= datas[country][item][4];
__________output += '<li>（前年比<span class="' + (isPlus ? "" : "red") + '">' + (isPlus ? "+" : "-") + datas[country][item][1] + '</span>）';
________}
______}
______output += '</ul>';
______document.getElementById("result").innerHTML = output;
____}
____function loadFile(fName) {
______var xhr = makeXHR();
______xhr.open("GET", fName, true);
______xhr.overrideMimeType('text/plain; charset=Shift_JIS');
______xhr.onreadystatechange = function() {if ((xhr.readyState == 4) && (xhr.status % 200 == 0))onLoadText(xhr.responseText);}
______xhr.send(null);
____}
____function addEvent(elm, evName, func)__{try {elm.addEventListener(evName, func, false);} catch(e) {elm.attachEvent("on" + evName, func);}}
____addEvent(window, 'load', function(){loadFile("data.csv");});
__</script>
</head>
<body>
__<section id="result"></section>
</body>
</html>

No.4 回答者： zircon3 回答日時： 2017/09/10 16:52

N0.2です。

> HTMLはわかるのですが、CGIプログラムの知識はなく…私にはハードルが高そうですね…

そうですね。
Webブラウザに表示した画面上で利用者が入力した情報がsubmit動作によってWebサーバ側送られ、指定されたWebサーバ上のプログラムでそれを受け取って処理し、処理結果を示す画面（のHTML）を標準出力する、、、というのがCGIの基本です。
プログラムの実装言語としてPHPを進められる方が多いですが、個人的にはプログラム固有の処理とその処理結果のHTMLの出力処理を（ソースコード上で）視覚的に明確に区別して理解するという点で全くの初心者が利用するのには少々抵抗があります。確かに簡便で便利ではあるのですが。。。

「目的とすることを短時間に実現できればそれに越したことは無い」、「仕掛けや理屈をしっかり理解するより開発の敷居を低くすることが最優先」という点ではよいかと思います。

あと、この機能の利用形態がわかりませんが、ご自身のパソコンでご自身がちょっと使えればよい、、、ということでしたらJavascriptでもローカルファイルの入力は出来ますので、そういった用途でしたらJavascriptを勉強されればよいと思います。b
ご質問に「csvファイルがサーバ上にあり・・・」とありましたのでNo.2では「JavascriptはWebブラウザ上で実行されるので・・・」としました。
その場合は以下のような解説が参考になるでしょう。

https://www.html5rocks.com/ja/tutorials/file/dnd …
http://uxmilk.jp/11586

参考まで。

この回答へのお礼

アドバイスありがとうございます。
参考urlまで調べていただけて、とてもうれしいです。

目的は、社内だけで使っているサイトに、日々の売り上げ状況を見える化するのが目的です。
イメージはYahooファイナンス（下記URL）にアクセスした時に、日経平均株価がリアルタイムで表示されるように、
サイトにアクセスした時に最新の売り上げ情報を地域別、売り物別に表示させたいと思っています。
https://stocks.finance.yahoo.co.jp/stocks/detail …

サイトのindex.htmlと同じ場所にその日の売り上げ情報のcsvファイルが置かれるので、
そのデータを使ってページに表示できないかと思い質問させていただきました。
最悪手作業するしかないかと思うのですが、私が休みの日とか困ってしまうので、なんとか自動化できないかと思った次第です…。

別途友人に下記のjqueryを使ってcsvを直接表にする案ももらいました。これで希望の項目だけを抜き出して表示できたら最高なのですが…
そんな都合よいサンプルないですよね・・・。
http://jsgt.org/lib/jquery/plugin/csv2table/v002 …

お礼日時：2017/09/10 17:35

No.3 回答者： whtg001 回答日時： 2017/09/10 15:02

実現可能という方向性だけの回答ですが。

。

PHPでやれば難しくはないですがPHPを少しはさわらないとできません。
今回は、HTMLを作るのがPHPの仕事です。
PHPはブラウザを端末にするプログラミング言語と思えばいいです。
関数型言語ですので使える関数を探し出すことが必要。

考え方は、ファイルを1行ずつ読み込んでテーブルタグのなかにいれてプリント（画面表示）するだけです。色付けもHTMLでできますよね。

①ファイルを開く。
②1行読む。
③HTMLを作成してプリント
④おわりかどうか判定。終わりで無いなら②
⑤テーブルを閉じる。ファイルを閉じる。

index.htmlをindex.phpにしたくないからiframeで読み込むというのもできます。
また、サーバーの設定で.htmlをphpとして実行も出来ます。（セキュリティーの為）

http://php.net/manual/ja/index.php

HTMLさえわかっているなら数日以内に出来ると予想します。

この回答へのお礼

PHPで実現できると教えてくださりありがとうございます。
HTMLはわかるのですが、PHPはまったくわからないので、数日中にできるとよいのですが…。不安です。
でも、今月中にはできるようにしないといけないので、教えていただいたページを読んでなんとかできるよう頑張ります！

お礼日時：2017/09/10 15:29

No.2 回答者： zircon3 回答日時： 2017/09/10 14:52

Javascriptのカテゴリーに投稿されていますが、JavascriptはWebブラウザ上で実行されるので書かれていることは出来ません。

Webサーバー上に特定のあるいはWebブラウザ上でユーザが指定したCSVファイルを読み込み、その内容を含んだHTMLを送出するプログラムを作成して配置することが必要です。

作成するプログラムの開発言語はC言語でもPerlでもJavaでも何でも結構です。なお、作成したプログラムをWebサーバー上の何処に配置するかはWebサーバーの設定次第です。

そういった事に関する知識や情報を全くお持ちではない場合、ハードルはかなり高いと思って下さい。
最低限HTMLとCGIプログラムの知識が必要です。ネット上のサイトで勉強する方法もありますが。。。
むかぁ～しから知っているのは以下ですが内容が古いですね。でも今も使える情報ではあります。

http://www.tohoho-web.com/
http://www.scollabo.com/banban/

本当はHTMLとCGIに関する入門書を読まれた方がよいですね。
あとCGIを作るには環境が必要です。その辺も上記のWebサイトや入門書で触れているはずですが。

参考まで。

この回答へのお礼

Javascriptでできるものと思っていました…カテゴリ違いで申し訳ありません。
HTMLはわかるのですが、CGIプログラムの知識はなく…私にはハードルが高そうですね…
でも、頑張って勉強したいと思います。
参考ページもありがとうございます。

お礼日時：2017/09/10 15:25

No.1 回答者： LEVELUP100 回答日時： 2017/09/10 14:44

質問がざっくりとしすぎている気がします。

　開発言語は何を採用するのでしょう？

＞※マイナスになっている場合は赤字にしたいです。
　方法はもちろんありますが、色つきですか。

　赤色で表示するのは後回しにして。

　ネット検索をしてみたところ、これを参考にできそうなＷＥＢページを見つけてきました。


＞CSV形式のファイルを読み込み、テーブル（表）で表示
＞http://alphasis.info/2013/02/php-gyakubiki-csv-t …


＞簡単に変換できる！PHPでCSVファイルを読み込む方法【初心者向け】
＞https://techacademy.jp/magazine/12298

この回答へのお礼

ありがとうございます。
質問がざっくりですみません・・・開発言語わからなかったのですが、みなさんが教えてくれたPHPを勉強したいと思います。
参考WEBページもありがとうございます。

お礼日時：2017/09/10 15:21