Javascript로만 Google 스프레드 시트에 액세스하려면 어떻게해야합니까?

JavaScript 만 사용하여 Google 스프레드 시트에 액세스하고 싶습니다 (.NET, C #, Java 등 없음).

저는 여기에 왔는데 Google 스프레드 시트에 액세스 할 수있는 JavaScript 용 API가 없다는 사실에 충격을 받았습니다.

JavaScript 또는 jQuery와 같은 프레임 워크를 사용하여 Google 스프레드 시트에 액세스 (생성 / 수정 / 삭제)하는 방법을 알려주세요.

JSON API를 통해 Google 스프레드 시트 데이터 (게시 된 경우)를 검색하는 간단한 자바 스크립트 라이브러리를 만들었습니다.

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

여기에서 실제 작동을 볼 수 있습니다.

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

2018 년 1 월 업데이트 : 작년에이 질문에 답했을 때 JavaScript로 Google API에 액세스 하는 세 번째 방법 을 언급하지 않았는데 , 이는 클라이언트 라이브러리를 사용 하는 Node.js 앱에서 오는 것이므로 아래에 추가했습니다.

그것은이다 2017년 3월 및 답변의 대부분은 여기에 구식이되어 - 허용 대답은 이제 이전 API 버전을 사용하는 라이브러리를 참조. 최신 답변 : JavaScript만으로 대부분의 Google API에 액세스 할 수 있습니다 . Google은 현재이를위한 3 가지 방법을 제공합니다.

1. Dan Dascalescu 의 답변 에서 언급했듯이 JavaScript-in-Google의 클라우드 솔루션 인 Google Apps Script를 사용할 수 있습니다 . 즉, Google 서버에서 실행되는 브라우저 외부의 비 노드 서버 측 JS 앱입니다.
   • Apps Script 코드 편집기 에서 앱을 코딩하면 다음 두 가지 방법으로 Google 스프레드 시트에 액세스 할 수 있습니다.
     1. 스프레드 시트 서비스 (기본 객체 지원, 사용 설명서 ) 네이티브는 더 쉽지만 일반적으로 다음보다 오래되었습니다.
     2. Google 스프레드 시트의 고급 서비스 (; 직접 최신 Google 시트 REST API에 액세스 [아래 참조] 사용 설명서 )
   • 애플리케이션 스크립트는 힘은 추가 기능 및 시트가 (같은 추가 기능을 사용하면 시트를 UI 기능을 확장 할 수 있습니다 이 )
   • Android 에서 스프레드 시트 앱 을 확장하는 모바일 부가 기능 을 작성할 수도 있습니다.
   • Apps Script 사용에 대해 자세히 알아 보려면 내가 만든 동영상을 확인하세요 (대부분 스프레드 시트 사용과 관련됨).
2. JavaScript 용 Google API 클라이언트 라이브러리를 사용 하여 클라이언트 측 에서 최신 Google 스프레드 시트 REST API 에 액세스 할 수도 있습니다 .
   • 다음은 클라이언트 라이브러리 사용에 대한 몇 가지 일반적인 샘플 입니다.
   • 최신 Sheets API (v4)가 Google I / O 2016에서 출시되었습니다 . 이전 버전보다 훨씬 강력하여 개발자가 스프레드 시트 UI에있는 대부분의 기능에 프로그래밍 방식으로 액세스 할 수 있습니다.
   • 시작 하는 데 도움이되는 API 의 JavaScript 빠른 시작 은 다음과 같습니다.
   • 다음은 핵심 API 요청에 대한 샘플 "레시피" (JSON 페이로드)입니다.
   • Python에 "알레르기"가없는 경우 (그렇다면 의사 코드 인 척하십시오;)), API를 사용하여 배우고 원하는 경우 JS로 마이그레이션 할 수있는 "실제"샘플로 여러 비디오를 만들었습니다 ( 참고 : Python 코드이지만 대부분의 API 요청에는 JSON이 있으며 JS로 쉽게 이식 가능) :
     1. SQL 데이터를 시트로 마이그레이션 (코드 심층 분석 게시물 )
     2. Sheets API를 사용하여 텍스트 서식 지정 (코드 심층 분석 게시물 )
     3. 스프레드 시트 데이터에서 슬라이드 생성 (심층 분석 포스트 코드 )
     4. 에서 그와 다른 시트 API 비디오 라이브러리
3. JavaScript로 Google API에 액세스하는 세 번째 방법은 Node.js 앱에서 클라이언트 라이브러리를 사용 하는 것 입니다. 위에서 설명한 자바 스크립트 (클라이언트) 클라이언트 라이브러리를 사용하는 것과 유사하게 작동하며 서버 측에서 동일한 API에 액세스합니다. 다음 은 스프레드 시트 용 Node.js 빠른 시작 예시 입니다. 위의 Python 기반 비디오가 서버 측에서 API에 액세스하기 때문에 훨씬 더 유용 할 수 있습니다.

