Glass App - Developer Tools Suite

Apple Liquid Glassデザインを採用した、開発者向けのブラウザ完結型ツールスイートです。物理ベースの光学効果により、美しく実用的なインターフェースを提供します。

✨ 主な特徴

🔒 完全クライアントサイド処理 - すべてのデータはブラウザ内で処理され、外部に送信されません
🎨 Apple Liquid Glassデザイン - 物理ベースの光学効果による美しいUI
🌈 背景画像連動光学効果 - 背景画像の光源を分析し、現実的な光の反射・屈折を再現
📱 レスポンシブデザイン - デスクトップ・タブレット・モバイル対応
⚡ 高性能 - Vite + React 18による高速な開発・実行環境

🛠️ 実装済みツール

1. データマスキングツール 🔐

機密情報を安全にマスクして共有できる高機能ツール

主要機能:

複数フォーマット対応: JSON、YAML、プレーンテキスト
インタラクティブツリービュー: 階層構造の視覚的表示
手動マスキング: クリック・ドラッグによる直感的操作
ルールベースマスキング: キー名・正規表現による一括マスキング
部分マスキング: テキストの一部のみをマスク
プレビュー機能: マスク前後の比較表示
ワンクリックコピー: 結果の即座コピー
ファイルダウンロード: JSON/YAML形式でエクスポート

対応マスキングパターン:

キー名指定: password, api_key, token
正規表現: \d{3}-\d{4}-\d{4} (電話番号), [a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,} (メール)

2. APIテスター 🔧

REST APIの包括的テスト・デバッグツール

主要機能:

HTTPメソッド対応: GET、POST、PUT、DELETE、PATCH
リクエストビルダー: URL、ヘッダー、ボディの設定
認証サポート: Bearer Token、Basic Auth、API Key
レスポンス表示: JSON整形、ステータスコード、ヘッダー情報
cURLコマンド生成: 設定したリクエストをcURLコマンドに変換
履歴機能: 過去のリクエストを保存・再実行
エラーハンドリング: 詳細なエラー情報表示

3. Base64エンコーダー 📝

多機能エンコード・デコード・ハッシュ生成ツール

主要機能:

Base64: エンコード・デコード
URL: URLエンコード・デコード
HTML: HTMLエンティティエンコード・デコード
ハッシュ生成: MD5、SHA-1、SHA-256、SHA-512
リアルタイム変換: 入力と同時に結果を表示
バッチ処理: 複数テキストの一括変換
ファイル対応: ファイルのBase64エンコード

4. 近日公開予定ツール 🚀

JSONフォーマッター: JSON、XML、YAMLの構文検証・整形・変換
CSSコンパクター: CSS/JS圧縮・autoprefixer・最適化
ログビューアー: ログファイル解析・フィルタリング・統計表示

🎨 Liquid Glass技術仕様

物理ベース光学エンジン

背景画像光源分析: Canvas APIによるピクセル解析
ITU-R BT.709標準: 正確な明度計算
フレネル効果: 視線角度による反射率変化
環境光減光: 画面端での自然な暗化
屈折率計算: スネルの法則による光の屈折
色温度適応: warm/cool/neutralに基づく色調整

高度なCSS効果

backdrop-filter: ガラス質感のぼかし効果
mix-blend-mode: 自然な光の合成
conic-gradient: 物理的な光の分散表現
CSS変数: 動的な光学パラメータ制御

パフォーマンス最適化

requestAnimationFrame: 滑らかなアニメーション
デバウンス処理: 過度な再計算を防止
GPU加速: transform3dによるハードウェア最適化

🏗️ 技術スタック

フロントエンド

React 18.3.x: Concurrent Features、Suspense
TypeScript 5.x: 厳格な型安全性
Vite 6.x: 高速開発サーバー・HMR

状態管理・UI

Zustand 5.x: 軽量状態管理
TailwindCSS v4: ユーティリティファーストCSS
Framer Motion: 高品質アニメーション
Lucide React: 美しいアイコンセット

データ処理

js-yaml: YAML パース・シリアライズ
clipboard-copy: クロスブラウザクリップボード操作

開発ツール

ESLint 9.x: コード品質管理
Prettier 3.x: コードフォーマット

🚀 セットアップ・開発

環境要件

