日常のドラマを記録するアプリを作る。フロントエンド編。

はじめに

小説やドラマ、今流行りのショート動画。

何か『お話』を作る時、生の人間の会話、体験ほどリアリティがあって共感を呼ぶものはないと思います🎬

どこかの記事で、有名な脚本家の方が、「誰もが人生に一本は傑作を書ける。自分のことを書けばいいのだ（意訳）」と言っていたのを読みました。

どんなSFでもどんな空想の物語でも、きっと傑作と呼ばれる作品の中には、お話を考えた人の人生の経験の一部や、誰かから言われた言葉が散りばめられているのだと感じます。

というわけで、私も日々、街を歩いていて「いいな」と思った言葉や他の人の動作、シーンをスマホにメモしているわけですが……

いざ創作を始めようという時に、すっと出てこなくて困っていまして！ 😫

そこで、「日常のドラマを記録するアプリ」なるものを自作してみようと思い立ったわけです。

完全に自分向けのアプリなので、あんまりユーザーやらニーズやらは深く考えていません。
究極に自分が使いやすいアプリを作ろうと思っています！

今回はアプリの要件を整理していきます。

1. 何ができるアプリを作るのか

MVP（実用最小限の製品）では、以下の2つの機能に絞って開発していきます。

• 📝 記録機能
  • 街中で良い「セリフ」を聞いたとき、さっと記録＆保存出来る（テキスト入力）
  • 「会話」か「行動」かを直感的に選べる
• 🔍 検索機能
  • 「告白のセリフ」「嫌味なセリフ」「口説くセリフ」などで検索した時に、ヒットする
  • ここが重要！ 文字列が一致していなくても、意味で検索できるようにする

2. 既存のメモアプリじゃなぜだめか？

スマホの標準メモ帳でも「さっと記録する」ということは満たされるのですが、検索機能がこれ！といったものがありませんでして。

「告白のセリフ」「嫌味なセリフ」「強がっているセリフ」…などなど、特定のシチュエーションでヒットして欲しいセリフがヒットするような検索機能がついたアプリが欲しいのです。

「文脈（シチュエーション）」で検索できるメモアプリ、みたいなイメージです。

『セリフは嘘つき』という言葉があるように、悲しいのに嬉しいと強がったり、欲しいのに欲しくないと我慢したり、そういうのが実装できるかは謎ですが…出来たら嬉しいなぁ。

3. MVPの技術構成

Claude Code氏に頼りまくる予定…🤖
構成はこんな感じで考えています。

層	技術
フロントエンド	Next.js 14 (App Router)
言語	TypeScript
スタイル	TailwindCSS + shadcn/ui
AI	Claude 3 Haiku か Gemini Flash（タグ生成）
データ	localStorage（→ 将来 Supabase）

4. データのフロー

入力したテキストがどう処理されるかのイメージです。
AIに「タグ」をつけてもらうことで、検索性を高める作戦です。

1. ユーザーがテキストを入力
2. localStorageに一旦保存
3. 裏側でAIがタグを生成（例：「告白」「ロマンチック」「夜」）
4. 検索時にタグも含めて検索することで、意図したメモが見つかる！

5. とりあえずフロントエンドを作ってみた

まずは形から入る人なので、先にCI/CD構築してデプロイする環境を整えるべき…と思いつつ、一旦フロントのイメージを作ってみました🎨

なぜか全部、背景を濃い紫か緑にしてしまう。

記録する画面

会話か行動（Action）のどっちかを選んで記録します。

検索する画面

記録したセリフや行動の検索をします。

---

次回は、このアプリの肝である検索機能（AIタグ生成部分）をローカル環境でテストしていきたいと思います！🚀