REST API를 사용하는 경우 소스 코드를 관리 및 저장하고 자체 인증 코드를 롤링하여 인증을 수행해야합니다 (위의 샘플 참조). Apps Script는 사용자를 대신하여 데이터를 관리하고 (Ape-inago가 답변 에서 언급 한 '고통'을 줄임 ) 코드가 Google 서버에 저장됩니다. 그러나 기능은 App Script가 제공하는 서비스로 제한되는 반면 REST API는 개발자에게 API에 대한 훨씬 더 광범위한 액세스를 제공합니다. 하지만 선택의 여지가있는 것이 좋습니다. 요약하면, OP 원래 질문에 답하기 위해 개발자는 자바 스크립트를 사용하여 Google 스프레드 시트에 액세스하는 세 가지 방법이 있습니다.

여기에 요점이 있습니다.

Google Sheets API를 사용하여 스프레드 시트를 만들 수 있습니다 . 현재는 API를 사용하여 스프레드 시트를 삭제할 수 없습니다 (문서 읽기). Google Docs API를 문서를 만들고 조회하는 경로로 생각하십시오.

워크 시트 기반 피드를 사용하여 스프레드 시트 내에서 워크 시트를 추가 / 제거 할 수 있습니다 .

스프레드 시트 업데이트는 목록 기반 피드 또는 셀 기반 피드를 통해 수행됩니다 .

스프레드 시트를 읽기, 구글 스프레드 시트 API를 위에서 언급 한 중 하나를 수행하거나 할 수 있습니다 만 게시 된 시트에 대한 사용하여 Google 시각화 API 쿼리 언어 (CSV, JSON, 또는 HTML 테이블 형식으로 결과를 반환 할 수 있습니다) 데이터를 조회 할 수 있습니다.

jQuery는 잊어라. jQuery는 DOM을 순회하는 경우에만 정말 가치가 있습니다. GAS (Google Apps Scripting)는 DOM을 사용하지 않으므로 jQuery는 코드에 값을 추가하지 않습니다. 바닐라를 고수하십시오.

아직 아무도이 정보를 답변으로 제공하지 않았다는 사실에 정말 놀랐습니다. 할 수 있을 뿐만 아니라 바닐라 JS를 사용하는 것은 비교적 쉽습니다. 유일한 예외는 상대적으로 새로운 Google Visualization API입니다 (2011 년 기준). 또한 시각화 API는 HTTP 쿼리 문자열 URI를 통해서만 작동합니다.

스프레드 시트를 게시하는 데 필요하지 않은 솔루션이 있습니다. 그러나 시트는 '공유'되어야합니다. 특히 링크가있는 모든 사용자가 스프레드 시트에 액세스 할 수있는 방식으로 시트를 공유해야합니다. 이 작업이 완료되면 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);                                                                                                                                                       
  });                

2016 업데이트 : 가장 쉬운 방법은 Google Apps Script API, 특히 스프레드 시트 서비스를 사용하는 것 입니다. 이것은 스프레드 시트를 게시 해야하는 다른 답변과 달리 개인 시트에서 작동합니다.

이렇게하면 JavaScript 코드를 Google Sheet에 바인딩하고 시트가 열리거나 메뉴 항목 (사용자가 정의 할 수 있음)이 선택 될 때 실행할 수 있습니다.

여기에 빠른 시작 / 데모 입니다. 코드는 다음과 같습니다.

// 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;
}

웹 앱과 같은 스크립트를 게시 할 수도 있습니다 .

편집 : 이것은 Google 문서의 API가 출시되기 전에 답변되었습니다. 참조 에반 가자미의 대답 과 댄 Dascalescu의 대답은 더 최신의 정보를.

할 수있는 것 같지만 사용하기가 고통 스럽습니다. Google 데이터 API를 사용합니다.

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

"자바 스크립트 클라이언트 라이브러리에는 캘린더, 주소록, Blogger 및 Google Finance에 대한 도우미 메소드가 있습니다.하지만 거의 모든 Google 데이터 API와 함께 사용하여 인증 / 비공개 피드에 액세스 할 수 있습니다.이 예에서는 DocList API를 사용합니다."

스프레드 시트와 인터페이스하는 가젯 작성의 예 : http://code.google.com/apis/spreadsheets/gadgets/

'Google 문서에 액세스하는 자바 스크립트'는 구현하는 데 지루할 것이며 더욱이 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

도움이 될 수 있습니다 ..

죄송합니다. 답이 형편 없습니다. 분명히 이것은 거의 2 년 동안 문제 가되었으므로 숨을 참지 마십시오.

다음은 "별표 표시" 할 수있는 공식 요청입니다.

아마도 가장 가까운 곳은 Google App Engine / Python으로 자체 서비스를 롤링 하고 자체 JS 라이브러리로 필요한 하위 집합을 노출하는 것입니다. 나 자신이 더 나은 솔루션을 갖고 싶지만.

빠르게 변화하는 세상에서 이러한 링크의 대부분은 쓸모가 없습니다.

이제 Google Drive Web API를 사용할 수 있습니다 .

• 자바
• PHP
• Javacript
• .그물
• 파이썬
• 루비
• 다른 사람...

Sheetsee.js 및 tabletop.js 를 사용하여 수행 할 수 있습니다.

1. git의 예
2. 다른 예시

이러한 유형의 경우 Google Fusion Tables 를 사용해야합니다 . API는 그 목적을 위해 설계되었습니다.

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>

나는 당신이 그렇게 할 수 있도록 Stein을 구축하고 있습니다. 또한 시트에서 직접 데이터를 표시하려는 경우 HTML 전용 솔루션을 제공합니다. steinhq.com 에서 확인하십시오 .