回答編集履歴

2 Spreadsheetの構成説明追加

hikochang

hikochang score 616

2017/02/08 01:49  投稿

私であれは、、、
GoogleのSpreadsheetに更新履歴を記載し、GoogleAppsScriptでdoGet(e)を実装し、その中でSpreadsheetの内容を整形して返します。
メインのページでは外部htmlを読み込むJavaScriptを使い、上記の表を読み込みます。
Spreadsheetを編集するだけなので、htmlの知識のない人にも任せる事が出来ます。Googleドライブを仕事で使える環境が必要ですが、、、
---
追記
あまり親切な回答ではなかったので、、、
表示するHTMLは以下、```<div id=InformationTable>Loading....</div>```の部分をテーブルに書き換えます。
```Html
<script type="text/JavaScript">
var GoogleAppsScriptURL = 'https://script.google.com/macros/s/AKfyXyzxYzxyZXyzxYzXyzxYzxyZXyzxYzXyzxYzxyZXyzxYz_jHQTEPvP8/exec';
var request = new XMLHttpRequest();
request.onreadystatechange = function()
{
   if (request.readyState == 4)
   {
       var InformationList = JSON.parse(request.responseText);
       var html = "<TABLE>";
       for( var i=0; i<InformationList.length;i++ )
       {
         html += "<TR><TD>" + InformationList[i].date + "</TD><TD>" + InformationList[i].information + "</TD></TR>";
       }
       html += "</TABLE>";
       document.getElementById("InformationTable").innerHTML=html;
   }
}
request.open("GET", GoogleAppsScriptURL);
request.send();
</script>
<div id=InformationTable>Loading....</div>
```
GoogleAppsScriptは以下です。
```JavaScript
var gasheet="1iyzxYzXyzxYzxyZXyzxYzXyzxYzxyZXyzxYuF-ragvO4C0RA";
function doGet(e){
 var output=[];
 var ss = SpreadsheetApp.openById(gasheet);
 var sheet = ss.getSheetByName("シート1");
 var informations = sheet.getRange('C1:D5').getValues();
 for (var i=0; i<informations.length; i++){
   output.push({date:informations[i][0].toString(),information:informations[i][1].toString()});
 }
 return ContentService.createTextOutput(JSON.stringify(output)).setMimeType(ContentService.MimeType.JSON);
}
```
SpreadsheetのC列に更新日時、D列に更新内容が記載して下さい。  
 
なお、合わせて以下も読む必要があるかもしれません。
[「スタンドアローンのウェブアプリ」の意味](http://mypleis.blogspot.jp/2012/09/blog-post_12.html)
1 サンプル追加

hikochang

hikochang score 616

2017/02/07 23:31  投稿

私であれは、、、
GoogleのSpreadsheetに更新履歴を記載し、GoogleAppsScriptでdoGet(e)を実装し、その中でSpreadsheetの内容を整形して返します。
メインのページでは外部htmlを読み込むJavaScriptを使い、上記の表を読み込みます。
Spreadsheetを編集するだけなので、htmlの知識のない人にも任せる事が出来ます。Googleドライブを仕事で使える環境が必要ですが、、、
Spreadsheetを編集するだけなので、htmlの知識のない人にも任せる事が出来ます。Googleドライブを仕事で使える環境が必要ですが、、、
---
追記
あまり親切な回答ではなかったので、、、
表示するHTMLは以下、```<div id=InformationTable>Loading....</div>```の部分をテーブルに書き換えます。
```Html
<script type="text/JavaScript">
var GoogleAppsScriptURL = 'https://script.google.com/macros/s/AKfyXyzxYzxyZXyzxYzXyzxYzxyZXyzxYzXyzxYzxyZXyzxYz_jHQTEPvP8/exec';
var request = new XMLHttpRequest();
request.onreadystatechange = function()
{
   if (request.readyState == 4)
   {
       var InformationList = JSON.parse(request.responseText);
       var html = "<TABLE>";
       for( var i=0; i<InformationList.length;i++ )
       {
         html += "<TR><TD>" + InformationList[i].date + "</TD><TD>" + InformationList[i].information + "</TD></TR>";
       }
       html += "</TABLE>";
       document.getElementById("InformationTable").innerHTML=html;
   }
}
request.open("GET", GoogleAppsScriptURL);
request.send();
</script>
<div id=InformationTable>Loading....</div>
```
GoogleAppsScriptは以下です。
```JavaScript
var gasheet="1iyzxYzXyzxYzxyZXyzxYzXyzxYzxyZXyzxYuF-ragvO4C0RA";
function doGet(e){
 var output=[];
 var ss = SpreadsheetApp.openById(gasheet);
 var sheet = ss.getSheetByName("シート1");
 var informations = sheet.getRange('C1:D5').getValues();
 for (var i=0; i<informations.length; i++){
   output.push({date:informations[i][0].toString(),information:informations[i][1].toString()});
 }
 return ContentService.createTextOutput(JSON.stringify(output)).setMimeType(ContentService.MimeType.JSON);
}
```
なお、合わせて以下も読む必要があるかもしれません。
[「スタンドアローンのウェブアプリ」の意味](http://mypleis.blogspot.jp/2012/09/blog-post_12.html)

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る