IT-Swarm.Net

JavascriptのみでGoogleスプレッドシートにアクセスするにはどうすればよいですか?

JavaScriptのみを使用してGoogleスプレッドシートにアクセスしたい(.NET、C#、Javaなどは使用しない)

こちら に来て、JavaScriptがGoogleスプレッドシートにアクセスするためのAPIがないことを知ってショックを受けました。

JavaScriptまたはjQueryなどのフレームワークを使用して、Googleスプレッドシートにアクセス(作成/編集/削除)する方法を教えてください。

93
Pratik

JSON apiを介してGoogleスプレッドシートデータ(公開されている場合)を取得する簡単なjavascriptライブラリを作成しました。

https://github.com/mikeymckay/google-spreadsheet-javascript

ここで実際に動作を確認できます:

http://mikeymckay.github.com/google-spreadsheet-javascript/sample.html

53
Mike McKay

2018年1月の更新:昨年この質問に答えたとき、私は3番目の方法を言及するのを怠りましたJavaScriptを使用してGoogle APIにアクセスします。これは、itsクライアントライブラリを使用してNode.jsアプリからアクセスするため、以下に追加しました。

これは2017年3月であり、ここでの回答のほとんどは時代遅れです-現在受け入れられている回答は古いAPIバージョンを使用するライブラリ。より最新の答え: ほとんどのGoogle API にはJavaScriptのみでアクセスできます。 Googleは今日、これを行う3つの方法を提供しています。

  1. Dan Dascalescuによる回答 で述べたように、 Google Apps Script を使用できます。これは、GoogleのJavaScriptクラウドソリューションです。つまり、Googleサーバーで実行される、ブラウザの外部にある非ノードサーバー側のJSアプリ。
  2. JavaScript用Google APIクライアントライブラリ を使用して、クライアント側で最新の GoogleシートREST AP​​I にアクセスすることもできます。
  3. JavaScriptを使用してGoogle APIにアクセスする3番目の方法は、 そのクライアントライブラリ を使用するNode.jsアプリからです。上記で説明したJavaScript(クライアント)クライアントライブラリを使用する場合と同様に機能します。サーバー側から同じAPIにアクセスするのはあなただけです。 シートのNode.jsクイックスタートの例 です。上記のPythonベースのビデオは、サーバー側からもAPIにアクセスするため、さらに便利であることがわかります。

REST AP​​Iを使用する場合、ソースコードを管理および保存するとともに、独自の認証コードをローリングして認証を実行する必要があります(上記のサンプルを参照)。 Apps Scriptはこれをユーザーに代わって処理し、データを管理し(Ape-in​​agoが 回答 で述べた「痛み」を軽減します)、コードはGoogleのサーバーに保存されます。ただし、機能はApp Scriptが提供するサービスに限定されており、古いJS(ES3 +一部のES5機能とGoogleカスタマイズ)に対して、REST AP​​Iは開発者にAPIへのより広範なアクセスを提供します。しかし、ねえ、選択肢があるのは良いことですよね?要約すると、OPの元の質問にゼロではなく答えるために、開発者はJavaScriptを使用してGoogleスプレッドシートにアクセスする3つの方法を持っています。

44
wescpy

ここに要点があります

Google Sheets API を使用してスプレッドシートを作成できます。現在、APIを使用してスプレッドシートを削除する方法はありません(ドキュメントを読んでください)。 Google Docs APIをドキュメントの作成と検索のルートと考えてください。

worksheet based feeds を使用して、スプレッドシート内でワークシートを追加/削除できます。

スプレッドシートの更新は、 リストベースのフィード または セルベースのフィード のいずれかで行います。

スプレッドシートの読み取りは、上記のGoogle Spreadsheets APIを介して、または公開されたシートのみを使用して、 Google Visualization API Query Language を使用してクエリを実行できますデータ(結果をCSV、JSON、またはHTMLテーブル形式で返すことができます)。


JQueryを忘れてください。 jQueryは、DOMを横断する場合にのみ本当に価値があります。 GAS(Google Apps Scripting)はDOMを使用しないため、jQueryはコードに価値を追加しません。バニラにこだわる。

誰もまだ回答でこの情報を提供していないことに本当に驚いています。 canできるだけでなく、Vanilla JSを使用して行うのは比較的簡単です。唯一の例外は、比較的新しいGoogle Visualization APIです(2011年現在)。 Visualization APIは、HTTPクエリ文字列URIを介してのみ機能します。

34
Evan Plaice

2016 update:最も簡単な方法は、Google Apps Script API、特に SpreadSheet Service を使用することです。これは、スプレッドシートを公開する必要がある他の回答とは異なり、プライベートシートに対して機能します。

これにより、JavaScriptコードをGoogleスプレッドシートにバインドし、シートを開いたとき、またはメニュー項目(定義可能な)が選択されたときに実行できます。

Quickstart/Demo です。コードは次のようになります。

// Let's say you have a sheet of First, Last, email and you want to return the email of the
// row the user has placed the cursor on.
function getActiveEmail() {
  var activeSheet = SpreadsheetApp.getActiveSheet();
  var activeRow = .getActiveCell().getRow();
  var email = activeSheet.getRange(activeRow, 3).getValue();

  return email;
}

そのようなスクリプトをWebアプリとして公開する もできます。

11
Dan Dascalescu

スプレッドシートを公開する必要のないソリューションがあります。ただし、シートは「共有」する必要があります。より具体的には、リンクを知っている人がスプレッドシートにアクセスできる方法でシートを共有する必要があります。これが完了すると、Google Sheets HTTP APIを使用できます。

まず、Google APIキーが必要です。ヘッド: https://developers.google.com/places/web-service/get-api-key NB。 APIキーを一般公開することのセキュリティ上の影響に注意してください: https://support.google.com/googleapi/answer/6310037

スプレッドシートのデータを取得all-警告、これは大量のデータになる可能性があります。

https://sheets.googleapis.com/v4/spreadsheets/{spreadsheetId}/?key={yourAPIKey}&includeGridData=true

シートのメタデータを取得する

https://sheets.googleapis.com/v4/spreadsheets/{spreadsheetId}/?key={yourAPIKey}

セル範囲を取得する

https://sheets.googleapis.com/v4/spreadsheets/{spreadsheetId}/values/{sheetName}!{cellRange}?key={yourAPIKey}

この情報を入手したら、AJAXを使用してデータを取得し、JavaScriptで操作できます。 axios を使用することをお勧めします。

var url = "https://sheets.googleapis.com/v4/spreadsheets/{spreadsheetId}/?key={yourAPIKey}&includeGridData=true";                                                             
axios.get(url)
  .then(function (response) {
    console.log(response);                                                                                                                                                    
  })
  .catch(function (error) {
    console.log(error);                                                                                                                                                       
  });                
7
robsco

edit:これは、GoogleドキュメントのAPIがリリースされる前に回答されました。最新情報については、 Evan Plaiceの回答 および Dan Dascalescuの回答 を参照してください。

できるように見えますが、使用するのは苦痛です。これには、Google Data APIの使用が含まれます。

http://gdatatips.blogspot.com/2008/12/using-javascript-client-library-w-non.html

「JavaScriptクライアントライブラリには、カレンダー、連絡先、Blogger、Google Financeのヘルパーメソッドがあります。ただし、ほぼすべてのGoogle Data APIで使用して、認証済み/プライベートフィードにアクセスできます。この例ではDocList APIを使用します。」

スプレッドシートと連動するガジェットの記述例: http://code.google.com/apis/spreadsheets/gadgets/

6
Ape-inago

「Google DocsにアクセスするJavaScript」を実装するのは面倒で、さらにGoogleのドキュメントも簡単に入手できません。 gdocへのjsアクセスを実現するための共有リンクがいくつかあります。

http://code.google.com/apis/documents/docs/3.0/developers_guide_protocol.html#UploadingDocs

http://code.google.com/apis/spreadsheets/gadgets/

http://code.google.com/apis/gdata/docs/js.html

http://www.mail-archive.com/google-help-dataapi@googlegroups.com/msg01924.html

これらがあなたを助けるかもしれません。

4
Pratik

申し訳ありませんが、これはお粗末な答えです。どうやらこれはほぼ2年間 issue だったので、息を止めないでください。

以下が公式のリクエストです "star"

おそらく最も近いものは Google App Engine/Pythonで独自のサービスをローリング であり、独自のJSライブラリで必要なサブセットを公開します。私は自分でより良い解決策を持ちたいです。

2
mjhm

この急速に変化する世界では、これらのリンクのほとんどは時代遅れです。

これで、 Google Drive Web API を使用できます:

2
vladkras

このタイプの場合、 Google Fusion Tables を使用する必要があります。 API はその目的のために設計されています。

1
Tim

Sheetsee.js およびtabletop.jsを使用して実行できます

  1. gitの例
  2. 別の例
1
Deep Shah

私はあなたがまさにそれをするのを助けるためにスタインを構築しています。また、シートから直接データを表示する場合は、HTMLのみのソリューションも提供します。 steinhq.com で確認してください。

0
Shiven Sinha

RGraphシートコネクタを使用すると、JavaScriptでGoogleスプレッドシートのスプレッドシートデータを読み取ることができます。

https://www.rgraph.net/canvas/docs/import-data-from-google-sheets.html

当初(数年前)、これはいくつかのRGraph関数に依存してそのマジックを機能させていましたが、今ではstandalone(つまり、RGraph共通ライブラリを必要としません) )。

