亀ちゃん

 Cursor Webアプリハッカソン by Sunrise AIに参加春からエンジニア畑に就職し、知識もスキルもない私がAIを活用したシステム開発を通して、開発スキルを磨いていきたいと思い、このハッカソンに挑戦しました。
ここでは、その作業記録をまとめていきます。

亀ちゃん

 20241001 (22:00- 22:30)
 ハッカソンの取り組み方まず作りたいものの方向性を決める。作りたいものから逆算して必要な技術を学んでいくスタイル。片っ端からいろんなことを勉強しても無駄な時間を過ごすし、モチベーションも維持できないので限られた時間の中で良いアウトプットを作るために、ゴールを決める。
何作ったらいいかわからなかったら、とりあえず、Difyとかv0いじりながら考える

 アプリアイデア（ブレスト）テキスト→画像→動画
Mapのやつの拡張版作る
下記ポストのアプリのモックを簡単に作ってみてできそうか確認したい

-@tweet

自分の知識を粒子状のネットワークとして可視化できるノートアプリ

 スケジュール最終提出締切：2024年10月26日 21:00

10/1～10/5：アイデア出し＋勉強（cursor, v0 difyをいじる）

10/6~10/12：要件定義、設計

10/13~10/19：構築

10/20~10/25：テスト・修正・デプロイ

10/26：リリース

 使用するツール要件定義書作成：Babel、Zoltraak、GEAR.indigo, OpenAI o1、
モックの作成：v0、GPT-Engineer
エディタ：Cursor
バックエンドのLLM処理：Dify
BaaS：superbase

 自分の技術レベルPythonなんとなくわかる
Dify使ったことある
v0使ったことある
Cursor使ったことある

亀ちゃん

20241002

おやすみ

亀ちゃん

 20241003
 Cursor講座の動画視聴感想・メモ
有料級すぎる
Cursorの利点は、コードを修正して欲しい時に、全部書き直すんじゃなくて、修正したコードの箇所だけを修正できるところ。（cmd+K）
ファイルやフォルダの作成も可能
ディレクトリ構造を指示したい時は「アスキーツリー図」が有効
プロンプト間のコンテキスト共有も可能（コントロールパネルと Notepads）
一回一回参照するファイルを選択しなくても、Notepadsで選択しておいてそのNotepadsだけを参照すれば良い

亀ちゃん

20241004

休み

亀ちゃん

 20241005(18:00-22-00)
 企画新しく出た案：ニーズベースで考えてみた
言語化アプリ
このアプリは、毎日異なるテーマ（例：日常生活、趣味、社会問題など）を提示し、それに基づいてユーザーが短い文章やエッセイを書くことで、言語化能力を鍛えることを目的とする。

電車の遅延通知アプリ
このアプリは、ユーザーが自分の乗りたい電車を設定し、遅延や運行情報をリアルタイムで通知することで、通勤や移動をスムーズにすることを目的とする。

どうせ作るんなら、自分の日々の業務をやりたいことを楽にしてくれるものがいいな

課題解決ベースで明日も考えてみよう
### 1. 言語化スキルアップアプリ

**コンセプト**:
このアプリは、毎日異なるテーマ（例：日常生活、趣味、社会問題など）を提示し、それに基づいてユーザーが短い文章やエッセイを書くことで、言語化能力を鍛えることを目的としています。

**機能**:
- **テーマの提示**: 毎日異なるテーマを通知し、ユーザーはそれに沿った文章を作成します。
- **自動フィードバック**: ユーザーが書いた内容に絡めて、AIが文法、構成、表現の提案や改善点を提供します。
- **エクササイズ記録**: 過去に書いた内容をアーカイブし、ユーザーが自己進捗を振り返ることができる。
- **シェア機能**: 他のユーザーと自分の文章を共有し、フィードバックを受け取ることができるソーシャル機能。
- **スキルポイントシステム**: 書いた文章に対してポイントを与えることで、モチベーションを向上させる。

### 2. 電車遅延通知アプリ

**コンセプト**:
このアプリは、ユーザーが自分の乗りたい電車を設定し、遅延や運行情報をリアルタイムで通知することで、通勤や移動をスムーズにすることを目的としています。

