一般的に人々はテキストを書くよりもポチポチ選択していく作業の方が楽かと思います。テキストを生成することはかなり頭を使いますが、ポチポチ選ぶだけであれば頭をそこまで使わないと考えられるためです。
というわけで私みたいな飽き性な人にとっては、何かを学習する際には文章を書くよりも4択クイズなどの方が数をこなせるわけです。そのため、4択クイズをいい感じに回せるツールを取り敢えず作ってみることによって何とか学習の意欲を増そうということにし、その結果 AnySlash という名前の4択クイズサイト（？）が出来上がりました。ここから試してみることが可能なので、ぜひAI様によって適当に作られたAnySlashを体感してみてください。
結論
- Claude Codeを用いて4択クイズをこねくり回せるサイト「AnySlash」を作成した
- AnkiファイルやCSVファイルも読み込める
- 基本的に全てローカルで処理をしている
Claude Code
長々しい書き出しで申し訳ないのですが、要は4択クイズを出来るツールが欲しかったわけです。そんなこと言ったとしても「Anki」という素晴らしいOSSがあるではないかというツッコミが入るかと思います。そうです。そうなんです。Ankiがあるのです。とはいってもAnkiにはいくつか難点があります。
- 高機能すぎる
- 4択のみに対応していない
- プラットフォーム間の対応が微妙
- ファイル形式が独特
最初のものに関しては完全にモンスタークレーマーの域に達しているかと思いますが、下2つに関しては納得していただける方もいらっしゃるのではないでしょうか。Ankiはプラットフォームごとに対応しているものが異なり、特にスマートフォンにおける対応は正直言ってかなり微妙なものとなっています。また、様々な方によって改善手法はある程度確立されているものの、ファイル形式がかなり独特のものとなっており、問題及び回答の作成が面倒なものとなっております。ここから、
- 4択クイズのみが出来るシンプルなツールが欲しい
- Webプラットフォームで完結出来うるようにしたい
- Excelなどで問題及び回答の編集が可能なようにしてほしい
- 可能であればPWAに対応してほしい
どうせ適当に作成するので、運用するにあたってお金がかからないようにしたい
といったニーズが出てきました。このニーズを自前で実装してもいいのですが正直面倒なので、月20ドルを課金して使えることとなっているClaude Code様に以下のようなプロンプトを投げて作ってもらうことにしました。
私は今規定のJSONファイルを読み込んで、ローカルで処理し、4択クイズを提供するWebアプリ（要PWA対応）の制作を考えています。規定のJSONファイルはankiファイルと互換性があるような構造にしたく、またExcelCSVから容易に変換できるようにもしたいです。これらを実現するうえで、Astroで可能な限りシンプルに実装したいです。CSSフレームワークにはBulma v1を使用しており、機能にとって必要なclassのみを与えることを考えてください。例えばh1タグにはclass="title"のみを与えることで十分で、is-5などといったサイズを与えることは不要です。他には、Cloudflare PagesやGitHub Pagesなどの無料枠の大きいプラットフォームで動かすことを考えています。最後にJSONのスキーマなどを生成してくれると助かります。READMEには敬体を用いて絵文字を控えめにしながらユーザーに対する案内と、開発者向けのセットアップ手法を書いてくれると助かります。パッケージマネージャーはpnpmを使用してください。開発を行う際は適宜ビルドなどを行って構いません。 think hard
長々と書いていますが、そんなに重要なことは書いておらず、これまでのニーズを日本語に起こしてみただけです。またAI様は過剰なかつ複雑な装飾をしがちなので、classの付与を抑えるような指示を投げてみました。
sharecaneを作成した時と同様に3分くらいで基本的な機能はサクッと作られたのですが、微妙なところの出来は甘く、個人的に必要な
- URLを改行区切りで入力することによって複数のクイズを連続でできる機能
- CSVを標準的なUTF-8形式だけでなく、Excelでの読み書きに適したもので出力するようにする機能
- やっぱりついた余計なCSSを削除
- 事前にパッケージを入れておいたのに、Bulmaをわざわざjsdeliver経由で読み込んでいたのでそれを修正
- キーボード操作で進められる機能を追加
- PurgeCSSを追加
- Footerを私のプロダクトにありがちな例のスタイルで追加
といった機能を手の温かみによって編集したりClaude Code様に書かせたりして3時間ほどがかかってしまいました。結果的にどんな感じになったかはソースコードをいい感じに読んでいただけますと幸いです。
AnySlash
そんなこんながあって、AnySlashがどうにか完成しました。一応Cloudflare Pagesに上げておりここから使用することが可能です。
スクリーンショットのように見た目は極めてシンプルですが、必要最低限の機能をのっけたつもりです。また便利機能としては、
- キーボードの1～4で選択
- Enterキーを押して確定
- 正誤判定が下に出るため読む
- 再度Enterキーを押して次の問題へ
といったものが搭載されており、パソコンであればキーボードを押すだけでどんどんどんどん問題を裁くことが出来ます。面倒なマウス操作であったり、Tabキーを連打する必要が無く、シンプルな形で進めることが可能となっています。
質問・回答の生成
こうしたツールで面倒なこととして質問・回答の生成というものがあります。暗記するためのツールですが、そのための準備がそれ相応に必要なため簡単には暗記させてくれません。「ジムに行くから痩せるのではなく、運動するから痩せるのだ」みたいな話かと思っています。
しかしながら、シンプルなファイルフォーマットとなっており、かつ構造化されているので 生成AIとの相性は抜群 と言えます。そのため私は以下のような手法を用いて質問・回答のJSONファイルを作成してみています。
- 過去問を読み込ませ、出題点のキーポイントを抜き出す
- マルチモーダルなことが多いので、必ずしもテキストでなくともよいので、適当にスキャンされたものでもよい
- 「4択問題にしやすい点をピックアップし、反対にピックアップされなかった点を教えてください」という指示を与えるとよさそう
- 「深く調べる」的な機能を用いるとより良い結果が得られるかと思います
- 4択クイズの選択肢・回答・解説を生成させる
https://github.com/oageo/anyslash/blob/main/quiz-schema.jsonにスキーマがあるといった情報であったり、例示JSONを直接貼ることにより、JSONファイルを生成する- 生成されたJSONファイルを保存し、AnySlashへ読み込ませる
これによって、パソコンを使用している場合では15分程度で過去問がAnySlashで解けるようになりました。とある資格試験の勉強をしているのですが、ちょっとは捗りそうかと思います。
最後に
前回の技術関係の記事: 拡張機能「sharecane」がChrome Web Storeでいつの間にか公開
というわけでAnySlashという4択クイズアプリを作成したという記事でした。正直あまり大したことはしていないのですが、便利な人にとっては便利というくらいのものが作れたかと思います。
AI驚き屋さんみたいなことを言いますが、ある程度イメージが具現化できている場合にAIコーディングエージェントは強力な味方となってくれるかと思います。魔法の杖…とまではいかず相当な手直しは入っていますが、骨格ならず肉までも数分で作ってくれるためとても便利です。
Claude Codeのサブスクリプション（Claude Proプラン）の期限までもうすぐ残り10日ですが、何か思いついたらこのノリで適当なツールを作っていこうかと思います。
