質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSV

CSV(Comma-Separated Values)はコンマで区切られた明白なテキスト値のリストです。もしくは、そのフォーマットでひとつ以上のリストを含むファイルを指します。

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

3回答

2854閲覧

JavaScriptで外部定義を参照して動的に画面を描画する方法

byth_net

総合スコア12

CSV

CSV(Comma-Separated Values)はコンマで区切られた明白なテキスト値のリストです。もしくは、そのフォーマットでひとつ以上のリストを含むファイルを指します。

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2017/01/19 15:09

お世話になります。

現在、HTML+JavaScriptで簡単な計算ができる個人用のツールを作成しております。

もともとは、サーバに設置したCSVファイルなどを読み込んでJavaScriptを描画できるものと思い、作成し始めたのですが、
インターネットで調べるとサーバにあるファイルをJavaScriptで読み込むことができなさそうで、困っています。

サーバサイドの処理を必要とせず、外部ファイルを読み込んで画面描画する方法をご存知の方はいらっしゃらないでしょうか?

具体的には、CSVをよみこんだ値に基づいて、HTMLのTableに行を表示していくイメージをしていました。
ブラウザは、SafariとChromeに対応できれば良いと考えています。
※またはこうすべき、というご意見などもあれば参考にさせていただきたいと思っています。
(やはりサーバサイドの処理が必要になるのでしょうか・・・)

余談ですが、現在はHTMLにhiddenでCSVの各行を羅列して、JavaScriptで集めて処理しています。
これでは外部定義している意味がないと思ったので、後学のためにも方法があれば知りたいと思った所存です。

質問に慣れておらず、わかりにくい質問になってしまったかもしれませんが、以上よろしくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

ベストアンサー

こんな感じをイメージすればよろしいでしょうか?

JavaScriptでCSVファイルを読み込む方法 | UX MILK

サンプルでは該当箇所をalert表示しているだけですが、配列をtable表示すれば質問の答えになるかと思われます

投稿2017/01/19 15:24

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

byth_net

2017/01/19 15:31

回答ありがとうございます。 質問に書くべきでしたが、検索したときにこちらのサイトができたので、この方法は試してみました。 XMLHttpRequestというのがどうも使えないようだったので、そもそもこの方法では無理と決めつけてしまっていましたが… いま考えたら、完全なローカル環境では動作しないけど、http経由でクライアントからサーバのCSVにアクセスしたらまさか動作したりするんでしょうか… もしご存知でしたら教えていただきたいです。 今実際に試してみるサーバの環境もできてないので、すぐに結論はだせませんが、 なんだかできる気もしてきたので、時期を見て回答は〆めようと思います。 ヒントをくださりありがとうございます。
byth_net

2017/01/22 09:11

今ようやく試すことができました。httpリクエストであれば問題なくファイルにアクセスできるようでした。 ご回答いただきありがとうございました。
guest

0

XMLHttpRequestというのがどうも使えないようだったので

HTMLファイルをサーバにおかず、ローカルだけで、という事でしょうか。

【[その他] ChromeにてAjaxでローカルファイルにアクセス - Qiita】
http://qiita.com/cigalecigales/items/33afaa42f91542ffa62e

Firefoxなら上記のようなことを気にせず使えると思います。

投稿2017/01/19 15:53

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

byth_net

2017/01/19 23:32

回答ありがとうございます。 うまく伝えられなくて申し訳ないのですが、 サーバのHTMLファイルと同じディレクトリにCSVを配置するイメージをしています。 w_nagaiさんの解答にある方法を試したときは、サーバを使わずに動作確認してたために、動作しなかった可能性があると思いました。 ただ、今回教えていただいたUページをみると、セキュリティ的な観点でも動作できない可能性がありそうですね。 このURLのサイトからは、結局httpアクセスならChromeでもアクセスできるかどうかが読み取れませんでした。 まずはサーバ建てて試してみて、有効であれば教えていただいたページの方法でローカルで動作確認ができそうです。 有用な情報を提供いただきありがとうございます。
byth_net

2017/01/22 09:11

今ようやく試すことができました。ご指摘のとおり、FireFoxで動作させてみたところ、ひとまず、正常に動作できているように見えます。 セキュリティの問題上Chormeで参照できないというのは盲点であり、とてもためになる回答でした。
guest

0

ご利用の環境にもよりますがPHPなどでcsvをjson形式に変更してみては
いかがでしょうか?
js側からはajaxで参照すればよろしいかと思います。

投稿2017/01/20 00:26

yambejp

総合スコア114581

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

byth_net

2017/01/20 02:25

回答ありがとうございます。 そうしたほうがベストなのは理解しておりますが、当方のサーバ構築の知識不足故にサーバ言語を使わずに動作させたかったのです。 (後学のためにもやり方があるなら知りたかったのです。) ただ、やはりphpなどを使うことも視野に入れて進めていきたいと思います。 そのときは、csvではなく、jsonで取り扱うことも検討しようと思います。 参考になるご意見ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問