shakyo — コード写経支援ツール

プログラミングコードの写経(お手本のコードをタイピングで書き写す学習法)を支援するWebアプリです。

お手本(ローカルファイル・PDF・Webページ・組み込みサンプル)を左に表示し、右のエディタで書き写す。入力はリアルタイムに正誤判定され、写経したコードはAIによる「意味解説」で理解を深められます。

機能

お手本ビューア(左ペイン)

• ローカルのテキスト/コードファイルをシンタックスハイライト付きで表示
• PDFファイルの表示(pdf.js)。ページは可視範囲の近傍のみ遅延レンダリングされ、大きなPDFでも軽快
• WebページのURL指定表示(iframe)。埋め込みを拒否するサイトは別ウィンドウで開く案内を表示
• 検索履歴とブックマーク: 表示したWebページは履歴に自動記録(最大20件、個別/全削除可)。よく使うページはブックマークに追加/編集/削除でき、ワンクリックで再表示
• 貼り付けタブ: テキストを直接貼り付けて「お手本にセット」するだけで写経を開始。確定後は読み取り専用のハイライト表示になり、リロード後も復元されます
• 組み込みサンプルコード集: FizzBuzz(TypeScript)・フィボナッチ(JavaScript)・二分探索(Python)・クイックソート(Go)・構造体とメソッド(Rust)・文字列反転(C) の6件。お手本を持っていなくてもすぐ写経を始められます

写経エディタ(右ペイン)

• CodeMirror 6ベース。言語選択でハイライト、入力内容はブラウザ(localStorage)に自動保存
• リアルタイム正誤判定: お手本との差分を入力と同時にハイライト(打ち間違いは赤系、お手本より長く打った超過は橙系)。行の途中まで打っている間はエラーになりません
• 統計表示: エディタ下部に WPM・正確率・進捗率を表示
• 進捗の永続化: お手本ごとに写経の下書きと進捗を保存。同じお手本を開き直すと前回の続きから再開できます
• 名前を付けて保存: 写経内容をアプリ内スナップショットとして保存/読込/削除、またはファイルとしてダウンロード

コードの意味解説

• 写経したコード(選択範囲または全文)をOpenAI APIに送り、初学者向けの日本語解説をストリーミング表示
• 解説のコピー、生成の停止に対応。接続/無応答タイムアウトやネットワークエラーは日本語メッセージで通知
• 追加で質問する: 解説パネル下部の入力欄から、直前の解説の文脈を保ったまま追加質問できます(回答もストリーミング表示、コピーはQ&A込み)

UI

• 分割ビューは左右(お手本/エディタ)・上下(エディタ/解説)ともドラッグでリサイズでき、比率は保存されます
• ダークモード: ライト/ダーク/システム(OS設定に追従)をヘッダーのボタンで切替
• ダイアログはキーボード操作に対応(Tabフォーカス循環・Escapeで閉じる)。設定は複数タブ間で同期されます

起動方法

npm install
npm run dev

表示されたURL(通常 http://localhost:5173)をブラウザで開きます。

APIキーの設定(解説機能を使う場合)

1. OpenAIのダッシュボードでAPIキーを取得
2. アプリ右上の「設定」からAPIキーを入力(モデルは既定で gpt-5.4-mini、変更可能)
3. キーはブラウザのlocalStorageにのみ保存され、OpenAI API以外には送信されません

解説機能を使わない場合、APIキーは不要です。

ロードマップ

• GitHub Pages への自動デプロイ
• Web参照タブの内蔵webview化(iframe埋め込みを拒否するサイトの制約解消。Tauriの内蔵webviewでも別ウィンドウ表示に留まっており未解決)

開発

npm run dev       # 開発サーバー起動
npm run test      # 単体テスト(Vitest)
npm run lint      # oxlint
npm run build     # 型チェック+本番ビルド

Pull Request と main への push では GitHub Actions で lint / test / build が自動実行されます。

デスクトップアプリ(Tauri)

Tauri v2により、Webアプリをそのままデスクトップアプリとしても配布できます。

前提: Rust stableツールチェーンが必要です。Linuxでは libwebkit2gtk-4.1-dev libgtk-3-dev などのシステムパッケージが別途必要になります。詳細は Tauri公式のPrerequisitesページ を参照してください。

開発:

npm run tauri dev

ビルド:

npm run tauri build

生成されたインストーラは src-tauri/target/release/bundle/ 以下に出力されます。

リリース: app-v* 形式のタグ(例 app-v1.2.0)をpushすると、GitHub Actionsのワークフロー(.github/workflows/desktop.yml)がWindows(.msi/.exe)・macOS(.dmg、arm64/x86_64)・Linux(.deb/.AppImage)のインストーラをビルドし、draft releaseに添付します。内容を確認してから公開してください。バージョンを上げる際は、アプリ表示バージョン(tauri.conf.json が参照)のもとになる package.json と、src-tauri/Cargo.toml の両方の version を更新してください。

注記: 配布バイナリはコード署名を行っていません。そのため、macOSでは Gatekeeper の警告が表示されます(右クリック→「開く」を選ぶか、xattr -dr com.apple.quarantine で解除してください)。Windowsでは SmartScreen の警告が表示されます。

実装計画は PLAN.md、開発規約とAIエージェント運用は AGENTS.md を参照してください。