可愛い女の子と一緒に勉強したいからアプリを作る①✊😋

Posted at 2026-02-04

この記事は備忘録です☺

さっそくGemini（無料）で作らせたところ、
ファイルを三つ吐き出してくれました…すごい世界だ…😯

↓プロトタイプを先に見たい方は以下をクリックしてください
https://studytimerwithagirl.netlify.app/

今回はウェブアプリでnetlifyを使ってサクッと作成。
とにかく25分をループするだけというなんとも心もとない状況ですが、
これから直していけばいいかなと思っています。

html

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学習サポート！ポモドーロ</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="character-area">
            <div class="bubble" id="message">一緒に頑張ろうね！</div>
            <img src="girl.png" alt="女の子" class="char-img" id="character">
        </div>

        <div class="timer-card">
            <h1 id="timer">25:00</h1>
            <div class="controls">
                <button id="start-btn">スタート</button>
                <button id="reset-btn">リセット</button>
            </div>
            <p id="status">集中タイム！</p>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

css

style.css

body {
    background-color: #fff0f5; /* 薄いピンク */
    font-family: 'Helvetica Neue', Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

.container {
    text-align: center;
}

.character-area {
    margin-bottom: 20px;
    position: relative;
}

.char-img {
    width: 200px; /* 好きな大きさに調整してね */
    image-rendering: pixelated; /* ドットをくっきりさせる魔法のコード */
}

.bubble {
    background: white;
    padding: 15px;
    border-radius: 20px;
    position: relative;
    margin-bottom: 15px;
    display: inline-block;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    font-weight: bold;
    color: #ff69b4;
}

.timer-card {
    background: white;
    padding: 30px;
    border-radius: 30px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
}

h1 {
    font-size: 4rem;
    margin: 0;
    color: #333;
}

button {
    background: #ff69b4;
    color: white;
    border: none;
    padding: 10px 25px;
    border-radius: 50px;
    font-size: 1rem;
    cursor: pointer;
    transition: 0.3s;
    margin: 5px;
}

button:hover {
    background: #ff1493;
    transform: scale(1.05);
}

javaScript

script.js

let timeLeft = 25 * 60; // 25分を秒で
let timerId = null;
const timerDisplay = document.getElementById('timer');
const messageDisplay = document.getElementById('message');
const startBtn = document.getElementById('start-btn');

function updateTimer() {
    const minutes = Math.floor(timeLeft / 60);
    const seconds = timeLeft % 60;
    timerDisplay.textContent = `${minutes}:${seconds.toString().padStart(2, '0')}`;
}

function startTimer() {
    if (timerId !== null) return;
    
    messageDisplay.textContent = "集中、集中！応援してるよ！";
    
    timerId = setInterval(() => {
        timeLeft--;
        updateTimer();
        
        if (timeLeft <= 0) {
            clearInterval(timerId);
            timerId = null;
            messageDisplay.textContent = "お疲れ様！ゆっくり休んでね。";
            alert("休憩時間だよ！");
        }
    }, 1000);
}

function resetTimer() {
    clearInterval(timerId);
    timerId = null;
    timeLeft = 25 * 60;
    updateTimer();
    messageDisplay.textContent = "もう一回頑張る？";
}

startBtn.addEventListener('click', startTimer);
document.getElementById('reset-btn').addEventListener('click', resetTimer);

女の子の画像

これも生成AI(nano banana)です。

netlifyを使うとファイルのドラッグ＆ドロップだけでビルドできる…
こんなに簡単に作れるなんてすごい世の中になったものだなと感心します。

NMNK

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up