<section><div><div><div><a><div><img></div><div>Chrome拡張</div></a><a><div><img></div><div>React</div></a><a><div><img></div><div>個人開発</div></a><a><div><img></div><div>自動生成</div></a><a><div><img></div><div>OpenAI</div></a><a><div><img></div><div>idea</div></a></div><div><div><p data-line="0">技術記事なりドキュメントなりを読む時、ページ末尾に確認問題があると理解度チェックができて嬉しいなと思ったので、その手のモジュールを挿入するブラウザ拡張を作りました。</p>
<h2 data-line="2">
<a aria-hidden="true"></a> 完成品</h2>
<p data-line="4">chrome拡張を使用することで、こんな感じ⇩にZennやQiitaの記事の末尾に確認問題が表示されるようになります。問題はGPT4o-miniで生成されます。特にアカウント登録などは必要なく、chrome拡張を有効化したら自動でモジュールが挿入されるようになります。</p>
<p data-line="6"><img alt="Zennの記事の下部に確認問題モジュールが挿入されている。モジュールは4択問題の形状"><br>
<em>Zenn記事では、リアクションボタンの下に4択問題が挿入される</em></p>
<p data-line="9">また、ZennとQiita以外では、<a>MDN</a>と<a>PostgreSQL文書</a>にも対応しています。そのうち他の公式仕様書とかにも対応するかもしれません。</p>
<p data-line="11"><img alt="MDN記事の下部に確認問題モジュールが挿入されている。モジュールは4択問題の形状"><br>
<em>MDN記事では、関連項目の箇所に4択問題が挿入される</em></p>
<p data-line="14">chrome拡張は以下で公開しています。</p>
<p data-line="16"><span><iframe frameborder="0" scrolling="no"></iframe></span><a>https://github.com/tfs-tada/chrome-ex-chatgpt-quiz</a></p>
<p data-line="18">スマホの方は以下のページをどうぞ。既存のクイズを解けるほか、zennやqiitaのurlを打ち込むことで、新たなクイズを生成することができます。</p>
<p data-line="20"><span><iframe frameborder="0" scrolling="no"></iframe></span><a>https://quizenn-df3jqgubgq-an.a.run.app/</a></p>
<p data-line="22">出題画面はこんな感じ。</p>
<p data-line="24"><img alt="Zennの記事の内容から確認問題を生成して表示するwebアプリの画面" width="300"></p>
<h2 data-line="26">
<a aria-hidden="true"></a> 背景</h2>
<p data-line="28">最近、ポスグレに詳しくなりたくて<a>PostgreSQL文書</a>をよく読んでいるのですが、頭に入っている実感がなくて参っていました。これについて、もう少し達成感を得たいな、というところからスタート。</p>
<p data-line="30">ちょうどその頃、OpenAIから GPT4o-miniが公開されました。極めて良心的な価格設定と、期待以上のクオリティにより、個人開発でAIを使う、という選択肢は一気に身近になりました。<br>
<span><iframe frameborder="0" scrolling="no"></iframe></span><a>https://openai.com/index/gpt-4o-mini-advancing-cost-efficient-intelligence/</a></p>
<p data-line="33">しばらくは自分のPCだけでポスグレ文書から確認問題を生成して遊んでいましたが、gpt4o-miniが想像以上に安い。全然トークンが減らない。無料サービスにしても全然平気そうだな、ということで公開しました。</p>
<p data-line="35">真面目な話ですと、技術記事を読む際、明確な目的があるかどうかで読み方が変わるかと思われます。抱えた課題を解決するために記事を訪れた場合と、ただトレンドの記事を眺める場合では、吸収効率が違うように思います。</p>
<p data-line="37">特に課題はなくキャッチアップのために記事を読む場合、読みっぱなしで終わってしまいがちです。確認問題モジュールがあれば、それはひとつの明確なゴールになるのではないでしょうか。</p>
<h2 data-line="39">
<a aria-hidden="true"></a> 技術的なあれこれ</h2>
<h3 data-line="41">
<a aria-hidden="true"></a> 技術選定</h3>
<p data-line="43">おおよそベーシックな技術選定なので、簡単に紹介だけ。</p>
<p data-line="45">chrome拡張のほうは React+viteを使い、Plasmo等のブラウザ拡張用フレームワークの採用は見送りました。特定のwebページに軽量モジュールを挿入するだけの拡張なので、あまりリッチな選択はしませんでした。</p>
<p data-line="47">サーバーのほうは、Next.jsのPageRouterを採用。chrome拡張から叩かれる前提でapi設計をすることになったので、AppRouterは見送りました。DBはSupabase、接続はPrismaに丸投げしたので、かなり楽ができました。外部接続周りの課題は、キャッシュとレートリミットで何とかしています。デプロイはCloudRunですが、固有ドメインを取得していないので、urlがぐっちゃぐちゃです。</p>
<p data-line="49">前述の通り、問題作成用の生成AIはOpenAI-GPT4o-miniを採用。トークンが切れたらサービスごと停止するかも。</p>
<h3 data-line="51">
<a aria-hidden="true"></a> プロンプトの課題</h3>
<p data-line="53">自分はAIを用いたアプリを開発した経験は薄かったので、乗りこなすのは結構苦戦しました。以下は課題の一例です。</p>
<h4 data-line="55">
<a aria-hidden="true"></a> ちょうどいいハズレ選択肢を作るのは難しい</h4>
<p data-line="56">今回は4択問題の形式で確認問題を生成させています。正解を作らせるのは難しくないのですが、ハズレ選択肢を作らせるのは一苦労です。ハズレなのに部分的に正解、みたいなものが出力されかねません。教習所みたいなやるせなさを覚えることになります。</p>
<h4 data-line="58">
<a aria-hidden="true"></a> 学びにならない出題</h4>
<p data-line="59">記事の内容確認として相応しくない問題が度々吐き出されます。たとえば、</p>
<ul data-line="61">
<li data-line="61">この記事の対象読者はどのような人ですか？</li>
<li data-line="62">この記事で紹介された成果物はどこに公開されていますか？</li>
<li data-line="63">この記事で、手法Aの評価は星いくつですか？</li>
</ul>
<p data-line="65">などなど。プロンプトを調整してどうにかならないか試行錯誤しましたが、どうにかなったか、と問われると首を傾げてしまいます。</p>
<h2 data-line="67">
<a aria-hidden="true"></a> 振り返り</h2>
<h3 data-line="69">
<a aria-hidden="true"></a> サービスとして</h3>
<p data-line="71">この手のアプリを真面目にサービス化しようとすると、構造的な歪みがネックになりそうです。</p>
<p data-line="73">PC版はchrome拡張で実現したのに対し、SPだと専用サイトに遷移してクイズを検索する必要があります。ユーザー体験として、PC &gt; SPとなります。</p>
<p data-line="75">一方で、実際にZennやQiitaを読む際、</p>
<ul data-line="77">
<li data-line="77">PCで読む時 → 業務中や個人開発中の課題解決</li>
<li data-line="78">SPで読む時 → あらたな技術のキャッチアップやトレンド追い</li>
</ul>
<p data-line="80">なので、本来はSPユーザーにこそ届いてほしい機能なのに、SPユーザーの体験が残念、というのは結構致命的だったりします。スマホでもchrome拡張が使える日がやって来ればいいのですが、そういうわけにもいかないので。</p>
<p data-line="82">一応、スマホ版ブラウザの中でもKiwi Browserなんかは拡張が使えるはずなので、このあたりを浚ってみるのもいいかもしれません。</p>
<h3 data-line="84">
<a aria-hidden="true"></a> 所感</h3>
<p data-line="86">自分用アプリでは、はてなブログやnoteやYahooニュースを読むときにも、この手のクイズモジュールを挿入しています。記事を読む行為に締まりが出る気がします。多分気のせいです。</p>
<p data-line="88">やりすぎなきらいはありますが、自分に合った形でAIを活用する、という意味では、今後この手の工夫をする機会は増えていくのではないでしょうか。AIがより身近に、よりローコストになるのはほぼ確定的である以上、うまく乗りこなしていきたいものです。</p>
</div></div><span></span><aside><div><a><img alt="倉敷" height="80" referrerPolicy="no-referrer" width="80"></a><div><a>倉敷</a></div><div><p><span>新卒2年目の駆け出しJavaエンジニア。tsが書きたい</span></p><div><span></span><a aria-label="@tfs-tada" data-tooltip-for-desktop="true" data-tooltip-position="bottom" role="tooltip"><svg x="0px" y="0px" viewBox="0 0 27 27" xml:space="preserve" aria-label="GitHub"><path fill="currentColor" d="M13.4,1.2C7,1,1.8,6,1.7,12.4c0,0.1,0,0.4,0,0.5c0,5.1,3.2,9.8,8.2,11.5c0.6,0.1,0.7-0.2,0.7-0.6s0-1.8,0-2.9 c0,0-3.3,0.6-4-1.5c0,0-0.6-1.3-1.3-1.8c0,0-1.1-0.7,0.1-0.7c0.7,0.1,1.5,0.6,1.8,1.2c0.6,1.2,2.2,1.7,3.4,1h0.1 c0.1-0.6,0.4-1.2,0.7-1.6C8.7,17.1,6,16.9,6,12.3c0-1.1,0.5-2.1,1.2-2.8c0-1.1,0-2.2,0.3-3.2c1-0.4,3.3,1.3,3.3,1.3c2-0.6,4-0.6,6,0 c0,0,2.2-1.6,3.2-1.2c0.5,1,0.5,2.2,0.1,3.2c0.7,0.7,1.2,1.8,1.2,2.8c0,4.5-2.8,5-5.5,5.2c0.6,0.6,0.9,1.3,0.7,2.2c0,1.7,0,3.5,0,4 s0.2,0.6,0.7,0.6c4.9-1.7,8.2-6.2,8-11.5c0.1-6.4-5.1-11.6-11.6-11.6C13.5,1.2,13.4,1.2,13.4,1.2z"></path></svg></a><a aria-label="@kurashiki0ecma" data-tooltip-for-desktop="true" data-tooltip-position="bottom" role="tooltip"><svg width="27" height="28" viewBox="0 0 27 28" fill="none" aria-label="X(Twitter)"><g clip-path="url(#clip0_1_18)"><path d="M16.0687 11.7356L26.12 0H23.7382L15.0106 10.1899L8.03988 0H0L10.5411 15.4089L0 27.7155H2.38199L11.5985 16.9546L18.9601 27.7155H27L16.0681 11.7356H16.0687ZM12.8062 15.5447L11.7382 14.0103L3.24025 1.80106H6.89884L13.7568 11.6543L14.8248 13.1887L23.7393 25.9963H20.0807L12.8062 15.5452V15.5447Z" fill="currentColor"></path></g><defs><clipPath><rect width="27" height="27.7297" fill="white"></rect></clipPath></defs></svg></a></div></div></div></aside><span></span></div></div><div><div></div></div></section>

理解度チェックを行うための確認問題を提供すること

ページの読み込み速度を向上させること

広告を表示するためのスペースを確保すること

他のウェブサイトへのリンクを増やすこと

極めて良心的な価格設定であること

特定のプラットフォームでのみ利用可能であること

正解を作るのは難しくないため

ハズレ選択肢が部分的に正解になりやすいため

ただトレンドの記事を眺めること