Googleスプレッドシートの情報を取得

JavaScript GoogleScriptAPIを活用

※ 2022 残念ながらAPIがGoogleCloudPlatformで有料設定しないと動作しなくなりました

Reference Guide - Google Spreadsheets APIs and Tools - Google Code
view source

JavaScript

var GoogleSpreadsheetsDataAPI = function(){
  
  var that = this;
  var surl = 'https://spreadsheets.google.com/feeds/cells/';
  var callBack = {};

  that.view =function(){
    getGoogleSpreadsheetsData({
      spreadsheetsUrl : 'https://docs.google.com/spreadsheet/pub?key=0AhTtJ3k83Y6RdHVjcGkyRC1hUVFCNnlHRTZ1VmZWeVE&output=html',
      worksheetId : 1,
      range : 'A2:A500',
    });
  }

  var getGoogleSpreadsheetsData = function(obj) {
    var obj = obj || {
      spreadsheetsUrl : null,
      worksheetId : null,
      range : null,
    };
  	var url = surl
     + obj.spreadsheetsUrl.replace(/.*[\?&]key=([^&]+).*/, '$1')
     + '/' + obj.worksheetId
     + '/public/values';

  	var params = {
  		alt: 'json-in-script'
  	};
  	if(obj.range) {
  		params.range = obj.range;
  	}
    console.log(obj);
    console.log(url);
  	$.ajax({
  		url: url,
  		dataType: 'jsonp',
  		data: params,
  		success: onLoadData
  	});
  }

  var onLoadData = function(data) {
  	var rows = [];
  	$(data.feed.entry).each(function(){
  		var row = parseInt(this.gs$cell.row);
  		var col = parseInt(this.gs$cell.col);
  		var t = this.gs$cell.$t;
  		while(rows.length < row) {
  			rows.push([]);
  		}
  		while(rows[row-1].length < col) {
  			rows[row-1].push('');
  		}
  		rows[row-1][col-1] = t;
  	});
    console.log(rows);

    if(callBack){
      //callBack(rows);
    }

    setTableGoogleSpreadsheetsData(rows);
    return rows;
  }

  var setTableGoogleSpreadsheetsData = function(rows){
  	var table = $('<table>');
    var domain = 'https://plus.google.com/';
    var ary =[];
  	$(rows).each(function(){
  		var tr = $('<tr>');
  		$(this).each(function(){
  			tr.append($('<td>').html('' + this));
        ary.push('' + this);
  		});
  		table.append(tr);
  	});
  	$('#ssview').empty().append(table);
  }

  return that;
}
var gs = GoogleSpreadsheetsDataAPI();
gs.view();

CSS

label{
  display:block;
}
td{
  border:1px solid #000000;
}

HTML

ページのソースを表示 : Ctrl+U , DevTools : F12

view-source:https://hi0a.com/demo/-js/js-api-google-spreadsheets/

ABOUT

hi0a.com 「ひまアプリ」は無料で遊べるミニゲームや便利ツールを公開しています。

プログラミング言語の動作デモやWEBデザイン、ソースコード、フロントエンド等の開発者のための技術を公開しています。

必要な機能の関数をコピペ利用したり勉強に活用できます。

プログラムの動作サンプル結果は画面上部に出力表示されています。

環境:最新のブラウザ GoogleChrome / Windows / Android / iPhone 等の端末で動作確認しています。

画像素材や音素材は半分自作でフリー素材配布サイトも利用しています。LINK参照。

動く便利なものが好きなだけで技術自体に興味はないのでコードは汚いです。

途中放置や実験状態、仕様変更、API廃止等で動かないページもあります。