このページは、https://thinkweb.co.jp/JS/diary.html (以下の内容)をURL貼付けしたものです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>日記呼び出し・更新</title>
</head>
<body>
<h2>日記システム</h2>
<label>日付: <input type="date" id="dateInput"></label>
<button onclick="fetchData()">呼出し</button><br><br>
<label>曜日: <span id="weekdayLabel">---</span></label><br>
<label>出来事:</label><br>
<textarea id="eventInput" rows="3" cols="40"></textarea><br>
<button onclick="updateData()">更新</button>
<script>
const apiUrl = "https://script.google.com/macros/s/AKfycbxs6sW5pMsfsGbS2uDQYjFA7F2N-h3XleJb9Y6OmVkqzOaY2f0RTOZo_XK4xUoIuTAZ/exec";
let currentRow = null;
function fetchData() {
const date = document.getElementById("dateInput").value;
fetch(`${apiUrl}?date=${date}`)
.then(res => res.json())
.then(data => {
if (data.error) {
alert("該当する日付が見つかりません");
return;
}
document.getElementById("weekdayLabel").innerText = data.weekday;
document.getElementById("eventInput").value = data.event || "";
currentRow = data.row;
})
.catch(err => alert("エラー: " + err));
}
function updateData() {
const event = document.getElementById("eventInput").value;
if (!currentRow) {
alert("日付を先に呼び出してください");
return;
}
fetch(apiUrl, {
method: "POST",
body: JSON.stringify({ row: currentRow, event }),
headers: { "Content-Type": "application/x-www-form-urlencoded" }
})
.then(res => res.json())
.then(msg => alert("更新完了: " + msg))
.catch(err => alert("エラー: " + err));
}
</script>
</body>
</html>
なお、日記データはグーグルドライブ上の日記データ.gsheetに保存されており、
GASに登録した関数(呼出しや書き込みなど)を通じて、Webから日記データ.gheetを操作している。
(日記データ.gheetは従来から名前を変えたが、GAS内では固定のIDで管理しているため変更は不要)
日記データ.gsheetで使われているGASは次のように確認できる。
1) まず、日記データ.gsheetを開く url https://docs.google.com/spreadsheets/d/1wwxoHhmvR3Kj6vqobvLABBgSdLBjHdrgWroxWrEr3Jo/edit?gid=0#gid=0
2)メニューの拡張機能からApps Scriptを選択 → Apps Scriptが表示される
現状では以下の3つのFunctionがある。
function setWeekdayWithHoliday() {
const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("日記");
const range = sheet.getRange("A2:A");
const values = range.getValues();
const calendar = CalendarApp.getCalendarById("ja.japanese#holiday@group.v.calendar.google.com");
const weekdays = ["日", "月", "火", "水", "木", "金", "土"];
for (let i = 0; i < values.length; i++) {
const raw = values[i][0];
if (!raw) continue;
const date = new Date(raw);
if (isNaN(date.getTime())) continue;
const wd = weekdays[date.getDay()];
const isHoliday = calendar.getEventsForDay(date).length > 0;
sheet.getRange(i + 2, 2).setValue(wd + (isHoliday ? "(祝)" : ""));
}
}
// 📌 日付を受け取って該当行のデータを返す(GETリクエスト用)
function doGet(e) {
const dateParam = e.parameter.date;
if (!dateParam) {
return ContentService.createTextOutput(JSON.stringify({ error: "date parameter missing" }))
.setMimeType(ContentService.MimeType.JSON);
}
const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("日記");
const values = sheet.getDataRange().getValues();
const targetDate = new Date(dateParam);
for (let i = 1; i < values.length; i++) {
const rowDate = new Date(values[i][0]);
if (rowDate.toDateString() === targetDate.toDateString()) {
return ContentService.createTextOutput(JSON.stringify({
weekday: values[i][1],
event: values[i][2],
row: i + 1
})).setMimeType(ContentService.MimeType.JSON);
}
}
return ContentService.createTextOutput(JSON.stringify({ error: "date not found" }))
.setMimeType(ContentService.MimeType.JSON);
}
// 📌 行番号と出来事を受け取ってシートに反映(POSTリクエスト用)
function doPost(e) {
const data = JSON.parse(e.postData.contents);
const row = data.row;
const event = data.event;
if (!row || !event) {
return ContentService.createTextOutput("Missing data")
.setMimeType(ContentService.MimeType.TEXT);
}
const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("日記");
sheet.getRange(row, 3).setValue(event); // C列(出来事)
return ContentService
.createTextOutput(JSON.stringify({ message: "Updated" }))
.setMimeType(ContentService.MimeType.JSON);
}
12月5日追記
スプレッドシートで変更があった場合、指定したアドレスにメール送信する機能を実装。
変更があったかどうかはトリガーを設定。
function notifyDiaryChange(e) {
const ss = SpreadsheetApp.getActiveSpreadsheet();
const sheetName = "日記"; // 監視対象のシート名
const mailTo = "あなたのメールアドレス"; // 通知先メールアドレス
// 対象シートのみ処理したい場合
if (e.changeType === "EDIT" || e.changeType === "OTHER") {
// 内容を取得(例:最後の更新行をメールする)
const sheet = ss.getSheetByName(sheetName);
const lastRow = sheet.getLastRow();
const date = sheet.getRange(lastRow, 1).getValue();
const event = sheet.getRange(lastRow, 3).getValue(); // C列を想定
const subject = "日記データが更新されました";
const body = Utilities.formatString(
"以下の日記が更新されました。\n\n日付: %s\n内容: %s",
date,
event
);
MailApp.sendEmail(mailTo, subject, body);
}
}