推しアイデア
拡張機能として実装したこと WebサイトだけではなくPDFも読み込んで文章にマーカー引けるようになったこと 問題や答えを印刷できること AIで答えや文章題を生成したこと
拡張機能として実装したこと WebサイトだけではなくPDFも読み込んで文章にマーカー引けるようになったこと 問題や答えを印刷できること AIで答えや文章題を生成したこと
大学のテスト勉強の時に単語帳を自分で作成するのが面倒だったことがきっかけです。単語帳を作っただけで満足してしまい、勉強までなかなか辿り着けないことが多かったです。なので、WebサイトやPDFにマーカーを引くだけで単語帳ができるようなツールがあると便利だと考え、作成しました。
pdf.jsを使ってWebでPDFを表示し、マーカーを引けるようにしたこと Gemini APIを読み込んで、単語の答えや文章題の自動生成機能
WebやPDFにマーカーを引くことで単語帳を作成するChrome拡張機能+Webアプリ
WebやPDFで見つけた覚えたい単語をドラッグ&ショートカットキーで保存・送信することで、簡単に単語帳を作成することができます。 また、AI生成機能で単語の答えや単語帳内の問題すべてを使った文章題を作成することもできます。
Githubからクローンします。拡張機能のページから「パッケージ化されていない拡張機能を読み込む」を押します。そこからクローンしたプロダクトのpublic(\WebTan\project\public)を読み込みます。すると、任意のwebページで右上にあるパズルピースのボタンからタンタンを押すと、ポップアップが表示されます。

Chrome拡張機能のポップアップから「ショートカット設定を開く」を選択すると、ショートカットキーの設定画面が表示されます。任意のショートカットキーを設定した後、前の画面に戻ります。次に、使用するマーカーの色と保存先となるラベル(単語帳)を設定します。その後、Webページ上で保存したい単語を選択し、先ほど設定したショートカットキーを押すと、選択した単語にマーカーが適用されます。マーカーを付けた単語を保存する場合は、「単語を送信」に割り当てたショートカットキーを押します。送信が完了すると、単語は保存され、表示されていたマーカーは自動的に消去されます。


Chrome拡張機能のポップアップから「PDFマーカーを開く」をクリックします。次に、マーカーを付けたいPDFファイルを選択して開きます。PDFが表示されたら、保存先となるラベルとマーカーの色を選択します。その後、保存したい単語や文章を選択し、「マーカーを引く」をクリックします。「マーカーを引く」を実行すると、選択した箇所にマーカーが適用されると同時に、選択した内容が指定したラベルへ自動的に送信・保存されます。

このリンクをChromeから学習する単語帳を選んで学習することができ、新たに単語帳を作成することもできます。

カード追加・カードのシャッフル・AIで文章題生成ができます。単語を一つずつ一問一答形式で学習したり、下の2枚の写真のようにAI生成の文章題に挑戦することもできます。
カードモード
単語帳アプリのように勉強することができ、カードをクリックすると答えが表示されます。
!
テストモード
答えが一箇所にまとめて表示されます。確認問題のように勉強することができます。

問題や答えを印刷することができます。学校やご家庭でテスト問題を作ることが可能です。
![]() | ![]() |
Discordやグループラインで連絡を取り合いました。
苦労した点 PDFファイルをwebで表示する機能の実装方法が難しく、なかなか文字を読み取れなくて大変でした。
苦労した点 Chrome Strageとの連携が上手くいかず、なかなか単語帳や単語カードが画面に表示されず大変でした。また、AI で答えや文章題の生成のためにGeminiと接続するのも大変でした。
苦労した点 テストモードの印刷機能で問題文、解答のそれぞれで印刷できるようにすることに苦労しました。また、点線が表示されているのですが、その部分を印刷の際には表示しないようにすることに時間がかかりました。