Google Drive の情報をJavaScriptから取得する

https://docs.google.com/spreadsheets/d/1JjdrGuKQGUORuCeMZf2TpdIzOI6duyMgLl3lT8ii1QA/edit#gid=0

準備：

https://drive.google.com を開く

ファイルを選択し、「ウェブ上で一般公開」にする

CSVを取得

上限無限行？

ただし、クロスドメインになるので取得にはサーバー側のプログラムが必要

var gdrive_url = 'https://docs.google.com/spreadsheets/d/';
var gdrive_csv = gdrive_url + id + '{{id}}/export?format=csv&id=' + id;

JSONPを取得

クロスドメイン対応。JavaScript側でコールバック関数を呼び出し可能

上限650行？

いや、空行があるとそこで途切れる様子。

var callback_url = 'https://spreadsheets.google.com/feeds/list/' + id + '/od6/public/values?alt=json-in-script&callback=callback';

SQL風にを取得

上限150行？

var url = 'http://spreadsheets.google.com/tq?key='+id+'&gid=0&range=A3:B9&pub=1';

http://webos-goodies.jp/archives/51310352.html

https://sites.google.com/site/appsmemos/home/contents/spreadsheet

Google Cloud プラットフォーム

仕様が変わって上記までの無料取得方法は使えません。

GCPでGoogleDrive APIを有効にする必要があります。

APIの使用は有料です。

https://console.cloud.google.com/apis/dashboard?hl=ja

Callback

https://images-na.ssl-images-amazon.com/images/G/09/associates/paapi/dg/index.html?ItemSearch.html


  view source
  JavaScript
  var url;

//var id = '1JjdrGuKQGUORuCeMZf2TpdIzOI6duyMgLl3lT8ii1QA';
var id = '1c5vEHfO-BCa-qQjnHQ0zNgcefY9092JWaJ1UcqD_qwQ';
var gdrive_url = 'https://docs.google.com/spreadsheets/d/';
var gdrive_csv = gdrive_url + '{{id}}/export?format=csv&gid=0&id={{id}}';
gdrive_csv = gdrive_csv.replace(/\{\{id\}\}/g, id);
gdrive_url += id;
url = '/api/get?q=' + gdrive_csv;




/*
************************************************************************************************
*/


//シート2は/od7
callback_url = 'https://spreadsheets.google.com/feeds/cells/' + id + '/od6/public/values?alt=json-in-script&callback=callback';
callback_url = 'https://spreadsheets.google.com/feeds/list/' + id + '/od6/public/values?alt=json-in-script&callback=callback&range=A:B';


var callback = function(json){
  console.log('feeds/list/');
  console.log(json);
  //console.log(json.feed.entry[6]['gsx$id']['$t']);
  //console.log(json.feed.entry[6]['gsx$name']['$t']);


  var context = {entry:json.feed.entry};

  var template = Hogan.compile($('#input').html());

  var output = template.render(context);

  $('#output').prepend(output);
      
}

console.log(callback_url);
var script = document.createElement('script'); 
    script.src = callback_url; 
    document.body.appendChild(script);
  
/*
************************************************************************************************
*/



/*
<script src="http://www.google.com/jsapi"></script>
<script>
  google.load("visualization", "1");
</script>
*/



var url = 'http://spreadsheets.google.com/tq?key='+id+'&gid=0&range=A1:C999&pub=1&output=json';


var query = new google.visualization.Query(url);
query.send(callbackRawData);



function callbackRawData(response){
  var data = response.getDataTable();
  console.log('google.visualization.Query callback');
  console.log(data);
  var row = 3,
      col=1;
  console.log(data.getFormattedValue(row, col));
}

var query2 = new google.visualization.Query(url);
  console.log('google.visualization.Query callback SQL');
query2.setQuery("SELECT * LIMIT 999");
query2.send(callbackSQLData);


function callbackSQLData(response){
  console.log(response);
}


  CSS
  
  HTML
  
    ページのソースを表示 : Ctrl+U , DevTools : F12
    view-source:https://hi0a.com/demo/-js/js-api-google-drive/
  
  ABOUT
  
    hi0a.com 「ひまアプリ」は無料で遊べるミニゲームや便利ツールを公開しています。
    プログラミング言語の動作デモやWEBデザイン、ソースコード、フロントエンド等の開発者のための技術を公開しています。
    必要な機能の関数をコピペ利用したり勉強に活用できます。
    プログラムの動作サンプル結果は画面上部に出力表示されています。
    環境:最新のブラウザ GoogleChrome / Windows / Android / iPhone 等の端末で動作確認しています。
    画像素材や音素材は半分自作でフリー素材配布サイトも利用しています。LINK参照。
    動く便利なものが好きなだけで技術自体に興味はないのでコードは汚いです。
    途中放置や実験状態、仕様変更、API廃止等で動かないページもあります。