院長先生、2025-2026 年末年始の自由研究にいかが？8️⃣「音声で自動日記④ 日記とTODOをAPI KEY無しで」
先日は7️⃣の記事を書きました
先日はスマホでの稼働を確認しました
朝のROUTINE
私の朝のROUTINEは電車の駅に行くまでの間に
日記：過去の振り返り
TODO：未来の予定
を音声入力で行うということをオートメモ（ソースネクスト社）＆ZAPIERの連携で行ってきました
オートメモに入力する際に
「日記です日記です」と入れると文字起こしされた日記がgoogleカレンダーに、それ以外がSlackとGoogle Taskに入るようにしていました。
しかし、オートメモの仕様設定変更で最近は手入力になっておりました。
私の趣味は
僕には趣味が無いのですが唯一の趣味がTODOを消すことなんです
最近もChromeの拡張機能で簡単にGoogle TaskにTODOを入れることができるものを作りました
しかし、この機能はPCのChromeでしか使えないのです・
スマホで朝にまとめて過去の振り返りとみたいの創造を
日記：過去の振り返り（音声＞Google Calendar)
TODO：未来の予定（音声＞Google Task）
をGASでつくってもらいましょう
ここまでで皆さん出来ていると思うのでシンプルバージョンで書かせていただきます
【準備】このアプリの仕組み
料理に例えるとこんな感じです。
食材： 先生の声
お皿A（日記用）： Googleカレンダー
お皿B（TODO用）： Google Tasks ←今回はここが新挑戦！
今回はAIは使わないことにしました。アプリを作るコード作成にはAI使いましたが シンプルに動くもので十分なのとAPIの取得が難しいと言われましたので
1️⃣Google DriveからGoogle Apps Script
2️⃣プロジェクトの名前を変える
3️⃣画面左側のメニューにある 「サービス」 の隣の 「＋」 ボタン
リストが出てくるので、下の方にある 「Google Tasks API」 を探してクリック。下の 「追加」 ボタンを押します。左側の「サービス」の下に Tasks と表示されたら成功です！
4️⃣裏側のプログラムを書く（コード.gs）
元あるものを消して 以下をコピペ
// ==================================================
// 【シンプル版】AIなし！日記は「昨日」の日付になります
// ==================================================
function doGet() {
return HtmlService.createHtmlOutputFromFile('index')
.addMetaTag('viewport', 'width=device-width, initial-scale=1')
.setTitle('最強の音声秘書（シンプル版）');
}
function processText(userText, mode) {
if (!userText || userText.trim() === "") {
return "まずは何か入力してください！";
}
try {
if (mode === "diary") {
// ■ 日記モード
saveToCalendar(userText);
return "【日記】昨日のカレンダーに記録しました！";
} else {
// ■ TODOモード
saveToGoogleTasks(userText);
return "【TODO】タスクに追加しました！";
}
} catch (e) {
return "🚨 エラー発生:\n" + e.message;
}
}
// カレンダーに保存する関数
function saveToCalendar(text) {
const date = new Date(); // 今の時間を持ってきて...
// ★ここを追加しました！
// 日付を「マイナス1日（昨日）」に設定変更します
date.setDate(date.getDate() - 1);
// タイトルを作る（最初の15文字）
let title = text;
if (text.length > 15) {
title = text.substring(0, 15) + "...";
}
// 昨日の日付でカレンダーに登録
CalendarApp.getDefaultCalendar().createAllDayEvent("【日記】" + title, date, { description: text });
}
// Google Tasksに保存する関数
function saveToGoogleTasks(text) {
try {
const taskLists = Tasks.Tasklists.list();
if (taskLists.items && taskLists.items.length > 0) {
const taskListId = taskLists.items[0].id;
Tasks.Tasks.insert({
title: "【TODO】" + text,
notes: "アプリから追加"
}, taskListId);
} else {
throw new Error("ToDoリストが見つかりません。");
}
} catch (e) {
if (e.message && e.message.includes("Tasks is not defined")) {
throw new Error("左側の「サービス」から「Google Tasks API」を追加してください！");
}
throw e;
}
}5️⃣ステップ4：見た目を作る（index.html）
・左側の「ファイル」の隣の 「＋」 を押し、「HTML」 を選びます。
・名前を index と入力してEnter。
・中身を以下のコードに書き換えます。（ボタンを2つにしました！）
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<style>
/* 全体のデザイン：清潔感のある白 */
body {
font-family: -apple-system, sans-serif;
text-align: center;
padding: 20px;
background-color: #f8f9fa;
color: #333;
}
h2 { color: #555; margin-bottom: 20px; font-weight: normal; }
/* 入力エリア（ここに話しかける） */
textarea {
width: 100%;
box-sizing: border-box; /* 画面からはみ出さないように */
height: 180px;
padding: 15px;
font-size: 18px;
border: 2px solid #ccc;
border-radius: 15px;
margin-bottom: 30px;
resize: none; /* サイズ変更禁止 */
background-color: white;
}
textarea:focus { outline: none; border-color: #4285F4; }
/* ボタンエリア */
.button-container {
display: flex;
justify-content: center;
gap: 20px;
}
/* ボタンの共通デザイン */
.btn {
width: 140px;
height: 100px;
border: none;
border-radius: 20px;
color: white;
font-size: 20px;
font-weight: bold;
cursor: pointer;
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.btn:active { transform: scale(0.95); box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
/* 色分け */
#btn-diary { background: linear-gradient(135deg, #4285F4, #3367D6); }
#btn-todo { background: linear-gradient(135deg, #EA4335, #C5221F); }
/* ステータス表示 */
#status { margin-top: 20px; color: #666; height: 1.5em; }
</style>
</head>
<body>
<h2>音声秘書 (AIなし版)</h2>
<textarea id="userInput" placeholder="ここをタップして、キーボードのマイクボタンを押して話してください..."></textarea>
<div class="button-container">
<button id="btn-diary" class="btn" onclick="send('diary')">
<span style="font-size:30px; margin-bottom:5px;">📘</span>
日記
</button>
<button id="btn-todo" class="btn" onclick="send('todo')">
<span style="font-size:30px; margin-bottom:5px;">✅</span>
TODO
</button>
</div>
<div id="status"></div>
<script>
function send(mode) {
const text = document.getElementById("userInput").value;
if (!text) {
alert("何も入力されていません！");
return;
}
// ボタンを押した時の表示
const statusEl = document.getElementById("status");
statusEl.innerText = "送信中...";
statusEl.style.color = "blue";
// GASに送る
google.script.run
.withSuccessHandler(showResult)
.withFailureHandler(showError)
.processText(text, mode);
}
// 成功したとき
function showResult(response) {
document.getElementById("status").innerText = "完了！";
document.getElementById("status").style.color = "green";
alert(response);
document.getElementById("userInput").value = ""; // 入力欄をクリア
}
// エラーが出たとき
function showError(e) {
document.getElementById("status").innerText = "エラー発生";
document.getElementById("status").style.color = "red";
alert("エラー: " + e.message);
}
</script>
</body>
</html>6️⃣ステップ5：運命のデプロイ（公開）
例の**「罠」**に気をつけてください！
右上の 「デプロイ」 → 「新しいデプロイ」。
左の歯車アイコンから 「ウェブアプリ」 を選択。
説明：ver1 など適当に。
次のユーザーとして実行：「自分（メールアドレス）」
アクセスできるユーザー：「全員」（←自分専用なら「自分のみ」でもOKですが、スマホのログインエラーが面倒なら「全員」推奨）
「デプロイ」 をクリック。
「アクセスを承認」 という画面が出たら、許可していきます。（「安全ではないページ」と出たら、左下の「詳細」→「（プロジェクト名）に移動」を押します）
PCで使ってみよう
スマホで使ってみよう
・スマホでの使い方スマホで送ったURLを開きます。
・毎回URLを開くのは面倒なので、ブラウザのメニューから 「ホーム画面に追加」 をしましょう。これでアプリのアイコンができます。（＜これ大切）
おーーーっ、しっかり水曜日の日記に（本日は木曜日）
今日はここまで
皆さんのGoogle CalendarやGoogleTaskに入ったと思います。
これで皆さんの朝が充実しますね
いいなと思ったら応援しよう！
よろしければサポートお願いします。 NYAUWの活動は現在マネタイズを考えずに意義のみを追求するフェーズです。 ニッチな分野のやせ我慢プロジェクトですので お気持ちだけでも嬉しいです。