TL;DR
AIに質問すると、以前より簡単に知識を得られるようになりました。
一方で、AIとの会話を読んだ直後は理解した気になっていても、数日後には内容を思い出せないことがあります。
そこで、AIとの会話や資料から暗記カードを作成し、ブラウザ上で復習できる flashcard-viewer を作りました。
今回作ったものは、以下のようなシンプルなPWAです。
- AIとの会話や資料から暗記カード教材を作成
- 生成されたZIPファイルをブラウザから取り込み
- 一問一答と穴埋め形式に対応
- 「もう一度」「微妙」「覚えた」で進捗を管理
- カードの検索、セクション・進捗による絞り込み
- カード本文の修正と自分用メモ
- 教材・進捗・メモを端末内に保存
- 一度読み込めばオフラインでも利用可能
「AIで知識を得る」だけでなく、「あとから思い出す」ための導線を自分用に作った、というのが今回の開発の目的です。
会話・資料
│
▼
いつものAI
│ 暗記カード教材を生成
▼
flashcards.zip
│
▼
Flashcard Viewer
│
├─ 教材
├─ 学習進捗
└─ 自分用メモ
※ブラウザ内に保存
アプリとソースコード
- アプリ：Flashcard Viewer
- ソースコード：GitHubリポジトリ
背景
最近は、分からないことがあればすぐにAIへ質問できます。
技術の調査、書籍の要約、英語表現の確認、資格試験の学習など、インプットのスピードはかなり上がりました。
ただ、AIとの会話を読んでいるときは理解できていても、後から自分で説明しようとすると出てこないことがあります。
「わかった」と「覚えた」は違う
AIとの会話は、その場での理解にはとても便利です。
一方で、知識を定着させるには、時間を置いて自分の記憶から思い出すことも必要です。
そこで、AIとの会話をそのまま読み返すのではなく、復習しやすいカードに変換する仕組みを作ることにしました。
Ankiのような既存サービスがある中で、なぜ自分で作るのか
暗記カードのサービスとしては、Ankiのようなすでに完成度の高いものがあります。
そのため、最初からAnkiの代替を作ろうとしたわけではありません。
今回、自分で作ってみようと思った理由は、自分の学習方法に必要な範囲だけを小さくまとめたかったからです。
特に欲しかったのは、次のような流れでした。
- AIとの会話や資料を渡す
- AIに暗記カード教材を作ってもらう
- その教材をすぐに復習する
- 間違えたカードだけ後から見直す
また、個人利用なので、アカウント登録やサーバーへの教材保存も必要ありませんでした。
今回の目的は、機能の多い学習サービスを作ることではなく、
自分が普段使っているAIと、自分用の復習画面をつなぐ
ことです。
既存サービスを使うのが間違いということではなく、自分の学習フローに合わせて、必要最小限の道具を作ることにも意味があると考えました。
教材を作る流れ
トップ画面の「教材を作る」から、AIに渡すプロンプトをコピーできます。
任意で「何を教材にするか」を入力し、AIとの会話に貼り付けます。
例：
この会話で質問した英語表現を教材にしてください
AIには、会話や添付資料をもとに、以下の形式のZIPファイルを作成してもらいます。
教材名.flashcards.zip
├── manifest.json
└── cards.json
生成されたZIPをViewerに取り込むと、教材名やカード枚数を確認して、そのまま学習を開始できます。
AIがファイルを正しく生成できなかった場合は、Viewerに表示されたエラー内容と正式なスキーマを含む「修正依頼プロンプト」をコピーできます。
そのプロンプトとエラーになったZIPをAIに渡すことで、教材の内容を変えずに形式だけ修正してもらえるようにしています。
対応しているカード形式
現在は、シンプルな2種類に絞っています。
一問一答
問題：Spring Beanのデフォルトスコープは？
答え：singleton
穴埋め
水の化学式は ？？？ です。
答えを見ると、隠れていた部分が表示されます。
最初から画像や複雑なレイアウトなどに対応するのではなく、まずは「問いを見て、思い出して、答えを確認する」という学習の中心部分に絞りました。
学習画面でできること
学習画面では、カードごとに覚え具合を記録できます。
- もう一度
- 微妙
- 覚えた
進捗はカード単位で保存されるため、「もう一度」だけを表示することもできます。
また、カードが増えてきたときのために、以下にも対応しています。
- 用語検索
- セクションによる絞り込み
- 進捗による絞り込み
- 前回見ていたカードから再開
- 問題・答えの修正
- カードごとの自分用メモ
AIが作った問題が少し分かりにくいときは、Viewer内で自分用に修正できます。
「この説明を読んだときに自分が引っかかったポイント」などをメモしておくと、後から見返したときにも使いやすくなります。
技術スタック
- Vue 3
- TypeScript
- Vite
- Tailwind CSS
- IndexedDB
- PWA / Service Worker
- Cloudflare Pages
バックエンドは用意していません。
教材、学習進捗、カードの修正内容、メモはブラウザ内のIndexedDBに保存します。
そのため、Flashcard Viewer自体が教材や進捗を外部サーバーへ送信することはありません。
ただし、教材作成時に会話や資料を送る先は、利用するAIサービスの仕様に依存します。
教材フォーマットを分離した
今回の実装では、Viewerの中に教材生成ロジックを直接組み込むのではなく、Flashcard Package v1 という教材フォーマットを定義しました。
Flashcard Package
├── manifest.json
└── cards.json
Viewerはこの形式のZIPを読み込み、内容を検証してから保存します。
教材IDとカードIDは安定した識別子として扱っているため、同じカードIDを維持したまま教材を更新すれば、既存の学習進捗も引き継げます。
このように、教材を作る側と教材を見る側を分けたことで、将来的には別のツールや別のAIから教材を生成することもできます。
シンプルさを優先した理由
今回のアプリでは、最初から次のような機能は入れていません。
- ユーザーアカウント
- クラウド同期
- 複雑な学習アルゴリズム
- ソーシャル機能
- 教材の共有機能
これらが不要ということではありません。
まずは、自分が実際に使う学習サイクルを成立させることを優先しました。
AIでインプットする
↓
カードに変換する
↓
思い出す
↓
進捗を記録する
↓
忘れた頃にもう一度見る
この流れが使いやすければ、あとから必要な機能を追加できます。
作ってみて感じたこと
AIによって、教材を作るコストはかなり下がりました。
以前なら、会話や資料を読んで、自分で重要なポイントを抜き出し、問題と答えを整理する必要がありました。
今は、AIに一定のルールを与えることで、その作業の多くを任せられます。
ただし、教材を作ることと、知識を身につけることは別です。
AIがきれいな要約やカードを作ってくれても、それを自分で思い出す時間がなければ、知識は定着しません。
今回の開発を通じて、
AIはインプットを助けてくれるが、思い出す部分まで自動化してくれるわけではない
ということを改めて感じました。
そのため、AIとの会話をカードに変換し、定期的に思い出せる場所を用意することに意味があると思っています。
今後やってみたいこと
今後は、以下のような機能も検討しています。
- 復習タイミングの最適化
- カードの並び順の改善
- Markdownや画像への対応
- 教材パッケージの共有
- AI以外からの教材インポート
- 複数端末でのデータ移行の改善
ただ、機能を増やしすぎると、最初の目的である「気軽に復習する」から離れてしまう可能性もあります。
まずは、自分が継続して使えるシンプルさを維持したいと考えています。
まとめ
AIによって、知識を得ること自体はとても簡単になりました。
一方で、得た知識を後から思い出せる状態にするには、復習の仕組みが必要です。
今回作った flashcard-viewer は、AIとの会話や資料を、自分用の暗記カードに変換して復習するための小さなアプリです。
Ankiのような完成度の高いサービスがある中で自分で作った理由は、すべての人に向けた機能を揃えるためではありません。
- 自分の学習フローに合わせたい
- AIとの会話から教材を作りたい
- 教材や進捗を端末内だけで管理したい
- 必要な機能だけのシンプルな画面で使いたい
という目的があったからです。
今回は自分専用のアプリとして作りましたが、教材フォーマットとViewerを分離しているため、汎用化すれば、同じような学習スタイルの人にも使ってもらえる可能性があります。
「わかった」で終わらせず、「思い出せる」に変える。
そのための小さな道具として、これからも改善していきたいと思います。