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

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

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

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

Q&A

2回答

840閲覧

javascriptにて任意のCSVを読み込みたい

kihokutarou

総合スコア59

JavaScript

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

0グッド

0クリップ

投稿2018/11/14 01:03

sample.csvを読み込み、シャッフルされたものの中から一つ取り出して一定時間ごとに切り替えるプログラムを書きました。計算のフラッシュカードのイメージです。

html

1<!doctype html> 2<html> 3<head> 4<meta charset="utf-8"> 5<title>フラッシュカード</title> 6<style type="text/css"> 7#aaaa{ 8 color:white; 9 text-align:center; 10 background-color:black; 11 font-size: 500px; 12} 13a.cp_btn { 14display: block; 15width: 160px; 16padding: 0.8em; 17text-align: center; 18text-decoration: none; 19color: #EC407A; 20border: 2px solid #EC407A; 21border-radius: 3px; 22transition: .4s; 23} 24a.cp_btn:hover { 25background: #EC407A; 26color: #fff; 27} 28</style> 29</head> 30<body> 31<a class="cp_btn" onclick="startfnc()">スタート</a><br> 32<div id="aaaa">問題</div><br> 33<a class="cp_btn" onclick="stopTimer()">ストップ</a> 34 35 36<script> 37 38//配列をシャッフルする 39function shuffle(array) { 40 var n = array.length, t, i; 41 42 while (n) { 43 i = Math.floor(Math.random() * n--); 44 t = array[n]; 45 array[n] = array[i]; 46 array[i] = t; 47 } 48 49 return array; 50} 51 52 53// CSVファイル読み込み 54function csvToArray(path) { 55 var csvData = new Array(); 56 var data = new XMLHttpRequest(); 57 data.open("GET", path, false); 58 data.send(null); 59 var LF = String.fromCharCode(10); 60 var lines = data.responseText.split(LF); 61 for (var i = 0; i < lines.length;++i) { 62 var cells = lines[i].split(","); 63 if( cells.length != 1 ) { 64 csvData.push(cells); 65 } 66 } 67 return csvData; 68} 69 70//csvからdivにランダムで書き出す 71function miru(){ 72 var data = csvToArray("sample.csv"); 73 shuffle(data); 74 var p = document.getElementById('aaaa'); 75 76 p.innerHTML = data[0][1] //テキストを変更 77 78 console.log(p.innerHTML); 79 80 //alert(data[0][0]); 81} 82function startfnc() 83{ 84 //関数miru()を1000ミリ秒間隔で呼び出す 85 setInterval("miru()",2000); 86} 87function stopTimer(){ 88 89location.reload(); 90 91} 92 93</script> 94 95 96</body> 97</html>

本体と同一階層にあるcsvファイルで、A列に通し番号、B列に「2×3」のような問題がずらっと並んでいます。
このCSVファイルを、ユーザーが任意の場所から読み込むことはできないでしょうか。
File APIを利用して読み込めばいいのかなと思うのですが、どこから手を付けていいかりません。どなたかご教示お願いできないでしょうか。
よろしくお願いします。

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

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

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

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

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

guest

回答2

0

投稿2018/11/14 10:02

Lhankor_Mhy

総合スコア35871

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

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

Lhankor_Mhy

2018/11/14 10:04

textareaあたりにexcelの領域をコピペさせた方が早い気がしてきました。
guest

0

CSVでやれないことはないですが、読み込みが同じドメイン内から一回だけしかしないなら
jsonデータでやるほうが良いでしょう。
ついでにいえばjsファイルにしておけばajaxで処理せずに済むのでデータ処理は楽になります。
(jQueryなど利用せずにajaxを処理するのは面倒なので)

投稿2018/11/14 01:09

yambejp

総合スコア114585

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

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

kihokutarou

2018/11/14 07:18

ご回答ありがとうございます。 jsonも考えたのですが、ユーザーが作成やすいファイルとなるとCSVになります。また読み込みに関しても何回も読み込むことが想定されます。
yambejp

2018/11/14 07:26

むしろ「ユーザーが作成やすいファイル」となると、デリミタやエンクロージャ、 エスケープ処理などブレなどでてくるのでバグの温床になりそうですね 任意の場所がサーバー上に公開されているファイルなのか、 ユーザーがアップロードしてつかうかにもよりますので仕様をつめてください
kihokutarou

2018/11/14 07:40

後だしで申し訳ありません。 オフライン環境課で動かそうと思っています。したがって読み込むファイルもローカルにあるものを読み込む感じですね。 ユーザーがExcel等でcsvを作成する→htmlで読み込んで表示する といった流れです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問