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

101

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

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

JavaScriptまたはjQueryのようなそのフレームワークのいずれかを使用してGoogleスプレッドシートにアクセス（作成/編集/削除）する方法を教えてください。

javascript  google-api  google-sheets-api  google-data-api  google-api-js-client 
— プラティック
ソース
1
指定したリンクには、JSONの使用に関する情報が含まれています。JavaScriptでそれを使用できるはずです。
— GSto
1
@GSto私にこれについていくつかの洞察を提供できれば役に立ちます。もう一度電話して、javascript.Thanksを介してGoogleスプレッドシートにアクセスしたいと思います。
— Pratik 2010
1
これは完全なチュートリアルdeveloper.google.com/sheets/api/quickstart/jsです
— FONGOH MARTIN
Sheetsuの使用を検討したい場合があります。JSON APIはかなりシンプルで、無料バージョンでは制限がありますが、開発者がGoogleスプレッドシートを使用するために必要なものが本当に簡単になります。これが一部の人々に役立つことを願っています。
— Jester、

回答:

60

JSON APIを介してGoogleスプレッドシートデータ（公開されている場合）を取得する単純なJavaScriptライブラリを作成しました。

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

あなたはここでそれを実際に見ることができます：

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

— マイク・マッケイ
ソース
3
これにより、時間を大幅に節約できました。どうもありがとうございます！しかし、私はコードをフォークして、データの空のセルを処理し、それを行に編成できるようにしました（そのまま返されるデータは単なるセルの巨大な配列ですが、空のセルは考慮に入れると、データを整理する簡単な方法はありませんでした）。更新は、 'callbackCells（）'メソッドに対するものでした。それをチェックアウト：github.com/rw3iss/google-spreadsheet-javascript.git おかげで再び男を！
— Ryan Weiss
5
Evan Plaiceの回答stackoverflow.com/a/8666573/42082には、公式のGoogle Docs APIとスプレッドシートの使用方法に関する詳細情報があります。一見の価値があります。
— Ape-in​​ago
新しいバージョンのAPI 3.0とOAuth 2.0の
— PreguntonCojoneroCabrón
グーグルがポリシーを変更したようですが、これは現在壊れています。
— チラグ
50

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

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

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

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

— wescpy
ソース
35

ここに要点があります。

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

ワークシートベースのフィードを使用して、スプレッドシート内でワークシートを追加/削除できます。

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

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

jQueryを忘れてください。jQueryが本当に役立つのは、DOMをトラバースする場合だけです。GAS（Google Apps Scripting）はDOMを使用しないため、jQueryはコードに値を追加しません。バニラに固執する。

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

— エヴァン・プレイス
ソース
13

スプレッドシートを公開する必要がないソリューションがあります。ただし、シートは「共有」する必要があります。具体的には、リンクを知っている全員がスプレッドシートにアクセスできるようにシートを共有する必要があります。これが完了すると、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

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

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);                                                                                                                                                       
  });
— ロブスコ
ソース
グリッドデータとは
— William Entriken
@WilliamEntrikenセルの内容。
— -robsco
11

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

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

こちらがクイックスタート/デモです。コードは次のようになります。

// 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アプリとして公開することもできます。

— ダンダスカレスク
ソース
6

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

それはあなたができるように見えますが、それは使うのが面倒です。これには、GoogleデータAPIの使用が含まれます。

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

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

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

— 猿稲子
ソース
なぜそれを「痛み」と呼ぶのですか？
— Pratik、
1
ネイティブAPIがないため、多くの解析とデータ操作を自分で行う必要があることを意味します。ネイティブスプレッドシートAPIがこれらを提供します。
— Ape-in​​ago 2010
4

「Googleドキュメントにアクセスする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

これらはあなたを助けるでしょう。

— プラティック
ソース
8
リンク1は非推奨になります2015年4月20日、リンク2 404エラー、リンク3 v2.0は非推奨、リンク4は非推奨
— vladkras '24
2

この急速に変化する世界では、これらのリンクのほとんどが廃止されています。

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

— ヴラドクラ
ソース
OPは、ドライブよりも具体的なAPIを持つGoogleスプレッドシートについて具体的に尋ねました。
— Dan Dascalescu、2016
わかりました。ここに、スプレッドシートを含むGoogle製品の完全なリストがあります（私の最初のリンクを使用しても簡単に見つかります）
— vladkras
1

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

— ティム
ソース
良い考えではありません。グーグルはそれをシャットダウンする予定です。それを反対投票。
— A_01 2018
1

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

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

当初（数年前）は、いくつかのRGraph関数に依存してその魔法を動作させていましたが、スタンドアロンで動作するようになりました（つまり、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>
— リチャード
ソース
そして今、同じURLで利用可能なインポートユーティリティのPHPバージョンがあります
— Richard
0

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

— シヴェン・シンハ
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.