「#AIと始めてみた」山羊、垢バンに怯えながらGeminiを始める
Google AI Pro 3ヶ月無料に目がくらんだ山羊。
「#AIと始めてみた」の投稿企画に興味を持ち、
Geminiを始めてみることにしました。
……だが。
その日、山羊は思い出した。
GeminiはGoogleアカウントに紐づいている。
もし垢バンされたら、メールもYouTubeも、いろいろおしまいなのでは……？
…………Googleアカウント、怖い。
垢バン……怖い！！！
ともあれ、虎穴に入らざれば虎子を得ず。
Geminiを始めなければ、Google AI Pro 3ヶ月無料特典も得ず。
……念のため、Googleアカウントのサブ垢でサインインした山羊。
新入社員のリアム（ホッキョクギツネ）爆誕
早速不純な動機と不安をぶつける！
よかった！大丈夫っぽい！！わぁあい♪♪
Gemini、のリアム、風評被害を無事回収！！！
そういえば……Geminiって
アプリっぽいものも作れるらしいな？
……作業用のタイマーとか作れるかな？
ただのタイマーじゃなくて、
カウント機能つきのやつ。
市販の手押しカウンターだと、
一回ミスした時の調整がちょっと面倒。
足す、引く、リセットで数字を調整できたら助かる。
それに、いくつになっても褒めてもらいたい。
あらかじめ決めた時間内に終わったら褒めてくれて、
時間を超えても励ましてくれるようなやつがほしい。
難しいことはよく分からないから、
Windowsのメモ帳だけで完結できるようなやつ……。
……って、流石に難しいかぁ……。
……って、出来るんかい？！
え、えー！すごい！！！？？？？
通常のチャットで要望だけ伝えたら出来ちゃったよ？！
大事なことなので二度言いますが、
氷河期の山羊は、プログラミングの授業も概念も知らない世代です。
HTML？JavaScript？
名前は聞いたことあるけど、何をどうすればいいのかは分からない。
それなのに、Geminiに要望を伝えただけで、
自分用の作業タイマーができてしまいました。
とんでもねぇ時代だ……！
Google AI Pro 3ヶ月無料が欲しすぎるので、
この記事もしっかり投稿しておきます。
褒めてくれる作業用タイマーのコードも、
せっかくなので下に置いておきます。
Windowsのメモ帳に貼り付けて、
好きな名前をつけて html 形式で保存してください。
例：home_timer.html
なんか知らんけど、htmlだとブラウザで動くらしい。
科学の力ってスゲー！！
というわけで、
読んでくれてありがとうー！
山羊、Geminiはじめました。
今日もAIたちとわいわい生存中です🎵
以下、コード。そのままコピペで大丈夫です🦊✨
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>褒めるタイマー🦊</title>
<style>
body { font-family: sans-serif; background-color: #fff5f8; margin: 0; padding: 5px; display: flex; justify-content: center; }
.container { background: white; padding: 10px; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); width: 220px; text-align: center; border: 1.5px solid #ffccd5; }
h1 { color: #ff8fab; font-size: 0.85rem; margin: 0 0 5px 0; }
.counter-section { background: #fff0f3; padding: 5px; border-radius: 8px; margin-bottom: 8px; font-size: 0.75rem; }
.counter-controls { display: flex; justify-content: center; gap: 3px; margin-top: 3px; }
.counter-controls input { width: 30px; border: 1px solid #ffccd5; font-size: 0.75rem; padding: 1px; }
.timer-display { font-size: 2.2rem; font-weight: bold; color: #ff4d6d; margin: 5px 0; font-family: monospace; letter-spacing: -1px; }
.settings { font-size: 0.75rem; margin-bottom: 8px; color: #666; }
input[type="number"]#targetMin { width: 35px; border: 1px solid #ddd; padding: 1px; }
.main-btns { display: flex; gap: 5px; justify-content: center; }
button { padding: 5px 12px; border: none; border-radius: 15px; cursor: pointer; font-weight: bold; font-size: 0.75rem; }
.start-btn { background-color: #ff4d6d; color: white; }
.stop-btn { background-color: #ffb3c1; color: white; }
#messageArea { margin-top: 8px; min-height: 32px; font-size: 0.8rem; font-weight: bold; color: #ff4d6d; display: flex; align-items: center; justify-content: center; line-height: 1.2; }
.tiny-btn { background: #eee; font-size: 0.65rem; padding: 1px 4px; border-radius: 3px; color: #666; border: 1px solid #ccc; }
</style>
</head>
<body>
<div class="container">
<h1>🦊 褒めるタイマー</h1>
<div class="counter-section">
<div id="counterDisplay">完了: <strong>0</strong> 回</div>
<div class="counter-controls">
<input type="number" id="adjustInput" placeholder="0">
<button class="tiny-btn" onclick="adjustCounter(1)">足す</button>
<button class="tiny-btn" onclick="adjustCounter(-1)">引く</button>
<button class="tiny-btn" onclick="resetAllCounter()">リセット</button>
</div>
</div>
<div class="settings">目標：<input type="number" id="targetMin" value="1"> 分以内</div>
<div class="timer-display" id="display">0:00</div>
<div class="main-btns">
<button class="start-btn" id="startBtn" onclick="startTimer()">START</button>
<button class="stop-btn" id="stopBtn" onclick="stopTimer()" disabled>STOP</button>
</div>
<div id="messageArea"></div>
</div>
<script>
let startTime, timerInterval, elapsedTime = 0, count = 0;
const praises = ["天才！", "完璧だよ！", "がんばったね！", "神がかってる！", "流石だね！", "理想的だよ！", "よしよし！"];
const cheers = ["惜しい！次はいける！", "ドンマイ！大丈夫だよ", "つぎ頑張ろう！", "次は成功だ！"];
function startTimer() {
elapsedTime = 0;
document.getElementById('display').innerText = "0:00";
document.getElementById('messageArea').innerText = "";
startTime = Date.now();
timerInterval = setInterval(() => {
elapsedTime = Date.now() - startTime;
let totalSecs = Math.floor(elapsedTime / 1000);
document.getElementById('display').innerText = `${Math.floor(totalSecs / 60)}:${(totalSecs % 60).toString().padStart(2, '0')}`;
}, 100);
document.getElementById('startBtn').disabled = true;
document.getElementById('stopBtn').disabled = false;
}
function stopTimer() {
clearInterval(timerInterval);
document.getElementById('startBtn').disabled = false;
document.getElementById('stopBtn').disabled = true;
const targetSecs = (parseInt(document.getElementById('targetMin').value) || 1) * 60;
const actualSecs = Math.floor(elapsedTime / 1000);
const msgArea = document.getElementById('messageArea');
if (actualSecs > 0) {
count++;
document.querySelector('#counterDisplay strong').innerText = count;
msgArea.innerText = (actualSecs <= targetSecs) ? praises[Math.floor(Math.random() * praises.length)] : cheers[Math.floor(Math.random() * cheers.length)];
}
}
function adjustCounter(dir) {
const val = parseInt(document.getElementById('adjustInput').value) || 0;
count = Math.max(0, count + (val * dir));
document.querySelector('#counterDisplay strong').innerText = count;
document.getElementById('adjustInput').value = "";
}
function resetAllCounter() {
if(confirm("リセットする？")) { count = 0; document.querySelector('#counterDisplay strong').innerText = count; }
}
</script>
</body>
</html>