どうしても「書きたくない！」子のための 生活けテぶれGASアプリ
※勉強が得意じゃ無い子（ASD診断あり、情緒級所属）のおうちけテぶれの記録です
※いち保護者の所感であり、専門的な知見に基づくものではありません
こだわりポイント
・入力項目を最小限に、視線移動は一次元（直線）で
・印刷をA4タテぴったりにする
・見返したときに「うっ」とならないよう、印刷された字のフォントサイズを死守
・目標はゼロから考えるのは難しい時があるので、いくつかサンプルを用意
・（しかし活用されない）
仕組み
・Google Apps Scriptを使用
・HTMLを用いた入力画面は、PC・タブレット・スマホから入力が可能
・GASで入力した内容を目スプレッドシートに蓄積します
・印刷画面にスムーズに移行します
画面イメージ
スプレッドシートイメージ
ソースコード
code:コード.gs
function doGet() {
return HtmlService.createHtmlOutputFromFile('index')
.setTitle('生活けテぶれシート')
.addMetaTag('viewport', 'width=device-width, initial-scale=1')
.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}
function processForm(data) {
try {
const ss = SpreadsheetApp.getActiveSpreadsheet();
const sheet = ss.getSheets()0; // 一番左のシートに書き込みます sheet.appendRow([
new Date(),
data.userName || "",
data.date || "",
data.goal || "",
data.score || "",
data.analysisPositive || "",
data.analysisNegative || "",
data.analysisForNext || "",
data.forTomorrow || "",
]);
return "スプレッドシートに保存しました！";
} catch (e) {
throw new Error("GAS側の保存に失敗しました: " + e.toString());
}
}
code:index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<style>
/* --- 画面表示用の設定 (ブラウザで見てる時) --- */
body {
font-family: "BIZ UDPGothic", "Helvetica Neue", Arial, sans-serif;
display: flex;
justify-content: center;
padding: 20px;
}
.sheet {
background: white;
width: 210mm;
min-height: 297mm;
padding: 20mm;
box-shadow: 0 0 15px rgba(0,0,0,0.1);
display: grid;
grid-template-columns: 1fr 1fr;
gap: 25px;
box-sizing: border-box; /* 余白を幅に含める計算 */
}
h1 { grid-column: 1 / -1; text-align: center; border-bottom: 3px solid #4CAF50; padding-bottom: 10px; color: #333; } .section { border: 1px solid #e0e0e0; padding: 15px; border-radius: 5px; background: #fafafa; } .full { grid-column: 1 / -1; }
label { display: block; font-weight: bold; margin-bottom: 8px; color: #555; font-size: 0.9em; } /* 入力欄：画面では見やすく大きめに */
input, textarea {
width: 100%; border: 1px solid #ddd; padding: 10px; border-radius: 4px; box-sizing: border-box; font-size: 16px; font-family: inherit;
}
textarea { height: rows="3"; resize: vertical; }
grid-column: 1 / -1; padding: 20px; background: #4CAF50; color: white; border: none; border-radius: 5px; cursor: pointer; font-size: 1.2em; font-weight: bold;
}
/* --- 印刷用の設定 (Ctrl+Pを押した時だけ発動) --- */
@media print {
/* 用紙サイズと余白を物理的に固定 */
@page {
size: A4 portrait;
margin: 20mm;
}
/*@pageのmarginで余白を作るのでここは0*/
body { background: white; padding: 0; }
.sheet {
box-shadow: none;
border: none;
width: 100% !important;
min-height: auto;
padding: 0; /* @pageのmarginで余白を作るのでここは0 */
display: block;
}
/* ボタンを消す */
/* 背景色を印刷に出す設定（ブラウザ設定に依存しないように） */
.section { background: #fafafa !important; -webkit-print-color-adjust: exact; } /* ★ここは見出し★フォントサイズを物理単位 pt で指定★ */
label {
font-size: 12pt !important;
font-weight: normal;
}
/* ★ここは枠の中★フォントサイズを物理単位 pt で指定★ */
input, textarea {
font-size: 12pt !important; /* ワードの12pt相当 */
font-weight: bold !important;/*太字にしてみる*/
border: 1px solid #ccc !important; /* 枠線を少しハッキリさせる */ appearance: none;
-webkit-appearance: none;
}
}
</style>
</head>
<body>
<div class="sheet">
<h1>生活けテぶれシート</h1>
<div class="section">
<label>名前</label>
<input type="text" id="userName" tabindex="1">
</div>
<div class="section">
<label>日付</label>
<input type="text" id="date" tabindex="1">
</div>
<div class="section full">
<label>【け】今日の目標</label>
<input type="text" id="goal" list="goal-options" placeholder="クリックして選ぶか入力してね" tabindex="2">
<datalist id="goal-options">
<option value="タイマーが鳴ったら、今やっていることを止める">
<option value="やりたいことがあっても、深呼吸を3回してから始める">
<option value="次に使うものを準備してから、休憩に入る">
<option value="何かをしてもらったとき、相手の方を向いて「ありがとう」を言う">
<option value="できなかったことも、正直にシートに書く">
</datalist>
</div>
<div class="section">
<label>【テ】今日の点数</label>
<input type="text" id="score" tabindex="2">
</div>
<div class="section full">
<label>【ぶ】＋ うれしかったこと、よかったこと</label>
<textarea id="analysisPositive" tabindex="4"></textarea>
</div>
<div class="section full">
<label>【ぶ】ー かなしかったこと、よくない出来事</label>
<textarea id="analysisNegative" tabindex="4"></textarea>
</div>
<div class="section full">
<label>【ぶ】⇒ 次はどうする？</label>
<textarea id="analysisForNext" tabindex="4"></textarea>
</div>
<div class="section full">
<label>明日にむけて</label>
<textarea id="forTomorrow" tabindex="5"></textarea>
</div>
<button id="submit-btn" onclick="sendToSpreadsheet()">スプレッドシートに保存して印刷準備</button>
</div>
<script>
// ページが読み込まれたら実行される
window.onload = function() {
const now = new Date();
const y = now.getFullYear();
const m = now.getMonth() + 1; // 月は0から始まるので+1
const d = now.getDate();
// 「yyyy年m月d日」の形式で作る
const todayString = y + "年" + m + "月" + d + "日";
// input欄にセットする
document.getElementById('date').value = todayString;
};
function sendToSpreadsheet() {
const btn = document.getElementById('submit-btn');
btn.disabled = true;
btn.innerText = "送信中...（数秒かかります）";
// データを集める
const payload = {
userName: document.getElementById('userName').value,
date: document.getElementById('date').value,
goal: document.getElementById('goal').value,
score: document.getElementById('score').value,
analysisPositive: document.getElementById('analysisPositive').value,
analysisNegative: document.getElementById('analysisNegative').value,
analysisForNext: document.getElementById('analysisForNext').value,
forTomorrow: document.getElementById('forTomorrow').value,
};
// GASの関数を呼び出す
google.script.run
.withSuccessHandler(function(msg) {
alert(msg);
window.print(); // 印刷ダイアログを出す
btn.disabled = false;
btn.innerText = "スプレッドシートに保存して印刷準備";
})
.withFailureHandler(function(err) {
alert("エラーが発生しました: " + err);
btn.disabled = false;
btn.innerText = "再試行する";
})
.processForm(payload);
}
</script>
</body>
</html>
