プロダクト
2025年2月10日
6分
山野 夏

PUMP -PopUp Memo Pad- 開発記録

HTMLCSSJavaScriptChrome拡張機能
PUMP -PopUp Memo Pad- 開発記録

プロジェクト概要

卒業研究などで,特定のキーワードで複数の文献を検索することが多いと思います. そして後日同じキーワードで検索した際,どの文献が読み直したいものだったか,タイトルだけでは判別しにくいということが発生しがちでした. この課題感を解決するため,検索タイトルに読み直す必要があるものには緑のライン,必要がないものには赤色のラインを表示し,マウスカーソルをタイトルに重ねると過去自分が残したメモがポップアップするという拡張機能をチームで開発しました. また,その文献が必要であるか,やポップアップするメモを記入するためのウィンドウは,開いているwebページ上でショートカットキーを入力することで表示されるよう開発しました.

担当

常にチーム内で互いに助け合いながらではありましたが,私は主に,メモを入力するウィンドウに必要な機能全般とUIを担当していました.

主な機能

  1. alt + mキーを押すことで,開いているwebページに対して,メモと必要不要かどうか残すことが可能なウィンドウの表示
  2. メモを残したwebページを振り返ることができるサイドメニュー
  3. 検索すると,検索タイトルに必要なページには緑の下線が,不要なページには赤の下線が表示,また検索タイトルにマウスカーソルを合わせることで,メモが表示

実際の使用画面

メモ入力画面

PUMP メモ入力画面

表示されているウィンドウにメモを入力することができます.また自分にとって必要であるかどうかをボタンで残しておくことができます.

検索結果画面

PUMP 検索結果画面

必要であるボタンを押したwebページには緑の下線が,不要なものには赤の下線が表示されています.また検索タイトルにマウスカーソルを合わせることで,入力したメモが表示されます.

開発で工夫した点

自分たちがターゲット層だったこともあり,常にユーザ視点で必要な要素は何かを意識しながら,機能の決定をしていきました.また,チーム4人で開発進捗を定期的に共有し,コンフリクトといった問題が起こらないよう進めました.

ハッカソンでの成果

サポーターズさんが主催の技育CAMPの一環であるハッカソンvol23にて,同期4人で参加し,検索支援およびメモ機能を追加したgoogleの拡張機能『PopUp Memo Pad』を発表し,最優秀賞をいただきました.

今後の展望

キャッシュの問題を解決した後に,公開できるよう進めています.