Cursor Webアプリハッカソン by Sunrise AI

https://connpass.com/event/331709/

ちょうどアプリを作ろうと思ってた所でAIハッカソンがあったので、参加してみることにしました！

Zennのスクラップに経過を残し、終わったらちゃんとした記事にまとめようと思います。

ハッカソンで提出するアプリのGitHubは以下のものです。
publicなので、良かったら参考にどうぞ～！
https://github.com/nagisora/mail-mag-reader

ハッシュタグ「#CursorSunHack」でつぶやく際は、以下のリンクが便利です。keitaroさんに感謝！
https://tinyurl.com/298cjxx4

作業記録：20240924

ハッカソンの方針

• できるだけお金をかけない（1,000円以下に収める）
• できるだけコーディングしない（自然言語プログラミングはOK）
• できるだけAIを使う（人力は極力避ける）
• できるだけ情報はオープンにする（オープンソースプロジェクト）

アプリの企画

目的

中島聡さんの「週刊 Life is beautiful」（以下、wlib）を、自分がより活用するためのアプリを作る

具体案

1. リーダーアプリ：メルマガの前回読み終えた位置を記録し、次回は続きから読めるアプリ
2. RAGアプリ：wlibの内容についてAIが何でも答えてくれるアプリ

ハッカソンでは、リーダーアプリの完成をゴールとする。
余裕があればRAGアプリも作る

スケジュール

最終提出締切：2024年10月26日 21:00

• ～9/28：準備（使えそうなAIツールを色々触ってみる）
• ～10/6：企画
• ～10/20：構築
• 10/26：リリース

技術スタック

• 要件定義書作成（Zoltraak、GEAR.indigo）
• フロント作成（Next.js、LlamaCoder）
• バックエンド（supabase）
• Git管理（Claude-dev）

使ってみたいもの

• markwhen
• PDF2Audio

作業記録

• 20240925：Googleセミナー参加で疲れたのでサボり
• 20240926：お仕事疲れたのでサボり
• 20240927：ブログを書くのが楽しかったのでサボり

サボったことも正直に報告していくスタイル（笑）

作業記録：20240928

• キックオフに参加
• きのぴーさんのCursor解説が非常に分かりやすかった
• 学んだ点をまとめておくべきだったので、次回はそうする
• ターミナルでCtrl+Kできるのが有用すぎ！docsとかも結構使えそう
• AIツールの使い方セミナーが後半とかにあったりするので、自力&質問しながら進めないと間に合わなさそう
• 明日は企画書を作ろう

作業記録：20240929

• 今日の目標：「GEAR.indigo」を使い、企画＆要件定義を行う

GEAR.indigoへの入力をChatGPTで作成

プロンプト

メルマガリーダーを作りたい。以下の要件を含めて仕様を考えて。必要な部分は追記して。markdown形式で出力して。

- リーダーへのemailの入力は、eml形式のファイルのアップロードとする
- 将来的には、自身のメールクライアントから指定アドレスへemailを転送することで入力できるようにする
- Next.js、supabaseを使う
- メルマガを読んだ位置を記録し、次回同じメルマガを開いたら前回読み終えた位置の続きから読めるようにする
- フォントサイズ、ダークモードなど、テキストリーダーにあったほうが良い機能ももたせる
- authはgoogleのssoのみで行う
- メルマガ自体は個人のデータとして持つのではなく、システムで持つ
	- メルマガの入力があった場合に、タイトルや本文と比較を行い、既にあれば読み込み元をそれに、なければ、新規にメルマガを登録する
	- この目的は、DBの圧縮と冗長をなくすことである
	- 個人のアカウントと有効なメルマガを紐付けるようにする
- 将来的にメルマガのデータをAIに学習させて、メルマガの内容についてAIに問い合わせができるようにする
- 将来的に、色々なメルマガに対応させる。そのため、メルマガ単位の管理ができるようにしておく。

出力

# メルマガリーダー仕様書

## 概要
本仕様書は、Next.jsとsupabaseを使用したメルマガリーダーアプリケーションの仕様を記載しています。このアプリでは、ユーザーがeml形式のメールをアップロードし、将来的には指定アドレスへ転送することでメルマガの管理と閲覧が可能になります。さらに、メルマガの読書履歴やカスタマイズ可能なリーダー機能を提供します。

## 要件

### 1. Emailの入力方法
- **現在の入力方法**: eml形式のファイルをアップロードしてメルマガをリーダーに取り込む。
- **将来の入力方法**: ユーザーが自身のメールクライアントから指定されたシステムのメールアドレスにメルマガを転送することで、リーダーに取り込むことができるようにする。

### 2. 読書履歴の管理
- メルマガを読んだ位置を記録し、次回同じメルマガを開いた際に、前回の読み終えた位置から続きが読めるようにする。

### 3. テキストリーダー機能
- フォントサイズ変更機能を提供し、ユーザーが快適にメルマガを閲覧できるようにする。
- ダークモードを搭載し、環境に合わせた表示設定ができるようにする。

### 4. 認証
- GoogleのSSOを用いたシンプルなログインを提供する。Googleアカウントのみで認証を行い、アカウント管理を簡便にする。

### 5. メルマガの管理
- **メルマガのデータ保存**: 個人が所有するデータとしてではなく、システムで一元的に管理する。
  - メルマガの入力があった際、タイトルや本文を比較し、既にデータベースに登録されているメルマガであれば、それを読み込み、そうでなければ新規に登録する。
  - これにより、データの冗長化を避け、データベースを効率的に運用する。
  - 各ユーザーのアカウントに対して、システム内で有効なメルマガと紐付ける。

### 6. 将来的なAI連携
- メルマガの内容をAIに学習させ、ユーザーがメルマガの内容について質問した際に、AIから適切な回答が得られる機能を導入する。

### 7. メルマガ単位の管理
- 複数の異なるメルマガに対応できるよう、メルマガ単位でデータを管理する仕組みを持たせる。
  - 将来的には、複数の種類のメルマガ（週刊誌、月刊誌、ビジネスニュースなど）に対応できるように拡張する。

## 使用技術
- **フロントエンド**: Next.js
- **バックエンド**: Supabase（認証、データベース、ストレージ管理）
- **認証**: Google SSO

## データベース設計

### テーブル構造
#### `users`
- `id` (主キー)
- `email` (Google SSOから取得)

#### `newsletters`
- `id` (主キー)
- `title` (メルマガのタイトル)
- `body` (メルマガ本文)
- `created_at` (登録日時)

#### `user_newsletter_progress`
- `id` (主キー)
- `user_id` (外部キー: users)
- `newsletter_id` (外部キー: newsletters)
- `last_read_position` (前回の読書位置)
- `created_at` (作成日時)
- `updated_at` (更新日時)

## UI/UX機能

