開発背景

従来のメモ帳は、日付順の管理やキーワードの完全一致検索が主流である。そのため、昔に書いたメモを見返そうとした際に、そのメモに含まれていそうな単語を頑張って検索したり、書いたであろう日付まで遡ったりする必要があるなど効率が悪かった。そこで、内容ベースで管理することが出来れば、いつか書いたであろうと関係なく、今自分が求めているメモを見ることが出来ると思い開発することにした。

プロダクト概要

• 内容検索機能 メモを内容ベースで検索できるようにしました。例えば、「ラーメン」に関するメモを探している際に「麺」と検索してもヒットします。
• グループ機能 ユーザが自由にメモ同士をグループでまとめることが出来ます。これにより、ユーザは自由にメモを管理することが出来ます。
• 内容を基にアイディアを生成する機能 似たような内容のメモが複数表示されるため、それらのメモをまとめて生成AIに投げることでそれらをつなげた新しいアイディアを思いつくことをサポートすることが出来ます。

技術

使用技術

• フロントエンド：HTML / CSS / JavaScript
• バックエンド：Flask / python

AWS活用ポイント

• openserch 既存の RDBMS ではベクトルが保存できなかったため、opensearch を活用することで、ベクトルデータの保存とベクトルを用いた knn 検索を実装した。
• bedrock メモを複数件選択し、Bedrockにメモの内容を渡すと、メモの内容を基に新たなアイディアを出してくれます。そのため、ユーザは自分が書いたメモをどんどん広げていくことが出来ます。
• Amazon S3 & CloudFront 静的ファイルをS3に保存し、CloudFrontを通じてリソースを配信。これにより、ユーザーはどのデバイスからでも快適にメモへアクセスできます。
• AWS App Runner アプリのバックエンドはApp Runner上で運用し、自動スケーリングを活用することで、安定したパフォーマンスを提供。開発者がインフラ管理に時間を取られることなく、機能改善に集中できる環境を整えました。

工夫

チームキャラクターがホッキョクグマなので、ログイン画面からホッキョクグマをアピールするようにした。

UI

メモ帳であるため、使いやすいシンプルなデザインになるように意識しました。画面には、メモの中身が分かるように８個のブロック状のメモを表示し、クリックするとその内容が見られます。 詳細表示中はサイドにメモを表示し、選択しているメモを青くハイライトすることでどのメモを選択しているのかを分かりやすくしました。

UX

このメモ帳アプリは、ただのメモ管理ツールではありません。キーワード検索だけでなく、類似した内容を自動で見つける検索機能を搭載しており、過去のメモをスムーズに振り返ることができます。

例えば、「ラーメン」を検索すると、単なる一致したメモだけでなく、過去に書いた関連するメモも表示されるため、目的のメモに素早くアクセスすることができます。さらに、分類機能も備えており、メモが増えても管理が複雑になりません。

シンプルでありながら、思考をつなげる新しいメモ体験を提供します。

コンポーネント図

苦労した点

４人中３人がwebアプリ開発未経験の中で、かなり手探りで開発をすすめました！先週の水曜日の時点では、 <!DOC すらも書いたことがない状態でしたが、最終的にはかなり満足の行く出来となりました！また、発表３時間前までAWSとつながらないはぷにんぐもありましたが、メンターさんの型の助言もあり、なんとかつなげることが出来ました。