【個人開発】英語記事から自分だけの単語帳を作るAIアプリ「Wata-Voca」をリリースしました
こんにちは、鮭のあて です。
今回、Web記事を取り込んで自分専用の単語帳を作れるアプリ「wata-voca（ワタボカ）」を開発・リリースしました！
Stripeの審査も無事に通過し、v1.0として正式リリースできたので、技術スタックや開発の裏話、特に Gemini 2.0 Flash を活用した部分について共有したいと思います。
どんなアプリ？
一言で言うと、「自分が読みたい英語の記事で、効率よく単語学習ができるアプリ」です。
開発のきっかけ
市販の単語帳は素晴らしいですが、「自分の興味・関心がある分野の単語を覚えることができるか？」と言われると必ずしもそうではないと思っていました。
「自分が興味のある記事（＝生きた文脈）の中から、知らない単語や頻出する単語をピックアップして覚えたい」
そんな思いから開発したのが「Wata-Voca」です。
主な機能
1. 記事取り込み & AI要約 (Gemini 2.0 Flash)
ユーザーは以下の方法で記事を取り込めます。
- Web記事のURLを入力
- 任意のテキストを貼り付け
- CNN からの自動取得（おまかせ機能）
記事を取り込むと、AI (Gemini 2.0 Flash) が30秒~1分ほどで内容を解析。
日本語要約を生成してくれるので、まずはざっくりと内容を掴むことができます。
2. 文脈重視の重要単語抽出
ここが一番のこだわりポイントです。
単に「難易度が高い単語」を抽出するのではなく、「その記事のトピックを理解する上で重要な単語」や「ユーザーがまだ覚えていない単語（※今後の強化ポイント）」を中心に、単語を抽出します。
もちろん、意味や例文はその記事内での使われ方に基づいて生成されます。辞書の1番目の意味ではなく、文脈に合った意味が表示されるので、記憶に定着しやすいです。
3. 単語帳 & 赤シートモード
抽出された単語は自動的に単語帳に登録されます。
有料プラン（Basic/Premium）では、往年の「赤シート」のように単語を隠して学習できるモードも搭載しました。マウスオーバーやタップで答えを確認できるので、サクサク復習できます。
技術スタック
エディタは Antigravity を利用し、コーディングは基本的に任せました。
ただ、技術選定や要件を詰める部分は、こちらで徹底的に詰めていきました。
| カテゴリ | 技術 | 選定理由 |
|---|---|---|
| Frontend | Next.js 16 (App Router) | 最新機能をキャッチアップするため。 |
| Language | TypeScript | 型安全性は必須。 |
| UI | Material UI (MUI) + Tailwind CSS v4 | フロントエンドに知見がないため、なるべく楽しようと思い。 |
| Backend / DB | Supabase | BaaSツールでなるはやで実装を済ませたかった。 |
| AI Model | Google Gemini 2.0 Flash | ロングコンテキスト対応。今回のアプリに十分な性能。 |
| Payment | Stripe | 決済機能を使ってみたかった。定番なので。 |
| Deploy | Vercel | Next.jsとの相性も考慮して。 |
技術的な挑戦と裏話
1. Gemini 2.0 Flash が優秀
単語抽出や要約生成には、Gemini 2.0 Flashを使用しています。
当初はGPT-4o miniなども検討しましたが、以下の点でGemini 2.0 Flashを採用しました。
- 速度: ストリーミングなしでも体感できるほど速い。
- コスト: 個人開発のお財布に優しい無料枠と低価格設定。
- JSON Mode: アプリケーションに組み込む上で、安定したJSON出力は必須です。Geminiはスキーマに従ったJSONを高い精度で返してくれます。
プロンプトエンジニアリングでは、単に「単語を出して」と言うのではなく、
「意味は文脈に即した日本語訳で」
などといった指示を組み込み、出力の質を高めています。
2. Stripe導入と審査の壁
個人開発で一番緊張するのがStripeの本番利用申請（Account Activation）ではないでしょうか。
今回は「特定商取引法に基づく表記」のページ作成や、利用規約・プライバシーポリシーの整備をしっかり行った上で申請しました。
基本的には Gemini に雛形を書いてもらい、画面上に反映しました。
ただ、一部Stripe側の項目とあっていない部分があり申請が通らないことが多々ありました。
特定商取引法に基づく表記の記載通りに修正したところ承認も降りてくれました。
サブスクリプションの実装には、Stripe CheckoutとCustomer Portalを使用しました。
自前でカード情報入力画面を作らなくて済みますし、プラン変更や解約もポータルにお任せできるので、実装工数を削減できました。
Webhookによる権限同期（subscription.updated などのイベントごとの処理）も実装し、決済状態とDBの状態をリアルタイムに同期させています。
今後の展望 (Roadmap)
現在はv1ですが、やりたいことはまだまだあります。
どちらかというと、私が技術的にチャレンジしてみたい内容ですが。。。
- PDF取込: メタデータなどを排除し、セキュリティ上問題ない形で取り込む勉強をしたい。
- リスニング対応: TTS (Text-to-Speech) を使って、記事の読み上げや単語の発音確認ができるようにしたい。
- 多言語対応: 別言語をリリースするのをきっかけに言語ごとにドメインを切りマイクロサービス化してみたい。
さいごに
英語学習は「継続」が一番難しいですが、Wata-Vocaを使うことで、**「自分の好きな(必要な)記事を読む」＝「気づいたら勉強になっている」**というサイクルを作れれば最高だなと思っています。
自分の悩みを解消しつつ、エンジニアとしても一皮剥けることができたと思うのでとても楽しかったです。
もし興味を持っていただけたら、ぜひ使ってみてください！
フィードバックや機能要望もお待ちしています。
最後まで読んでいただきありがとうございました！
Discussion