🤖

【個人開発】AIとペアプロしたら、日程調整ツールが「ユーザーに使われるプロダクト」へと覚醒した話

に公開
Next.js
PWA
初心者
個人開発
antigravity
tech

はじめに

こんにちは、@n_kemmochiです。
GoogleのAI「Antigravity」とのペアプログラミングで開発している日程調整ツール「ScheduLinx」。

これまでの記事:

  1. 【個人開発】GoogleのAI「Antigravity」とペアプロしたら、日程調整ツールが爆速で完成した話
  2. 【個人開発】AIとペアプロしたら、一晩で日程調整ツールが「実用レベル」に進化した話

爆速でのプロトタイプ完成、一晩での実用化に続き、今回は**「ユーザーに使ってもらい、定着してもらう」** ためのグロース施策を一気に実装しました。

「PWA対応」「Chrome拡張機能」「SNSシェア」「セキュリティ強化」……これらを一人でやると数週間はかかりそうですが、AIとペアプロすることでわずか数時間で実装完了しました。
今回は、個人開発アプリを「野良アプリ」から「プロダクト」に引き上げるために実装した5つの機能と、AIとの共創プロセスについて共有します。

1. PWA対応 (スマホホーム画面への追加)

スマホユーザーにとって、毎回ブラウザを開いてURLを入力するのは手間です。
AIに「PWA対応したい」と伝えると、即座に manifest.json のテンプレートと layout.tsx へのメタデータ追加コードを提示してくれました。

実装のポイント

  • public/manifest.json を作成し、アイコンやテーマカラーを定義。
  • layout.tsx の metadata に manifest へのリンクを追加。
  • これだけで、iOS/Androidの「ホーム画面に追加」に対応できます。

2. Google SheetsをDB代わりにしたフィードバックフォーム

個人開発では、ユーザーの声を聞く仕組みが重要ですが、専用の管理画面を作るのはコストがかかります。
「スプレッドシートに保存したい」という要望に対し、AIは googleapis を使ったAPIルートの実装から、Google Cloudの認証設定手順まで完璧にガイドしてくれました。

技術スタック

  • googleapis (Node.js client)
  • Google Cloud Service Account
  • Next.js API Route (/api/feedback)

メリット

  • 管理画面の実装ゼロ。
  • スマホからスプレッドシートを見るだけで、リアルタイムに要望を確認可能。
  • 無料枠で十分運用可能。

3. Chrome拡張機能での「ワンクリック取り込み」

「調整さん」や「伝助」のURLをコピペするのが面倒…という課題に対し、Chrome拡張機能をプロトタイプ開発しました。
私にとってChrome拡張機能は未知の領域でしたが、AIが manifest.json popup.js popup.html の一式を生成し、Webアプリ側との連携ロジック（URLパラメータ経由でのデータ渡し）まで設計してくれました。

仕組み

  1. 拡張機能のポップアップボタンを押す。
  2. 現在のタブのURLを取得 (chrome.tabs.query)。
  3. ScheduLinxを開き、クエリパラメータとしてURLを渡す (?importUrl=...)。
  4. ScheduLinx側で useSearchParams を検知し、自動で取り込みモーダルを開く。

これにより、UXが劇的に向上しました。

4. セキュリティ強化 (SSRF対策 & 入力制限)

外部URLを取り込む機能 (/api/parse) には、SSRF (Server-Side Request Forgery) のリスクがあります。
AIにセキュリティレビューを依頼したところ、即座にこの脆弱性を指摘し、ドメイン許可リストの実装コードを提案してくれました。

  • ドメイン許可リスト: densuke.biz, chouseisan.com など、許可されたドメイン以外はリクエストを拒否。
  • 入力バリデーション: フィードバックフォームの文字数制限など。

自分一人では見落としがちなセキュリティホールも、AIがペアプロ相手だと安心です。

5. SNSシェア機能 (Web Share API & Fallback)

ユーザー数を増やすため、X (Twitter), LINE, Facebook へのシェアボタンを実装しました。
ここでは「スマホならネイティブのシェア機能を使いたい」というこだわりに対し、AIが navigator.share の判定ロジックと、PC/スマホでのUI出し分けを実装してくれました。

スマホとPCの出し分け

  • スマホ: navigator.share (Web Share API) を使用。OS標準のシェア画面が開き、LINEやSlackなど好きなアプリを選べます。
  • PC: navigator.share が非対応の環境では、各SNSのシェアボタンを個別に表示。
// Web Share APIの使用例
const handleNativeShare = async () => {
  if (navigator.share) {
    await navigator.share({
      title: 'ScheduLinx',
      text: '...',
      url: '...',
    });
  }
};

まとめ

機能を作るだけでなく、「使いやすさ」「安全性」「拡散の仕組み」を整えることで、アプリの完成度が一段階上がりました。
これら全てを短時間で実現できたのは、「実装の詳細はAIに任せ、人間は仕様とUXの意思決定に集中する」 という新しい開発スタイルのおかげです。

ScheduLinxは現在ベータ版として公開中です。ぜひ使ってみてください！
[https://schedule-manager-beta.vercel.app]

Discussion