### 1. メルマガアップロード画面
- emlファイルをアップロードするフォーム。
- アップロードされたファイルの解析を行い、既存のメルマガデータベースと照合してデータ登録。

### 2. メルマガリーダー画面
- メルマガを表示し、フォントサイズやダークモードの切り替えが可能。
- ユーザーが読んだ位置を記録し、次回から自動的にその位置から表示する。

### 3. ユーザー設定画面
- フォントサイズやダークモードの設定を管理する。
- Google SSOでログイン済みか確認する画面。

## 将来的な機能拡張
- メルマガの内容をAIが学習し、質問に応じて情報を提供する機能。
- 複数メルマガの管理と、それぞれの読書履歴の管理機能。

GEAR.indigoでの操作

• 入力にChatGPTが出力したテキストを貼り付けて実行
• プロジェクトに必要なテキストが1分くらいで出力されてすごい
• 0→1、はこれで出来たので、これをたたき台として作っていくか
• ソース生成は有料なので、Zoltraakも試してみよう

Babel&Zoltraak

• Babel&Zoltraak：アプリ生成AIツール。ハッカソンの審査員である元木さん作成
• ChatGPTに入れたテキストをそのままBabelに入れてみた
• ずっとポヨポヨして何かしている。気長に待つ
• エディタ左下の「最近の変更」が増えなくなったら完成？
• 右上にあるボタンからコードをダウンロードして、Cursorで開発する

出力

• システム名：20240929_1019_mailvault_nextjs
• URL：https://nextjs.babel-ai.com/development/editor?system=20240929_1019_mailvault_nextjs&path=..%2Fgenerated%2F20240929_1019_mailvault_nextjs

まとめ

• webアプリの「ポン出し」（最小限の指示でアプリが作れる）AIツールの、GEAR.indigoとBabel&Zoltraakを使ってみた。
• GEAR.indigoは、プロジェクトを進める上で必要な資料を用意してくれるので、そこに頭を使わなくてよいのが非常に助かる。特にE-R図の自動作成など、各種図示がとても便利。
• Babel&Zoltraakは、システムに必要なファイルを全部作ってくれる。これをダウンロードしてカスタマイズすれば良いだけなので、助かりすぎる。
• どちらも無料範囲内のみを使った感想だが、両方使うことでアプリ開発に必要なものが全て揃った感じ。すごい時代だ。
• 明日は、ダウンロードしたコードを実際にCursorで動かしてみる
• その次は、YouTube見てnextjs, supabaseの理解を深める

作業記録：20240930（20:00～22:30）

• 今日の目標：生成AIで作ったファイルを動かしてみる

Zoltraak.appでコード作成

• 「Babel&Zoltraakが難しい」という話をDiscordでしていたので、ダイブツさんのZoltraak.appを使うことにした。
• 要件定義がjsになっていたので、TypeScriptに直してもらった

Next.jsプロジェクト作成

• wslのubuntuにnvmを入れて、以下コマンドでプロジェクト作成

