問題集を自分で作って、そのままスマホで勉強できるWebサービス「Quizpo（クイズポ）」を作りました。
資格の勉強などで「自分専用の問題集が欲しい」と思うことが何度かあり、せっかくなので個人開発してみました。
Web版は先日ようやく公開できました。
どんなサービス？
Quizpoは、自分で問題集を作って学習できるサービスです。
個人的に一番やりたかったのが、
PCで問題をまとめて作る → スマホで解く
という使い方でした。
問題集を作るならキーボードのあるPCの方が圧倒的に楽です。でも実際に勉強するときは、机の前だけではなくスマホでサッと開きたい。
そこでQuizpoでは、PCとスマホのどちらかに寄せるのではなく、それぞれで使いやすくなるようにしています。
作った問題集はURLやQRコードで共有できるので、自分だけで使ってもいいですし、友人や勉強仲間に渡すこともできます。
問題作成はExcelっぽく
問題作成画面はこんな感じです。
一般的な「1問入力 → 保存 → 次の問題を入力……」というUIではなく、表形式にしました。
これは開発初期からかなりこだわった部分です。
問題集を作るときに1問ずつ画面を切り替えるのが面倒だったので、上からどんどん入力できるようにしています。表計算ソフトからまとめて貼り付けることもできます。
入力内容は端末へ自動保存されるので、途中で画面を閉じても大丈夫です。
ログイン前から問題を作り始めることもできます。ログインすればクラウドへ保存され、別の端末から続きを編集できます。
登録しなくても問題を解けます
Quizpoを公開するにあたって悩んだのが、
「最初にアクセスした人が、問題集0件の画面を見ても何も面白くないよな……」
ということでした。
そこで「Quizpo公式」として、最初からいくつか問題集を入れています。
現在は30問題集、合計544問です。
英語やIT系のほか、小学校算数、日本地理、科学、歴史、地域雑学などもあります。
公開問題集はアカウント登録なしで開けます。
「ちょっと試してみようかな」という段階でいきなりGoogleログインなどを要求するのは避けたかったので、Quick Reviewならそのまま問題を解けるようにしました。
なお、資格試験の過去問や市販教材をそのまま入れているわけではありません。公的機関や公式ドキュメントなどで内容を確認し、問題文と解説は新しく作っています。
スマホでは「解く」ことに集中
ログインすると、もう少し本格的に学習できます。
現在用意している形式は、
- フラッシュカード
- 4択
- ○×
- 文字入力
- 穴埋め
- 複数選択
- 並べ替え
です。
学習履歴や苦手な問題も残ります。
PCで問題集を作っておいて、移動中やちょっと空いた時間にスマホで何問か解く、というのが個人的には一番使いやすいと思っています。
問題集をURLで渡せるようにした
作った問題集は公開できます。
普通に公開するだけでなく、一覧には載せずURLを知っている人だけが見られる「限定公開」も用意しました。
授業や勉強会、友人同士で使う場合はこちらの方が便利かもしれません。
もう一つ、Challengeという機能も作りました。
同じ問題に複数人で挑戦できますが、リアルタイムで集まる必要はありません。URLを送っておけば、それぞれ好きなタイミングで参加できます。
逆にコメントやDM、フォローなどのSNS的な機能は入れていません。
この辺まで入れ始めると何のサービスなのか分からなくなりそうだったので、今のところは「問題を作る・解く・渡す」くらいに留めています。
技術構成
構成はこんな感じです。
| 領域 | 使用技術 |
|---|---|
| Web | Next.js App Router / React / TypeScript / Tailwind CSS |
| 認証・DB | Supabase Auth / PostgreSQL / RLS |
| Web配信 | Cloudflare Workers / OpenNext |
| オフライン | IndexedDB / Dexie |
| Mobile | Expo / React Native |
| テスト | Vitest / Playwright |
Webだけで終わらせるつもりはなく、iOS / Androidも想定した構成にしています。
ただし、現在正式に公開しているのはWeb版だけです。
iOSはApple Developer Programへの登録が必要になるので、Web版をもう少し運用してから進める予定です。
オフライン時の扱いも少し頑張りました。
作成途中の問題集などはIndexedDBへ保存しているので、一時的に通信が切れても編集内容が全部消える、ということがないようにしています。
Codexをかなり使って開発しました
今回ちょっと変わっているところとして、開発にはCodexをかなり使いました。
単純に、
「この画面作って」
とコードを書かせるだけではなく、
実装 → テスト → lint / typecheck → ドキュメント更新 → commit
あたりまでを一つの作業として任せています。
そのために最初に設計書やAcceptance Criteriaをかなり細かく作りました。
一方で、何でもAI任せにしたわけではありません。
本番公開、法務関係の文章、実機での最終確認などは人間側で止めるようにしています。
特にスマホUIは、コードだけ見ていても分からない問題が結構ありました。
「この見出し、iPhoneだと変なところで改行されるな」とか、「このボタンちょっと押しづらいな」とか。
iPhoneやiPadで実際に触る → 気になるところを直す、という作業は何度もやっています。
この辺はAIに全部任せるより、
面倒な実装や検証は任せつつ、最後は自分で触る
くらいが個人開発ではちょうどよかったです。
本番公開でいきなりやらかした
実は最初のproduction公開では、Google OAuthが正常に動きませんでした。
公開前のAcceptance環境では問題なかったのですが、本番ドメインへ切り替えたところで認証まわりに問題が発覚しました。
そのため、一度 quizpo.app を未公開状態へ戻しています。
原因を修正して、Acceptance環境でもう一度確認。
その後に再度productionへ公開して、今度は実際のGoogleアカウントでログインできるところまで確認しました。
個人開発だと、
「まあ動くだろう」
でそのまま直したくなりますが、最初からunpublishやrollbackの手順を作っておいたのは正解でした。
今ではこの失敗も含めてRelease Recordに残しています。
テストは259件まで増えた
公開時点では、自動テストが259件あります。
最初から259件書こうと思っていたわけではなく、不具合を直したり機能を追加したりするたびに増えていった結果です。
認証、問題集の公開範囲、作成、学習、共有、Challenge、アカウント削除などを対象にしています。
Desktopだけでなく、iPhone / iPad相当の表示も確認しました。
個人開発なので「テストにどこまで時間をかけるか」は悩みましたが、今回はAIに実装をかなり任せた分、テストは多めにしておいてよかったと思っています。
公式問題集544問も入れてみた
公開直後は公式問題集がほとんどなかったので、その後30問題集・544問を追加しました。
ここでも、いきなりproduction DBへ流し込むのではなく、
- 問題・解説のチェック
- 重複チェック
- 出典管理
- Acceptance環境で確認
- 隔離DBへ投入
- 同じデータを2回投入しても重複しないことを確認
- production投入
という手順を踏んでいます。
実際、最初のproduction投入ではカテゴリの初期データが入っておらず、一度処理が止まりました。
中途半端に30問題集の一部だけ入ることはなく、そのまま停止。
カテゴリを投入してからやり直し、最終的に30問題集・544問すべて入りました。
こういうところは、作っている本人としては地味ですが結構気に入っています。
これからやりたいこと
まずは公開したばかりなので、実際に使ってもらって改善していきます。
Google検索から公開問題集を見つけてもらえるようSEOも進めています。
公式問題集についても、闇雲に数を増やすのではなく、どのジャンルが実際に使われるのかを見ながら追加する予定です。
収益化も進めます。
無料で使える部分は残しつつ、広告やPremiumプランをどう組み合わせるか検討しています。
Web版がある程度落ち着いたら、iOS / Android版も公開したいです。
よかったら触ってみてください
Quizpoはこちらです。
登録しなくても「Quizpo公式」の問題集をQuick Reviewで解けます。
資格勉強や暗記用に「こういう問題集が欲しい」、実際に触って「ここ使いづらい」などあれば、フィードバックをもらえると嬉しいです。
まだ公開したばかりなので、これから少しずつ育てていきます。