ポモドーロタイマーの作り方｜AIと話すだけでブラウザアプリ

AI（Claude）が書き、運営者が確認して公開した記事です。分担と確かめたもの →

AIのチャットに日本語で頼むだけで、ブラウザで動く小さなアプリは作れます。このレシピで作るのは、25分作業して5分休憩をくり返す「ポモドーロタイマー」です。インストールは要りません。パソコンに最初から入っているメモ帳（Mac ならテキストエディット）とブラウザだけで動きます。

デモを開いて試す → 完成版の HTML をダウンロード（MIT）

ダウンロードしたファイル（pomodoro-timer.html）は、パソコンならダブルクリックするとブラウザで開きます。中身を書き換えたいときは、メモ帳などで開いて保存し直します（MIT ライセンス。ライセンスの説明）。

スマホで読んでいる人へ: このレシピの保存の手順はパソコン向けです。スマホでは、上のデモをそのまま使うか、ブックマークしてください。

忙しい人は、次の3つで足ります。

1. デモを開く
2. 下の「作り方」の4つの文をコピーして、AIに順に送る
3. 答えを保存して、ブラウザで開く

このレシピは、AI（Claude）が作って動かした記録です。AIが「はじめての人がAIに送りそうな文」を想定し、その頼み方どおりにコードを書き、テストして、見つかった不具合を直しました。

できあがるもの

完成品は /demos/pomodoro-timer/ で実際に動かせます。

• 「スタート」「一時停止」「リセット」の3つのボタン
• 25分たつと休憩（緑色）、5分たつと作業（赤色）に自動で切り替わる
• 切り替わるときに音が3回鳴り、画面のカードが光る（音は「音で知らせる」のチェックで消せる）
• 残り時間がブラウザのタブの名前にも出る（別のタブを見ていても分かる）
• スマホの幅（320px）でもボタンが1行に収まる
• 1つの HTML ファイル（約9KB）だけで動き、インターネットには接続しない

HTML はページの中身、CSS は見た目、JavaScript は動き（ボタンを押したときの処理）を書くための言葉です。この3つを1つのファイルにまとめてもらいます。

用意するもの

• パソコン: 作るのはパソコンで行います（保存の手順がパソコン向けのため）。できたタイマーを使うだけなら、あとでスマホからでも開けます
• AIのチャット: 文章で頼むとコードを書いてくれるもの。この記事で使ったのは Claude ですが、特定のサービスでないと作れない内容ではありません
• ブラウザ: Edge・Chrome・Safari など、ふだん使っているもの
• メモ帳（Windows）かテキストエディット（Mac）: AIが書いたコードを貼り付けて保存するため

「ポモドーロ」「ポモドーロ・テクニック」は、考案者 Francesco Cirillo 氏の登録商標です（同氏の公式サイトで2026年10月22日に確認）。このレシピは自分で使うタイマーの作り方で、同氏や同氏の会社とは関係ありません。

かかった時間は、AI（Claude）の作業で約4分でした（2026年10月1日、作成から動作テストまで）。人が文章を打ち込み、ファイルを保存する時間は含みません。

作り方：AIに送る4つの文

下の文は、コピーしてそのままAIのチャットに貼り付けられます。AIの答え方は毎回少しずつ違うので、出てくるコードがこのレシピと同じになるとは限りません。違っていても、保存して開き、ボタンを押して確かめるところは同じです。

0. AIのチャットを開く

Claude や ChatGPT などのAIチャットを、ブラウザで開きます。どこで開けるか、お金はかかるか、ログインが要るかは「生成AIで何ができる？」の「AIチャットの始め方」にまとめています。

1回目：最初の頼み方

ブラウザで動くポモドーロタイマーを作ってください。25分作業して5分休憩、をくり返します。
スタート・一時停止・リセットのボタンをつけてください。
HTML・CSS・JavaScriptを1つのファイルにまとめて、外部のライブラリやインターネットへの接続は使わないでください。

「1つのファイルに」「外部のライブラリを使わない」と書いておくのがコツです。ライブラリ（ほかの人が作った部品）を読み込む形で返ってくると、ファイルが複数になったり、ネットにつながっていないと動かなかったりします。

答えをファイルに保存して、ブラウザで開く

AIの答えが出たら、すぐに保存して動かしてみます。答えの中のコードの枠（<!DOCTYPE html> から </html> まで）をコピーします。多くのチャット画面では、コードの枠の右上にある「コピー」ボタンを押すと全部コピーできます。

Windows（メモ帳）

1. メモ帳を開いて、コードを貼り付ける
2. 「ファイル」→「名前を付けて保存」
3. ファイル名を pomodoro.html にする。「ファイルの種類」は「すべてのファイル」、「エンコード」は「UTF-8」を選ぶ
4. 保存した pomodoro.html をダブルクリックすると、ブラウザで開く