$ npx create-next-app@latest --typescript
✔ What is your project named? … mail-mag-reader
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias (@/*)? … No / Yes
Creating a new Next.js app in /home/junya/dev/MailReader00/mail-mag-reader.

Using npm.

• yarn devで以下のエラーが出る

r$ yarn dev
00h00m00s 0/0: : ERROR: [Errno 2] No such file or directory: 'dev'

• npmだと動く。謎。

~/dev/MailReader00/mail-mag-reader$ npm run dev
Debugger listening on ws://127.0.0.1:53608/8be3a637-5318-4ed3-a4c8-be44126fa005
For help, see: https://nodejs.org/en/docs/inspector
Debugger attached.

> mail-mag-reader@0.1.0 dev
> next dev

Debugger listening on ws://127.0.0.1:53478/1af5564f-25a5-46bd-a87e-36bd97e33092
For help, see: https://nodejs.org/en/docs/inspector
Debugger attached.
Debugger listening on ws://127.0.0.1:53370/2346c87b-94d3-4481-b809-cc590b3236c2
For help, see: https://nodejs.org/en/docs/inspector
Debugger attached.
  ▲ Next.js 14.2.13
  - Local:        http://localhost:3000

 ✓ Starting...

• Zoltraak.appのソースを組み込もうとしたけどよく分からない

v0を試す

• nextjsならv0ってことで、要件定義書をポイしてみた
• なんか良さげなのできたからsupabase入れようとしたら、プロジェクト作成コマンドが違ったみたいで作り直し

npx create-next-app -e with-supabase

• npm run devで起動して、v0のコード貼り付けて画面は出来た
• でも、フォルダが色々あってよく分からない。

今日のまとめ

• AIで楽しようとしたけど上手く行かなかった
• 情報が出揃うまでYouTubeで勉強しよう
• 明日は勉強day～
• YouTubeをNotebookLLMに食わせるのが良いらしい、のでそれする
• Using Cursor to have AI build out a social network app powered by Next.js and Supabase

追記

• 吉波さんのXのポストを見て自分も試してみた。
• こんな感じでできた。
• You have 2 message remaining today.って言われたし疲れたので、動くかは明日やる。
• 1時間くらい動かしてダメだったら、YouTubeで勉強する

作業記録：20241001（21:00～22:30）

• 今日の目標：v0のコードを動かしてみる（1h以下）
• Youtubeで勉強

v0のコードを組み込む

• 組み込んだけどモジュールとか色々必要で、よく分からんかった。断念。
• Discordに最小構成から少しずつ作ったほうが良いというアドバイスがあったから、そうする

YouTube見つつ作成

• Using Cursor to have AI build out a social network app powered by Next.js and Supabase
• を見ながら、Cursorでメルマガの表示だけ作った。
• 無課金なのでComposerが使えないので、GemeniのAPIを入れてChat欄で聞いた内容を、手動で反映している。辛い。
• 簡単な内容ならCtrl+Kで書き換えてくれるので、なるべくこれを使うようにする
• 作成中のGitHubのリポジトリはこれ→「nagisora/mail-mag-reader」

まとめ

• まだ、「よろしく！」でAIが作ってくれないので、少しずつパーツ単位で作っていくのが良さそう。
• 明日は、Googleのセミナーに参加して時間が取れないので、お休みの予定です。
• 使ったプロンプトも開示した方が、皆の参考になると思うので、次回からそうする
• 次回はデータベース構成を考える
• DBが出来たら、emlの実際のメルマガを登録して画面で見てみる
• メルマガがアップロードされたら、タイトルと本文の一致を調べる
• 愉快犯にファイルをアップロードされまくったらどうする？

作業記録：20241002

• Googleの起業セミナー参加で疲れたのでお休み

作業記録：20241003（20:00～23:30）

今日の予定

• .cursorrulesの比較記事を書く
• データベース構成を考える

.cursorrulesの比較記事

• Zennに書いた。普通に一番上で良かった。
• 【Cursor】Next.js開発のおすすめ.cursorrules設定

データベース構成

• ハッカソンのDiscordで聞いたら、https://postgres.new/ がオススメと教えていただいたので、使ってみる。
• 要件定義をペタ

# メルマガリーダーを作りたい。

- リーダーへのemailの入力は、eml形式のファイルのアップロードとする
- Next.js(TypeScript), Vercel, supabaseを使う
- メルマガを読んだ位置を記録し、次回同じメルマガを開いたら前回読み終えた位置の続きから読めるようにする
- authはgoogleのssoで行う
- メルマガ自体は個人のデータとして持つのではなく、システムで持つ
	- メルマガの入力があった場合に、タイトルや本文と比較を行い、既にあれば読み込み元をそれに、なければ、新規にメルマガを登録する
	- この目的は、DBの圧縮と冗長をなくすことである
	- 個人のアカウントと有効なメルマガを紐付けるようにする
  - メルマガは、メルマガ名と号数で管理ができるようにしておく。

• 良い感じ。図示してくれるし、SQLも吐いてくれる。

## users テーブル

| カラム名         | データ型                | 制約                  | 説明               |
|------------------|-------------------------|-----------------------|--------------------|
| id               | BIGINT                  | PRIMARY KEY, IDENTITY | ユーザーID         |
| google_user_id   | TEXT                    | UNIQUE, NOT NULL      | GoogleユーザーID   |
| email            | TEXT                    | UNIQUE, NOT NULL      | ユーザーのメールアドレス |
| created_at       | TIMESTAMPTZ             | DEFAULT NOW()         | 作成日時           |

## newsletters テーブル

| カラム名         | データ型                | 制約                  | 説明               |
|------------------|-------------------------|-----------------------|--------------------|
| id               | BIGINT                  | PRIMARY KEY, IDENTITY | メルマガID         |
| name             | TEXT                    | NOT NULL              | メルマガ名         |
| issue_number     | INT                     | NOT NULL              | 号数               |
| title            | TEXT                    | NOT NULL              | メルマガのタイトル |
| content          | TEXT                    | NOT NULL              | メルマガの内容     |
| created_at       | TIMESTAMPTZ             | DEFAULT NOW()         | 作成日時           |

## user_newsletter_progress テーブル

| カラム名         | データ型                | 制約                  | 説明               |
|------------------|-------------------------|-----------------------|--------------------|
| id               | BIGINT                  | PRIMARY KEY, IDENTITY | 進捗ID             |
| user_id          | BIGINT                  | REFERENCES users(id)  | ユーザーID         |
| newsletter_id    | BIGINT                  | REFERENCES newsletters(id) | メルマガID     |
| last_read_position | INT                   | DEFAULT 0             | 最後に読んだ位置   |
| updated_at       | TIMESTAMPTZ             | DEFAULT NOW()         | 更新日時           |

開発

• プロジェクトにsupabaseを追加

npm install @supabase/supabase-js

• emlファイルを文字コード変換しつつconsole.logに表示するところまで出来た
• 4o-miniが微妙なので、cloude-3.5-sonnetに頼った。
• Cursor無課金なのにコードの予測提案された。謎。ありがとう～
• あと何かずっとエラー吐いてる。悲しい。

Warning: Prop `className` did not match. Server: 

まとめ

• emlファイルの読み込みがクソ大変だった
• メルマガタイトルとか、何からどう引っ張れば良いんだ？
• とりま、ハードコーディングした
• メルマガ毎にテンプレ用意してそれで分けるか、AIにタイトル食わせて分けさせるか
• ハッカソンではwlibだけに対応して、今後やる気があったら他のにも対応する
• 明日は、emlのデータを画面に表示する、データをsupabaseに保存する
• 中島さんが7月くらいにメルマガの日付を間違えてたので、日付が同じでタイトルが違ったら、日付+7する

作業記録：20241004（20:30～22:30）

• 金曜日なので疲れて1hくらいゴロゴロして、「今日くらいはゴロゴロしてもいいよね？」とか思ったけど、やることやって罪悪感をなくしてから思う存分ゴロゴロしようと思って始めた。
• みなさんはどうでしょうか！？

今日の予定

• emlのデータを画面に表示する
• データをsupabaseに保存する

emlのデータを画面に表示する

• ダミーデータをemlのデータでuseState使って上書きしただけ

データをsupabaseに保存する

• supabaseを入れたタイミングでコードをcursorが作ってくれてたので、コメントアウトを外したらちゃんと保存された

次何を作るかの検討

• ログインしたら前回のメルマガの続きが表示される
  • ログイン機能
  • ユーザーとメルマガの紐づけ
  • ユーザーが読み終えた位置の記録

ログイン機能の作成

• 以下のプロンプトとコードをv0に渡したら、それっぽいのができた。

以下のnext.jsのコードにサインボタンを作り、supabaseの認証を使ってgoogleアカウントでサインインさせたい

• 疲れたので今日は終わり。
• 次はsupabaseとGCPの設定をして認証ができるようにする

まとめ

• テストデータとしてメルマガになる前のweb版のLife is beautifulが使えそう
• 手動でemlデータにしたけど、webから直接取得したい
• ハッカソンで見せる用のゲストユーザーにはこれを見せればよいと思った
• supabaseは保存が楽で助かる
• 認証周りはよく分からないから、勉強しながらかな。
• 次は、認証周りくらいかなあ
• boltでやってみる

作業記録：20241005（19:00～21:00）

• ハッカソンのセミナー参加。良かった内容のメモを残す
• セミナー参加以外は何もせず。家事やらで土日は追われています

kkさんセミナー

• Canvaでスライド作っていた。とても見やすい。
• 有料級とか言うの薄っぺらい感じで好きじゃないんだけど、マジ有料級だった！
• プロンプトもAIに考えてもらうのがいいよ！メタプロンプト
• LPサイトの画像をCursorに入れて、そのままコード化できる
• Email.jsで簡単にメールが送れる。本番は秘匿させるために、Next.jsを使う
• Netlifyは1時間限定のデプロイ機能がある
• ソースコードはコンポーネントに分けて小さくしてAIに渡した方が精度が良い
• なぎそらの感想：今後は、AIに与えるプロンプトに使わせるライブラリを自分で指定できる、っていうのがエンジニアの腕の見せ所になってくるかと思った。
• localstorageを使うことで、簡易DBとして使える
• UIデザインも参考にしたいURLを@で渡して真似させると良い

りくおさんセミナー

• 初心者さん向けだったので、私は流し見。

Git

• Ctrl+KでAcceptする前にLive Serverを更新すると、変更後の画面が見れる

Next.js

• Next.jsの基本的な使い方
• ルーティングについて、app以下にフォルダを作って、page.tsxを作ればよい
• 認証機能は、「supabaseで認証機能付けて」で作ってくれる

明日

• 友達とランチに行くので、開発はできないかも。
• 月曜も起業セミナー参加するので、できないかも

作業記録：20241006

• 友達とランチ、家の家事、note執筆で、時間取れませんでした！

作業記録：20241007

• Googleセミナー参加で、力尽きました！

作業記録：20241008（19:00～21:30）

株式会社Dafii（りょうちけ）さんのCM

• AIで社会貢献したり、色々と面白そうなことをしている
• 採用のご相談はXのDMから、とのこと

吉波（よしば）さんのv0セミナー

• v0でLaTexの数式が書ける（Math。そりゃそうか）
• Next.jsは、画像を最適化してくれたり、CLIが使える（すごい）
• Next.jsはサーバーっぽいこともできる（たしかに）
• システム作成の6割くらいの完成度はv0でいける
• v0もNotionも、Mermaid図が使える
• R3Fで3Dが作れる（React Three Fiber）
• React Flowでインタラクティブにフロー図が作れる
• Vercelのストレージに画像をアップロードできる
• Publishする時に、検索に引っかからないようにもできる
• 1つの会話からブランチみたいに分岐ができる。会話を長くならないようにできる
• プロジェクト機能。プロンプトのテンプレートが設定できる
• Vercel SDKでAIエージェントが作れる
• ライブラリの指定、既存のサービスのように作って、 などのプロンプトを含めるのがおすすめ
• 吉波さんのv0に与えるプロンプトのが的確すぎる。AIを使いこなせる人は、言語化能力が高い事が必要と再認識した。
• なんと！boltの解説までしてくださいました！
• boltは、プロジェクトをインポートして、bolt上でrunできる
• 入力エリアの星マークを押すと、プロンプトを良い感じにしてくれる（プロンプトエンハンス）
• フロントとバックエンドを切り替えれる
• bolt→stackblitz→github。APIキーはGitHubに置くとセキュアだよ！
• 吉波さんの会社もメンバー募集中！
• そらさんのコマースも上手だった。感想をリポストしてね！とか

AIごみちゃんwith元木さん

• ほがらかAI雑談番組
• JUNさんとにこるさんが何かやってるらしい
• fal.aiが五味さんのオススメ。Fluxが使える。ページ上ですぐトレーニングしてLoRAが作れる
• リアルタイムリップシンクは五味さんの友達がやる予定
• LoRAは20枚くらいで作れる
• AIは特徴を捉えすぎる
• 元木さんは落合さんと一度話してみたい
• AIよって仕事がなくなると、余暇を楽しめる人が強く、暇を持て余す人は辛い
• 仕事以外の、人としてどう生きるんだろう、をそろそろ考えるべき
• YouTuberとかインフルエンサーにみんななっていくのかな？
• 人間が本方的に面白いと思うものしか残らないかも？
• 自分が好きなことを、AIで自分のためだけに作る！
• 趣味発見コンサルは需要ある。婚活と掛け算するのあり。
• 遺伝子マッチングは国を挙げてやるべき
• Netflexのブラックミラーというドラマがおすすめ。五味さんがおすすめ見る順をYouTubeに上げてる。
• 好きなことを突き詰めることが、仕事になるしビジネスになることがAI時代には加速する
• AIで早く仕事を終わらせられれるから、好きなことをやる時間が増えて幸せが増える
• 今後の仕事の評価の基準は稼いだ金額ではなく、楽しんで仕事ができること
• お金について、いつかはベーシックインカムが必要。AIでさらに格差が広がる
• AIで低コストで楽しめるようになっていく
• 承認欲求を満たしてくれるAI。AIだと知らせずに。（まさに中島さんのSF小説）
• ARベイビーがいれば出産の苦しみがなくなる
• コメント拾ってもらえた！「SAOの世界にみんなで引きこもる！」
• 陽キャと陰キャで世界が2分されるby元木さん
• 人生とはエンタメである、っていう人がこれから増えていく

まとめ

• 今日色んな方々の話を聞いて、「人類を良くしよう！」って言う意思が皆さんから感じられた。
• 私も、人類の発展（まずは日本を良くする）と、自分の楽しいことを突き詰めていこうと思いました！
• まずは、中島さんのメルマガを快適に読むアプリの開発だぜ！

作業記録：20241009（20:00～22:00）

今日やること

• 昨日のメモに太字を入れる（量が多いので重要な箇所を太字にして見返しやすくする）
• リポジトリの不要ファイルを削除する→なかった
• 既存のリポジトリをboltで開いて開発する→.envがなくてエラー
• 音声入力の検討
• 認証周りを作る（まず動けば良い）

音声入力の検討

• プロンプトを手で打つのが面倒＆noteの記事を音声入力したい
• デスクトップに繋げれて、ON/OFFスイッチ付き
• と思ったけど、家にあるマイクを使うことした
• スマホのイヤホンマイクは1ピン出力なので、分配してマイク出力だけをパソコンのマイク入力に入れた
• 文字起こしはGeminiに以下のプロンプトを入れてマイク入力した

音声データをテキスト化したものを入力するので誤字脱字を直して。余分な空白は削除して。それ以外は直さずにそのまま出力して。

• 結果、微妙！余計なことしよる・・・。

[入力]
Apple Store 用の文字起こしツールをリリースした方がいるということなので、 Android 版 と Web 版が出るのを待ちたいと思う。
[出力]
Apple Storeで使える文字起こしツールが出たみたいだから、Android版とWeb版も出るのを楽しみにしてる。

• App Storeに無料文字起こしアプリをリリースされた方がいるので、web版、Android版を出してくれるのを待つか、フルリスペクト（丸パクリ）して自分で作るか。
• 私はメルマガアプリを作るので、ハッカソンの課題に困っている方は作ってみては！？

まとめ

• 音声入力で楽しようとしたけど、マイクが悪いのか、AIが悪いのか、精度が微妙だった。
• スマホのChatGPTの音声入力を使って文字起こしするのが良さそう。
• そしてそれをクラウドで同期してパソコンに送るのがいいと思う。
• と、上の2文はChatGPTを使ったけど良い感じ。
• Geminiのようにリアルタイムは難しいから、ChatGPTのようにまとまった音声データを文字起こしする方法が良さそう。
• 疲れたので開発は次回へ！

作業記録：20241010（21:00～22:30）

今日やること

• ChatGPTと英会話の練習をしたものをVoicyにアップ
• そのテキスト版をnoteにアップ
• アプリ開発だけじゃなく、その時に興味のあるものに飛びつくスタイル

英会話音声のシェア

• Voicyは誰でも投稿できる訳じゃなかった
• stand.fmというアプリが良さそう
• ChatGPTとの英会話を録音しようと思ったけど、画面キャプチャで音が拾えない
• 通話扱いになってるっぽいので、どうやって録音しようか。
• パソコンに繋いだりは面倒なのでしたくない。ゴロゴロしながら英会話したい
• まあ、高度な音声モード（Advanced Vioce Mode）は無課金だと10分/月なので、今月はもう使えなさそう。
• Geminiの音声文字起こし使ったりして、何とかタダでAI英会話が実現できないかな
• ChatGPTとの英会話は楽しいですよ！みなさんも一度試してみて！

まとめ

• AIとの英会話を楽しんだ
• アウトプットしようとしたけど上手く行かなかった
• 明日は1コミット分くらいは開発する。認証周りを作る（まず動けば良い）

作業記録：20241011（21:30～22:30）

今日やること

• boltでゼロから作る

boltでゼロから作る

• boltに頼んだらサクッと作れるのでは？と、淡い期待を込めてゼロから作ってみる
• 自作プロンプト＋元木さんプロンプトを使う

# メルマガリーダーを作ってください。

- 初期画面としてLP、新規登録、ログイン、ログアウトそして、課金画面（3つ）、サイドメニュー、メニューごとにnextjsのapp routerでそれぞれpage.tsxを作ってください
- リーダーへのemailの入力は、eml形式のファイルのアップロードとする
- Next.js(TypeScript), Vercel, supabaseを使う
- メルマガを読んだ位置を記録し、次回同じメルマガを開いたら前回読み終えた位置の続きから読めるようにする
- メルマガ自体は個人のデータとして持つのではなく、システムで持つ
	- メルマガの入力があった場合に、タイトルや本文と比較を行い、既にあれば読み込み元をそれに、なければ、新規にメルマガを登録する
	- この目的は、DBの圧縮と冗長をなくすことである
	- 個人のアカウントと有効なメルマガを紐付けるようにする
  - メルマガは、メルマガ名と号数で管理ができるようにしておく。

• 入力欄下の星マーク（エンハンスプロンプト）をしたもの、と日本語訳。

# Create a Newsletter Reader Application

- Develop a Next.js application using TypeScript, Vercel, and Supabase
- Implement app router structure with separate page.tsx files for:
  - Landing page (LP)
  - User registration
  - Login
  - Logout
  - Subscription plans (3 options)
  - Side menu
- Allow email input for the reader via .eml file upload
- Track reading progress:
  - Record the last read position for each newsletter
  - Resume reading from the last position on subsequent opens
- Newsletter data management:
  - Store newsletters at the system level, not per user
  - On new newsletter input:
    - Compare title and content with existing entries
    - If match found, use existing entry; if new, create new entry
  - Purpose: Optimize database storage and reduce redundancy
  - Link user accounts to accessible newsletters
  - Manage newsletters by name and issue number
- Implement responsive design for various devices
- Ensure accessibility compliance
- Add search functionality for newsletters
- Implement user preferences (e.g., font size, theme)
- Create an admin panel for newsletter management
- Add analytics for user engagement and popular newsletters
- Implement email notifications for new issues
- Ensure proper error handling and loading states
- Add unit and integration tests
- Implement proper SEO optimization
- Ensure GDPR compliance for user data

ニュースレターリーダーアプリケーションの作成

- TypeScript、Vercel、Supabaseを使用してNext.jsアプリケーションを開発
- ページ構成は以下の内容を持つappルーター構造で実装
  - ランディングページ（LP）
  - ユーザー登録
  - ログイン
  - ログアウト
  - サブスクリプションプラン（3種類）
  - サイドメニュー
- .emlファイルのアップロードでメール入力を可能に
- 読書の進捗を追跡：
  - 各ニュースレターの最後に読んだ位置を記録
  - 次回開いたとき、最後に読んだ場所から再開できる
- ニュースレターデータの管理：
  - ニュースレターはシステムレベルで管理し、ユーザーごとには管理しない
  - 新しいニュースレターが入力された際に：
    - タイトルや内容を既存のエントリーと比較
    - 一致があれば既存エントリーを使用し、新規の場合は新しいエントリーを作成
  - 目的：データベースのストレージを最適化し、冗長性を減らす
  - ユーザーアカウントとアクセス可能なニュースレターをリンク
  - ニュースレターを名前と発行番号で管理
- 様々なデバイスに対応したレスポンシブデザインを実装
- アクセシビリティ準拠を確保
- ニュースレター検索機能を追加
- ユーザーの設定（例：フォントサイズ、テーマ）を実装
- ニュースレター管理のための管理パネルを作成
- ユーザーエンゲージメントや人気のニュースレターの分析機能を追加
- 新しい発行物のためのメール通知を実装
- 適切なエラーハンドリングとロード状態を確保
- 単体テストおよび統合テストを追加
- 適切なSEO最適化を実装
- ユーザーデータのGDPR準拠を確保

• 出来上がるまで、ホットほうじ茶を飲みながら待つ。優雅～
• token上限で止まった
• 課金するかと思ったら$9プランが無くなっている・・・
• blot→stackblitz→github→ローカルのCursorへ。何かエラーでた。
• blotを使わずに作ってたリポジトリを頑張って弄ろうと決意。
• Geminiがおバカちゃんで役に立たない・・・
• 明日になったらboltが使えるかもしれないので、明日の自分に任せよう

まとめ

• 元木さんプロンプト＋boltのエンハンスプロンプトで良い感じのが出来そう
• でも、無課金勢はtokenの上限が来た。
• 翌日になれば回復する？と思うのでそれを待つ。
• アレだったらbolt課金しても良いかも

作業記録：20241012（17:30～18:00）

今日やること

• boltで昨日の続き

boltの続き

• Settings→Tokens見たら、Oer dayはリセットされてた
• Per monthは、166.068 / 1.000.000だったのでハッカソン中は使えそう
• 1つプロンプト打っただけでPer dayが47.763になり、次は74.015になった。
• エラーをfixしてたら今日の分のtokenが終わった
• ちょっと使い物にならないかも
• うん、Cursor課金しよう！
• Geminiじゃ弱すぎて使い物にならないし、せめて4o-miniは使い放題じゃないと辛い
• あと、難問を解決するのに、claudeが使えないと辛い
• composerとか、applyとかも使いたい！

まとめ

• Cursorに課金することが決まった！
• 土日は、平日の仕事の休息、家事、note執筆で時間があまり取れません～
• Switchのカタチケの期限が近かったので、ポケモンスカーレット買いました。時間が取れたらやりたい。
• 明日は、ハッカソンのセミナーを見ながら、色々作業する予定です。

作業記録：20241013（19:00～21:30）

今日やること

• 1900～セミナー参加
• 1000～のセミナーはアーカイブ視聴する

平岡さんセミナー

• 平岡さんはAI使って楽したい
• ラッダイト運動

きのぴーさんセミナー

• lint errorが@で渡せるようになった
• composer：まず、save allで変更を適用しテストする。上手く行けばApply all、ダメならReject allする。
• next.jsのdocsを作って最新の情報を参照させる。毎回、丁寧にdocsに@で入れるくらいした方が良い。
• きのぴーさんもそらさんもCursorの課金はおすすめ！って仰っていた
• きのぴーさんの開発は、Claudeアーティファクトでアイディアの壁打ちし、Markdownで出力させ、それをCursorに投げて作らせる。
• 最新の難しい技術に拘らずに、簡単なものでも活用次第でよくなります！

まとめ

• 食事しながらセミナー視聴
• 明日はYouTube動画作るので、早く終わったらCursor課金して開発する！
• ちなみに、9:00～18:00までnote書いてた！

作業記録：20241014（20:00～23:00）

今日やること

• Cursor課金：きのぴーさん、そらさんが背中を押してくれた！
• YouTube動画作成

YouTube動画作成

• せっかく課金したので、Cursorでnote記事のYouTube台本化をしよう！
• Composer：複数ファイル弄らないから不要！
• Ctrl+K：遅い
• やっぱりChat欄安定だった。
• Gemeniは早いけどおバカちゃん率高い。たまに言うこと聞く。
• 4o-miniが無制限で使えるので、これ安定。
• Cursor通すと遅いので、自作して直接API叩くようにしたい
• ずんだもんを解雇し、めたんにした。他のボイスは音質悪かった。
• 台本を長くしてみたけど、Voicevoxの辞書登録が大変なので、やっぱり短くする。

まとめ

• Cursor課金機能使えるの楽しい
• 4o-miniが使い放題はとても助かる
• 明日は普段通り3分くらいの動画を明日中にリリースすることを絶対やる。
• 明後日はセミナーだ。
• ちょっとハッカソン間に合うか焦り始めてきた！

作業記録：20241015（20:00～22:00）

今日やること

• YouTube動画作成
• ポケモン

YouTube動画作成

• blogから動画用の台本を作らせたけど、愛想がないかも
• まあ、改善はまた来週

まとめ

• クオリティを上げようとしてYouTube投稿にくそ時間がかかった
• 先週までは1hだったのに6hくらい
• そして、クオリティは下がった（涙）
• 最低限やることだけやって休憩dayにしました
• ちょっと疲れてきたので・・・

作業記録：20241016

• セミナー参加で疲れたのでサボり
• Gemmaの開発の方が「Cursorメッチャいい！」って叫ばれていました！

作業記録：20241017（20:00～22:30）

今日やること

• 仕様の再検討

仕様の再検討

• きのぴーさんが「壁打ちする」って仰っていたので、私も再度仕様を検討する
• リートンでClaudeを使ってやってみよう

メルマガリーダーを作を作りたい。要件定義を手伝って。メルマガを読んだ位置を記録し、次回同じメルマガを開いたら前回読み終えた位置の続きから読めるようにする。 Next.js(TypeScript)でapp router, Shadcn/ui, Vercel, supabaseを使う

### メルマガリーダー要件定義書

#### 機能要件

1. **ユーザー認証**
   - Supabaseを使用してユーザー登録とログイン機能を実装。
   - メールアドレスとパスワードによる認証。

2. **メルマガの管理**
   - メルマガの作成、編集、削除機能。
   - メルマガの内容はMarkdown形式で保存。

3. **読んだ位置の記録**
   - 各ユーザーごとに、メルマガを読んだ位置をSupabaseに保存。
   - 読み進めた位置を特定するためのフィールド（例：メルマガID、ユーザーID、読み進めた位置）。

4. **続きから読む機能**
   - メルマガを開いた際に、前回の読み進めた位置から自動的に表示。
   - 位置を保存するためのAPIエンドポイントを作成（例：`POST /api/save-progress`）。

5. **Gmailからのメルマガ取得**
   - Google Apps Script (GAS)を使用して、Gmailから特定のラベルを持つメルマガを自動的に取得。
   - 取得したメールの内容をNext.jsアプリに送信するためのHTTPリクエストを実装。

6. **インターフェース**
   - Shadcn/uiを使用して、ユーザーフレンドリーなUIを構築。
   - メルマガのリスト表示、詳細表示、読み進めるためのボタンを設置。

7. **レスポンシブデザイン**
   - モバイルデバイスでも快適に読めるようにレスポンシブに設計。

#### 非機能要件

1. **パフォーマンス**
   - Vercelを使用してデプロイし、パフォーマンスを最適化。

2. **セキュリティ**
   - ユーザー情報やメルマガデータの保護。
   - 認証されたユーザーのみがメルマガにアクセスできるようにする。

3. **スケーラビリティ**
   - Supabaseを利用して、データベースのスケーラビリティを確保。

#### 開発環境

- **フロントエンド**: Next.js (TypeScript)
- **データベース**: Supabase
- **ホスティング**: Vercel
- **UIライブラリ**: Shadcn/ui
- **Gmail処理**: Google Apps Script (GAS)

#### 実装の流れ

1. **プロジェクトのセットアップ**
   - Next.jsプロジェクトを作成し、TypeScriptを設定。

2. **Supabaseのセットアップ**
   - Supabaseで新しいプロジェクトを作成し、必要なテーブルを設計。

3. **認証機能の実装**
   - Supabaseの認証APIを利用して、ユーザー登録とログイン機能を実装。

4. **メルマガ機能の実装**
   - メルマガのCRUD操作を実装。

5. **GASスクリプトの作成**
   - Gmailからメルマガを取得するGASスクリプトを作成し、Next.jsに送信する。

6. **読み進めた位置の保存機能**
   - 読み進めた位置を記録するAPIエンドポイントを作成。

7. **UIのデザイン**
   - Shadcn/uiを使って、ユーザーインターフェースを構築。

8. **テストとデプロイ**
   - Vercelにデプロイし、動作確認。

Cursor課金者による無双

• 今までは無課金でGemini使ってたけど、精神的にも限界だったので課金した。
• 要件定義書から詳細設計書を作成し、composer+claudeでゼロから作り直した。
• ファイル作らせるのはClaudeしか信用できない
• 4o-miniが使いたい放題なので、細々したものはこいつ
• ソースはGitHubのdevブランチです。
• 良い感じかも？

まとめ

• composer使うと開発楽すぎワロタｗ
• きのぴーさんの教えに従い4o-miniをなるべく使うようにした

• この土日で完成させて、平日はクオリティアップしたい！
• 金曜日はYouTubeで勉強する！

作業記録：20241018（18:00～18:30、20:00～22:30）

• タイラーさんのYouTubeで勉強
• この前、bolt.newについてポストしたら反応くれたのこの方だった
• 今日も開発の続き

タイラーさんのYouTube

• タイラーさんは東京にいらっしゃるみたい
• Email認証の「Confirm email」を無効にしてsave。本番では有効にする
• 34:00～connect supabase辺りからsupabase系の話。参考になる
• npx supabase initでsupabaseのプロジェクトを作成し、migrationファイルとか作れる
• 36:00 supabaseのGitHubからPostgreSQLのGuideをプロジェクトに追加
• Guideを指定しつつmigrationファイルを作らせている

開発

• 一旦、テーブルは全部消す
• supabaseのメール認証はcustom SMTPを設定しないと、自分以外のメール認証ができない模様
• migrationファイルを作らせたプロンプト（claude-3.5-sonnet）

要件定義書 @detailed_design.md の内容からsupabaseのmigrationファイルを @database-create-migration.md を参考に作成して。書式は @code-format-sql.md を参考にして。 @Codebase 

• npx supabase startするには、dockerが必要みたい。10分くらいかかる
• タイラーさんはstartしてなかったらいらないかも。直接リンクすれば良い
• supabase/seed.sqlがないと怒られる。作った。
• npx supabase loginが必要。自動で認証されるはずがされなかったので、コンソールのリンクを踏んだら通った。
• npx supabase link --project-refで既存のプロジェクトにリンクする
• パスワードは、Project Settings→Database→Reset database password→Generate a password→copy→Reset password
• WSLはローカルにDBパスワード保存してくれない感じなので、どこかにコピーする
• GmailのメルマガをGAS経由でsupabaseに保存できた

• 今日のCursorの使用量

まとめ

• 良くわからないけど、困ったらclaude-3.5-sonnetにして@codebase @webとかすると解決できた
• 明日は続きから読む機能を作る

作業記録：20241019（19:30～22:30）

• メルマガの続きから読めるように修正

前回の続きから読む機能の実装

• もったいぶらずにsonnetを使うようにしたら、migrationファイルとか色々直してくれつつ、前回の続きから読む機能が30分くらいで完成した。

Vercelへデプロイ

• 初回デプロイはエラー。何かESLintが悪いみたい
• 3回くらい同じようなエラーが続いたので、以下のプロンプトで全修正させた

同様のエラーが発生しないかを @Codebase プロジェクト全体を見て直して。 Vercelのマニュアルも参考にして @Vercel-Next.js 

• そうしたらデプロイ成功。PCからちゃんと見れるし、スマホからも見れて動いた！！
• 最低限のモノは出来たらハッカソンの作品応募できる！

今後のタスク

• 個人開発のブランチ名の付け方を検討
• 一旦、詳細設計書とCodebaseをClaudeに渡して良きに直させてみる
• スクロールが止まってから1秒経過で位置を保存で良いのか？
• 手動で位置を保存するボタンが欲しい
• 管理者ページが欲しい
  • 新規登録のON/OFF機能

個人開発のブランチ名の付け方

• 個人開発のブランチ名の付け方で一般的なものを教えて

### **主なブランチの種類**

- **メインブランチ**: `master`または`main`（公開用の安定コード）、`develop`（開発中のコード用）。
- **機能ブランチ**: `feature/〇〇`（新機能開発用）、例: `feature/login-system`。
- **リリースブランチ**: `release/〇〇`（リリース準備用）、例: `release/v1.0.0`。
- **バグ修正ブランチ**: `hotfix/〇〇`（緊急修正用）、例: `hotfix/critical-bug`。

• mainとdevelopで良い気がした。

Claudeに良きに直させてみる

詳細設計書 @detailed_design.md  を参照し、プロジェクト全体 @Codebase で未完成な部分を作成して。 @Next.js も参考にして。

詳細設計書 @detailed_design.md  を参照し、プロジェクト全体 @Codebase で未完成な部分を作成して。 @Next.js と @shadcn/ui  も参考にして。

だいぶ良くなってきたので、指摘だけさせることにした

詳細設計書 @detailed_design.md  を参照し、プロジェクト全体 @Codebase で未完成な部分を指摘して。 @Next.js と @shadcn/ui  も参考にして。

まとめ

• ごちゃごちゃやってたら3時間経過してたので今日は終わり。
• 最低限の機能が完成し、インターフェースらへんが良くなった。

• Cursorの状況

• 明日は、メルマガがテキスト形式で取得されているので、Markdown形式で取得するようにする
• その他、気になる点を改善する
• ハンバーガーメニューなど、最低限必要なUIは最初に作る際に作らせておくと良いかも

作業記録：20241020（8:30～13:00、17:30～20:30、21:00～24:00）

• 締切間近で焦りがあるので、朝から作業
• メルマガがテキスト形式で取得されているので、Markdown形式で取得するようにする
• その他、気になる点を改善する

メルマガ取得方法の改善

• GASのドキュメントをCursorのdocにも与える
• それを使って、Gmailの取得時にMarkdown化させる

メルマガ表示方法の改善（8:30～13:00）

必要があれば、 @shadcn/ui @Next.js @Codebase も参照して。

必要があれば、 @shadcn/ui @Next.js @Codebase @Vercel-Next.js  も参照して。

• また沢山時間が経過してた。
• セキュリティ等がまだなので、メンテナンスモードを導入した
• とりま、期日前投票と名古屋まつりに行く！

メルマガ所有者であることの確認（17:30～20:30）

必要があれば、 @Supabase   @shadcn/ui @Next.js @Codebase も参照して。

• supabaseをcliで使うには毎日npx supabase link --project-refしないとダメそう？
• 3hかけてできた

DBの初期化のファイルの整理（21:00～）

• どうせ全部消すので、migrationファイルを1つにまとめさせる
• DBをrefreshして初期化する
• タイラーさんがオフにしていたメール認証をオンにする→STMPが大変なので、Google Authを導入する

Google Authの導入

• やろうとしたけど面倒。今回は見送り
• ユーザー登録無しで、使ってもらえるようにする

必要があれば、 @GAS  @Codebase も参照して。

本番用にセキュリティの向上（～24:00）

• RLS対応がものすごく大変
• 今日は見た目は変わらず、内部処理ばっかりいじってた
• Cursor使用量

まとめ

• 自分用にはそれなりの完成度になった
• 明日は、ハッカソン提出用にゲストモード（サンプルメルマガ）を追加する

作業記録：20241021（19:30～23:30）

• APIキー、エンドポイントの変更
• メルマガ受信をトリガーにする
• メルマガ未購読者用の対応
• 手動で位置を保存するボタンが欲しい。右上に常に表示させる。ハンバーガーは左にする
• スクロールが止まってから1秒経過で位置を保存で良いのか？→フラグでdisableにする

APIキー、エンドポイントの変更

• 普通にコードに埋め込んでたことに気付いたので、変更する
• supabaseのsettingsに変更できそうなところがないので、プロジェクトを作り直す
• 面倒かと思ったら、すぐ終わった。
• migrationファイルをちゃんと用意したり、GASもCLIで使えるようにしていた過去の自分偉い！

メルマガ受信をトリガーにする

• 現在は毎週水曜の8:00～9:00にGASを実行してメルマガをDBに保存している（メルマガが7:30に届くため）
• 「メルマガの受信をキーにしてGAS実行すればいいじゃん」と思ったけど、「時間駆動トリガーを設定し、定期的にメールをチェックする方法」ってAIに言われて面倒くさいと思ったので、後回し

メルマガ未購読者用の対応

• 週刊 Life is beautifulサンプル号があるのでこれを使った。
• サンプル号は最初から認証済みとして一番上に表示するロジックを考えたけど、AIにあっさり良い方法を提案された。

@NewsletterList.tsx のDBからのメルマガ取得について、基本的にはこれで良い。そのユーザーがnewslettersのid="b1fc1499-7388-441e-a3c5-1de7f31b3c0b"のみしかis_verified=TRUEになってない（reading_progressにnewsletter_id="b1fc1499-7388-441e-a3c5-1de7f31b3c0b"のレコードしかない）場合に、newsletter_id="b1fc1499-7388-441e-a3c5-1de7f31b3c0b"を一番上にして、それ以外は従来通りの並びにしたい。必要があれば、 @Supabase   @shadcn/ui @Next.js @Codebase も参照して。

この変更により、照合済みのメルマガが一番上に表示され、それ以外のメルマガは作成日の降順で表示されます。
この実装は、複数のメルマガが照合済みになった場合にも対応できます。照合済みのメルマガが複数ある場合、それらは作成日の降順で並べられます。

手動で位置を保存するボタン

• 1秒おきにDBに保存していて負荷が高いと思うので、保存ボタンにした

成功時のボタンをオシャレにして。必要があれば、 @shadcn/ui @Next.js も参照して。

Google Auth

• Custom SMTPを入れるの面倒だけど、Google Authも面倒だと思って、最悪ベリファイなしでいいかと思っていた
• ネットサーフィンしてたら、画像付きの記事があったので、これを参考にやる！
• Google Cloudを見たら20円くらい使ってる。なぜ？
• Geminiちゃんだった。CursorでGemini pro使うとお金かかるかも。
• Google Authが記事の通り出来たと思ったら。何か404になった・・・

まとめ

• 明日はYouTube作りをまずやる
• その後開発、404対応＆Google Authの導入

作業記録：20241022

• 日曜、月曜と頑張りすぎて反動が来たのでお休みday
• YouTube動画は作りました。クオリティ低しorz
• 明日はGoogleセミナー参加で開発はお休み

作業記録：20241023

• セミナー参加でお休み

作業記録：20241024

• 脳がオーバーヒート気味だったので、仕事を有給でお休み
• 大半寝てた。ポケモンも少しした
• お休みは大事！

作業記録：20241025（19:00～24:00）

• 404対応。1つ前の動く奴からブランチ作る
• Google Authの対応
• このアプリはハッカソンの作品提出目的で公開しています。ハッカソン終了後は非公開となります。
• 公開されていたテストメルマガが読めます。このメルマガの權利は、中島聡様、にあります。中島聡さんは、Windows95を開発した凄腕のエンジニアです。このメルマガが気になった方は、ぜひまぐまぐから登録して読んでみてください！
• 中島さんに報告メールを送る。ついでに日本語字幕付きのビデオポッドキャスト作りの技術スタックの予定を聞く。
• Cursorのログイン画面を参考にする
• アプリの名前は「めるまぐ」にする。被ってないか調べる

色々作業（19:00～23:00）

• saveボタンの追加

必要があれば、 @shadcn/ui @Codebase も参照して。

文言修正

• 注意事項などを追記してfix

まとめ

• 大変だったけど何とか完成させた！
• あとは、明日の21:00までに提出するだけ！
• コードはもう弄らない！ 弄ると沼るから！
• 最後の方はmodel切り替えるの面倒になってclaude使いまくった

作業記録：20241026（14:00～16:00）

• 作品提出
• 振り返り

提出準備

• gif動画撮る→ScreenPressoで撮影、Clipchampでトリミング。微妙。
• gitのreadme作る。Cursorで

@README.md を作成して。  @requirements.md と @detailed_design.md を参考にして。必要があれば、 @Codebase も参照して。

• readmeからアプリの説明作る。Cursorで

@README.md の内容を100文字程度でプレゼンの文章にして！

• 微妙。手書きする。

以下はメルマガアプリの宣伝文です。更に良くして！

あなたのメルマガライフをさらに快適にするアプリが登場！
「めるまぐ」は中島聡さんの「週刊 Life is beautiful」専用のメルマガリーダーです。
最後に読んだ位置を記録し、続きから読み進めることができます。
ダークモード搭載など、嬉しい機能が盛り沢山！

• ポスト：個人開発でメルマガリーダーアプリ

作品提出

• ノパソのLinux MintでSSとか撮ろうとしたら、小さくなったのでデスクトップで撮ることに
• 折角なので、Linux用のCursorアップデートツールを入れてみる→一瞬で終わった神！

振り返り

ざっくばらん

• 最初は順調そうに見えたが、細かい所の修正が非常に大変だった。
• 要件定義書〜詳細設計書までは作ったが、各コンポーネントの設計書までは作らせなかったし、設計書のチェックも適当だったため、全体の仕様が統一されなかった。
• 元木さんのバベゾルは、とても考えられて作られていると改めて思った。
• 自分用なら手抜きやらできたけど、作品提出となると一般公開なので面倒だった。
• プロトタイプが出来たので、これを元にpersonal版を作り、自己マンを極めようと思う
• 元木さんときのぴーさんにXフォローしてもらえたのが、とても大きい収穫！

まとめ

• DBを使用したアプリ制作に初挑戦し、期限内に作品を完成させた
• エンジニアとしてものすごく実力がついた
• 実質、開発に費やした時間は30時間くらいなので、サラリーマン換算なら4日で開始〜完成まで行ったことになる。これはヤバイ
• Cursor×Next.js×Supabaseなら、個人でも普通にアプリが作れることが分かった。
• チョロっとしたアプリ作りで生活費を稼ぎながら、WorldWideなアプリ作りたい！

https://x.com/nagisora_/status/1850063893453996192

後日談：20241104

• ハッカソン含め、色々頑張りすぎて燃え尽きた
• もうアラフォーなので、あまり無理しないようにします。

https://x.com/nagisora_/status/1853386452870320178