GoogleシートAPIの実装方法を理解するのに問題がありません

Question

私は今でもWeb開発者を勉強していますので、私の素人な言葉遣いですが、Googleシートからデータを抜き出して、JavaScriptアニメーションキャンバスオブジェクト。

いつものように、GoogleスプレッドシートAPIドキュメントは、私のような人たちのことを念頭に置いて書かれていません。基本的なGETerアプリケーションは、私のローカルのPythonサーバー上で完璧に動作しましたが、ホストされたWebサイトでそれをテストして以来、エラーをスローします。私はこれがJSONPの問題であると仮定しています。なぜなら、エラーは「X-Frame-Optionsによって拒否されました」から始まりますが、JSONPとして要求を行う方法のドキュメントには何の言及もないようです。私はスプレッドシートを公開し、認証ステップが不要になるようにしました。

はここで削除などのIDと、コードです：

<script>   

     var CLIENT_ID = 'my_client_id'; 

     var SCOPES = ["https://www.googleapis.com/auth/spreadsheets.readonly"]; 

      function checkAuth() { 
     gapi.auth.authorize(
      { 
      'client_id': CLIENT_ID, 
      'scope': SCOPES.join(' '), 
      'immediate': true 
      }, handleAuthResult); 
     } 

/** 
     * Handle response from authorization server. 
     * 
     * @param {Object} authResult Authorization result. 
     */ 
     function handleAuthResult(authResult) { 

     if (authResult && !authResult.error) { 
      // Hide auth UI, then load client library. 

      loadSheetsApi(); 
     } else { 
      // Show auth UI, allowing the user to initiate authorization by 
      // clicking authorize button. 
    console.log('nope'); 
     } 
     } 

     /** 

     /** 
     * Load Sheets API client library. 
     */ 
     function loadSheetsApi() { 
     var discoveryUrl = 
      'https://sheets.googleapis.com/$discovery/rest?version=v4'; 
     gapi.client.load(discoveryUrl).then(trackDonations); 
     } 

     /** 
     * Print values in the donations column 
     */ 
     function trackDonations() { 
     gapi.client.sheets.spreadsheets.values.get({ 
      spreadsheetId: 'my_sheet_id', 
      range: 'Form Responses 1!C2:C', 
     }).then(function(response) { 
      var range = response.result; 
      if (range.values.length > 0) { 
       console.log(range.values); 
      $('.sum').text(range.values[range.values.length-1]); 
      } else { 
      prompt('No data found.'); 
      } 
     }, function(response) { 
      prompt('Error: ' + response.result.error.message); 
     }); 
     } 



    </script> 
    <script src="https://apis.google.com/js/client.js?onload=checkAuth"> 

おそらく、私は愚かな何かが欠けていますが、いくつかのガイダンスのために非常に感謝されます！ありがとう！

Answer 1

スプレッドシートを使用している場合、AppsScriptを使用する方が簡単です。

スプレッドシートから、[ツール]> [スクリプトエディタ]に移動します。このページでは、データを配列https://developers.google.com/apps-script/reference/spreadsheet/spreadsheet#getDataRange()にロードしてからjsonp https://developers.google.com/apps-script/guide/content#serving_jsonp_in_web_pagesとして配信する方法を示します。「Webアプリケーションとしてデプロイする」（クラウドアイコン）を使用すると、コード内で参照するURLが表示されます。

これは残りのAPIを使用するのと似ていますが、応答の仕組みをより詳細に制御できます。