Closed9

個人開発03：ノウハウやメモなど

NekoAllergyNekoAllergy

はじめに

  • 個人開発時の個人的なメモをオープンにする試み

技術スタック

  • Next.js 15.5.3 + TypeScript
  • TailwindCSS 4
  • shadcnui shadcn.io
  • lucide-react
    （開発状況によって変化する可能性あり）

周辺スタック

  • VScode
  • ClaudeCode（Proプラン）

サービス概要

  • カメラと被写体のレイアウトをカスタマイズし、位置関係を可視化/編集できるツール

背景

  • 私自身がもともと映像製作やカメラ、撮影が趣味
  • 撮影の前には、どのカメラで、誰を、どこから撮影する、といった位置関係を図示することで、イメージを掴む必要がある
  • その際、紙に手書きしたり、パワポで簡易的に図示したりして作成していた
  • 使い勝手の良い専用のアプリがあれば、作業効率UPが見込める

ターゲット

  • 個人の映像製作者（ユースケース：YouYube撮影、MV撮影、SNS撮影など）

MVP

  • 俯瞰図のキャンバス
  • カメラオブジェクトと人物オブジェクトの追加/移動/削除が可能
  • カメラから矢印が伸びて、人物オブジェクトと結合できる。（撮影被写体を図示）
  • 視野角（ズーム）の調整

拡張

  • レイアウト図のエクスポート
  • 複数レイアウトの可視化（複数シーンの概念）
  • ユーザログインによる、プロジェクト作成/保持/参照
  • ユースケース/カメラ台数/被写体数などを自然言語で指示すると、最適なカメラ配置を提案してくれるLLMシステム
NekoAllergyNekoAllergy

10/19

  • 前からちょっとずつ作成していたため、実はもうほぼ完成している（製作期間：1週間くらい？）
  • 使い方ページを追加
  • cloud runへデプロイ、cloudflareによるDNS/CDNと接続、GA追加
  • プロモーション文章作成
NekoAllergyNekoAllergy

メモ

  • 本アプリはClaudeCodeで作成した
  • 同じような機能を持ったアプリをv0で作れるのかを試してみた。
  • 結果、めっちゃ速攻で作ってくれた。しかもシンプルでクールな見た目

    v0で10ラリーくらいしたら作れた見た目
  • これでいいじゃん。コンポーネント作成アプリだと思ってたけど、v0に可能性を感じた
NekoAllergyNekoAllergy

メモ

  • コメダ珈琲のWifiでClaudeCodeが使えなくなった。。
  • Unable to connect to API due to poor internet connectionと表示され、次へ進まない。
  • コメダのWifiの接続UIが変わってたから、なんか新システムに変えたのかも。そのせい？
  • もしくは、ClaudeCodeのアプデ？
  • スマホのデザリングで対応中...
NekoAllergyNekoAllergy

メモ

  • AIを使えば誰でもアプリを作れる。
  • この言葉をもう少し分解すると、思いついたアプリやサービスの、UIとロジックはAIが実装してくれる。
  • そこで、いまこの時点で必要なのは、UXの知識とそれを考慮した実装ではないかと予想
  • すなわち、人間にとってどれくらい使いやすいサービスになっているか、は現状AIが関与しにくい領域
  • これを踏まえて、下記の「Google UX Design Certificate」コースのYouTubeを視聴

https://www.youtube.com/watch?v=2QQQtiFwXjU

NekoAllergyNekoAllergy

メモ

  • 現時点のLLMコード生成においてはUXが重要視されると思う。
  • おすすめ　「融けるデザイン ―ハード×ソフト×ネット時代の新たな設計論」　↓

https://amzn.asia/d/5MkqPbG

  • UXやユーザビリティと聞くと、「形が〜、色が〜、フォントが〜」というレイアウト論やスタイル論になりがち
  • ユーザビリティの本質はそこではない
  • 本書では「メタメディア」「透明性」という観点を軸において、「分かりやすいインターフェースとは何か」を説明している
  • すごく腑に落ちる
NekoAllergyNekoAllergy

10/23

  • 10:30-13:30 @スタバ
  • Dokocam-v1リリース
  • Xで宣伝 / Zenn記事執筆
  • 次期アプリ考案
  • portfolioサイト作成
NekoAllergyNekoAllergy

メモ

  • firebaseとgoogle cloudのプロジェクトを整理する必要あり
  • google cloudの特定プロジェクトにcloud runをデプロイしてるくせに、firebaseはアプリごとにプロジェクト作成してしまっている。
  • アプリごとにfirebaseのプロジェクトは分けたいが、請求先アカウントの上限に引っ掛かる可能性あり
  • アプリ=gcloudプロジェクト=firebaseプロジェクトが理想？
NekoAllergyNekoAllergy

メモ

  • いままであまり活用してなかったけど、npmスクリプトで管理した方が便利かも。
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "products": "tsx scripts/manage-products.ts",
    "blog": "tsx scripts/manage-blog.ts",
    "deploy": "bash scripts/deploy-cloud-run.sh"
  },
このスクラップは2日前にクローズされました