外部のデータファイルの読み込み方法は？

質問

個人的にホームページを公開しています。

今までデータとなる情報を JavaScript のデータ(配列)として
用意して document.write( 文字列 ); で HTML タグを出力して
使っています。でもデータの部分だけを外部のデータファイルに
分離して JavaScript などで読み込む方法を探しています。

外部のデータファイルはテキストで csv 形式として保存する予定です。
この csv 形式のデータファイルを JavaScript で読み込む方法はありますか？

今までは JavaScript のデータを配列情報として <LINK> でスクリプトを
読み込んで処理しています。今回は csv 形式のデータを読み込みたいです。
JavaScript で出来ますか？

外部データファイルの読み込み方法を教えて下さい。
読み込む方法があるかどうかも知らないため、この辺もはっきりさせたいです。
よろしくお願いいたします。

回答No.5

神崎 渉瑠（@taloo） · ベストアンサー

>ANo.4
> var LF = String.fromCharCode(10);
> var tabText = text.split(LF);
CSVファイルの改行コードはWindows形式(CRLF)ではなくUNIX形式(LF)にしてます？

ちなみにJavaScriptでは\nと書けばCR/CRLF/LFの全部に対応します（ブラウザがうまいことやってくれる）ので、
"\n"で分割すれば行ごとに取り出せます。

var tabText = text.split('\n');