**機能**:
- **電車の登録**: ユーザーがよく使う路線や電車を簡単に登録。
- **遅延通知**: 標準時刻と遅延の情報をリアルタイムで受け取れるプッシュ通知。
- **到着予測時間**: 現在の運行状況に基づいて、目的地に到着するための最適な出発時間を提案。
- **乗り換え提案**: 遅延の長さに応じて最適な乗り換え案内を提供する機能。
- **運行情報のまとめ**: ユーザーが自身の定期運行を簡単にチェックできるダッシュボードを提供。

### ステップ4: 実現可能性の評価
両方のアイデアとも、非常に興味深く実現可能ですが、それぞれのアイデアについて考えてみましょう。

- **技術的な実装**: 
  - 言語化スキルアップアプリは、自然言語処理のAI技術を使うことが考えられます。これにはPythonのライブラリ（例：NLTK、spaCyなど）が役立ちます。
  - 電車遅延通知アプリは、公共交通機関のAPIを利用して運行情報を取得することが必要です。これによりリアルタイム情報を得ることができます。

- **時間とリソース**: 
  - ハッカソンの範囲でどれだけの機能を実装できるかも考慮が必要です。特に、AI機能を完璧に実装するのは時間がかかるかもしれませんが、シンプルな通知機能から始めることで段階的に追加することも可能です。

### ステップ5: 選択肢の絞り込み
この中で、どちらのアイデアにより情熱を持っているか、または実現したいかについて考えてみてください。どちらも効果的ですが、自分がどちらを通じてベストな学びが得られるかを考えると良いでしょう。

### ステップ6: コンセプトの発展
興味のある方を選んだら、そのアイデアを発展させ、機能やデザインのプロトタイプを考えることが次のステップです。どちらのアイデアに進みたいか教えていただければ、さらに具体化するサポートを提供できます！
言語化アプリについて深掘り
素晴らしい選択ですね！言語化スキルアップアプリをさらに具体化していきましょう。次のステップとして、いくつか考えるべきポイントがあります：

### 1. ターゲットユーザーの設定

- **対象者**: 例えば、自己表現に自信がない若い社会人や、文章力を高めたい学生などをターゲットに設定できます。
- **ユーザーの課題**: 言語化が苦手、考えを明確に伝えられない、文章をスムーズに書くことができないといった悩みを持つ人々が主な対象です。

### *2.* 具体的な機能の深掘り

- **日々のテーマ通知**\*: ユーザーに毎日異なるテーマをプッシュ通知で提示。例えば、「今日のテーマは『理想の一日』です」といった具合で、ユーザーに短い文章を書かせます。\*
- ***AIによるフィードバック***\*: 書い\*た文章に対して、表現力を強化するためのアドバイスをAIが提供します。例えば、「この部分を具体的にすることで、より強い印象を与えられます」といった提案です。
- **成長の可視化**: ユーザーが書いた文章を記録し、過去の文章と比較して成長を感じられるようにすることで、継続のモチベーションを向上させます。
- **ライティングチャレンジ**: 他のユーザーと同じテーマで文章を共有し、相互にフィードバックを送り合う仕組みを作ることで、コミュニティ要素も加えられます。

### 3. プロトタイプの考案

- **UI/UXの設計**: シンプルでユーザーが迷わないデザインを目指しましょう。書きやすいエディタをメインに、フィードバック機能と履歴の閲覧機能を直感的に配置します。
- **ユーザーのモチベーション維持**: 書いた回数やクオリティによってバッジを獲得できたり、レベルアップするシステムを導入することで、ゲーム感覚で楽しむことができる仕組みを検討します。

### 4. 技術面での考慮

- **自然言語処理（NLP）**: 書かれた文章の文法チェック、表現の改善提案、文章の評価にはNLPの技術を利用することが考えられます。Pythonのライブラリ（例えばspaCyやGPT-4のAPI）を使用することで、ユーザーの文章に適切なフィードバックを提供できます。
- **バックエンドの構築**: ユーザーのデータを安全に保管し、成長を追跡するためのデータベース設計も重要です。

### 5. MVP（最小実用プロダクト）の考案

- 初期段階ではシンプルに、日々のテーマ提供とそれに対するユーザーの入力、簡単なフィードバック機能に絞ることが良いかもしれません。これにより、ユーザーのニーズを素早く確認し、必要に応じて機能を追加できます。

