JavascriptのみでGoogleスプレッドシートにアクセスするにはどうすればよいですか？
JavaScriptのみを使用してGoogleスプレッドシートにアクセスしたい（.NET、C＃、Javaなどは使用しない）
こちら に来て、JavaScriptがGoogleスプレッドシートにアクセスするためのAPIがないことを知ってショックを受けました。
JavaScriptまたはjQueryなどのフレームワークを使用して、Googleスプレッドシートにアクセス（作成/編集/削除）する方法を教えてください。
JSON apiを介してGoogleスプレッドシートデータ（公開されている場合）を取得する簡単なjavascriptライブラリを作成しました。
https://github.com/mikeymckay/google-spreadsheet-javascript
ここで実際に動作を確認できます：
http://mikeymckay.github.com/google-spreadsheet-javascript/sample.html
2018年1月の更新：昨年この質問に答えたとき、私は3番目の方法を言及するのを怠りましたJavaScriptを使用してGoogle APIにアクセスします。これは、itsクライアントライブラリを使用してNode.jsアプリからアクセスするため、以下に追加しました。
これは2017年3月であり、ここでの回答のほとんどは時代遅れです-現在受け入れられている回答は古いAPIバージョンを使用するライブラリ。より最新の答え： ほとんどのGoogle API にはJavaScriptのみでアクセスできます。 Googleは今日、これを行う3つの方法を提供しています。
- Dan Dascalescuによる回答 で述べたように、 Google Apps Script を使用できます。これは、GoogleのJavaScriptクラウドソリューションです。つまり、Googleサーバーで実行される、ブラウザの外部にある非ノードサーバー側のJSアプリ。
- Apps Script code editor でアプリをコーディングすると、2つの異なる方法でGoogleスプレッドシートにアクセスできます：
- スプレッドシートサービス （ネイティブオブジェクトサポート; 使用ガイド ）;ネイティブは簡単ですが、一般的には...
- Google Sheets Advanced Service （最新のGoogle Sheets REST APIに直接アクセス[下記を参照]; 使用ガイド ）
- Apps Scriptは add-ons にも対応しており、Sheetsアドオンで these などのSheets UI機能を拡張できます。
- Android上のスプレッドシートアプリ を拡張する モバイルアドオン と書くこともできます
- Appsスクリプトの使用方法の詳細については、 これらのビデオ 私が作成したもの（ほとんどの場合、スプレッドシートの使用が含まれます）
- Apps Script code editor でアプリをコーディングすると、2つの異なる方法でGoogleスプレッドシートにアクセスできます：
- JavaScript用Google APIクライアントライブラリ を使用して、クライアント側で最新の GoogleシートREST API にアクセスすることもできます。
- 一部の一般的なサンプル クライアントライブラリの使用
- Google I/O 2016では、最新のSheets API（v4）は リリース済み でした。以前のすべてのバージョンよりもはるかに強力で、開発者はスプレッドシートUIにあるほとんどの機能にプログラムでアクセスできます。
- APIの JavaScriptクイックスタート は、開始を支援するためのものです
- コアAPIリクエストの サンプル「レシピ」 （JSONペイロード）
- Pythonに「アレルギー」でない場合（疑似コードのふりをしてください;））、学習できるAPIを使用した「現実世界」のサンプルを使用したビデオをいくつか作成しました。必要に応じてJSに移行します（注：Pythonコードであっても、ほとんどのAPIリクエストにはJSONがあり、JSに簡単に移植できます）：
- SQLデータをシートに移行する （コードの詳細なダイビング 投稿 ）
- Sheets APIを使用したテキストのフォーマット （code deep dive post ）
- スプレッドシートデータからスライドを生成する （コードディープダイブ 投稿 ）
- JavaScriptを使用してGoogle APIにアクセスする3番目の方法は、 そのクライアントライブラリ を使用するNode.jsアプリからです。上記で説明したJavaScript（クライアント）クライアントライブラリを使用する場合と同様に機能します。サーバー側から同じAPIにアクセスするのはあなただけです。 シートのNode.jsクイックスタートの例 です。上記のPythonベースのビデオは、サーバー側からもAPIにアクセスするため、さらに便利であることがわかります。
REST APIを使用する場合、ソースコードを管理および保存するとともに、独自の認証コードをローリングして認証を実行する必要があります（上記のサンプルを参照）。 Apps Scriptはこれをユーザーに代わって処理し、データを管理し（Ape-inagoが 回答 で述べた「痛み」を軽減します）、コードはGoogleのサーバーに保存されます。ただし、機能はApp Scriptが提供するサービスに限定されており、古いJS（ES3 +一部のES5機能とGoogleカスタマイズ）に対して、REST APIは開発者にAPIへのより広範なアクセスを提供します。しかし、ねえ、選択肢があるのは良いことですよね？要約すると、OPの元の質問にゼロではなく答えるために、開発者はJavaScriptを使用してGoogleスプレッドシートにアクセスする3つの方法を持っています。
ここに要点があります
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を介してのみ機能します。
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アプリとして公開する もできます。
スプレッドシートを公開する必要のないソリューションがあります。ただし、シートは「共有」する必要があります。より具体的には、リンクを知っている人がスプレッドシートにアクセスできる方法でシートを共有する必要があります。これが完了すると、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);
});
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/
「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/
これらがあなたを助けるかもしれません。
申し訳ありませんが、これはお粗末な答えです。どうやらこれはほぼ2年間 issue だったので、息を止めないでください。
以下が公式のリクエストです "star"
おそらく最も近いものは Google App Engine/Pythonで独自のサービスをローリング であり、独自のJSライブラリで必要なサブセットを公開します。私は自分でより良い解決策を持ちたいです。
このタイプの場合、 Google Fusion Tables を使用する必要があります。 API はその目的のために設計されています。
Sheetsee.js およびtabletop.jsを使用して実行できます
私はあなたがまさにそれをするのを助けるためにスタインを構築しています。また、シートから直接データを表示する場合は、HTMLのみのソリューションも提供します。 steinhq.com で確認してください。
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>