このようなページになります（スマホから閲覧）。グラフと表の数字が一定時間毎に更新されます。
元となる温度と湿度のデータは前回投稿の「Nature RemoとGASを使って温度・湿度をリアルタイムで記録する。」の方法で取得しています。
実感として、温度と湿度だけでもいろいろと理解が深まりますね。原木椎茸の栽培にあたっては、「寒暖差」「乾湿差」がダイレクトに品質に影響するな……と。
ということで、こういうページを作ってくと便利なので、以下作り方の説明です。
① Webページに載せるデータを作成
前回投稿で作った温度・湿度のログを取るスプレッドシートに追加でWebページに載せるデータを作ります。上の写真と同じものを作るとちょっと分量が多いので、直近3日分（72時間分）の温度・湿度の変化を見る線グラフと平均気温、平均湿度の表を作ってみます。
①-1 シートの追加
①-2 「graph」シート
「log」シートのデータをそのままグラフにすると期間がどんどん長くなってしまうので、GASで「graph」シートに直近3日分（72時間分）のデータだけ持ってきてグラフを作ります。前回投稿の通り15分毎にデータを取得している場合は288行分になります。
スプレッドシートの「ツール」→「スクリプト エディタ」でGASを開きます。「ファイル」→「New」→「スクリプト ファイル」を選択、作成。
コードは以下の通りです。
function graphData() {
var spreadsheet = SpreadsheetApp.openById("スプレッドシートID");
var logSheet = spreadsheet.getSheetByName("log");
var graphSheet = spreadsheet.getSheetByName("graph");
var lastRow = logSheet.getLastRow();
if(lastRow > 288) {
var timeStamp = logSheet.getRange(lastRow - 287, 1, 288).getValues();
var tm = logSheet.getRange(lastRow - 287, 2, 288).getValues();
var hu = logSheet.getRange(lastRow - 287, 3, 288).getValues();
} else if(lastRow <= 288) {
var timeStamp = logSheet.getRange(2, 1, lastRow).getValues();
var tm = logSheet.getRange(2, 2, lastRow).getValues();
var hu = logSheet.getRange(2, 3, lastRow).getValues();
}
graphSheet.getRange(2, 1, 288).setValues(timeStamp);
graphSheet.getRange(2, 2, 288).setValues(tm);
graphSheet.getRange(2, 3, 288).setValues(hu);
}
2行目の「スプレッドシートID」は書き換えてください。当該スプレッドシートURLの下記部分です。
トリガー設定を行い一定時間毎に実行されるようにしまておきます。
実行されると直近3日分（72時間分）のデータが入ります。
グラフを作成。
①-3 「web」シート
「web」シートはAVERAGE関数で平均を出します。直近1日間は193行目から289行目、直近3日間は2行目から289行目までになります。
② HTMLの作成
GASで「ファイル」→「New」→「HTML ファイル」を選択。HTMLの作成をします。ファイル名は「index」にしておきます。
コードは以下の通りです。
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<center>
<h1>データ閲覧Webページ</h1>
<br />
<iframe></iframe>
<br />
<table>
<tr>
<th></th>
<th> 直近1日間 </th>
<th> 直近3日間 </th>
</tr>
<tr>
<td>平均気温（℃）</td>
<td align="right"><?=aveTm1?></td>
<td align="right"><?=aveTm3?></td>
</tr>
<tr>
<td>平均湿度（%）</td>
<td align="right"><?=aveHu1?></td>
<td align="right"><?=aveHu3?></td>
</tr>
</table>
<br />
</center>
</body>
</html>
10行目の<iframe></iframe>部分には「graph」シートで作成したグラフを埋め込みます。
「グラフを公開」から「埋め込む」→「公開」で<iframe>タグのリンクが表示されますので<iframe></iframe>部分を書き換えます。「インタラクティブ」でグラフが動的になります。
③ HTMLを表示するためのGASの作成
GASで「ファイル」→「New」→「スクリプト ファイル」を選択。
コードは以下の通りです。
function doGet() {
var spreadsheet = SpreadsheetApp.openById("スプレッドシートID");
var webSheet = spreadsheet.getSheetByName("web");
var aveTm1 = webSheet.getRange(2, 2).getValue();
var aveHu1 = webSheet.getRange(3, 2).getValue();
var aveTm3 = webSheet.getRange(2, 3).getValue();
var aveHu3 = webSheet.getRange(3, 3).getValue();
var web = HtmlService.createTemplateFromFile("index");
web.aveTm1 = aveTm1.toFixed(1);
web.aveHu1 = aveHu1.toFixed(1);
web.aveTm3 = aveTm3.toFixed(1);
web.aveHu3 = aveHu3.toFixed(1);
return web.evaluate().setTitle("データ閲覧Webページ");
}
2行目の「スプレッドシートID」は書き換えてください。
④ ウェブアプリケーションとして公開
・「Project version: 」→ New
・「Execute the app as: 」→ User accessing the web app
・「Who has access to the app: 」→ 全ユーザー
で更新します。
「Current web app URL:」で表示されるURLでデータの閲覧ができます。コードを変更した場合はProject versionをNewで更新します。
（下の「Test web app for your latest code.」が開発環境のURLになります。Project versionを更新しなくてもコードの変更を確認できます。）
⑤ ページの確認
共有されている無料のGoogleアカウントでは、初回のWebページ表示時に、「このアプリは確認されていません」というページが表示されます。ここで「安全なページに戻る」をクリックすると表示できませんので、「詳細」→「プロジェクト名（安全ではないページ）に移動」から承認します。
こんな感じになります（スマホから閲覧）。
ちなみに、スプレッドシートを共有しているGoogleアカウント（にログインしているブラウザ）からでないとWebページを表示できません。
＊＊＊
ちゃんと動きましたでしょうか？
あとは、どんなデータがあれば栽培の役に立つのかですね。原木椎茸の場合は、「寒暖差」「乾湿差」を見るための、分散の値が重要そうです。
うまく活かしていきたいですね。
・関連投稿
Nature RemoとGASを使って温度・湿度をリアルタイムで記録する。
