タンタン

https://github.com/i-nayu/WebTan

TypeScript

React

CSS

JavaScript

HTML

WebやPDFにマーカーを引き単語帳を作成する拡張機能

i-nayu

とある

ミント_

推しアイデア

拡張機能として実装したこと WebサイトだけではなくPDFも読み込んで文章にマーカー引けるようになったこと 問題や答えを印刷できること AIで答えや文章題を生成したこと

作った背景

大学のテスト勉強の時に単語帳を自分で作成するのが面倒だったことがきっかけです。単語帳を作っただけで満足してしまい、勉強までなかなか辿り着けないことが多かったです。なので、WebサイトやPDFにマーカーを引くだけで単語帳ができるようなツールがあると便利だと考え、作成しました。

推し技術

pdf.jsを使ってWebでPDFを表示し、マーカーを引けるようにしたこと Gemini APIを読み込んで、単語の答えや文章題の自動生成機能

プロジェクト詳細

タンタン

WebやPDFにマーカーを引くことで単語帳を作成するChrome拡張機能+Webアプリ

概要

 WebやPDFで見つけた覚えたい単語をドラッグ&ショートカットキーで保存・送信することで、簡単に単語帳を作成することができます。  また、AI生成機能で単語の答えや単語帳内の問題すべてを使った文章題を作成することもできます。

使い方

0. 準備

Githubからクローンします。拡張機能のページから「パッケージ化されていない拡張機能を読み込む」を押します。そこからクローンしたプロダクトのpublic(\WebTan\project\public)を読み込みます。すると、任意のwebページで右上にあるパズルピースのボタンからタンタンを押すと、ポップアップが表示されます。 image

1. 単語の送信

Webサイトの場合

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

image

PDFの場合

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

2. 選択した単語を保存

  1. タンタンを開き、「受信した単語を見る」ボタンを押す
  2. 選択した単語の答えを入力する (Gemini APIを入力すると、答えをAI生成することができます!)
  3. 「単語帳を保存」ボタンを押すと単語帳に追加完了!

3. 単語帳一覧

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

4. 単語カード

 カード追加・カードのシャッフル・AIで文章題生成ができます。単語を一つずつ一問一答形式で学習したり、下の2枚の写真のようにAI生成の文章題に挑戦することもできます。

カードモード 単語帳アプリのように勉強することができ、カードをクリックすると答えが表示されます。 image!

テストモード 答えが一箇所にまとめて表示されます。確認問題のように勉強することができます。 image

問題や答えを印刷することができます。学校やご家庭でテスト問題を作ることが可能です。

役割

Discordやグループラインで連絡を取り合いました。

とある

  • 拡張機能の実装
  • PDFでのマーカー機能の実装

苦労した点 PDFファイルをwebで表示する機能の実装方法が難しく、なかなか文字を読み取れなくて大変でした。

なゆ

  • Webアプリの機能の概ね全般(単語帳・単語カード表示やAI生成など)

苦労した点  Chrome Strageとの連携が上手くいかず、なかなか単語帳や単語カードが画面に表示されず大変でした。また、AI で答えや文章題の生成のためにGeminiと接続するのも大変でした。

minto

  1. UI調整
  2. モードごとの機能とモード変更機能
  3. 印刷機能

苦労した点 テストモードの印刷機能で問題文、解答のそれぞれで印刷できるようにすることに苦労しました。また、点線が表示されているのですが、その部分を印刷の際には表示しないようにすることに時間がかかりました。

今後追加したい機能

  • スマホでのUIの改善
  • 共有機能
  • 印刷のUI調整

i-nayu

@66275f5b48e61fab