【Cursorエディタでウェブアプリ開発】

日々の情報を1画面で確認できる個人用ポータルサイトを作成しました。天気情報、カレンダー、予定、検索、AI、クイックリンクを統合した、シンプルで使いやすいデザインになっています。

主な機能

1. 天気情報

• 現在の天気: 現在の気温、天気、湿度、風速、降水量を表示
• 今後の予報: 24時間分の時間別予報（3時間ごと）
  • 時刻、アイコン、説明、気温、降水量、風速を2行レイアウトで見やすく表示
• 明日以降の予報: 最大7日分の日別予報
  • 日付、アイコン、説明、最高/最低気温、降水量、風速を2行レイアウトで表示

2. 3か月カレンダー

• 3か月分のカレンダーを一度に表示
• 祝日を自動表示
• 予定がある日を強調表示

3. 行事予定

• ICSファイルから予定を取得
• 近日の予定を一覧表示
• 土日祝を色分けして表示

4. 検索機能

• 複数の検索エンジンに対応
  • Google
  • Bing
  • DuckDuckGo
  • Yahoo! Japan

5. AI機能

• 複数のAIサービスに対応
  • Gemini
  • ChatGPT
  • Claude
  • Perplexity
  • Microsoft Copilot

6. クイックリンク

• よく使うサイトを登録
• ドラッグ&ドロップで並び替え可能
• 追加・編集・削除が簡単

技術的な特徴

セキュリティ

• APIキーはサーバー側（.envファイル）で管理し、クライアント側には露出しない
• PHPプロキシ経由でAPIを呼び出すため、セキュア

パフォーマンス

• 天気情報を10分間キャッシュして、API呼び出しを最小限に
• ネットワークエラー時はキャッシュを利用

UI/UX

• 4列のグリッドレイアウトで情報を整理
• レスポンシブデザインでスマートフォンにも対応
• 美しいグラデーション背景
• ホバーエフェクトで操作性を向上

使用技術

• フロントエンド: HTML5, CSS3 (Grid/Flexbox), JavaScript (ES6+)
• バックエンド: PHP (APIプロキシ)
• API: OpenWeatherMap API
• データ形式: ICS (iCalendar), JSON

セットアップ

1. OpenWeatherMap APIキーを取得
2. .envファイルにAPIキーを設定
3. config.jsで都市名や緯度・経度を設定
4. PHPサーバーで起動