質問
外部のデータファイルの読み込み方法は?
- 投稿日時:2007/09/18 10:44
個人的にホームページを公開しています。
今までデータとなる情報を JavaScript のデータ(配列)として
用意して document.write( 文字列 ); で HTML タグを出力して
使っています。でもデータの部分だけを外部のデータファイルに
分離して JavaScript などで読み込む方法を探しています。
外部のデータファイルはテキストで csv 形式として保存する予定です。
この csv 形式のデータファイルを JavaScript で読み込む方法はありますか?
今までは JavaScript のデータを配列情報として <LINK> でスクリプトを
読み込んで処理しています。今回は csv 形式のデータを読み込みたいです。
JavaScript で出来ますか?
外部データファイルの読み込み方法を教えて下さい。
読み込む方法があるかどうかも知らないため、この辺もはっきりさせたいです。
よろしくお願いいたします。
回答 (7件)
- 最新から表示
- 回答順に表示
- ベストアンサーのみ表示
No.7
- 回答日時:2007/09/19 11:46
#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 では良さそうですね。
今回は今まで使っていたスクリプトをデータ部と表示部の2つに
分離して JavaScript の機能だけで処理する方法を取ります。
分割するアイディアが私には思い浮かびませんでしたので。
Perl 言語の後に Ajax もちょっとずつ学んで行こうと思っています。
リンク情報を有り難うございました。
No.6
- 回答日時:2007/09/19 07:46
> if(i==tabText.length&&!tabText[i])continue;
このforループの中で i==tabText.length これはないですね。オオボケ(笑)
> こんな行とか、エスケープ処理に注意すれば、テキストファイルの変換はそれほど難しいものではないと思います
Perlにはこういう処理を行うモジュール(ライブラリ)があるんで、関数を呼び出せば一発なんですが、
C/C++ではあるのかどうか、、、
この回答へのお礼
Perl 言語はこれからお勉強し始めます。
手始めに『とほほのperl入門』から始める予定です。
http://www.tohoho-web.com/wwwperl.htm
良い Perl 言語のお勉強サイトがあれば教えて欲しいです。
ネット検索するとそれなりに見つかりますがお勧めはどれかな。
No.5ベストアンサー20pt
- 回答日時:2007/09/19 01:30
>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
アカウント1,名前1,メール1
アカウント2,名前2,メール2
こういうデータの場合
data.js
var data=[
'アカウント1,名前1,メール1'
,'アカウント2,名前2,メール2'
];
という内容、ファイル名にして
<script type="text/javascript" src="data.js"></script>
と書いておけばdataという変数(配列)で受け取れます。
これと同じものをCGIアプリケーションから
Content-Type: application/x-javascript の指定で出力して
<script type="text/javascript" src="data.cgi"></script>
とすればいいだけです。(SSIは必要ありません)
アカウント1,名前 1,"コンマ ',' が含まれるデータ "
こんな行とか、エスケープ処理に注意すれば、テキストファイルの変換はそれほど難しいものではないと思います。
CSVファイルを作成せずに上記の様なJavaScriptのコードで保存できれば、読み込むときにCGIを使わなくても、src="data.js"でいいです。
Oh-OrangeさんってC/C++カテゴリで回答側の人ですよね。
> (1)訪問カウンタを自作するにはどのような知識が必要か?
> (2)CGI のカテゴリですがどんな言語を使うのか?
> (3)訪問カウンタを自作するに当たりその仕組みを知りたいです。
> (4)訪問カウンタを自作するに当たり参考URLなども教えて下さい。
この程度のWindowsアプリとCGIアプリの違いを調べるだけなら
BBSなんかで質問するより、検索する方が10秒もあればよっぽど詳しい情報が得られると思いますが?
長文失礼。
この回答へのお礼
長文での回答有り難うございます。
>VBScriptはWindowsIEしか対応していません。
私も HTML ソースでは VBScript は使っていません。
>VBScriptの資料はMSDNくらいしかないですし。
同感。でもあまり使いませんので OK かな。
Java Script はほんの一部だけ機能を使っています。
>それでいいならいわゆるAJaxよりも対応ブラウザは増やせますし、その方が確実だと思います。
この方法が対応ブラウザが増やせるのは嬉しいです。
でもサーバーの CGI/SSI 情報を確認したらセキュリティの問題から
Perl 言語しか使えませんでした。残念です。
別カテゴリの質問より Perl 言語をお勉強する決意をしました。
>CSVファイルを作成せずに上記の様なJavaScriptのコードで保存できれば、
>読み込むときにCGIを使わなくても、src="data.js"でいいです。
今回はこの方法を使います。
良く考えたら JavaScript は HTML ソース内のどの場所でも
<script>~</script> とすれば読み込めるですよね。
この方法は思いつきませんでした。
問題解決:
『データ・テーブルの配列』と『表示コード』の2つにスクリプトを
分割してすべて JavaScript の機能で処理するようにします。
もともと JavaScript で var table[][]={ … }と定義していますので
データ部を外部ファイルに書き出すだけのなで簡単かな。
余談:
>Oh-OrangeさんってC/C++カテゴリで回答側の人ですよね。
たまには C/C++ カテゴリでも質問していますよ。過去5回ほど。
>この程度のWindowsアプリとCGIアプリの違いを調べるだけなら
>BBSなんかで質問するより、検索する方が10秒もあればよっぽど
>詳しい情報が得られると思いますが?
確かにそうですね。
10年前(Win95)から HTML/CGI の名前だけ聞いた事があったのですが
実際の動き(仕組み)などには興味がなかったのでそのまま無知状態が
続きました。ホームページは去年の9月に開設したばかりです。
あと質問しながらネット検索していたら確かにいっぱい詳しい情報を
見つけました。Perl でのカウンタ作成を多数ね。今年の1月にも探して
見つかりましたが Perl が分からなかったので意味不明で挫折しました。
どうやら最近は CGI を作る/動かすには Perl 言語が一番良い(多い)のね。
良いアイディアを有り難うございました。
No.4ベストアンサー10pt
- 回答日時:2007/09/18 13:13
こんにちは
残念・・・閏『日』の方ですね(^^)
ちょっと探してみました
http://www.openspc2.org/reibun/JavaScript_techni …
でも今度は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
- 回答日時:2007/09/18 11:13
こんにちは
使用したことはないのでサイト紹介のみになりますが・・・
http://www.openspc2.org/reibun/javascript/table/ …
http://www.openspc2.org/reibun/javascript/table/ …
この回答へのお礼
こんにちは。leap_day(閏年?)さん。
新情報を有り難うございます。
一通り目を通した感想では IE のブラウザなら HTML のタグで
csv 形式のデータを表示可能なようですね。
また JavaScript を利用すればデータの一部を抽出も可能なようですね。
この情報を頼りにちょっとサンプルを作って試してみます。
他のブラウザでも上手く表示するには利用できそうに無いようなので
他のブラウザでもきちんと表示可能な方法(情報)をまたお待ちします。
『ajax』での方法もお待ちしています。
それではよろしくお願い致します。
No.2
- 回答日時:2007/09/18 11:07
ajaxで処理してください
この回答へのお礼
アドバイスを有り難うございます。
『ajax』でないと処理できませんか?
VBScript なら外部ファイルを読み込めると思います。
HTML でも使えた気がしますが『ajax』の方が良いですか?
私自身はあまり VBScript を HTML ソースに埋め込んで使っていません。
理由としては JavaScript の方が一般かと思いましてね。
これから『ajax』についてお勉強したいと思います。
分かりやすい Web 解説ページを知っていたら教えて下さい。
yambejp さんにおねだりします。何か紹介して。
お願いします。
No.1
- 回答日時:2007/09/18 10:56
JavaScriptには、ファイルの入力(読み込み)機能は、ありません。
この回答へのお礼
>JavaScriptには、ファイルの入力(読み込み)機能は、ありません。
有り難うございます。
この回答ではっきりと確認できました。
それではどのようにすれば外部ファイルから読み込む事が出来ますか?
お時間がありましたら再回答をお待ちしています。
このQ&Aを見た人はこんなQ&Aも見ています
- 4HTMLタグが書かれた外部ファイルを、HTMLファイルに読込みたい
- 5JavaScriptでデータファイル読み込み・保存
- 6リンク集をCSVファイルで管理し、JavaScriptで表示
- 7HTMLで外部ファイルの読み込み
- 8JavaScriptで他のファイルのhtmlソースを読み込むには?
- 9配列をテキストデータから読み込む方法
- 10外部CSVをサイトに読み込み表示できるでしょうか?また値によって背景色を変えるということは可能でしょうか?
- 11HTMLページに外部テキストファイルを取り込むには?
- 12ローカルのtest.txtを1行ずつ読み込みたい
- 13Java Scriptによるテキストエリア内での改行
- 14Javascriptで引数の参照渡しか戻り値を複数取得したい
- 15テキストファイルやcsvファイルで読み込んだデータを使ってjavascriptで処理する方法
- 16 これの意味教えて下さい。
- 17JavaScript で動的に <SELECT>の<OPTION>を追加したい
- 18プルダウンメニューのvalue値取得について
- 19テキストの読み込み、表示
- 20<div align="center">を使わずにCSSだけでセンター表示する方法?
注目の記事
ONE PIECEの魅力に迫る!
映画「ONE PIECE FILM Z」公開記念企画!知らない人も知ってる人もきっと楽しめるONE PIECEの魅力をQ&Aでまとめました。
このQ&Aを見た人がよく見るQ&A
このカテゴリで人気のQ&Aランキング
- 4hrefとonclickでのリンクの移動につ...
- 5onchangeイベントを強制的に発生させる
- 6ボタンを動的にdisabledさせたいの...
- 7confirmのOK・キャンセルを押した後...
- 8複数のsubmitボタンで押されたボタ...
- 9プルダウンメニューのvalue値取得に...
- 10Null またはオブジェクトではありま...
- 11ブラウザのウィンドウサイズに合わ...
- 12onClickがinput type="image"だとで...
- 13.txtファイルの読み込み
- 14【FORM】 リンク文字で submit したい
- 15return trueとreturn falseの用途・...
- 16onClickに複数の関数を挿入する方法
- 17インラインフレームから親ウィンド...
- 18「…は宣言されていません。」エラー...
- 19getElementByIdの戻り値がnullにな...
- 20ウィンドウ名からウィンドウオブジ...