セキュアなパスワード生成アプリケーション - Progressive Web App (PWA)対応
GitHub Pages: https://kmh-no3.github.io/pwa-password-generator
- WebCrypto APIを使用した暗号学的に安全な乱数生成
- 8-64文字の長さ調整
- 大文字・小文字・数字・記号の選択可能
- パスワード強度の5段階評価（弱い〜最強）
- ワンクリックでクリップボードにコピー
- パスワード履歴機能（最新10件）
- 履歴からの再コピー・削除機能
- ローカルストレージでの安全な保存
- 個別のコピーボタン状態管理
- パスワード設定の表示/非表示切り替え
- 履歴の表示/非表示切り替え
- 直感的なトグルUI
- オフライン対応
- ホーム画面に追加可能
- ネイティブアプリのような体験
- レスポンシブデザイン
- 目に優しいグラデーション背景
- ダークモード対応
- レスポンシブデザイン
- アクセシビリティ対応
- ボタン間隔の最適化
- モバイルフレンドリーなデザイン
- フロントエンド: React 18 + TypeScript
- ビルドツール: Vite
- PWA: vite-plugin-pwa
- スタイリング: CSS3 (カスタムスタイル)
- 暗号化: WebCrypto API
- 状態管理: React Hooks
- デプロイ: GitHub Actions + GitHub Pages
# リポジトリをクローン
git clone https://github.com/kmh-no3/pwa-password-generator.git
cd pwa-password-generator
# 依存関係をインストール
npm install
# 開発サーバーを起動
npm run dev-
開発サーバー起動
npm run dev
-
ブラウザでアクセス
http://localhost:3001にアクセス
-
パスワード生成
- 「🔄 新しいパスワードを生成」ボタンをクリック
- 「⚙️ パスワード設定」で詳細設定を調整
- スライダーで長さを調整（8-64文字）
- チェックボックスで文字種を選択
-
パスワードコピー
- 「📋 コピー」ボタンでクリップボードにコピー
- コピー成功時は「✓ コピー済み」と表示
-
履歴管理
- 「📋 パスワード履歴」で過去のパスワードを確認
- 個別のコピー・削除ボタン
- 全履歴クリア機能
# 本番用ビルド
npm run build
# プレビュー
npm run preview-
GitHubリポジトリの設定
- Settings > Pages > Source を "GitHub Actions" に設定
-
mainブランチにプッシュ
git add . git commit -m "Update deployment" git push origin main
-
自動デプロイ
- GitHub Actionsが自動的にビルドとデプロイを実行
- 数分後に
https://kmh-no3.github.io/pwa-password-generatorでアクセス可能
# 依存関係をインストール
npm install
# デプロイ
npm run deploy- ブラウザでアプリにアクセス
- アドレスバーの「インストール」アイコンをクリック
- または、メニューから「ホーム画面に追加」を選択
- WebCrypto API: 暗号学的に安全な乱数生成
- ローカルストレージ: パスワード履歴は外部に送信されません
- HTTPS対応: 本番環境では安全な通信
- オフライン動作: インターネット接続不要
- パスワード強度の詳細分析
- カスタム文字セットの追加
- パスワードのエクスポート機能
- 複数言語対応
- テーマカスタマイズ
- パスワード生成履歴の統計表示
MIT License
Hosoda Kenji