スプレッドシートをWeb上に表示

Question

スプレッドシートをCSV形式でWeb公開し、jQueryで表示させようとしています。
ローカル環境ではCSVの内容がきちんと表示されているのですが、サーバーにアップロードすると表示されなくなってしまいます。
htaccessに追記もしてみたのですが変わらずでした。解決策があれば教えていただけないでしょうか。
よろしくおねがいします。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="jquery.csv.js"></script>

$(function() {
    var target = '#csv';
    var csvList;
	var insert = '';
	
    $.ajax({
        url: 'スプレッドシートの公開URL',
        success: function(data) {
			csvList = $.csv()(data);
			for (var i = 0; i < csvList.length; i++) {
                insert += '<tr>';
                insert += '<th>' + csvList[i][0] + '</th>';
                insert += '<td>' + csvList[i][1] + '</td>';
                insert += '</tr>';
            };
            $(target).append(insert);
        }
    });
});

<table id="csv"></table>

Comments

[kei344]

エラーは出ていませんか？デベロッパーツールで確認してみてください。http://www.buildinsider.net/web/chromedevtools/01

[shiganakunai]

外部サーバーに接続できない、ようなエラーが出ています。
No 'Access-Control-Allow-Origin' header is present on the requested resource.

htaccessにいろいろ書いて試しているのですが変わらずです…

Answer 1

スプレッドシートもshiganakunaiさんの管理されているサーバに有るのであれば、レスポンスヘッダにAccess-Control-Allow-Originを追加すればよいですが、.htaccessでHeaderをセットできる設定になっていないサーバもあるようです。

#// .htaccess
Header set Access-Control-Allow-Origin "http://www.example.jp"
```【XHR2でサブドメインのワイルドカードOriginに対してCORSを許可する設定、他。 - Qiita】
[http://qiita.com/kawaz/items/6a22c2c970c8d932a3a1](http://qiita.com/kawaz/items/6a22c2c970c8d932a3a1)

---

読み込み側のサーバで外部のCSVを取得してしまうという方法もあるようです。

【AjaxでAccess-Control-Allow-Originのエラーを回避する方法】
[http://www.muratayusuke.com/2011/05/28/access-control-allow-origin/](http://www.muratayusuke.com/2011/05/28/access-control-allow-origin/)

Comments

[think49]

> 【AjaxでAccess-Control-Allow-Originのエラーを回避する方法】
この記事では「サーバAと交信するクライアント---サーバB(Access-Control-Allow-Origin)---サーバC」の手順で通信していますが、サーバAにUPする権限があるならサーバAにPHPをUPすればサーバBが不要になりますね。

[kei344]

そうなりますね。この記事は「サーバAにPHPを置けない（Access-Control-Allow-Originの付与も無理）」⇒「サーバBならPHP置ける」⇒「それをまたPHPが使えないサーバC（クロームアプリなど）で使う」という趣旨だと読み取りました。

この記事を記載したのは、「読み込み側のサーバで外部のCSVを取得してしまう」という部分の比較的簡易な方法が書かれていたので記載しました。

[shiganakunai]

htaccessの記述では動作せず、サーバーにもGoogleにも問い合わせましたが解決策は見つかりませんでした。
少し諦めてPHPでCSVを取得しようとすると何の問題も無く表示することができました。Jsで取得することがうまくいかないのかもしれません。
ありがとうございました。