ファイル名が pomodoro.html.txt になると、ブラウザではなくメモ帳で開いてしまいます。開けないときは、ファイル名の最後が .html になっているかを確かめてください。

⚠️ Windows のメモ帳での保存手順は、AI（Claude）が画面で確かめたものではありません。メモ帳の画面が違うときは、AIに「メモ帳で .html として保存する方法」を聞いてください。

Mac（テキストエディット）

Apple のサポートページ「MacのテキストエディットでHTML書類を扱う」の手順どおりです。

1. 「ファイル」→「新規」を選び、「フォーマット」→「標準テキストにする」を選ぶ
2. コードを貼り付ける
3. 「ファイル」→「保存」で、名前を pomodoro.html にする。拡張子を聞かれたら「.htmlを使用」をクリック
4. 保存したファイルをダブルクリックすると、ブラウザで開く

保存し直すために開くと、テキストエディットはコードではなく表示した結果を見せます。コードのまま開きたいときは、テキストエディットの設定で「HTMLファイルを、フォーマットしたテキストではなくHTMLコードとして表示します」を選びます（同じ Apple のページに説明があります）。

開いたら、ボタンを押してみる

タイマーが表示されたら、次の2つを試します。どちらも1分かかりません。

1. スタートを2回押して、10秒ほど見る（正しければ1秒に1ずつ減る）
2. 一時停止を押して、数秒見る（正しければ止まる）

直したコードをもらったら、同じファイルに上書き保存して、ブラウザで開き直します（ブラウザの更新ボタンでも読み直せます）。2回目以降も、この「保存 → 開く → 押してみる」をくり返します。AIが変えた部分だけを返してきて、どこに貼ればいいか分からないときは、次の文を送ります。

直したあとのコードを、省略せずに全部、1つのファイルで出してください。

2回目：おかしなところを伝えて直してもらう

押してみて次のようになっていたら、下の文をAIに送ります。

スタートを2回押すと、時間が2倍の速さで減っていきます。そのあと一時停止を押しても止まりません。直してください。
それと、別のタブを見ている間も時間がずれないようにしてください。

1行目の症状が出なかったときは、2行目だけを送れば足ります。

直してほしいときは、何をしたら、どうなったかをそのまま書きます。「動きません」だけだと、AIはどこを直せばいいか推測するしかありません。

時間になると確認の窓（OK ボタンのある小さな窓）が出て、OK を押すまで次の時間が始まらないときは、「時間になったときの確認の窓をやめて、画面の文字で知らせてください」と足してください（この1文は AI（Claude）は試していません。AI（Claude）は2回目で、頼まれなくても窓をやめました）。

AI（Claude）の1回目にも、表の3つの不具合が全部入っていました。時計を早送りする仕掛けで確かめると、スタートを2回押して10秒後は 24:40（正しくは 24:50）、そのあと一時停止して5秒後は 24:35（止まらない）、タブが隠れてタイマーが1分に1回しか動かない状態を再現して5分後は 24:55（正しくは 20:00）でした。 原因は、スタートを押すたびに「1秒ごとに1減らす」仕掛けが増え、一時停止では最後の1つしか止められなかったことです。タブのずれは、ブラウザが見ていないタブのタイマーを間引く仕様によるもので、Chrome は条件によっては1分に1回しか動かさないと説明しています（Chrome for Developers・MDN の setTimeout の説明）。

AI（Claude）がこの文を受けて変えたのは次の点です。直したあとは、2回押しても 24:50、一時停止で止まる、という正しい結果になりました。

• 動いているあいだはスタートを押しても何もしない
• 残り時間を「終わる時刻 − 今の時刻」で毎回計算する（間引かれても、次に動いた瞬間に正しい時間に戻る）
• 確認の窓をやめて、画面の文字で知らせる

3回目：使いやすくしてもらう

時間になったら音で知らせてください。音のファイルは使わずに作れますか。
残り時間をブラウザのタブの名前にも出してください。
スマホでも押しやすいように、ボタンを大きくしてください。

音はブラウザに入っている Web Audio API（音を作って鳴らす機能）で「ピッ」と作るので、音声ファイルは要りません。ただしブラウザには、人がボタンを押す前には音を鳴らさない決まりがあります（MDN の自動再生の説明）。そこでスタートを押したときに音の準備をする作りにしました。

ほかに、作業と休憩で色を変える、進み具合のバー、作業の回数の表示、暗い画面設定（ダークモード）への対応も入れました。スマホで小さく表示されないよう、スマホ向けの幅の指定（viewport）も足しています。

