Pomodoro Timer カスタマイズガイド

準備する

ダウンロードしたZIPファイルを展開し、わかりやすい場所（デスクトップなど）に置きます。フォルダの置き場所やCodex/Claude Codeの準備方法がわからない場合は、AIに直接聞いてみましょう。

AIに相談する

ChatGPTやClaudeに、アプリの中身について聞いてみましょう。ここで「何ができるアプリか」「どこを変えられそうか」を理解しておくと、この後の作業がスムーズです。

サンプルプロンプト：

変えたいことを相談する

タイトルやアクセントカラー、ボタンの文言など、変えたい部分をAIに伝えましょう。「こう変えたい」と伝えるだけで、Codex/Claude Codeに貼れる指示文を作ってくれます。

Codex/Claude Codeで実行する

作ってもらった指示文を、CodexまたはClaude Codeに貼り付けると、ファイルが実際に書き換わります。

ローカルで確認する

変更したファイル（index.htmlなど）をブラウザで開いて、見た目を確認しましょう。問題なければ次のステップに進みます。

GitHubにアップロードしてスマホでも確認

変更ができたら、GitHub Pages（無料で使えるWeb公開サービス）を使ってアプリをインターネット上に公開し、スマホからも使えるようにしましょう。公開のやり方がわからなければ、AIに聞きながら進めれば大丈夫です。

サンプルプロンプト：

通知・機能を試す

実際にPomodoro Timerを動かして、集中・休憩のサイクルを試してみましょう。通知を使う場合は、事前に許可が必要です。

• スマホ：ブラウザの通知許可ダイアログで「許可」を選択
• PC：ブラウザの通知許可ダイアログで「許可」を選択（設定からいつでも変更可能）

うまく動かないときは、AIに聞きながら確認してみてください。