### 次のステップ

- **具体的なユーザーストーリー**を作成して、どのようなユーザーがどのようにアプリを使うのかを考えてみましょう。
- **デザインプロトタイプ**を描き始めることで、アプリのイメージをより具体化し、将来の開発に向けた土台を作ります。

どのステップから進めていきたいか、または他に深掘りしたい部分があれば教えてください！



 Difyブロック勉強こちらの動画で勉強

https://youtu.be/Aszx60yIXUI?si=k1wAHxd_fMkUai5z
それぞれのブロックがわかりやすく解説されていた。
質問分類機やテンプレート変数集約機、HTTP等が使えそう

 ハッカソン講座受講初心者向け簡単Webアプリ講座 (10/5 19:00~20:00)
Next.js基礎＋Git講座 (10/5 20:00~21:00)

新しく学んだこととしては、Next.jsの活用について

 Bolt触ってみたhttps://bolt.new/
V0やClaude Artifactsに似ている
GPT Enginneerに近い
複数ファイルの生成ができる
デプロイもボタン１つで簡単
ちょっと生成に時間がかかる

今日作ったもの

https://scintillating-bavarois-d2da93.netlify.app/

 ChatGPT canvasノートアプリに近い感じかな

亀ちゃん

20241006(18:00-22-00)

ChatGPTをアイデアの壁打ち

ハッカソンで1ヶ月という期間で作成するのに適したアイデアを選ぶには、実装の難易度、スコープの明確さ、そして完成度を考慮する必要があります。以下、それぞれのアイデアについてハッカソン向けの適性を評価します。

---

### 1. **電車遅延通知アプリ**

- **実装可能性**: 高い
- **実装の難易度**: **低〜中程度**
  - 鉄道会社のAPIを利用して遅延情報を取得。
  - プッシュ通知やユーザー設定機能の実装。
- **スコープの明確さ**: はっきりしており、コア機能に集中できる。
- **適性**: **非常に高い**
  - 基本的な機能を短期間で実装可能。
  - ユーザーインターフェースもシンプルに設計できる。

### 2. **言語化お助けアプリ**

- **実装可能性**: 高い
- **実装の難易度**: **中程度**
  - 自然言語処理を活用し、ユーザーの入力に対してフィードバックを提供。
  - 既存のAI API（例: OpenAI）を利用すれば実装期間を短縮可能。
- **スコープの明確さ**: コア機能を絞れば明確。
- **適性**: **高い**
  - 初期バージョンは基本的なフィードバック機能に集中。
  - ユーザー登録なしでも利用可能な設計にすれば、開発時間を節約できる。

### 3. **地図アプリ「Terra Talk」**

- **実装可能性**: 低い
- **実装の難易度**: **高い**
  - 3D表示や大量の地図データの統合が必要。
  - AIとの対話機能も含めると複雑度が増す。
- **スコープの明確さ**: 広範で、絞り込みが難しい。
- **適性**: **低い**
  - 1ヶ月ではプロトタイプの完成も難しい可能性。

### 4. **ネットワーク上に知識を可視化できるノートアプリ**

- **実装可能性**: 中程度
- **実装の難易度**: **中〜高程度**
  - データの可視化やインタラクティブなUIの構築が必要。
  - 基本機能に絞れば可能性はある。
- **スコープの明確さ**: 機能を限定すれば明確。
- **適性**: **中程度**
  - 最低限の機能でプロトタイプを作成し、その後拡張する戦略が必要。

### 5. **Rust専用のシステム生成アプリ**

- **実装可能性**: 中程度
- **実装の難易度**: **高い**
  - Rustの深い知識とシステム生成の自動化が必要。
- **スコープの明確さ**: 絞り込みが可能だが、機能制限が必要。
- **適性**: **中程度**
  - Rustに精通している場合は可能性あり。

### 6. **SaaS紹介・売買プラットフォーム**

- **実装可能性**: 低い
- **実装の難易度**: **高い**
  - ユーザー管理、決済システム、セキュリティ対策など、多岐にわたる機能が必要。
- **スコープの明確さ**: 広範で、主要機能を削ると価値が下がる。
- **適性**: **低い**
  - 1ヶ月での完成は難しく、品質も担保しづらい。

---

### **総合的なおすすめ**

