web-dev-qa-db-ja.com

ブラウザで実行されているJavaScriptを介してデータをGoogleスプレッドシートにプッシュする

ユーザーが自分のGoogleスプレッドシートにデータをプッシュできるようにしたいWebアプリケーションで作業しています。

最初に JavaScript用Google APIクライアントライブラリ を使用しようとしましたが、Spreadsheet APIをカバーしていないようです（ https://developers.google.com/apis-Explorer/#p / ）。

それから Google Spreadsheets APIバージョン3. を直接使用することにしました。 jQueryとJSONPを使用して、ユーザーのスプレッドシートを取得します。

$.ajax({
  url: 'https://spreadsheets.google.com/feeds/spreadsheets/private/full?alt=json-in-script&access_token=' + access_token,
  dataType: 'JSONP',
  success: function(data){
    // use the spreadsheets
  }
});

同じ方法で、ユーザーが選択したスプレッドシートからシートを取得します。次に、選択したシートにデータをPOSTする必要があります。ここに問題があります：JSONPを使用してそれを行うことはできません。また、GoogleサーバーはCORSをサポートしていないようです。ブラウザに次のエラーが表示されます。

XMLHttpRequest cannot load https://spreadsheets.google.com/feeds/... Origin ..mysite.. is not allowed by Access-Control-Allow-Origin.

これを見てくれてありがとう。

javascriptjsonpgoogle-sheetscorsgoogle-spreadsheet-api
17
Martin Dimitrov

私もこれを8か月ほど検討していました。 Martin Hawskeyによるブログ投稿 に出くわしました。ここでガイドに従い、スプレッドシートへのHTMLフォームの投稿をセットアップすることができました。

事実上、データを受信できる公開されたWebアプリをスプレッドシート内にセットアップします。 CORSの問題を回避するには、ページ上の非表示のiframeをターゲットにします。この投稿のコードを複製しますが、かなりの部分があります。

[〜＃〜] demo [〜＃〜]

私はこれを見始めたときに与えられたと思ういくつかのアドバイスを提供します。できるなら... PHP使用できるサーバーを試してみてください。データの投稿はずっと簡単で柔軟性があります。今では Zend GData を使用しています。仕事と私はそれをもっと早く見つけていたのに:)

[〜＃〜] edit [〜＃〜]

Marting Hawskeyはこれを更新して、非表示のiframeを使用せずにAJAX送信をサポートします。 こちらを参照 。

22
dev

Step-by-stepスクリーンショット付きの手順

Martin Hawskeyのgoodの概要（HTMLフォームからGoogleスプレッドシートにデータを送信する）を読み、いくつかのギャップ/仮定を確認した後、 ステップバイステップの手順を含む詳細/包括的なチュートリアルwhich few =人々は有用だとわかった：

https://github.com/dwyl/html-form-send-email-via-google-script-without-server

このスクリプトは、GoogleスプレッドシートのHTTP POSTを介して送信されたデータを保存し、オプションをコンテンツをメールアドレスに転送します。 （新しいデータを通知する場合に便利）

HTMLフォーム：

contact form

結果（シートの行）：

row in sheet

それが他の人を助けることを願っています。

29
nelsonic