> for (var i=0; i<tabText.length-1; i++){
-1してるのって何かあるんでしょうか？
最終行が空行で表示しない様に、だったら
if(i==tabText.length&&!tabText[i])continue;
の方がいいと思いますが。。。

VBScriptはWindowsIEしか対応していません。
環境が固定化されるCなどで作るアプリケーションとは異なり、
一般向けのウェブページではさまざまな環境で使われることを想定し、様々なブラウザで動作するJavaScriptが使われます。
業務用や会社内で使うものなどでしたら、ブラウザをIE限定にして、VBScriptもアリかと思います。
資料の少なさがネックになるかも知れませんが、、、JavaScriptに対してVBScriptの資料はMSDNくらいしかないですし。

> C言語で簡単に CGI を作れそうなので JavaScript よりもこの方法で
> csv 形式のデータを読み込んだほうがすべてのブラウザで表示が
> 可能になりますかね？
それでいいならいわゆるAJaxよりも対応ブラウザは増やせますし、その方が確実だと思います。
csv形式のファイルではなく、JavaScriptのコードにして、文字列や配列にしたデータにするだけ。
Netscape4.8～IE5.5より前の常套手段です。

data.csv
アカウント１,名前１,メール１
アカウント２,名前２,メール２

こういうデータの場合
data.js
var data=[
'アカウント１,名前１,メール１'
,'アカウント２,名前２,メール２'
];
という内容、ファイル名にして
<script type="text/javascript" src="data.js"></script>
と書いておけばdataという変数（配列）で受け取れます。

これと同じものをCGIアプリケーションから
Content-Type: application/x-javascript の指定で出力して
<script type="text/javascript" src="data.cgi"></script>
とすればいいだけです。（SSIは必要ありません）

アカウント１,名前 １,"コンマ ',' が含まれるデータ "

こんな行とか、エスケープ処理に注意すれば、テキストファイルの変換はそれほど難しいものではないと思います。

CSVファイルを作成せずに上記の様なJavaScriptのコードで保存できれば、読み込むときにCGIを使わなくても、src="data.js"でいいです。

Oh-OrangeさんってC/C++カテゴリで回答側の人ですよね。
> (1)訪問カウンタを自作するにはどのような知識が必要か？
> (2)CGI のカテゴリですがどんな言語を使うのか？
> (3)訪問カウンタを自作するに当たりその仕組みを知りたいです。
> (4)訪問カウンタを自作するに当たり参考URLなども教えて下さい。
この程度のWindowsアプリとCGIアプリの違いを調べるだけなら
BBSなんかで質問するより、検索する方が１０秒もあればよっぽど詳しい情報が得られると思いますが？

長文失礼。

お礼

長文での回答有り難うございます。

＞VBScriptはWindowsIEしか対応していません。
私も HTML ソースでは VBScript は使っていません。
＞VBScriptの資料はMSDNくらいしかないですし。
同感。でもあまり使いませんので OK かな。
Java Script はほんの一部だけ機能を使っています。
＞それでいいならいわゆるAJaxよりも対応ブラウザは増やせますし、その方が確実だと思います。
この方法が対応ブラウザが増やせるのは嬉しいです。
でもサーバーの CGI/SSI 情報を確認したらセキュリティの問題から
Perl 言語しか使えませんでした。残念です。
別カテゴリの質問より Perl 言語をお勉強する決意をしました。

＞CSVファイルを作成せずに上記の様なJavaScriptのコードで保存できれば、
＞読み込むときにCGIを使わなくても、src="data.js"でいいです。
今回はこの方法を使います。
良く考えたら JavaScript は HTML ソース内のどの場所でも
<script>～</script> とすれば読み込めるですよね。
この方法は思いつきませんでした。

問題解決:
『データ・テーブルの配列』と『表示コード』の２つにスクリプトを
分割してすべて JavaScript の機能で処理するようにします。
もともと JavaScript で var table[][]={ … }と定義していますので
データ部を外部ファイルに書き出すだけのなで簡単かな。

余談:
＞Oh-OrangeさんってC/C++カテゴリで回答側の人ですよね。
たまには C/C++ カテゴリでも質問していますよ。過去5回ほど。
＞この程度のWindowsアプリとCGIアプリの違いを調べるだけなら
＞BBSなんかで質問するより、検索する方が１０秒もあればよっぽど
＞詳しい情報が得られると思いますが？
確かにそうですね。
10年前(Win95)から HTML/CGI の名前だけ聞いた事があったのですが
実際の動き(仕組み)などには興味がなかったのでそのまま無知状態が
続きました。ホームページは去年の9月に開設したばかりです。

あと質問しながらネット検索していたら確かにいっぱい詳しい情報を
見つけました。Perl でのカウンタ作成を多数ね。今年の1月にも探して
見つかりましたが Perl が分からなかったので意味不明で挫折しました。
どうやら最近は CGI を作る/動かすには Perl 言語が一番良い(多い)のね。

良いアイディアを有り難うございました。

回答No.7

steel_gray

#2補足→
Ajaxを勉強するなら。
http://www.openspc2.org/JavaScript/Ajax/index.html
一応CSVファイルも処理できますが日本語を含む場合には色々面倒があります。
データをXML化するならかなり便利になります。

#4補足→
SSIで(C#で書いた)スクリプトが実行できる環境なら
CSVファイルからテーブルを起こすスクリプトを書いてインクルードするのが楽だし閲覧者を選ぶ事もなくなりますね。

お礼

回答を有り難うございます。

＞Ajaxを勉強するなら。
＞http://www.openspc2.org/JavaScript/Ajax/index.html
このリンク先をざっと見ましたがライブラリ、サンプルなどがあり
『Ajax』をお勉強するならここからスタートしようと思います。

＞SSIで(C#で書いた)スクリプトが実行できる環境なら
サーバーの利用情報を確認したら Perl 以外の言語は使えなかったです。
C/C++ よりは .NET の C# や Java の方が Web では良さそうですね。

今回は今まで使っていたスクリプトをデータ部と表示部の２つに
分離して JavaScript の機能だけで処理する方法を取ります。
分割するアイディアが私には思い浮かびませんでしたので。

Perl 言語の後に Ajax もちょっとずつ学んで行こうと思っています。
リンク情報を有り難うございました。

回答No.6

神崎 渉瑠（@taloo）

> if(i==tabText.length&&!tabText[i])continue;
このforループの中で i==tabText.length これはないですね。オオボケ(笑)

> こんな行とか、エスケープ処理に注意すれば、テキストファイルの変換はそれほど難しいものではないと思います
Perlにはこういう処理を行うモジュール（ライブラリ）があるんで、関数を呼び出せば一発なんですが、
C/C++ではあるのかどうか、、、

参考URL：

http://www.boutell.com/cgic/

お礼

Perl 言語はこれからお勉強し始めます。
手始めに『とほほのperl入門』から始める予定です。
http://www.tohoho-web.com/wwwperl.htm
良い Perl 言語のお勉強サイトがあれば教えて欲しいです。
ネット検索するとそれなりに見つかりますがお勧めはどれかな。

回答No.4

leap_day

こんにちは

残念・・・閏『日』の方ですね（＾＾）

ちょっと探してみました
http://www.openspc2.org/reibun/JavaScript_technique/sample/11_etc/002/index.html

でも今度はIEで出来ないみたいです（＞＜）
サイトでは出来てるみたいなんですけど何ででしょ？
なのでこんな風にしてみました

<script type="text/javascript" src="prototype.js"></script>

<script language="javascript"><!--
window.onload = function(){
var msec = (new Date()).getTime();
new Ajax.Request("data.csv", {
method: "get",
parameters: "cache="+msec,
onSuccess:function(httpObj){
var text = httpObj.responseText;
var LF = String.fromCharCode(10);
var tabText = text.split(LF);
var tbl = "<table border='1'>";
for (var i=0; i<tabText.length-1; i++){
var cText = tabText[i].split(",");
tbl += "<tr>";
for (var j=0; j<cText.length; j++){
tbl += "<td>"+cText[j]+"</td>";
}
tbl +="</tr>";
}
tbl += "</table>";
$("tableData").innerHTML = tbl;
},
onFailure:function(httpObj){
$("tableData").innerHTML = "エラーで読み込めませんでした";
}
});
}
//--></script>
<div id="tableData"></div>

<!--[if IE]>
<object id="myDatabase" classid="CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83">
<param name="DataURL" value="data.csv">
<param name="UseHeader" value="true">
</object>

<table datasrc="#myDatabase" border="1">
<thead>
<tr><th>ID：INT</th><th>UserName</td><td>Age:INT</td></tr>
</thead>
<tbody>
<tr>
<td><span datafld="ID"></span></td>
<td><span datafld="UserName" dataformatas="html"></span></td>
<td><span datafld="Age"></span></td>
</tr>
</tbody>
</table>

<![endif]-->

実行するにはprototype.jsが必要になります
http://www.prototypejs.org/download

ファイル名変更は
6行目
new Ajax.Request("data.csv", {
<!--[if IE]>下2行目
<param name="DataURL" value="data.csv">
のdata.csvになります

<tr><th>ID：INT</th><th>UserName</td><td>Age:INT</td></tr>の部分は自動で変わらないので手動で変える必要があります

上の部分だけで出来るようだったら<!--[if IE]>～<![endif]-->を削除してください

お礼

leap_day さん。
再回答有り難うございます。
JavaScript のソースを見ましたが難しいです。

＞でも今度はIEで出来ないみたいです（＞＜）
これは困るよ。
普段は IE6.0 を主要ブラウザとして使っているので。
自分で見れないと困ります。

基本的にホームページにはプログラミングの資料データを
見る目的で公開していますので。

今思ったのですが CGI を自作して SSI と組み合わせれば外部の
ファイルからデータを読み込んで HTML で表示できませんかね？

CGI カテゴリで訪問カウンタについて質問中で紹介されたリンクより
C言語で簡単に CGI を作れそうなので JavaScript よりもこの方法で
csv 形式のデータを読み込んだほうがすべてのブラウザで表示が
可能になりますかね？出来る？この方法なら。どうなの？
知っていたら教えて！

回答No.3

leap_day

こんにちは

使用したことはないのでサイト紹介のみになりますが・・・

http://www.openspc2.org/reibun/javascript/table/010/index.html
http://www.openspc2.org/reibun/javascript/table/011/index.html

お礼

こんにちは。leap_day(閏年？)さん。
新情報を有り難うございます。

一通り目を通した感想では IE のブラウザなら HTML のタグで
csv 形式のデータを表示可能なようですね。
また JavaScript を利用すればデータの一部を抽出も可能なようですね。
この情報を頼りにちょっとサンプルを作って試してみます。

他のブラウザでも上手く表示するには利用できそうに無いようなので
他のブラウザでもきちんと表示可能な方法(情報)をまたお待ちします。

『ajax』での方法もお待ちしています。
それではよろしくお願い致します。

回答No.2

yambejp

ajaxで処理してください

お礼

アドバイスを有り難うございます。

『ajax』でないと処理できませんか？
VBScript なら外部ファイルを読み込めると思います。
HTML でも使えた気がしますが『ajax』の方が良いですか？

私自身はあまり VBScript を HTML ソースに埋め込んで使っていません。
理由としては JavaScript の方が一般かと思いましてね。

これから『ajax』についてお勉強したいと思います。
分かりやすい Web 解説ページを知っていたら教えて下さい。
yambejp さんにおねだりします。何か紹介して。
お願いします。

回答No.1

kokorone

JavaScriptには、ファイルの入力（読み込み）機能は、ありません。

お礼

＞JavaScriptには、ファイルの入力（読み込み）機能は、ありません。
有り難うございます。
この回答ではっきりと確認できました。

それではどのようにすれば外部ファイルから読み込む事が出来ますか？
お時間がありましたら再回答をお待ちしています。