**最もハッカソンに適しているのは「電車遅延通知アプリ」と「言語化お助けアプリ」です。**

- **電車遅延通知アプリ**は、必要な機能が明確で技術的ハードルも比較的低いため、短期間でプロトタイプを完成させやすいです。
- **言語化お助けアプリ**は、既存のAIサービスを活用することで実装時間を短縮でき、ユーザーにとって価値のあるツールを提供できます。

もしデータ可視化やクリエイティブな開発に興味がある場合は、**「ネットワーク上に知識を可視化できるノートアプリ」**も検討できます。ただし、この場合は機能を最小限に絞り、プロトタイプの完成を目指すと良いでしょう。

---

**ポイント**

- **実装のスコープを明確にし、機能を絞ることが成功の鍵です。**
- **既存のAPIやサービスを活用して開発効率を上げましょう。**
- **自分の情熱とスキルセットに合ったアイデアを選ぶことで、開発プロセスを楽しむことができます。**

亀ちゃん

 20241015(21:00-22:00)まずい、１週間以上経ってしまった。何を作るべきかまだ決まっていない。

流石に、これでは終わらないなと思い、もくもく回を利用して作業することに。

とりあえず、アイデアを絞っていく

 現在の候補ノートアプリ（難しそう）
言語化支援アプリ（ウェブアプリにする必要なさそう、GPTsで事足りる）
電車遅延通知アプリ（もうすでにある）
地図アプリ
作成したキャラクターを歩かせたり、飛ばせたりするのは楽しそう。

マッチングアプリ
チャットだから、履歴を残すDBとか必要そう

何か、面白そうなアイデアはないだろうか？

亀ちゃん

 20241022(21:30)ヘルスケアアプリになった。

改めて要件定義をChatGPTにお願い
この要件定義は、非常に包括的で、実装に必要な全体像をしっかり捉えています。ただし、ハッカソンという短期間での開発において、優先順位を設定することが重要です。以下は、優先度の高い機能を示し、スコープを調整するための提案です。

 1. MVP (Minimum Viable Product)の優先順位:

 必須機能 (フェーズ1)
ユーザー認証
サインアップ、ログイン、ログアウト（Supabase認証機能を利用）
基本情報の入力
年齢、性別、体重、目標体重、活動レベルの入力フォーム
栄養プランの自動生成
入力情報に基づいた1日の推奨カロリー計算
食事の簡易メニュー例を提供（APIまたは静的データ）
進捗管理の基礎
体重の記録と目標達成度の表示
グラフはRechartsを使用してシンプルな体重推移を表示

 優先度の低い機能 (フェーズ2以降)

ソーシャル機能の追加（進捗の共有やコミュニティ）
高度なAIによる食事提案
詳細な栄養分析（マクロ栄養素のバランス）

 2. ハッカソンの制約に合わせた技術選定の見直し:
バックエンド:

Supabaseでの認証とデータベース設計は維持。簡単な実装で信頼性の高い認証とストレージが実現可能。
フロントエンド:
Next.jsを使用したSPA構成。ただし、ハッカソンではUI/UXはシンプルに保ち、Tailwind CSSで最小限のスタイリングを実施。
アニメーション:
Framer Motionの使用は任意。時間が限られているため、まずは機能の実装を優先。

 3. 進行管理と役割分担の提案:
フロントエンド担当:
Reactによるフォーム入力とページ遷移の実装
Rechartsで体重推移グラフを表示
バックエンド担当:
Supabaseの設定とAPIルートの実装（認証、データ保存）
栄養プラン生成の簡易アルゴリズム作成
UI/UX担当:
Tailwind CSSを用いた基本的なデザイン
フォームのバリデーションとユーザー体験の向上

 4. タイムライン提案 (24〜48時間ハッカソンの場合):
1日目:
モックアップの設計と役割分担
ユーザー認証機能の実装
基本情報入力フォームの構築
2日目:
栄養プラン生成のロジック実装
体重記録の保存とグラフの表示
必要なスタイリングとUIの改善
発表前:
最後のバグ修正とプレゼンテーション準備
このようにMVPに焦点を絞ることで、限られた時間内で実装可能なプロダクトを確実に完成させることができます。成功したハッカソンのプロジェクトは、まず動作するシンプルなプロトタイプを作成し、その後、フィードバックを得ながら拡張していくのが理想的です。

