こちらをベースにして、index.html ひとつの
『あと何日タイマー』をつくりました。
https://theday-countdown.netlify.app/
未来の日時を指定いただくと、その日までのカウントダウンがはじまります。
開幕や、プレゼン、試験、アポイント、いろんなイベントまでの時間を秒単位で感じてくださいね！
今回は、Anthropic のSonnet3.7 で作りました。
Githubのリポジトリ設定やNetlify.appへの公開までも懇切丁寧に教えてくれる。
Bolt.ai での開発と共に比較してみたいと思う。
エディターの『Cursor』のAIとも比較しながら…。
_*]:min-w-0″>
ステップ1: GitHubアカウントの作成
- GitHubにアクセス
- 右上の「Sign up」ボタンをクリック
- メールアドレスとパスワードを入力して登録
- 表示される手順に従ってアカウント作成を完了
ステップ2: 新しいリポジトリを作成
- GitHubにログイン後、右上の「+」アイコンをクリック→「New repository」を選択
- リポジトリ名を入力（例：「countdown-timer」）
- 「Public」を選択（無料公開のため必須）
- 「Add a README file」にチェック
- 「Create repository」ボタンをクリック
ステップ3: HTMLファイルのアップロード
- 作成したリポジトリ内で「Add file」→「Create new file」をクリック
- ファイル名を「index.html」と入力
- コードエディター部分に、私たちが作成したカウントダウンタイマーのHTMLコード全体をコピー＆ペースト
- 画面下部の「Commit new file」ボタンをクリック
ステップ4: GitHub Pagesの有効化
- リポジトリページの上部メニューから「Settings」タブをクリック
- 左側のメニューから「Pages」を選択
- 「Source」セクションで、「Branch」を「main」に設定
- フォルダを「/(root)」に設定
- 「Save」ボタンをクリック
- 設定完了後、「Your site is published at https://あなたのユーザー名.github.io/countdown-timer/」というメッセージが表示されます（表示まで数分かかることがあります）
ステップ5: 公開サイトの確認
- 表示されたURL（https://あなたのユーザー名.github.io/countdown-timer/）にアクセス
- カウントダウンタイマーが正常に動作することを確認
更新方法
サイトを更新したい場合：
- リポジトリに戻り、「index.html」をクリック
- 編集ボタン（鉛筆アイコン）をクリック
- 内容を変更
- 「Commit changes」でアップロード
- 数分で変更が公開サイトに反映されます
これで完全無料で、あなただけのカウントダウンタイマーサイトが公開されました！このURLを友人や家族と共有してみましょう。