Node.js 18.x以上
npm 9.x以上

インストール・起動

# リポジトリのクローン
git clone <repository-url>
cd glass-app/tool-app

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

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

# ビルド
npm run build

# プレビュー
npm run preview

開発用コマンド

# 型チェック
npm run type-check

# Linting
npm run lint

# フォーマット
npm run format

📖 使用方法

データマスキングツール

データ入力: 左側エリアにJSON/YAML/テキストを入力
フォーマット選択: データ形式を選択
マスキング実行:
- 手動: ツリービューの目のアイコンをクリック
- 部分: テキストをドラッグ選択してマスク
- ルール: パターンを設定して一括マスク
結果取得: コピーまたはダウンロード

APIテスター

リクエスト設定: URL、メソッド、ヘッダー、ボディを設定
認証設定: 必要に応じて認証情報を追加
送信: リクエストを実行
結果確認: レスポンス、ヘッダー、cURLコマンドを確認

Base64エンコーダー

テキスト入力: エンコード・デコードしたいテキストを入力
操作選択: Base64、URL、HTML、ハッシュから選択
結果取得: 自動変換された結果をコピー

🎯 サンプルデータ

JSON (データマスキング用)

{
  "user": {
    "name": "John Doe",
    "email": "john.doe@example.com",
    "password": "secretPassword123",
    "api_key": "sk_live_abc123xyz789",
    "phone": "090-1234-5678",
    "credit_card": "4111-1111-1111-1111"
  },
  "database": {
    "host": "localhost",
    "username": "admin",
    "password": "supersecret123"
  }
}

YAML (データマスキング用)

server:
  host: production.example.com
  port: 443
  ssl: true
  
database:
  host: db.example.com
  username: admin
  password: supersecret123
  api_token: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9

users:
  - name: Alice
    email: alice@example.com
    phone: 080-1111-2222
  - name: Bob
    email: bob@example.com
    phone: 090-3333-4444

🔧 カスタマイズ

Liquid Glass効果の調整

<LiquidGlass
  displacementScale={70}      // 歪み強度 (0-100)
  blurAmount={15}            // ぼかし強度 (0-50)
  saturation={150}           // 彩度 (50-200)
  aberrationIntensity={0.6}  // 色収差 (0-2)
  elasticity={0.8}           // 弾性 (0-1)
  cornerRadius={24}          // 角の丸み (px)
  mode="standard"            // モード (standard/polar/prominent/shader)
/>

背景画像の設定

DecorativeBackgroundコンポーネントで背景画像を管理。Unsplash APIキーを設定することで、動的な背景画像の取得が可能。

🌐 ブラウザサポート

✅ Chrome 88+
✅ Firefox 103+
✅ Safari 15.4+
✅ Edge 88+

必要な機能:

backdrop-filter サポート
CSS Custom Properties
ES2020+ JavaScript

📝 ライセンス

MIT License - 詳細はLICENSEファイルを参照

🤝 コントリビューション

このリポジトリをフォーク
機能ブランチを作成 (git checkout -b feature/amazing-feature)
変更をコミット (git commit -m 'Add some amazing feature')
ブランチをプッシュ (git push origin feature/amazing-feature)
プルリクエストを作成

📞 サポート

問題や質問がある場合は、Issuesでお知らせください。

Made with ❤️ and advanced CSS magic

Dev Tools

Install / Use

README

Glass App - Developer Tools Suite

✨ 主な特徴

🛠️ 実装済みツール

1. データマスキングツール 🔐

2. APIテスター 🔧

3. Base64エンコーダー 📝

4. 近日公開予定ツール 🚀

🎨 Liquid Glass技術仕様

物理ベース光学エンジン

高度なCSS効果

パフォーマンス最適化

🏗️ 技術スタック

フロントエンド

状態管理・UI

データ処理

開発ツール

🚀 セットアップ・開発

環境要件

インストール・起動

開発用コマンド

📖 使用方法

データマスキングツール

APIテスター

Base64エンコーダー

🎯 サンプルデータ

JSON (データマスキング用)

YAML (データマスキング用)

🔧 カスタマイズ

Liquid Glass効果の調整

背景画像の設定

🌐 ブラウザサポート

📝 ライセンス

🤝 コントリビューション

📞 サポート