Drawing Practice

iPad + Apple Pencil を使ったドローイング練習ツール。お手本（Sketchfabの3Dモデルやローカル画像）を見ながら線画を描く練習ができます。

Live: https://koizuka.github.io/drawing-practice/

Features

• 2分割レイアウト: お手本画面とドロー画面を横/縦自動切替で表示。お手本パネルを畳んで描画領域を全画面化するトグルあり（フリードローイング向け、状態はオートセーブで保持）
• Sketchfab連携: 3Dモデルを検索・表示し、好きな角度でスクリーンショットを固定。検索ボックスは過去のキーワード検索とカテゴリ閲覧の履歴ドロップダウン付き（個別削除可、カテゴリ単独もイタリック表記で区別）。「全カテゴリ」ボタンでカテゴリ絞り込みを解除して全作品ビューに戻れる。Sketchfab作品ページのURL（/3d-models/... または /models/...）を貼り付けるだけでも読み込み可能。固定画像はギャラリーのサムネイルとして表示され、「このお手本で練習」で同じアングルから即座に再開可能。URL入力欄の履歴ドロップダウンからSketchfab作品を選んだ場合も保存スクリーンショットを使って固定モードに直接復帰し、検索コンテキスト（キーワード／カテゴリ／時期フィルタ）も自動復元
• 画像お手本: ローカルファイルまたはURL指定で画像をお手本として読み込み。ローカル画像はコンテンツハッシュで重複排除しつつ履歴ドロップダウンに最大10件を自動保存（最長辺2048pxへリサイズ）、ワンタップで再利用やギャラリーからの再読込が可能。履歴ドロップダウンは各エントリのサムネイル付きで一目で識別可能（ローカル画像／YouTube／Pexels／URL いずれも対応）
• YouTube動画お手本: URL入力欄にYouTubeのURLを貼ると自動判別して動画を埋め込み、再生しながら描画可能（グリッド・ガイド線・答え合わせ対応）。トラックパッド/ピンチでキャンバスをズーム、シングルタップで動画操作モードへ一時切替（シーク・字幕等）、ツールバーから再生/停止
• Pexels写真検索: キーワード（pose/ballet/yoga/martial arts/gymnastics等のプリセット付き）で Pexels の無料写真を検索して手本に利用。API キーはユーザー各自で Pexels に登録し設定ダイアログで保存（localStorage）。未設定時に Pexels ボタンを押すと設定ダイアログが直接開き、保存後そのまま検索画面へ。Sketchfab／Pexels の検索画面は遷移と同時に検索欄にフォーカスが入り（履歴ドロップダウンは押し付けがましくならないよう自動展開しない）、Esc キーで一段戻る（モデル閲覧／写真表示 → 検索画面 → トップ）。写真作者クレジットと Pexels へのリンクを表示
• ジェスチャードローイングセッション: Pexels 検索結果から「セッション開始」で短時間ポーズ練習を起動。1ポーズあたり 30/60/90/120 秒から選択（選択は localStorage で永続化）し、結果をシャッフルしたキューで順送り。残り時間バー＋カウントダウン表示の HUD で Skip／Pause／Resume／Exit を制御。0 秒到達で自動的に Gallery へ保存→ストローク／タイマーをクリア→次の写真へ遷移（Skip は保存せず破棄）。キュー枯渇時は次のページを自動取得して継続。セッション中の参照差し替えは Undo 履歴を汚さない
• 描画ツール: ペン、消しゴム（タップで1本ずつ／投げ縄で範囲一括削除＝marching ants 表示でドラッグ中に削除候補を赤くハイライト）、Undo/Redo（お手本の変更も Undo/Redo 対象で、描画済みの絵と合わない角度に変えても元に戻せる。投げ縄での一括削除も1回のUndoで全復元）、キーボードショートカット対応（Cmd/Ctrl+Z, P/B/E/L, Cmd/Ctrl+0 でズームリセット、検索画面では Esc で一段戻る 等）。狭画面（iPhone等）では消しゴムアイコン長押しでサブモードを切替
• 補助線: 両画面同期のグリッド3段階切替（なし／通常／大）、中央太線付き、お手本画面でドラッグして任意の線分を配置
• ズーム/パン: 2本指ピンチ（iPad）/ トラックパッド（Mac）対応
• 全画面モード: Fullscreen API対応ブラウザで画面を最大限活用
• 左右反転: 両画面を同時に左右反転表示し、デッサンの歪みに気づきやすくする
• 答え合わせ: ドロー画面の線画をお手本画面にグリッド座標で重ねてリアルタイム比較（白縁取り付きで暗いお手本でも視認可能）
• タイマー: 描画時間を自動計測。集中して描いている時間だけが進むよう、バックグラウンド移行・保存・ギャラリー表示・お手本変更（角度変更含む）で自動停止し、次の線を引いた瞬間に再開。Undo で履歴を全て取り消して描画前の状態に戻ったらタイマーもリセット（Redo で線が戻ればそこから再計測）
• 保存・ギャラリー: IndexedDBに蓄積、サムネイル・お手本情報付き一覧表示、同じお手本で再練習。ギャラリーは「日付順（年月でグループ化）／手本順（初回使用）／手本順（最近使用）」の3モードを切り替え可能（選択はlocalStorageで保持）。グループは折りたたまれず仕切り線付きの見出しで区切られる。「このお手本で練習」ボタンには手本サムネイルが添えられ、手本順モードではグループ見出し側にまとめて表示される。削除はカード右上のチェックボックスで選択し、ヘッダーに現れる「削除 (N)」ボタンでまとめて実行（誤タップ即削除を防止）。各作品は SVG（ベクター）／PNG／JPEG にエクスポート可能で、ファイル名は保存タイムスタンプと手本タイトルから自動生成。ヘッダにはストレージ使用量の内訳（作品／画像履歴／ブラウザ全体推定）を折りたたみ表示
• オートセーブ: セッション状態（ストローク・補助線・お手本・タイマー・パネル折り畳み・ズーム/パン位置・左右反転）を自動保存。リファレンス変更や離散 UI ボタン操作（補助線・反転・折り畳みなど）は 2 秒のデバウンスを待たずに即時保存され、ページリロード後も中断したところから再開可能

Development

npm install
npm run dev        # Development server
npm run build      # Build for production
npm run test       # Run tests
npm run lint       # Lint

Tech Stack

• React + TypeScript + Vite
• Material-UI + Lucide Icons
• Vitest + React Testing Library
• Dexie.js (IndexedDB)
• Sketchfab Viewer API / Data API
• Pexels API
• GitHub Pages