Quick Anki

課題と目的

Web アプリ版「AnkiForge」はカード作成を自動化しましたが、「単語をコピー → Web アプリに移動 → ペースト」という手間がまだ残っていました。

この最後のひと手間をなくし、Web ブラウジング中の学習体験をシームレスにするため、ページ上の単語を右クリックするだけで即座にカードを作成できる Chrome 拡張機能「Quick Anki」を開発しました。

主な機能と特徴

• ⚡️ 右クリックで即時生成 英文記事やサイトを閲覧中に、知らない単語を選択して右クリック。「Quick Anki でカード作成」を選ぶだけで、全ての処理がバックグラウンドで実行されます。

• 🤖 AI によるリッチな情報付与 Web アプリ版の機能を継承し、ChatGPT APIが単語の意味・発音記号・例文を、Google TTSがネイティブ音声を、Pexels APIが関連画像を全自動で取得・生成します。

• 🖥️ Anki への直接登録 生成されたカードは、ローカル PC で起動中の Anki にAnkiConnectを通じて直接、自動で登録されます。

工夫した点・技術的な挑戦

• 🧩 Chrome 拡張機能のアーキテクチャ設計 ポップアップ（UI 担当）、バックグラウンドスクリプト（API 通信担当）、コンテントスクリプト（Web ページ操作担当）の役割を明確に分離し、React と Vite を用いてモダンな開発環境を構築しました。

• ☁️ Next.js による API サーバー 拡張機能から直接外部 API を叩く際の CORS エラーや、API キーの保護のため、API リクエストを中継する専用の Next.js サーバーを Vercel にデプロイし、安全で安定した通信を実現しました。

• 🔄 堅牢な非同期処理 右クリックという一瞬の操作から、複数の API を介した複雑な非同期処理が開始されるため、ユーザーへのフィードバック（「作成中...」「完了！」など）をデスクトップ通知で的確に行い、エラーハンドリングにも注力しました。