Googleスプレッドシートapiを使用すると、ユーザーのGoogleドライブに保存せずに編集可能なウェブサイトにスプレッドシートを埋め込むことはできますか？インタラクティブなGoogleスプレッドシートを埋め込む
私たちのウェブサービスにログインするユーザーごとに、私たちのデータベースからユーザーのデータを取得し、スプレッドシート上でユーザーに表示したいと考えています。ユーザーは編集することができ、それを確認するとスプレッドシートのデータがデータベースにアップロードされます。このプロセスでは、ユーザーのGoogleドライブにデータを保存する必要はなく、ユーザーはGoogleドライブへのアクセスを許可する必要はありません。これはGoogleのスプレッドシートAPIで可能ですか？
また、 私はこのように動作する良い例を探していますが、何も見つかりませんでした。助言がありますか？どうもありがとうございました。
ここでは、スプレッドシートの作成と編集が可能なhtml版の簡単な例を示します。あなたが望むなら、これをWebアプリケーションとして展開することができます。私はそれをモードレスダイアログとして開発しました。セルを編集するには、変更を加えてEnterキーを押します。背景が黄色に変わり、スプレッドシートが更新された後、背景色が白に戻ります。他のコントロールはありません。
多くの追加機能を追加することができますが、これはクライアントとサーバーの間のクライアント通信を含むいくつかの基本事項をカバーしています。
Googleのスクリプトコード：
function htmlSpreadsheet()
{
var br='<br />';
var s='';
var hdrRows=1;
var ss=SpreadsheetApp.getActiveSpreadsheet();
var sht=ss.getActiveSheet();
var rng=sht.getDataRange();
var rngA=rng.getValues();
s+='<table width="100%">';
for(var i=0;i<rngA.length;i++)
{
s+='<tr>';
for(var j=0;j<rngA[i].length;j++)
{
if(i<hdrRows)
{
s+='<th id="cell' + i + j + '">' + '<input id="txt' + i + j + '" type="text" value="' + rngA[i][j] + '" size="8" onChange="updateSS(' + i + ',' + j + ');" />' + '</th>';
}
else
{
s+='<td id="cell' + i + j + '">' + '<input id="txt' + i + j + '" type="text" value="' + rngA[i][j] + '" size="8" onChange="updateSS(' + i + ',' + j + ');" />' + '</th>';
}
}
s+='</tr>';
}
s+='</table>';
//s+='<div id="success"></div>';
s+='</body></html>';
var userInterface=HtmlService.createHtmlOutputFromFile('htmlss').setWidth(1000).setHeight(450);
userInterface.append(s);
SpreadsheetApp.getUi().showModelessDialog(userInterface, 'Spreadsheet Data for ' + ss.getName() + ' Sheet: ' + sht.getName());
}
function updateSpreadsheet(i,j,value)
{
var ss=SpreadsheetApp.getActiveSpreadsheet();
var sht=ss.getActiveSheet();
var rng=sht.getDataRange();
var rngA=rng.getValues();
rngA[i][j]=value;
rng.setValues(rngA);
var data = {'message':'Cell[' + Number(i + 1) + '][' + Number(j + 1) + '] Has been updated', 'ridx': i, 'cidx': j};
return data;
}
htmlss.htmlファイル：
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function() {
});
function updateSS(i,j)
{
var str='#txt' + String(i) + String(j);
var value=$(str).val();
$(str).css('background-color','#ffff00');
google.script.run
.withSuccessHandler(successHandler)
.updateSpreadsheet(i,j,value)
}
function successHandler(data)
{
//$('#success').text(data.message);
$('#txt' + data.ridx + data.cidx).css('background-color','#ffffff');
}
console.log('My Code');
</script>
<style>
th{text-align:left}
</style>
</head>
<body>
<div id="success"></div>