ダイナミッククロック

時間帯に応じて背景が変化する、美しいデジタル時計アプリケーションです。

機能

🕐 リアルタイムクロック

• 秒単位で更新される正確な時刻表示
• 日付と曜日の表示

🎨 時間帯別テーマ

• 朝（5:00-11:59）: 明るいオレンジとピンクのグラデーション
• 午後（12:00-16:59）: 鮮やかな青のグラデーション
• 夕方（17:00-20:59）: 温かみのあるオレンジと紫のグラデーション
• 夜（21:00-4:59）: 深い紫と青のグラデーション

🌍 世界時計

• ニューヨーク、ロンドン、東京、シドニーの時刻を同時表示
• 各都市の現在時刻をリアルタイムで確認

⏰ アラーム機能

• 複数のアラームを設定可能
• カスタムラベルでアラームを識別
• アラームのオン/オフ切り替え
• 不要なアラームの削除

使い方

開発環境での起動

# 依存関係のインストール
npm install

# 開発サーバーの起動
npm run dev

ブラウザで http://localhost:3000 を開いてアプリケーションにアクセスします。

本番環境用のビルド

# ビルドの実行
npm run build

# 本番サーバーの起動
npm start

コード品質のチェック

# ESLintでコードをチェック
npm run lint

アラームの設定方法

1. 「アラーム」タブをクリック
2. 時刻入力欄にアラーム時刻を入力（例：07:30）
3. ラベル欄にアラームの説明を入力（例：朝の会議）
4. 「アラームを追加」ボタンをクリック
5. 追加されたアラームはトグルスイッチでオン/オフ切り替え可能

技術スタック

• Next.js 15 - Reactフレームワーク
• React 19 - UIライブラリ
• TypeScript 5 - 型安全性
• Tailwind CSS 3.4 - スタイリング
• shadcn/ui - UIコンポーネント
• Lucide React - アイコン
• ESLint - コード品質管理

システム要件

• Node.js 18以上
• npm または yarn パッケージマネージャー

改造のヒント

🎨 テーマのカスタマイズ

dynamic-clock.tsxのgetThemeGradient関数を編集して、独自のグラデーションを作成できます：

// 例：新しいテーマの追加
case "morning":
  return "from-pink-400 via-orange-300 to-yellow-200" // 既存
  // return "from-blue-400 via-purple-300 to-pink-200" // カスタム例

🌍 世界時計の都市追加

worldClocks配列に新しい都市を追加：

const worldClocks: WorldClock[] = [
  // 既存の都市...
  { city: "パリ", timezone: "Europe/Paris", time: "" },
  { city: "ドバイ", timezone: "Asia/Dubai", time: "" }
]

⏰ アラーム機能の拡張

• 繰り返しアラーム: 曜日指定の繰り返し機能を追加
• アラーム音: Web Audio APIを使用してカスタムサウンドを再生
• スヌーズ機能: 5分後に再度アラームを鳴らす機能

🎯 その他のアイデア

1. アナログ時計表示: SVGを使用してアナログ時計を追加
2. ポモドーロタイマー: 作業と休憩を管理するタイマー機能
3. 天気情報表示: OpenWeather APIと連携して現在の天気を表示
4. カレンダー連携: Google Calendar APIと連携してイベントを表示
5. ダークモード: 手動切り替え可能なダークモードオプション

📁 主要ファイルの場所

• メインコンポーネント: /dynamic-clock.tsx
• UIコンポーネント: /components/ui/
• スタイル設定: /app/globals.css、/tailwind.config.ts
• テーマ設定: /components/theme-provider.tsx
• Next.js設定: /next.config.mjs
• TypeScript設定: /tsconfig.json
• ESLint設定: /.eslintrc.json

プロジェクトの特徴

🚀 モダンな構成

• 最新のReact 19とNext.js 15を使用
• TypeScriptによる厳格な型チェック（strict mode有効）
• ESLintによるコード品質の自動チェック
• ES2022をターゲットとした最新のJavaScript機能
• Hydration対応：サーバーサイドレンダリングの最適化

🎯 パフォーマンス最適化

• Next.jsの自動画像最適化
• 効率的なバンドルサイズ（First Load JS: 約100KB）
• 静的生成によるページの高速読み込み
• SSR/CSRの適切な使い分けによるUX向上

🛠️ 開発体験

• ビルド時の型チェックとリンティング
• Hot Module Replacement（HMR）による高速開発
• 明確なプロジェクト構造
• 依存関係の最適化（未使用パッケージの削除）

最近の更新

2025年6月

• React 19に対応（vaulパッケージを削除）
• Hydration errorの修正（クライアントサイドでの時刻レンダリング）
• プロジェクト名をdynamic-clockに統一
• ビルド時のエラーチェックを有効化