フルスタックURL短縮サービス構築

## 🚀 URL短縮サービス - フルスタックアプリケーション ### 📋 プロジェクト概要 モダンでアクセシブルなフロントエンドと堅牢なRESTfulバックエンドAPIを備えた、本番環境対応のフルスタックURL短縮サービスを構築します。アプリケーションは、短縮リンクの作成、リダイレクト、トラッキング、管理、有効期限という完全なライフサイクルを処理する必要があります。パフォーマンス、セキュリティ、そして全デバイスでの卓越したユーザー体験を優先します。 --- ### 🛠️ 技術スタック **フロントエンド:** - アクセシビリティ対応のARIA属性を備えたセマンティックHTML5（WCAG 2.1 AA準拠） - CSSカスタムプロパティ（変数）、Flexbox、CSS Gridを使用したCSS3 - モジュラーアーキテクチャ（ESモジュール）を使用したバニラJavaScript（ES2022+） - 重いフレームワークは使用せず、バンドルを軽量かつ高速に保つ **バックエンドAPI:** - OpenAPI 3.0仕様に準拠したRESTful API設計 - 適切なHTTPステータスコードを使用したJSONリクエスト/レスポンス形式 - クロスオリジンリクエストのためのCORS設定 - IPごとおよびAPIキーごとのレート制限 **ライブラリ（CDNまたはバンドル）:** - QRコード生成（例：`qrcode.js`または`qr-creator`） - 分析用チャートライブラリ（例：Chart.jsまたは軽量な代替品） - 有効期限用の日付ピッカー（例：`flatpickr`） - トースト通知システム（カスタムビルド、依存関係なし） --- ### 🎨 フロントエンド - UI/UX要件 **レイアウトとデザイン:** - クリーンでミニマルなデザイン。ページ中央に**大きく目立つURL入力フィールド**を備えたヒーローセクション - システム設定の検出（`prefers-color-scheme`）と`localStorage`による永続化を備えた**ダーク/ライトモード切り替え**を実装 - 一貫したデザインシステムを使用：タイポグラフィスケール、スペーシングトークン、カラーパレット - すべてのインタラクティブ要素にスムーズなマイクロアニメーションとトランジション（フェードイン、スライドアップ、ボタンリップル） - 非同期コンテンツ（分析、履歴テーブル）用のスケルトンローディング状態 **レスポンシブデザイン:** - 480px、768px、1024px、1440pxのブレークポイントを持つモバイルファーストアプローチ - タッチフレンドリーなタップターゲット（最小44×44px） - モバイルでの折りたたみ可能なナビゲーションメニュー（アニメーション付きハンバーガーメニュー） - `clamp()`を使用した流動的なタイポグラフィ **アクセシビリティ:** - 完全なキーボードナビゲーションサポート（タブ順序、モーダル内のフォーカストラップ） - 動的コンテンツ用のスクリーンリーダー通知（`aria-live`領域） - すべてのインタラクティブ要素に表示可能なフォーカスインジケーター - 十分な色のコントラスト比（テキストは最小4.5:1） - モーション軽減サポート（`prefers-reduced-motion`） --- ### ⚙️ コア機能 #### 1. URL短縮エンジン - プレースホルダーテキストとリアルタイム検証フィードバックを備えた目立つ入力フィールド - **URL検証**：有効なプロトコル（`http://`、`https://`）、適切なドメイン構造をチェックし、正規表現と`URL`コンストラクターAPIの両方を使用して不正なURLを拒否 - **URLサニタイズ**：トラッキングパラメータ（UTM、fbclid、gclid）を削除し、冗長なスラッシュを除去し、プロトコルと大文字小文字を正規化 - プロトコルが指定されていない場合は`https://`を自動的に先頭に追加 - 作成後すぐに短縮URLを成功アニメーション付きで表示 - **一括URL短縮**：ユーザーが複数のURL（1行に1つ）を貼り付けて、すべてを一度に短縮できるようにする #### 2. カスタムエイリアスサポート - オプションのカスタムエイリアスフィールド（例：`short.ly/my-brand`） - ユーザーが入力する際のリアルタイム利用可能チェック（デバウンスされたAPI呼び出し、300ms） - エイリアス検証ルール：英数字、ハイフン、アンダースコアのみ；3〜30文字；予約語ブラックリスト（例：`admin`、`api`、`login`、`static`） - エイリアスが使用中または無効な場合の明確なエラーメッセージ #### 3. QRコード生成 - 作成時にすべての短縮URL用のQRコードを自動生成 - QRコードモーダル/パネルで以下のオプションを提供： - PNGとしてダウンロード（高解像度、1024×1024） - SVGとしてダウンロード（ベクター、スケーラブル） - 前景色/背景色のカスタマイズ - 中央に小さなロゴオーバーレイを追加（オプション） - QRコードが完全な短縮URLをエンコードし、小さなサイズでもスキャン可能であることを保証 #### 4. クリックトラッキングと分析ダッシュボード - 各リダイレクトを以下のデータポイントでトラッキング： - タイムスタンプ（UTC） - 国と都市（IPジオロケーションAPI経由） - デバイスタイプ（モバイル、タブレット、デスクトップ） - オペレーティングシステムとブラウザ（User-Agent解析経由） - リファラーURL - ユニーク vs. リピート訪問者（Cookie/フィンガープリント経由） - **リンクごとの分析ダッシュボード**： - 総クリック数とユニーククリック数のカウンター - 経時的なクリック数の折れ線チャート（フィルタ可能：過去24時間、7日、30日、90日、全期間） - 地理的分布マップまたは棒グラフ（上位10か国） - デバイス/OS/ブラウザの内訳（ドーナツまたは円グラフ） - 上位リファラー表 - 曜日と時間帯によるクリックヒートマップ - メインダッシュボードの集計分析概要（総リンク数、総クリック数、最も人気のあるリンク） #### 5. リンク有効期限 - リンク作成時のオプションの有効期限日時ピッカー - プリセットをサポート：1時間、24時間、7日、30日、カスタム日付 - アクティブなリンクにカウントダウンまたは「あとXで期限切れ」バッジを表示 - 期限切れリンクを自動的に無効化し、リダイレクト試行時に「このリンクは期限切れです」という親しみやすいページを表示 - 既存リンクの有効期限の延長または削除を許可 #### 6. パスワード保護 - リンク作成時のオプションのパスワード切り替え - 有効な場合、ターゲットURLにリダイレクトする前にパスワード入力ゲートページを表示 - サーバーサイドでbcryptまたはArgon2を使用してパスワードをハッシュ化（平文で保存しない） - パスワード試行のレート制限（IPごとに毎分最大5回）とロックアウトメッセージ - 履歴ビューのパスワード保護リンクに視覚的なインジケーター（ロックアイコン🔒）を表示 #### 7. クリップボードへのコピー - すべての短縮URLの横にワンクリックコピーボタン - Clipboard API（`navigator.clipboard.writeText()`）を使用し、`document.execCommand('copy')`へのフォールバック - 視覚的な確認：ボタンアイコンがチェックマーク✅に変わり、「コピーしました！」ツールチップ/トーストが2秒後に自動的に消える - キーボードショートカットのサポート（例：`Ctrl+Shift+C`で最近作成したリンクをコピー） #### 8. URL履歴と管理 - すべての短縮URLの永続的な履歴テーブル/グリッド（ゲストは`localStorage`に保存、認証ユーザーはデータベースに保存） - 各エントリに表示：元のURL（ツールチップ付きで切り詰め）、短いURL、作成日、クリック数、ステータス（アクティブ/期限切れ/パスワード保護）、アクションボタン - **検索**：元のURL、エイリアス、タグにわたる全文検索 - **フィルタリング**：ステータス（アクティブ、期限切れ、保護）、日付範囲、クリック数範囲、タグによる - **並べ替え**：作成日、クリック数、アルファベット順（昇順/降順）による - **ページネーションまたは無限スクロール**（1ページあたり25項目） - **一括アクション**：複数のリンクを選択して削除、無効化、またはCSV/JSONとしてエクスポート - **タグ/ラベル**：ユーザーがリンクを整理するためのカスタムタグを追加できるようにする（例：「マーケティング」、「ソーシャル」、「キャンペーン-q4」） --- ### 🔒 セキュリティ要件 - XSS攻撃を防ぐためのクライアントとサーバーの両方での入力サニタイズ - すべての状態変更APIエンドポイントでのCSRF保護 - オープンリダイレクトの脆弱性を防ぐためのリダイレクトターゲットの検証とサニタイズ（許可されたプロトコルのホワイトリスト、`javascript:`、`data:`、`file:`スキームをブロック） - Content Security Policy（CSP）ヘッダーの実装 - レート制限：IPごとに毎分最大20件のリンク作成；毎分最大100件のAPIリクエスト - セキュアなHTTPヘッダー：`X-Content-Type-Options`、`X-Frame-Options`、`Strict-Transport-Security` - 内部IDを公開しない；公開リンク識別子にはnanoidまたはUUIDを使用 --- ### ⚡ パフォーマンス要件 - Lighthouseスコアの目標：パフォーマンス>90、アクセシビリティ>95、ベストプラクティス>95、SEO>90 - 分析チャートと重要でないアセットの遅延読み込み - すべての検索と検証入力をデバウンス - スクロールベースのアニメーションと遅延読み込みに`IntersectionObserver`を使用 - リフローと再描画を最小限に抑え、アニメーションにはCSSの`transform`と`opacity`を使用 - 適切な場所でAPIレスポンスをキャッシュ（例：60秒TTLの分析データ） - リダイレクトはサーバーサイドで100ms未満で解決される必要がある --- ### 🧪 エラーハンドリングとエッジケース - ネットワーク障害、APIタイムアウト、無効なURL、重複エイリアス、サーバーエラー（500）、レート制限超過（429）に対する適切なエラーメッセージ - オフライン検出：ユーザーが接続を失ったときにバナーを表示し、再試行用にアクションをキューに入れる - 非常に長いURL（最大2048文字）をレイアウトを壊さずに処理 - Unicode/国際化ドメイン名（IDN）を正しく処理 - ユーザーにリンクや分析データがない場合の空の状態イラスト --- ### 📦 成果物 1. 明確なフォルダ構造を持つ、完全でコメント付きのソースコード 2. セットアップ手順、APIドキュメント、機能リストを含む`README.md` 3. APIエンドポイント参照表（メソッド、パス、パラメータ、レスポンス形式） 4. サンプルデータが事前に読み込まれた即時プレビュー用の`demo`モード 5. Chrome、Firefox、Safari、Edge（最新2バージョン）でレスポンシブ対応 --- > **注記：** このプロジェクトは段階的に構築してください - コアの短縮フロー（入力 → 検証 → 短縮 → 表示 → コピー）から始め、その後QRコード、分析、カスタムエイリアス、有効期限、パスワード保護、完全な履歴ダッシュボードをレイヤーとして追加します。各機能が完全に機能し、次の機能に進む前にテストされていることを確認してください。