4回目：確かめて見つけた問題を直す

3回目のタイマーを、スマホの幅を再現して画面写真を撮ったところ、幅320pxでは「一時停止」の文字が2行に折れていました（幅375pxでは1行でした）。

スマホの幅が狭いと「一時停止」の文字が2行に折れてしまいます。1行に収めてください。

ボタンの文字の大きさを画面の幅に合わせて小さくする指定にして、幅320pxでもボタンの高さがそろうことを確かめました。

できたものをどう確かめたか

完成版は、次の方法で確かめました。

• 計算のテスト（20項目）: 時計を早送りする仕掛けで、10秒後・一時停止・再開・リセット・25分後に休憩へ切り替わる・さらに5分後に作業へ戻る・タブが27分隠れていた場合、などをすべて確認
• ブラウザで操作: アプリ内ブラウザの幅320pxで、スタートを2回押して約4秒 → 24:56、一時停止して2秒 → 24:56 のまま。タブの名前も同じ時間になっていることを確認
• 見た目: アプリ内ブラウザで幅320px・375pxの画面を確認。暗い画面は CSS の指定を入れたところまで（画面写真は撮っていません）

使ったブラウザの機能（タイマー、音を鳴らす Web Audio API、タブの切り替えの検知）は、MDN でいずれも主要なブラウザで使える「Baseline」と表示されています（2026年10月1日時点。setInterval・AudioContext・visibilitychange）。

⚠️ AI（Claude）は、音が実際にスピーカーから聞こえるかは耳で確かめていません。音を鳴らす仕組みが動いている（止まっていない）ところまでを確認しました。実機のスマホでも試していません。

自分で変えてみる

完成したら、少しずつ自分好みに変えてみてください。変えたいところを、AIに続けて頼むだけです。

時間を変える

AI（Claude）のコードでは、<script> のすぐ下の2行で長さ（分）を決めています。

var WORK_MIN = 25;
var BREAK_MIN = 5;

この数字を書き換えて保存し、ブラウザで開き直すと時間が変わります。AIのコードが違う形のときは、こう頼みます。

作業を50分、休憩を10分に変えたいです。どこの数字を変えればいいか教えてください。

色を変える

作業中の色を青に、休憩中の色をオレンジに変えてください。変えたところだけ教えてください。

「変えたところだけ」と書くと、長いコードを全部見比べなくて済みます。

4回に1回、長い休憩にする

作業を4回終えたら、次の休憩だけ15分にしてください。

この2つの頼み方（色・長い休憩）は、AI（Claude）はまだ試していません。直してもらったら、上の「開いたら、ボタンを押してみる」と同じように、ボタンを何回か押して時間が正しく減るかを見てください。時間のテストは、作業時間を一時的に1分にすると短く済みます。

気をつけること

• AIが書いたコードには間違いが入ることがあります。このレシピでも、1回目は「2回押すと2倍速」「一時停止が効かない」状態でした。Claude のヘルプセンターも、Claude が間違った答えを出すことがあり、唯一の情報源として頼らないよう案内しています（Claude is providing incorrect or misleading responses）。できたら、実際にボタンを押して確かめてください。AIを使う前に知っておきたい注意点は「生成AIで何ができる？」にまとめています。
• AIに送る文に、個人情報を書かないでください。名前・住所・電話番号・メールアドレス・パスワードなどは、タイマー作りには要りません。個人情報保護委員会も、生成AIサービスの利用について注意喚起を出しています。
• インターネットで見つけた HTML ファイルを、中身が分からないまま開かないでください。このレシピのように、自分が頼んで作ったものを使います。

次の一歩：人に使ってもらう

できたタイマーは、今は自分のパソコンの中だけで動いています。友だちやスマホからも開けるようにするには、ファイルをインターネット上に置いて公開します。HTML・CSS・JavaScript だけの小さなアプリなら、無料の置き場で公開できることが多いです。どこに置けばいいかは、AIで作ったものを無料で公開する方法で比べています。

毎月の表計算のような、くり返す作業をAIに任せたいときは「毎月のCSV集計をAIに任せる」も参考にしてください。お金の記録を月ごとに合計するなら「おこづかい帳アプリの作り方」、覚えたいことの復習なら「単語カード・クイズアプリの作り方」が、同じ流れで作れます。

作ったものを人に見てもらうなら → Cloudflare Workers で独自ドメインで公開する

「つくる（アプリ）」のレシピ

• おこづかい帳アプリを作る
• 単語カード・クイズアプリを作る
• スマホだけで自分の単語帳を作る
• ポモドーロタイマーを作る（いま読んでいる記事）
• 割り勘・会費計算アプリを作る

作るのページで、ほかのカテゴリも見る →