いくつかのサンプルコード(この例ではRGraphチャートを作成します):

<!-- Include the sheets library -->
<script src="RGraph.common.sheets.js"></script>

<!-- Include these two RGraph libraries to make the chart -->
<script src="RGraph.common.key.js"></script>
<script src="RGraph.bar.js"></script>

<script>
    // Create a new RGraph Sheets object using the spreadsheet's key and
    // the callback function that creates the chart. The RGraph.Sheets object is
    // passed to the callback function as an argument so it doesn't need to be
    // assigned to a variable when it's created
    new RGraph.Sheets('1ncvARBgXaDjzuca9i7Jyep6JTv9kms-bbIzyAxbaT0E', function (sheet)
    {
        // Get the labels from the spreadsheet by retrieving part of the first row
        var labels = sheet.get('A2:A7');

        // Use the column headers (ie the names) as the key
        var key = sheet.get('B1:E1');

        // Get the data from the sheet as the data for the chart
        var data   = [
            sheet.get('B2:E2'), // January
            sheet.get('B3:E3'), // February
            sheet.get('B4:E4'), // March
            sheet.get('B5:E5'), // April
            sheet.get('B6:E6'), // May
            sheet.get('B7:E7')  // June
        ];

        // Create and configure the chart; using the information retrieved above
        // from the spreadsheet
        var bar = new RGraph.Bar({
            id: 'cvs',
            data: data,
            options: {
                backgroundGridVlines: false,
                backgroundGridBorder: false,
                xaxisLabels: labels,
                xaxisLabelsOffsety: 5,
                colors: ['#A8E6CF','#DCEDC1','#FFD3B6','#FFAAA5'],
                shadow: false,
                colorsStroke: 'rgba(0,0,0,0)',
                yaxis: false,
                marginLeft: 40,
                marginBottom: 35,
                marginRight: 40,
                key: key,
                keyBoxed: false,
                keyPosition: 'margin',
                keyTextSize: 12,
                textSize: 12,
                textAccessible: false,
                axesColor: '#aaa'
            }
        }).wave();
    });
</script>
0
Richard