『あと何日タイマー』

『タイマー』や『アラーム』ではなく、目標時間からの『カウントダウンタイマー』を作りました!

こちらをベースにして、index.html ひとつの
『あと何日タイマー』をつくりました。

https://theday-countdown.netlify.app/

未来の日時を指定いただくと、その日までのカウントダウンがはじまります。

開幕や、プレゼン、試験、アポイント、いろんなイベントまでの時間を秒単位で感じてくださいね!

 

 

 

 

今回は、Anthropic のSonnet3.7 で作りました。
Githubのリポジトリ設定やNetlify.appへの公開までも懇切丁寧に教えてくれる。

Bolt.ai での開発と共に比較してみたいと思う。
エディターの『Cursor』のAIとも比較しながら…。

_*]:min-w-0″>

ステップ1: GitHubアカウントの作成

  1. GitHubにアクセス
  2. 右上の「Sign up」ボタンをクリック
  3. メールアドレスとパスワードを入力して登録
  4. 表示される手順に従ってアカウント作成を完了

ステップ2: 新しいリポジトリを作成

  1. GitHubにログイン後、右上の「+」アイコンをクリック→「New repository」を選択
  2. リポジトリ名を入力(例:「countdown-timer」)
  3. 「Public」を選択(無料公開のため必須)
  4. 「Add a README file」にチェック
  5. 「Create repository」ボタンをクリック

ステップ3: HTMLファイルのアップロード

  1. 作成したリポジトリ内で「Add file」→「Create new file」をクリック
  2. ファイル名を「index.html」と入力
  3. コードエディター部分に、私たちが作成したカウントダウンタイマーのHTMLコード全体をコピー&ペースト
  4. 画面下部の「Commit new file」ボタンをクリック

ステップ4: GitHub Pagesの有効化

  1. リポジトリページの上部メニューから「Settings」タブをクリック
  2. 左側のメニューから「Pages」を選択
  3. 「Source」セクションで、「Branch」を「main」に設定
  4. フォルダを「/(root)」に設定
  5. 「Save」ボタンをクリック
  6. 設定完了後、「Your site is published at https://あなたのユーザー名.github.io/countdown-timer/」というメッセージが表示されます(表示まで数分かかることがあります)

ステップ5: 公開サイトの確認

  1. 表示されたURL(https://あなたのユーザー名.github.io/countdown-timer/)にアクセス
  2. カウントダウンタイマーが正常に動作することを確認

更新方法

サイトを更新したい場合:

  1. リポジトリに戻り、「index.html」をクリック
  2. 編集ボタン(鉛筆アイコン)をクリック
  3. 内容を変更
  4. 「Commit changes」でアップロード
  5. 数分で変更が公開サイトに反映されます

これで完全無料で、あなただけのカウントダウンタイマーサイトが公開されました!このURLを友人や家族と共有してみましょう。

Netlify.appで公開する方法(最も簡単)

  1. ファイルをドラッグ&ドロップするだけの方法
    • Netlify.comにアクセス
    • アカウント作成(GitHubやGoogleアカウントで簡単登録可能)
    • ログイン後、「Sites」タブを選択
    • 「Drag and drop your site folder here」という部分に現在のHTMLファイルをドラッグ&ドロップ
    • 数秒でサイトが公開され、ランダムな名前のURL(例:random-name.netlify.app)が生成される
    • 「Site settings」から「Change site name」でURLを好きな名前に変更可能(例:countdown-timer.netlify.app)
  2. GitHub経由での公開(より管理しやすい方法)
    • GitHubアカウントを作成
    • 新しいリポジトリを作成してHTMLコードを「index.html」として保存
    • Netlifyにログインし「New site from Git」→「GitHub」連携
    • リポジトリを選択して「Deploy site」

その他の無料ホスティングオプション

  • GitHub Pages: GitHubのリポジトリから直接公開できる
  • Vercel: Netlifyと似た使いやすさのサービス
  • Firebase Hosting: Googleのサービスで無料プランあり
  • Cloudflare Pages: 高速CDNが利用できる無料サービス

どのサービスも基本的な静的サイトのホスティングは完全無料で、特別な技術知識がなくても公開できます。個人的には、Netlifyのドラッグ&ドロップ方式が最も簡単でおすすめです。数クリックで誰でもあなたのタイマーにアクセスできるようになります!

前の記事

2025年5月 ひかり回線更新月検討月 3年契約 36ヶ月

次の記事

BSジェネレーター(貸借対照表)