亀ちゃん

 20241023(21:30)今日の成果

以下v0にコードを作らせてみる

まじでsupabase難しい。簡単なtodoアプリなら作れるけど、体重管理等複雑なものを作るのは難しい。
先ほどのヘルスケアアプリを以下のようなディレクトリ構造で作成したい

health_care_app/

├── app/

│   ├── auth/

│   │   ├── Login.tsx

│   │   └── signup/

│   │       └── page.tsx

│   ├── components/

│   │   ├── AuthForm.tsx

│   │   ├── CalorieSuggestion.tsx

│   │   ├── MealRecordForm.tsx

│   │   ├── MealRecordList.tsx

│   │   ├── NutritionPlanDisplay.tsx

│   │   └── WeightRecordForm.tsx

│   ├── dashboard/

│   │   └── page.tsx

│   ├── layout.tsx

│   ├── page.tsx

│   └── _app.tsx
ディレクトリ構成とファイルの役割

app/: アプリケーションの主要なコンポーネントやページを含むディレクトリ。

auth/: 認証関連のコンポーネントを含む。

Login.tsx: ユーザーのログイン機能を実装。

signup/page.tsx: ユーザーのサインアップ機能を実装。

components/: 再利用可能なUIコンポーネントを含む。

AuthForm.tsx: 認証フォームの共通コンポーネント。

CalorieSuggestion.tsx: カロリー提案を表示するコンポーネント。

MealRecordForm.tsx: 食事記録を入力するフォーム。

MealRecordList.tsx: 食事記録のリストを表示するコンポーネント。

NutritionPlanDisplay.tsx: 栄養プランを表示するコンポーネント。

WeightRecordForm.tsx: 体重記録を入力するフォーム。

dashboard/: ユーザーのダッシュボードページ。

page.tsx: ダッシュボードのメインページ。

layout.tsx: アプリケーション全体のレイアウトを定義。

page.tsx: アプリケーションのホームページ。

_app.tsx: アプリケーションのエントリーポイント。
また、supabaseのテーブル定義を以下のように設定しています。
users テーブル

目的: ユーザー情報を管理するためのテーブル。

カラム:

id: UUID (主キー)

email: TEXT (ユニーク)

password: TEXT

created_at: TIMESTAMP (デフォルトで現在のタイムスタンプ)
meal_records テーブル

目的: 食事記録を管理するためのテーブル。

カラム:

id: SERIAL (主キー)

user_id: UUID (外部キー、usersテーブルのidを参照)

breakfast: TEXT

lunch: TEXT

dinner: TEXT

snack: TEXT

created_at: TIMESTAMP (デフォルトで現在のタイムスタンプ)
meal_plans テーブル

目的: 食事プランを管理するためのテーブル。

カラム:

id: SERIAL (主キー)

user_id: UUID (外部キー、usersテーブルのidを参照)

breakfast: TEXT

lunch: TEXT

dinner: TEXT

snack: TEXT

created_at: TIMESTAMP (デフォルトで現在のタイムスタンプ)
weight_records テーブル

目的: 体重記録を管理するためのテーブル。

カラム:

id: SERIAL (主キー)

user_id: UUID (外部キー、usersテーブルのidを参照)

weight: FLOAT

recorded_at: TIMESTAMP (デフォルトで現在のタイムスタンプ)
これを踏まえて、それぞれのファイルのコードを生成してください。
とりあえず認証機能はできたぞー

亀ちゃん

20241024(21:30)

データベースのCreate、はできたので
Read Update Deleteを実装する

亀ちゃん

このウェブアプリは、筋トレで体を大きくしたい、筋肉をつけたい人のために作ったアプリです。
筋トレを頑張っているのに、なかなか体が大きくならない…そんな風に感じたことはありませんか？その理由のひとつは、日々の摂取カロリーが足りていないことです。でも、日々忙しいビジネスマンは、毎日カロリーの事を考えて食事をする余裕なんてありませんよね。
でも、このアプリを使って食事をすれば、あっという間に増量し、ムキムキの体を手に入れることができます。このアプリがあなたの食事とカロリーを管理してくれます。美しい肉体を手に入れましょう。

このスクラップは18日前にクローズされました